#page_detail_dev {
    font-family: Kanit
}

body {
    color: #333 !important
}

h5 {
    font-size: 26px;
    line-height: 120%
}

.font-topic {
    font-size: 28px;
    font-weight: 500;
    padding-bottom: 10px;
    margin-bottom: 10px;
    /*border-bottom:2px solid red*/
}

.image-wrap {
    width: 100%;
    height: 50vw;
    margin: 0 auto;
    overflow: hidden;
    position: relative
}

.image-wrap img {
    width: 100%;
    animation: move 60s ease;
    -ms-animation: move 60s ease;
    -webkit-animation: move 60s ease;
    -0-animation: move 60s ease;
    -moz-animation: move 60s ease;
    position: absolute
}

#slideshow {
    margin: 0 auto;
    position: relative
}

#slideshow>div {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 10px
}

#slideshow>div>center>img {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4)
}

h4 {
    font-size: 24px
}

.textdetail {
    line-height: 130% !important
}

strong {
    font-weight: 600
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background: #2196f347 !important
}

.modal-dialog {
    position: relative;
    width: auto;
    top: 0 !important;
    left: auto;
    margin: 10px
}

@-webkit-keyframes move {
    0 {
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
        -o-transform-origin: bottom left;
        transform-origin: bottom left;
        transform: scale(1.0);
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -o-transform: scale(1.0);
        -moz-transform: scale(1.0)
    }

    50% {
        transform: scale(1.2);
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        -moz-transform: scale(1.2)
    }

    100% {
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
        -o-transform-origin: bottom left;
        transform-origin: bottom left;
        transform: scale(1.0);
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -o-transform: scale(1.0);
        -moz-transform: scale(1.0)
    }
}

.modal-header {
    background-color: #e80707 !important
}

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

.table-responsive {
    overflow-x: unset
}

.tix_price {
    text-align: center
}

.no-padding {
    padding: 0 !important
}

.tab-content {
    padding: 19px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 0 3px 3px 3px;
    border-top: none
}

.tab-header>li>a {
    color: #333;
    font-size: 18px;
    padding: 9px 17px 10px;
    background: #fff;
    border: 1px solid #eaeaea
}

.tab-header>li>a:hover {
    color: #fff;
    background: #0186c8;
    border-color: #0186c8
}

.tab-header .active>a {
    color: #fff !important;
    background: #e80707 !important border-color:#e80707 !important font-size:18px
}

.programe-tag {
    border: 1px solid #eaeaea;
    padding: 15px 20px !important;
    background-color: #fff;
    border-top: none
}

.programe-tab {
    padding-top: 15px
}

.programe-itinerary {
    padding: 0 0 15px 0;
    font-size: 16px;
    font-family: tahoma;
    line-height: 28px
}

.programe-itinerary-title {
    margin-bottom: 4px;
    color: #269300;
    font-weight: bold;
    font-size: 18px
}

.programe-itinerary-date label {
    background-color: #fff;
    border: 1px solid #269300;
    border-radius: 5px;
    padding: 5px 10px;
    margin-right: 20px;
    margin-bottom: 0;
    color: #269300;
    font-weight: bold
}

.programe-padding-date:not(:last-child) {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 15px
}

.programe-itinerary-date-hr {
    position: relative
}

.programe-itinerary-date-hr::before {
    background: #eaeaea;
    border-radius: 2px;
    bottom: -30px;
    content: " ";
    left: -14px;
    position: absolute;
    width: 1px;
    height: calc(100% + 30px)
}

.programe-itinerary-time-hr {
    position: relative
}

.programe-itinerary-time-hr::before {
    background: #eaeaea;
    border-radius: 2px;
    content: " ";
    left: -14px;
    position: absolute;
    width: 1px;
    height: calc(100% + 40px)
}

.programe-itinerary-time-hr::after {
    background: #eaeaea;
    border: 1px solid #eaeaea;
    content: " ";
    height: 1px;
    left: -14px;
    position: absolute;
    top: 10px;
    width: 11px
}

