/* ===================================================================================================================================================================================
           HERO: Base layout
        ========================= */


.hero-outer {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.hero-frame {
    background: linear-gradient(135deg, #FF7F50 0%, #2563eb 40%, #1e3a8a 100%);
    padding: 10px 0;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(30,58,138,.35), inset 0 1px 0 rgba(255,255,255,.2);
    margin: 0;
}

.hero-video-wrap {
    position: relative;
    width: 100%;
    height: clamp(320px, 48vh, 560px);
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(16px, 4vw, 56px);
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0) 100%);
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.hero-title {
    margin: 0 0 .25rem 0;
}

.hero-subtitle {
    margin: 0 0 1rem 0;
    max-width: 60ch;
}

.hero-controls {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    gap: .5rem;
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
/* === Raise only the hero indicators (dots) === */
:root {
    --hero-indicators-shift: 24px; /* ปรับ 8–24px ตามชอบ: มากขึ้น = เลื่อนขึ้น */
}

#heroVideoCarousel .carousel-indicators {
    bottom: var(--hero-indicators-shift) !important; /* Bootstrap เดิม bottom: 0 */
}

/* จอเล็ก อาจอยากให้สูงขึ้นอีกนิด */
@media (max-width: 575.98px) {
    :root {
        --hero-indicators-shift: 18px;
    }
}


#heroVideoCarousel .carousel-item, #heroVideoCarousel .carousel-inner, #heroVideoCarousel {
    width: 100%;
}

body {
    overflow-x: hidden;
}





/* --- Background animated gradient --- */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}




.hero-outer {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.hero-frame {
    background: linear-gradient(135deg,#FF7F50 0%,#2563eb 40%,#1e3a8a 100%);
    padding: 10px 0;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(30,58,138,.35), inset 0 1px 0 rgba(255,255,255,.2);
    margin: 0;
}

.hero-video-wrap {
    position: relative;
    width: 100%;
    height: clamp(320px,48vh,560px);
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%,-50%);
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(16px,4vw,56px);
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,0) 100%);
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
    /* ไม่ให้ลูกถูกยืดเต็มกว้าง */
    align-items: flex-start;
}

.hero-title {
    margin: 0 0 .25rem 0;
}

.hero-subtitle {
    margin: 0 0 1rem 0;
    max-width: 60ch;
}

.hero-controls {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    gap: .5rem;
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

#heroVideoCarousel .carousel-item,
#heroVideoCarousel .carousel-inner,
#heroVideoCarousel {
    width: 100%;
}

body {
    overflow-x: hidden;
}

/* =========================
           Fade-up effect (slow & smooth)
        ========================= */
#heroVideoCarousel [data-fadeup] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur, 900ms) cubic-bezier(.22,.61,.36,1), transform var(--dur, 900ms) cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--du, 0ms);
    will-change: opacity, transform;
}

#heroVideoCarousel .fadeup-in {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
           Ribbon + pulsing bell (variables)
        ========================= */
:root {
    --rib-from: rgba(37, 99, 235, 0.90);
    --rib-mid: rgba(59, 130, 246, 0.86);
    --rib-to: rgba(147, 197, 253, 0.82);
    --rib-brd: rgba(255, 255, 255, .18);
    --rib-glow: rgba(96, 165, 250, 0.3);
    /* กระดิ่ง (วงกลม) ไล่เฉดน้ำเงิน */
    --bell-core: #3b82f6; /* blue-500 */
    --bell-edge: #1e40af; /* indigo-800 */
}

/* =========================
           Ribbon + pulsing bell (styles)
        ========================= */
/* Ribbon หลัก */
.hero-ribbon {
    position: relative; /* เผื่อเลื่อนขึ้นนิด */
    top: -8px;
    margin-bottom: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem 1rem .45rem .6rem; /* เผื่อที่ซ้ายสำหรับ bell */
    border-radius: 999px;
    /* พื้นหลังไล่เฉดน้ำเงิน */
    background: linear-gradient(90deg,var(--rib-from) 0%,var(--rib-mid) 45%,var(--rib-to) 100%);
    /* สำคัญ: ตัด artifacts ปลายโค้ง */
    border: 0; /* ไม่ใช้ border จริง */
    overflow: hidden; /* ตัดรอยเกินที่มุมโค้ง */
    background-clip: padding-box; /* กันสีซึมเข้าขอบ */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    transform: translateZ(0); /* ช่วย AA/เรนเดอร์ */
    /* เงา/ความนูน */
    box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: saturate(120%) blur(.5px);
    -webkit-backdrop-filter: saturate(120%) blur(.5px);
    /* กว้างเท่าคอนเทนต์ ไม่ยืดสุด */
    align-self: flex-start;
    width: -moz-fit-content;
    width: fit-content;
    max-width: min(92vw,1000px);
}

    /* “ขอบหลอก” เนียนๆ แทน border จริง */
    .hero-ribbon::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 2px rgba(255,255,255,.06); /* ชั้นบางๆ ช่วยกลบปลาย */
    }

