/* hookgrowth mega menu · โหลดโดย hg-mega-menu.php (novamira-sandbox) · ค่าจาก DESIGN.md · prefix hgmm- ทุกตัวกันชนกับ Astra/Elementor */
.hgmm{--ink-900:#09090B;--ink-800:#18181B;--ink-700:#27272A;--ink-600:#3F3F46;--ink-500:#52525B;--ink-400:#71717A;--ink-300:#A1A1AA;--ink-200:#D4D4D8;--ink-100:#ECECEE;--ink-50:#F4F4F5;--white:#fff;--mint:#3ECFAF;--mint-tint:#E8F8F3;--teal-ink:#12695B;--sunken:#FAFAFA;
  --font:"Anuphan",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--r-btn:14px;--r-sm:20px;--r-md:24px;--r-card:36px;--float:0 4px 12px 0 rgba(0,0,0,.04);--hair:1px solid #ECECEE;
  font-family:var(--font);color:var(--ink-800);line-height:1.5;-webkit-font-smoothing:antialiased}
.hgmm *,.hgmm *::before,.hgmm *::after{box-sizing:border-box}
.hgmm svg{display:block}
.hgmm-sprite{position:absolute;width:0;height:0;overflow:hidden}
.hgmm button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;margin:0}
/* Elementor kit ใส่สไตล์ให้ <button> ทั้งเว็บด้วย .elementor-kit-N button ซึ่งแรงเท่ากันแต่โหลดทีหลัง จึงต้องรีเซ็ตด้วย selector ที่แรงกว่า */
.hgmm button.hgmm-btn,.hgmm button.hgmm-chev,.hgmm button.hgmm-caret,.hgmm button.hgmm-burger{
  font-family:var(--font);font-size:inherit;font-weight:inherit;line-height:1.5;color:inherit;
  background:transparent;background-color:transparent;border:0;box-shadow:none;outline:none;padding:0;margin:0;min-height:0;min-width:0;
  text-transform:none;letter-spacing:normal;border-radius:0;transition:none}
.hgmm button.hgmm-btn:hover,.hgmm button.hgmm-chev:hover,.hgmm button.hgmm-caret:hover,.hgmm button.hgmm-burger:hover{background:transparent;background-color:transparent;border:0;box-shadow:none;color:inherit}
.hgmm button.hgmm-btn:focus-visible,.hgmm button.hgmm-chev:focus-visible,.hgmm button.hgmm-caret:focus-visible,.hgmm button.hgmm-burger:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px}
.hgmm button.hgmm-btn{font-size:16px;font-weight:500;color:var(--ink-800);display:inline-flex;align-items:center;height:24px;line-height:1;transform:translateY(2px)}  /* Chrome วางข้อความใน <button> สูงกว่าใน <a> 2px แม้กล่องเท่ากัน วัดจริงบน live */
.hgmm button.hgmm-chev{width:22px;height:22px;border-radius:8px;color:var(--ink-600)}
.hgmm button.hgmm-caret{width:40px;height:40px;border-radius:12px;color:var(--ink-500)}
.hgmm button.hgmm-burger{width:40px;height:40px;border-radius:12px;color:var(--ink-900)}
.hgmm a{text-decoration:none}

/* ให้แผงอ้างอิงกล่อง header เต็มความกว้าง (#hg-header) ไม่ใช่ container ชั้นในหรือ widget */
#hg-header .elementor-element-c1a0002,#hg-header .elementor-element-c1a0006,#hg-header .elementor-element-c1a0006 .elementor-widget-container,#hg-header .e-con-inner{position:static}
#hg-header{overflow:visible}

/* ---------- แถบเมนูเดสก์ท็อป ---------- */
.hgmm-nav{display:flex;align-items:center;gap:4px}
.hgmm-item{position:relative;display:flex;align-items:center}
.hgmm-item.is-mega{position:static}
.hgmm-top{display:inline-flex;align-items:center;gap:2px;padding:10px 8px 10px 14px;border-radius:12px;transition:background .16s ease,color .16s ease}
.hgmm-item.is-plain .hgmm-top{padding-right:14px}
.hgmm-btn{display:inline-flex;align-items:center;height:24px;line-height:1;font-size:16px;font-weight:500;color:var(--ink-800);white-space:nowrap}  /* a และ button จัดกึ่งกลางเหมือนกัน กัน baseline ต่าง 2px */
.hgmm-btn:hover{color:var(--ink-900);text-decoration:none}
.hgmm-chev{width:22px;height:22px;display:grid;place-items:center;color:var(--ink-600);border-radius:8px}
.hgmm-chev svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.hgmm-item:hover>.hgmm-top,.hgmm-item.is-open>.hgmm-top{background:var(--white)}
.hgmm-item.is-open>.hgmm-top .hgmm-btn{color:var(--ink-900)}
.hgmm-item.is-open>.hgmm-top .hgmm-chev svg{transform:rotate(180deg)}

