@font-face {
	font-family: 'notosanslight';
	src: url('fonts/notosans_light-webfont.eot');
	src: url('fonts/notosans_light-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/notosans_light-webfont.woff2') format('woff2'),
		 url('fonts/notosans_light-webfont.woff') format('woff'),
		 url('fonts/notosans_light-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'notosansmedium';
	src: url('fonts/notosans_medium-webfont.eot');
	src: url('fonts/notosans_medium-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/notosans_medium-webfont.woff2') format('woff2'),
		 url('fonts/notosans_medium-webfont.woff') format('woff'),
		 url('fonts/notosans_medium-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'notosansregular';
	src: url('fonts/notosans_regular-webfont.eot');
	src: url('fonts/notosans_regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/notosans_regular-webfont.woff2') format('woff2'),
		 url('fonts/notosans_regular-webfont.woff') format('woff'),
		 url('fonts/notosans_regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

*{ font-family: Thonburi, Tahoma, sans-serif; color:#333; font-size:16px; box-sizing:border-box; }
body{ margin:0; padding:0; }
a{ color:#00bf6c; }

.spb-page-wrap{ width:100%; max-width:820px; margin:0 auto; }
@media only screen and (max-width:767px){
	.spb-page-wrap{ padding:0 10px; }
}

/* --- เนื้อหาจาก officer builder (ต้องตรงกับ .spb-preview-* ในหน้า builder) --- */
.spb-preview-heading{ font-weight:800; font-family:notosansmedium; margin:30px 0 10px; white-space:pre-line; }
.spb-preview-list{ list-style:none; margin:0 0 12px; padding-left:20px; color:#555; line-height:25px; }
.spb-preview-list li{ margin-bottom:20px; }
.spb-preview-list li a{ color:var(--marker-color, #00bf6c); text-decoration:underline; }
.spb-preview-list-bullet li:not(.spb-preview-item-nomarker){ position:relative; }
.spb-preview-list-bullet li:not(.spb-preview-item-nomarker):before{ content:''; position:absolute; left:-20px; top:.55em; width:10px; height:10px; border-radius:50%; background:var(--marker-color, #00bf6c); }
.spb-preview-list li.spb-preview-item-nomarker{ margin-left:-20px; }
.spb-preview-image{ display:block; width:100%; margin-bottom:12px; border-radius:4px; }
.spb-preview-button-row{ margin-bottom:14px; }
.spb-preview-button{ display:inline-block; color:#fff; font-family:notosansmedium; text-decoration:none; border-radius:999px; }
.spb-preview-bookgrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.spb-preview-bookgrid-item img{ display:block; width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.15); }
@media only screen and (max-width:500px){
	.spb-preview-bookgrid{ grid-template-columns:repeat(2, 1fr); }
}

/* --- แบนเนอร์หลัก: โชว์ตามขนาดจอจริง (เว็บ/มือถือ) แทนการแช่แข็งไว้แบบเดียว --- */
.spb-banner-web{ display:block; margin:0 auto 10px; width:100%; max-width:800px; }
.spb-banner-mobile{ display:none; margin:0 auto 10px; width:100%; max-width:600px; }
@media only screen and (max-width:767px){
	.spb-banner-web{ display:none; }
	.spb-banner-mobile{ display:block; }
}

/* --- ปุ่มแชร์ social แบบไอคอน (ตรงกับของจริงในแคมเปญเก่า) --- */
.spb-preview-share-outer{ background:#eee; padding:20px 18px; text-align:center; margin-bottom:16px; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.spb-preview-share-title{ font-size:12.5px; color:#555; margin-bottom:12px; }
.spb-preview-share{ display:table; margin:0 auto; }
.btn_social{ width:80px; height:32px; border-radius:6px; margin:0 7px; float:left; position:relative; line-height:32px; color:#fff; font-size:12px; text-decoration:none; cursor:pointer; }
.btn_fb{ background-color:#4662be; padding-left:17px; }
.btn_line{ background-color:#6fc32e; padding-left:20px; }
.btn_twitter{ background-color:#1999d1; padding-left:20px; }
.btn_social img{ position:absolute; top:9px; }
.btn_fb img{ width:7px; left:20px; }
.btn_line img{ width:20px; left:6px; top:7px; }
.btn_twitter img{ width:17px; left:15px; }

/* --- footer ท้ายหน้า (คงที่ทุกหน้า ไม่ได้มาจาก officer) --- */
#footer{ text-align:center; background-color:#fafafa; padding:20px 10px; margin-top:20px; }
#footer p{ margin:5px 0 0; font-size:12px; color:#7b7b7b; }
#footer .footer-domain{ font-size:16px; margin-top:10px; margin-bottom:10px; }
#footer .footer-contact{ margin-top:10px; }
#footer .footer-contact a{ color:#00af70; font-size:12px; text-decoration:underline; }

.spb-not-found{ text-align:center; padding:80px 20px; color:#999; }