/* ══ HERO-HX START · หัวเว็บรุ่น 2 (25 ก.ย. 2569 · notes/home-hero/make_hero.py) ═══════════════════════════════
   ภาพเจ้าของ 1672x780 (ตัดจาก 1672x941) · คอมพิวเตอร์: ข้อความ HTML วางทับตำแหน่งเดิมในภาพด้วยหน่วย --k (1px ภาพ = 100cqw/1672)
   มือถือ/แท็บเล็ต: ข้อความบน · ภาพฉากล่าง (ครอปภาพเดียวกันด้วย .h-hx2-art จึงเอฟเฟกต์ตรงจุดเดิม) */
.h-hx2{position:relative;overflow:hidden;background:linear-gradient(180deg,#f3f8fe 0%,#eaf3fd 100%);color:#0b1230}
.h-hx2-stage{position:relative;max-width:2100px;margin:0 auto;container-type:inline-size;--k:calc(100cqw / 1672)}
.h-hx2-frame{position:relative;overflow:hidden}
.h-hx2-art{position:relative;aspect-ratio:1672/780;container-type:inline-size;--ka:calc(100cqw / 1672)}
.h-hx2-art img{display:block;width:100%;height:100%}
.h-hx2-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hx2-run,.hx2-edge{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;will-change:transform,opacity}
.hx2-run::before{content:"";position:absolute;left:0;top:0;width:max(9px,calc(22 * var(--ka)));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#fff 0 16%,rgba(191,240,255,.95) 30%,rgba(92,200,255,.35) 52%,rgba(92,200,255,0) 72%)}
.hx2-edge::before{content:"";position:absolute;left:0;top:0;width:calc(150 * var(--ka));height:calc(12 * var(--ka));transform:translate(-50%,-50%) rotate(2deg);border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.95) 0,rgba(159,224,255,.55) 40%,rgba(159,224,255,0) 70%);mix-blend-mode:screen}
.hx2-scan{position:absolute;opacity:0;border-radius:50%;mix-blend-mode:screen;will-change:transform,opacity;
  background:radial-gradient(circle,#ffd6cf 0,rgba(255,90,69,.85) 30%,rgba(255,59,43,0) 70%)}
@keyframes hx2-scan{0%,100%{opacity:0;transform:scale(.7)}6%{opacity:.95;transform:scale(1.15)}16%{opacity:.35;transform:scale(1)}26%{opacity:0;transform:scale(1)}}
@keyframes hx2-fade{0%{opacity:0}8%{opacity:1}64%{opacity:1}72%,100%{opacity:0}}
@keyframes hx2-fadee{0%{opacity:0}8%{opacity:.9}66%{opacity:.9}75%,100%{opacity:0}}
@keyframes hx2-mv1{0.0%{transform:translate(27.99%,70.51%)}2.6%{transform:translate(28.41%,71.12%)}5.1%{transform:translate(28.84%,71.69%)}7.6%{transform:translate(29.27%,72.22%)}10.1%{transform:translate(29.71%,72.72%)}12.6%{transform:translate(30.16%,73.17%)}15.1%{transform:translate(30.62%,73.59%)}17.6%{transform:translate(31.08%,73.96%)}20.1%{transform:translate(31.54%,74.29%)}22.6%{transform:translate(32.01%,74.59%)}25.1%{transform:translate(32.49%,74.83%)}27.5%{transform:translate(32.97%,75.04%)}30.0%{transform:translate(33.45%,75.20%)}32.5%{transform:translate(33.93%,75.32%)}34.9%{transform:translate(34.42%,75.39%)}37.4%{transform:translate(34.91%,75.41%)}39.9%{transform:translate(35.41%,75.38%)}42.0%{transform:translate(35.83%,75.33%)}44.2%{transform:translate(36.25%,75.27%)}46.3%{transform:translate(36.66%,75.20%)}48.3%{transform:translate(37.07%,75.12%)}50.4%{transform:translate(37.47%,75.05%)}52.4%{transform:translate(37.88%,74.97%)}54.4%{transform:translate(38.27%,74.90%)}56.4%{transform:translate(38.67%,74.84%)}58.4%{transform:translate(39.06%,74.78%)}60.4%{transform:translate(39.45%,74.74%)}62.3%{transform:translate(39.83%,74.71%)}64.3%{transform:translate(40.22%,74.70%)}66.2%{transform:translate(40.60%,74.71%)}68.1%{transform:translate(40.98%,74.74%)}70.1%{transform:translate(41.37%,74.79%)}72.0%{transform:translate(41.75%,74.87%)}100%{transform:translate(41.75%,74.87%)}}
@keyframes hx2-mv2{0.0%{transform:translate(41.99%,46.41%)}3.9%{transform:translate(42.77%,46.64%)}7.9%{transform:translate(43.56%,46.96%)}11.9%{transform:translate(44.34%,47.37%)}16.0%{transform:translate(45.13%,47.86%)}20.1%{transform:translate(45.91%,48.43%)}24.3%{transform:translate(46.70%,49.09%)}28.5%{transform:translate(47.49%,49.84%)}32.9%{transform:translate(48.28%,50.67%)}37.4%{transform:translate(49.07%,51.59%)}41.9%{transform:translate(49.86%,52.60%)}46.6%{transform:translate(50.66%,53.70%)}51.4%{transform:translate(51.46%,54.88%)}56.4%{transform:translate(52.25%,56.16%)}61.4%{transform:translate(53.06%,57.52%)}66.6%{transform:translate(53.86%,58.97%)}72.0%{transform:translate(54.67%,60.51%)}100%{transform:translate(54.67%,60.51%)}}
@keyframes hx2-mv3{0.0%{transform:translate(44.74%,75.64%)}4.5%{transform:translate(45.14%,75.92%)}9.1%{transform:translate(45.54%,76.20%)}13.6%{transform:translate(45.95%,76.46%)}18.1%{transform:translate(46.35%,76.72%)}22.5%{transform:translate(46.76%,76.96%)}27.0%{transform:translate(47.17%,77.19%)}31.5%{transform:translate(47.57%,77.41%)}36.0%{transform:translate(47.98%,77.61%)}40.5%{transform:translate(48.39%,77.80%)}44.9%{transform:translate(48.80%,77.98%)}49.4%{transform:translate(49.22%,78.14%)}53.9%{transform:translate(49.63%,78.29%)}58.4%{transform:translate(50.05%,78.42%)}62.9%{transform:translate(50.47%,78.54%)}67.5%{transform:translate(50.89%,78.64%)}72.0%{transform:translate(51.32%,78.72%)}100%{transform:translate(51.32%,78.72%)}}
@keyframes hx2-mve{0.0%{transform:translate(2.39%,83.59%)}4.5%{transform:translate(6.01%,83.84%)}9.1%{transform:translate(9.67%,84.09%)}13.8%{transform:translate(13.38%,84.36%)}18.5%{transform:translate(17.12%,84.64%)}23.2%{transform:translate(20.89%,84.93%)}27.9%{transform:translate(24.68%,85.23%)}32.7%{transform:translate(28.49%,85.55%)}37.5%{transform:translate(32.30%,85.87%)}42.3%{transform:translate(36.11%,86.19%)}47.0%{transform:translate(39.91%,86.53%)}51.8%{transform:translate(43.70%,86.88%)}56.5%{transform:translate(47.47%,87.23%)}61.2%{transform:translate(51.21%,87.59%)}65.9%{transform:translate(54.92%,87.96%)}70.5%{transform:translate(58.59%,88.34%)}75.0%{transform:translate(62.20%,88.72%)}100%{transform:translate(62.20%,88.72%)}}
.hx2-run-1{animation:hx2-mv1 4.2s linear 0.0s infinite,hx2-fade 4.2s linear 0.0s infinite}
.hx2-run-2{animation:hx2-mv2 4.6s linear 1.5s infinite,hx2-fade 4.6s linear 1.5s infinite}
.hx2-run-3{animation:hx2-mv3 3.6s linear 2.8s infinite,hx2-fade 3.6s linear 2.8s infinite}
.hx2-edge{animation:hx2-mve 9.0s linear infinite,hx2-fadee 9.0s linear infinite}
.hx2-scan-a{width:calc(60 * var(--ka));height:calc(60 * var(--ka));margin:calc(-30 * var(--ka)) 0 0 calc(-30 * var(--ka));animation:hx2-scan 5.2s ease-out 0.0s infinite}
.hx2-scan-b{width:calc(40 * var(--ka));height:calc(40 * var(--ka));margin:calc(-20 * var(--ka)) 0 0 calc(-20 * var(--ka));animation:hx2-scan 5.8s ease-out 2.6s infinite}

/* ── ข้อความ (มือถือเป็นค่าเริ่มต้น) ── */
.h-hx2-copy{position:relative;z-index:2;padding:26px 18px 8px}
.h-hx2-label{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:6px 14px 6px 10px;border-radius:999px;
  border:1.5px solid rgba(90,150,235,.35);background:rgba(255,255,255,.7);font-size:12px;font-weight:700;letter-spacing:.02em;color:#0b4fcf}
.h-hx2-live{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:#16c13c;box-shadow:0 0 6px rgba(22,193,60,.55)}
.h-hx2-live i{position:absolute;inset:0;border-radius:50%;background:rgba(22,193,60,.42);animation:hx2-live 2.4s ease-out infinite}
.h-hx2-live i+i{animation-delay:1.2s}
@keyframes hx2-live{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.8);opacity:0}}
.h-hx2 .h-hx2-title{position:relative;margin:0 0 12px;font-size:clamp(30px,8.2vw,40px);line-height:1.14;font-weight:700;letter-spacing:-.01em}
.h-hx2 .h-hx2-title span{display:block}
.h-hx2-l1{color:#0b1230}
.h-hx2-l2{background:linear-gradient(90deg,#0a38b0,#0b47cf);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-hx2-l2,.h-hx2-l3{padding:.24em 0 .16em;margin:-.24em 0 -.16em}  /* พื้นที่ให้วรรณยุกต์/สระบนล่างไม่ถูกตัด (background-clip:text) */
.h-hx2-l3{margin-top:.04em;background:linear-gradient(90deg,#0e5fe6,#0a3fe8);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-hx2-swoosh{position:absolute;left:-.4em;top:2.02em;width:5em;height:.62em;pointer-events:none}
.h-hx2-sub{margin:0 0 18px;font-size:clamp(15px,4.1vw,17.5px);line-height:1.6;color:#4d556d}
.h-hx2-cta{display:grid;gap:10px;margin:0 0 22px}
.h-hx2-btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 22px;border-radius:999px;
  font-size:16.5px;font-weight:700;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.h-hx2-btn svg{width:22px;height:22px;flex:none}
.h-hx2-btn-main{background:linear-gradient(90deg,#0a45cd 0%,#0b6fe6 55%,#0b8cf2 100%);color:#fff;box-shadow:0 14px 28px -14px rgba(11,79,215,.8)}
.h-hx2-btn-alt{background:rgba(255,255,255,.75);color:#0a3fc4;border:2px solid #1a66f0}
.h-hx2-btn:hover{text-decoration:none;transform:translateY(-2px)}
.h-hx2-btn-main:hover{color:#fff;box-shadow:0 18px 32px -14px rgba(11,79,215,.9)}
.h-hx2-btn-alt:hover{color:#0a3fc4;background:#fff}
.h-hx2-btn:focus-visible{outline:3px solid #0b1230;outline-offset:3px}
.h-hx2-feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.h-hx2-feat li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 4px}
.h-hx2-feat li+li{border-left:1px solid #cbd8ec}
.h-hx2-fic svg{display:block;width:30px;height:30px;color:#0a3fc4}
.h-hx2-ft{font-size:12.5px;line-height:1.35;color:#0b1453;font-weight:500}
/* ภาพฉากบนมือถือ/แท็บเล็ต: ครอปเฉพาะมาสคอต + อุปกรณ์ (ภาพต้นแบบ x 60-1070 · y 110-800) */
@media (max-width:1099px){ .h-hx2-stage{display:flex;flex-direction:column} .h-hx2-copy{order:-1} .h-hx2-frame{width:100%;box-sizing:border-box} }
.h-hx2-frame{aspect-ratio:1010/690}
.h-hx2-frame .h-hx2-art{position:absolute;width:165.54%;left:-5.94%;top:-8.7%}
.hx2-run-2,.hx2-run-3,.hx2-edge{display:none}
@media (min-width:700px) and (max-width:1099px){
  .h-hx2-copy{padding:40px 40px 10px;max-width:760px}
  .h-hx2 .h-hx2-title{font-size:48px}
  .h-hx2-sub{font-size:19px}
  .h-hx2-cta{grid-template-columns:auto auto;justify-content:start}
  .h-hx2-btn{padding:0 30px}
  .h-hx2-ft{font-size:14px}
  .h-hx2-frame{max-width:900px;margin:0 auto}
  .hx2-run-2{display:block}
}
/* ── คอมพิวเตอร์ ≥1100: ภาพเต็ม ข้อความวางตำแหน่งเดิมในภาพ ── */
@media (min-width:1100px){
  .h-hx2-frame{aspect-ratio:auto}
  .h-hx2-frame .h-hx2-art{position:relative;width:100%;left:0;top:0}
  .hx2-run-2,.hx2-run-3,.hx2-edge{display:block}
  .h-hx2-copy{position:absolute;left:64.9%;top:15.4%;width:34%;padding:0}
  .h-hx2-label{height:calc(38 * var(--k));box-sizing:border-box;margin:0 0 calc(40 * var(--k));padding:0 calc(16 * var(--k)) 0 calc(12 * var(--k));
    gap:calc(12 * var(--k));font-size:calc(15.2 * var(--k));border-width:calc(1.5 * var(--k))}
  .h-hx2-live{width:calc(13 * var(--k));height:calc(13 * var(--k))}
  .h-hx2 .h-hx2-title{font-size:calc(63 * var(--k));line-height:1;margin:0 0 calc(22 * var(--k))}
  .h-hx2 .h-hx2-title span{white-space:nowrap}
  .h-hx2-l3{margin-top:calc(22 * var(--k));font-size:calc(55 * var(--k))}
  .h-hx2-swoosh{left:calc(-28 * var(--k));top:calc(124 * var(--k));width:calc(300 * var(--k));height:calc(40 * var(--k))}
  .h-hx2-sub{font-size:calc(23.4 * var(--k));line-height:1.52;margin:0 0 calc(30 * var(--k))}
  .h-hx2-cta{grid-template-columns:calc(265 * var(--k)) calc(242 * var(--k));gap:calc(10 * var(--k));margin:0 0 calc(44 * var(--k))}
  .h-hx2-btn{min-height:0;height:calc(63 * var(--k));padding:0;gap:calc(18 * var(--k));font-size:calc(22 * var(--k))}
  .h-hx2-btn svg{width:calc(28 * var(--k));height:calc(28 * var(--k))}
  .h-hx2-btn-alt{border-width:calc(2 * var(--k));font-size:calc(21 * var(--k))}
  .h-hx2-feat{grid-template-columns:repeat(4,calc(143 * var(--k)));margin-left:calc(-12 * var(--k))}
  .h-hx2-feat li{gap:calc(10 * var(--k));padding:0}
  .h-hx2-fic svg{width:calc(42 * var(--k));height:calc(42 * var(--k))}
  .h-hx2-ft{font-size:calc(19.5 * var(--k));line-height:1.24}
}
.h-hx2.is-still *,.h-hx2.is-still *::before,.h-hx2.is-still *::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .h-hx2 *{animation:none!important}
  .hx2-run,.hx2-edge,.hx2-scan{display:none!important}
  .h-hx2-btn{transition:none}
  .h-hx2-btn:hover{transform:none}
}
/* แถบสั่งซื้อ (ORDERHOW) ที่อยู่ใต้ฮีโร่: ชื่อแถบเป็น <div> ไม่ใช่ h2 (อยู่ก่อน h1 ของ search.html) → ใส่ค่าเดิมของ `.of-hband h2` + h1,h2,h3 ใน style.css ให้เอง หน้าตาเท่าเดิม */
.of-hband .of-hband-title{margin:0 0 4px;font-size:19px;line-height:1.4;color:var(--ink,#0b1b36);font-weight:700;letter-spacing:-.01em}
/* ══ HERO-HX END ══ */