@import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Athiti:wght@200;300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

a {
    color: #8B8B8B !important;
    text-decoration: none;
    cursor: pointer !important;
    transition: all 0.3s linear;
}

button {
    transition: all 0.3s linear;
}

.flex1 {
    flex: 1;
}

header .navbar {
    background: linear-gradient(90deg, #F46655 0%, #EF3747 100%), linear-gradient(90deg, #F46655 0%, #EF3747 100%), #FFF !important;
    box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.05) !important;
    height: 60px;
    padding-top: 0;
    padding-bottom: 0;
}

header .navbar-brand {
    margin-left: auto;
    margin-right: auto;
}

.wrapper {
    background-image: url(../images/bg-wrapper.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    padding-top: 75px;
    padding-bottom: 25px;
}

.wrapper-backend {
    background: #F4F4F4;
    position: relative;
    min-height: 100vh;
}

.img-profile {
    width: 35px;
    height: 35px;
}

.img-profile-circle {
    border-radius: 5px;
    border: 1px solid #FFF;
    background: #D9D9D9;
    padding: 2px;
    position: absolute;
    right: 15px;
}

.photo-thumb {
    position: relative;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 70%;
    background: #FFFFFF;
}

    .photo-thumb.extra {
        padding-bottom: calc(29 / 21* 100%);
    }

    .photo-thumb.square {
        padding-bottom: 100%;
    }

    .photo-thumb .photo-parent {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .photo-thumb .photo {
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #D9D9D9;
        display: block;
        transition: all 0.3s linear;
        object-fit: cover;
    }

.object-fit-cover {
    object-fit: cover !important;
}

.badge-main {
    border-radius: 30px;
    background: #14AE5C;
    font-weight: 400;
    padding: 5px 10px;
    min-width: 80px;
    font-size: 18px;
}

.card-main {
    width: 600px;
    max-width: 100%;
    box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
}

    .card-main .card-title {
        font-size: 32px;
        line-height: 0.7;
    }

    .card-main .card-header {
        background-color: transparent;
    }

    .card-main .card-title.sm {
        font-size: 28px;
        line-height: 82.143%;
    }

    .card-main.event {
        padding: 16.5px;
    }

        .card-main.event .photo-thumb {
            padding-bottom: calc(29 / 21 * 100%); /* คำนวณอัตราส่วน: (สูง / กว้าง) * 100 */
            /*    padding-bottom: 57.85%;*/
            /*    border: 1px solid #EFEFEF;*/
            border-radius: 10px;
        }

    .card-main .date::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/calendar.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 13px;
        height: 13px;
        margin-right: 5px;
        margin-bottom: 3px;
    }

    .card-main .user-couple::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/user-couple.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 15px;
        height: 15px;
        margin-right: 5px;
        margin-bottom: 2px;
    }

    .card-main .photo-thumb .badge-main {
        position: absolute;
        top: 10px;
        left: 5px;
        z-index: 1;
    }

card-main .card-info {
    position: relative;
}

.card-main .card-info .card-info-col {
    position: relative;
}

    .card-main .card-info .card-info-col::after {
        content: "";
        display: inline-block;
        width: 1px;
        height: 42px;
        background-color: #E0E0E0;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .card-main .card-info .card-info-col:last-child::after {
        display: none;
    }

.card-main .shadow-none {
    filter: none;
}

.card-main .card-text {
    color: #333;
}

    .card-main .card-text.sm {
        font-size: 18px;
    }

    .card-main .card-text.text-wrap2 {
        height: 40px;
    }

.card-main .topic-text {
    font-size: 22px;
}

.card-main.evtk {
    overflow: hidden;
    border: none;
}

    .card-main.evtk .photo-thumb {
        aspect-ratio: 2 / 1;
        width: 100%;
        padding-bottom: 0;
    }

    .card-main.evtk .photo-overlay {
        background-color: #000;
        opacity: 0.7;
        filter: drop-shadow(0px 1.526px 1.526px rgba(0, 0, 0, 0.25));
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        font-family: "Prompt", sans-serif;
        font-size: 15px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #FFF;
        padding: 10px;
    }

.card-event .card-title {
    font-size: 22px;
    font-weight: 400;
    line-height: 137.412%;
    height: 60px;
}

.card-menu {
    display: block;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: rgba(255, 255, 255, 0.90);
    border-radius: 20px;
    border: 1px solid #BEBEBE;
    box-shadow: none;
    text-align: center;
}

    .card-menu .card-title {
        font-size: 16px;
        font-family: "Noto Sans Thai", sans-serif;
        font-style: italic;
        transition: all .2s;
    }

    .card-menu img {
        transition: transform .2s;
    }

.card-menu-extra {
    aspect-ratio: 264.285 / 311.256; /* หรือประมาณ 264 / 311 หรือ 264:311 */
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
}

    .card-menu-extra img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.card-menu:hover img {
    transform: scale(1.1);
}

.card-menu:hover .card-title {
    color: #E3394E !important;
}

