:root{
--bg:#fff;--fg:#0f172a;--muted:#475569;--brand: midnightblue;--card:#f8fafc;--border:#e2e8f0;
--maxw:1200px
}
@media (prefers-color-scheme: dark){
:root{--bg:#0b1220;--fg:#e5e7eb;--muted:#94a3b8;--card:#0f172a;--border:#1f2937}
}
[data-theme="light"]{--bg:#fff;--fg:#0f172a;--muted:#475569;--card:#f8fafc;--border:#e2e8f0}
[data-theme="dark"]{--bg:#0b1220;--fg:#e5e7eb;--muted:#94a3b8;--card:#0f172a;--border:#1f2937}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,"Noto Sans Thai",sans-serif;line-height:1.6}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.header_sticky {position:sticky;}
header{top:0;background:var(--bg);border-bottom:1px solid var(--border);z-index:10}
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(12px,2vw,20px)}
.topbar{display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand a{font-weight:700;font-size:clamp(18px,2.8vw,22px)}
nav ul{display:flex;gap:12px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{display:inline-block;padding:8px 10px;border-radius:10px}
nav a[aria-current="page"],nav a:hover{background:var(--card)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2.2vw,20px)}
.hero{background:linear-gradient(180deg,rgba(14,165,233,.1),transparent);border-radius:18px;padding:clamp(18px,3vw,28px);margin-block:clamp(10px,2vw,18px)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(12px,2.2vw,18px)}
.card{background:var(--card);border:1px solid rgba(2,6,23,.08);border-radius:16px;padding:14px}
.muted{color:var(--muted)}
.footer{border-top:1px solid var(--border);margin-top:28px}
img{max-width:100%;height:auto;border-radius:12px}
.breadcrumbs{font-size:.9rem;margin:.5rem 0}
.toc{background:var(--card);padding:12px;border-radius:12px;border:1px solid rgba(2,6,23,.08)}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--brand);color:white;font-weight:600}
.btn:hover{opacity:.95;text-decoration:none}
.taglist a{display:inline-block;padding:6px 10px;border:1px solid rgba(2,6,23,.15);border-radius:999px;margin:4px 6px 0 0}
.notice{font-size:.9rem;background:var(--card);padding:10px;border-radius:10px;border:1px dashed rgba(2,6,23,.25)}
.notice .link-video { font-size: 16px; text-decoration: underline; }
.sr{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{border:1px solid var(--border);padding:8px 10px;border-radius:999px}
/* cookie banner */
.cookie{position:fixed;left:10px;right:10px;bottom:10px;border:1px solid var(--border);background:var(--card);padding:12px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);display:none}
.cards h2, .cards p { margin-top: 5px; margin-bottom: 5px; }
.img-content { text-align: center; }
.img-content img { max-width: 500px; width: 100%; }
.text-center { text-align: center; }
.btn-shop-head { font-weight: bold; font-size: 18px; margin-bottom: 10px; }
.btn-shop-row { font-size: 12px; line-height: 40px; }
.btn-shopee{display: inline;background:linear-gradient(135deg,#ff6a3c,#ff8a5c);color:#fff}
.btn-tiktok{display: inline;background:linear-gradient(135deg,#000000,#242424);color:#fff;position:relative;overflow:hidden}
.btn-lazada{display: inline;background:linear-gradient(135deg,#1e3a8a,#ff6a00);color:#fff}

.embed-responsive {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.embed-responsive.embed-responsive-16by9 {
	padding-bottom: 56.25%;
}