/* Footer / chatbot / layout (was inline in footer.php) */

    .chat_button {
        position: fixed;
        bottom: 65px;
        right: 0;
        margin: 20px;
        z-index: 1000;
        height: 60px;
        width: 60px;
        text-align: center;
        color: #EFF;
        background-color: #35A20B;
        border-radius: 100px;
        border: #EFF solid 2px;
        font-size: 2rem;
        cursor: pointer;
        transition: .5s cubic-bezier(.19, 1, .22, 1);
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }

    .chat_box {
        max-height: 100%;
        max-width: 100%;
        height: 500px;
        width: 330px;
        background-color: #fff;
        position: fixed;
        bottom: 160;
        right: 20px;
        display: block;
        border-radius: 15px;
        box-shadow: 0 0 50px rgba(0, 0, 0, .45);
        z-index: 900;
        transform: translate(0, 600px);
        opacity: 0;
        transition: .5s cubic-bezier(.19, 1, .22, 1);
    }

    .chat_box_header {
        padding: 20px;
        background: #e1e3e8;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        text-align: center;
        color: #35A20B;
        font-weight: 600;
        letter-spacing: .25rem;
    }

    .chat_box_body {
        padding: 16px;
        height: 100%;
        overflow-y: scroll;
        height: 380px;
        scroll-behavior: smooth;
    }

    .chat_box_body_self {
        background: whitesmoke;
        padding: 10px;
        color: #666;
        max-width: 85%;
        float: left;
        margin: 5px 0;
        position: relative;
        border-radius: 25px;
        clear: both;

        & ol {
            padding-left: 13px;
            counter-reset: item;

            & > li {
              display: block;
              margin-bottom: 5px;
              &:before {
                  content: counter(item) ". ";
                  counter-increment: item
              }

              & ol > li {
                  display: block;
                  &:before {
                      content: counters(item, ".") " ";
                      counter-increment: item
                  }
                  
              }
            }
        }

    }

    .chat_box_body_other {
        padding: 10px;
        float: right;
        border-radius: 25px;
        /* background: #5A5EB9; */
        background: #73c666;
        color: #FFF;
        margin: 5px 0;
        clear: both;
        max-width: 85%;
    }


    .chat_box_footer {
        max-width: 100%;
        height: 80px;
        position: absolute;
        bottom: -31px;
    }

    .chat_box_footer input {
        max-width: 100%;
        width: 280px;
        padding: 14px 15px;
        border-bottom-left-radius: 15px;
        border: none;
        position: fixed;
        background-color: #eee;
    }

    .chat_box_footer button {
        position: absolute;
        bottom: 30px;
        background: #35A20B;
        box-shadow: none;
        border: none;
        border-bottom-right-radius: 16px;
        color: #EFF;
        padding: 13px 16px;
        left: 280px;
    }

    .chat_box_footer button span {
        font-size: 1.5em;
    }

    .chat_box_footer input:focus, .chat_box_footer button:focus {
        outline: none;
    }


    .fade-up > .chat_box {
        transform: translate(0);
        opacity: 100;
    }

    .fade-up > .chat_button {
        color: #35A20B;
        background-color: #EFF;
        border: #EFF solid 2px;
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    }

    .fade-up > .chat_button .fa-times, .chat_button .fa-comments {
        display: block;
    }

    .fade-up > .chat_button .fa-comments, .chat_button .fa-times {
        display: none;
    }


    .dot-elastic {
        position: relative;
        width: 8px;
        height: 8px;
        border-radius: 5px;
        background-color: #35A20B;
        color: #35A20B;
        animation: dot-elastic 1s infinite linear;
        clear: both;
        float: left;
        margin: 10px 0 30px 15px;
    }

    .dot-elastic::before, .dot-elastic::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
    }

    .dot-elastic::before {
        left: -10px;
        width: 8px;
        height: 8px;
        border-radius: 5px;
        background-color: #35A20B;
        color: #35A20B;
        animation: dot-elastic-before 1s infinite linear;
    }

    .dot-elastic::after {
        left: 10px;
        width: 8px;
        height: 8px;
        border-radius: 5px;
        background-color: #35A20B;
        color: #35A20B;
        animation: dot-elastic-after 1s infinite linear;
    }

    @keyframes dot-elastic-before {
        0% {
            transform: scale(1, 1);
        }
        25% {
            transform: scale(1, 1.5);
        }
        50% {
            transform: scale(1, 0.67);
        }
        75% {
            transform: scale(1, 1);
        }
        100% {
            transform: scale(1, 1);
        }
    }

    @keyframes dot-elastic {
        0% {
            transform: scale(1, 1);
        }
        25% {
            transform: scale(1, 1);
        }
        50% {
            transform: scale(1, 1.5);
        }
        75% {
            transform: scale(1, 1);
        }
        100% {
            transform: scale(1, 1);
        }
    }

    @keyframes dot-elastic-after {
        0% {
            transform: scale(1, 1);
        }
        25% {
            transform: scale(1, 1);
        }
        50% {
            transform: scale(1, 0.67);
        }
        75% {
            transform: scale(1, 1.5);
        }
        100% {
            transform: scale(1, 1);
        }
    }

    #initFacncybox.fancybox-content {
        padding:0;
        margin:50px;
    }

  
    html, body {
        height: 100%;
        margin: 0;
    }
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .container {
    
    }
    footer {
        flex: 1; /* ขยายพื้นที่ให้คอนเทนต์เติมพื้นที่ที่เหลือ */
        padding: 10px;
        text-align: center;
    }