.card-candidate {
    border-radius: 22px;
    box-shadow: 0 1.522px 4.565px 0 rgba(0, 0, 0, 0.25);
}

    .card-candidate img {
        border-radius: 22px;
        background-color: #C4C4C4;
        box-shadow: 0 1.522px 4.565px 0 rgba(0, 0, 0, 0.25);
        aspect-ratio: 2 / 3;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .card-candidate h2 {
        font-size: 18px !important;
        line-height: normal !important;
        color: #323232;
        height: 54px;
    }

.card-ranking {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 1px solid #FFF;
    background: #F8565C;
    box-shadow: 5.465px 6.245px 3.279px 0 rgba(235, 69, 76, 0.33);
    position: relative;
    width: calc(100% - 50px);
    height: 120px;
    margin-bottom: 40px;
    margin-left: 50px;
    padding-left: 90px;
}

    .card-ranking .card-img {
        display: block;
        width: 135px;
        height: 135px;
        object-fit: cover;
        background-color: #C4C4C4;
        border-radius: 50%;
        border: 3px solid #FFF;
        box-shadow: 5.465px 7.026px 3.123px 0 rgba(235, 69, 76, 0.54);
        background-color: #fff;
    }

    .card-ranking .card-text {
        font-size: 18px;
    }

    .card-ranking .img-wrapper {
        position: absolute;
        left: -50px;
        top: 50%;
        transform: translateY(-50%);
        width: 135px;
        height: 135px;
    }

    .card-ranking .img-level {
        position: absolute;
        top: -10px;
        left: 0;
        z-index: 2;
        width: 65px;
    }

.card-login {
    border-radius: 18px;
    background: linear-gradient(0deg, #CF1E35 -33.72%, #FFF 16.29%), #FFF;
    box-shadow: 0px 0.927px 31.511px 0px rgba(0, 0, 0, 0.35);
}

    .card-login * {
        color: #666;
        font-size: 20px;
    }

    .card-login h1 {
        font-size: 40px;
        letter-spacing: 3px;
    }

.card-ef .card-title {
    transition: color .2s linear;
}

.card-ef:hover .photo-thumb .photo {
    transform: scale(1.2);
}

.card-ef:hover .card-title {
    color: #E3394E !important;
}

.form-group {
    margin-bottom: 1rem !important;
}

.btn:disabled,
.btn[disabled] {
    background-color: #D4D4D4 !important;
    opacity: 1;
}

.btn-style {
    border-radius: 50px;
    outline: none !important;
    box-shadow: none !important;
    font-size: 22px;
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

    .btn-style.text-lg {
        font-size: 22px;
        /*    padding-top: 2.5px;
    padding-bottom: 2.5px;*/
    }

.btn-sm {
    min-width: 60px;
    padding-top: 0;
    padding-bottom: 0;
}

.btn-main {
    background: linear-gradient(90deg, #FF9686 0%, #CE2921 50%, #FF3E50 100%), linear-gradient(90deg, #F56C57 0%, #EF3446 100%), linear-gradient(91deg, #FEB548 -10.09%, #F522CE 52.04%, #9035DD 113.96%);
    color: #FFF !important;
}

    .btn-main:hover {
        background: #dc4701;
    }

.btn-main2 {
    background: linear-gradient(90deg, #F56C57 0%, #EF3446 100%);
    color: #FFF !important;
}

    .btn-main2:hover {
        background: #dc4701;
    }

.btn-main-shadow {
    background: linear-gradient(90deg, #FF9686 0%, #CE2921 50%, #FF3E50 100%), linear-gradient(90deg, #F56C57 0%, #EF3446 100%), linear-gradient(91deg, #FEB548 -10.09%, #F522CE 52.04%, #9035DD 113.96%);
    box-shadow: 0px 2.78px 3.707px 0px rgba(0, 0, 0, 0.10);
    color: #FFF !important;
}

    .btn-main-shadow:hover {
        background: #dc4701;
    }


.btn-light-main {
    color: #D80000 !important;
    border: 1px solid #FC5000;
}

    .btn-light-main:hover {
        color: #FFF !important;
        background-color: #FC5000;
    }

.btn-green {
    background-color: #14AE5C !important;
    color: #FFF !important;
}

    .btn-green:hover {
        background-color: #228B22 !important;
    }

.btn-light-green {
    border: 1px solid #14AE5C;
    color: #14AE5C !important;
}

    .btn-light-green:hover {
        background-color: #14AE5C;
        color: #FFF !important;
    }

.btn-qr::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background: url(../images/qrcode-white.png);
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    margin-bottom: 0;
}

.btn-light-orange {
    color: #D80000 !important;
    border: 1px solid #D80000;
}

    .btn-light-orange:hover {
        color: #FFF !important;
        background-color: #D80000;
    }

.btn-light-red {
    color: #D80000 !important;
    border: 1px solid #D80000;
}

    .btn-light-red:hover {
        color: #FFF !important;
        background-color: #D80000;
    }

.btn-light-blue {
    color: #0F75BC !important;
    border: 1px solid #0F75BC;
}

    .btn-light-blue:hover {
        color: #FFF !important;
        background-color: #0F75BC;
    }

.btn-gray {
    background-color: #8B8B8B;
    color: #FFF !important;
}

    .btn-gray:hover {
        background-color: #696969;
    }

.btn-otp {
    width: 315px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.btn-action.disable {
    pointer-events: none;
}

    .btn-action.disable img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        opacity: 0.5;
        filter: alpha(opacity = 50);
    }

.btn-effect img {
    transition: all 0.1s linear;
}

.btn-effect:hover img {
    transform: scale(1.1)
}

.btn-search {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

    .btn-search .search-ic {
        display: block;
        background-image: url(../images/icon/search-white.png);
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.img-menu-event {
    margin-top: -30px;
}

.bg-gray {
    background: #F1F1F1;
}

.c-base {
    color: #8B8B8B !important;
}

.c-main {
    background: linear-gradient(90deg, #F46655 0%, #EF3747 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.c-red-gradient {
    background: linear-gradient(90deg, #F56C57 0%, #EF3446 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.c-red-crimson {
    color: #F00 !important;
}

.c-gray-dark {
    color: #333 !important;
}

.c-gray-dark2 {
    color: #323232 !important;
}

.c-orange {
    color: #ED5224 !important;
}

.c-bluelight {
    color: #5DCAD9 !important;
}

.c-blue {
    color: #0F75BC !important;
}

.c-blue2 {
    color: #0A74BB !important;
}

.c-green {
    color: #14AE5C !important;
}

.c-orange {
    color: #FF9F00 !important;
}

.c-red {
    color: #D80000 !important;
}

.c-red-dark {
    color: #CE2C39 !important;
}

.c-red-dark2 {
    color: #ED1C24 !important;
}

.c-vanilla {
    color: #FECA8D !important;
}

.c-pinklight {
    color: #ffb1b1 !important;
}

.bg-green {
    background-color: #14AE5C !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-25 {
    font-size: 25px !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-koulen {
    font-family: "Koulen", "Prompt", sans-serif !important;
}

.font-prompt {
    font-family: "Prompt", sans-serif !important;
}

.font-notosansthai {
    font-family: "Noto Sans Thai", sans-serif !important;
}

.font-dm-sans {
    font-family: "DM Sans" !important;
}

.font-athiti {
    font-family: "Athiti", sans-serif !important;
}

.font-Lexend {
    font-family: "Lexend", Noto Sans Thai !important;
}

.text-wrap1 {
    word-break: break-word;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.text-wrap2 {
    word-break: break-word;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-wrap3 {
    word-break: break-word;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text-indent {
    text-indent: 15px;
}

.line-height-normal {
    line-height: normal !important;
}

.border-top {
    border-top: 1px solid #E0E0E0 !important;
}

.h-40px {
    height: 40px;
}

.wsp-normal {
    white-space: normal;
}

.lh-normal {
    line-height: normal;
}

.topic-line {
    font-size: 32px;
}

    .topic-line::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/topic-line.png);
        background-repeat: no-repeat;
        background-size: 5px;
        width: 5px;
        height: 43px;
        margin-right: 10px;
        margin-bottom: 2px;
    }

    .topic-line.orange::before {
        background-image: url(../images/topic-line-orange.png);
    }

    .topic-line.blue::before {
        background-image: url(../images/topic-line-blue.png);
    }

.form-label {
    margin-bottom: 5px;
}

.form-control::placeholder {
    color: #BBBBBB;
    opacity: 1; /* Firefox */
}

.form-control::-ms-input-placeholder { /* Edge 12 -18 */
    color: #BBBBBB;
}

.form-control, .form-select {
    border-radius: 20px;
    border: 1px solid #CFCFCF;
    font-size: 20px;
    height: 40px;
}

    .form-control:focus, .form-select:focus {
        border-color: #FC5000;
        box-shadow: 0 0 0 0.25rem rgb(252 80 0 / 25%);
    }

textarea.form-control {
    height: auto !important;
}

.form-select {
    background-image: url(../images/icon/arrow-down.png);
    background-size: 14px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-select-length {
    width: 75px;
    padding-top: 0;
    padding-bottom: 0;
    height: 30px;
}

.form-check-input {
    margin-top: 0;
}

.form-check, .form-switch {
    margin-bottom: 0;
}

    .form-check:not(.form-switch) .form-check-input:checked {
        background-color: #FFF;
        border-color: #CDCDCD;
        background-image: url(../images/icon/check-green.png) !important;
        background-size: 14px 10px;
    }

.form-check-input:focus {
    border-color: #CDCDCD;
    box-shadow: 0 0 0 0.25rem rgb(102 187 106 / 25%);
}

.form-switch .form-check-input {
    box-shadow: none;
    border-color: #C3C3C3;
    float: none;
}

    .form-switch .form-check-input:checked {
        background-color: #14AE5C;
        border-color: #14AE5C;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

        .form-switch .form-check-input:checked:focus {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        }

    .form-switch .form-check-input:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    }

.form-control.otp {
    border-radius: 4px;
    width: 45px;
    height: 65px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #0F75BC;
}

.input-group-datepicker {
    position: relative;
}

    .input-group-datepicker .calendar-ic {
        display: block;
        background-image: url(../images/icon/calendar-orange.png);
        background-size: 15px;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        z-index: 3;
        cursor: pointer;
        pointer-events: none;
    }

.input-group-search {
    position: relative;
}

    .input-group-search::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/search.png);
        background-repeat: no-repeat;
        background-size: 18px;
        width: 18px;
        height: 18px;
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .input-group-search .form-control {
        padding-left: 40px;
    }

/* สำหรับ Chrome, Safari, Edge (webkit) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* สำหรับ Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.datepicker {
    padding: .375rem .75rem;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
    background-color: #FC5000 !important;
    background-image: none !important;
    color: #FFFFFF !important;
}

.border-code {
    border-radius: 60px;
    background: rgba(15, 117, 188, 0.10);
    padding: 10px;
    font-size: 35px;
    font-weight: 500;
}

.modal-style .modal-content {
    border-radius: 15px;
    box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15);
}

.modal-seat {
    margin-top: 45px;
}

    .modal-seat .btn-close {
        background-image: url(../images/icon/close02.png);
        background-repeat: no-repeat;
        background-size: 25px;
        width: 25px;
        height: 25px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        opacity: 1;
        box-shadow: none;
    }

    .modal-seat .modal-content {
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }

    .modal-seat .img-seat {
        margin-top: 15px;
    }

.modal-policy .modal-content {
    border-radius: 50px;
    border: 5px solid rgba(255, 132, 132, 0.56);
    background: #FFF;
    box-shadow: 7px 11px 5.9px 0px rgba(0, 0, 0, 0.14);
}

.modal-policy .btn-close {
    background-image: url(../images/icon/close04.png);
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    opacity: 1;
    box-shadow: none;
}

.modal-policy .modal-body .modal-scroll {
    height: 400px;
    overflow-y: auto;
}

    /* Custom scrollbar สำหรับ Chrome, Edge, Safari */
    .modal-policy .modal-body .modal-scroll::-webkit-scrollbar {
        width: 4px; /* ความกว้างของ scrollbar แนวตั้ง */
        height: 10px; /* ความสูงของ scrollbar แนวนอน */
    }

    .modal-policy .modal-body .modal-scroll::-webkit-scrollbar-track {
        background: transparent; /* พื้นหลังของ track (ราง) */
    }

    .modal-policy .modal-body .modal-scroll::-webkit-scrollbar-thumb {
        background: #D9D9D9; /* ตัว scrollbar (หัวแม่มือ) */
        border-radius: 5px;
    }

.modal-policy .text-paragraph {
    text-indent: 30px;
}

.btn-information {
    color: #333 !important;
    font-family: "IBM Plex Sans Thai";
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
}

    .btn-information::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/info.png);
        background-repeat: no-repeat;
        background-size: 14px;
        width: 14px;
        height: 14px;
        margin-right: 5px;
        margin-bottom: 2px;
    }

    .btn-information:hover {
        text-decoration: none;
    }

.dividing-line {
    position: relative;
    padding-left: 15px;
    margin-left: -5px;
}

    .dividing-line::before {
        content: "";
        display: block;
        border-left: 1px dashed #FC5000;
        /*    background-image: url(../images/dividing-line.png);*/
        background-repeat: no-repeat;
        /*    background-size: 16px 72px;
    width: 16px;
    height: 72px;*/
        width: 1px;
        height: 100%;
        position: absolute;
        /*    top: -15px;*/
        top: 5px;
        left: 7px;
    }

    .dividing-line:last-child::before {
        height: calc(100% - 14px);
    }

    .dividing-line::after {
        content: "";
        display: block;
        background-image: url(../images/dividing-bullet.png);
        background-repeat: no-repeat;
        background-color: #fff;
        background-size: 14px;
        width: 14px;
        height: 14px;
        position: absolute;
        top: 5px;
        left: 0;
        z-index: 1;
    }

.dividing-group .dividing-line:last-child {
    margin-bottom: 25px !important;
}

.header-backend {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.10);
    padding: 15px 25px;
    position: relative;
}

    .header-backend .header-inner {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .header-backend .dropdown-user .btn-user {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 700;
        color: #000 !important;
        padding: 0;
    }

        .header-backend .dropdown-user .btn-user .user-img {
            display: block;
            background-repeat: no-repeat !important;
            background-position: 50% !important;
            background-size: cover !important;
            width: 32px;
            height: 32px;
            border-radius: 50% !important;
            position: relative;
            margin-right: 12px;
        }

    .header-backend .dropdown-user .dropdown-item {
        color: #000000 !important;
    }

    .header-backend .noti-bullet {
        display: block;
        background: url(../images/icon/bell-bullet.png);
        background-repeat: no-repeat;
        background-size: 25px;
        width: 25px;
        height: 25px;
        position: relative;
    }

.side-menu {
    border-radius: 30px;
    background: #FDFDFF;
    box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.10);
    width: 265px;
    min-height: 94vh;
    padding-top: 15px;
    padding-bottom: 15px;
    float: left;
    transition: all .5s;
}

    .side-menu .side-logo {
        text-align: center;
    }

    .side-menu .side-menu-body {
        padding-top: 15px;
        padding-bottom: 15px;
    }

        .side-menu .side-menu-body ul {
            list-style-type: none;
            padding-left: 0;
        }

            .side-menu .side-menu-body ul li a {
                color: #000 !important;
                font-weight: 500;
                padding: 10px 20px;
                display: block;
            }

                .side-menu .side-menu-body ul li a::before {
                    content: "";
                    display: inline-block;
                    vertical-align: middle;
                    background-image: url(../images/icon/menu.png);
                    background-repeat: no-repeat;
                    background-size: 20px;
                    width: 20px;
                    height: 20px;
                    margin-right: 20px;
                }

            .side-menu .side-menu-body ul li:hover {
                background: linear-gradient(90deg, #F46655 0%, #EF3747 100%);
                transition: all .5s;
            }

                .side-menu .side-menu-body ul li:hover a {
                    color: #FFF !important;
                }

                    .side-menu .side-menu-body ul li:hover a::before {
                        background-image: url(../images/icon/menu-white.png);
                    }

            .side-menu .side-menu-body ul li.active {
                background: linear-gradient(90deg, #F46655 0%, #EF3747 100%);
            }

                .side-menu .side-menu-body ul li.active a::before {
                    background-image: url(../images/icon/menu-white.png);
                }

                .side-menu .side-menu-body ul li.active a {
                    color: #FFF !important;
                }

    /*start side menu toggle*/
    .side-menu .sidebar-dropdown {
        position: relative;
    }

        .side-menu .sidebar-dropdown .sidebar-submenu {
            display: none;
        }

            .side-menu .sidebar-dropdown .sidebar-submenu ul {
                margin-top: 0;
            }

        .side-menu .sidebar-dropdown > a {
            position: relative;
        }

            .side-menu .sidebar-dropdown > a:after {
                content: "";
                background-image: url(../images/icon/arrow-down-gray.png);
                background-repeat: no-repeat;
                background-size: contain;
                width: 14px;
                height: 8px;
                display: inline-block;
                vertical-align: middle;
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
            }

        .side-menu .sidebar-dropdown.active > a:after, .side-menu .sidebar-dropdown:hover > a:after {
            background-image: url(../images/icon/arrow-down-white.png);
        }

        .side-menu .sidebar-dropdown.active .sidebar-submenu {
            display: block;
        }

    .side-menu .sidebar-submenu ul li {
        padding-left: 20px;
    }

        .side-menu .sidebar-submenu ul li a {
            color: #FFF !important;
        }

            .side-menu .sidebar-submenu ul li a::before {
                display: none;
            }

    .side-menu .sidebar-submenu li:hover a, .side-menu .sidebar-submenu li.active a {
        color: #484848 !important;
    }
/*end side menu toggle*/

#hamburger {
    width: 30px;
    height: 20px;
    position: absolute;
    left: 15px;
    z-index: 2;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

    #hamburger span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #808080;
        border-radius: 3px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

        #hamburger span:nth-child(1) {
            top: 0px;
        }

        #hamburger span:nth-child(2) {
            top: 8px;
        }

        #hamburger span:nth-child(3) {
            top: 16px;
        }

    #hamburger.open span:nth-child(1) {
        top: 8px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    #hamburger.open span:nth-child(2) {
        opacity: 0;
        left: -60px;
    }

    #hamburger.open span:nth-child(3) {
        top: 8px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

.pagination {
    margin-top: 10px;
}

.page-item {
    padding-left: 2px;
    padding-right: 2px;
}

    .page-item .page-link {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        outline: none;
        box-shadow: none;
        padding: 5px;
        text-align: center;
    }

    .page-item.active .page-link {
        background-color: #EB454C;
        border-color: #EB454C;
        color: #FFF !important;
    }

.page-link {
    border: 0;
}

.page-item:first-child .page-link {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

.page-item:last-child .page-link {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.page-item:first-child .page-link, .page-item.extra .page-link {
    background-color: #EBE9F2;
    border-color: #EBE9F2;
    color: #A28B96 !important;
}

.pagination-at-green .page-item.active .page-link {
    background-color: #14AE5C;
    border-color: #14AE5C;
}

.table-main th {
    background-color: #EB454C !important;
    color: #FFF;
    border-right: 1px solid #D4D4D4;
    vertical-align: middle;
}

    .table-main th:first-child {
        border-left: 1px solid #D4D4D4;
    }

.table-main td {
    border-right: 1px solid #D4D4D4;
}

    .table-main td:first-child {
        border-left: 1px solid #D4D4D4;
    }

.table-main.fixed {
    table-layout: fixed;
    margin-top: 0 !important;
}

.table-responsive::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #E3E3E3;
    border-radius: 30px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #EF3747;
    border-radius: 30px;
}

.table-sticky {
    overflow-y: auto;
    max-height: 296px;
}

    .table-sticky th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .table-sticky thead tr {
        height: 50px;
    }

    .table-sticky tbody tr {
        height: 60px;
    }

.badge-gray {
    border-radius: 72px;
    background-color: #D6D6D6;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    padding: 10px;
    white-space: normal;
}

    .badge-gray.md {
        height: 40px;
    }

.badge-blue-head {
    background-color: #FC5000;
    padding: 10px 20px;
    color: #FFF;
    font-size: 26px;
    font-weight: 700;
    position: relative;
    padding-left: 55px;
    text-align: left;
}

    .badge-blue-head::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/menu-white.png);
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        margin-right: 15px;
        position: absolute;
        top: 12px;
        left: 20px;
    }

.text-chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rounded-10px {
    border-radius: 10px;
}

.rounded-20px {
    border-radius: 20px;
}

.status-bullet {
    position: relative;
    padding-left: 12px;
}

    .status-bullet:before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 5px;
    }

    .status-bullet.yellow:before {
        background-color: #FF9F00;
    }

    .status-bullet.green:before {
        background-color: #14AE5C;
    }

    .status-bullet.red:before {
        background-color: #D80000;
    }

.ValidDateError {
    color: #D80000 !important;
    font-size: 16px;
}

.booth-item {
    border-radius: 50px;
    border: 1px solid #0A74BB;
    background-color: #FFF;
    height: 45px;
    font-size: 20px;
    color: #0A74BB !important;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
}

    .booth-item.disable {
        border-radius: 50px;
        border: 1px solid #CFCFCF;
        background-color: rgba(184, 184, 184, 0.30);
        pointer-events: none;
        color: #BBB !important;
    }

    .booth-item.sm {
        height: 40px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .booth-item.next {
        padding-right: 25px;
    }

        .booth-item.next::before {
            content: "";
            background-image: url(../images/icon/arrow-next.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: 12px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%)
        }

.modal-landing .modal-dialog {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    width: 90%;
    border-radius: 20px;
    overflow: hidden;
}

.modal-landing {
    overflow-y: hidden;
}

    /*.modal-landing .modal-dialog {
    max-height: 80vh;
}*/

    .modal-landing .modal-content {
        border-radius: 20px;
        overflow: hidden;
        max-width: 405px;
    }

        .modal-landing .modal-content img {
            width: 100%; /* ให้กว้างเต็มพื้นที่ */
            max-width: 405px;
            max-height: 720px; /* กำหนดความสูงสูงสุด */
            object-fit: cover; /* ครอบภาพให้เต็ม */
            /*aspect-ratio: 9 / 16;
    width: 100%;*/ /* หรือกำหนดขนาดตามต้องการ */
            /*object-fit: cover;*/ /* ปรับการแสดงผล */
            /*max-height: 80vh;*/
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

    .modal-landing .lSPager.lSpg {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        margin-left: auto !important;
        margin-right: auto !important;
    }

        .modal-landing .lSPager.lSpg > li a {
            width: 15px !important;
            height: 15px !important;
        }

        .modal-landing .lSPager.lSpg > li a {
            background-color: #afaaaa !important;
        }

        .modal-landing .lSPager.lSpg > li:hover a, .modal-landing .lSPager.lSpg > li.active a {
            background-color: #222222 !important;
        }

    .modal-landing .btn-close {
        background-image: url(../images/icon/close02.png);
        background-repeat: no-repeat;
        background-size: 40px;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 10px;
        right: 10px;
        opacity: 1;
        box-shadow: none !important;
    }

    .modal-landing .form-check-btm {
        /*    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);*/
        margin-top: 5px;
        max-width: 405px;
    }

.border-ticket-icon {
    height: 40px;
    border-radius: 50px;
    border: 1px solid #14AE5C;
    color: #14AE5C;
    font-size: 22px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .border-ticket-icon::before {
        content: "";
        display: inline-block;
        background-image: url(../images/icon/ticket-couple.png);
        background-repeat: no-repeat;
        background-size: 25px;
        width: 25px;
        height: 25px;
        margin-right: 20px;
    }

.group-quantity {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 72px;
    font-weight: 500;
    color: #7A7A7A;
}

    .group-quantity .quantity-num {
        border: solid 1px #D6D6D6 !important;
        outline: none !important;
        width: 100px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 25px 0;
        text-align: center;
        border-radius: 10px;
    }

    .group-quantity .quantity-control {
        cursor: pointer;
    }

.ticket-item {
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative;
}

    .ticket-item::after {
        content: "";
        display: block;
        background-image: url(../images/dashed-ticket.png);
        background-repeat: no-repeat;
        background-size: 100% 1px;
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
    }


    .ticket-item:first-child {
        padding-top: 0;
    }

    .ticket-item:last-child {
        padding-bottom: 15px;
    }

        .ticket-item:last-child::after {
            display: none;
        }

.emoji-item .emoji-img.first {
    display: block;
    background-image: url(../images/emo01.png);
    background-repeat: no-repeat;
    background-size: 40px 41px;
    width: 40px;
    height: 41px;
}

    .emoji-item .emoji-img.first.active {
        background-image: url(../images/emo01-at.png);
    }

.emoji-item .emoji-img.second {
    display: block;
    background-image: url(../images/emo02.png);
    background-repeat: no-repeat;
    background-size: 46px 41px;
    width: 46px;
    height: 41px;
}

    .emoji-item .emoji-img.second.active {
        background-image: url(../images/emo02-at.png);
    }

.emoji-item .emoji-img.third {
    display: block;
    background-image: url(../images/emo03.png);
    background-repeat: no-repeat;
    background-size: 43px 41px;
    width: 43px;
    height: 41px;
}

    .emoji-item .emoji-img.third.active {
        background-image: url(../images/emo03-at.png);
    }

.emoji-item .emoji-img.fourth {
    display: block;
    background-image: url(../images/emo04.png);
    background-repeat: no-repeat;
    background-size: 43px 41px;
    width: 43px;
    height: 41px;
}

    .emoji-item .emoji-img.fourth.active {
        background-image: url(../images/emo04-at.png);
    }

.emoji-item .emoji-img.fifth {
    display: block;
    background-image: url(../images/emo05.png);
    background-repeat: no-repeat;
    background-size: 43px 41px;
    width: 43px;
    height: 41px;
}

    .emoji-item .emoji-img.fifth.active {
        background-image: url(../images/emo05-at.png);
    }

.rating-item .star-img {
    display: block;
    background-image: url(../images/star.png);
    background-repeat: no-repeat;
    background-size: 35px 34px;
    width: 35px;
    height: 34px;
}

    .rating-item .star-img.active {
        background-image: url(../images/star-at.png);
    }


.poll-select-item {
    display: block;
    cursor: pointer;
}

    .poll-select-item input[type="radio"] {
        display: none;
    }

    .poll-select-item .poll-select-inner {
        display: block;
        border-radius: 50px;
        border: 1px solid #CFCFCF;
        background: #FFF;
        padding: 10px 15px;
        color: #333 !important;
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .poll-select-item:hover input[type="radio"] + .poll-select-inner,
    .poll-select-item input[type="radio"]:checked + .poll-select-inner {
        background: rgba(252, 80, 0, 0.20);
        color: #FC5000 !important;
        border: 1px solid #FC5000;
    }

.select2-container--default .select2-selection--multiple {
    border: 1px solid #CFCFCF !important;
    font-size: 20px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #0F75BC !important;
    box-shadow: 0 0 0 0.25rem rgb(15 117 188 / 25%) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0F75BC !important;
}

.select2-container .select2-selection--multiple {
    min-height: 40px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 6px !important;
}

.award-group .award-item::after {
    content: "";
    display: block;
    background-image: url(../images/dashed-ticket.png);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    width: 100%;
    height: 1px;
    margin-top: 30px;
}

.award-group .award-item:last-child::after {
    display: none;
    margin-top: 0;
}

.award-wrapper {
    background: linear-gradient(180deg, #00325C 0%, #0F75BC 100%), linear-gradient(180deg, #0057FF -30.31%, #5566FD 100%), linear-gradient(180deg, #FDDBD1 -30.31%, #FFF 100%);
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

    .award-wrapper::before {
        content: "";
        background-image: url(../images/curtain-left.png);
        background-repeat: no-repeat;
        background-size: 310px 100%;
        background-position: top left;
        width: 310px;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .award-wrapper::after {
        content: "";
        background-image: url(../images/curtain-right.png);
        background-repeat: no-repeat;
        background-size: 310px 100%;
        background-position: top right;
        width: 310px;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        right: 0;
    }

    .award-wrapper .award-container {
        width: 80%;
    }

        .award-wrapper .award-container::before {
            content: "";
            background-image: url(../images/podium.png);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            width: 1102px;
            height: 222px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

.award-content {
    position: relative;
    z-index: 2;
    padding-bottom: 10%;
}

.award-wrapper h1 {
    color: #FFF;
    text-align: center;
    text-shadow: 0px 2px 24px rgba(0, 50, 92, 0.76);
    font-size: 100px;
    font-weight: 900;
    line-height: 0.8;
}

.award-wrapper h2 {
    color: #FFC700;
    font-size: 50px;
    font-weight: 700;
    line-height: 0.8;
}

.award-wrapper p {
    color: #FFF;
    font-size: 20px;
    font-weight: 400;
}

.award-group {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 570px;
    scrollbar-width: thin;
    scrollbar-color: #173F9A #08609B;
}

    .award-group::-webkit-scrollbar {
        width: 2px;
    }

    .award-group::-webkit-scrollbar-track {
        background: #08609B;
    }

    .award-group::-webkit-scrollbar-thumb {
        background: #173F9A;
    }

.award-box {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.25);
    color: #FFF;
    font-size: 42px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*    padding-top: 14px;*/
    /*    padding-bottom: 14px;*/
    height: 75px;
}

.name-item, .name-item-winner {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-random {
    display: inline-block;
    vertical-align: middle;
    background-image: url(../images/box-random.png);
    background-repeat: no-repeat;
    background-size: 30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    filter: drop-shadow(0px 2px 9px rgba(0, 0, 0, 0.20));
    transition: transform .2s;
    position: relative;
}

    .btn-random:hover {
        transform: scale(1.2);
    }

    .btn-random::before {
        content: "";
        display: block;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .btn-random.disabled {
        pointer-events: none;
        cursor: not-allowed;
        filter: grayscale(100%) opacity(50%);
    }

        .btn-random.disabled:hover {
            transform: none;
        }

.extended-row.bg-gray {
    background: #F9F9F9;
}

.extended-row .extended-item {
    border-radius: 5px;
    border: 1px solid #C8C8C8;
    background: #FFF;
    padding: 15px 20px;
    margin-bottom: 8px;
}

.btn-toggle .btn-toggle-ic {
    display: inline-block;
    vertical-align: middle;
    background-image: url(../images/icon/search-orange.png);
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
}

.btn-toggle.active .btn-toggle-ic {
    background-image: url(../images/icon/search-orange-at.png);
    background-size: 38px;
    width: 38px;
    height: 38px;
}

.qr-pending {
    position: relative;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

    .qr-pending::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1;
        pointer-events: none;
    }

    .qr-pending .qr-pending-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        font-size: 35px;
        font-weight: 500;
        color: #FFF;
    }

.line-date {
    display: block;
    background: #CDCDCD;
    width: 18px;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }

    .card-login h1 {
        font-size: 60px;
    }
}

@media (min-width: 992px) {
    #hamburger {
        display: none;
    }

    .content-area {
        margin-left: 295px;
    }

    .card-ranking {
        height: 140px;
        padding-left: 120px;
    }

        .card-ranking .card-img {
            width: 165px;
            height: 165px;
        }

        .card-ranking .img-wrapper {
            width: 165px;
            height: 165px;
        }
}

@media (max-width: 991px) {
    .side-menu {
        width: 235px;
        position: absolute;
        z-index: 1;
        left: -500px;
    }

        .side-menu.active {
            left: 15px;
        }

    .side-menu-overlay {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        transition: all 0.3s linear;
        display: none;
    }

        .side-menu-overlay.active {
            display: block;
        }

    .card-main .card-title {
        font-size: 22px;
    }

    .card-main .card-text {
        font-size: 14px;
    }

    .header-backend .header-brand img {
        width: 100px;
    }
}


@media (max-width: 575px) {
    .award-wrapper h1 {
        font-size: 65px;
    }

    .award-wrapper h2 {
        font-size: 32px;
    }

    .award-box {
        font-size: 28px;
    }
}

.box-info-chart {
    max-width: 280px;
    border: 1px solid #D9D9D9;
    border-radius: 12px;
}

    .box-info-chart .info-chart-item {
        border-bottom: 1px dashed #D9D9D9;
        padding-bottom: 10px;
    }

        .box-info-chart .info-chart-item:last-child {
            border-bottom: 0;
        }

.bullet-chart {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

    .bullet-chart.sm {
        width: 12px;
        height: 12px;
    }

.text-chart-total {
    font-size: 60px;
    line-height: 0.6;
    color: #FC5000;
}

@media (min-width: 576px) {
    .text-chart-total {
        font-size: 80px;
    }
}

.profile-menu-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 150px);
}

.btn-back-home {
    border: 1px solid #D80000;
    background: #FFF;
    color: #D80000;
    font-size: 22px;
    font-weight: 500;
}

.history-group .history-list {
    font-size: 14px;
    border-bottom: 1px solid #D3D3D3;
    padding: 15px 20px;
}

.history-list .history-datetime {
    color: #767676;
    font-style: italic;
    font-weight: 300;
    line-height: 142.857%;
}

.history-list .history-topic {
    font-size: 20px;
    line-height: 100%;
}

.history-list .history-text {
    font-size: 16px;
    line-height: 142.857%;
}

.history-group .history-list:last-child {
    border-bottom: 0;
}

.history-list .btn-light-main {
    font-size: 15px;
    font-weight: 500;
    height: 25px;
    line-height: 25px;
}

.select-ic {
    width: 18px;
    height: 20px;
    margin-right: 5px;
    margin-bottom: 5px;
}

/* ทำให้ Select2 ปรับขนาดตามความกว้างขององค์ประกอบที่มันอยู่ */
.select-ic-wrapper .select2-container {
    width: 100% !important; /* ทำให้ Select2 ยืดเต็มความกว้าง */
}

/* ถ้าคุณต้องการตั้งค่าให้ Select2 dropdown ปรับขนาดตามขนาดของหน้าจอ */
.select-ic-wrapper .select2-container--default .select2-dropdown {
    width: 100% !important;
}

/* ปรับสไตล์ Select2 */
.select-ic-wrapper .select2-container--default .select2-selection--single {
    border-radius: 50px !important;
    border: 1px solid #14AE5C !important;
    height: 40px !important;
}

.select-ic-wrapper .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: .75rem;
    padding-right: .75rem;
}

/* ปรับสีข้อความภายใน */
.select-ic-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    color: #14AE5C;
    font-size: 22px;
    font-weight: 500;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ปรับขนาดและสีของตัวเลือกใน dropdown */
.select-ic-wrapper .select2-container--default .select2-results__option {
    padding: 10px;
    font-size: 16px;
    color: #333;
}

/* เปลี่ยนสีพื้นหลังเมื่อ hover */
.select-ic-wrapper .select2-container--default .select2-results__option--highlighted {
    background-color: #007bff !important;
    color: white !important;
}

/* เปลี่ยนสีเส้นขอบเมื่อ select ถูกเปิด */
.select-ic-wrapper .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #ff5722;
}

/* เปลี่ยนสีลูกศร (dropdown arrow) */
.select-ic-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

/* เปลี่ยนรูปลูกศรด้วยภาพ */
.select-ic-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url(../images/icon/arrow-down-green.png);
    background-size: 14px 8px;
    background-repeat: no-repeat;
    width: 14px;
    height: 8px;
    right: .75rem;
}

    .select-ic-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none !important;
    }

.select-ic-wrapper .select2-dropdown {
    border: 1px solid #14AE5C !important;
}

.select2-option-green {
    background-color: #f2f0f0 !important;
}

.select2-dropdown-green {
    border: 1px solid #14AE5C !important;
}

.btn-collapse {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow-anchor: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
    cursor: pointer;
    padding-bottom: 0 !important;
}

    .btn-collapse::after {
        flex-shrink: 0;
        width: 20px;
        height: 11px;
        margin-left: auto;
        content: "";
        display: block;
        background-image: url(../images/icon/arrow-down.png);
        background-repeat: no-repeat;
        background-size: 20px 11px;
        background-position: center;
        transition: transform .2s ease-in-out;
    }

    .btn-collapse[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

.border-bottom-dashed {
    border-bottom: 1px dashed #D4D4D4;
}

.border-bottom-white {
    border-bottom: 1px solid #FFF !important;
}

.modal-login * {
    color: #666;
}

.modal-login .modal-content {
    border-radius: 18px;
    background: linear-gradient(0deg, #CF1E35 -33.72%, #FFF 34.78%), #FFF;
    box-shadow: 0px 0.927px 31.511px 0px rgba(0, 0, 0, 0.35);
}

.modal-login .modal-dialog {
    max-width: 335px;
    margin-left: auto;
    margin-right: auto;
}

.modal-login .btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
    background: url(../images/icon/close.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
    width: 28px;
    height: 28px;
    opacity: 1;
    outline: none !important;
}

.modal-login .form-label {
    font-size: 20px;
    font-weight: 900;
    color: #797979;
}

.modal-login .form-control {
    font-size: 20px;
    border: 2px solid #DADADA;
}

.modal-login .input-group-ic {
    position: relative;
}

    .modal-login .input-group-ic .form-control {
        padding-left: 30px;
    }

    .modal-login .input-group-ic [class^="ic-"] {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .modal-login .input-group-ic .ic-user {
        display: block;
        background-image: url(../images/icon/user02.png);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: contain;
        width: 10px;
        height: 10px;
    }

    .modal-login .input-group-ic .ic-key {
        display: block;
        background-image: url(../images/icon/key02.png);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: contain;
        width: 10px;
        height: 10px;
    }

.modal-login .btn-style {
    font-weight: bold;
    font-size: 24px;
}

.modal-login .btn-gray-gradient {
    border: 2px solid #FFF;
    background: linear-gradient(180deg, #FFF 0%, #CBCBCB 100%);
    box-shadow: 0px 1.355px 1.355px 0px rgba(0, 0, 0, 0.25);
}

    .modal-login .btn-gray-gradient:hover {
        background: linear-gradient(180deg, #FFF 0%, #888888 100%);
    }

.modal-login .btn-link:hover {
    text-decoration: underline !important;
}

.modal-login .btn-google, .modal-login .btn-line {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .modal-login .btn-google::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/google.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .modal-login .btn-line::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/line.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

.modal-login .or-line-gray span {
    margin: 0 10px;
    color: #666;
    letter-spacing: 0.927px;
    font-size: 16px;
}

.modal-login .or-line-gray::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background: #666;
    width: 35px;
    height: 1px;
}

.modal-login .or-line-gray::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background: #666;
    width: 35px;
    height: 1px;
}

.modal-login .btn-link {
    color: #F00 !important;
}

.modal-login .btn-main {
    background: linear-gradient(90deg, #FF9686 0%, #CE2921 50%, #FF3E50 100%), linear-gradient(90deg, #F56C57 0%, #EF3446 100%), linear-gradient(91deg, #FEB548 -10.09%, #F522CE 52.04%, #9035DD 113.96%);
    box-shadow: 0px 2.78px 3.707px 0px rgba(0, 0, 0, 0.10);
}

.bg-wrapper {
    background-image: url(../images/bg-emos-red.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5%;
    padding-bottom: 5%;
    min-height: 100vh;
}

    .bg-wrapper .wrapper-content {
        max-width: 375px;
        margin-left: auto;
        margin-right: auto;
    }

        .bg-wrapper .wrapper-content h1 {
            font-size: 40px;
        }

        .bg-wrapper .wrapper-content .form-control {
            border: 1px solid #FFF;
            background: rgba(255, 255, 255, 0.80);
            box-shadow: 0px 1.391px 1.391px 0px rgba(0, 0, 0, 0.25);
            color: #A94B4B;
            font-size: 18px;
            font-weight: 700;
        }

            .bg-wrapper .wrapper-content .form-control::placeholder {
                color: #ce8787;
            }

        .bg-wrapper .wrapper-content .form-otp {
            width: 40px;
            height: 50px;
            border-radius: 10px;
            border: 1px solid #FFF;
            background: rgba(255, 255, 255, 0.80);
            box-shadow: 0px 2.905px 2.905px 0px rgba(0, 0, 0, 0.25);
            margin-left: 5px;
            margin-right: 5px;
            text-align: center;
            font-size: 40px;
            font-weight: 700;
            line-height: 50px;
        }

.bg-wrapper-evtk {
    background-image: url(../images/bg-wrapper02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    /*    min-height: 100vh;*/
    position: relative;
    padding-top: 30px;
    padding-bottom: 0;
}

/* สำหรับ Chrome, Safari, Edge, Opera */
.form-otp::-webkit-outer-spin-button,
.form-otp::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* สำหรับ Firefox */
.form-otp {
    -moz-appearance: textfield;
}

.border-qr {
    border-radius: 10px;
    border: 1px solid #000;
    width: 290px;
    max-width: 100%;
}

.text-price-sp {
    font-size: 30px;
}

@media (min-width: 576px) {
    .bg-wrapper .wrapper-content h1 {
        font-size: 60px;
    }

    .text-price-sp {
        font-size: 54px;
    }
}

@media (max-width: 575px) {
    .img-arrow-sp {
        width: 20px;
    }
}

.title-evtk {
    font-size: 38px;
    color: #FFF;
}

.card-evtk-container {
    /*    height: calc(100vh - 195px);*/
    height: calc(100vh - 228px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 4.5rem;
}

    .card-evtk-container .image-wrapper {
        position: absolute;
        top: -60px;
        aspect-ratio: 2 / 1; /* หรือ 360 / 180 */
        width: 100%;
        max-width: 360px;
        overflow: hidden;
        border-radius: 20px;
        background: #C4C4C4;
        box-shadow: 0px 1.526px 1.526px 0px rgba(0, 0, 0, 0.25);
        z-index: 2;
    }

        .card-evtk-container .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

.card-evtk {
    border-radius: 55px 55px 0px 0px;
    background: linear-gradient(180deg, #FFF 0%, #FFE7E7 100%);
    box-shadow: 0px 1.452px 1.452px 0px rgba(0, 0, 0, 0.25);
    padding: 8.5rem 1.5625rem 1.5625rem 1.5625rem;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    flex: 1;
    width: 600px;
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .card-evtk .card-content {
        font-size: 14px;
        color: #5F5E5E;
        height: 92%;
        padding-bottom: 20px;
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .card-evtk.with-btm {
        height: 100%;
    }

        .card-evtk.with-btm .card-content {
            height: 100%;
            padding-bottom: 150px;
        }

.card-evtk-btm {
    background: linear-gradient(180deg, #FFF 0%, #FFE7E7 100%);
    box-shadow: 0px 0.45px 14.45px rgba(0, 0, 0, 0.15);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 800px;
    max-width: 100%;
    padding: 20px 25px;
    border-radius: 25px 25px 0px 0px;
    margin-left: auto;
    margin-right: auto;
}

.card-evtk-container.lg {
    /*    min-height: calc(100vh - 195px);*/
    min-height: calc(100vh - 228px);
    height: auto;
}

    .card-evtk-container.lg .card-evtk {
        padding-top: 25rem;
    }

    .card-evtk-container.lg .image-wrapper {
        aspect-ratio: 4 / 5;
        max-width: 340px;
    }

    .card-evtk-container.lg .card-evtk .card-content {
        height: 76%;
    }

.seat-card {
    background: #FFF;
    padding: 30px 20px 180px;
    /*    height: calc(100vh - 150px);*/
    height: calc(100vh - 185px);
    width: 800px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

    .seat-card .seat-container {
        display: flex;
        flex-direction: column;
        overflow: auto;
        white-space: nowrap;
        text-align: center;
        height: 100%;
        padding: 15px 0;
    }

    .seat-card .seat-group {
        display: inline-block;
        vertical-align: middle;
        white-space: nowrap;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .seat-card .seat-name {
        display: inline-block;
        vertical-align: middle;
        text-transform: uppercase;
        margin-left: 4px;
        margin-right: 4px;
        color: #C4C4C4;
        font-size: 16px;
    }

    .seat-card .seat-row {
        display: inline-block;
        vertical-align: middle;
    }

    .seat-card .seat-item {
        width: 26px;
        height: 26px;
        margin-left: 4px;
        margin-right: 4px;
        display: inline-block;
        vertical-align: middle;
        background-color: #C6273B;
        cursor: pointer;
        position: relative;
    }

        .seat-card .seat-item.selected {
            background-color: #E1E1E1
        }

        .seat-card .seat-item.selecting {
            background-color: #E08D97;
        }

            .seat-card .seat-item.selecting::before {
                content: "";
                background-image: url(../images/icon/check-circle.png);
                background-repeat: no-repeat;
                background-size: 15px;
                width: 15px;
                height: 15px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

    .seat-card .card-btm h1 {
        font-size: 28px;
        line-height: 82.143%;
    }

    .seat-card .card-btm p {
        font-size: 20px;
    }

.form-group-line .form-item {
    position: relative;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

    .form-group-line .form-item::after {
        content: "";
        background-image: url(../images/dashed02.png);
        background-repeat: no-repeat;
        background-size: 100% 1px;
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
    }

    .form-group-line .form-item:last-child {
        padding-bottom: 0;
    }

        .form-group-line .form-item:last-child::after {
            display: none;
        }

    .form-group-line .form-item h2 {
        font-size: 24px;
    }

.ticket-card {
    background-color: #FFF;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    margin: 15px 0;
    font-family: "Prompt", sans-serif;
    font-size: 14px;
    padding: 20px 0;
    margin: 50px auto 100px;
    position: relative;
}

    .ticket-card::before {
        content: "";
        background-image: url(../images/card-stub.png);
        background-repeat: no-repeat;
        background-size: 100% 35px;
        background-position: center;
        width: 100%;
        height: 35px;
        position: absolute;
        top: -34px;
        transform: rotate(180deg);
        transform-origin: center;
    }

    .ticket-card::after {
        content: "";
        background-image: url(../images/card-stub.png);
        background-repeat: no-repeat;
        background-size: 100% 35px;
        background-position: center;
        width: 100%;
        height: 35px;
        position: absolute;
        bottom: -34px;
    }

    .ticket-card h1 {
        font-size: 24px;
    }

.ticket-card-inner {
    padding: 0 20px;
}

.ticket-card .ticket-info-group {
    position: relative;
    padding: 15px 0;
    margin: 15px 0;
}

    .ticket-card .ticket-info-group::before {
        content: "";
        background-image: url(../images/dashed02.png);
        background-repeat: no-repeat;
        background-size: 100% 1px;
        width: 100%;
        height: 1px;
        position: absolute;
        top: 0;
    }

    .ticket-card .ticket-info-group::after {
        content: "";
        background-image: url(../images/dashed02.png);
        background-repeat: no-repeat;
        background-size: 100% 1px;
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
    }

.ticket-card .img-qr {
    padding: 0 50px;
}

.slider-card-wrapper .lSSlideOuter .lSPager.lSpg > li a {
    box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.10);
}

@media (max-width: 375px) {
    .card-evtk-container .image-wrapper, .card-evtk-container.lg .image-wrapper {
        max-width: 320px;
    }
}

.title-extra {
    /*    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.);*/
    font-size: 45px;
    letter-spacing: 6.6px;
    color: #E3394E;
    /*    background: linear-gradient(90deg, #fd492c 0%, #EF3446 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
}

    .title-extra.text-white {
        background: transparent;
        -webkit-text-fill-color: #FFF;
    }

    .title-extra.with-heart::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/heart.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 48px;
        height: 38px;
        margin-right: 10px;
    }

    .title-extra.with-heart::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/heart.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 48px;
        height: 38px;
        margin-left: 10px;
    }

/*coin station*/
.coin-wrapper {
    border-radius: 30px;
    border: 2px solid #FDD;
    opacity: 0.8;
    background: linear-gradient(180deg, #FFF 0%, #E8E8E8 100%);
    box-shadow: 0px 4.915px 7.47px 0px rgba(0, 0, 0, 0.14);
}

.nav-select-coin {
    font-weight: 500;
    font-size: 20px;
    font-family: "DM Sans";
    color: #B2B2B2;
    width: 100%;
    border-radius: 20px;
    border: 3px solid #FDD;
    background: linear-gradient(180deg, #FFF 0%, #E8E8E8 100%);
    padding: 5px 10px;
    box-shadow: none !important;
    outline: none !important;
}

.nav-pills-coin .nav-link {
    color: #B2B2B2;
    font-family: "DM Sans";
    font-size: 26px;
    font-weight: 500;
    border: 0;
    border-radius: 50rem;
    background-color: transparent;
    padding: 2px 20px;
    outline: none !important;
}

    .nav-pills-coin .nav-link.active, .nav-pills-coin .show > .nav-item .nav-link {
        background: #e64835;
    }

.box-coin {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    border-radius: 20px;
    border: 3px solid #FDD;
    background: linear-gradient(180deg, #FFF 0%, #E8E8E8 100%);
    box-shadow: 3.895px 6.492px 3.441px 0px rgba(242, 113, 113, 0.25);
    cursor: pointer;
    position: relative;
    padding: 20px 5px;
    transition: all 0.1s linear;
}

    .box-coin img {
        height: 55px;
        object-fit: contain;
    }

    .box-coin h1 {
        color: #B2B2B2;
        font-family: "DM Sans";
        font-size: 20px;
        line-height: 43.133px;
        transition: all 0.1s linear;
    }

    .box-coin .text-price {
        color: #B2B2B2;
        font-family: "DM Sans";
        font-size: 14px;
        line-height: 130.278%;
        border-radius: 28px;
        background: #FFF;
        box-shadow: 0px 2.597px 2.597px 0px rgba(0, 0, 0, 0.25);
        padding: 10px;
        margin-left: 5px;
        margin-right: 5px;
        transition: all 0.1s linear;
    }

    .box-coin:hover {
        background: linear-gradient(180deg, #F56C57 0%, #EF3446 100%);
    }

        .box-coin:hover h1 {
            color: #FFF;
        }

        .box-coin:hover .text-price {
            color: #C73541;
            background: linear-gradient(90deg, #F4E6A0 0%, #F5C568 100%);
            text-shadow: 0px 2.597px 2.597px rgba(0, 0, 0, 0.25);
        }

.daily-fyi {
    border-radius: 30px;
    border: 1px solid rgba(140, 140, 140, 0.32);
    background: rgba(0, 0, 0, 0.41);
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

    .daily-fyi .daily-fyi-content {
        width: 600px;
        max-width: 90%;
        border-radius: 40px;
        border: 3px solid #FDD;
        background: linear-gradient(180deg, #F56C57 0%, #EF3446 100%);
        box-shadow: 3.814px 6.357px 3.369px 0px rgba(242, 113, 113, 0.25);
        color: #FFF;
        font-family: "Prompt", sans-serif;
        font-size: 14px;
        text-transform: uppercase;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .daily-fyi .text-num-coin {
        font-size: 50px;
        letter-spacing: 2px;
    }

    .daily-fyi .img-coin {
        position: relative;
        top: -6px;
    }

    .daily-fyi .btn-gold {
        border-radius: 30px;
        background: linear-gradient(90deg, #F4E6A0 0%, #F5C568 100%);
        box-shadow: 0px 2.715px 2.715px 0px rgba(0, 0, 0, 0.25);
        color: #C73541;
        font-size: 24px;
        font-weight: 600;
        width: 200px;
    }

.item-daily-group {
    min-height: 520px;
}

.item-daily {
    border-radius: 28px;
    border: 2px solid #FDD;
    background: linear-gradient(180deg, #FFF 0%, #E8E8E8 100%);
    box-shadow: 2.407px 4.011px 2.126px 0px rgba(242, 113, 113, 0.25);
    text-align: center;
    padding: 5px 10px 15px;
}

    .item-daily .item-daily-inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    .item-daily p {
        font-family: "DM Sans";
        font-size: 14px;
        color: #B2B2B2;
    }

    .item-daily .text-status {
        font-family: "Prompt";
        font-size: 14px;
        color: #2AD352;
    }

    .item-daily.active {
        background: linear-gradient(180deg, #F56C57 0%, #EF3446 100%);
    }

        .item-daily.active p {
            color: #FFF;
        }

    .item-daily .btn-receive {
        font-family: "Prompt";
        font-size: 14px;
        color: #C73541 !important;
        text-shadow: 0px 1.604px 1.604px rgba(0, 0, 0, 0.25);
        background: linear-gradient(90deg, #F4E6A0 0%, #F5C568 100%);
        box-shadow: 0px 1.604px 1.604px 0px rgba(0, 0, 0, 0.25);
        width: 85px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
    }

    .item-daily.disible.expired .text-status {
        color: #ABABAB;
    }

    .item-daily.disible .btn-receive {
        background: #FFF;
        color: #ABABAB !important;
        text-shadow: none;
        box-shadow: none;
        pointer-events: none;
    }

.coin-wrapper .title-daily {
    color: #e64835;
    font-size: 35px;
    letter-spacing: 3.083px;
}

.coin-wrapper .title-daily-sm {
    color: #e64835;
    font-size: 25px;
    letter-spacing: 3.083px;
}

.coin-wrapper .text-daily {
    color: #414141;
    font-size: 14px;
    line-height: 130.278%;
}

.countdown-group {
    text-align: center;
}

    .countdown-group .countdown-text {
        color: #C73541;
        font-size: 26px;
    }

    .countdown-group .countdown-item {
        display: inline-block;
        vertical-align: middle;
        border-radius: 8px;
        border: 2px solid #EF3446;
        background: #FFF;
        text-align: center;
        width: 60px;
        height: 80px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

        .countdown-group .countdown-item h1 {
            font-family: "IBM Plex Sans Thai";
            font-size: 30px;
            line-height: 1;
            background: linear-gradient(90deg, #F56C57 0%, #EF3446 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-top: 5px;
        }

        .countdown-group .countdown-item p {
            font-family: "IBM Plex Sans Thai";
            font-size: 14px;
            color: #333;
        }

    .countdown-group .seperate {
        font-family: "IBM Plex Sans Thai";
        display: inline-block;
        vertical-align: middle;
        font-size: 50px;
        color: #C73541;
        padding-bottom: 10px;
    }

.btn-back-home {
    border: 3px solid #FDD;
    background: linear-gradient(180deg, #F56C57 0%, #EF3446 100%);
    box-shadow: 0.9px 3.49px 13.44px 0px rgba(242, 113, 113, 0.25);
    color: #FFF !important;
    font-size: 22px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 50px;
}

.nav-tabs-history {
    justify-content: center;
    border-bottom: 0;
}

    .nav-tabs-history .nav-link {
        color: rgba(255, 255, 255, 0.30);
        font-size: 16px !important;
        font-weight: 400 !important;
        font-family: "Prompt", sans-serif;
        margin: 2px;
    }

        .nav-tabs-history .nav-item.show .nav-link, .nav-tabs-history .nav-link.active {
            color: #C82C41;
        }

.list-item {
    padding-top: 30px;
    padding-bottom: 30px;
}

    .list-item .list-image {
        width: 100%;
        aspect-ratio: 2 / 1;
        background-color: #ccc;
        border-radius: 10px;
    }

    .list-item h1, .list-item p {
        font-size: 18px;
        font-family: "Prompt", sans-serif;
    }

    .list-item .text-date {
        font-size: 20px;
        font-family: 'db_helvethaica_x';
        color: #767676;
    }

    .list-item .text-status {
        font-size: 14px;
        font-family: "Prompt", sans-serif;
    }

        .list-item .text-status .waiting {
            color: #E88B00;
        }

        .list-item .text-status .success {
            color: #14AE5C;
        }

    .list-item .btn-main2 {
        font-size: 22px !important;
        font-weight: 700 !important;
        min-width: 175px;
        height: 40px;
    }

.list-group .list-item {
    border-bottom: 1px solid #D3D3D3;
}

    .list-group .list-item:last-child {
        border-bottom: none;
    }

/*my ticket*/
.list-group-tk .list-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
}

.list-group-tk .list-item .list-image {
     width: 145px;
    /*    width: 123px;*/
    max-width: 100%;
    aspect-ratio: 123 / 157;
    flex-shrink: 0;
    background-color: #ccc;
    border-radius: 10px;
    overflow: hidden;
}

.list-group-tk .list-item .list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-group-tk .list-content {
    flex: 1;
}

.list-group-tk .list-item h1 {
    font-family: 'db_helvethaica_x';
    font-size: 28px;
    margin-bottom: 0;
}

.list-group-tk .list-item p {
    font-family: 'db_helvethaica_x';
    font-size: 18px;
    margin-bottom: 0;
}

.list-group-tk .list-item .text-date {
    font-family: 'db_helvethaica_x';
    font-size: 20px;
    color: #767676;
}

.list-group-tk .list-item .text-status {
    font-family: 'db_helvethaica_x';
    font-size: 14px;
}

.list-group-tk .list-item .text-status .waiting {
    color: #E88B00;
}

.list-group-tk .list-item .text-status .success {
    color: #14AE5C;
}

.list-group-tk .list-item .btn-main2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    min-width: 175px;
    box-shadow: none !important;
    padding-top: 0;
    padding-bottom: 0;
}

.list-group-tk .list-item {
    border-bottom: 1px solid #D3D3D3;
}

.list-group-tk .list-item:last-child {
    border-bottom: none;
}
/*end my ticket*/

.profile-sec {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 0.999px 13.98px 0px rgba(0, 0, 0, 0.25);
}

    .profile-sec .card-header {
        padding: 30px 20px;
        background-color: #EB454C;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .profile-sec .card-title {
        font-family: "DM Sans";
        font-size: 30px;
        line-height: 1.46;
        letter-spacing: 0.48px;
        text-align: center;
        color: #FFFFFF;
        margin-bottom: 0;
        text-transform: uppercase;
    }

    .profile-sec .btn-pf-ticket {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px !important;
        border: 1px solid #FFF;
        color: #FFF;
        font-size: 16px !important;
        height: 35px;
        padding-left: 15px;
        padding-right: 15px;
        background: transparent;
    }

    .profile-sec .btn-pf-history {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px !important;
        border: 1px solid #FFF;
        color: #FFF;
        font-size: 16px !important;
        height: 35px;
        padding-left: 15px;
        padding-right: 15px;
        background: transparent;
    }

    .profile-sec .btn-pf-ticket:before {
        content: "";
        display: block;
        width: 17px;
        height: 17px;
        background-image: url("../images/icon/ticket-white.png");
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 8px;
    }

    .profile-sec .btn-pf-history:before {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        background-image: url("../images/icon/clock-white.png");
        background-repeat: no-repeat;
        background-size: contain;
    }

.border-profie {
    border-radius: 50%;
    width: 166px;
    height: 166px;
    padding: 3px;
    text-align: center
}

.profile-sec .upload-label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.profile-sec .img-profile {
    width: 160px;
    height: 160px;
    border: 3px solid #B2B2B2;
    border-radius: 50%;
    background-color: #B2B2B2;
}

.profile-sec .upload-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    color: #333;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-sec .profile-coin-group {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .profile-sec .profile-coin-group .profile-coin-item {
        border-right: 1px solid rgba(233, 233, 233, 0.40);
        padding-left: 15px;
        padding-right: 15px;
    }

        .profile-sec .profile-coin-group .profile-coin-item:last-child {
            border-right: none;
        }

.profile-sec .coin {
    font-size: 32px;
    line-height: 1.46;
    letter-spacing: 0.48px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.profile-sec .coin-silver {
    display: inline-block;
    background: url(../images/icon/coin-sliver.png);
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.profile-sec .coin-gold {
    display: inline-block;
    background: url(../images/icon/coin-gold.png);
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.profile-sec .text-coin {
    font-family: "Prompt", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.46;
    letter-spacing: 0.48px;
    color: rgba(255, 255, 255, 0.49);
    margin-top: -10px;
    display: block;
}

.bg-img-none {
    background-image: none !important;
}

.badge-coin {
    background: #FFF;
    border-radius: 50rem;
    padding: 5px 10px;
    min-width: 125px;
    height: 40px;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}

    .badge-coin p {
        font-family: "Noto Sans Thai", sans-serif;
        font-size: 10px;
        color: rgba(52, 52, 52, 0.70);
    }

    .badge-coin h2 {
        color: #343434;
        font-family: "Noto Sans Thai", sans-serif;
        font-size: 16px;
        line-height: 1;
    }

.img-banner-top5 {
    border-radius: 20px;
    border: 5px solid #FFF;
    box-shadow: 10px 8px 8.1px 0 rgba(255, 160, 160, 0.84);
    overflow: hidden;
}

.border-candidate {
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.58);
}

    .border-candidate .card-candidate {
        border-radius: 30px;
        background: #FFF;
        box-shadow: 2.331px 3.496px 3.088px 0 rgba(204, 43, 49, 0.46);
        overflow: hidden;
    }

.modal-vote .modal-content {
    border-radius: 30px;
}

.modal-vote .btn-close {
    background: url(../images/icon/close.png);
    background-repeat: no-repeat;
    background-size: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    opacity: 1;
    position: absolute;
    right: 20px;
    top: 20px;
}

.modal-vote .card-candidate .photo-thumb img {
    border-radius: 0 !important;
    box-shadow: none !important;
    aspect-ratio: unset !important;
}

.modal-vote .line-separate {
    color: #414141;
    font-size: 22px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

    .modal-vote .line-separate::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background: #414141;
        width: 100%;
        height: 1px;
        margin-right: 10px;
    }

    .modal-vote .line-separate::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background: #414141;
        width: 100%;
        height: 1px;
        margin-left: 10px;
    }

.vote-item {
    border-radius: 20px;
    background: #CB2727;
    box-shadow: 0 2.203px 2.203px 0 rgba(237, 83, 83, 0.25);
}

    .vote-item .vote-text {
        font-size: 18px;
    }

        .vote-item .vote-text.with-heart::before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            background-image: url(../images/icon/heart-white.png);
            background-repeat: no-repeat;
            background-size: 35px;
            width: 35px;
            height: 35px;
            margin-right: 8px;
        }

.coin-border {
    border-radius: 20px;
    border: 1px solid #D83737;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2.203px 2.203px 0 rgba(237, 83, 83, 0.25);
    padding: 5px 5px 10px;
}

.coin-col {
    position: relative;
}

    .coin-col::before {
        content: "";
        width: 2px;
        height: 85%;
        background: rgba(104, 104, 104, 0.53);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
    }

    .coin-col:last-child::before {
        display: none;
    }

    .coin-col.sm::before {
        width: 1px;
        height: 50%;
        top: 10%;
        transform: none;
    }

.coin-btn {
    color: #323232 !important;
    font-size: 12px;
    text-align: center
}

    .coin-btn img {
        transition: transform .2s linear;
    }

    .coin-btn p {
        font-size: 12px;
        transition: color .2s linear;
    }

    .coin-btn:hover img {
        transform: scale(1.1);
    }

    .coin-btn:hover p {
        color: #E3394E !important;
    }

.coin-col.sm .coin-btn img {
    opacity: 0.3;
}

.coin-col.sm .coin-btn.active img {
    opacity: 1;
}

.form-vote {
    border-radius: 15px;
    border: 1px solid #414141;
    background: rgba(255, 255, 255, 0.85);
    padding: 20px 15px;
    color: #CC2B31 !important;
    font-family: "DM Sans";
    font-size: 30px;
    font-weight: 500;
}

.btn-vote {
    border-radius: 20px;
    border: 2px solid #E1E1E1;
    background: linear-gradient(180deg, #FFF 0%, #CBCBCB 100%);
    box-shadow: 0 2.203px 2.203px 0 rgba(0, 0, 0, 0.25);
    padding-left: 20px;
    padding-right: 20px;
    color: #CC2B31 !important;
    font-family: "DM Sans";
    font-size: 22px;
    font-weight: 500;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn-vote:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        background-image: url(../images/icon/heart-circle.png);
        background-repeat: no-repeat;
        background-size: 30px;
        width: 30px;
        height: 30px;
        margin-right: 8px;
        transition: transform .2s linear;
    }

    .btn-vote:hover::before {
        transform: scale(1.1);
    }

@media (min-width: 576px) {
    .nav-tabs-history .nav-link {
        font-size: 22px !important;
    }

    .list-item h1, .list-item p {
        font-size: 20px;
    }

    .list-item .text-date {
        font-size: 22px;
    }

    .list-item .text-status {
        font-size: 16px;
    }

    .list-item .btn-main2 {
        font-size: 24px !important;
    }

    .profile-sec .coin {
        font-size: 36px;
    }

    .vote-item {
        border-radius: 28px;
    }

        .vote-item .vote-text {
            font-size: 28px;
        }

        .vote-item .coin-border {
            border-radius: 28px;
        }
}

@media (min-width: 768px) {
    /* my ticket*/
    .list-group-tk .list-item:first-child {
        padding-top: 0 !important;
    }

    .list-group-tk .list-item {
        padding: 30px 0;
    }
    /* end my ticket*/
}

@media (min-width: 992px) {
    .coin-wrapper {
        border-radius: 65px;
    }

    .nav-pills-coin .nav-link {
        padding: 8px 30px;
    }

    .box-coin {
        border-radius: 45px;
    }

        .box-coin img {
            height: 85px;
        }

        .box-coin h1 {
            font-size: 33px;
        }

        .box-coin .text-price {
            font-size: 20px;
            margin-left: 25px;
            margin-right: 25px;
        }

    .col-item-daily {
        max-width: 14.28%;
        flex: 0 0 14.28%;
    }

    .coin-wrapper .title-daily {
        font-size: 62px;
    }

    .coin-wrapper .title-daily-sm {
        font-size: 42px;
    }

    .coin-wrapper .text-daily {
        color: #414141;
        font-size: 16px;
        line-height: 130.278%;
    }

    .countdown-group .countdown-item {
        width: 90px;
        height: 110px;
    }

        .countdown-group .countdown-item h1 {
            font-size: 50px;
        }

        .countdown-group .countdown-item p {
            font-size: 20px;
        }

    .item-daily-group {
        min-height: 365px;
    }

    .daily-fyi {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .title-extra {
        /*        font-size: 132px;*/
        font-size: 60px;
    }

    .img-banner-top5 {
        border-radius: 40px;
    }

    .border-candidate {
        border-radius: 30px;
    }
}

@media (max-width: 1200px) {
    .modal-vote .modal-dialog.modal-dialog-centered {
        margin-left: 1rem;
        margin-right: 1rem;
        width: auto;
    }
}

@media (max-width: 991px) {
    .daily-fyi .daily-fyi-content {
        margin: 5% auto 0;
    }
}

@media (max-width: 767px) {
    /* my ticket*/
    .list-group-tk .list-item {
        flex-direction: column;
        gap: 5px;
    }

    .list-group-tk .list-image {
        width: 140px;
    }
    /* end ticket*/
}

@media (max-width: 575px) {
    .vote-item .coin-btn img {
        width: 40px;
        height: 40px;
    }

    .vote-item .vote-text.with-heart::before {
        background-size: 30px;
        width: 30px;
        height: 30px;
    }

    .modal-vote .box-btm .coin-btn {
        width: 30px;
        height: 30px;
    }

    .modal-vote .form-vote {
        font-size: 25px;
    }

    .modal-vote .box-btm .btn-vote {
        font-size: 16px;
    }

        .modal-vote .box-btm .btn-vote:before {
            background-size: 20px;
            width: 20px;
            height: 20px;
            margin-right: 2px;
        }
    /* my ticket*/
    .list-group-tk .list-item .list-image {
        width: 150px;
    }

    .list-group-tk .list-item .btn-main2 {
        min-width: 150px;
    }
    /* end my ticket*/
}

.group-border-dashed .border-item {
    border-bottom: 1px dashed #CDCDCD;
    padding-top: 15px;
    padding-bottom: 5px;
}

    .group-border-dashed .border-item:first-child {
        padding-top: 0;
    }

    .group-border-dashed .border-item:last-child {
        border-bottom: 0;
    }

.group-border-dashed .btn-add {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.card-main.dtb .photo-thumb {
    aspect-ratio: 17 / 20;
    width: 100%;
    padding-bottom: 0;
}

.card.dtb {
    border: 1px solid #B1B1B1;
    box-shadow: none;
    overflow: hidden;
}

.card-main.dtb .card-title {
    font-size: 16px;
    line-height: normal;
}

.card-title-dtb {
    font-size: 18px;
}

.card-package {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: 1px solid #ABABAB;
    background: url(../images/bg-package.jpg);
    background-size: cover;
    box-shadow: 0 4px 21px 0 rgba(0, 0, 0, 0.15);
    aspect-ratio: 1 / 1;
    font-family: "Lexend", Noto Sans Thai;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: #333 !important;
    padding: 10px;
    transition: transform .2s;
}

.card-package-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: 1px solid #373737;
    background: linear-gradient(180deg, rgba(142, 95, 164, 0.20) 0%, rgba(118, 41, 148, 0.20) 100%), #FFF;
    box-shadow: 0 4px 21px 0 rgba(0, 0, 0, 0.15);
    font-family: "Lexend", Noto Sans Thai;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    color: #333 !important;
    padding: 15px;
    transition: transform .2s;
}

    .card-package:hover, .card-package-type:hover {
        transform: scale(1.1);
    }

    .card-package-type h2 {
        font-size: 30px;
    }

    .card-package-type .card-btm {
        display: contents;
    }

        .card-package-type .card-btm:before {
            content: "";
            display: block;
            background: #333;
            width: 90%;
            height: 1px;
            margin: 15px 0;
        }

    .card-package-type.unavailable {
        border-color: rgba(55, 55, 55, 0.30);
        background: linear-gradient(0deg, rgba(138, 138, 138, 0.20) 0%, rgba(138, 138, 138, 0.20) 100%), #FFF;
        color: #9A9A9A !important;
    }

.input-group-copy {
    width: 430px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

    .input-group-copy .form-control {
        border-radius: 5px;
        border: 1px solid #9A9A9A;
        color: #333;
        font-family: Athiti;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.28px;
        background-color: #FFF !important;
    }

    .input-group-copy .btn-copy {
        background: linear-gradient(90deg, #F56C57 0%, #EF3446 100%), #FFF;
        border: 1px solid #EF3747;
        font-family: Athiti;
        font-size: 18px;
        font-weight: 600;
        color: #FFF;
        width: 110px;
        height: 40px;
        cursor: pointer;
        justify-content: center;
        transition: all 0.35s ease;
    }

        .input-group-copy .btn-copy:hover {
            opacity: 0.8;
        }

.border-qr-dtb {
    border-radius: 10px;
    border: 1px solid #333;
    overflow: hidden;
    width: 360px;
    max-width: 90%;
}

.btn-back-dtb {
    transition: transform .2s;
}

    .btn-back-dtb:hover {
        transform: translateX(-5px);
    }

.group-dashed {
    margin-top: 15px;
}

    .group-dashed .group-dashed-item {
        border-top: 1px dashed #B9B9B9;
        padding-top: 15px;
        padding-bottom: 15px;
    }

@media (min-width: 576px) {
    .card-title-dtb {
        font-size: 26px;
    }

    .card-package {
        font-size: 24px;
        padding: 15px;
    }
}

@media (min-width: 992px) {
    .col-package {
        flex: 0 0 auto;
        width: 20%;
    }

    .card-package-type {
        font-size: 20px;
    }

        .card-package-type h2 {
            font-size: 36px;
        }
}

@media (min-width: 1399px) {
    .card-package {
        font-size: 25px;
    }
}

@media (max-width: 575px) {
    .btn-back-dtb img {
        width: 35px;
    }
}

.puzzle-box {
    border: 1px solid #dee2e6;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    overflow: visible;
    width: fit-content;
}

.puzzle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 5px;
}

    .puzzle-list li {
        background: #f0f0f0;
        cursor: move;
        /*        overflow: hidden;*/
        /*        transition: transform 0.1s ease;*/
    }

        /*        .puzzle-list li:active {
            transform: scale(1);
        }*/

        .puzzle-list li img {
            display: block;
            width: 100px;
            height: 100px;
        }

.puzzle-box .btn-verify {
    background: #2196f3 !important;
    color: #fff !important;
}

    .puzzle-box .btn-verify:hover {
        background: #1878c4 !important;
    }

.ui-state-highlight {
    border: 2px dashed #2196f3;
    background: #e3f2fd;
}

.puzzle-list li,
.ui-sortable-helper,
.ui-state-highlight {
    list-style: none !important;
}

.puzzle-list.cols-1 img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.puzzle-list.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.puzzle-list.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 575px) {
    .puzzle-list li img {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 375px) {
    .puzzle-list li img {
        width: 60px;
        height: 60px;
    }
}