/* ══════════════════════════════════════════════════════════════════════
   home.css — หน้าแรก (index.html) ชุดที่ 3 · ขึ้นใช้จริง 14 ก.ย. 2569 · ชุดก่อนเก็บไว้ที่ notes/_old-home/
   ทำ 13 ก.ย. 2569 ตามที่เจ้าของขอ "ออกแบบหน้าแรกใหม่ ให้คลิปยูทูบเป็นสไลด์ และดูทันสมัยขึ้น"
   โหลดต่อจาก style.css · ทุกคลาสขึ้นต้นด้วย h- · เนื้อหาและราคายกมาจากหน้าแรกชุดก่อน

   🔴 ไม่มีจาวาสคริปต์ ตามแนวของทั้งเว็บ
      สไลด์คลิปใช้ scroll-snap ปัดหรือเลื่อนได้ทุกเบราว์เซอร์
      ปุ่มลูกศรกับจุดบอกตำแหน่งใช้ ::scroll-button และ ::scroll-marker ของ CSS (Chrome และ Edge รุ่น 135 ขึ้นไป)
      เบราว์เซอร์ที่ยังไม่รองรับจะเห็นข้อความบอกให้ปัดแทน
   🔴 ภาพเคลื่อนไหวทุกอย่างปิดเองเมื่อเครื่องตั้งลดการเคลื่อนไหว (prefers-reduced-motion)
   ══════════════════════════════════════════════════════════════════════ */

body.home{
  --h-night:#060d1b;        /* พื้นหัวเว็บ */
  --h-navy:#0b1830;
  --h-navy-2:#15294b;
  --h-blue:#1d4ed8;         /* น้ำเงินหลักของบริษัท */
  --h-blue-2:#3b82f6;
  --h-sky:#8fd0ff;
  --h-mint:#6ee7b7;
  --h-ice:#eef3fb;
  --h-ice-2:#f6f9fd;
  --h-ring:#dde5f1;
  --h-ink:#0f172a;
  --h-mut:#5b6980;
  --h-line:#06c755;         /* เขียวไลน์ */
  --h-r:22px;
  --h-shadow:0 1px 2px rgba(15,23,42,.05),0 22px 44px -30px rgba(15,23,42,.42);
}

