:root { color-scheme: light; --ink:#1c2430; --muted:#5c6775; --line:#e3e8ef; --bg:#f4f6fa; --card:#ffffff; --accent:#15489e; --accent2:#1d64d8; --wash:#eaf0fb; --join:#1f9d55; --login:#ec7a1c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin:0; font-family:"Noto Sans Thai","Leelawadee UI","Segoe UI",sans-serif; color:var(--ink); background:var(--bg); line-height:1.75; }
img { max-width:100%; display:block; }
a { color:var(--accent2); }
.wrap { width:min(1160px, calc(100% - 40px)); margin-inline:auto; }

/* top bar */
.topbar { position:sticky; top:0; z-index:20; background:var(--accent); color:#fff; box-shadow:0 2px 10px rgba(16,34,66,.18); }
.bar-in { display:flex; align-items:center; gap:1.2rem; min-height:60px; }
.brand { color:#fff; text-decoration:none; font-weight:800; font-size:1.35rem; letter-spacing:-.01em; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topnav { display:flex; gap:1.1rem; margin-left:1rem; }
.topnav a { color:rgba(255,255,255,.9); text-decoration:none; font-size:.95rem; }
.topnav a:hover { color:#fff; }
.bar-cta { margin-left:auto; display:flex; gap:.5rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:.45rem 1.1rem; border-radius:7px; font-weight:700; text-decoration:none; font-size:.95rem; border:0; cursor:pointer; }
.btn-join { background:var(--join); color:#fff; }
.btn-login { background:var(--login); color:#fff; }
.btn.lg { min-height:50px; padding:.65rem 1.6rem; font-size:1.05rem; }
.btn:hover { filter:brightness(1.06); }

/* hero */
.hero { background:linear-gradient(180deg, var(--wash), var(--bg)); padding:2.2rem 0 1.4rem; }
.hero-grid { display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:2rem; align-items:center; }
.hero-media { margin:0; border-radius:16px; overflow:hidden; box-shadow:0 20px 44px rgba(16,34,66,.16); background:#0d1830; aspect-ratio:1; }
.hero-media img { width:100%; height:100%; object-fit:cover; }
.eyebrow { margin:0 0 .4rem; color:var(--accent); font-weight:700; letter-spacing:.02em; }
.hero-info h1 { margin:.1rem 0 .8rem; font-family:"Noto Serif Thai","Noto Sans Thai",serif; font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1.3; }
.lede { font-size:1.08rem; }
.hero-info p { margin:0 0 .8rem; color:var(--muted); }
.hero-actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem; }

/* badges */
.badges { background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.1rem 0; }
.badge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.badge { display:flex; gap:.6rem; align-items:flex-start; }
.badge .dot { flex:none; width:18px; height:18px; border-radius:50%; margin-top:.3rem; background:radial-gradient(circle at 35% 30%, var(--accent2), var(--accent)); }
.badge strong { display:block; }
.badge p { margin:.1rem 0 0; color:var(--muted); font-size:.9rem; }

/* content bands */
.band { padding:2rem 0; }
.band h2, .article h2, .faq h2, .related h2 { font-family:"Noto Serif Thai","Noto Sans Thai",serif; font-size:1.45rem; line-height:1.35; margin:1.8rem 0 .6rem; padding-left:.8rem; border-left:4px solid var(--accent); }
.band > .wrap > h2:first-child { margin-top:0; }
.band p, .article p { margin:0 0 .9rem; }
.ticks { list-style:none; padding:0; margin:.4rem 0 1rem; display:grid; gap:.5rem; }
.ticks li { position:relative; padding:.7rem .9rem .7rem 2.3rem; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.ticks li::before { content:"✓"; position:absolute; left:.85rem; top:.7rem; color:var(--join); font-weight:800; }
.steps { margin:.4rem 0 1rem; padding-left:0; list-style:none; counter-reset:s; display:grid; gap:.6rem; }
.steps li { position:relative; padding:.8rem 1rem .8rem 3rem; background:var(--card); border:1px solid var(--line); border-radius:10px; counter-increment:s; }
.steps li::before { content:counter(s); position:absolute; left:.8rem; top:.7rem; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; display:grid; place-items:center; font-size:.9rem; }

/* article */
.article { background:var(--card); border-top:1px solid var(--line); padding:2rem 0; }
.article .wrap { max-width:880px; }
.bridge { padding:.85rem 1rem; background:var(--wash); border-left:4px solid var(--accent); border-radius:0 10px 10px 0; color:var(--ink); }
.bridge a { font-weight:700; }
.entry h2 { font-size:1.6rem; border-left:0; padding-left:0; }
.entry h3 { margin:1.2rem 0 .3rem; font-size:1.12rem; }

/* faq */
.faq { padding:2rem 0; }
.faq-list { display:grid; gap:.6rem; }
.faq details { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.2rem .4rem; }
.faq summary { cursor:pointer; padding:.85rem 1rem; font-weight:700; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color:var(--accent); font-weight:800; }
.faq details[open] summary::after { content:"–"; }
.faq-a { padding:0 1rem 1rem; color:var(--muted); }
.faq-a p { margin:0; }

/* related + footer */
.related-band { padding:1.5rem 0 2.5rem; }
.related ul { list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem; }
.related a { display:inline-block; padding:.5rem .95rem; background:var(--wash); border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--accent); font-weight:600; }
.site-foot { background:#10203a; color:#cdd7e6; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:1.6rem; padding:2.2rem 0 1.4rem; }
.site-foot h4 { color:#fff; margin:0 0 .6rem; font-size:1rem; }
.site-foot p { margin:0; color:#aab6c8; font-size:.92rem; }
.site-foot ul { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.site-foot a { color:#cdd7e6; text-decoration:none; font-size:.92rem; }
.site-foot a:hover { color:#fff; }
.foot-base { border-top:1px solid rgba(255,255,255,.12); padding:1rem 0; }
.foot-base p { margin:0; color:#8da0ba; font-size:.86rem; }
.miss { padding:4rem 0; text-align:center; }

/* age gate */
.gate-page { min-height:100vh; }
.gate-bg { position:fixed; inset:0; }
.gate-bg img { width:100%; height:100%; object-fit:cover; filter:blur(8px); transform:scale(1.05); }
.gate { position:fixed; inset:0; display:grid; place-items:center; background:rgba(10,18,34,.6); }
.gate-sheet { width:min(440px, calc(100% - 2rem)); padding:1.6rem 1.4rem 1.3rem; border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.3); text-align:center; }
.gate-mark { margin:0; font-weight:800; color:var(--accent); letter-spacing:.06em; }
.gate-kicker { margin:.2rem 0 0; color:var(--muted); font-size:.85rem; }
.gate-sheet h2 { margin:.5rem 0 .3rem; }
.gate-q { margin:0 0 1rem; }
.gate-actions { display:grid; gap:.6rem; }
.gate-actions button { min-height:48px; border-radius:999px; font:inherit; font-weight:700; cursor:pointer; border:0; }
#gate-yes { background:var(--accent); color:#fff; }
#gate-no { background:#fff; color:var(--ink); border:1px solid var(--line); }
.gate-note { margin:.9rem 0 0; color:var(--muted); font-size:.9rem; }

@media (max-width:900px){
  .hero-grid { grid-template-columns:1fr; }
  .hero-media { max-width:420px; }
  .badge-grid { grid-template-columns:repeat(2,1fr); }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .topnav { display:none; }
}
@media (max-width:560px){
  .bar-cta .btn { padding:.4rem .7rem; font-size:.85rem; }
  .brand { max-width:34vw; }
  .badge-grid { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }

.header-content { background:#044394; color:#fff; }
.head-row { display:flex; align-items:center; gap:14px; min-height:72px; }
.container { width:min(1200px, calc(100% - 32px)); margin-inline:auto; }
.logo img { display:block; height:30px; width:145px; }
.search-box { flex:1; }
.amsearch-input { width:100%; height:40px; border:0; border-radius:6px; padding:0 14px; font:inherit; }
.fit-btn { background:#ff6a00; color:#fff; text-decoration:none; font-weight:700; border-radius:6px; padding:.55rem .9rem; white-space:nowrap; }
.head-tools { display:flex; gap:12px; color:#fff; font-size:1.15rem; }
.product { background:#fff; padding:22px 0 8px; }
.product-grid { display:grid; grid-template-columns:minmax(280px,460px) minmax(0,1fr); gap:28px; align-items:start; }
.gallery { margin:0; background:#111; }
.gallery img { width:100%; height:auto; object-fit:cover; }
.pinfo h1 { margin:0 0 8px; font-size:1.35rem; line-height:1.45; font-weight:500; }
.stars { margin:0 0 10px; color:#777; }
.stars span { color:#f5b301; letter-spacing:2px; }
.price-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; }
.price-label { color:#333; }
.price { font-size:1.7rem; font-weight:700; }
.sku { color:#777; font-size:.9rem; }
.ready { color:#1f9d55; font-weight:700; margin-left:auto; }
.field-label { display:block; margin:12px 0 6px; font-weight:600; }
.req { color:#d12b2b; }
.opt { width:100%; height:42px; border:1px solid #d5dbe3; border-radius:4px; padding:0 10px; font:inherit; background:#fff; }
.buy-row { display:flex; align-items:center; gap:10px; margin:14px 0; }
.qty { display:inline-flex; border:1px solid #d5dbe3; }
.qty button, .qty input { width:36px; height:38px; border:0; text-align:center; font:inherit; background:#fff; }
.cart-btn { background:#1d4f9c; color:#fff; text-decoration:none; font-weight:700; border-radius:4px; padding:.6rem 1.1rem; }
.wish { display:flex; gap:18px; }
.wish a { color:#555; text-decoration:none; font-size:.92rem; }
.store-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:16px 18px; background:#2b2b2b; color:#fff; text-decoration:none; }
.store-banner em { background:#e10600; color:#fff; font-style:normal; font-weight:700; padding:.35rem .7rem; border-radius:4px; }
.icon-row { background:#fff; padding:8px 0 18px; }
.icon-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; max-width:560px; margin-left:auto; }
.icon-item { display:flex; gap:10px; align-items:flex-start; }
.icon-bubble { width:42px; height:42px; border-radius:50%; background:#1d4f9c; flex:none; }
.icon-item strong { display:block; }
.icon-item p { margin:0; color:#555; font-size:.9rem; }
.tab-bar { display:flex; gap:0; border-bottom:1px solid #e5e5e5; margin-top:8px; }
.tab { padding:12px 22px; background:#f7f7f7; border:1px solid #e5e5e5; border-bottom:0; }
.tab.on { background:#fff; font-weight:700; }
.mid-cta, .inline-cta, .foot-base { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:16px 0; }
.btn-green, .btn-amber { display:inline-flex; align-items:center; justify-content:center; min-width:140px; min-height:42px; padding:.5rem 1.1rem; border-radius:4px; color:#fff; text-decoration:none; font-weight:700; }
.btn-green { background:#21a35a; }
.btn-amber { background:#f07816; }
.desc { background:#fff; padding:10px 0 20px; }
.desc h2 { font-size:1.7rem; line-height:1.35; margin:1.4rem 0 .6rem; font-weight:800; }
.desc .plain { margin:0 0 1rem 1.1rem; }
.bridge { background:#f6f8fb; border-left:4px solid #044394; padding:.8rem 1rem; }
.faq { background:#fff; padding:10px 0 30px; }
.faq-title { text-align:center; color:#e23b3b; }
.faq details { border:1px solid #f0d5d5; border-radius:8px; margin:0 0 10px; background:#fff; }
.faq summary { cursor:pointer; list-style:none; padding:14px 46px 14px 16px; position:relative; font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:12px; top:10px; width:26px; height:26px; border-radius:50%; background:#e23b3b; color:#fff; display:grid; place-items:center; font-weight:700; }
.faq details[open] summary::after { content:"–"; }
.faq-a { padding:0 16px 14px; color:#444; }
.kw-links a { color:#d31b1b; font-weight:700; }
.site-foot { background:#044394; color:#fff; padding-top:28px; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:22px; }
.site-foot h4 { margin:0 0 10px; }
.site-foot p, .site-foot a { color:#fff; }
.site-foot ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.site-foot a { text-decoration:none; }
.foot-base { border-top:1px solid rgba(255,255,255,.25); margin-top:18px; align-items:center; }
.m-pop { display:none; }
@media (max-width:768px) {
  .head-tools, .fit-btn { display:none; }
  .product-grid { grid-template-columns:1fr; }
  .icon-grid, .foot-grid { grid-template-columns:1fr 1fr; }
  .m-pop.is-on { display:flex; position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.8); align-items:center; justify-content:center; }
  .m-frame { position:relative; display:inline-block; height:90vh; max-width:92vw; }
  .m-shot { display:block; height:90vh; max-width:92vw; }
  .m-shot img { height:90vh; width:auto; max-width:92vw; object-fit:contain; display:block; }
  .m-cta { position:absolute; z-index:5; left:6%; right:6%; bottom:3.2%; display:flex; gap:8px; }
  .m-cta a { flex:1; min-height:42px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:#fff; font-weight:800; text-decoration:none; font-size:.95rem; box-shadow:0 8px 18px rgba(0,0,0,.4); }
  .m-x { position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; border:0; background:#fff; font-size:22px; cursor:pointer; z-index:6; }
}
@media (min-width:769px) { .m-pop { display:none !important; } }

body.gate-page { margin:0; min-height:100vh; background:#1c1712; }
body.gate-page .gate-bg { position:fixed; inset:0; }
body.gate-page .gate-bg img { width:100%; height:100%; max-width:none; object-fit:cover; filter:blur(8px); transform:scale(1.04); }
body.gate-page .gate { position:fixed; inset:0; z-index:5; display:grid; place-items:center; background:rgba(12,10,8,.55); }
body.gate-page .gate-sheet { width:min(440px, calc(100% - 2rem)); padding:1.6rem 1.4rem 1.3rem; border-radius:24px; background:var(--card); color:var(--ink); text-align:left; box-shadow:0 24px 60px rgba(0,0,0,.28); }
body.gate-page .gate-mark { margin:0; font-weight:700; letter-spacing:.08em; color:var(--accent); }
body.gate-page .gate-kicker { margin:.2rem 0 0; color:var(--muted); font-size:.85rem; }
body.gate-page .gate-sheet h2 { margin:.6rem 0 .35rem; font-family:"Noto Serif Thai","Leelawadee UI",serif; font-size:1.55rem; line-height:1.3; }
body.gate-page .gate-q { margin:0 0 1rem; }
body.gate-page .gate-actions { display:flex; flex-direction:column; gap:.6rem; }
body.gate-page .gate-actions button { min-height:48px; border-radius:999px; font:inherit; font-weight:700; cursor:pointer; }
body.gate-page #gate-yes { background:var(--accent); color:#fff; border:0; }
body.gate-page #gate-no { background:transparent; color:var(--ink); border:1px solid var(--line); }
body.gate-page .gate-note { margin:.9rem 0 0; color:var(--muted); font-size:.92rem; }