/* หน้าแรก v10 (10 ส่วน) + ศูนย์ช่วยเหลือ — ชิ้นเสริมทับ tokens.css + home8.css (ไม่แก้สี/ฟอนต์ ใช้ token เดิมทั้งหมด)
   ลอย · 22 ต.ค. 69 · เดฟย้ายไป static/site_v1/home10.css ได้ทั้งไฟล์ · คลาสขึ้นต้น h10- ไม่ชนของเดิม */
.h10-sub{margin:10px 0 0;font-size:18px;line-height:1.75;color:var(--muted);max-width:640px}
.h10-head{text-align:center;margin:0 auto 48px;max-width:760px}
.h10-head .h10-sub{margin-left:auto;margin-right:auto}
.h10-link{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--jade-ink);text-decoration:none;min-height:44px}
.h10-link svg{width:18px;height:18px;transition:transform .2s}
.h10-link:hover svg{transform:translateX(3px)}
.h10-link:hover{text-decoration:underline;text-underline-offset:4px}
.h10-ex{position:absolute;left:12px;top:12px;z-index:2;font-size:12.5px;font-weight:800;line-height:1.6;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--muted);border:1px solid var(--rule)}

/* กรอบจอ (จริง) */
.h10-browser{position:relative;border-radius:14px;background:#fff;border:1px solid var(--rule);box-shadow:var(--shadow-2);overflow:hidden}
.h10-browser::before{content:"";display:block;height:26px;background:#F1F4F3 radial-gradient(circle at 14px 13px,#E7A8A0 4px,transparent 5px),radial-gradient(circle at 30px 13px,#EBD08E 4px,transparent 5px),radial-gradient(circle at 46px 13px,#9FD3B5 4px,transparent 5px);border-bottom:1px solid var(--rule)}
.h10-browser img{width:100%;height:auto}
.h10-phone{position:relative;border-radius:30px;padding:8px;background:var(--black);box-shadow:var(--shadow-2)}
.h10-phone img{border-radius:23px;width:100%;height:auto}

/* 2 · สองระบบ */
.h10-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.h10-prod{position:relative;display:flex;flex-direction:column;border-radius:28px;padding:36px 36px 32px;overflow:hidden;border:1px solid var(--rule);transition:transform .25s,box-shadow .25s}
.h10-prod:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.h10-prod.bk{background:linear-gradient(160deg,#EEF7F3 0%,#E1F0EC 100%)}
.h10-prod.ps{background:linear-gradient(160deg,#FFFBEF 0%,#FFF4CF 100%)}
.h10-prod .top{display:flex;gap:16px;align-items:center}
.h10-ic{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--jade);color:#fff}
.h10-ic svg{width:28px;height:28px}
.ps .h10-ic{background:var(--black)}
.h10-prod h3{font-size:26px;font-weight:800;line-height:1.5;margin:0}
.h10-prod .top p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.h10-checks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:8px}
.h10-checks li{display:flex;gap:10px;align-items:flex-start;font-size:16.5px;line-height:1.6}
.h10-checks svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--jade)}
.h10-shots{position:relative;margin:28px 0 8px;padding-right:20%;min-height:260px}
.h10-shots .h10-phone{position:absolute;right:0;bottom:-18px;width:30%;transform:rotate(3deg)}
.h10-bizrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.h10-bizrow a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 14px;border-radius:999px;background:#fff;border:1px solid var(--rule);color:var(--ink);font-size:15px;font-weight:700;text-decoration:none;transition:border-color .2s,background .2s}
.h10-bizrow a svg{width:16px;height:16px;color:var(--jade)}
.h10-bizrow a:hover{border-color:var(--jade);background:var(--jade-soft)}
.h10-prod .btn{align-self:flex-start;margin-top:auto}
.h10-prod .gap{flex:1;min-height:24px}

/* 3 · ทำงานยังไง */
.h10-lanes{display:grid;gap:28px}
.h10-lane{background:#fff;border:1px solid var(--rule);border-radius:28px;padding:28px 32px 32px}
.h10-lane .lt{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.h10-lane .lt b{font-size:20px;font-weight:800}
.h10-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1.5fr 1.5fr;gap:44px;align-items:end;counter-reset:s}
.h10-steps li{position:relative;display:flex;flex-direction:column;gap:14px}
.h10-steps li:not(:last-child)::after{content:"";position:absolute;right:-34px;top:42%;width:24px;height:24px;background:var(--jade);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.h10-steps .pic{position:relative}
.h10-steps .pic.ph{max-width:190px;margin:0 auto;width:100%}
.h10-steps .cap2{display:flex;gap:10px;align-items:flex-start}
.h10-steps .cap2 i{counter-increment:s;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--jade-soft);color:var(--jade-ink);font-weight:800;font-size:14px}
.h10-steps .cap2 i::before{content:counter(s)}
.h10-steps .cap2 b{display:block;font-size:17px;line-height:1.5}
.h10-steps .cap2 small{display:block;font-size:15px;color:var(--muted);line-height:1.6}

/* 4 · หนูดีช่วยอะไร */
.h10-ai{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center}
.h10-ai .mas{position:relative;text-align:center}
.h10-ai .mas img{width:100%;height:auto;max-width:280px;margin:0 auto;filter:drop-shadow(0 18px 24px rgba(27,35,48,.18))}
.h10-ai .mas .bubble{position:relative;display:inline-block;margin:0 0 12px}
.h10-modes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.h10-mode{background:#fff;border:1px solid var(--rule);border-radius:24px;padding:24px}
.h10-mode .mh{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.h10-mode .mh b{font-size:20px;font-weight:800;line-height:1.5}
.h10-mode .pk{font-size:14.5px;color:var(--muted);margin:0 0 14px}
.h10-q{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.h10-q li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--soft);transition:background .2s,transform .2s}
.h10-q li:hover{background:var(--jade-soft);transform:translateX(3px)}
.h10-q .qi{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--jade)}
.h10-q .qi svg{width:20px;height:20px}
.h10-q b{display:block;font-size:16px;line-height:1.5}
.h10-q span{display:block;font-size:15px;line-height:1.55;color:var(--muted)}
.h10-mode.dev .h10-q li{background:#FFFAEB}

/* 5 · เชื่อมต่อ (bento) */
.h10-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.h10-tile{position:relative;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,transform .2s,box-shadow .2s}
.h10-tile:hover{border-color:var(--jade);transform:translateY(-3px);box-shadow:var(--shadow)}
.h10-tile .ti{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--jade-soft);color:var(--jade)}
.h10-tile .ti svg{width:22px;height:22px}
.h10-tile b{font-size:18px;line-height:1.5}
.h10-tile small{font-size:15px;line-height:1.6;color:var(--muted)}
.h10-tile .in{margin-top:auto;font-size:13px;font-weight:800;color:var(--jade-ink)}
.h10-tile.hub{grid-column:span 2;grid-row:span 2;background:var(--black);color:#fff;border-color:var(--black);padding:0;overflow:hidden}
.h10-tile.hub .hb2{padding:24px 24px 0}
.h10-tile.hub b{font-size:24px}
.h10-tile.hub small{color:#C9D3CF}
.h10-tile.hub .h10-browser{margin:18px 0 0 24px;border-radius:14px 0 0 0;border-color:#2B3632;box-shadow:none}
.h10-tile.hub .st{align-self:flex-start}

/* 6 · ราคา */
.h10-price{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.h10-plan{position:relative;background:#fff;border:1px solid var(--rule);border-radius:24px;padding:28px;display:flex;flex-direction:column}
.h10-plan.rec{border:2px solid var(--jade);box-shadow:var(--shadow-2)}
.h10-plan .tag{position:absolute;top:-14px;left:28px;padding:2px 14px;border-radius:999px;background:var(--jade);color:#fff;font-size:13.5px;font-weight:800;line-height:1.8}
.h10-plan .nm2{font-size:16px;font-weight:800;color:var(--muted)}
.h10-plan .amt{margin:6px 0 2px;font-size:44px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.h10-plan .amt small{font-size:16px;font-weight:700;color:var(--muted);letter-spacing:0}
.h10-plan .for{margin:0 0 16px;font-size:15.5px;color:var(--muted);line-height:1.6}
.h10-plan .h10-checks{margin:0;padding-top:16px;border-top:1px solid var(--rule)}
.h10-plan .h10-checks li{font-size:15.5px}
.h10-plan .h10-checks .st{margin-left:4px}
.h10-pfoot{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:center;font-size:15.5px;color:var(--muted)}

/* 7 · ทดลอง */
.h10-try{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:40px 48px;border-radius:32px;background:linear-gradient(120deg,#E1F0EC 0%,#F1F8F5 55%,#FFF4CF 100%);border:1px solid var(--rule);overflow:hidden;position:relative}
.h10-try h2{font-size:clamp(28px,3vw,40px)}
.h10-try .acts{display:flex;gap:12px;flex-wrap:wrap}
.h10-try .btn{margin-top:0}

/* 8 · เริ่มใช้ 4 ขั้น */
.h10-4{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:f}
.h10-4 li{position:relative;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:22px}
.h10-4 li::before{counter-increment:f;content:counter(f);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--black);color:#fff;font-weight:800;font-size:17px;margin-bottom:12px}
.h10-4 li:not(:last-child)::after{content:"";position:absolute;right:-13px;top:40px;width:10px;height:10px;border-top:2px solid var(--border-strong);border-right:2px solid var(--border-strong);transform:rotate(45deg);z-index:1}
.h10-4 b{display:block;font-size:18px;line-height:1.5}
.h10-4 small{display:block;font-size:15px;line-height:1.6;color:var(--muted)}

/* 10 · คู่มือ */
.h10-help{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:32px 40px;border-radius:28px;background:var(--black);color:#fff}
.h10-help .bi{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:rgba(127,227,192,.14);color:var(--mint)}
.h10-help .bi svg{width:32px;height:32px}
.h10-help b{display:block;font-size:24px;font-weight:800;line-height:1.5}
.h10-help span{display:block;color:#C9D3CF;font-size:16px;line-height:1.7}
.h10-help .btn{margin-top:0;background:#fff;color:var(--black);border-color:#fff}
.h10-help .btn:hover{background:var(--mint);border-color:var(--mint)}
.sec.tight{padding:56px 0}

/* ขยับเมื่อเลื่อน (ปิดเมื่อ reduced-motion ใน tokens.css) */
.js-rv .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-rv .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-rv .rv{opacity:1;transform:none}}

/* ===== ศูนย์ช่วยเหลือ ===== */
.hc-hero{position:relative;background:linear-gradient(180deg,#F1F8F5 0%,#fff 100%);padding:28px 0 56px;overflow:hidden}
.crumb{font-size:14.5px;color:var(--muted);margin:0 0 20px}
.crumb a{color:var(--muted)}
.crumb span[aria-current]{color:var(--ink);font-weight:700}
.hc-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center}
.hc-hero h1{font-size:var(--t-hero);font-weight:800;line-height:1.45;letter-spacing:-.02em;margin:0}
.hc-hero .h10-sub{font-size:19px}
.hc-search{margin-top:28px;max-width:640px}
.hc-search label{display:block;font-weight:800;font-size:16px;margin-bottom:8px}
.hc-search .row{display:flex;gap:8px;background:#fff;border:1.5px solid var(--border-strong);border-radius:16px;padding:6px;box-shadow:var(--shadow)}
.hc-search .row:focus-within{border-color:var(--jade);outline:3px solid var(--marigold);outline-offset:2px}
.hc-search input{flex:1;min-width:0;border:0;font:inherit;font-size:17px;padding:10px 12px;background:transparent;color:var(--ink)}
.hc-search input:focus{outline:none}
.hc-search button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:12px;background:var(--black);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.hc-search button:hover{background:var(--jade-ink)}
.hc-search button svg{width:18px;height:18px}
.hc-pop{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:15px;color:var(--muted);align-items:center}
.hc-pop a{display:inline-flex;align-items:center;min-height:36px;padding:2px 12px;border-radius:999px;background:#fff;border:1px solid var(--rule);color:var(--ink);text-decoration:none;font-weight:700}
.hc-pop a:hover{border-color:var(--jade)}
.hc-mas{position:relative;justify-self:center}
.hc-mas img{width:300px;max-width:100%;filter:drop-shadow(0 20px 26px rgba(27,35,48,.18))}
.hc-mas .bubble{position:absolute;left:-40px;top:20px;max-width:220px}
.hc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hc-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:24px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}
.hc-card:hover{border-color:var(--jade);transform:translateY(-3px);box-shadow:var(--shadow)}
.hc-card .ti{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--jade-soft);color:var(--jade)}
.hc-card .ti svg{width:26px;height:26px}
.hc-card.pos .ti{background:#FFF4CF;color:#5A3E00}
.hc-card.ai .ti{background:var(--black);color:var(--mint)}
.hc-card b{font-size:19px;line-height:1.5}
.hc-card small{font-size:15px;line-height:1.6;color:var(--muted)}
.hc-card .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--jade-ink);font-size:15.5px}
.hc-card .go svg{width:16px;height:16px;transition:transform .2s}
.hc-card:hover .go svg{transform:translateX(3px)}
.hc-vids{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hc-vid{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.hc-vid .th{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--soft);border:1px solid var(--rule)}
.hc-vid .th img{width:100%;height:100%;object-fit:cover;object-position:top left;filter:saturate(.85)}
.hc-vid .th .soon{position:absolute;inset:auto 10px 10px auto;padding:2px 10px;border-radius:999px;background:rgba(16,22,20,.82);color:#fff;font-size:13px;font-weight:800}
.hc-vid b{font-size:16.5px;line-height:1.5}
.hc-vid small{font-size:14.5px;color:var(--muted)}
.hc-arts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hc-art{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:16px 18px;background:#fff;border:1px solid var(--rule);border-radius:18px;text-decoration:none;color:var(--ink);transition:border-color .2s,background .2s}
.hc-art:hover{border-color:var(--jade);background:#FAFDFC}
.hc-art .ti{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--soft);color:var(--jade)}
.hc-art .ti svg{width:22px;height:22px}
.hc-art b{display:block;font-size:17px;line-height:1.5}
.hc-art small{display:block;font-size:14.5px;color:var(--muted);line-height:1.55}
.hc-art .ar{width:18px;height:18px;color:var(--muted)}
.hc-pop .chip{display:inline-flex;align-items:center;min-height:36px;padding:2px 12px;border-radius:999px;background:#fff;border:1px solid var(--rule);color:var(--muted);font-weight:700}
/* คู่มือที่ยังไม่มีเนื้อหา: การ์ดกดไม่ได้ + ป้าย กำลังเขียน (pages/_tools/import_v10.py help_soon) */
.hc-card.soon,.hc-art.soon{cursor:default}
.hc-card.soon:hover{border-color:var(--rule);transform:none;box-shadow:none}
.hc-card.soon .st{margin-top:auto;align-self:flex-start}
.hc-art.soon:hover{border-color:var(--rule);background:#fff}
.hc-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hc-ch{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;padding:20px;background:#fff;border:1px solid var(--rule);border-radius:20px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.hc-ch:hover{border-color:var(--jade)}
.hc-ch .ti{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--jade);color:#fff}
.hc-ch .ti svg{width:24px;height:24px}
.hc-ch b{display:block;font-size:17px;line-height:1.5}
.hc-ch small{display:block;font-size:14.5px;color:var(--muted)}
.hc-sect-top{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.hc-sect-top h2{font-size:clamp(24px,2.4vw,32px)}

@media (max-width:1024px){
  .h10-bento{grid-template-columns:repeat(2,1fr)}
  .hc-cards,.hc-vids{grid-template-columns:repeat(2,1fr)}
  .h10-ai{grid-template-columns:220px 1fr}
}
@media (max-width:767px){
  .h10-head{margin-bottom:32px;text-align:left}
  .h10-sub{font-size:16.5px}
  .h10-duo,.h10-modes,.h10-price,.h10-ai,.hc-grid,.hc-arts,.hc-contact{grid-template-columns:1fr}
  .h10-prod{padding:24px 20px;border-radius:24px}
  .h10-prod h3{font-size:22px}
  .h10-shots{min-height:0;padding-right:24%}
  .h10-lane{padding:20px}
  .h10-steps{grid-template-columns:1fr;gap:20px}
  .h10-steps li{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center}
  .h10-steps .pic.ph{max-width:none}
  .h10-steps li:not(:last-child)::after{right:auto;left:47px;top:auto;bottom:-20px;width:16px;height:16px;transform:rotate(90deg)}
  .h10-ai .mas{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;text-align:left}
  .h10-ai .mas img{max-width:110px;order:-1}
  .h10-ai .mas .bubble{margin:0}
  .h10-bento{grid-template-columns:1fr 1fr;gap:12px}
  .h10-tile{padding:16px;border-radius:18px}
  .h10-tile b{font-size:16.5px}
  .h10-tile small{font-size:14px}
  .h10-tile.hub{grid-column:1/-1;grid-row:auto}
  .h10-plan .amt{font-size:38px}
  .h10-try{grid-template-columns:1fr;padding:28px 20px}
  .h10-try .acts{flex-direction:column}
  .h10-try .btn{width:100%}
  .h10-4{grid-template-columns:1fr 1fr;gap:12px}
  .h10-4 li{padding:16px}
  .h10-4 li::after{display:none}
  .h10-help{grid-template-columns:1fr;padding:24px 20px;text-align:left}
  .h10-help .btn{width:100%}
  .hc-hero h1{font-size:38px}
  .hc-mas{display:none}
  .hc-cards,.hc-vids{grid-template-columns:1fr 1fr;gap:12px}
  .hc-card{padding:16px}
  .hc-card b{font-size:16.5px}
  .hc-search button span{display:none}
}
/* bento: ช่องสุดท้ายกว้าง 2 ช่อง เติมแถวให้เต็ม (7 ช่อง + hub 2×2 = 11 ใน 12) */
.h10-tile.wide{grid-column:span 2}
@media (max-width:767px){.h10-tile.wide{grid-column:auto}}
.sec h2,.h10-sub{text-wrap:balance}
.hc-mas .bubble{z-index:2;left:-150px;top:30px;white-space:normal}