/* ── แถบบน: ปุ่มโทรกับไลน์ (เหมือน home.css) ────────────────────────── */
.h-topcta{margin-left:auto;display:flex;align-items:center;gap:8px}
.h-topcta a{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;
  white-space:nowrap;
}
.h-topcta a svg{width:15px;height:15px;flex:0 0 auto}
.h-topcta a:hover{text-decoration:none;border-color:var(--h-blue);color:var(--h-blue)}
.h-topcta .h-top-line{background:#06c755;border-color:#06c755;color:#fff}
.h-topcta .h-top-line:hover{color:#fff;border-color:#06c755;filter:brightness(1.06)}
@media (max-width:560px){
  .h-topcta{gap:6px}
  .h-topcta .h-top-phone span{display:none}
  .h-topcta .h-top-line,.h-topcta .ck-cartlink{font-size:0;gap:0;padding:9px 11px}
  .h-topcta .h-top-line svg,.h-topcta .ck-cartlink svg{width:17px;height:17px}
  .h-topcta .ck-badge{font-size:11.5px;min-width:18px;height:18px;margin-left:4px}
}

/* ══ ของที่ใช้ร่วมกันทุกแถบ ══════════════════════════════════════════ */
.h-sec{position:relative;padding:58px 0}
.h-kicker{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 14px;border-radius:999px;
  background:var(--h-ice);color:var(--h-blue);font-size:13.5px;font-weight:700;letter-spacing:.2px;line-height:1.4;
}
.h-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.h-head{margin:0 0 30px;max-width:62ch}
.h-head h2{margin:0 0 10px;font-size:clamp(27px,5.8vw,40px);line-height:1.24;letter-spacing:-.6px;color:var(--h-ink)}
.h-head p{margin:0;font-size:16.5px;line-height:1.72;color:var(--h-mut)}
.h-head-c{text-align:center;margin-left:auto;margin-right:auto}
.h-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;margin:0 0 28px}
.h-head-row .h-head{margin:0}
.h-link{display:inline-flex;align-items:center;gap:7px;font-size:15.5px;font-weight:700;color:var(--h-blue);white-space:nowrap}
.h-link svg{width:17px;height:17px;flex:0 0 auto;transition:transform .18s ease}
.h-link:hover{text-decoration:none}
.h-link:hover svg{transform:translateX(3px)}
.h-center{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.h-nw{white-space:nowrap}   /* กันคำไทยที่ต้องอยู่ด้วยกันไม่ให้ขึ้นบรรทัดใหม่กลางวลี */

/* ตัวหนังสือไล่สี · เว้นขอบบนล่างให้สระและวรรณยุกต์ภาษาไทยไม่ถูกตัด */
.h-grad{
  font-style:normal;padding:.14em 0 .1em;margin:-.14em 0 -.1em;
  background:linear-gradient(92deg,#8fd0ff 0%,#6ee7b7 60%,#a7f3d0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.h-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:999px;font-size:16px;font-weight:700;line-height:1.3;
  border:1px solid transparent;text-decoration:none;text-align:center;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;
}
.h-btn svg{width:20px;height:20px;flex:0 0 auto}
.h-btn:hover{text-decoration:none;transform:translateY(-2px)}
.h-btn-main{background:#fff;color:var(--h-navy);box-shadow:0 16px 34px -18px rgba(0,0,0,.8)}
.h-btn-main:hover{background:#eaf2ff;color:var(--h-navy)}
.h-btn-line{background:var(--h-line);color:#fff;box-shadow:0 16px 34px -16px rgba(6,199,85,.85)}
.h-btn-line:hover{background:#05b34c;color:#fff}
.h-btn-dark{background:var(--h-ink);color:#fff}
.h-btn-dark:hover{background:var(--h-navy-2);color:#fff}
.h-btn-blue{background:linear-gradient(135deg,var(--h-blue),var(--h-blue-2));color:#fff;box-shadow:0 16px 32px -18px rgba(29,78,216,.9)}
.h-btn-blue:hover{color:#fff;box-shadow:0 20px 36px -16px rgba(29,78,216,.95)}
.h-btn-ghost{background:#fff;color:var(--h-ink);border-color:var(--h-ring)}
.h-btn-ghost:hover{border-color:var(--h-blue);color:var(--h-blue)}
.h-btn-ghost-dark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
.h-btn-ghost-dark:hover{background:rgba(255,255,255,.16);color:#fff}

/* แสงออโรร่าบนพื้นเข้ม ใช้ในหัวเว็บ แถบทำไมร้านเลือก และกล่องชวนทักไลน์ */
.h-aurora{
  position:absolute;inset:-25% -15%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 34% at 20% 24%, rgba(59,130,246,.55), transparent 70%),
    radial-gradient(30% 28% at 84% 16%, rgba(45,212,191,.26), transparent 70%),
    radial-gradient(44% 40% at 72% 80%, rgba(99,102,241,.34), transparent 72%),
    radial-gradient(28% 28% at 6% 92%, rgba(29,78,216,.34), transparent 70%);
  animation:h-drift 24s ease-in-out infinite alternate;
}
@keyframes h-drift{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.08)}
}

/* ══ 1 · หัวเว็บ ════════════════════════════════════════════════════ */
.h-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:var(--h-night);padding:38px 0 30px}
.h-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.3px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(70% 62% at 26% 30%, #000 8%, transparent 74%);
  mask-image:radial-gradient(70% 62% at 26% 30%, #000 8%, transparent 74%);
}
.h-hero-grid{display:grid;gap:34px;grid-template-columns:1fr;align-items:center}

.h-brand{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 16px 7px 12px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-size:13px;font-weight:700;letter-spacing:3px;line-height:1.4;color:#dbeafe;
}
.h-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--h-mint);animation:h-pulse 2.4s ease-out infinite}
@keyframes h-pulse{
  0%{box-shadow:0 0 0 0 rgba(110,231,183,.6)}
  80%,100%{box-shadow:0 0 0 10px rgba(110,231,183,0)}
}
.h-hero h1{margin:0 0 20px;font-size:clamp(34px,8.2vw,58px);line-height:1.2;font-weight:700;letter-spacing:-1px}
.h-hero h1 .h-grad{display:block;white-space:nowrap}
.h-benefits{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.h-benefits li{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-size:15px;font-weight:600;line-height:1.3;
}
.h-benefits svg{width:16px;height:16px;flex:0 0 auto;color:var(--h-mint)}
.h-hero .h-sub{margin:0 0 26px;font-size:clamp(16.5px,3.8vw,19px);line-height:1.68;color:rgba(255,255,255,.84);max-width:42ch}
.h-hero .h-sub b{color:#fff;font-weight:700}
.h-cta{display:flex;flex-wrap:wrap;gap:12px}
.h-hero .h-btn{font-size:17px;padding:16px 26px}
.h-proof{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:15px;font-weight:600;color:rgba(255,255,255,.84)}
.h-proof svg{width:18px;height:18px;flex:0 0 auto;color:#fcd34d}
.h-proof:hover{color:#fff;text-decoration:underline}

/* ภาพหัวเว็บในกรอบกระจก + การ์ดลอย · 🔴 ห้ามใช้ภาพร้านลูกค้าจริง (เจ้าของสั่ง 13 ก.ย. 2569) */
.h-visual{position:relative;padding:18px 0 42px}
.h-col-main{
  position:relative;margin:0;padding:12px;border-radius:28px;
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
}
.h-col-main img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
/* ภาพวาดชั่วคราวระหว่างรอภาพจากเจ้าของ ไม่ตัดขอบภาพ */
.h-col-main.is-ill img{aspect-ratio:auto;border-radius:0}
/* HERO-PC START ── กราฟิกคอมพิวเตอร์ตั้งโต๊ะเคลื่อนไหวบนหัวเว็บ (เจ้าของสั่ง 14 ก.ย. 2569) ──────────
   SVG ฝังในหน้า ขยับด้วย CSS ล้วน · ขยับเฉพาะ transform opacity และเส้นวงแหวน เบาเครื่อง
   เครื่องที่ตั้งลดการเคลื่อนไหว ภาพหยุดนิ่งในสภาพครบ (ค่าเริ่มต้นของทุกชิ้นคือสภาพที่เห็นครบ) */
.h-col-main.h-pc{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.h-pc-svg{display:block;width:100%;height:auto;overflow:visible}
/* 🔴 transform-box:fill-box ใส่เฉพาะชิ้นที่ย่อขยายรอบจุดกลางของตัวเอง ห้ามใส่ทั้ง SVG
      ไม่งั้นวงแหวนที่หมุนด้วย rotate(-90 530 348) และแสงที่เอียงด้วย skewX จะหลุดตำแหน่ง */
.h-pc-glow{transform-box:fill-box;transform-origin:center;animation:h-pc-glow 6s ease-in-out infinite}
.h-pc-shadow{transform-box:fill-box;transform-origin:center;animation:h-pc-shadow 6s ease-in-out infinite}
.h-pc-float{animation:h-pc-float 6s ease-in-out infinite}
.h-pc-active{animation:h-pc-active 9s ease-in-out infinite}
.h-pc-kpi{transform-box:fill-box;transform-origin:0 50%;animation:h-pc-kpi 4s ease-in-out var(--d,0s) infinite backwards}
.h-pc-row{animation:h-pc-row 8s ease-out var(--d,0s) infinite backwards}
.h-pc-pay{transform-box:fill-box;transform-origin:center;animation:h-pc-pay 8s ease-in-out infinite}
.h-pc-bar{transform-box:fill-box;transform-origin:50% 100%;animation:h-pc-bar 4s ease-in-out var(--d,0s) infinite backwards}
.h-pc-ring{stroke-dasharray:163.4;stroke-dashoffset:46;animation:h-pc-ring 8s ease-in-out infinite}
.h-pc-shine{animation:h-pc-shine 7s ease-in-out infinite}
.h-pc-chip-a{animation:h-pc-bob 5s ease-in-out infinite}
.h-pc-chip-b{animation:h-pc-bob 6s ease-in-out -2s infinite}
.h-pc-chip-c{animation:h-pc-bob 5.5s ease-in-out -1s infinite}
.h-pc-laser{animation:h-pc-laser 1.8s ease-in-out infinite alternate}
.h-pc-ping{transform-origin:center;opacity:0;animation:h-pc-ping 2.4s ease-out infinite}
.h-pc-spark{transform-origin:center;animation:h-pc-spark 3.2s ease-in-out var(--d,0s) infinite backwards}
@keyframes h-pc-glow{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes h-pc-shadow{0%,100%{opacity:1;transform:scaleX(1)}50%{opacity:.65;transform:scaleX(.86)}}
@keyframes h-pc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes h-pc-active{0%,24%{transform:translateY(0)}33%,57%{transform:translateY(36px)}66%,90%{transform:translateY(72px)}100%{transform:translateY(0)}}
@keyframes h-pc-kpi{0%,100%{transform:scaleX(.55)}50%{transform:scaleX(1)}}
@keyframes h-pc-row{0%{opacity:0;transform:translateX(-14px)}7%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
@keyframes h-pc-pay{0%,60%,100%{transform:none;filter:none}68%{transform:scale(1.05);filter:brightness(1.25)}76%{transform:none;filter:none}}
@keyframes h-pc-bar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes h-pc-ring{0%{stroke-dashoffset:163.4}35%,80%{stroke-dashoffset:46}100%{stroke-dashoffset:163.4}}
@keyframes h-pc-shine{0%,55%{transform:translateX(0)}85%,100%{transform:translateX(920px)}}
@keyframes h-pc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes h-pc-laser{from{transform:translateY(-15px)}to{transform:translateY(15px)}}
@keyframes h-pc-ping{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
@keyframes h-pc-spark{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .h-pc-svg *{animation:none!important}
}
/* HERO-PC END */
.h-col-card{
  position:absolute;left:-4px;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;
  padding:9px 18px 9px 9px;border-radius:20px;background:#fff;color:var(--h-ink);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.75);max-width:calc(100% - 12px);
  animation:h-float 6.5s ease-in-out infinite;
}
.h-col-card img{width:64px;height:64px;flex:0 0 auto;border-radius:13px;object-fit:contain;background:#fff;border:1px solid var(--h-ring)}
.h-col-card b{display:block;font-size:15.5px;line-height:1.35}
.h-col-card small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--h-mut)}
.h-col-chip{
  position:absolute;right:-2px;top:0;z-index:2;display:inline-flex;align-items:center;gap:8px;margin:0;
  padding:9px 15px 9px 11px;border-radius:999px;background:rgba(11,24,48,.86);
  border:1px solid rgba(255,255,255,.2);color:#fff;font-size:13.5px;font-weight:600;line-height:1.35;
  box-shadow:0 18px 36px -18px rgba(0,0,0,.8);animation:h-float 7.5s ease-in-out -3s infinite;
}
.h-col-chip svg{width:18px;height:18px;flex:0 0 auto;color:var(--h-mint)}
@keyframes h-float{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* แถบตัวเลขใต้หัวเว็บ · ทุกข้อเป็นเรื่องที่เขียนไว้ในหน้าแรกเดิมอยู่แล้ว */
.h-stats{
  list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  border-radius:22px;overflow:hidden;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);
}
.h-stats li{padding:15px 16px;background:rgba(9,18,38,.82)}
.h-stats b{display:block;font-size:clamp(19px,4.8vw,26px);line-height:1.3;letter-spacing:-.3px;color:#fff}
.h-stats span{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.7)}

/* ══ 2 · ร้านคุณทำธุรกิจอะไร · การ์ดโปรแกรม 6 ตัว ═════════════════════
   จอแคบเป็นการ์ดแนวนอน ภาพซ้าย ข้อความขวา หกใบไม่ยาวจนต้องเลื่อนนาน */
.h-progs{background:var(--h-ice-2)}
.h-cards{display:grid;gap:12px;grid-template-columns:1fr}
.h-card{
  position:relative;display:flex;overflow:hidden;background:#fff;
  border:1px solid var(--h-ring);border-radius:var(--h-r);box-shadow:var(--h-shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.h-card:hover{
  transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 38%,var(--h-ring));
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 30px 56px -30px color-mix(in srgb,var(--accent) 60%,rgba(15,23,42,.5));
}
.h-card:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.h-shot{
  position:relative;flex:0 0 36%;overflow:hidden;
  background:radial-gradient(120% 100% at 30% 15%,#fff 0%,var(--accent-soft) 72%);
}
.h-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.h-card:hover .h-shot img{transform:scale(1.06)}
.h-card-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:13px 14px 14px 15px}
.h-cat{display:flex;align-items:center;gap:8px;margin:0 0 3px;font-size:13px;font-weight:600;line-height:1.4;color:var(--h-mut)}
.h-cat-ic{
  width:28px;height:28px;flex:0 0 auto;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);
}
.h-cat-ic svg{width:17px;height:17px}
.h-card h3{margin:0 0 8px;font-size:21px;line-height:1.3;letter-spacing:-.3px}
.h-card h3 a{color:var(--h-ink)}
.h-card h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.h-card h3 a:focus-visible{outline:none}
.h-keys{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;padding:0;list-style:none}
.h-keys li{padding:2px 9px;border-radius:999px;background:var(--h-ice);font-size:13px;font-weight:600;color:#334155;line-height:1.55}
.h-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.h-price{font-size:21px;font-weight:700;line-height:1.2;color:var(--accent);letter-spacing:-.4px;white-space:nowrap}
.h-price small{margin-left:4px;font-size:13px;font-weight:600;letter-spacing:0;color:var(--h-mut)}
.h-more{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-width:36px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:14.5px;font-weight:700;white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.h-more span{display:none}
.h-more svg{width:17px;height:17px;flex:0 0 auto}
.h-card:hover .h-more{background:var(--accent);color:#fff}

/* ── รูปการ์ดโปรแกรม: สัญลักษณ์ + ชื่อโปรแกรม ─────────────────────────
   เจ้าของสั่ง 14 ก.ย. 2569 ใช้แทนภาพวาด · สัญลักษณ์ชุดเดียวกับไอคอนโปรแกรมในเมนูหลัก
   สีตามธีมของโปรแกรม (t-pos t-snooker ...) · สัญลักษณ์และตัวหนังสือยืดตามความกว้างกรอบ (หน่วย cqi) */
.h-mark{
  container-type:inline-size;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 110% at 10% 0%,#fff 0%,var(--accent-soft) 62%,color-mix(in srgb,var(--accent) 14%,var(--accent-soft)) 100%);
}
.h-mark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--accent) 24%,transparent) 1.3px,transparent 1.7px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(55% 75% at 100% 0%,#000,transparent 72%);
  mask-image:radial-gradient(55% 75% at 100% 0%,#000,transparent 72%);
}
.h-mark-bg{
  position:absolute;right:-7%;bottom:-24%;width:50%;height:auto;color:var(--accent);opacity:.09;
  transform:rotate(-12deg);transition:transform .45s ease;
}
.h-mark-lock{position:relative;display:flex;align-items:center;gap:clamp(10px,4.5cqi,20px);transition:transform .35s ease}
.h-mark-ic{
  width:clamp(46px,19cqi,84px);aspect-ratio:1/1;flex:0 0 auto;border-radius:28%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 72%,#fff) 0%,var(--accent) 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 30px -16px color-mix(in srgb,var(--accent) 90%,transparent);
}
.h-mark-ic svg{width:56%;height:56%}
.h-mark-name{font-size:clamp(22px,11cqi,44px);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--h-ink);white-space:nowrap}
.h-mark-name span{color:var(--accent)}
.h-card:hover .h-mark-lock{transform:scale(1.04)}
.h-card:hover .h-mark-bg{transform:rotate(-4deg) scale(1.06)}
@container (max-width:230px){
  .h-mark-lock{flex-direction:column;gap:8px}
  .h-mark-ic{width:50px}
  .h-mark-name{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .h-mark-lock,.h-mark-bg{transition:none}
  .h-card:hover .h-mark-lock{transform:none}
  .h-card:hover .h-mark-bg{transform:rotate(-12deg)}
}

/* CARD-FX START ── การ์ดโปรแกรม: เอฟเฟคแบบ 2 และหัวข้อภาษาไทย (เจ้าของเลือก 14 ก.ย. 2569) ──────
   ป้ายสัญลักษณ์ลอยขึ้นลง · แสงวิ่งผ่านรูป · ประกายระยิบ · แต่ละใบผลัดเวลากันด้วย --hd ไม่ขยับพร้อมกัน
   ขยับด้วย translate และ transform เท่านั้น · เครื่องที่ตั้งลดการเคลื่อนไหว ไม่ขยับเลย */
.h-card:nth-child(2) .h-mark{--hd:.9s}
.h-card:nth-child(3) .h-mark{--hd:1.8s}
.h-card:nth-child(4) .h-mark{--hd:2.7s}
.h-card:nth-child(5) .h-mark{--hd:3.6s}
.h-card:nth-child(6) .h-mark{--hd:4.5s}
.h-mark-lock{z-index:1}   /* สัญลักษณ์กับชื่ออยู่บนสุดเสมอ ประกายและแสงวิ่งผ่านจะไม่ทับตัวหนังสือ */
.h-mark-ic{animation:h-mark-float 4.5s ease-in-out var(--hd,0s) infinite}
.h-mark::after{
  content:"";position:absolute;top:-25%;bottom:-25%;left:-45%;width:34%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));
  transform:skewX(-20deg);animation:h-mark-shine 6s ease-in-out var(--hd,0s) infinite;
}
/* ประกายขนาดตามความกว้างกรอบ (cqi) · วางไว้ตามมุม ไม่ให้ทับชื่อโปรแกรม */
.h-spark{
  position:absolute;width:clamp(10px,4.6cqi,17px);aspect-ratio:1/1;opacity:0;pointer-events:none;
  background:color-mix(in srgb,var(--accent) 80%,#fff);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:h-spark 3.6s ease-in-out infinite;
}
.h-spark:nth-of-type(1){top:12%;left:8%;animation-delay:calc(var(--hd,0s) + .3s)}
.h-spark:nth-of-type(2){top:76%;left:88%;width:clamp(9px,3.8cqi,14px);background:color-mix(in srgb,var(--accent) 55%,#fff);animation-delay:calc(var(--hd,0s) + 1.5s)}
.h-spark:nth-of-type(3){top:14%;left:86%;width:clamp(8px,3.2cqi,12px);animation-delay:calc(var(--hd,0s) + 2.6s)}
@container (max-width:230px){
  .h-spark:nth-of-type(2){top:6%;left:66%}
  .h-spark:nth-of-type(3){top:88%;left:10%}
}
@keyframes h-mark-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes h-mark-shine{0%,60%{transform:skewX(-20deg) translateX(0)}90%,100%{transform:skewX(-20deg) translateX(640%)}}
@keyframes h-spark{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* ชื่อโปรแกรมภาษาไทยเป็นหัวข้อการ์ด (ชื่ออังกฤษอยู่ในรูปแล้ว) */
.h-card h3.h-cat{margin:0 0 10px;gap:9px;font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-.2px;color:var(--h-ink)}
.h-card h3.h-cat .h-cat-ic{width:32px;height:32px;border-radius:10px}
.h-card h3.h-cat .h-cat-ic svg{width:19px;height:19px}
@media (min-width:620px){
  .h-card h3.h-cat{margin-bottom:14px;gap:11px;font-size:23px}
  .h-card h3.h-cat .h-cat-ic{width:40px;height:40px;border-radius:12px}
  .h-card h3.h-cat .h-cat-ic svg{width:23px;height:23px}
}
/* ซ่อนจากตา แต่โปรแกรมอ่านหน้าจอยังอ่าน */
.h-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  .h-mark-ic,.h-spark{animation:none}
  .h-mark::after{animation:none;display:none}
}
/* CARD-FX END */

/* ══ 3 · ทำไมร้านเลือก BK Rent Group · กล่องแบบเบนโตะ ═══════════════
   🔴 ทุกข้อในแถบนี้ต้องจริงกับทั้ง 6 ระบบ (ดู notes/HOME.md) */
.h-why{overflow:hidden;isolation:isolate;background:var(--h-navy);color:#fff}
.h-why .h-aurora{opacity:.55;animation-duration:30s}
.h-why .h-kicker{background:rgba(143,208,255,.12);color:var(--h-sky)}
.h-why .h-head h2{color:#fff}
.h-why .h-head p{color:rgba(255,255,255,.74)}
.h-bento{display:grid;gap:12px;grid-template-columns:1fr}
.h-tile{
  position:relative;padding:22px;border-radius:var(--h-r);
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  transition:border-color .22s ease,transform .22s ease;
}
.h-tile:hover{border-color:rgba(143,208,255,.42);transform:translateY(-3px)}
.h-tile-ic{
  width:46px;height:46px;margin-bottom:14px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(59,130,246,.38),rgba(45,212,191,.22));
  border:1px solid rgba(255,255,255,.14);color:#e0f2fe;
}
.h-tile-ic svg{width:24px;height:24px}
.h-tile h3{margin:0 0 6px;font-size:18px;line-height:1.42;color:#fff}
.h-tile p{margin:0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.74)}
.h-tile-quote{
  display:flex;flex-direction:column;justify-content:center;padding:28px 24px;
  background:
    radial-gradient(90% 120% at 0% 0%,rgba(59,130,246,.34),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
}
/* 🔴 ต้องเขียนผ่าน .h-tile-quote ไม่งั้น .h-tile p ทับขนาดตัวหนังสือจนเล็ก */
.h-tile-quote .h-quote{margin:0;font-size:clamp(26px,5.8vw,38px);line-height:1.4;font-weight:700;letter-spacing:-.5px;color:#fff}
.h-tile-quote .h-quote .h-grad{white-space:nowrap}
.h-tile-quote .h-quote-sub{margin:14px 0 0;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.74)}
.h-tile-cta{
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  background:linear-gradient(145deg,#dbeafe,#d1fae5);border-color:transparent;color:var(--h-ink);
}
.h-tile-cta:hover{text-decoration:none;color:var(--h-ink);border-color:transparent}
.h-tile-cta b{display:block;font-size:46px;line-height:1.1;letter-spacing:-1.2px;color:var(--h-blue)}
.h-tile-cta .h-tile-cta-t{display:block;margin-top:4px;font-size:17px;font-weight:700;line-height:1.45}
.h-tile-cta .h-link{color:var(--h-ink)}

/* ══ 4 · อุปกรณ์พร้อมเปิดร้าน · จอแคบเป็นรางเลื่อนซ้ายขวา ═════════════ */
.h-equip{background:#fff}
.h-eq-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:44%;gap:12px;
  margin:0 -18px;padding:4px 18px 16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none;
}
.h-eq-rail::-webkit-scrollbar{display:none}
.h-eq{
  scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;background:#fff;color:var(--h-ink);
  border:1px solid var(--h-ring);border-radius:20px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.h-eq:hover{text-decoration:none;border-color:#b9cbe6;transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(15,30,53,.55)}
.h-eq-pic{display:block;aspect-ratio:1/1;padding:14px;background:linear-gradient(180deg,#f8fafc,#edf1f7)}
.h-eq-pic img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s ease}
.h-eq:hover .h-eq-pic img{transform:scale(1.05)}
.h-eq b{display:block;padding:12px 14px 0;font-size:15px;line-height:1.4}
.h-eq small{display:block;padding:2px 14px 10px;font-size:13.5px;line-height:1.5;color:var(--h-mut)}
.h-eq-price{
  display:inline-flex;align-self:flex-start;margin:auto 14px 14px;padding:4px 11px;border-radius:999px;
  background:#eff6ff;color:var(--h-blue);font-size:14px;font-weight:700;line-height:1.5;white-space:nowrap;
}

/* EQ-SHUFFLE START · การ์ดอุปกรณ์ที่ไม่ถูกสุ่มให้แสดงมี hidden ต้องซ่อนจริง เพราะ .h-eq ตั้ง display:flex ทับค่า hidden ของเบราว์เซอร์ */
.h-eq[hidden]{display:none}
/* EQ-SHUFFLE END */

/* ══ 5 · ระบบทำงานอย่างไร ══════════════════════════════════════════ */
.h-how{background:var(--h-ice-2)}
.h-split{display:grid;gap:30px;grid-template-columns:1fr;align-items:center}
.h-split .h-head{margin-bottom:22px}
.h-flow{list-style:none;margin:0;padding:0;counter-reset:flow}
.h-flow li{position:relative;padding:2px 0 22px 58px}
.h-flow li::before{
  counter-increment:flow;content:counter(flow);position:absolute;left:0;top:0;
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--h-blue),var(--h-blue-2));color:#fff;font-size:16px;font-weight:700;
  box-shadow:0 10px 22px -10px rgba(29,78,216,.85);
}
.h-flow li::after{content:"";position:absolute;left:19px;top:46px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(#bfd3f2,rgba(191,211,242,0))}
.h-flow li:last-child{padding-bottom:0}
.h-flow li:last-child::after{display:none}
.h-flow b{display:block;font-size:17px;line-height:1.45}
.h-flow span{display:block;margin-top:3px;font-size:15px;line-height:1.66;color:var(--h-mut)}
.h-how-pic{margin:0;padding:12px;border-radius:28px;background:linear-gradient(145deg,#dbeafe,#e0f2fe 52%,#dcfce7);box-shadow:var(--h-shadow)}
.h-how-pic img{display:block;width:100%;height:auto;border-radius:18px}

/* ══ 6 · ร้านจริง ใช้จริง · สไลด์คลิปยูทูบ ═══════════════════════════
   🔴 รูปปกคลิปเก็บในเว็บเราเอง assets/img/home/yt-รหัสคลิป.jpg ไม่ดึงจากยูทูบตอนลูกค้าเปิดหน้า
   🔴 ไม่ใส่เวลาคลิป เพราะคลิปฟีเจอร์เช็กเวลาจากยูทูบไม่ได้ ใส่ครึ่งเดียวจะดูไม่เท่ากัน
   จอแคบรางยื่นชนขอบจอสองข้าง (--h-vt-in คือระยะที่ต้องหดปุ่มลูกศรเข้ามาให้ตรงขอบเนื้อหา) */
.h-real{background:#fff}
.h-slider{position:relative}
.h-vtrack{
  --h-vt-in:18px;
  list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;
  margin:0 -18px;padding:6px 18px 20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:18px;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:#c5d3e8 transparent;
  anchor-name:--h-vt;
}
.h-vslide{display:flex;scroll-snap-align:start}
.h-v{
  display:flex;flex-direction:column;width:100%;overflow:hidden;color:var(--h-ink);background:#fff;
  border:1px solid var(--h-ring);border-radius:var(--h-r);box-shadow:var(--h-shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.h-v:hover{text-decoration:none;transform:translateY(-3px);border-color:#c3d2ea;box-shadow:0 1px 2px rgba(15,23,42,.05),0 28px 50px -30px rgba(15,23,42,.55)}
.h-v-pic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--h-navy)}
.h-v-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.h-v-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,13,27,0) 50%,rgba(6,13,27,.5))}
.h-v:hover .h-v-pic img{transform:scale(1.05)}
.h-v-play{
  position:absolute;left:50%;top:50%;z-index:1;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(225,29,46,.94);color:#fff;
  box-shadow:0 0 0 8px rgba(255,255,255,.2),0 14px 30px -12px rgba(0,0,0,.75);transition:transform .2s ease;
}
.h-v-play svg{width:22px;height:22px;margin-left:3px}
.h-v:hover .h-v-play{transform:scale(1.1)}
.h-v-tag{
  position:absolute;left:10px;top:10px;z-index:1;padding:3px 10px;border-radius:999px;
  font-size:12.5px;font-weight:700;line-height:1.55;background:#fff;color:var(--h-ink);
}
.h-v-tag.is-review{background:#dcfce7;color:#166534}
.h-v-tag.is-feature{background:#dbeafe;color:#1e3a8a}
.h-v-txt{display:block;padding:14px 16px 17px}
.h-v-txt b{display:block;font-size:17px;line-height:1.42}
.h-v-txt small{display:block;margin-top:3px;font-size:14px;line-height:1.62;color:var(--h-mut)}
.h-vhint{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 0;font-size:14px;color:var(--h-mut)}
.h-vhint svg{width:18px;height:18px;flex:0 0 auto}

/* ปุ่มลูกศรและจุดบอกตำแหน่งแบบ CSS ล้วน · เบราว์เซอร์ที่ไม่รู้จักจะข้ามทั้งก้อนนี้ไป */
@supports selector(::scroll-marker){
  .h-vhint{display:none}
  .h-vtrack{scrollbar-width:none;scroll-marker-group:after;padding-bottom:18px}
  .h-vtrack::-webkit-scrollbar{display:none}
  /* 🔴 เว้นขวาด้วย margin ห้ามใช้ padding · กล่องจุดกว้างทับใต้ปุ่มลูกศรแล้วกดลูกศรไม่ติด (ทดสอบใน Chrome 152) */
  .h-vtrack::scroll-marker-group{display:flex;align-items:center;gap:7px;min-height:46px;margin:0 110px 0 0;padding:0}
  .h-vslide::scroll-marker{
    content:"";width:9px;height:9px;border-radius:999px;background:#cbd5e1;cursor:pointer;
    transition:width .25s ease,background-color .25s ease;
  }
  .h-vslide::scroll-marker:target-current{width:28px;background:var(--h-blue)}
  .h-vtrack::scroll-button(*){
    position:absolute;z-index:1;position-anchor:--h-vt;top:calc(anchor(bottom) + 1px);
    width:44px;height:44px;border-radius:50%;cursor:pointer;
    border:1px solid var(--h-ring);background:#fff no-repeat center/20px 20px;color:var(--h-ink);
    box-shadow:0 10px 22px -14px rgba(15,23,42,.6);
    transition:background-color .18s ease,border-color .18s ease,opacity .18s ease;
  }
  .h-vtrack::scroll-button(left){
    content:"" / "คลิปก่อนหน้า";right:calc(anchor(right) + var(--h-vt-in) + 54px);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6'/%3E%3Cpath d='m12 5-7 7 7 7'/%3E%3C/svg%3E");
  }
  .h-vtrack::scroll-button(right){
    content:"" / "คลิปถัดไป";right:calc(anchor(right) + var(--h-vt-in));
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  }
  .h-vtrack::scroll-button(*):hover:not(:disabled){border-color:var(--h-blue);background-color:#eff6ff}
  .h-vtrack::scroll-button(*):disabled{opacity:.35;cursor:default}
}

.h-shops-t{margin:34px 0 14px;font-size:18px;line-height:1.4;color:var(--h-ink)}
.h-shops{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.h-shop{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;border-radius:20px;background:var(--h-navy);box-shadow:var(--h-shadow)}
.h-shop img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.h-shop:hover img{transform:scale(1.06)}
.h-shop span{
  position:absolute;left:0;right:0;bottom:0;padding:36px 13px 12px;color:#fff;
  background:linear-gradient(180deg,rgba(6,13,27,0),rgba(6,13,27,.9));
}
.h-shop b{display:block;font-size:15px;line-height:1.35}
.h-shop small{display:block;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.82)}
.h-shop:hover{text-decoration:none}

/* ══ 7 · ครบตั้งแต่โปรแกรมถึงอุปกรณ์ ════════════════════════════════ */
.h-onestop{background:var(--h-ice-2)}
.h-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
.h-steps li{position:relative;padding:24px 22px;border-radius:var(--h-r);background:#fff;border:1px solid var(--h-ring);box-shadow:var(--h-shadow)}
.h-step-no{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:14px;border-radius:14px;
  background:linear-gradient(140deg,var(--h-blue),var(--h-blue-2));color:#fff;font-size:18px;font-weight:700;
  box-shadow:0 12px 22px -12px rgba(29,78,216,.85);
}
.h-steps h3{margin:0 0 6px;font-size:18.5px;line-height:1.4}
.h-steps p{margin:0;font-size:15.5px;line-height:1.7;color:#334155}

/* ══ 8 · ชวนทักไลน์ก่อนจบ · กล่องเข้มมุมมน ═══════════════════════════ */
.h-final{padding:6px 0 56px;background:var(--h-ice-2)}
.h-final-card{
  position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:46px 22px;
  text-align:center;color:#fff;background:var(--h-navy);box-shadow:0 26px 50px -36px rgba(6,13,27,.7);
}
.h-final-card .h-aurora{opacity:.8;animation-duration:28s}
.h-final h2{margin:0 0 12px;font-size:clamp(28px,6.4vw,42px);line-height:1.28;letter-spacing:-.5px}
.h-final p{margin:0 auto 28px;max-width:52ch;font-size:17px;line-height:1.72;color:rgba(255,255,255,.82)}
.h-final .h-cta{justify-content:center}
.h-btn-xl{font-size:19px;padding:18px 34px}
.h-btn-xl svg{width:23px;height:23px}

/* ══ ค่อย ๆ โผล่ตอนเลื่อนถึง · CSS ล้วน (animation-timeline) ═══════════
   ขยับด้วย translate ไม่ใช้ transform จะได้ไม่ชนกับอาการลอยตอนเอาเมาส์ชี้
   🔴 ห้ามใส่คลาส h-rv กับของที่อยู่ในรางเลื่อนซ้ายขวา ให้ใส่ที่ตัวรางแทน */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .h-rv{animation:h-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes h-rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}

/* ══ จอแคบ ═════════════════════════════════════════════════════════ */
@media (max-width:619px){
  .h-sec{padding:46px 0}
  .h-hero .h-btn,.h-final .h-btn{width:100%}
  .h-col-card{padding:7px 14px 7px 7px}
  .h-col-card img{width:54px;height:54px}
  .h-col-chip{font-size:12.5px;padding:7px 12px 7px 9px}
  .h-head-row{align-items:flex-start}
  /* กล่องเหตุผลบนมือถือ ไอคอนซ้าย ข้อความขวา หน้าไม่ยาวเกิน */
  .h-tile{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px}
  .h-tile-ic{grid-row:span 2;width:44px;height:44px;margin:2px 0 0}
  .h-tile h3,.h-tile p{grid-column:2}
  .h-tile h3{margin:0 0 3px;font-size:17px}
  .h-tile-quote,.h-tile-cta{display:flex;padding:24px 20px}
}

/* ══ จอกว้างขึ้น ════════════════════════════════════════════════════ */
@media (min-width:620px){
  .h-cards{grid-template-columns:1fr 1fr;gap:18px}
  .h-card{flex-direction:column}
  .h-shot{flex:none;aspect-ratio:3/2}
  .h-shot.h-mark{aspect-ratio:2/1}   /* รูปการ์ดสัญลักษณ์ + ชื่อโปรแกรม (จอแคบการ์ดเป็นแนวนอน ไม่ล็อกสัดส่วน) */
  .h-card-body{padding:18px 20px 20px}
  .h-cat{font-size:14px;margin-bottom:6px}
  .h-cat-ic{width:34px;height:34px;border-radius:11px}
  .h-cat-ic svg{width:20px;height:20px}
  .h-card h3{font-size:25px;margin-bottom:12px}
  .h-keys{gap:6px;margin-bottom:18px}
  .h-keys li{padding:4px 12px;font-size:14px}
  .h-card-foot{padding-top:14px;border-top:1px solid var(--line-2)}
  .h-price{font-size:26px}
  .h-more{padding:0 14px 0 16px}
  .h-more span{display:inline}
  .h-bento{grid-template-columns:1fr 1fr;gap:14px}
  .h-tile-quote,.h-tile-cta{grid-column:span 2}
  .h-eq-rail{grid-auto-columns:30%}
  .h-vtrack{grid-auto-columns:calc((100% - 14px) / 2.15)}
  .h-steps{grid-template-columns:repeat(3,1fr);gap:16px}
  .h-shops{grid-template-columns:repeat(4,1fr)}
  .h-stats li{padding:18px 20px}
}
@media (min-width:900px){
  .h-split{grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:52px}
}
@media (min-width:980px){
  .h-sec{padding:76px 0}
  .h-hero{padding:64px 0 40px}
  .h-hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px}
  .h-hero .h-btn{font-size:16px;padding:15px 22px}
  .h-col-card{left:-30px}
  .h-col-chip{right:-18px}
  .h-stats{grid-template-columns:repeat(4,1fr);margin-top:44px}
  .h-cards{grid-template-columns:repeat(3,1fr);gap:22px}
  .h-bento{grid-template-columns:repeat(3,1fr);gap:16px}
  .h-tile-cta{grid-column:auto}
  .h-eq-rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(6,1fr);margin:0;padding:4px 0 0;overflow:visible}
  .h-vtrack{--h-vt-in:0px;grid-auto-columns:calc((100% - 28px) / 3.25);margin:0;padding-left:0;padding-right:0;scroll-padding-inline:0}
  .h-steps{gap:24px}
  .h-final-card{padding:62px 40px}
}

/* แถบท้ายเว็บชิดกล่องชวนทักไลน์ ไม่ให้มีช่องพื้นเทาคั่น */
body.home .footer{margin-top:0}

@media (prefers-reduced-motion:reduce){
  .h-aurora,.h-dot,.h-col-card,.h-col-chip{animation:none}
  .h-vtrack{scroll-behavior:auto}
  .h-btn,.h-card,.h-eq,.h-v,.h-tile,.h-shot img,.h-v-pic img,.h-shop img,.h-eq-pic img,.h-v-play,.h-link svg{transition:none}
  .h-btn:hover,.h-card:hover,.h-eq:hover,.h-v:hover,.h-tile:hover{transform:none}
  .h-card:hover .h-shot img,.h-v:hover .h-v-pic img,.h-shop:hover img,.h-eq:hover .h-eq-pic img{transform:none}
}