/* How-to (Design B V2) only */
#howto .howto-wrap{margin-top:8px}
#howto .howto-carousel{position:relative;margin:12px 0 6px}
#howto .howto-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 8px 12px;-webkit-overflow-scrolling:touch}
#howto .howto-card{scroll-snap-align:center;position:relative;border-radius:14px;background:#fff;border:1px solid #e3ecff;box-shadow:0 6px 18px rgba(11,28,106,.08);overflow:hidden}
#howto .howto-card img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#eef2ff}
#howto .howto-cap{padding:10px 12px;font-size:14px;background:#f8faff;border-top:1px solid #e3ecff}
#howto .howto-step-badge{display:inline-block;font-weight:700;font-size:12px;background:var(--accent);color:#fff;padding:4px 8px;border-radius:999px;margin-right:8px}
#howto .howto-controls{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:14px;flex-wrap:wrap}
#howto .howto-btn{min-width:44px;min-height:44px;border:1px solid #dbe6ff;background:#fff;border-radius:12px;cursor:pointer}
#howto .howto-progress{flex:1 1 100%;display:flex;align-items:center;gap:10px;max-width:720px}
#howto .howto-progress .bar{position:relative;flex:1;height:8px;border-radius:999px;background:#e8eeff;overflow:hidden}
#howto .howto-progress .fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--primary);border-radius:999px;transition:width .35s ease}
#howto .howto-progress .count{min-width:88px;text-align:right;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}

/* Modal */
.howto-lightbox[hidden]{display:none}
.howto-lightbox{
  position:fixed; inset:0;
  background:rgba(15,25,60,.72);
  display:grid; place-items:center; z-index:1000;
  padding:24px;                    /* กันชิดขอบ */
}

/* กล่องโมดัล */
.howto-lightbox .sheet{
  width:min(88vw, 520px);
  max-height:92vh;
  display:flex; flex-direction:column;
  background:#fff; border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  overflow:hidden;
}

/* ส่วนหัว */
.howto-lightbox header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:var(--accent); color:#fff;
}

/* พื้นที่ดูรูป — จัดกึ่งกลางทั้งแนวตั้ง/นอน */
.howto-lightbox .viewer{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}

/* รูป/SVG ใน viewer: ให้พอดีกล่อง ไม่บิด ไม่ล้น */
.howto-lightbox .viewer img,
.howto-lightbox .viewer svg{
  display:block;
  max-width:92%;
  max-height:calc(92vh - 160px);   /* เผื่อส่วนหัว+แคปชัน */
  width:auto; height:auto;
  object-fit:contain;
  border-radius:8px;
}

/* แคปชัน (แก้ selector พิมพ์ผิด) */
.howto-lightbox .caption{
  padding:10px 12px;
  border-top:1px solid #e6ecff;
  color:#0B1220; font-weight:600; text-align:center;
}

/* ปุ่มปิด */
.howto-close{
  background:#fff; color:var(--accent);
  border:1px solid #dbe6ff; border-radius:8px;
  padding:6px 10px; font-weight:700; cursor:pointer;
}

/* ล็อกสกอร์เมื่อเปิดโมดัล */
body.noscroll{overflow:hidden}


@media (min-width:760px){
  #howto .howto-track{grid-auto-columns:calc((100% - 32px)/3)}
}
@media (max-width:760px){
  .howto-lightbox .sheet{width:min(96vw,420px)}
}

/* ========== HOWTO (clean, Option A: fill nicely) ========== */

/* ถ้ามี SVG placeholder ติดมา ให้ซ่อนทิ้ง */
.howto-card svg.ph{ display:none !important; }

/* How-to images: fill nicely (ปรับสัดส่วน + ล็อกความสูง) */
.howto-card{ display:flex; flex-direction:column; }
.howto-card figure{
  flex:1;                      /* ให้รูปดันพื้นที่ส่วนบนของการ์ด */
  padding:0 !important;
  border:0;
  border-radius:16px;
  overflow:hidden;
  background:#fff;

  /* ปรับกรอบให้ "สูงขึ้น" เพื่อไม่ให้ดูเกิน/โดนครอปมากไป */
  aspect-ratio: 9 / 20;        /* เดิม 9/19.5  — ลอง 9/20 หรือ 9/20.5 ได้ */

  /* กันการ์ดสูงเกินหน้าจอในเดสก์ท็อป */
  max-height: 560px;
}

.howto-card .ph{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;   /* เติมเต็มกรอบ (ยอมครอปเล็กน้อย) */
  display:block;
  background:#fff;
  border-radius:16px;
}

/* มือถือ: ลดความสูงลงอีกหน่อย */
@media (max-width: 768px){
  .howto-card figure{
    max-height: 480px;
    aspect-ratio: 9 / 20.5;       /* ให้สูงขึ้นอีกเล็กน้อยบนจอแคบ */
  }
}

/* กัน placeholder SVG ถ้ายังมี */
.howto-card svg.ph{ display:none !important; }