/* noodee-bootbiz.com ชุด site_v1 — ส่วนร่วมทุกหน้า (ย้ายมาจาก home_site_v1.html ไม่เขียนใหม่) */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--s4)}
@media (min-width:900px){.wrap{padding:0 var(--s6)}}

/* หัวหน้า */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;gap:var(--s4);height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo .mark{width:34px;height:34px;border-radius:10px;background:var(--jade);display:grid;place-items:center;color:#fff}
.logo .mark svg{width:20px;height:20px}
.logo .mark img,footer .brand .mark img{width:30px;height:auto}  /* หัว Momo (18 ต.ค. 69 · Hello-Momo) */
.logo .mark:has(img){background:var(--jade-soft)}
footer .brand .mark{flex:none;width:44px;height:44px;border-radius:12px;background:var(--jade-soft);display:grid;place-items:center}
footer .brand .mark img{width:36px}
.nav{display:none;gap:var(--s5);margin-left:var(--s5)}
.nav a{color:var(--ink);text-decoration:none;font-size:16px;padding:6px 0}
.nav a:hover{color:var(--jade)}
.top .end{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.btn{font:600 16px/1 var(--font);border-radius:999px;padding:12px 20px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;white-space:nowrap;min-height:44px}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--jade);color:#fff}
.btn-primary:hover{background:var(--jade-ink)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--card)}
.btn-ghost:hover{border-color:var(--jade);color:var(--jade-ink)}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink)}
.only-wide{display:none}
@media (min-width:1000px){.nav,.only-wide{display:flex}.only-narrow{display:none}}
/* จอเล็กกว่า breakpoint ของแบบ: ปุ่มเมนูเปิดแผงลิงก์ชุดเดียวกับเมนูบน (token จาก tokens.css) */
@media (max-width:999.98px){.top.open .nav{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;margin:0;gap:0;padding:var(--s2) var(--s4) var(--s4);background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.top.open .nav a{padding:var(--s3) 0;min-height:44px;border-bottom:1px solid var(--line)}.top.open .nav a:last-child{border-bottom:0}}


.window{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 1px 0 rgba(27,35,48,.06),0 24px 60px -24px rgba(27,35,48,.45);overflow:hidden}
.bar{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s4);border-bottom:1px solid var(--line);background:#EEF2F0}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#C9D2CE}
.url{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 14px;font-size:14px;display:flex;gap:6px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.url svg{width:14px;height:14px;flex:none;color:var(--jade)}
.url span{overflow:hidden;text-overflow:ellipsis}
.url b{color:var(--jade-ink);font-weight:700}
.screen{aspect-ratio:16/10;background:#E9EEEC;display:grid;place-items:center;overflow:hidden;position:relative}
.screen img.wide{width:100%;height:100%;object-fit:cover;object-position:top}
.screen img.phone{height:94%;width:auto;border-radius:22px;border:6px solid var(--ink);box-shadow:var(--shadow)}
.screen .wait{text-align:center;color:var(--muted);padding:var(--s5);font-size:var(--t-small)}
.screen .wait svg{width:56px;height:56px;color:var(--jade);margin:0 auto var(--s3);opacity:.8}
.flag{position:absolute;left:var(--s3);top:var(--s3);background:var(--ink);color:#fff;font-size:13px;padding:2px 10px;border-radius:999px}
.tl{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--jade-ink);text-decoration:underline;text-underline-offset:4px;min-height:44px}
.tl svg{width:18px;height:18px}
.tl:hover{color:var(--jade)}

/* หัวส่วน */
section.band{padding:var(--s7) 0}
section.band + section.band{border-top:1px solid var(--line)}
.band h2{font-size:var(--t-h2);line-height:1.35}
.band .head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* ท้ายหน้า เขียวเข้ม + รายชื่อโดเมนย่อย */
footer{background:var(--jade-ink);color:#D3EAE4;padding:var(--s7) 0 var(--s5);font-size:var(--t-small)}
footer .grid{display:grid;gap:var(--s6)}
footer .brand{display:flex;gap:var(--s3);align-items:flex-start;color:#fff}
footer .brand svg{width:40px;height:40px;flex:none}
footer .brand b{display:block;font-size:20px;line-height:1.4}
footer h3{color:#fff;font-size:16px;font-weight:700;margin-bottom:var(--s2)}
footer ul{list-style:none;padding:0;display:grid;gap:2px}
footer a{color:#D3EAE4;text-decoration:none;display:inline-block;padding:3px 0}
footer a:hover{color:#fff;text-decoration:underline}
footer .doms a{overflow-wrap:anywhere}
footer .doms em{font-size:12px;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:0 8px;margin-left:6px}
footer .base{border-top:1px solid rgba(255,255,255,.18);margin-top:var(--s6);padding-top:var(--s4)}
@media (min-width:900px){footer .grid{grid-template-columns:1.4fr 1fr 1fr 1.3fr}footer .grid > div + div{border-left:1px solid rgba(255,255,255,.18);padding-left:var(--s5)}}
@media (max-width:640px){footer .grid{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}footer .grid > .brand{grid-column:1 / -1}}  /* ท้ายเว็บมือถือ 2 คอลัมน์ (18 ต.ค. 69) */

.fab-chat{position:fixed;right:var(--s5);bottom:var(--s5);z-index:40;width:56px;height:56px;border-radius:50%;background:var(--jade);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow)}.fab-chat:hover{background:var(--jade-ink)}.fab-chat svg{width:24px;height:24px}

/* ตำแหน่งหน้า (breadcrumb) หน้าลูกทุกหน้า — ย้ายจาก products/heibook.html */
.crumb{display:flex;gap:6px;align-items:center;font-size:var(--t-small);color:var(--muted);margin-bottom:var(--s3)}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--jade-ink);text-decoration:underline}
.crumb svg{width:16px;height:16px}

/* ช่องรอภาพหน้าจอ (ภาพชุดเก่าก่อนเปลี่ยนชื่อถูกถอด 17 ต.ค. 69 · รอภาพ HeiBook ชุดใหม่จากหนูดี) */
.shot-wait{width:100%;height:100%;min-height:160px;display:grid;place-content:center;justify-items:center;gap:var(--s2);padding:var(--s4);text-align:center;color:var(--muted);font-size:var(--t-small);line-height:1.6;background:repeating-linear-gradient(135deg,#EEF2F0 0 12px,#E7EDEA 12px 24px)}
.shot-wait svg{width:40px;height:40px;color:var(--jade);opacity:.8}
.shot-wait.r-phone{aspect-ratio:9/17;height:auto}
.shot-wait.r-gi{aspect-ratio:16/10;height:auto;min-height:0;border-bottom:1px solid var(--line)}