/* Boxbillion Hero Banner */

.bb-hero {
    --bb-hero-height: 60vh;
    --bb-hero-card-w: 160px;
    --bb-hero-card-gap: 10px;
    --bb-hero-active-scale: 1.2;
    --bb-hero-progress: #F88209;
    --bb-hero-scrim: 0.55;
    --bb-hero-fallback: #1C5D83;
    --bb-hero-anim: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* ความยาวอนิเมชันขาเข้า (control entrance_duration เขียนทับค่านี้)
       และเวลาที่การ์ดใบสุดท้ายเริ่มเล่น ต้องตรงกับ animation-delay ของ nth-child ใบท้ายสุด
       JavaScript อ่านสองค่านี้เพื่อคำนวณว่าจะใส่คลาส entrance-complete เมื่อไหร่
       ถ้าไม่ตรงกัน อนิเมชันจะถูกตัดกลางคันหรือค้างเล่นซ้ำ */
    --bb-hero-entrance-duration: 0.6s;
    --bb-hero-entrance-stagger-end: 0.35s;

    position: relative;
    width: 100%;
    height: var(--bb-hero-height);
    overflow-x: clip;
    background: var(--bb-hero-fallback);
    isolation: isolate;
}

/* ชั้นภาพพื้นหลัง */

.bb-hero__bgs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.bb-hero__bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
    transform: translateZ(0);
    transition: opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.55s step-end;
}

.bb-hero__bg.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.55s step-start;
}

.bb-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1);
    transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.bb-hero__bg.is-active img {
    transform: translateZ(0) scale(1.035);
}

/* ชั้นบังภาพให้อ่านตัวหนังสือออก */

/* ชั้นบังภาพ (Hero Banner Overlay / Scrim) */

.bb-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--bb-hero-scrim-opacity, var(--bb-hero-scrim, 0.55));
    backdrop-filter: blur(var(--bb-hero-scrim-blur, 0px));
    -webkit-backdrop-filter: blur(var(--bb-hero-scrim-blur, 0px));
    transition: opacity 0.35s ease, background 0.35s ease, backdrop-filter 0.35s ease;
}

