/*! Hybe Stories Slider v1.0 */
.hg-stories{
  --hg-ratio: 2.09 / 1;      /* สัดส่วนตามภาพตัวอย่าง */
  --hg-ratio-m: 4 / 3;       /* สัดส่วนบนมือถือ */
  --hg-radius: 16px;
  --hg-bg: #0f1519;
  --hg-gap: 6px;             /* ช่องไฟระหว่างภาพแนวตั้ง */
  width: 100%;
}
.hg-stories .hg-frame{
  position: relative;
  aspect-ratio: var(--hg-ratio);
  border-radius: var(--hg-radius);
  overflow: hidden;
  background: var(--hg-bg);
  isolation: isolate;
}
.hg-stories .swiper,
.hg-stories .swiper-wrapper,
.hg-stories .swiper-slide{ height: 100%; }
.hg-stories .swiper{ overflow: hidden; }
.hg-stories .swiper-wrapper{ display: flex; }
.hg-stories .swiper-slide{ flex-shrink: 0; width: 100%; position: relative; overflow: hidden; }

.hg-stories .hg-slide img{
  display: block; width: 100%; height: 100%;
  max-width: none; object-fit: cover; object-position: center;
  border-radius: 0; box-shadow: none;
}

/* กลุ่มภาพแนวตั้ง */
.hg-stories .hg-group{ position: relative; z-index: 1; display: flex; justify-content: center; gap: var(--hg-gap); height: 100%; }
.hg-stories .hg-group figure{ margin: 0; flex: 1 1 0; min-width: 0; height: 100%; }
.hg-stories .hg-group.is-partial figure{ flex: 0 0 auto; aspect-ratio: 3 / 4; }
.hg-stories .hg-backdrop{
  position: absolute; inset: -60px;
  background: center / cover no-repeat;
  filter: blur(32px) brightness(.5);
  transform: scale(1.1);
}

/* เงาไล่ด้านล่างให้แถบ progress อ่านง่ายบนภาพสว่าง */
.hg-stories .hg-frame::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(transparent, rgba(0,0,0,.35));
  pointer-events: none; z-index: 2;
}

/* แถบ progress แบบ stories */
.hg-stories .hg-progress{
  position: absolute; left: 28px; right: 28px; bottom: 10px;
  display: flex; gap: 14px; z-index: 3;
}
.hg-stories .hg-progress.is-dense{ gap: 5px; }
.hg-stories .hg-seg,
.hg-stories .hg-seg:hover,
.hg-stories .hg-seg:focus{
  all: unset; box-sizing: border-box;
  flex: 1 1 0; min-width: 0; padding: 8px 0; cursor: pointer; background: transparent;
}
.hg-stories .hg-seg i{
  position: relative; display: block; height: 3px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.4);
}
.hg-stories .hg-seg i::after{
  content: ""; position: absolute; inset: 0; background: #fff;
  transform-origin: left center; transform: scaleX(var(--p, 0));
}
.hg-stories .hg-seg:focus-visible i{ outline: 2px solid #fff; outline-offset: 3px; }

/* ลูกศร: โผล่ตอน hover บนจอที่มีเมาส์ */
.hg-stories .hg-frame .hg-arrow{
  box-sizing: border-box; appearance: none; -webkit-appearance: none;
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 50%; box-shadow: none; outline: none;
  display: grid; place-items: center; cursor: pointer;
  font: inherit; line-height: 1; text-decoration: none;
  color: #fff; background: rgba(10,15,18,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s, background-color .2s;
}
.hg-stories .hg-frame .hg-prev{ left: 16px; right: auto; }
.hg-stories .hg-frame .hg-next{ right: 16px; left: auto; }
/* กันสไตล์ปุ่มของธีม/Elementor ตอน hover, focus, active */
.hg-stories .hg-frame .hg-arrow:hover,
.hg-stories .hg-frame .hg-arrow:focus,
.hg-stories .hg-frame .hg-arrow:active{
  color: #fff; background: rgba(10,15,18,.7); border: 0; box-shadow: none;
  transform: translateY(-50%);
}
.hg-stories .hg-frame:hover .hg-arrow,
.hg-stories .hg-frame .hg-arrow:focus-visible{ opacity: 1; }
.hg-stories .hg-frame .hg-arrow:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.hg-stories .hg-frame .hg-arrow svg{ pointer-events: none; }
@media (hover: none){ .hg-stories .hg-arrow{ display: none; } }

.hg-stories .hg-status{
  position: absolute; inset: 0; margin: 0; z-index: 4;
  display: grid; place-items: center; padding: 24px; text-align: center;
  color: rgba(255,255,255,.8); font-size: 15px;
}
.hg-stories .hg-status[hidden]{ display: none; }

@media (max-width: 767px){
  .hg-stories{ --hg-radius: 12px; --hg-gap: 4px; }
  .hg-stories .hg-frame{ aspect-ratio: var(--hg-ratio-m); }
  .hg-stories .hg-progress{ left: 14px; right: 14px; bottom: 4px; }
  .hg-stories .hg-progress.is-dense{ gap: 3px; }
}