@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped:wght@100;200;300;400;500;600;700&family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');

:root {
  --primary: #000000;
  --secondary: #365ab5;
  --dark: #424242;
  --dark-mode: #222222;
  --light: #F8F9FA;
  --border: #E0E0E0;
  --color-text: #333333;
  --color-heading: #424242;
}

body {
  background-color: var(--light);
  color: var(--color-text);
  font-family: "IBM Plex Sans Thai", sans-serif;
}

#dark-mode-toggle {
	background: url(/sites/default/files/special/toggle-dark-light-mode_0.png) no-repeat;
  background-size: 100% 100%;
  text-indent: -5000px;
  width: 50px;
  height: 25px;
  position: fixed;
  top: 15px;
  left: 25px;
  z-index: 1000;
}

.user-logged-in #dark-mode-toggle {
	top:100px;
}

.site-logo img {
	max-height:60px;
}

.site-name,
.menu-wrap .menu, .menu-wrap .menu a {
	font-family: "IBM Plex Sans Thai", sans-serif;
	text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight:600;
  line-height:1.2em;
  margin:0 0 0.4em 0;
}

h1 { font-size:1.6em; }
h2 { font-size:1.5em; }
h3 { font-size:1.4em; }
h4 { font-size:1.3em; }
h5 { font-size:1.2em; }
h6 { font-size:1.1em; }

code, pre {
	background:var(--border);
	font-family: 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
}

strong {
	font-weight:700;
}
em {
	font-style:italic;
}

button {
  background-color: var(--primary);
  color: var(--light);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}

.card {
  border: 1px solid var(--border);
  background-color:var(--light);
  padding: 15px;
}

.header {
	padding:2em 0;
}

.container {
	max-width:1240px;
	padding:0 25px;
}


#main {
	min-width: 0;
}


.node-content-preview {
	display:flex;
	gap:20px;
	flex-direction:column;
}
.node-content-thumbail {
	position:relative;
}
.node-content-thumbail img {
	border:1px solid var(--dark);
	border-radius:10px;
	margin:0;
}
.node-content-tags {
	position:absolute;
	top:10px;
	left:15px;
}
.node-content-tags a {
	background: var(--light);
  border-radius: 5px;
  color: var(--primary);
  padding: 2px 6px;
  font-size: 0.7em;
  margin-right: 10px;
  text-transform: uppercase;
  font-weight:700;
  border:1px solid var(--dark);
}

.node-content-created {
	font-size:0.8em;
}
.node-content-title {
	font-size:1.3em;
	font-weight:700;
	line-height:1.2em;
}
.node-content-summary {
	font-size:0.8em;
}
.node-content-read-more {
	padding:10px 0;
}
.node-content-read-more a {
	background: var(--primary);
  border-radius: 10px;
  color: var(--light);
  padding: 0 10px;
  font-size: 0.8em;
  letter-spacing:1px;
}
.node-page .views-row {
	margin:0 0 50px 0;
}

.block-related-content,
.term-page {
  display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: 50px 20px;
}
.block-related-content header,
.term-page header,
.term-page .pager {
	grid-column: span 1;
}
.block-related-content .node-content-preview,
.term-page .node-content-preview {
	flex-direction:column;
}

.block-related-content header {
	text-align:center;
	padding:3em 0 2em 0;
	font-size:1.5em;
	font-weight:700;
}

article h1, article h2, article h3, article h4, article h5, article h6 {
  margin:1.2em 0 0.4em 0;
}
article .field--name-body a {
	text-decoration-line: underline;
  text-decoration-style: dotted;
}

article table tr th {
	background:#d1d1d1;
	border: 1px solid #999;
}
article table tr td {
	background:#efefef;
	border: 1px solid #999;
}


.dark-mode article table tr th {
	background:var(--dark-all);
}
.dark-mode article table tr td {
	background:var(--dark);
}

article ul,
article ol {
	margin:0 0 1.2rem 2rem;
}

article blockquote {
	padding: 1rem 1rem 1rem 5rem;
  min-height: 100px;
  background: url(/sites/default/files/special/icon-blockquote.png) no-repeat 10px 10px;
  font-size: 1.1em;
}

iframe[src^="https://www.youtube.com/embed/"],
iframe[src^="https://www.youtube-nocookie.com/embed/"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  display: block;
  border: 0;
}

.node-taxonomy-container,
.taxonomy-terms {
	width:auto;
	display:inline-block;
	margin:0 !important;
	padding:0;
}
.taxonomy-term,
.taxonomy-term:not(:last-child) {
  width:auto;
  display:inline-block;
  margin:0 5px 15px 0 !important;
  padding:0;
}

.taxonomy-term a {
	padding:0 10px;
	border:none;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-top-left-radius: 5px;
  margin-right:0;
}


.note-box {
	padding:20px;
	background:var(--border);
	margin:0 0 1.2rem 0;
}
.note-box h2:first-child {
	margin:0 0 0.4em 0;
}
.note-box p:last-child {
	margin:0;
}

.dark-mode .note-box {
	background:var(--dark);
}


.feed-icon {
	display:none;
}

.footer {
	background-color:var(--border);
}
.footer-bottom.footer {
	padding:0 0 10em 0;
}

