body {
    font-family: 'Cabin', sans-serif;
}
a {
    text-decoration: none;
}
.borPink {
    border: 2px solid #FFDAE1;
}
.text-pink {
    color: #FF4868
}
.text-blue {
    color: #0091FE;
}
.text-pink:hover {
    color: #FF4868;
}
.fs-14 {
    font-size: 14px;
}
.fs-18 {
    font-size: 18px;
}
.fs-24 {
    font-size: 24px;
}
.fs-80 {
    font-size: 80px;
}
.bg-pink {
    background: #FFDAE1;
}
.bgpinkDark {
    background: #FF4868;
}
.bg-grey {
    background: #ECEDF1;
}
.bggreyLight {
    background: #F9FAFC;
}
.text-grey {
    color: #dee2e6;
}
.text-green {
    color: #49D193;
}
.grey-50 {
    color: #646D84;
}
section {
    margin: 50px 0;
}
.borpinkdark {
    border: 1px solid #FF4868;
}

/* =====================================Header===================================== */
header {
    border-bottom: 1px solid #FFDAE1;
}
header .navbar-expand-lg .navbar-nav .nav-link {
    color: #000;
    font-size: 18px;
}
header .navbar-nav .nav-item {
    margin: 0 22px;
}
header .navbar-nav .nav-item:first-child {
    border-bottom: 4px solid #FF4868;
}
header .hovPink {
    border-bottom: 4px solid transparent;
}
header .hovPink:hover {
    border-bottom: 4px solid #FF4868;
}
header .nav-link {
    padding: 22px 0;
}
header .modal-header {
    border-bottom: 1px solid #dee2e600;
}
header .form-control:focus {
    background-color: #F9FAFC;
}
header .timelineTicket {
    margin-left: 511px;
}
/* =====================================Footer===================================== */
footer {
    background: #F9FAFC;
}
footer .form-control {
    background-color: #ECEDF1;
    border: 1px solid #ECEDF1;
}
footer .form-control::placeholder {
    color: #9399A9;
}
footer .btn {
    width: 120px;
}

/* =====================================Home Page===================================== */
#homepage .banner {
    background: url(../img/banner.png) no-repeat center;
    padding: 170px 0;
}
#homepage .form-check-input {
    background-color: transparent;
    border: 1px solid #fff;
    width: 25px;
    height: 25px;
}
#homepage .form-check-input:checked {
    background-color: transparent;
    border-color: #fff;
}
#homepage .input-group-text.bgpinkDark {
    border: 1px solid #FF4868;
}
#homepage .vourcher {
    background: url("../img/vourcher.png") no-repeat center / cover;
    border-radius: 10px;
    height: 220px;
    padding: 100px;
}
#homepage .topvc {
    margin-top: -190px;
}
#homepage .vourcher.vc2 {
    background: url("../img/vourcher-2.png") no-repeat center / cover;
    padding: 30px;
}
#homepage .vourcher.vc3 {
    background: url("../img/vourcher-3.png") no-repeat center / cover;
    padding: 28px;
}
#homepage .vourcher.vc3 .fs-56 {
    font-size: 56px;
}
#homepage .vourcher.vc2 .lh-text,
#homepage .vourcher.vc3 .lh-text {
    line-height: 73px;
}
#homepage .tower {
    background: url(../img/tower.png) no-repeat center / cover;
    padding: 131px 0;
}
#homepage .tower .bg-white {
    border: 2px solid #FF4868;
}
#homepage .tower .dashpink::after {
    position: absolute;
    content: "";
    background: #FF4868;
    width: 4px;
    height: 129px;
    left: 50%;
    bottom: -129px;
    transform: translateX(-50%);
}
#homepage .dashort::before {
    position: absolute;
    content: "";
    background: #FF4868;
    width: 4px;
    height: 100%;
    left: -16px;
}
#homepage .firepink {
    background: url("../img/firepink.png") no-repeat center / cover;
    padding: 76px 0;
}
#homepage .dashborpink {
    border-style: dashed;
    border-width: 1px;
    border-color: #FF4868;
    background: #fff;
}
#homepage .homebus .dashort .text-pink:hover {
    background: #FF4868;
    color: #fff;
    border: 2px solid #FF4868;
}
#homepage .homebus .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #FF4868;
    border: 2px solid #FF4868;
}
#homepage .nav-pills .nav-link {
    border: 2px solid #FFDAE1;
}
#homepage .swiper-container {
    width: 100%;
    height: 100%;
}
#homepage .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
#homepage .swiper-button-prev {
    left: 0;
    background-image: none;
}
#homepage .swiper-button-next {
    background-image: none;
    right: 0;
}
#homepage .swiper-button-prev i,
.swiper-button-next i {
    width: 28px;
    height: 28px;
}
#homepage .book .form-control,
.input-group-text {
    border: 1px solid #fff;
    border-radius: 0;
    padding: 0.75rem 0 0.75rem
}
#homepage .book .rightbor {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
#homepage .book .leftbor {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
#homepage .fa-right-left {
    width: 33px;
    height: 33px;
    color: #383F47;
}
#homepage .lineLeft::after {
    position: absolute;
    content: "";
    background: #B0B5C1;
    width: 1px;
    height: 44px;
}
#homepage .lineCir::before {
    position: absolute;
    content: "";
    background: #B0B5C1;
    width: 1px;
    height: 7px;
    left: 50%;
    transform: translateX(-50%);
    top: 6px;
}
#homepage .lineCir::after {
    position: absolute;
    content: "";
    background: #B0B5C1;
    width: 1px;
    height: 7px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6px;
}
#homepage .startbut {
    padding: 12px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 360px;
    display: flex;
    align-items: center;
}
#homepage .dropdown-toggle.startbut::after {
    display: none;
}
#homepage .dropdown-toggle.startbut.carlen::before {
    position: absolute;
    content: "";
    background: #B0B5C1;
    width: 1px;
    height: 42px;
}
#homepage .book .dropdown-menu {
    width: 360px;
}


