@media (max-width: 480px) {
    img {
        max-width: 100%!important;
        height: auto;
    }
    .home-box-video {
        background: #F9E3BB;
        padding: 32px 0;
    }
    .header-top-text {
        font-size: 20px;
        line-height: 30px;
    }
    .box-video {
        background: none;
        min-height: auto;
        display: block;
        padding: 0;
    }
    .view-more-video {
        font-family: 'SVN-Gilroy';
        font-weight: 400;
    }
    .box-top-text, .text-price, .timeline h3.main-title {
        font-size: 36px;
        line-height: 45px;
    }
    .box-bottom-text {
        font-size: 16px;
        line-height: 24px;
    }
    .ticket-list {
        display: block!important;
        padding: 0 22px;
    }
    .standard-ticket {
        max-width: 100%;
    }
    .standard-ticket .image img {
        width: 100%;
    }
    .standard-ticket .description {
        min-height: auto;
    }
    .costume {
        text-align: center;
    }
    .standard-ticket .back-to-home {
        text-align: center;
    }
    .standard-ticket .back-to-home a {
        display: inline-block!important;
    }
    .vip-ticket {
        margin: 36px 0 64px 0;
    }
    .timeline-list ul li a {
        padding: 6px 10px;
        font-size: 16px;
    }
    .timeline {
        padding: 32px 0;
    }
    .timeline .timeline-list {
        margin: 20px 0 0 0;
    }
    .timeline-item {
        margin-bottom: 40px;
    }
    .timeline-item.left .timeline-images {
        display: none;
    }
    .timeline-line {
        left: 45px;
        transform: none;
        height: 379px;
    }
    .timeline-item .dot {
        left: 33px;
        transform: none;
    }
    .timeline-item.left .timeline-text {
        padding: 0 0 0 100px;
        width: 100%;
        text-align: left!important;
    }
    .timeline-text > p {
        font-size: 16px;
        line-height: 24px;
    }
    .timeline-text ul li {
        text-align: left;
    }
    .outer-slick {
        padding: 0;
    }
    .tag-wrapper {
        left: -11px;
        top: 36px;
    }
    .action-item p.first, .action-item p.two {
        font-size: 17px;
        line-height: 25px;
        padding-left: 104px;
    }
    .tag-item {
        font-size: 14px;
        line-height: 22px;
    }
    .action-item p.two small {
        font-size: 10px;
        line-height: 17px;
    }
    .timeline-item .dot.dot-last {
        bottom: 0;
    }
    .timeline-wrapper-end .timeline-line {
        height: 180px;
    }
    .timeline-has-slide {
        margin-bottom: 32px;
    }
    .timeline-text ul {
        padding-left: 27px;
    }
    .fixed-icon img {
        max-width: 40px!important;
    }
    .fixed-icon {
        right: 10px;
    }
    .our-special-box {
        padding: 16px;
    }
    .slick-our-special {
        margin: 16px 0 0 0;
    }
    .slick-our-special .special-item {
        height: auto;
    }
    .slider-thumb .slick-slide {
        height: 60px;
    }
    .our-special-right .ekip-info p, .our-special-right .ekip-info .description {
        text-align: center;
    }
    .our-special-right .ekip-info .description {
        font-size: 16px;
    }
    .our-special {
        padding: 32px 0 80px 0;
    }
    .box-qa {
        padding: 32px 0;
    }
    .box-qa-inner .qa-list {
        padding: 0;
        background: none;
    }
    .box-qa-inner .text-qa.text-qa-right {
        display: none;
    }
    .box-qa-inner .text-qa.text-qa-left {
        position: static;
        font-size: 36px;
        line-height: 45px;
        writing-mode: unset;
        text-align: center;
        transform: none;
        margin: 0 0 16px 0;
    }
    .accordion-custom .card > .card-header button, .accordion-custom .card .card-body {
        font-size: 14px;
        line-height: 22px;
    }
    .column-footer-1 {
        padding: 0;
        text-align: center;
        max-width: 220px;
        margin: 0 auto;
    }
    .column-footer-2 {
        padding: 0;
        text-align: center;
        margin: 32px 0;
    }
    .column-footer-2 .text-footer ul {
        justify-content: center;
    }
    .socials {
        justify-content: center;
        padding: 0 70px;
    }
    .vietcharm-navbar {
        padding: 0;
    }
    .vietcharm-navbar .navbar-brand {
        margin: 0;
    }
    .menu {
        background: #F9E3BB;
        padding: 12px 16px;
        transition: all 0.5 ease-in-out;
        margin: 0;
        height: auto;
        position: absolute;
        width: 100%;
        top: 66px;
        z-index: 99;
        right: 0;
        width: 50%;
    }
    .menu ul {
        margin-right: 0!important;
        display: block;
    }
    .menu ul li {
        padding: 8px 0;
    }
    .menu ul li a {
        color: #852629;
    }
    .video-top {
        background: #F9E3BB;
        padding-bottom: 0;
    }
    .video-top .video-content {
        padding: 0;
        background: none;
    }
    .program-info {
        display: block;
    }
    .program-info-left {
        width: 100%;
    }
    .program-info-right {
        width: 100%;
    }
    .program-info-right h1 {
        text-align: center;
        margin: 32px auto 0 auto;
        max-width: 223px;
    }
    .program-date-time {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
    }
    .program-date-time .program-date {
        width: calc(50%);
    }
    .program-date-time {
        margin: 24px 0 0 0;
    }
    .stage-layout {
        margin: 32px 0 0 0;
    }
    .stage-layout .d-flex {
        display: block!important;
    }
    .stage-layout .stage-layout-left {
        width: 100%;
        padding: 0;
    }
    .stage-layout .title {
        font-size: 20px;
        line-height: 30px;
    }
    .dot {
        width: 10px;
        height: 10px;
        font-size: 6px;
        line-height: 12px;
    }
    .ticket-description {
        text-align: left;
        width: 100%;
        padding: 8px;
    }
    .ticket-description ul li p::before {
        width: 8px;
        height: 8px;
        top: 3px;
    }
    .ticket-description ul li p {
        font-size: 9px;
        padding-left: 12px;
    }
    .ticket-description ul li {
        width: 25%;
        padding: 0;
    }
    .stage-layout .stage-layout-right {
        width: 100%;
        margin: 32px 0 0 0;
    }
    .ticket-booking-detail p span:first-child {
        margin: 0px 40px 0 0;
    }
    .ticket-booking-detail p span:last-child, .costume-qty, .ticket-info-confirm .ticket-booking-detail p span:last-child,
    .ticket-info-completed .ticket-booking-detail p span:last-child {
        width: calc(100% - 156px);
    }
    #totalAmount, #totalAmount span {
        text-align: center;
    }
    .ticket-info-confirm, .ticket-info-completed {
        padding: 16px 16px 32px 16px;
    }
    .ticket-info-confirm .ticket-booking-detail {
        width: 100%;
        display: block;
    }
    .ticket-info-confirm .ticket-booking-detail p span:first-child, .ticket-info-completed .ticket-booking-detail p span:first-child {
        width: 116px;
    }
    .ticket-info-confirm .ticket-booking-detail p span:first-child {
        width: 135px;
    }
    .ticket-booking-form .ticket-row {
        display: block;
    }
    .ticket-booking-form label {
        width: 100%;
        margin: 0 0 5px 0;
    }
    .ticket-booking-form input, .ticket-booking-form textarea {
        width: 100%;
    }
    .box-payment-method {
        margin: 60px 0 0 0;
    }
    .ticket-info-confirm .back-to-home {
        text-align: center;
    }
    .important-info {
        display: block!important;
    }
    .important-info .important-info-left, .important-info .important-info-right {
        width: 100%;
    }
    .important-info .important-info-right .inner-content {
        padding: 0;
        max-width: 100%;
    }
    .important-info .important-info-right {
        border: 0;
    }
    .important-info .important-info-right .inner-content h4 {
        text-align: center;
        margin-top: 60px;
    }
    .collapsing {
        transition: height 0.5s ease;
    }
    .navbar-collapse {
        transform-origin: top;
        transform: scaleY(0);
        transition: transform 0.5s ease;
    }
    .navbar-collapse.show {
        transform: scaleY(1);
    }
    .custom-select-option {
        position: relative;
        min-width: 200px;
        margin: 0 auto;
        max-width: 240px;
    }
    .select-label {
        margin-bottom: 6px;
        font-weight: 500;
    }
    .select-btn {
        background: #E9A33E;
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 12px 16px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        box-shadow: 0px 0px 8px 0px #FDE67E inset;
        color: #580E00;
        font-family: 'SVN-Gilroy';
        font-size: 20px;
        line-height: 30px;
        min-width: 200px;
        margin: 0 auto;
        max-width: 240px;
    }
    .select-btn .arrow {
        margin-left: 2px;
    }
    .select-dropdown {
        position: absolute;
        top: 100%;
        left: 50%;
        width: auto;
        background: #F9E3BB;
        box-shadow: 0 8px 20px rgba(0,0,0,.15);
        list-style: none;
        padding: 6px 8px!important;
        margin: 0;
        display: none;
        z-index: 10;
        display: none!important;
        transform: translate(-50%, 0);
        border: 1px #580E00 solid;
        width: 185px;
    }
    .select-dropdown li {
        padding: 6px 0;
        cursor: pointer;
    }
    .select-dropdown li:not(:last-child) {
        border-bottom: 1px #580E00 solid;
    }
    .select-dropdown li a {
        background: none!important;
        border: 0!important;
        border-radius: 0!important;
        padding: 0!important;
        color: #580E00!important;
        font-weight: 700!important;
        font-family: 'SVN-Gilroy';
    }
    .select-dropdown li a:hover, .select-dropdown li a.active {
        color: #E9A33E!important;
    }
    .custom-select-option.open .select-dropdown {
        display: block!important;
    }
    .program-date-time .custom-select-option .select-label {
        color: #18373E;
        margin: 0 0 16px 0;
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        width: 100%;
        font-family: 'SVN-Gilroy';
    }
    .program-date-time .custom-select-option {
        max-width: 100%;
        min-width: 175px;
        margin: 0 0 0 auto;
    }
    .program-date-time .custom-select-option .select-btn {
        max-width: 100%;
        min-width: auto;
        background: #516E66;
        box-shadow: none;
        font-size: 15px;
        line-height: 23px;
        color: #F6F6F6;
        font-weight: 700;
        padding: 10.5px 10px;
        width: 100%;
    }
    .program-date-time .custom-select-option .select-dropdown {
        width: 100%;
        border: 0;
        background: #516E66;
        z-index: 100;
        border-radius: 8px;
    }
    .program-date-time .custom-select-option .select-dropdown li a {
        color: #fff!important;
        font-size: 14px;
        line-height: 22px;
    }
    .program-date-time .custom-select-option .select-dropdown li a:hover, .program-date-time .custom-select-option .select-dropdown li a.active {
        color: #fff!important;
    }
    .program-date-time .custom-select-option .select-dropdown li:not(:last-child) {
        border-bottom: 1px #fff solid;
    }
    .program-date p {
        margin: 0;
    }
    #show-date {
        font-size: 15px;
    }
    .ticket-info-completed p.title {
        font-size: 21px;
        line-height: 33px;
    }
    .important-info .important-info-left .inner-content {
        max-width: 100%;
        padding-right: 0;
    }
    .datepicker-dropdown {
        z-index: 99!important;
    }
    .hero-btn-mobile a {
        font-size: 12px;
        background-size: 100% 100%;
        width: auto;
        height: auto;
        padding: 12px 5px 7px 5px;
        line-height: 13px;
        display: block;
    }
    .location-page .inner-content {
        padding: 40px 25px;
        margin-top: 15px;
    }
    .store h1 {
        font-size: 25px;
        line-height: 35px;
    }
    .location-page .controls {
        display: block;
    }
    .location-page .frame {
        padding: 15px;
    }
    .location-page .search {
        margin-bottom: 4px;
    }
    .location-page .select {
        margin-bottom: 4px;
        width: 100%;
    }
    .location-page .search input {
        font-size: 13px;
        line-height: 21px;
    }
    .location-page .content {
        display: block;
    }
    .location-page .left {
        margin-bottom: 15px;
    }
    .location-page .list-wrap {
        height: auto;
        overflow-y: hidden;
        overflow-x: hidden;
    }
    .location-page .map {
        min-height: 200px;
    }
    .location-page .map iframe {
        height: 200px;
    }
    .location-page .city {
        font-size: 18px;
        line-height: 27px;
    }
    .location-page .list > a {
        flex: 0 0 85%;
        max-width: 320px;
        scroll-snap-align: start;
    }
    .location-page .list {
        padding-right: 0;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        padding-bottom: 8px;

        scroll-snap-type: x mandatory; /* optional */
        -webkit-overflow-scrolling: touch;
        display: flex;
    }
    .location-page .list > a:last-child .card {
        margin-bottom: 16px;
    }
    .location-page .list > a .card {
        min-height: 163px;
    }
    .showcase-page h1 {
        font-size: 20px;
        line-height: 28px;
    }
    .first-post {
        background: #852629;
        border-radius: 12px;
        padding: 16px;
    }
    .first-post .image {
        height: auto;
        width: 100%;
    }
    .first-post-title {
        text-align: center;
        color: #852629;
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
    }
    .first-post .content {
        background: none;
        width: 100%;
        padding: 10px 0;
        height: auto;
    }
    .first-post .content > .d-flex {
        display: none!important;
    }
    .first-post .content .description {
        display: block;
    }
    .first-post .content p.date {
        font-size: 14px;
        line-height: 18px;
        color: #E9A33E;
    }
    .read-more a {
        text-decoration: none;
    }
    .all-posts p.title {
        text-align: center;
        padding: 0;
        border: 0;
    }
    .list-posts {
        display: block;
    }
    .list-posts .post-item:not(:last-child) {
        margin: 0 0 32px 0;
    }
    .sidebar {
        margin: 30px 0 0 0;
    }
}
@media (max-width: 376px) {
    .voucher-form input {
        padding: 7px;
        font-size: 13px;
    }
    .voucher-form button {
        font-size: 14px;
    }
}