.tab-pane>.MsoNormalCxSpMiddle,
.MsoListParagraphCxSpFirst,
.MsoListParagraphCxSpMiddle,
.MsoListParagraphCxSpLast,
.MsoNormal,
.MsoListParagraph,
.MsoNormalCxSpFirst {
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 5px
}

.tab-pane>h4,
.tab-pane>h5,
.tab-pane>div>h4,
.tab-pane>div>h5 {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 5px;
    margin-bottom: 5px
}

.tab-pane>h3,
.tab-pane>div>h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    margin-top: 5px;
    margin-bottom: 20px
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background-color: #eaeaea !important;
    color: #aaaaaa !important
}

.value_btn {
    background: white;
    border: 1px solid #e80707;
    border-radius: 5px;
    margin: 0 5px 0 5px;
    width: 25px;
    height: 25px;
    font-size: 20px;
    color: #555;
    text-align: center;
    vertical-align: middle;
    line-height: 10px
}

.value_btn:hover,
.value_btn:active,
.value_btn:focus {
    background-color: #e80707;
    color: white
}

.pax_ticket {
    border: transparent !important;
    font-size: 18px !important;
    color: #e80707 !important;
    margin: 0 !important;
    width: 20px !important
}

.box {
    width: 100%;
    height: auto;
    border-color: #DCDCDC;
    border-style: solid
}

h5.detail_tour span {
    padding-right: 10px;
    color: #e80707;
    font-size: 24px;
    font-weight: 500
}

h5.detail_tour:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    border-top: 3px solid #e80707;
    z-index: -1
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    color: rgb(85, 85, 85);
    cursor: default;
    background-color: #e80707;
    border: 1px solid #e80707;
    font-size: 18px !important
}

.nav-tabs {
    border-bottom: 0
}

.nav-tabs>li>a:hover {
    border-color: #eaeaea;
    background-color: #fff;
    color: #e80707
}

.nav>li>a {
    position: relative;
    display: block;
    padding-right: 10px;
    padding: 10px
}

.nav-tabs li {
    padding-right: 0;
    padding-left: 0
}

.tab-content input[type=text] {
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px
}

.col-50 {
    -ms-flex: 50%;
    flex: 50%;
    margin-top: 15px
}

.middlecc {
    width: 100%;
    text-align: center
}

.middlecc input[type="radio"] {
    display: none
}

.middlecc input[type="radio"]:checked+.boxcc {
    border-bottom: 4px solid #e80707
}

.middlecc input[type="radio"]:checked+.boxcc span {
    color: white;
    transform: translateY(8px)
}

.middlecc input[type="radio"]:checked+.boxcc span:before {
    transform: translateY(0);
    opacity: 1
}

.middlecc .boxcc {
    width: 75px;
    height: 60px;
    background-color: #fff;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    cursor: pointer;
    position: relative
}

.middlecc .boxcc:active {
    transform: translateY(10px)
}

.middlecc .boxcc span {
    position: absolute;
    transform: translate(0, 12px);
    left: 0;
    right: 0;
    font-size: 35px
}

.middle {
    width: 100%
}

.middle h1 {
    font-family: "Dax", sans-serif;
    color: #fff
}

.middle input[type="radio"] {
    display: none
}

.middle input[type="radio"]:checked+.box1 {
    border: 2px solid #e80707;
    border-radius: 10px
}

.middle input[type="radio"]:checked+.box1 span {
    color: white;
    transform: translateY(31px);
    text-align: center
}

.middle input[type="radio"]:checked+.box1 span:before {
    transform: translateY(0);
    opacity: 1;
    text-align: center
}

.middle .box1 {
    width: 150px;
    height: 130px;
    background-color: #fff;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    cursor: pointer;
    position: relative
}

.middle .box1:active {
    transform: translateY(10px)
}

.middle .box1 span {
    position: absolute;
    transform: translate(0, 37px);
    left: 0;
    right: 0;
    text-align: center
}