/* =====================================Book===================================== */
#book .bg-pink::before {
    position: absolute;
    content: "";
    background: #FF4868;
    width: 4px;
    height: 52px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

}
#book .form-check-input:checked {
    background-color: #fff;
    border-color: #FF4868;
}
#book .form-check-input {
    border: 1px solid #383F47;
}
#book .form-check-input:checked[type=radio] {
    background-image: url("../img/round.png");
    background-size: 8px;
}
#book .form-select {
    background-image: url("../img/arrowpink.png");
    background-size: 15px 9px;
}
#book .accordion-button::after {
    background-image: url("../img/plus.png");
    background-size: 12px;
    transform: translateY(20%);
}
#book .accordion-button:not(.collapsed)::after {
    background-image: url("../img/minus.png");
    transform: rotate(0);
    transform: translateY(50%);
}
#book .accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / 13%);
}
#book .timeline-with-icons {
    border-left: 1px solid hsl(0, 0%, 90%);
    position: relative;
    list-style: none;
}
#book .timeline-with-icons .timeline-item {
    position: relative;
}
#book .timeline-with-icons .timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
}
#book .timeline-with-icons .timeline-icon {
    position: absolute;
    left: -48px;
    background: #fff;
    color: hsl(217, 88.8%, 35.1%);
    border-radius: 50%;
    height: 24px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#book .seatpink {
    border: 3px solid #FF4868;
}
#book .seatpink span {
    border-bottom: 3px solid #FF4868;
}
#book .bg-white.shadow .width100 {
    width: 100px;
}
#book .bgpinkDark {
    height: 40px;
}
#book .info .form-control:focus,
#book .info .form-select {
    background-color: #F9FAFC;
}
#book .info .form-check-input:checked[type=checkbox] {
    background-image: url("../img/tick.png");
    background-size: 9px;
}
#book .bortop {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
#book .borbottom {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
#book .tick {
    padding: 0 500px;
}
#book .tick .alertgreen {
    background: #C8F1DF;
    color: #49D193;
}
#book .tick .leftline::before {
    position: absolute;
    content: "";
    background: #FF4868;
    width: 4px;
    height: 19px;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
}
#book .list .grey-50 {
    border: 1px solid #646D84;
}
/* =====================================News===================================== */
#news .swiper-button-prev {
    background-image: url("../img/prev.png") !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px !important; 
    left: 2px !important;
}
#news .swiper-button-next {
    background-image: url("../img/next.png") !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px !important; 
    right: 2px !important;
}
#news .truncateTwo {
    line-height: 2rem;
    max-height: 8rem;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}
.page-item.active .page-link {
    background-color: #FF4868;
    border-color: transparent;
}
/* =====================================Calendar===================================== */
.calendar {
    position: relative;
    max-width: 400px;
    min-width: 320px;
    background: #fff;
    color: #000;
    margin: 20px auto;
    box-sizing: border-box;
    overflow: hidden;
    font-weight: normal;
    border-radius: 4px;
}
.calendar-inner {
    padding: 10px 10px;
}
.calendar .calendar-inner .calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}
.calendar .calendar-inner .calendar-body div {
    padding: 4px;
    min-height: 30px;
    line-height: 30px;
    border: 1px solid transparent;
    margin: 10px 2px 0px;
}
.calendar .calendar-inner .calendar-body div:nth-child(-n+7) {
    border: 1px solid transparent;
    border-bottom: 1px solid #ECEDF1;
}
.calendar .calendar-inner .calendar-body div:nth-child(-n+7):hover {
    border: 1px solid transparent;
    border-bottom: 1px solid #ECEDF1;
    border-radius: 0;
}
.calendar .calendar-inner .calendar-body div>a {
    color: #212529;
    text-decoration: none;
    display: flex;
    justify-content: center;
}
.calendar .calendar-inner .calendar-body div:hover {
    border: 1px solid #FF4868;
    border-radius: 4px;
}
.calendar .calendar-inner .calendar-body div.empty-dates:hover {
    border: 1px solid transparent;
}
.calendar .calendar-inner .calendar-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.calendar .calendar-inner .calendar-today-date {
    display: grid;
    text-align: center;
    cursor: pointer;
    margin: 3px 0px;
    background: #fff;
    padding: 8px 0px;
    border-radius: 10px;
    width: 80%;
    margin: auto;
}
.calendar .calendar-inner .calendar-controls .calendar-year-month {
    display: flex;
    min-width: 100px;
    justify-content: space-evenly;
    align-items: center;
}