/* จอใหญ่ ขยับขึ้นอีกนิด */
@media (min-width: 992px) {
    .hero-ribbon {
        top: -12px;
        margin-bottom: .6rem;
    }
}


.hero-ribbon .hero-title {
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
    font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    line-height: 1.25;
    margin: 0;
    white-space: normal; /* อนุญาตตัดบรรทัด */
    max-width: none;
}

.hero-ribbon__bell {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: radial-gradient(60% 60% at 35% 35%, var(--bell-core), var(--bell-edge));
    box-shadow: 0 6px 16px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.18) inset;
}

    .hero-ribbon__bell::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--rib-glow);
        animation: bellPulse 2s ease-out infinite;
    }

/* Pulse ring animation */
@keyframes bellPulse {
    0% {
        box-shadow: 0 0 0 0 var(--rib-glow);
        opacity: .95;
    }

    70% {
        box-shadow: 0 0 0 12px rgba(238, 88, 41, 0);
        opacity: 0;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(238, 88, 41, 0);
        opacity: 0;
    }
}

/* =========================
           Responsive / Reduced motion
        ========================= */
/* มือถือ: จัดกลาง */
@media (max-width:576px) {
    #heroVideoCarousel .hero-overlay {
        align-items: center;
    }

    #heroVideoCarousel .hero-ribbon {
        margin-left: auto;
        margin-right: auto;
    }
}

/* จอใหญ่: ขยับขึ้นอีกนิดให้บาลานซ์ */
@media (min-width:992px) {
    #heroVideoCarousel .hero-ribbon {
        top: -12px;
        margin-bottom: .6rem;
    }
}

/* ลด motion */
@media (prefers-reduced-motion: reduce) {
    #heroVideoCarousel [data-fadeup] {
        transition: none;
        transform: none;
        opacity: 1;
    }

    .hero-ribbon__bell::after {
        animation: none;
    }
}
/* ===== Stronger, whiter, faster bell pulse ===== */

/* วงแหวนกระพิบด้านนอก — เร็วและสว่างขึ้น */
#heroVideoCarousel .hero-ribbon__bell::after {
    /* ทับค่าเดิมทั้งหมด */
    box-shadow: 0 0 0 0 rgba(255,255,255,.70);
    animation: bellPulseStrong 1.1s ease-out infinite;
    opacity: 1;
}

/* แฟลชด้านใน (วิบวับสั้น ๆ เพิ่มความเด่น) */
#heroVideoCarousel .hero-ribbon__bell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 60%);
    transform: scale(.85);
    opacity: 0;
    animation: bellBlink 1.1s ease-out infinite;
    pointer-events: none;
}

/* วงแหวนสีขาววิ่งออกเร็วขึ้น/ถี่ขึ้น */
@keyframes bellPulseStrong {
    0% {
        box-shadow: 0 0 0 0 rgba(255,255,255,.70);
        opacity: 1;
    }

    60% {
        box-shadow: 0 0 0 18px rgba(255,255,255,0.00);
        opacity: 0;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0.00);
        opacity: 0;
    }
}

/* แฟลชขาวสั้น ๆ ด้านใน ให้ดูวิบวับชัดเจน */
@keyframes bellBlink {
    0% {
        opacity: 0;
        transform: scale(.85);
    }

    10% {
        opacity: .95;
        transform: scale(1);
    }

    25% {
        opacity: 0;
        transform: scale(1.02);
    }

    100% {
        opacity: 0;
        transform: scale(.85);
    }
}

/* === ขยายฟอนต์ซับไตเติล (อ่านชัดขึ้นทุกจอ) === */
#heroVideoCarousel .hero-subtitle {
    font-size: clamp(1.05rem, 2.1vw, 1.45rem); /* ปรับได้ตามชอบ */
    line-height: 1.55;
    letter-spacing: .1px;
}