/* Default & Bottom-to-Top Gradient */
.bb-hero__scrim,
.bb-hero.bb-hero--scrim-gradient_bottom .bb-hero__scrim,
[class*="bb-hero--scrim-gradient_bottom"] .bb-hero__scrim {
    background: linear-gradient(
        to top,
        var(--bb-hero-scrim-color, #000000) 0%,
        var(--bb-hero-scrim-color, #000000) var(--bb-hero-scrim-pos, 50%),
        transparent 100%
    );
}

/* Top-to-Bottom Gradient */
.bb-hero.bb-hero--scrim-gradient_top .bb-hero__scrim,
[class*="bb-hero--scrim-gradient_top"] .bb-hero__scrim {
    background: linear-gradient(
        to bottom,
        var(--bb-hero-scrim-color, #000000) 0%,
        var(--bb-hero-scrim-color, #000000) var(--bb-hero-scrim-pos, 50%),
        transparent 100%
    );
}

/* Radial Vignette */
.bb-hero.bb-hero--scrim-radial .bb-hero__scrim,
[class*="bb-hero--scrim-radial"] .bb-hero__scrim {
    background: radial-gradient(
        circle at 50% 50%,
        transparent var(--bb-hero-scrim-pos, 30%),
        var(--bb-hero-scrim-color, #000000) 100%
    );
}

/* Solid Color Overlay */
.bb-hero.bb-hero--scrim-solid .bb-hero__scrim,
[class*="bb-hero--scrim-solid"] .bb-hero__scrim {
    background: var(--bb-hero-scrim-color, #000000);
}

/* ไม่มี preloader โดยเจตนา
   HTML ถูก render มาจากเซิร์ฟเวอร์ครบตั้งแต่แรก ไม่มีอะไรต้องรอโหลดจริง ๆ
   preloader ตัวเดิมทำหน้าที่แค่บังอนิเมชันขาเข้าไว้ ซึ่งกลับทำให้จังหวะที่สวยที่สุด
   ของการเลื่อนเข้ามาถูกแผ่นเบลอบังไปเสียเอง จึงถอดออกทั้งชุด
   ถ้าจะเอากลับ ต้องใส่ทั้ง markup ใน widget และกฎ CSS ชุดนี้พร้อมกัน */

/* Zero-Flicker Unloaded Visibility Rule */

/* ซ่อนเนื้อหาไว้จนกว่า JavaScript จะใส่คลาส is-loaded
   ถ้าไม่ซ่อน เนื้อหาจะโผล่ในตำแหน่งสุดท้ายก่อน แล้วค่อยกระโดดกลับไปเริ่มอนิเมชัน
   ในกรณีปกติหน้าต่างนี้กว้างแค่เฟรมเดียว (~16ms) ตามองไม่ทัน

   ไม่ใส่ !important โดยเจตนา เพราะ bbHeroRevealFailsafe ต้องเขียนทับได้
   ถ้าใส่ !important อนิเมชันจะชนะไม่ได้ แล้วเนื้อหาจะถูกซ่อนตลอดไปเมื่อ JS ไม่ทำงาน
   ซึ่งอันตรายกว่าเดิมมากตั้งแต่ถอด preloader ออก เพราะผู้ใช้จะเห็นแค่ภาพพื้นหลังเปล่า
   โดยไม่มีอะไรบอกว่ากำลังรออยู่ ตาข่ายนี้จึงตั้งไว้ที่ 1.5 วินาที
   สั้นพอที่จะกู้หน้าได้ทัน และยาวพอที่ JS ปกติ (ทำงานภายใน ~100ms) จะชนะเสมอ */
.bb-hero:not(.is-loaded) .bb-hero__strip,
.bb-hero:not(.is-loaded) .bb-hero__content,
.bb-hero:not(.is-loaded) .bb-hero__card {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: bbHeroRevealFailsafe 0.3s ease 1.5s forwards;
}

@keyframes bbHeroRevealFailsafe {
    to { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* ชั้นเนื้อหา */

.bb-hero__content {
    position: absolute;
    z-index: 2;
    left: var(--bb-hero-pos-x, 6vw);
    right: var(--bb-hero-pos-right, auto);
    top: var(--bb-hero-pos-y, 50%);
    bottom: var(--bb-hero-pos-bottom, auto);
    transform: translate(var(--bb-hero-tx, 0%), var(--bb-hero-ty, -60%));
    text-align: var(--bb-hero-text-align, left);
    align-items: var(--bb-hero-align-items, flex-start);
    max-width: min(620px, 55%);
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Fallback class selectors for standalone usage */
.bb-hero.bb-hero--h-left .bb-hero__content,
[class*="bb-hero--h-left"] .bb-hero__content {
    left: 6vw; right: auto; text-align: left; align-items: flex-start;
}
.bb-hero.bb-hero--h-center .bb-hero__content,
[class*="bb-hero--h-center"] .bb-hero__content {
    left: 50%; right: auto; text-align: center; align-items: center;
}
.bb-hero.bb-hero--h-right .bb-hero__content,
[class*="bb-hero--h-right"] .bb-hero__content {
    left: auto; right: 6vw; text-align: right; align-items: flex-end;
}

.bb-hero.bb-hero--v-top .bb-hero__content,
[class*="bb-hero--v-top"] .bb-hero__content {
    top: 8%; bottom: auto;
}
.bb-hero.bb-hero--v-middle .bb-hero__content,
[class*="bb-hero--v-middle"] .bb-hero__content {
    top: 50%; bottom: auto;
}
.bb-hero.bb-hero--v-bottom .bb-hero__content,
[class*="bb-hero--v-bottom"] .bb-hero__content {
    top: auto; bottom: calc(var(--bb-hero-card-w) * var(--bb-hero-card-ratio, 0.625) * var(--bb-hero-active-scale, 1.2) + var(--bb-hero-card-bottom, 12px) + 24px);
}
.bb-hero.bb-hero--h-center.bb-hero--v-bottom .bb-hero__content {
    transform: translateX(-50%);
}

.bb-hero__title {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(24px, 3.4vw, 46px);
    line-height: 1.2;
}

.bb-hero__desc {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bb-hero__desc p:last-child {
    margin-bottom: 0;
}

.bb-hero__cta {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 999px;
    background-color: #fff;
    color: #1C5D83;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bb-hero__cta:hover,
.bb-hero__cta:focus {
    background-color: #F88209;
    color: #fff;
}

/* ลูกศร */

.bb-hero__arrow {
    position: absolute !important;
    z-index: 10 !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    box-shadow: none;
    transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.bb-hero__arrow:hover,
.bb-hero__arrow:focus-visible {
    background-color: rgba(255, 255, 255, 0.38);
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
}

.bb-hero__arrow svg {
    width: 20px;
    height: 20px;
    min-width: 10px;
    min-height: 10px;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.5px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    margin: 0 auto !important;
}

.bb-hero__arrow--prev { left: 24px !important; }
.bb-hero__arrow--next { right: 24px !important; }

/* Keyframe Animations */

@keyframes bbHeroFadeUp {
    0% { opacity: 0; transform: translateY(32px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes bbHeroFadeDown {
    0% { opacity: 0; transform: translateY(-32px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes bbHeroFadeLeft {
    0% { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes bbHeroFadeRight {
    0% { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes bbHeroZoomIn {
    0% { opacity: 0; transform: scale(0.72); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes bbHeroBounce {
    0% { opacity: 0; transform: scale(0.6) translateY(24px); }
    60% { opacity: 1; transform: scale(1.06) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes bbHeroCardPop {
    0% { opacity: 0; transform: scale(0.82) translateY(24px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes bbHeroKenBurns {
    0% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Entrance — ภาพพื้นหลัง Zoom Smooth */
.bb-hero.is-loaded .bb-hero__bg.is-active img {
    animation: bbHeroKenBurns 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Text Entrance Mapping */
.bb-hero.is-loaded .bb-hero__title,
.bb-hero.is-loaded .bb-hero__desc,
.bb-hero.is-loaded .bb-hero__cta,
.bb-hero__content.is-animating .bb-hero__title,
.bb-hero__content.is-animating .bb-hero__desc,
.bb-hero__content.is-animating .bb-hero__cta {
    animation-duration: var(--bb-hero-entrance-duration, 0.8s);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
}

.bb-hero:not([data-text-anim="none"]).is-loaded .bb-hero__title,
.bb-hero:not([data-text-anim="none"]) .bb-hero__content.is-animating .bb-hero__title {
    animation-name: bbHeroFadeUp;
    animation-delay: 0.06s;
}

.bb-hero:not([data-text-anim="none"]).is-loaded .bb-hero__desc,
.bb-hero:not([data-text-anim="none"]) .bb-hero__content.is-animating .bb-hero__desc {
    animation-name: bbHeroFadeUp;
    animation-delay: 0.14s;
}

.bb-hero:not([data-text-anim="none"]).is-loaded .bb-hero__cta,
.bb-hero:not([data-text-anim="none"]) .bb-hero__content.is-animating .bb-hero__cta {
    animation-name: bbHeroFadeUp;
    animation-delay: 0.22s;
}

.bb-hero[data-text-anim="fade_down"].is-loaded .bb-hero__title,
.bb-hero[data-text-anim="fade_down"].is-loaded .bb-hero__desc,
.bb-hero[data-text-anim="fade_down"].is-loaded .bb-hero__cta,
.bb-hero[data-text-anim="fade_down"] .bb-hero__content.is-animating .bb-hero__title,
.bb-hero[data-text-anim="fade_down"] .bb-hero__content.is-animating .bb-hero__desc,
.bb-hero[data-text-anim="fade_down"] .bb-hero__content.is-animating .bb-hero__cta {
    animation-name: bbHeroFadeDown;
}

.bb-hero[data-text-anim="fade_left"].is-loaded .bb-hero__title,
.bb-hero[data-text-anim="fade_left"].is-loaded .bb-hero__desc,
.bb-hero[data-text-anim="fade_left"].is-loaded .bb-hero__cta,
.bb-hero[data-text-anim="fade_left"] .bb-hero__content.is-animating .bb-hero__title,
.bb-hero[data-text-anim="fade_left"] .bb-hero__content.is-animating .bb-hero__desc,
.bb-hero[data-text-anim="fade_left"] .bb-hero__content.is-animating .bb-hero__cta {
    animation-name: bbHeroFadeLeft;
}

.bb-hero[data-text-anim="fade_right"].is-loaded .bb-hero__title,
.bb-hero[data-text-anim="fade_right"].is-loaded .bb-hero__desc,
.bb-hero[data-text-anim="fade_right"].is-loaded .bb-hero__cta,
.bb-hero[data-text-anim="fade_right"] .bb-hero__content.is-animating .bb-hero__title,
.bb-hero[data-text-anim="fade_right"] .bb-hero__content.is-animating .bb-hero__desc,
.bb-hero[data-text-anim="fade_right"] .bb-hero__content.is-animating .bb-hero__cta {
    animation-name: bbHeroFadeRight;
}

.bb-hero[data-text-anim="zoom_in"].is-loaded .bb-hero__title,
.bb-hero[data-text-anim="zoom_in"].is-loaded .bb-hero__desc,
.bb-hero[data-text-anim="zoom_in"].is-loaded .bb-hero__cta,
.bb-hero[data-text-anim="zoom_in"] .bb-hero__content.is-animating .bb-hero__title,
.bb-hero[data-text-anim="zoom_in"] .bb-hero__content.is-animating .bb-hero__desc,
.bb-hero[data-text-anim="zoom_in"] .bb-hero__content.is-animating .bb-hero__cta {
    animation-name: bbHeroZoomIn;
}

.bb-hero[data-text-anim="bounce"].is-loaded .bb-hero__title,
.bb-hero[data-text-anim="bounce"].is-loaded .bb-hero__desc,
.bb-hero[data-text-anim="bounce"].is-loaded .bb-hero__cta,
.bb-hero[data-text-anim="bounce"] .bb-hero__content.is-animating .bb-hero__title,
.bb-hero[data-text-anim="bounce"] .bb-hero__content.is-animating .bb-hero__desc,
.bb-hero[data-text-anim="bounce"] .bb-hero__content.is-animating .bb-hero__cta {
    animation-name: bbHeroBounce;
}

.bb-hero[data-text-anim="none"].is-loaded .bb-hero__title,
.bb-hero[data-text-anim="none"].is-loaded .bb-hero__desc,
.bb-hero[data-text-anim="none"].is-loaded .bb-hero__cta,
.bb-hero[data-text-anim="none"] .bb-hero__content.is-animating .bb-hero__title,
.bb-hero[data-text-anim="none"] .bb-hero__content.is-animating .bb-hero__desc,
.bb-hero[data-text-anim="none"] .bb-hero__content.is-animating .bb-hero__cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* แถบการ์ด */

.bb-hero__strip {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: var(--bb-hero-card-pos-top, auto);
    bottom: var(--bb-hero-card-pos-bottom, var(--bb-hero-card-bottom, 12px));
    height: calc(var(--bb-hero-card-w) * var(--bb-hero-card-ratio, 0.625) * var(--bb-hero-active-scale, 1.2) + 36px);
    overflow: visible;
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

/* Fallback class selectors for Cards Above mode */
.bb-hero.bb-hero--cards-above .bb-hero__strip,
[class*="bb-hero--cards-above"] .bb-hero__strip {
    top: auto;
    bottom: var(--bb-hero-card-above-bottom, 200px);
}

.bb-hero.bb-hero--cards-above .bb-hero__content,
[class*="bb-hero--cards-above"] .bb-hero__content {
    top: auto;
    bottom: 24px;
    transform: translate(var(--bb-hero-tx, 0%), 0%);
}

/* Fallback class selectors for Cards Top mode */
.bb-hero.bb-hero--cards-top .bb-hero__strip,
[class*="bb-hero--cards-top"] .bb-hero__strip {
    top: var(--bb-hero-card-top, 24px);
    bottom: auto;
}

.bb-hero.bb-hero--cards-top .bb-hero__content,
[class*="bb-hero--cards-top"] .bb-hero__content {
    top: auto;
    bottom: 30px;
    transform: translate(var(--bb-hero-tx, 0%), 0%);
}

/* Card Entrance Mapping */

.bb-hero.is-loaded:not(.entrance-complete) .bb-hero__card {
    animation-duration: var(--bb-hero-entrance-duration, 0.7s);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
}

/* ระยะเหลื่อมของการ์ด ตัวสุดท้ายต้องตรงกับ --bb-hero-entrance-stagger-end
   ที่ประกาศบน .bb-hero เพราะ JavaScript อ่านค่านั้นไปคำนวณว่าจะใส่ entrance-complete เมื่อไหร่
   ถ้าแก้ตัวเลขตรงนี้ต้องแก้ตัวแปรนั้นด้วย ไม่งั้นอนิเมชันจะถูกตัดกลางคัน */
.bb-hero.is-loaded:not(.entrance-complete) .bb-hero__card:nth-child(1) { animation-delay: 0.10s; }
.bb-hero.is-loaded:not(.entrance-complete) .bb-hero__card:nth-child(2) { animation-delay: 0.15s; }
.bb-hero.is-loaded:not(.entrance-complete) .bb-hero__card:nth-child(3) { animation-delay: 0.20s; }
.bb-hero.is-loaded:not(.entrance-complete) .bb-hero__card:nth-child(4) { animation-delay: 0.25s; }
.bb-hero.is-loaded:not(.entrance-complete) .bb-hero__card:nth-child(5) { animation-delay: 0.30s; }
.bb-hero.is-loaded:not(.entrance-complete) .bb-hero__card:nth-child(6) { animation-delay: 0.35s; }

.bb-hero:not([data-card-anim]).is-loaded:not(.entrance-complete) .bb-hero__card,
.bb-hero[data-card-anim="card_pop"].is-loaded:not(.entrance-complete) .bb-hero__card {
    animation-name: bbHeroCardPop;
}

.bb-hero[data-card-anim="fade_up"].is-loaded:not(.entrance-complete) .bb-hero__card {
    animation-name: bbHeroFadeUp;
}

.bb-hero[data-card-anim="fade_left"].is-loaded:not(.entrance-complete) .bb-hero__card {
    animation-name: bbHeroFadeLeft;
}

.bb-hero[data-card-anim="fade_right"].is-loaded:not(.entrance-complete) .bb-hero__card {
    animation-name: bbHeroFadeRight;
}

.bb-hero[data-card-anim="zoom_in"].is-loaded:not(.entrance-complete) .bb-hero__card {
    animation-name: bbHeroZoomIn;
}

.bb-hero[data-card-anim="bounce"].is-loaded:not(.entrance-complete) .bb-hero__card {
    animation-name: bbHeroBounce;
}

.bb-hero[data-card-anim="none"].is-loaded:not(.entrance-complete) .bb-hero__card {
    animation: none !important;
}

.bb-hero.entrance-complete .bb-hero__card {
    animation: none !important;
}

.bb-hero__track {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    gap: var(--bb-hero-card-gap);
    transform: translateY(-50%);
    will-change: transform;
    transition: transform var(--bb-hero-anim);
}

.bb-hero__track.is-no-anim,
.bb-hero__track.is-no-anim .bb-hero__card,
.bb-hero__track.is-no-anim .bb-hero__card img {
    transition: none !important;
}

@keyframes bbHeroActiveCardPop {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(24px);
    }
    70% {
        opacity: 1;
        transform: scale(1.26) translateY(-4px);
    }
    100% {
        opacity: 1;
        transform: scale(var(--bb-hero-active-scale)) translateY(0);
    }
}

.bb-hero:not([data-card-anim]).is-loaded:not(.entrance-complete) .bb-hero__card.is-active,
.bb-hero[data-card-anim="card_pop"].is-loaded:not(.entrance-complete) .bb-hero__card.is-active {
    animation-name: bbHeroActiveCardPop;
}

.bb-hero__card {
    flex: 0 0 auto;
    width: var(--bb-hero-card-w);
    height: calc(var(--bb-hero-card-w) * var(--bb-hero-card-ratio, 0.625));
    padding: 0 !important;
    margin: 0 !important;
    border-style: none;
    border-width: 0px;
    border-color: transparent;
    border-radius: 8px;
    background-color: var(--bb-hero-fallback, #111827);
    overflow: hidden !important;
    cursor: pointer;
    opacity: 1;
    transform: scale(1);
    transform-origin: center;
    box-sizing: border-box !important;
    position: relative;
    z-index: 1;
    outline: none !important;
    /* transform กับ opacity ต้องใช้เวลาและเส้นโค้งชุดเดียวกับ .bb-hero__track
       ไม่งั้นการ์ดจะขยายเต็มขนาดก่อนที่มันจะเลื่อนถึงกลางจอ อ่านแล้วรู้สึกไม่สมดุล

       margin ถูกถอดออกจากรายการนี้โดยเจตนา ห้ามใส่กลับ
       margin มีผลต่อ layout จริง การให้มัน animate แปลว่าตำแหน่งการ์ดขยับอยู่ตลอด
       ขณะที่ track ตั้ง transform ค่าเดียวจบไปแล้ว การ์ดจึงไหลออกจากกลางจอ
       แล้วดีดกลับตอน layout() ถูกเรียกรอบถัดไป
       อีกอย่างคือ layout() วัด offsetLeft ทันทีหลังสลับคลาส
       ถ้า margin ยัง animate อยู่ ค่าที่วัดได้จะเป็นค่าตั้งต้น ไม่ใช่ค่าปลายทาง */
    transition: transform var(--bb-hero-anim),
                opacity var(--bb-hero-anim),
                border-color 0.38s ease,
                box-shadow 0.38s ease,
                visibility var(--bb-hero-anim) step-end !important;
}

.bb-hero__card:hover,
.bb-hero__card:focus,
.bb-hero__card:focus-visible {
    outline: none !important;
}

.bb-hero__card:not(.is-active) {
    opacity: var(--bb-hero-card-inactive-opacity, 1);
}

.bb-hero__card:hover:not(.is-active) {
    opacity: var(--bb-hero-card-hover-opacity, var(--bb-hero-card-inactive-opacity, 1));
    z-index: 5;
    transform: scale(var(--bb-hero-card-hover-scale, 1.04)) translateY(calc(-1 * var(--bb-hero-card-hover-lift, 4px)));
}

.bb-hero__card img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
    will-change: transform, filter;
}

.bb-hero__card:hover:not(.is-active) img {
    transform: scale(1.05);
    filter: brightness(1.08);
}

.bb-hero__card.is-active {
    opacity: 1;
    z-index: 5 !important;
    margin: 0 !important;
    transform: scale(var(--bb-hero-active-scale));
}

.bb-hero__card.is-hidden {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

.bb-hero__card.is-hidden-right {
    opacity: 0 !important;
    transform: scale(0.6) translateX(220px) !important;
    visibility: hidden;
    pointer-events: none;
}

.bb-hero__card.is-hidden-left {
    opacity: 0 !important;
    transform: scale(0.6) translateX(-220px) !important;
    visibility: hidden;
    pointer-events: none;
}

.bb-hero__card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.55);
}

/* Progress Bar Base & Styles */

.bb-hero__progress {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: var(--bb-hero-progress-bottom, 0px);
    height: var(--bb-hero-progress-h, 3px);
    background: var(--bb-hero-progress-bg, rgba(255, 255, 255, 0.2));
    overflow: hidden;
    transition: all 0.35s ease;
}

/* Full Width Bottom Style */
.bb-hero.bb-hero--progress-full_bottom .bb-hero__progress,
[class*="bb-hero--progress-full_bottom"] .bb-hero__progress {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    bottom: 0 !important;
    border-radius: var(--bb-hero-progress-radius, 0px);
}

/* Floating Centered Pill Style */
.bb-hero.bb-hero--progress-floating .bb-hero__progress,
[class*="bb-hero--progress-floating"] .bb-hero__progress {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: var(--bb-hero-progress-w, 240px) !important;
    max-width: calc(100% - 32px) !important;
    bottom: var(--bb-hero-progress-bottom, 12px) !important;
    border-radius: var(--bb-hero-progress-radius, 999px) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.bb-hero__progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bb-hero-progress, #F88209);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
}

/* Card Inner Layout */

.bb-hero__card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.bb-hero__card-thumb {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}

/* Card Inner Layout Base */
.bb-hero__card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.bb-hero__card-thumb {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}

.bb-hero__card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.bb-hero__card-subtitle {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    transition: color 0.3s ease;
}

/* Template: Static Opacity Mode (Fixed Cards, No Sliding Track, Strict Uniform Size) */

.bb-hero.bb-hero--template-static_opacity .bb-hero__strip,
.bb-hero[data-template="static_opacity"] .bb-hero__strip,
[class*="bb-hero--template-static_opacity"] .bb-hero__strip {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

.bb-hero.bb-hero--template-static_opacity .bb-hero__track,
.bb-hero[data-template="static_opacity"] .bb-hero__track,
[class*="bb-hero--template-static_opacity"] .bb-hero__track {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--bb-hero-card-gap, 10px) !important;
    transition: none !important;
}

.bb-hero.bb-hero--template-static_opacity .bb-hero__card,
.bb-hero[data-template="static_opacity"] .bb-hero__card,
[class*="bb-hero--template-static_opacity"] .bb-hero__card {
    display: flex !important;
    visibility: visible !important;
    position: relative !important;
    width: var(--bb-hero-card-w, 160px) !important;
    height: calc(var(--bb-hero-card-w, 160px) * var(--bb-hero-card-ratio, 0.625)) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    animation: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.bb-hero.bb-hero--template-static_opacity .bb-hero__card:not(.is-active),
.bb-hero[data-template="static_opacity"] .bb-hero__card:not(.is-active),
[class*="bb-hero--template-static_opacity"] .bb-hero__card:not(.is-active) {
    opacity: var(--bb-hero-card-inactive-opacity, 0.7);
    transform: scale(1);
}

.bb-hero.bb-hero--template-static_opacity .bb-hero__card.is-active,
.bb-hero[data-template="static_opacity"] .bb-hero__card.is-active,
[class*="bb-hero--template-static_opacity"] .bb-hero__card.is-active {
    opacity: 1;
    transform: scale(1);
}

.bb-hero.bb-hero--template-static_opacity .bb-hero__card:hover,
.bb-hero[data-template="static_opacity"] .bb-hero__card:hover,
[class*="bb-hero--template-static_opacity"] .bb-hero__card:hover {
    z-index: 10 !important;
    transform: scale(var(--bb-hero-card-hover-scale, 1.05)) translateY(calc(-1 * var(--bb-hero-card-hover-lift, 4px))) !important;
    opacity: var(--bb-hero-card-hover-opacity, 1) !important;
}

/* ==========================================================================
   Responsive Mobile & Tablet Styles
   ========================================================================== */

/* Tablet Breakpoint (<= 1024px) */
@media (max-width: 1024px) {
    .bb-hero {
        min-height: 480px;
    }

    .bb-hero__content {
        max-width: min(680px, 75%);
    }

    .bb-hero__arrow--prev { left: 16px !important; }
    .bb-hero__arrow--next { right: 16px !important; }
}

/* Mobile Breakpoint (<= 767px) */
@media (max-width: 767px) {
    .bb-hero {
        --bb-hero-card-w: 80px;
        --bb-hero-card-ratio: 1.0;
        min-height: 440px;
    }

    /* Content Area Positioning & Typography on Mobile */
    .bb-hero__content {
        left: 5% !important;
        right: 5% !important;
        width: 90% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .bb-hero.bb-hero--h-left .bb-hero__content,
    .bb-hero.bb-hero--h-center .bb-hero__content,
    .bb-hero.bb-hero--h-right .bb-hero__content,
    [class*="bb-hero--h-left"] .bb-hero__content,
    [class*="bb-hero--h-center"] .bb-hero__content,
    [class*="bb-hero--h-right"] .bb-hero__content {
        left: 5% !important;
        right: 5% !important;
        width: 90% !important;
        max-width: 100% !important;
    }

    .bb-hero.bb-hero--v-middle .bb-hero__content,
    [class*="bb-hero--v-middle"] .bb-hero__content {
        top: 38% !important;
        transform: translateY(-50%) !important;
    }

    .bb-hero.bb-hero--v-bottom .bb-hero__content,
    [class*="bb-hero--v-bottom"] .bb-hero__content {
        bottom: 110px !important;
    }

    .bb-hero__title {
        font-size: clamp(20px, 5.5vw, 28px);
        margin-bottom: 8px;
    }

    .bb-hero__desc {
        font-size: clamp(13px, 3.5vw, 15px);
        line-height: 1.5;
        margin-bottom: 14px;
        -webkit-line-clamp: 3;
    }

    .bb-hero__cta {
        padding: 9px 20px;
        font-size: 13.5px;
    }

    /* Navigation Arrows on Mobile */
    .bb-hero__arrow {
        width: 36px !important;
        height: 36px !important;
    }

    .bb-hero__arrow svg {
        width: 16px !important;
        height: 16px !important;
    }

    .bb-hero__arrow--prev { left: 8px !important; }
    .bb-hero__arrow--next { right: 8px !important; }

    /* Card Track & Cards Sizing on Mobile (Centered, 80x80px Square) */
    .bb-hero__strip {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: calc(var(--bb-hero-card-w, 80px) * var(--bb-hero-card-ratio, 1.0) * var(--bb-hero-active-scale, 1.2) + 28px) !important;
        bottom: 8px !important;
        overflow: visible !important;
    }

    .bb-hero.bb-hero--template-static_opacity .bb-hero__track,
    .bb-hero[data-template="static_opacity"] .bb-hero__track,
    [class*="bb-hero--template-static_opacity"] .bb-hero__track,
    .bb-hero__track {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: max-content !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: var(--bb-hero-card-gap, 8px) !important;
        padding: 0 !important;
    }

    .bb-hero__card,
    .bb-hero.bb-hero--template-static_opacity .bb-hero__card,
    .bb-hero[data-template="static_opacity"] .bb-hero__card,
    [class*="bb-hero--template-static_opacity"] .bb-hero__card {
        width: 80px !important;
        height: 80px !important;
        max-width: calc((100vw - 32px) / 3) !important;
        flex: 0 0 auto !important;
    }
}

/* Desktop & Tablet Viewport Rules (>= 768px) */
@media (min-width: 768px) {
    .bb-hero.bb-hero--template-static_opacity .bb-hero__strip,
    .bb-hero[data-template="static_opacity"] .bb-hero__strip,
    [class*="bb-hero--template-static_opacity"] .bb-hero__strip {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .bb-hero.bb-hero--template-static_opacity .bb-hero__track,
    .bb-hero[data-template="static_opacity"] .bb-hero__track,
    [class*="bb-hero--template-static_opacity"] .bb-hero__track {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: max-content !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: var(--bb-hero-card-gap, 10px) !important;
        padding: 0 !important;
    }

    .bb-hero.bb-hero--template-static_opacity .bb-hero__card,
    .bb-hero[data-template="static_opacity"] .bb-hero__card,
    [class*="bb-hero--template-static_opacity"] .bb-hero__card {
        width: var(--bb-hero-card-w, 160px) !important;
        height: calc(var(--bb-hero-card-w, 160px) * var(--bb-hero-card-ratio, 0.625)) !important;
    }

    /* Desktop & Tablet Card Layout: Image Left, Text Right (Default unless desktop-image_only is selected) */
    .bb-hero.bb-hero--card-layout-image_text .bb-hero__card-inner,
    .bb-hero.bb-hero--card-layout-desktop-image_text .bb-hero__card-inner,
    .bb-hero:not(.bb-hero--card-layout-desktop-image_only):not(.bb-hero--card-layout-image_only) .bb-hero__card-inner {
        padding: 6px 10px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .bb-hero.bb-hero--card-layout-image_text .bb-hero__card-thumb,
    .bb-hero.bb-hero--card-layout-desktop-image_text .bb-hero__card-thumb,
    .bb-hero:not(.bb-hero--card-layout-desktop-image_only):not(.bb-hero--card-layout-image_only) .bb-hero__card-thumb {
        width: var(--bb-hero-card-img-w, 64px) !important;
        min-width: var(--bb-hero-card-img-w, 64px) !important;
        height: var(--bb-hero-card-img-w, 64px) !important;
        max-height: calc(100% - 4px) !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        flex: 0 0 var(--bb-hero-card-img-w, 64px) !important;
    }

    .bb-hero.bb-hero--card-layout-image_text .bb-hero__card-thumb img,
    .bb-hero.bb-hero--card-layout-desktop-image_text .bb-hero__card-thumb img,
    .bb-hero:not(.bb-hero--card-layout-desktop-image_only):not(.bb-hero--card-layout-image_only) .bb-hero__card-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .bb-hero.bb-hero--card-layout-image_text .bb-hero__card-text,
    .bb-hero.bb-hero--card-layout-desktop-image_text .bb-hero__card-text,
    .bb-hero:not(.bb-hero--card-layout-desktop-image_only):not(.bb-hero--card-layout-image_only) .bb-hero__card-text {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-align: left !important;
    }

    /* Desktop & Tablet Card Layout: Image Only */
    .bb-hero.bb-hero--card-layout-desktop-image_only .bb-hero__card-text {
        display: none !important;
    }

    .bb-hero.bb-hero--card-layout-desktop-image_only .bb-hero__card-inner {
        padding: 0 !important;
        gap: 0 !important;
    }

    .bb-hero.bb-hero--card-layout-desktop-image_only .bb-hero__card-thumb {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        max-height: none !important;
        flex: 1 1 100% !important;
        border-radius: inherit !important;
    }

    .bb-hero__card-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bb-hero__card-subtitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Small Mobile Breakpoint (<= 480px) */
@media (max-width: 480px) {
    .bb-hero {
        min-height: 420px;
    }

    .bb-hero__title {
        font-size: clamp(18px, 5vw, 24px);
    }

    .bb-hero__desc {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .bb-hero__arrow {
        width: 32px !important;
        height: 32px !important;
    }

    .bb-hero__arrow--prev { left: 6px !important; }
    .bb-hero__arrow--next { right: 6px !important; }
}

/* เคารพการตั้งค่าลดการเคลื่อนไหวของผู้ใช้ */

@media (prefers-reduced-motion: reduce) {
    .bb-hero__track,
    .bb-hero__bg,
    .bb-hero__card,
    .bb-hero__cta,
    .bb-hero__arrow {
        transition: none !important;
    }

    .bb-hero__strip,
    .bb-hero__content.is-animating .bb-hero__title,
    .bb-hero__content.is-animating .bb-hero__desc,
    .bb-hero__content.is-animating .bb-hero__cta {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}