.service-home-wrapper {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.service-home h2 {
	margin:0;
}


.tagadelic-page .item-list ul {
	display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 20px;
}


/* about comments */

#comments {
  background: #eee;
  padding: 10px 20px;
}
#comments .comment {
	background:#fff;
}
#comments .comment-header,
#comments .comment-meta {
	padding:0;
}
#comments .comment-title {
	display:none;
}


#block-thex-fakecommentbox {
	width: 100%;
  background: #eee;
  margin: 0;
  padding: 20px;
}
.fake-comment-box {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  cursor: not-allowed;
  resize: vertical;
}

.fake-comment-box::placeholder {
  color: #777;
  font-style: italic;
}


#comments .form-submit,
.login-button-for-comment {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #007bff;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}
#comments .form-submit:hover,
.login-button-for-comment:hover {
  background-color: #0056b3;
}

#block-thex-warningbeforecomment {
  background: #eee;
  padding: 0 20px 10px 20px;
}

.form-item-notify.form-type-checkbox {
	display:flex;
	margin:1rem 0 0 0;
	gap: 10px;
}
#edit-notify-type {
	margin:0 0 1rem 0;
}
.form-item-notify-type.form-type-radio {
	display:flex;
	margin:0 0 0 2rem;
	gap: 10px;
}

#comments .comment.unpublished {
	opacity: 0.25;
	background: #fcc;
}



/* -- dark mode css -- */

.dark-mode {
	background-color: var(--dark-mode);
	color: var(--light);
}
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: var(--light);
}
.dark-mode a,
.dark-mode .menu-wrap .menu,
.dark-mode .menu-wrap .menu a {
	color: var(--light);
}
.dark-mode .node-content-tags a {
	background:var(--dark);
}
.dark-mode .node-content-read-more a {
	background:var(--light);
	color:var(--dark-mode);
}
.dark-mode .footer,
.dark-mode .sidebar .block{
	background-color:var(--dark);	
}
.dark-mode code,
.dark-mode pre {
	background:var(--dark);
}


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

	.user-logged-in #dark-mode-toggle {
		top:65px;
		left:85px;
	}

	.node-content-preview {
		display:flex;
		gap:20px;
		flex-direction:row;
	}

	.node-content-thumbail,
	.node-content-detail {
		flex: 1 1 50%;
	}

	.block-related-content,
	.term-page {
	  grid-template-columns: repeat(3,minmax(0,1fr));
	}
	.block-related-content header,
	.term-page header,
	.term-page .pager {
		grid-column: span 3;
	}

}


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

	.user-logged-in #dark-mode-toggle {
		top:100px;
		left:100px;
	}
	
	.region-primary-menu {
		display:flex;
	}
	
	
	.tagadelic-page .item-list ul {
		display: grid;
	  grid-template-columns: repeat(4,minmax(0,1fr));
	  gap: 0 20px;
	}
}




/* ============================================
   Promo Block: เว็บไซต์สร้าง QR Code ฟรี
   ใช้กับ .promo-qr-block ตาม HTML ที่กำหนด
   ============================================ */

.promo-qr-block {
  /* ปรับสีทั้งบล็อกได้จากตัวแปรตรงนี้ */
  --qr-ink: #10243e;        /* น้ำเงินเข้ม (ตัวอักษรหลัก) */
  --qr-accent: #1467d2;     /* น้ำเงินโทนพร้อมเพย์/ธนาคาร */
  --qr-accent-dark: #0f4fa8;
  --qr-muted: #5b6b7f;
  --qr-line: #dbe4ef;

  position: relative;
  max-width: 420px;
  margin: 24px auto;
  padding: 30px 26px 26px;
  background: #ffffff;
  border: 1px solid var(--qr-line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16, 36, 62, 0.08);
  font-family: "Prompt", "Sarabun", "Noto Sans Thai", system-ui, sans-serif;
  color: var(--qr-ink);
  text-align: center;
  overflow: hidden;
}

/* หัวเรื่อง */
.promo-qr-header {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

/* หัวเรื่องรอง: ประเภท QR ที่รองรับ */
.promo-qr-sub-header {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--qr-accent);
  letter-spacing: 0.5px;
}

/* เนื้อหา */
.promo-qr-body {
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #33465e;
}

/* ปุ่ม Call to Action */
.promo-qr-call2action {
  margin-top: 18px;
}

.promo-qr-call2action a {
  display: inline-block;
  padding: 12px 30px;
  background: var(--qr-accent);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(20, 103, 210, 0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.promo-qr-call2action a:hover {
  background: var(--qr-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(20, 103, 210, 0.4);
}

.promo-qr-call2action a:focus-visible {
  outline: 3px solid var(--qr-accent-dark);
  outline-offset: 3px;
}

/* รูปตัวอย่าง QR Code ด้านล่าง */
.promo-qr-body img {
  display: block;
  margin: 8px auto 0;
  width: 100%;
  max-width: 200px;
  height: auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--qr-line);
  border-radius: 12px;
}

/* จอเล็ก */
@media (max-width: 480px) {
  .promo-qr-block {
    margin: 16px 12px;
    padding: 24px 18px 20px;
  }
  .promo-qr-header { font-size: 1.4rem; }
}

/* ผู้ใช้ที่ปิดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  .promo-qr-call2action a {
    transition: none;
  }
  .promo-qr-call2action a:hover {
    transform: none;
  }
}