/* === ปุ่ม Primary: ไล่สีน้ำเงินลงอ่อน (Blue → Light Blue) === */
#heroVideoCarousel .hero-overlay .btn-primary {
    --grad-from: #2563eb; /* blue-600 */
    --grad-to: #60a5fa; /* blue-400 */
    color: #fff;
    background-image: linear-gradient(135deg, var(--grad-from), var(--grad-to));
    border: 0;
    border-radius: 999px;
    padding: .45rem .9rem; /* ทำให้ btn-sm ดูเต็มขึ้นเล็กน้อย */
    box-shadow: 0 6px 18px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.22);
    background-size: 120% 120%;
    background-position: 0% 50%;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background-position .3s ease;
}

    #heroVideoCarousel .hero-overlay .btn-primary:hover {
        transform: translateY(-1px);
        background-position: 100% 50%;
        box-shadow: 0 10px 22px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.25);
        filter: brightness(1.03);
    }

    #heroVideoCarousel .hero-overlay .btn-primary:active {
        transform: translateY(0);
        filter: brightness(.98);
    }

    #heroVideoCarousel .hero-overlay .btn-primary:focus {
        outline: none;
        box-shadow: 0 0 0 .22rem rgba(37,99,235,.35), 0 6px 18px rgba(37,99,235,.28);
    }
/* (เสริม) ทำให้ปุ่มเส้นขาวกลมกลืนขึ้นเล็กน้อย */
#heroVideoCarousel .hero-overlay .btn-outline-light {
    border-radius: 999px;
    backdrop-filter: saturate(120%) blur(.3px);
    -webkit-backdrop-filter: saturate(120%) blur(.3px);
    border-color: rgba(255,255,255,.85);
    color: #fff;
}

    #heroVideoCarousel .hero-overlay .btn-outline-light:hover {
        background-color: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.95);
    }

/* ลด motion เมื่อผู้ใช้ตั้งค่า */
@media (prefers-reduced-motion: reduce) {
    #heroVideoCarousel .hero-overlay .btn-primary {
        transition: none;
    }
}
/* ===== Hover/Active ชัดเจนสำหรับปุ่มใน hero ===== */

/* พื้นฐาน (ให้ทุกปุ่มมีทรานซิชันสี) */
#heroVideoCarousel .hero-overlay .btn {
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background-position .3s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    position: relative;
    z-index: 2;
    border-radius: 999px;
}

    /* ---- btn-primary: ไล่สีน้ำเงิน→ฟ้าอ่อน + hover shift ---- */
    #heroVideoCarousel .hero-overlay .btn.btn-primary {
        --grad-from: #2563eb; /* blue-600 */
        --grad-to: #60a5fa; /* blue-400 */
        color: #fff;
        background-image: linear-gradient(135deg, var(--grad-from), var(--grad-to));
        background-size: 120% 120%;
        background-position: 0% 50%;
        border: 0;
        box-shadow: 0 6px 18px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.22);
        padding: .45rem .9rem;
    }

        #heroVideoCarousel .hero-overlay .btn.btn-primary:hover,
        #heroVideoCarousel .hero-overlay .btn.btn-primary:focus-visible {
            background-position: 100% 50%;
            box-shadow: 0 10px 22px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.25);
            transform: translateY(-1px);
            filter: brightness(1.03);
        }

        #heroVideoCarousel .hero-overlay .btn.btn-primary:active {
            transform: translateY(0);
            filter: brightness(.98);
        }

    /* ---- btn-outline-light: ให้เห็น hover บนพื้นมืดชัดเจน ---- */
    #heroVideoCarousel .hero-overlay .btn.btn-outline-light {
        color: #fff;
        border-color: rgba(255,255,255,.85);
        background-color: rgba(255,255,255,0); /* เริ่มโปร่งใส */
        padding: .45rem .9rem;
        backdrop-filter: saturate(120%) blur(.3px);
        -webkit-backdrop-filter: saturate(120%) blur(.3px);
    }

        #heroVideoCarousel .hero-overlay .btn.btn-outline-light:hover,
        #heroVideoCarousel .hero-overlay .btn.btn-outline-light:focus-visible {
            background-color: rgba(255,255,255,.16); /* เพิ่มพื้นจาง ๆ ตอน hover */
            border-color: rgba(255,255,255,.95);
            color: #fff;
            transform: translateY(-1px);
        }

        #heroVideoCarousel .hero-overlay .btn.btn-outline-light:active {
            background-color: rgba(255,255,255,.10);
            transform: translateY(0);
        }

/* ลด motion เมื่อตั้งค่า */
@media (prefers-reduced-motion: reduce) {
    #heroVideoCarousel .hero-overlay .btn {
        transition: none;
    }
}

/* เพิ่ม Font*/