/* ---------- แผง ---------- */
.hgmm-panel{position:absolute;z-index:390;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.hgmm-item.is-open>.hgmm-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hgmm-panel.is-mega{left:0;right:0;top:100%;padding:0 24px 24px}
.hgmm-panel-in{width:fit-content;max-width:100%;margin:0 auto;background:var(--white);border:var(--hair);border-radius:var(--r-card);box-shadow:var(--float);padding:28px;display:flex;gap:40px}
.hgmm-panel.is-narrow{left:auto;right:auto;top:100%;width:max-content;min-width:200px;max-width:380px;padding:12px 0 0}
.hgmm-panel.is-narrow.to-left{left:0}
.hgmm-panel.is-narrow.to-right{right:0}
.hgmm-panel.is-narrow .hgmm-panel-in{width:100%;margin:0;padding:16px;border-radius:var(--r-md)}
.hgmm-col{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.hgmm-group{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink-400);padding:10px 12px 8px}
.hgmm-col .hgmm-row+.hgmm-group{margin-top:14px;border-top:var(--hair);padding-top:18px}
.hgmm-row{position:relative;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r-sm);transition:background .14s ease}
.hgmm-row:hover{background:var(--ink-50)}
.hgmm-ico{flex:none;width:24px;height:24px;color:var(--ink-500);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:color .14s ease}
.hgmm-row:hover .hgmm-ico{color:var(--teal-ink)}
.hgmm-tx{min-width:0}
.hgmm-t{display:block;font-size:16px;font-weight:500;color:var(--ink-800);line-height:1.4;white-space:nowrap}
.hgmm-t:hover{color:var(--ink-900);text-decoration:none}
.hgmm-t::after{content:'';position:absolute;inset:0;border-radius:inherit}        /* กดได้เต็มแถว โดย <a> ยังครอบเฉพาะข้อความ */
.hgmm-t.is-plain{color:var(--ink-600)}
.hgmm-row.is-lead .hgmm-t{font-weight:600;color:var(--ink-900)}

/* ---------- การ์ด CTA ในแผงใหญ่ ---------- */
.hgmm-promo{flex:none;width:290px;position:relative;overflow:hidden;border:var(--hair);border-radius:var(--r-md);background:var(--sunken) var(--hgmm-promo,none) center/cover no-repeat;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.hgmm-promo::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.58) 34%,rgba(255,255,255,0) 60%)}
.hgmm-promo>*{position:relative;z-index:1}
.hgmm-promo p{margin:0;font-size:20px;font-weight:600;line-height:1.45;color:var(--ink-900);letter-spacing:-.01em}
.hgmm-promo small{display:block;font-size:13px;color:var(--ink-500);margin-top:8px;line-height:1.6}
.hgmm-promo-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:var(--ink-900);color:var(--white);font-size:15px;font-weight:500;padding:12px 18px;border-radius:var(--r-btn);box-shadow:inset 0 .5px 0 0 rgba(255,255,255,.3),0 4px 6px 0 rgba(0,0,0,.14)}
.hgmm-promo-cta:hover{background:var(--ink-700);color:var(--white)}
.hgmm-promo-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- มือถือ ---------- */
.hgmm-burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--ink-900);border-radius:12px}
.hgmm-burger svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hgmm-burger .hgmm-x{display:none}
body.hgmm-open .hgmm-burger .hgmm-x{display:block}
body.hgmm-open .hgmm-burger .hgmm-bars{display:none}
.hgmm-mpanel{display:none;position:absolute;left:0;right:0;top:100%;z-index:380;background:var(--white);border-bottom:var(--hair);box-shadow:var(--float);max-height:calc(100vh - var(--hgmm-hdr,66px));overflow-y:auto;overscroll-behavior:contain}
body.hgmm-open .hgmm-mpanel{display:block}
.hgmm-mrow{position:relative;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:var(--hair)}
.hgmm-mlink{flex:1;min-width:0;padding:15px 0;font-size:17px;font-weight:500;color:var(--ink-800);line-height:1.45}
.hgmm-mlink:hover{color:var(--ink-900);text-decoration:none}
a.hgmm-mlink::after{content:'';position:absolute;inset:0}
.hgmm-caret{position:relative;z-index:2;flex:none;width:40px;height:40px;display:grid;place-items:center;color:var(--ink-500);border-radius:12px}
.hgmm-caret svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.hgmm-mnode.is-open>.hgmm-mrow .hgmm-caret svg{transform:rotate(180deg)}
.hgmm-mrow>.hgmm-ico{width:22px;height:22px}
.hgmm-msub{display:none;background:var(--sunken)}
.hgmm-mnode.is-open>.hgmm-msub{display:block}
.hgmm-msub .hgmm-mrow{padding-left:34px}
.hgmm-msub .hgmm-msub .hgmm-mrow{padding-left:56px;background:var(--white)}
.hgmm-msub .hgmm-mlink{font-size:16px;font-weight:400;padding:13px 0}
.hgmm-msub .hgmm-mnode:last-child>.hgmm-mrow{border-bottom:0}
.hgmm-mfoot{padding:12px 20px 8px;display:flex;flex-direction:column;gap:12px}
.hgmm-mpromo{position:relative;overflow:hidden;aspect-ratio:5/6;padding:22px;border:var(--hair);border-radius:var(--r-md);background:var(--sunken) var(--hgmm-promo,none) center 70%/cover no-repeat}
.hgmm-mpromo::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.58) 30%,rgba(255,255,255,0) 52%)}
.hgmm-mpromo-tx{position:relative;z-index:1}
.hgmm-mpromo p{margin:0;font-size:22px;font-weight:600;line-height:1.35;text-wrap:balance;color:var(--ink-900);letter-spacing:-.01em}
.hgmm-mpromo small{display:block;font-size:14px;color:var(--ink-500);margin-top:8px;line-height:1.6}
.hgmm-mcta{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:var(--ink-900);color:var(--white);font-size:16px;font-weight:500;line-height:1.5;padding:12px 20px;border-radius:999px}  /* 24+24 = 48px เท่า prototype แผงจะพอดีจอไม่ต้องเลื่อน */
.hgmm-mcta:hover{background:var(--ink-700);color:var(--white)}

@media (max-width:1200px){ .hgmm-panel-in{flex-wrap:wrap} .hgmm-promo{width:100%} }
@media (max-width:1024px){ .hgmm-nav{display:none} .hgmm-burger{display:flex} }
@media (min-width:1025px){ .hgmm-mpanel{display:none !important} .hgmm-burger{display:none !important} }