.destination-onpage .blog-prose.onpage-magazine:not(:has([data-onpage])){max-width:850px}
.onpage-canvas{position:relative;min-width:0}.blog-writing #blog-visual.onpage-editor{padding-top:68px}.onpage-editor>section[data-onpage]{scroll-margin-top:145px}.onpage-block-outline{position:absolute;border:2px solid #768b5d;border-radius:15px;pointer-events:none;z-index:3}.onpage-block-controls{position:absolute;left:12px;right:12px;z-index:8;display:flex;align-items:center;gap:6px;max-width:100%;padding:5px 7px 5px 12px;border:1px solid #c5d1b7;border-radius:9px;background:#f7faef;box-shadow:0 4px 14px #17231a12;color:#35452b;font:12px/1.4 Tahoma,Arial,sans-serif}.onpage-block-controls>span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.onpage-block-controls button{min-width:50px;min-height:38px;padding:8px;border:1px solid #cbd5c0;border-radius:6px;background:white;color:#314328;font:inherit;cursor:pointer;white-space:nowrap}.onpage-block-controls button:disabled{opacity:.35;cursor:default}.onpage-block-controls button:focus-visible{outline:2px solid #536b3e;outline-offset:2px}.onpage-block-controls[hidden],.onpage-block-outline[hidden]{display:none}@media(max-width:520px){.onpage-block-controls{left:6px;right:6px;font-size:11px;padding-left:8px}.onpage-block-controls button{min-height:44px;min-width:44px;padding:7px}}
.onpage-editor figure{position:relative}.onpage-editor figure:after{content:'แนะนำ 1600 × 1067 px\A ประมาณ 3:2';position:absolute;left:0;right:0;bottom:0;padding:8px 10px;border-top:1px solid #dbe1d8;background:#f5f8f0ee;color:#526147;font:11px/1.6 Tahoma,Arial,sans-serif;white-space:pre-line;text-align:center;pointer-events:none;z-index:2}.onpage-editor [data-onpage=intro] figure:after{content:'แนะนำ 1920 × 1080 px\A อัตราส่วน 16:9'}.onpage-editor [data-onpage=split] figure:after,.onpage-editor [data-onpage=split-reverse] figure:after{content:'แนะนำ 1320 × 1200 px\A อัตราส่วน 11:10'}.onpage-editor [data-onpage=gallery]>figure:first-child:after{content:'ช่องใหญ่ · 1400 × 1000 px\A อัตราส่วน 7:5'}.onpage-editor [data-onpage=gallery]>figure:not(:first-child):after{content:'ช่องเล็ก · 1200 × 600 px\A อัตราส่วน 2:1'}#onpage-image-guide,#blog-image-size-guide{padding:12px 14px;border:1px solid #dbe1d8;border-radius:8px;background:#f6f8f2;color:#526147;font-size:12px;line-height:1.8}#onpage-image-guide{margin:0 0 16px}
.onpage-magazine{--op-panel:#1c2220;--op-text:#f5f5ef;--op-muted:#a8b2ac;--op-line:#39423d;--op-accent:#d9e6bf;color:var(--op-text);font-size:16px;line-height:1.95;overflow-wrap:anywhere;min-width:0}
.destination-onpage .blog-prose.onpage-magazine{max-width:none}.onpage-magazine *{box-sizing:border-box}.onpage-magazine h2,.onpage-magazine h3{color:inherit;letter-spacing:-.035em;line-height:1.4}.onpage-magazine h2{font-size:clamp(26px,3.1vw,42px);margin:0 0 22px}.onpage-magazine h3{font-size:21px;margin:0 0 12px}.onpage-magazine p{margin:0 0 18px}.onpage-magazine a{color:inherit}.onpage-magazine>[data-onpage]{margin:48px 0}.onpage-magazine>[data-onpage]:first-child{margin-top:0}.onpage-magazine [data-onpage=kicker]{font-size:10px;line-height:1.6;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--op-accent);margin:0 0 18px}.onpage-magazine figure{margin:0;min-width:0;overflow:hidden;border-radius:20px}.onpage-magazine figure img{display:block;width:100%;height:100%;object-fit:cover;margin:0!important;border-radius:0;max-width:100%}.onpage-magazine figcaption{font-size:12px;padding:10px 0;color:var(--op-muted)}
.onpage-magazine [data-onpage=intro]{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,5vw,68px);border-radius:26px;background:radial-gradient(ellipse at 90% 0,#3e4c39,transparent 65%),#1b2420}.onpage-magazine [data-onpage=intro] h2{font-size:clamp(36px,5vw,64px);max-width:790px}.onpage-magazine [data-onpage=intro]>p:not([data-onpage]){max-width:650px}.onpage-magazine:not(.onpage-editor) [data-onpage=intro]:has(img){min-height:480px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}.onpage-magazine:not(.onpage-editor) [data-onpage=intro]>figure{position:absolute;inset:0;z-index:-1;border-radius:0}.onpage-magazine:not(.onpage-editor) [data-onpage=intro]>figure:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#061510bc,#05120d10),linear-gradient(0deg,#04130ce8,transparent 85%)}
.onpage-magazine [data-onpage=cards]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:op-card}.onpage-magazine [data-onpage=cards]>article{position:relative;padding:30px 26px;background:var(--op-panel);border:1px solid var(--op-line);border-radius:18px;counter-increment:op-card;min-width:0}.onpage-magazine [data-onpage=cards]>article:before{content:'0' counter(op-card);display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--op-accent);margin-bottom:25px}.onpage-magazine [data-onpage=cards]>article p{font-size:14px;color:var(--op-muted);margin-bottom:0}
.onpage-magazine [data-onpage=split],.onpage-magazine [data-onpage=split-reverse]{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(24px,5vw,64px)}.onpage-magazine [data-onpage=split]>figure,.onpage-magazine [data-onpage=split-reverse]>figure{aspect-ratio:1.1}.onpage-magazine [data-onpage=split-reverse]>figure{order:2}.onpage-magazine [data-onpage=split]>div>p:not([data-onpage]),.onpage-magazine [data-onpage=split-reverse]>div>p:not([data-onpage]){color:var(--op-muted)}
.onpage-magazine [data-onpage=gallery]{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:230px 230px;gap:14px}.onpage-magazine [data-onpage=gallery]>figure:first-child{grid-row:span 2}.onpage-magazine [data-onpage=gallery]>figure{border-radius:16px}.onpage-magazine [data-onpage=callout]{position:relative;padding:clamp(26px,4vw,48px);border-left:3px solid var(--op-accent);border-radius:0 20px 20px 0;background:var(--op-panel)}.onpage-magazine [data-onpage=callout] p:last-child{color:var(--op-muted);margin-bottom:0}
.onpage-magazine [data-onpage=faq]{max-width:900px;margin-left:auto;margin-right:auto}.onpage-magazine [data-onpage=faq] details{border-bottom:1px solid var(--op-line);padding:22px 0}.onpage-magazine [data-onpage=faq] summary{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:18px;font-weight:600;line-height:1.7;list-style:none;cursor:pointer}.onpage-magazine [data-onpage=faq] summary::-webkit-details-marker{display:none}.onpage-magazine [data-onpage=faq] summary:after{content:'+';font-size:24px;font-weight:400;color:var(--op-accent)}.onpage-magazine [data-onpage=faq] details[open] summary:after{content:'−'}.onpage-magazine [data-onpage=faq] details>p{margin:16px 40px 0 0;color:var(--op-muted);font-size:15px}.onpage-magazine summary:focus-visible,.onpage-magazine a:focus-visible{outline:2px solid var(--op-accent);outline-offset:6px;border-radius:3px}
.onpage-magazine [data-onpage=cta]{text-align:center;padding:clamp(30px,5vw,64px);border-radius:24px;background:#dce6c7;color:#1c291c}.onpage-magazine [data-onpage=cta] [data-onpage=kicker]{color:#4f6344}.onpage-magazine [data-onpage=cta]>p:not([data-onpage]){max-width:620px;margin:0 auto 24px}.onpage-magazine a[data-onpage=button]{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:50px;background:#17231a;color:white;font-size:14px;font-weight:600;text-decoration:none}.onpage-magazine a[data-onpage=button]:hover{background:#344433}
.onpage-magazine:not(.onpage-editor) figure:not(:has(img)){display:none}.onpage-magazine:not(.onpage-editor) [data-onpage=split]:not(:has(img)),.onpage-magazine:not(.onpage-editor) [data-onpage=split-reverse]:not(:has(img)){grid-template-columns:1fr;max-width:850px;margin-left:auto;margin-right:auto}.onpage-magazine:not(.onpage-editor) [data-onpage=mosaic]:not(:has(img)){display:none}.onpage-magazine [data-onpage=gallery]:has(>figure:only-child){grid-template-columns:1fr;grid-template-rows:400px}
.onpage-editor{--op-panel:#f6f7f4;--op-text:#202720;--op-muted:#657164;--op-line:#dbe1d8;--op-accent:#556c42}.onpage-editor [data-onpage=intro]{background:#eef2e8}.onpage-editor [data-onpage=intro] h2{font-size:34px}.onpage-editor [data-onpage=cards]{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.onpage-editor [data-onpage=cards]>article{padding:20px 16px}.onpage-editor [data-onpage=split],.onpage-editor [data-onpage=split-reverse]{gap:24px}.onpage-editor [data-onpage] h2{font-size:27px}.onpage-editor figure:not(:has(img)){min-height:170px;display:flex;align-items:center;justify-content:center;position:relative;border:1px dashed #aebaa4;background:#f2f5ed;cursor:text}.onpage-editor figure:not(:has(img)):before{content:'คลิกที่นี่ แล้วกด “เพิ่มรูปภาพ”';font-size:12px;color:#68775e;position:absolute;pointer-events:none}.onpage-editor [data-onpage=gallery]{grid-template-rows:170px 170px}.onpage-editor [data-onpage=gallery]>figure:first-child{grid-row:span 2}.onpage-editor [data-onpage=intro]>figure{margin-top:20px}.onpage-editor [data-onpage=faq] details{padding:16px 0}.onpage-editor [data-onpage=faq] summary{font-size:16px}
.onpage-block-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 8px;font-size:12px}.onpage-block-tools>details{position:relative}.onpage-block-tools summary,.onpage-block-tools>button{cursor:pointer;border:1px solid #d8ddd3;padding:10px 14px;border-radius:7px;background:#f6f7f4;color:#26311f;font:inherit;min-height:42px}.onpage-block-tools a{text-decoration:underline;text-underline-offset:3px}.onpage-block-options{position:absolute;left:0;top:calc(100% + 8px);z-index:15;background:#fff;border:1px solid #ddd;border-radius:10px;padding:8px;display:grid;width:230px;box-shadow:0 12px 35px #0002}.onpage-block-options button{text-align:left;padding:12px;border:0;background:transparent;border-radius:6px;font:inherit;cursor:pointer}.onpage-block-options button:hover{background:#f0f3e9}.onpage-block-tools button:disabled{opacity:.45;cursor:wait}
.onpage-preview-dialog{width:min(1160px,calc(100vw - 24px));max-height:94vh;overflow:auto;padding:0 32px 32px;background:#101713;color:white;border:1px solid #3c463e;border-radius:18px}.onpage-preview-dialog::backdrop{background:#000b}.onpage-preview-bar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:5;background:#101713;padding:18px 0;border-bottom:1px solid #354036;margin-bottom:26px;gap:18px}.onpage-preview-bar h2{font-size:16px;margin:0}.onpage-preview-bar button{min-height:40px;padding:8px 16px;background:#263128;border:1px solid #45523f;border-radius:8px;color:white;cursor:pointer;font:inherit}
@media(prefers-reduced-motion:no-preference){.onpage-magazine figure img{transition:transform .7s ease}.onpage-magazine:not(.onpage-editor) figure:hover img{transform:scale(1.035)}}
@media(max-width:900px){.onpage-editor [data-onpage=cards]{grid-template-columns:1fr}.onpage-editor [data-onpage=split],.onpage-editor [data-onpage=split-reverse]{grid-template-columns:1fr}.onpage-editor [data-onpage=split-reverse]>figure{order:0}}
@media(max-width:650px){.onpage-magazine{font-size:15px}.onpage-magazine>[data-onpage]{margin:32px 0}.onpage-magazine [data-onpage=intro]{border-radius:18px}.onpage-magazine:not(.onpage-editor) [data-onpage=intro]:has(img){min-height:420px}.onpage-magazine [data-onpage=cards]{grid-template-columns:1fr}.onpage-magazine [data-onpage=cards]>article{padding:24px}.onpage-magazine [data-onpage=cards]>article:before{margin-bottom:16px}.onpage-magazine [data-onpage=split],.onpage-magazine [data-onpage=split-reverse]{grid-template-columns:1fr;gap:24px}.onpage-magazine [data-onpage=split-reverse]>figure{order:0}.onpage-magazine [data-onpage=split]>figure,.onpage-magazine [data-onpage=split-reverse]>figure{aspect-ratio:1.3}.onpage-magazine [data-onpage=gallery]{grid-template-columns:1fr 1fr;grid-template-rows:250px 150px;gap:10px}.onpage-magazine [data-onpage=gallery]>figure:first-child{grid-row:auto;grid-column:span 2}.onpage-magazine [data-onpage=faq] summary{font-size:16px}.onpage-magazine [data-onpage=faq] details>p{margin-right:0}.onpage-preview-dialog{padding:0 16px 20px}.onpage-block-tools{gap:8px}.onpage-block-tools summary,.onpage-block-tools>button{padding:10px}}