.middle .box1 span:before {
    font-size: 1.2em;
    font-family: FontAwesome;
    display: block;
    transform: translateY(-80px);
    opacity: 0;
    transition: all 300ms ease-in-out;
    font-weight: normal;
    color: white;
    text-align: center
}

.btn_red {
    background-color: #e80707;
    color: white;
    border: transparent;
    height: 35px;
    border-radius: 5px;
    float: right
}

.btn_red:active,
.btn_red:focus,
.btn_red:hover {
    background-color: #e80707
}

.content {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    color: #717171;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.content input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee
}

.content:hover input~.checkmark {
    background-color: #ccc
}

.content input:checked~.checkmark {
    background-color: #2196F3
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.content input:checked~.checkmark:after {
    display: block
}

.content .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

body {
    background-color: #f4f4f4 !important
}

input[type=text],
textarea.materialize-textarea,
input[type=email] {
    background-color: white;
    font-size: 14px !important
}

table {
    width: 100% !important;
    display: table
}

select {
    font-size: 14px !important
}

td {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 8px 5px !important;
    border-radius: 0 !important
}

thead {
    border-bottom: 1px solid #d0d0d0;
    font-weight: 400;
     !important;
    background: #fff !important
}


.read-more {
    text-decoration: none;
    text-align: center;
    padding: 0 0;
    display: block;
    cursor: pointer;
    border-radius: 4px;
    transition: all 400ms ease-in-out
}

.read-more:hover {
    color: #333
}

.read-more span {
    color: #e80707;
    display: block;
    font-size: 20px;
    font-weight: 800
}

.read-more span.less {
    display: none
}

.pricem {
    font-size: 15px;
    line-height: 100%;
    bottom: 0;
    position: absolute;
    right: 0
}

.boxdetail {
    font-family: roboto, kanit, Tahoma, Geneva, sans-serif !important;
    font-size: 16px;
    line-height: 100%;
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 10px;
    border-radius: 5px
}

.sub_info1 {
    color: #333;
    font-weight: 400
}

.txt-title-cr {
    font-weight: 500;
    color: #333
}

.txt-detail-cr {
    line-height: 20px;
    margin-bottom: 5px
}

.btn-lang {
    border: none;
    color: white;
    padding: 15px 15px;
    font-size: 16px;
    cursor: pointer;
    background: #e80707;
    border-radius: 5px;
    margin: 5px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2)
}

.btn-lang:hover,
.btn-lang:focus {
    background: #c01919;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 7px 0 rgba(0, 0, 0, 0.16), 0 3px 1px -1px rgba(0, 0, 0, 0.6)
}

.hl_blog {
    font-size: 16px;
    color: #333;
    font-weight: 550;
    margin-bottom: 5px
}

.hl_detail {
    margin-top: 10px;
    color: #666;
    font-weight: 350;
    line-height: 130%;
    font-size: 14px
}

.start_price {
    font-size: 36px;
    font-weight: 600;
    color: #e80707;
}

