/* ═══ หน้าแรก v3 — ทุกอย่างใต้ hero (โหลดเฉพาะหน้าแรกผ่าน HomeController → extraStyles)
   prefix .hm-* · ชุดเดียว responsive ทั้ง desktop/มือถือ · hero/footer ใช้ CSS เดิม ═══ */

.hm{
  --hm-card:#111111; --hm-card-2:#161616; --hm-line:rgba(255,255,255,.07); --hm-line-2:rgba(255,255,255,.12);
  --hm-text:#f3f3f3; --hm-sub:#9a9a9a; --hm-muted:#6e6e6e; --hm-red:#e31837; --hm-red-2:#ff4565;
  max-width:1440px; margin:0 auto; padding:26px clamp(26px,4vw,44px) 56px;
  display:flex; flex-direction:column; gap:44px;
  color:var(--hm-text);
}
.hm *{box-sizing:border-box}
.hm a{color:inherit;text-decoration:none}

/* ── หัวข้อแต่ละส่วน ── */
.hm-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.hm-head__icon{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(227,24,55,.22),rgba(227,24,55,.06));border:1px solid rgba(227,24,55,.28);color:var(--hm-red-2);font-size:1.15rem}
.hm-head__copy{flex:1;min-width:0}
.hm-head__copy h2{margin:0;font-size:1.32rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--hm-text)}
.hm-head__copy p{margin:2px 0 0;font-size:.86rem;color:var(--hm-sub)}
.hm-head__actions{display:flex;align-items:center;gap:8px;flex:none}
.hm-more{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--hm-line-2);font-size:.85rem;font-weight:600;color:#ddd !important;transition:border-color .15s,background .15s,color .15s}
.hm-more:hover{border-color:rgba(227,24,55,.6);background:rgba(227,24,55,.1);color:#fff !important}
.hm-arrow{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--hm-line-2);background:transparent;color:#ddd;cursor:pointer;transition:all .15s}
.hm-arrow:hover:not(:disabled){border-color:rgba(227,24,55,.6);background:rgba(227,24,55,.12);color:#fff}
.hm-arrow:disabled{opacity:.3;cursor:default}
.hm-block.has-overflow .hm-arrow{display:inline-grid;place-items:center}

/* ── ประกาศ: แถบบาง ── */
.hm-notice{display:flex;align-items:center;gap:14px;height:52px;padding:0 6px 0 6px;border-radius:16px;border:1px solid var(--hm-line);background:linear-gradient(90deg,rgba(227,24,55,.14),rgba(255,255,255,.02) 40%);overflow:hidden;margin-bottom:-18px}
.hm-notice__badge{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;background:var(--hm-red);color:#fff;font-size:.86rem;font-weight:700;box-shadow:0 8px 20px rgba(227,24,55,.35)}
.hm-notice__lane{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 95%,transparent)}
.hm-notice__track{display:flex;width:max-content;gap:48px;animation:hm-marquee var(--notice-speed,42s) linear infinite}
.hm-notice:hover .hm-notice__track{animation-play-state:paused}
.hm-notice__item{white-space:nowrap;font-size:.92rem;color:#d4d4d4}
.hm-notice__item::before{content:"";display:inline-block;width:6px;height:6px;margin:0 12px 2px 0;border-radius:50%;background:var(--hm-red-2)}
a.hm-notice__item:hover{color:#fff}
@keyframes hm-marquee{to{transform:translateX(calc(-50% - 24px))}}

/* ── แผงบริการ ── */
.hm-services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hm-service{position:relative;display:flex;align-items:center;gap:14px;min-height:84px;padding:16px 18px;border-radius:18px;border:1px solid var(--hm-line);background:linear-gradient(160deg,var(--hm-card-2),var(--hm-card));overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.hm-service:hover{transform:translateY(-3px);border-color:rgba(227,24,55,.4);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.hm-service__icon{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(227,24,55,.12);border:1px solid rgba(227,24,55,.22);color:var(--hm-red-2);font-size:1.3rem;transition:background .2s,color .2s}
.hm-service:hover .hm-service__icon{background:var(--hm-red);color:#fff}
.hm-service__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-service__copy strong{font-size:1rem;font-weight:700;color:var(--hm-text)}
.hm-service__copy small{font-size:.78rem;color:var(--hm-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-service__go{flex:none;color:var(--hm-muted);font-size:1rem;transition:transform .2s,color .2s}
.hm-service:hover .hm-service__go{transform:translateX(3px);color:#fff}
.hm-service.is-primary{background:linear-gradient(135deg,#e31837 0%,#a50d26 100%);border-color:rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(227,24,55,.28)}
.hm-service.is-primary .hm-service__icon{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2);color:#fff}
.hm-service.is-primary .hm-service__copy small{color:rgba(255,255,255,.78)}
.hm-service.is-primary .hm-service__go{color:#fff}

/* ── Live: ฟีด + สถิติ ── */
.hm-live{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px}
.hm-live.is-single{grid-template-columns:1fr}
/* ฟีด LIVE: หัวมีไอคอนกระจายสัญญาณ · แถว = ไอคอนประเภท + ชื่อสินค้า + ผู้ซื้อ/เวลา + ราคา · แถวบนสุด (ล่าสุด) เด่นสุด แถวล่างจางลง */
.hm-feed{position:relative;display:flex;flex-direction:column;min-width:0;padding:20px 20px 10px;border-radius:22px;border:1px solid var(--hm-line);background:radial-gradient(90% 60% at 0% 0%,rgba(227,24,55,.12),transparent 60%),linear-gradient(180deg,var(--hm-card-2),var(--hm-card));overflow:hidden}
.hm-feed__head{display:flex;align-items:center;gap:14px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--hm-line)}
.hm-feed__pulse{position:relative;flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#e31837,#9e0c24);color:#fff;font-size:1.15rem;box-shadow:0 10px 24px rgba(227,24,55,.35)}
.hm-feed__pulse::after{content:"";position:absolute;inset:-4px;border-radius:17px;border:2px solid rgba(227,24,55,.5);animation:hm-ring 2s ease-out infinite}
@keyframes hm-ring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.25)}}
.hm-feed__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-feed__title strong{font-size:1.1rem;font-weight:800;color:var(--hm-text)}
.hm-feed__title small{font-size:.8rem;color:var(--hm-sub)}
.hm-feed__live{flex:none;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:999px;background:rgba(227,24,55,.14);border:1px solid rgba(227,24,55,.4);color:#ff5c75;font-size:.72rem;font-weight:800;letter-spacing:.1em}
.hm-feed__live span{width:8px;height:8px;border-radius:50%;background:#ff4565;animation:hm-pulse 1.4s infinite}
@keyframes hm-pulse{0%{box-shadow:0 0 0 0 rgba(227,24,55,.7)}70%{box-shadow:0 0 0 8px rgba(227,24,55,0)}100%{box-shadow:0 0 0 0 rgba(227,24,55,0)}}
.hm-feed__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hm-feed__row{position:relative;display:flex;align-items:center;gap:14px;padding:12px 12px;margin:0 -12px;border-radius:14px;transition:background .2s,opacity .3s}
.hm-feed__row+.hm-feed__row{border-top:1px solid rgba(255,255,255,.04)}
.hm-feed__row:hover{background:rgba(255,255,255,.03)}
.hm-feed__row:first-child{background:linear-gradient(90deg,rgba(227,24,55,.14),rgba(227,24,55,.02) 70%)}
.hm-feed__row:first-child::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:#e31837}
.hm-feed__row:first-child::after{content:"ล่าสุด";position:absolute;right:12px;top:8px;padding:1px 8px;border-radius:999px;background:#e31837;color:#fff;font-size:.62rem;font-weight:700}
.hm-feed__row:nth-child(4){opacity:.75}
.hm-feed__row:nth-child(5){opacity:.5}
.hm-feed__row.is-new{animation:hm-in .7s cubic-bezier(.2,.8,.2,1)}
@keyframes hm-in{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
.hm-feed__ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(227,24,55,.12);border:1px solid rgba(227,24,55,.22);color:#ff5c75;font-size:1.1rem}
.hm-feed__row:first-child .hm-feed__ic{background:#e31837;border-color:#e31837;color:#fff}
.hm-feed__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hm-feed__body strong{font-size:.95rem;font-weight:600;color:var(--hm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-feed__body small{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--hm-sub);white-space:nowrap}
.hm-feed__body small i{color:var(--hm-muted);font-size:.8rem}
.hm-feed__dot{width:3px;height:3px;border-radius:50%;background:var(--hm-muted);margin:0 3px}
.hm-feed__body time{color:var(--hm-muted)}
.hm-feed__price{flex:none;min-width:64px;height:30px;padding:0 12px;border-radius:9px;display:grid;place-items:center;background:rgba(227,24,55,.1);color:#ff5c75;font-weight:800;font-size:.92rem;margin-top:14px}
.hm-feed__row:not(:first-child) .hm-feed__price{margin-top:0}


/* ── แบนเนอร์แนะนำ ── */
/* 2 คอลัมน์ × 2 แถวแบบเดิม · มีรูป = แสดงเต็มภาพตามสัดส่วนจริง (ไม่ครอปตัวหนังสือบนแบนเนอร์) */
.hm-banners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hm-banner{position:relative;display:block;border-radius:22px;overflow:hidden;border:1px solid var(--hm-line);background:#0e0e0e;transition:transform .25s,box-shadow .25s,border-color .25s}
.hm-banner:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.4);border-color:rgba(255,255,255,.16)}
.hm-banner__media{display:block}
.hm-banner__media img{display:block;width:100%;height:auto;transition:transform .4s}
.hm-banner.is-art{aspect-ratio:16/6}
.hm-banner.is-art .hm-banner__media{position:absolute;inset:0}
.hm-banner:hover .hm-banner__media img{transform:scale(1.05)}
.hm-banner.is-art .hm-banner__media{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--c) 55%,transparent),transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--c) 30%,#131313),#0e0e0e 75%)}
.hm-banner__mark{position:absolute;right:-6%;bottom:-14%;font-size:7.5rem;color:color-mix(in srgb,var(--c) 70%,#fff);opacity:.22;transform:rotate(-12deg);transition:transform .35s,opacity .35s}
.hm-banner:hover .hm-banner__mark{transform:rotate(-4deg) scale(1.06);opacity:.32}
.hm-banner__copy{position:absolute;left:20px;bottom:18px;right:20px;display:flex;flex-direction:column;gap:4px}
.hm-banner__copy strong{font-size:1.25rem;font-weight:800;color:#fff;line-height:1.2}
.hm-banner__copy small{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:rgba(255,255,255,.75)}

/* ── แถวสินค้า (rail) ── */
.hm-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 14px) / 6);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0;scrollbar-width:none;padding:4px 0 8px;margin:-4px 0 -8px}
.hm-rail::-webkit-scrollbar{display:none}
.hm-rail>*{scroll-snap-align:start}

/* การ์ดเกม: แนวตั้ง ชื่อทับบนภาพ */
.hm-game{position:relative;display:block;aspect-ratio:3/4;border-radius:20px;overflow:hidden;border:1px solid var(--hm-line);background:#0f0f0f;transition:transform .25s,box-shadow .25s,border-color .25s}
.hm-game:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c,#e31837) 60%,transparent);box-shadow:0 20px 40px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--c,#e31837) 30%,transparent)}
.hm-game__media{position:absolute;inset:0;display:grid;place-items:center}
.hm-game__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.hm-game:hover .hm-game__media img{transform:scale(1.07)}
.hm-game.is-art .hm-game__media{background:radial-gradient(90% 70% at 50% 30%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%),linear-gradient(170deg,color-mix(in srgb,var(--c) 22%,#151515),#0b0b0b 80%)}
.hm-game__media i{font-size:3.4rem;color:#fff;opacity:.92;filter:drop-shadow(0 10px 24px color-mix(in srgb,var(--c) 70%,transparent));margin-bottom:28%;transition:transform .3s}
.hm-game:hover .hm-game__media i{transform:scale(1.1) rotate(-6deg)}
.hm-game::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(transparent,rgba(0,0,0,.88));pointer-events:none}
.hm-game__info{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:3px}
.hm-game__info strong{font-size:1rem;font-weight:700;color:#fff;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-game__info small{display:flex;align-items:center;gap:4px;font-size:.74rem;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden}
.hm-game__info small i{color:var(--hm-red-2)}
.hm-rank{position:absolute;top:12px;left:12px;z-index:1;min-width:34px;height:26px;padding:0 9px;border-radius:9px;display:grid;place-items:center;background:var(--hm-red);color:#fff;font-size:.78rem;font-weight:800;box-shadow:0 6px 16px rgba(227,24,55,.45)}

/* การ์ดสินค้า: รูปจัตุรัส + ชื่อ + ราคา */
.hm-prod{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid var(--hm-line);background:linear-gradient(180deg,var(--hm-card-2),var(--hm-card));transition:transform .25s,box-shadow .25s,border-color .25s}
.hm-prod:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c,#e31837) 55%,transparent);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.hm-prod__media{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;background:radial-gradient(80% 70% at 50% 40%,color-mix(in srgb,var(--c) 38%,transparent),transparent 72%),linear-gradient(160deg,color-mix(in srgb,var(--c) 18%,#151515),#0c0c0c 85%)}
.hm-prod__media.has-img{background:#0e0e0e}
.hm-prod__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.hm-prod:hover .hm-prod__media img{transform:scale(1.06)}
.hm-prod__initial{font-size:3.6rem;font-weight:900;line-height:1;color:var(--c);text-shadow:0 10px 40px color-mix(in srgb,var(--c) 60%,transparent);transition:transform .3s}
.hm-prod__media>i{font-size:3rem;color:var(--c);filter:drop-shadow(0 10px 24px color-mix(in srgb,var(--c) 55%,transparent))}
.hm-prod:hover .hm-prod__initial{transform:scale(1.08)}
.hm-prod__body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;min-height:74px}
.hm-prod__body strong{font-size:.92rem;font-weight:600;line-height:1.3;color:var(--hm-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-prod__sub{font-size:.78rem;color:var(--hm-sub);margin-top:auto}
.hm-price{margin-top:auto;font-size:1rem;font-weight:800;color:var(--hm-red-2);letter-spacing:-.01em}
.hm-price small{font-size:.7rem;font-weight:500;color:var(--hm-muted);margin-right:2px}
.hm-tag{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:8px;background:var(--hm-red);color:#fff;font-size:.7rem;font-weight:700;box-shadow:0 6px 14px rgba(227,24,55,.35)}

/* ── ข่าวสาร ── */
.hm-blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hm-post{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid var(--hm-line);background:var(--hm-card);transition:transform .25s,border-color .25s}
.hm-post:hover{transform:translateY(-4px);border-color:rgba(227,24,55,.4)}
.hm-post__cover{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:#0e0e0e}
.hm-post__cover img{width:100%;height:100%;object-fit:cover}
.hm-post__cover.is-art{background:linear-gradient(150deg,rgba(227,24,55,.25),#0e0e0e 70%);font-size:2.4rem;color:rgba(255,255,255,.4)}
.hm-post__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 18px}
.hm-post__body time{font-size:.74rem;color:var(--hm-muted)}
.hm-post__body strong{font-size:1rem;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-post__body small{font-size:.84rem;color:var(--hm-sub);line-height:1.55}

/* ── ทำไมต้องเรา ── */
.hm-why{position:relative;padding:40px clamp(20px,3vw,40px);border-radius:28px;border:1px solid rgba(227,24,55,.18);background:radial-gradient(80% 120% at 0% 0%,rgba(227,24,55,.18),transparent 55%),radial-gradient(60% 100% at 100% 100%,rgba(227,24,55,.10),transparent 60%),#0e0b0c;overflow:hidden}
.hm-why__head{text-align:center;max-width:640px;margin:0 auto 28px}
.hm-why__head h2{margin:0 0 8px;font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.hm-why__head p{margin:0;font-size:.95rem;color:var(--hm-sub);line-height:1.7}
.hm-why__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hm-why__card{display:flex;align-items:flex-start;gap:14px;padding:20px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--hm-line);transition:border-color .2s,background .2s}
.hm-why__card:hover{border-color:rgba(227,24,55,.35);background:rgba(227,24,55,.05)}
.hm-why__icon{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#e31837,#9e0c24);color:#fff;font-size:1.2rem;box-shadow:0 10px 24px rgba(227,24,55,.3)}
.hm-why__card h3{margin:0 0 4px;font-size:1.02rem;font-weight:700;color:#fff}
.hm-why__card p{margin:0;font-size:.84rem;color:var(--hm-sub);line-height:1.55}


/* ── Responsive ── */
@media (max-width:1200px){
  .hm-rail{grid-auto-columns:calc((100% - 4 * 14px) / 5)}
  .hm-why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .hm-services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-live{grid-template-columns:1fr}
  .hm-banners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-rail{grid-auto-columns:calc((100% - 3 * 14px) / 4)}
}
@media (max-width:768px){
  .hm{padding:16px 14px 32px;gap:32px}
  .hm-head{gap:12px;margin-bottom:14px}
  .hm-head__icon{width:38px;height:38px;border-radius:12px;font-size:1rem}
  .hm-head__copy h2{font-size:1.12rem}
  .hm-head__copy p{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hm-more{height:36px;padding:0 12px;font-size:.8rem}
  .hm-block.has-overflow .hm-arrow{display:none}

  .hm-notice{height:46px;margin-bottom:-12px;gap:10px}
  .hm-notice__badge{height:34px;width:34px;padding:0;justify-content:center}
  .hm-notice__badge span{display:none}
  .hm-notice__item{font-size:.85rem}

  /* บริการ: ไอคอน 4 คอลัมน์ */
  .hm-services{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .hm-service{flex-direction:column;justify-content:center;gap:8px;min-height:92px;padding:12px 4px;border-radius:16px;text-align:center}
  .hm-service__icon{width:44px;height:44px;border-radius:13px;font-size:1.2rem}
  .hm-service__copy strong{font-size:.8rem;font-weight:600}
  .hm-service__copy small,.hm-service__go{display:none}
  .hm-service:hover{transform:none}

  .hm-feed{padding:16px 16px 8px;border-radius:18px}
  .hm-feed__title small{font-size:.74rem}
  .hm-feed__pulse{width:38px;height:38px;border-radius:12px;font-size:1rem}
  .hm-feed__row{gap:10px;padding:10px;margin:0 -10px}
  .hm-feed__row:first-child::after{display:none}
  .hm-feed__price{margin-top:0;min-width:0;height:28px;padding:0 9px;font-size:.84rem}
  .hm-feed__ic{width:36px;height:36px;border-radius:10px;font-size:.95rem}
  .hm-feed__body strong{font-size:.86rem}

  .hm-banners{grid-template-columns:1fr;gap:12px}
  .hm-banner{border-radius:16px}
  .hm-banner__copy{left:14px;bottom:12px}
  .hm-banner__copy strong{font-size:1rem}
  .hm-banner__mark{font-size:5rem}

  .hm-rail{grid-auto-columns:40%;gap:10px;margin-right:-14px;padding-right:14px}
  .hm-rail--games{grid-auto-columns:36%}
  .hm-game,.hm-prod{border-radius:16px}
  .hm-game:hover,.hm-prod:hover{transform:none}
  .hm-game__media i{font-size:2.6rem}
  .hm-game__info{left:10px;right:10px;bottom:10px}
  .hm-game__info strong{font-size:.88rem}
  .hm-prod__body{padding:10px 12px 12px;min-height:66px}
  .hm-prod__body strong{font-size:.84rem}
  .hm-prod__initial{font-size:2.8rem}

  .hm-blog{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-14px;padding-right:14px}
  .hm-blog::-webkit-scrollbar{display:none}
  .hm-post{scroll-snap-align:start}

  .hm-why{padding:28px 16px;border-radius:22px}
  .hm-why__head h2{font-size:1.4rem}
  .hm-why__head p{font-size:.86rem}
  .hm-why__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hm-why__card{flex-direction:column;gap:10px;padding:16px 14px}
  .hm-why__icon{width:40px;height:40px;font-size:1.05rem}
  .hm-why__card h3{font-size:.95rem}
  .hm-why__card p{font-size:.78rem}

}
@media (max-width:380px){
  .hm-service__copy strong{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  .hm-notice__track{animation:none}
  .hm-notice__lane{overflow-x:auto;scrollbar-width:none}
  .hm-feed__live span,.hm-feed__pulse::after{animation:none}
  .hm *{transition:none !important}
}

/* ── ธีมสว่าง ── */
body.light .hm{--hm-card:#fff;--hm-card-2:#fff;--hm-line:rgba(0,0,0,.07);--hm-line-2:rgba(0,0,0,.12);--hm-text:#111;--hm-sub:#666;--hm-muted:#999}
body.light .hm-more,body.light .hm-arrow{color:#333 !important}
body.light .hm-notice__item{color:#333}
body.light .hm-feed__row:first-child{background:linear-gradient(90deg,rgba(227,24,55,.08),transparent 70%)}
body.light .hm-why{background:linear-gradient(160deg,#fff5f6,#fff);border-color:rgba(227,24,55,.12)}
body.light .hm-why__head h2,body.light .hm-why__card h3{color:#111}
body.light .hm-why__card{background:#fff}

/* สถิติดีไซน์เดิม (home-kpi-grid จาก app.css) อยู่ใน .hm — ใช้ระยะของ .hm แทน padding เดิม */
.hm .home-showcase-block--metrics{padding:0}
.hm .home-kpi-grid{margin:0}