.calendar .calendar-inner .calendar-controls .calendar-next {
    text-align: right;
}
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-year-label,
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-month-label {
    font-weight: 500;
    font-size: 17px;
}
.calendar .calendar-inner .calendar-body .calendar-today {
    background: #FF4868;
    border-radius: 4px;
}
.calendar .calendar-inner .calendar-body .calendar-today a {
    outline: 2px solid transparent;
}
.calendar .calendar-inner .calendar-controls .calendar-next a,
.calendar .calendar-inner .calendar-controls .calendar-prev a {
    font-family: arial, consolas, sans-serif;
    font-size: 26px;
    text-decoration: none;
    padding: 4px 12px;
    display: inline-block;
    margin: 10px 0 10px 0;
}
.calendar .calendar-inner .calendar-controls .calendar-next a svg,
.calendar .calendar-inner .calendar-controls .calendar-prev a svg {
    height: 20px;
    width: 20px;
}
.calendar .calendar-inner .calendar-body .prev-dates,
.calendar .calendar-inner .calendar-body .next-dates {
    color: #9399A9;
}
.calendar .calendar-inner .calendar-body .prev-dates:hover,
.calendar .calendar-inner .calendar-body .next-dates:hover {
    border: 1px solid transparent;
    pointer-events: none;
}
.calendar-today .dateNumber {
    color: #fff !important;
}
.values {
    padding: 20px 0;
    display: flex;
}
.max-value {
    margin-left: auto;
}
.min-value::after, .max-value::after {
    position: absolute;
    content: "đ";
}
.range-slider {
    margin-top: 10px;
    position: relative;
}
.slider-track {
    width: 100%;
    background: #ccc;
    height: 4px;
    position: relative;
    overflow: hidden;
}
.slider-track-filled {
    width: 100%;
    background: #FF4868;
    height: 4px;
    position: absolute;
    transform-origin: 0 0;
}
.min-thumb,
.max-thumb {
    width: 21px;
    height: 20px;
    background: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    user-select: none;
    border-radius: 50%;
    box-shadow: rgb(0 0 0 / 21%) 0px 5px 15px;
}
.min-thumb {
    left: 0;
}
.max-thumb {
    right: 0;
}
@media (max-width: 820px) {
    .m-0 {
        margin: 0 !important;
    }
    .d-block-md {
        display: block !important;
    }
    .mt-10 {
        margin-top: 10px;
    }
    .mt-20 {
        margin-top: 20px;
    }
    .truncated {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #homepage .startbut {
        width: 180px;
    }
    #homepage .banner {
        padding: 145px 0;
    }
    header .navbar-nav .nav-item {
        margin: 0;
    }
    header .navbar-collapse {
        margin-bottom: 12px;
    }
    #homepage .vourcher {
        margin-bottom: 15px;
    }
    #homepage .nav-item {
        margin-bottom: 10px;
    }
    #book .tick {
        padding: 0;
    }
}
@media (max-width: 390px) {
    .d-none-xs {
        display: none;
    }
    .border-end-none {
        border-right: none !important;
    }
    .p-0-xs {
        padding: 0 !important;
    }
    .mt-10-xs {
        margin-top: 10px;
    }
    .d-block-xs {
        display: block !important;
    }
    .d-flex-xs {
        display: flex !important;
    }
    .align-items-center-xs {
        align-items: center !important;
    }
    .justify-content-start-xs {
        justify-content: start !important;
    }
    #homepage .tower .dashpink::after {
        position: unset;
    }
    #homepage .tower {
        padding: 18px 0;
    }
    #homepage .dashborpink {
        width: 90px;
        height: 90px;
        margin-right: 15px;
    }
    #homepage .firepink {
        padding: 40px 0;
    }
    #homepage .startbut {
        width: 111px;
    }
    #book .minw .widthOne {
        min-width: 170px;
    }
    #book .minw .widthTwo{
        min-width: 180px;
    }
    #book .minw .widthThree{
        min-width: 290px;
    }
}