.ql-align-center {
    text-align: center !important;
    align-content: center !important;
    align-items: center !important;
    width: 100%;
}

.pagination .page-link {
    display: flex;
    /* ใช้ Flexbox */
    justify-content: center;
    /* จัดตัวอักษรให้อยู่ตรงกลางแนวนอน */
    align-items: center;
    /* จัดตัวอักษรให้อยู่ตรงกลางแนวตั้ง */
    text-align: center;
    /* จัดข้อความให้อยู่ตรงกลาง (เสริม) */
    width: 30px;
    height: 30px;
    /*border-radius: 50%;*/
    color: #6e6e6e;
    /* สีตัวอักษร */
    border: 1px solid #ddd;
    /* เส้นขอบ */
}

.texthover {
    color: #c0c0c0;
    font-size: 1.5rem;
    /* สีตัวอักษร */
    text-decoration: none;
    /* ไม่มีเส้นใต้ */
    transition: color 0.2s ease-in-out,
        font-size 0.2s ease-in-out;
}

.texthover:hover {
    color: #21529d;
    font-size: 1.6rem;
    /* สีตัวอักษร */
    text-decoration: none;
    /* ไม่มีเส้นใต้ */
}

.pagination .page-link:hover {
    background-color: #f0f0f0;
    /* เปลี่ยนสีพื้นหลังเมื่อ hover */
    text-decoration: none;
    /*border-radius: 50%;*/
}

.pagination .active {
    margin: 0px 2px;
    /*border-radius: 50%;*/
}

.pagination .disabled {}

.pagination .page-item.active .page-link {
    background-color: #21529d;
    /* สีพื้นหลังของปุ่มที่ถูกเลือก */
    color: white;
    /* สีตัวอักษร */
    border-color: #21529d;
    /* สีขอบ */
    /*border-radius: 50%;*/
}

/* .ql-editor{
    margin-top: -3rem;
    height: 100vh;
} */
/* .ql-indent-1 {
    padding-left: 3em !important;
}

.ql-editor ol {
    list-style-type: decimal !important;
    margin-left: 20px !important;
    padding-left: 40px;
}
.ql-editor ol {
    list-style-type: decimal !important;
    padding-left: 40px !important;
}
.ql-editor ul {
    list-style-type: disc !important;
    padding-left: 40px !important;
}
.ql-editor ol li {
    list-style-type: decimal !important;
    margin-left: 20px;
}

.ql-editor ol li .ql-indent-1 {
    list-style-type: upper-alpha !important;
}

.ql-editor ol li .ql-indent-2 {
    list-style-type: upper-roman !important;
}

.ql-editor ol li .ql-indent-3 {
    list-style-type: lower-alpha !important;
}

.ql-editor ol li .ql-indent-4 {
    list-style-type: lower-roman !important;
}



.ql-align-center {
    width: 100% ;
} */

iframe {
    width: 100%;
    height: 30vw;
}

.pill {
    background-color: rgb(199, 214, 231);
    color: #21529d;
}

.superround {
    border-radius: 20px;
}
.bg-blury{
    background: rgba(255, 255, 255, 0.60) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
.bg-blury-Black{
    background: rgba(0, 0, 0, 0.318) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.packageborder {
    border-radius: 10px 10px 0px 0px;
}

.goodshadow {
    -webkit-box-shadow: 0px 8px 20px 3px rgba(98, 128, 204, 0.2), 0px 7px 11px -4px rgba(98, 128, 204, 0.2);
    box-shadow: good, 0px 7px 11px -4px rgba(98, 128, 204, 0.2);
}
.goodshadowRed {
    -webkit-box-shadow: 0px 8px 20px 3px rgba(204, 98, 98, 0.2), 0px 7px 11px -4px rgba(204, 98, 98, 0.2);
    box-shadow: good, 0px 7px 11px -4px rgba(204, 98, 98, 0.2);
}

.goodpicshadow {
    filter: drop-shadow(0px 8px 5px rgba(98, 128, 204, 0.2));

}

.grayblue {
    background: linear-gradient(130deg, rgb(234, 241, 248) 0%, rgb(248, 248, 248) 100%);
}

.bluegreen {
    background: linear-gradient(40deg, rgb(255, 255, 255) 0%, rgb(219, 236, 255) 100%);
}

.headcolor {
    color: #527CAE;
}

.Blacktext {
    color: #000000 !important;
}

.Blackdroptext {
    color: #9399a0 !important;
}

.modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}

.modal-close:hover {
    color: #000;
}

/* Fade animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-30px);
        opacity: 0;
    }
}

.fade-out {
    animation: fadeOut 0.3s ease forwards;
}
.fa{
    background-color: #00000000;
}
.slide-out {
    animation: slideOut 0.3s ease forwards;
}


.width {
    width: 100%;
    padding: 2rem 2rem;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(84, 84, 84, 0.41);
    box-shadow: 5px 5px 15px 5px rgba(52, 52, 52, 0.41);
    border-radius: 20px;
}


/* ปุ่มโปรโมชั่น (programs/show id 3) */
.promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #f7a81b 0%, #e8590c 100%);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(232, 89, 12, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: promoPulse 2s ease-in-out infinite;
}

.promo-cta:hover,
.promo-cta:focus {
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(232, 89, 12, 0.55);
}

.promo-cta:focus-visible {
    outline: 3px solid #21529d;
    outline-offset: 3px;
}

.promo-cta-arrow {
    transition: transform 0.2s ease;
}

.promo-cta:hover .promo-cta-arrow {
    transform: translateX(4px);
}

@keyframes promoPulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(232, 89, 12, 0.45), 0 0 0 0 rgba(247, 168, 27, 0.55); }
    50% { box-shadow: 0 8px 22px rgba(232, 89, 12, 0.45), 0 0 0 12px rgba(247, 168, 27, 0); }
}

@media (max-width: 575px) {
    .promo-cta {
        width: 100%;
        justify-content: center;
        font-size: 1.05rem;
        padding: 0.85rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promo-cta,
    .promo-cta-arrow {
        animation: none;
        transition: none;
    }
}