.start_price_tx {
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.use_tix_date {
    color: #e80707;
    font-size: 16px;
    font-weight: 550
}

.choose_date {
    background-color: #e80707;
    color: #FFF;
    height: 34px;
    width: 38px;
    font-size: 20px;
    text-align: center;
    padding: 3px 5px;
    border-radius: 0 4px 4px 0;
}

.warn1 {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 16px
}

.img_popup_tix {
    position: relative;
    display: block;
    overflow: hidden;
    height: 180px;
    width: 100%
}

.detail_tix {
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 0;
    color: #3e3e3e
}

.code_list {
    font-size: 14px;
    margin-bottom: 5px
}

.head_topic {
    font-size: 20px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 20px;
    color: #e80707
}

.btn_main_hover,
.btn_bill {
    background-color: #e80707;
    color: #fff
}

.btn_main_hover:hover {
    -webkit-box-shadow: 0 14px 26px -12px rgba(21, 102, 191, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(21, 102, 191, 0.2) !important;
    box-shadow: 0 14px 26px -12px rgba(21, 102, 191, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(21, 102, 191, 0.2) !important
}

.btn_bill:hover {
    -webkit-box-shadow: 0 14px 26px -12px rgba(21, 102, 191, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(21, 102, 191, 0.2) !important;
    box-shadow: 0 14px 26px -12px rgba(21, 102, 191, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(21, 102, 191, 0.2) !important
}

.btn:hover {
    background-color: #e80707 !important;
    color: #fff !important
}

td {
    font-size: 16px !important
}

.container .row {
    margin-right: 0 !important;
    margin-left: 0 !important
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    vertical-align: middle
}

.btn_dl {
    background-color: #e80707;
    color: white;
    height: 50px;
    border-radius: 5px
}

.btn_dl:hover {
    -webkit-box-shadow: 0 14px 26px -12px rgba(21, 102, 191, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(21, 102, 191, 0.2);
    box-shadow: 0 14px 26px -12px rgba(21, 102, 191, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(21, 102, 191, 0.2)
}

.btn_conti {
    margin: 15px 10px;
    background-color: #e80707;
    color: white;
    border: transparent;
    height: 35px;
    border-radius: 5px;
    width: auto;
}

.btn_cart {
    margin: 15px 10px;
    background-color: #ffffff;
    color: #e80707;
    border: 1.3px solid #e80707;
    height: 35px;
    border-radius: 5px;
    width: auto;
}

.fa-cart-plus{
    font-size:18px;
}

.btn_conti:hover {
    box-shadow: 0 14px 26px -12px rgba(191, 21, 21, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(21, 102, 191, 0.2)
}

.book_now_btn {
    background-color: #3eb750;
    color: #fff;
    padding: .475rem .75rem;
    font-size: 0.9375rem;
    line-height: 28px;
    border-radius: 0.3125rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    min-width: 2.375rem;
    cursor: pointer;
    box-shadow: 0px 0px 12px 0px rgba(62, 183, 80, 0.35);
}

.book_now_btn:hover,
.book_now_btn:active,
.book_now_btn:focus {
    color: #fff;
    background-color: #31913f !important;
    border-color: #31913f !important;
    box-shadow: 0px 0px 12px 0px rgba(62, 183, 80, 0.35);
}

label {
    font-size: 16px !important;
    color: #555 !important;
    font-weight: 500
}

.stfont {
    font-family: roboto, kanit, Tahoma, Geneva, sans-serif !important;
}
.td_header_book{
    font-size: 16px; 
    font-weight: 500; 
    border: 0px; 
    text-align: center;
}
.sum_total{
    color: #e80707; font-size: 22px!important; font-weight: 500; border: 0px; text-align: center;
}
.sum_row{
    border-bottom: 1px solid #eaeaea;
    border-top: 10px solid #eaeaea;
    border-left: 4px solid #e80707;
    background-color: #fef6f9;
}
.ticket-day {
    color: #e80707;
    font-weight: 400
}
@media (min-width:480px) {
    .modal-dialog {
        top: 0 !important
    }
}

@media (max-width:767px) {
    .programe-images li {
        margin: 0 !important;
        padding: 5px 0 0 !important
    }
}

@media (min-width:768px) {
    .programe-images li {
        margin: 0 !important;
        padding: 5px 10px 0 5px !important
    }
}

@media only screen and (max-width:992px) {
    .modal {
        width: 100%
    }
}

@media screen and (max-width:480px) {
    .btn_cart,.btn_conti {
        width:100%!important;
        margin:0!important;
        margin-bottom:10px!important;
    }
    .hidden-xs{
        display: none;
    }
    #map {
        height: 230px !important
    }

    .choose_date {
        right: 0 !important
    }

    .map_h {
        margin-top: -210px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .font-topic {
        font-size: 23px !important
    }

    .table-ticket {
        font-size: 14px;
        font-weight: 500;
        padding: 10px 15px !important
    }

    .ticket-cate {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }

    .tick-span {
        font-weight: 400;
        font-size: 14px
    }

    .ticket-day {
        color: #e80707;
        font-weight: 400;
        font-size: 14px
    }

    .name-ages {
        font-weight: 400;
        font-size: 14px !important;
        /* padding: 10px 10px !important; */
        line-height: 20px !important
    }

    .sell-text {
        /* text-align: center; */
        font-size: 16px !important;
        color: #e80707;
        font-weight: 500;
        /* padding: 10px 10px !important;
        line-height: 20px !important */
    }

    .nav-tabs li {
        width: 70px;
        text-align: center
    }


    .breadcrumb {
        padding: 5px 0 !important
    }

    .container .row {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mb_no_padding {
        padding: 0 !important
    }

    h5 {
        font-size: 21px
    }

    h4 {
        font-size: 20px !important
    }

    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: none
    }

    .swiper-container {
        height: 200px
    }

    .value_btn,
    .value_btn:hover,
    .value_btn:active,
    .value_btn:focus {
        background: white;
        border: 1px solid #e80707;
        border-radius: 5px;
        margin: 0;
        width: 21px;
        height: 21px;
        font-size: 18px;
        color: #e80707;
        text-align: center;
        vertical-align: middle;
        padding: 5px;
    }

    .pricem {
        font-size: 15px;
        line-height: 100%;
        bottom: 0;
        position: unset;
        right: 0;
        padding: 0;
    }

    .boxdetail {
        font-size: 18px;
        line-height: 100%;
        background: #fff;
        border: 1px solid #eaeaea;
        padding: 10px;
        border-radius: 5px;
        width: 100%;
        margin-top: 0px !important
    }

    .mb_mgbtm10 {
        margin-bottom: 10px !important
    }

    .start_price_tx {
        margin: 40px 10px 5px 5px !important;
        font-size: 16px !important
    }

    .start_price {
        margin-top: 26px !important
    }
}

/* @media (min-width:1200px) { */
    .modal-dialog {
        width: 45% !important;
        left: 25% !important
    }

    .table-ticket {
        font-size: 18px;
        font-weight: 500;
        padding: 15px
    }

    .ticket-cate {
        font-size: 18px;
        font-weight: 500;
        line-height: 40px
    }

    .tick-span {
        font-weight: 400
    }

    .name-ages {
        font-weight: 400
    }

    .sell-text {
        text-align: center;
        font-size: 18px !important;
        color: #e80707;
        font-weight: 500
    }
/* } */

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    /* .stticket {
        margin-top: -75px !important;
    } */
    .swiper-container {
        height: 280px !important
    }
    .boxdetail {
        margin-top: -180px !important
    }

    #map {
        height: 240px !important
    }

    .choose_date {
        height: 34px;
        width: 42px
    }

    .btn-lang {
        padding: 15px 5px
    }

    h5 {
        font-size: 28px !important;
        font-weight: 500 !important
    }

    .ipd_mgleft15 {
        margin-left: 15px !important
    }

    .ipd_no_padding {
        padding: 0
    }

    .ipd_pdleft0 {
        padding-left: 0
    }

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

    .tix_price {
        font-size: 20px !important;
        font-weight: 500;
        text-align: right;
        color: #e80707
    }

    .btn_conti {
        width: 200px;
        font-size: 18px;
        height: 40px
    }

    .breadcrumb {
        margin-bottom: 0 !important
    }

    h4 {
        font-size: 22px !important
    }

    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:focus,
    .nav-tabs>li.active>a:hover {
        font-size: 18px !important;
        text-align: center
    }

    .tab-pane>.MsoNormalCxSpMiddle,
    .MsoListParagraphCxSpFirst,
    .MsoListParagraphCxSpMiddle,
    .MsoListParagraphCxSpLast,
    .MsoNormal,
    .MsoListParagraph,
    .MsoNormalCxSpFirst {
        font-size: 16px !important;
        line-height: 22px !important
    }

    h4.MsoNormalCxSpMiddle,
    h5.MsoNormalCxSpMiddle {
        font-size: 18px !important
    }

    .tab-pane>div>h5 {
        font-size: 18px !important;
        line-height: 22px !important
    }
}