/* Source: Views/BookTicket/Index.cshtml */
:root {
            --bg-dark: #333333;
            --gray-color: #313131;
            --text-white: #ffffff;
            --booking-step-inactive-bg: var(--bg-component-subpage-color);
            --booking-step-active-bg: var(--btn-booking-bg-color);
            --booking-step-number-bg: #737373;
            --booking-step-label-active: #393b3d;
            --booking-step-label-inactive: #767683;
        }

        main {
            padding-bottom: 100px;
        }

        .label {
            font-size: 20px;
            font-weight: 500;
        }

        main .container {
            position: relative;
        }

        .timer-container {
            display: inline-block;
            background-color: var(--primary-color);
            padding: 8px 10px;
            border-radius: 50px;
            position: absolute;
            right: 15px; /* Adjust if container padding is different */
            top: 0;
            z-index: 10;
        }

        .timer-content {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #ffffff;
        }

        .timer-icon {
            width: 24px;
            height: 24px;
            stroke: #ffffff;
        }

        #global-countdown-timer {
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 1px;
        }

        .stepper {
            display: flex;
            list-style: none;
        }

        .step-outer {
            position: relative;
            display: flex;
            flex: 1;
            align-items: center;
            cursor: default;
        }

        .step {
            background-color: var(--booking-step-inactive-bg);
            color: #888;
            flex: 1;
            text-align: right;
            padding: 5px 40px 5px 0;
            clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
            margin-right: -13px;
        }

        .step-outer.active .step {
            background-color: var(--booking-step-active-bg);
            color: var(--btn-booking-color);
        }

        .step .label {
            font-weight: bold;
            font-size: 22px;
        }

        .number {
            width: 50px;
            height: 50px;
            background-color: var(--booking-step-number-bg);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
            z-index: 90;
            font-size: 30px;
        }

        .step-outer.active .number {
            background-color: var(--booking-step-active-bg);
            color: var(--btn-booking-color);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }



        .mb-step.active {
            font-weight: bold;
            color: var(--booking-step-label-active);
        }

        @media (max-width: 576px) {
            body.sub-page {
                display: block;
                padding-top: 0;
            }

            .sub-page .header {
                position: static !important;
                order: initial;
            }

            body.sub-page main {
                order: initial;
            }

            main {
                padding-bottom: 0;
            }

            .sub-page__title.section__title_primary {
                margin: 20px 0 0;
                color: #393b3d;
                font-family: "Afacad", Arial, sans-serif;
                font-size: 32px;
                font-weight: 600;
                line-height: 36px;
                text-align: center;
            }

            .stepper-container {
                margin: 11px 0 20px;
            }

            .step {
                background-color: var(--booking-step-inactive-bg) !important;
            }

            .step-outer.active .step {
                background-color: var(--booking-step-active-bg) !important;
                color: var(--btn-booking-color) !important;
            }

            .number {
                width: 34px !important;
                height: 34px !important;
                background-color: var(--booking-step-number-bg) !important;
                color: #fff !important;
                font-family: "Afacad", Arial, sans-serif;
                font-size: 24px !important;
                font-weight: 400;
                line-height: 36px;
            }

            .step-outer.active .number {
                background-color: var(--booking-step-active-bg) !important;
                color: var(--btn-booking-color) !important;
            }

            .stepper-mb {
                width: calc(100% - 36px);
                margin: 10px auto 0;
                color: var(--booking-step-label-inactive);
                font-family: "Afacad", Arial, sans-serif;
                font-size: 16px;
                line-height: 36px;
            }

            .stepper-mb li {
                min-width: 73px;
                color: var(--booking-step-label-inactive);
                font-weight: 400;
                line-height: 36px;
                text-align: center;
            }

            .stepper-mb .mb-step.active {
                color: var(--booking-step-label-active);
                font-weight: 600;
            }
        }

        @media (max-width: 400px) {
            .sub-page__title.section__title_primary {
                font-size: 28px;
            }

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

            .stepper-mb {
                font-size: 12px;
            }
        }

/* Source: Views/BookTicket/_PickDate.cshtml */
.calendar-container { margin-top: 50px; width: 100%; background-color: var(--container-calendar); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); margin-bottom: 20px; }
    .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 20px; background-color: var(--header-calendar); border-top-left-radius: 8px; border-top-right-radius: 8px; }
    .calendar-header h2 { color: var(--card__subtitle-color); margin: 0; font-size: 30px; }
    .nav-controls { display: flex; align-items: center; gap: 20px; }
    .nav-controls span { color: var(--weekday-calendar); font-size: 22px; }
    .nav-btn { background: none; border: none; color: var(--card__subtitle-color); font-size: 20px; cursor: pointer; padding: 5px 10px; }
    .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: 20px; }
    .weekday { color: var(--weekday-calendar); font-size: 20px; padding-bottom: 20px; }
    .day-cell { min-height: 100px; padding: 10px; border-top: 1px solid #3d3d3d; display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .day-number { font-size: 20px; color: #888888; font-weight: bold;}
    .time-slots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
    .time-btn { background-color: #444444; color: #bbbbbb; border: none; border-radius: 4px; padding: 4px 8px; font-size: 16px; cursor: pointer; transition: 0.2s; }
    .time-btn:hover { background-color: #555555; }
    .time-btn.selected { background-color: var(--primary-color); color: #000000; font-weight: bold; }
    .day-cell.active-date { outline: 2px solid var(--primary-color); background-color: rgba(196, 166, 97, 0.05); border-radius: 5px; }
    .day-cell.active-date .day-number { color: #ffffff; font-weight: bold; }
    .step .label { font-weight: bold; font-size: 22px; }
    .pick-date-mobile { display: none; }

    @media (max-width: 576px) {
        main {
            padding-bottom: 0 !important;
        }

        #step-content > .container {
            padding-left: 18px;
            padding-right: 19px;
        }

        .calendar-container {
            display: none;
        }

        .pick-date-mobile {
            display: block;
            margin-top: 24px;
            color: #393b3d;
            font-family: "Afacad", Arial, sans-serif;
        }

        .mobile-show-poster {
            width: 100%;
            aspect-ratio: 403 / 214;
            overflow: hidden;
            border-radius: 10px 10px 0 0;
            background: #d4d4d4;
        }

        .mobile-show-poster img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .mobile-show-title {
            margin: 2px 0 0;
            color: #f59e0b;
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
        }

        .mobile-show-duration {
            margin: -6px 0 4px;
            color: var(--body-color);
            font-size: 16px;
            font-style: italic;
            line-height: 24px;
        }

        .mobile-show-description {
            margin: 0;
            min-height: 46px;
            color: var(--body-color);
            font-size: 20px;
            font-weight: 400;
            line-height: 23px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .mobile-month-selector {
            display: grid;
            grid-template-columns: 44px 1fr 44px;
            align-items: center;
            width: 100%;
            min-height: 47px;
            margin-top: 8px;
            border: 0;
            border-radius: 5px;
            background: rgba(115, 115, 115, 0.5);
            color: #333;
        }

        .mobile-month-selector .nav-btn {
            width: 44px;
            height: 47px;
            padding: 0;
            color: #333;
            font-size: 30px;
            line-height: 47px;
        }

        .mobile-month-selector span {
            color: #333;
            font-size: 24px;
            font-weight: 400;
            line-height: 36px;
            text-align: center;
        }

        .mobile-schedule-list {
            margin-top: 14px;
        }

        .mobile-schedule-day {
            padding: 0 0 12px;
            margin-bottom: 8px;
            border-bottom: 1px solid #d4d4d4;
        }

        .mobile-schedule-date {
            margin: 0 0 2px;
            color: #393b3d;
            font-size: 20px;
            font-weight: 600;
            line-height: 36px;
        }

        .mobile-time-slots {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .mobile-time-btn {
            width: 100%;
            min-height: 42px;
            border: 0;
            border-radius: 5px;
            background: #737373;
            color: #fff;
            font-size: 20px;
            font-weight: 400;
            line-height: 36px;
            text-align: center;
        }

        .mobile-time-btn.selected {
            background: #f5780b;
            color: #fff;
            font-weight: 600;
        }

        .mobile-empty-schedule {
            margin: 18px 0 0;
            color: #737373;
            font-size: 18px;
            line-height: 28px;
            text-align: center;
        }

        .button-group {
            margin-top: 28px;
            margin-bottom: 60px;
            padding: 0 8px;
        }

        .button-group .btn-submit {
            width: 100%;
            min-height: 50px;
            border: 0;
            border-radius: 5px;
            background: #f5780b;
            color: #fff;
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
        }

        .button-group .btn-submit:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
    }

    @media (max-width: 400px) {
        .mobile-show-title {
            font-size: 20px;
        }

        .mobile-show-duration {
            font-size: 12px;
        }

        .mobile-show-description {
            font-size: 16px;
        }

        .mobile-month-selector .nav-btn {
            font-size: 26px;
        }

        .mobile-month-selector span {
            font-size: 20px;
        }

        .mobile-schedule-date,
        .mobile-time-btn {
            font-size: 16px;
        }

        .mobile-empty-schedule {
            font-size: 14px;
        }

        .button-group .btn-submit {
            font-size: 20px;
        }
    }

/* Source: Views/BookTicket/_PickSeat.cshtml */
.box-ticket-container { max-width: 1400px; margin: 0 auto; background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; border-radius: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }
    .seat-map-section { flex: 1.8; padding: 30px; display: flex; flex-direction: column; border-right: 1px solid #eeeeee; }
    .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 30px; }
    .legend-item { font-size: 18px; display: flex; align-items: flex-start; color: #333; font-weight: 600; }
    .dot { width: 25px; height: 25px; border-radius: 50%; margin-right: 12px; flex: 0 0 25px; }
    .legend-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .legend-price { font-weight: 500; }
    .regular { background-color: #ded5b3; }
    .vip { background-color: #f59e0b; }
    .reserved { background-color: #767683; }
    .selecting { background-color: #ff5d60; }
    
    .seat-text { font-size: 5px; font-weight: bold; fill: #444; pointer-events: none; user-select: none; font-family: Arial, sans-serif; }
    .seat-group.sold .seat-text { fill: #fff; }
    .seat-group.selected .seat-text { fill: #fff; }

    .sidebar-section { flex: 1; padding: 30px; }
    .sidebar-section .title { color: #f39c12; margin-top: 0; font-size: 36px; font-weight: bold; }
    .info-time p { margin: 5px 0; font-size: 20px; color: #444; }
    .selected-summary h3 { font-size: 26px; margin: 25px 0 15px 0; border-bottom: 1px solid #eee; padding-bottom: 10px; color: #333; font-weight: bold; }
    .ticket-item { display: flex; justify-content: space-between; padding: 12px 15px; margin-bottom: 10px; border-radius: 4px; font-weight: 600; font-size: 18px; }
    .regular-item { background-color: #ded5b3; color: #333; }
    .vip-item { background-color: #f59e0b; color: #333; }
    .ticket-item .close { cursor: pointer; font-size: 18px; margin-left: 15px; }
    .total-box { display: flex; justify-content: space-between; align-items: center; border: 1px solid #c2a953; padding: 15px; margin: 30px 0; border-radius: 4px; color: #333; }
    .price-big { font-size: 20px; font-weight: bold; }
    .btn-group-step { display: flex; gap: 10px; }
    .btn-step { flex: 1; padding: 15px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; color: white; font-size: 20px; transition: 0.3s; }
    .btn-step-back { background-color: #7f8c8d; }
    .btn-step-next { background-color: #bc9e5c; }
    .btn-pan { background-color: #bc9e5c; padding: 10px; margin: 10px }
    .btn-step:hover:not(:disabled) { opacity: 0.9; }
    .btn-step:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-gold { background-color: var(--btn-booking-bg-color); }

    /* Form header - show name & time bar above seat map */
    .pick-seat-header {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #444;
        font-size: 24px;
        color: #ccc;
        padding: 20px 30px;
        background-color: var(--header-calendar, #3a3a3a);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        max-width: 1400px;
        margin: 30px auto 0;
        width: 100%;
    }
    .pick-seat-header .show-name,
    .pick-seat-header .show-time {
        color: var(--card__desc-color, #ccc);
    }

    @media (max-width: 768px) { .box-ticket-container { flex-direction: column; } .seat-map-section { border-right: none; border-bottom: 1px solid #eee; } .pick-seat-header { flex-direction: column; gap: 10px; } }
    @media (max-width: 576px) {
        .box-ticket-container { padding-left: 10px; padding-right: 10px; }
        .seat-map-section { padding: 20px 0; }
        .sidebar-section { padding: 20px 0; }
        .sidebar-section .title {
            font-size: 32px;
            line-height: 36px;
        }
        .info-time p,
        .legend-item,
        .ticket-item,
        .total-box {
            font-size: 20px;
            line-height: 28px;
        }
        .selected-summary h3 {
            font-size: 24px;
            line-height: 36px;
        }
        .btn-group-step {
            margin-bottom: 60px;
        }
        .btn-step {
            min-height: 50px;
            padding: 7px 12px;
            border-radius: 5px;
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
        }
        .pick-seat-header { font-size: 22px; }
    }

    @media (max-width: 400px) {
        .sidebar-section .title {
            font-size: 28px;
        }

        .info-time p,
        .legend-item,
        .ticket-item,
        .total-box {
            font-size: 16px;
        }

        .selected-summary h3 {
            font-size: 20px;
        }

        .btn-step {
            font-size: 20px;
        }

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

        #seat-type-summary {
            font-size: 12px !important;
        }

        .pick-seat-header { font-size: 18px; }
    }

/* Source: Views/BookTicket/_Info.cshtml */
.booking-form-container { background-color: var(--container-calendar); color: #ffffff; padding: 0 0 30px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 50px auto 0; border-radius: 8px; width: 100%; }
    .form-header { display: flex; justify-content: space-between; border-bottom: 1px solid #444; margin-bottom: 30px; color: #ccc; padding: 20px 30px; background-color: var(--header-calendar); border-top-left-radius: 8px; border-top-right-radius: 8px; font-size: 24px; }
    .form-header .show-name{font-weight:700}
    .form-header .show-name,.form-header .show-time{color:var(--weekday-calendar)}
    .form-body { display: flex; gap: 60px; padding: 0 30px; }
    .customer-info, .order-summary { flex: 1; }
    .section-title { color: var(--card__subtitle-color); /* Màu vàng Gold */ margin-bottom: 20px; border-bottom: 1px dotted #666; padding-bottom: 10px; font-size: 26px; }
    .input-group { margin-bottom: 20px; }
    .input-group label { display: block; margin-bottom: 8px; font-size: 20px; color: var(--input-group-label-color); }
    .required { color: #ff6b6b; }
    .input-group input{width:100%;padding:12px;background-color:var(--input-group-input-bg-color);border:none;border-radius:4px;color:var(--primary-color);box-sizing:border-box}
    .checkbox-group{font-size:16px;display:flex;align-items:center;gap:8px;color:var(--weekday-calendar)}
    .checkbox-group a{color:var(--primary-color);text-decoration:underline}
    .summary-details .detail-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 15px; }
    .yellow-text{color:var(--yellow-text-color);font-weight:700;font-size:22px}
    .total-box{border:1px solid var(--primary-color);padding:15px;display:flex;justify-content:space-between;align-items:center;margin-top:30px;border-radius:4px;color:var(--weekday-calendar)}
    .total-amount { font-size: 20px; font-weight: bold; }
    .button-group { display: flex; gap: 15px; margin-top: 25px; }
    .button-group button { flex: 1; padding: 10px 15px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: 0.3s; }
    .btn-back { background-color: #777; color: white; }
    .btn-submit { background-color: #c4a661; color: white; }
    .btn-submit:hover:not(:disabled) { background-color: #d4b775; }
    .btn-submit:disabled { background-color: #777; color: #bbb; cursor: not-allowed; opacity: 0.7; }
    .detail-row .label { color: var(--input-group-label-color); }
    @media (max-width: 768px) { .form-body { flex-direction: column; gap: 40px; } .form-header { flex-direction: column; gap: 10px; } }
    @media (max-width: 576px) {
        main {
            padding-bottom: 0 !important;
        }

        #step-content > .container {
            padding-left: 17px;
            padding-right: 20px;
        }

        .timer-container {
            top: -6px;
            right: 14px;
            min-width: 106px;
            height: 34px;
            padding: 0 6px;
            border-radius: 50px;
            background: #c2a953;
        }

        .timer-content {
            gap: 6px;
            height: 100%;
        }

        .timer-icon {
            width: 24px;
            height: 24px;
        }

        #global-countdown-timer {
            font-size: 24px;
            font-weight: 600;
            line-height: 34px;
            letter-spacing: 1px;
        }

        .sub-page .booking-form-container,
        .booking-form-container {
            margin: 0 auto;
            padding: 0;
            border-radius: 0;
            background: transparent;
            color: #434343;
            font-family: "Afacad", Arial, sans-serif;
        }

        .booking-form-container .form-header {
            display: block;
            margin: 0;
            padding: 0 0 16px;
            border: 0;
            border-radius: 0;
            background: transparent;
            text-align: center;
        }

        .booking-form-container .form-header .show-name {
            display: block;
            color: #434343;
            font-size: 28px;
            font-weight: 700;
            line-height: 36px;
            text-transform: uppercase;
        }

        .booking-form-container .form-header .show-time {
            display: none;
        }

        .form-body {
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 0;
        }

        .booking-form-container .customer-info,
        .booking-form-container .order-summary {
            display: contents;
            width: 100%;
            overflow: hidden;
            border-radius: 5px;
            background: transparent;
        }

        .booking-form-container .section-title {
            margin: 0;
            padding: 10px 14px;
            border-bottom: 1px solid #b9b9b9;
            background: rgba(217, 217, 217, 0.5);
            color: #434343;
            font-size: 24px;
            font-weight: 600;
            line-height: 36px;
        }

        .customer-info .section-title {
            order: 1;
            border-radius: 5px 5px 0 0;
        }

        .customer-info .input-group {
            order: 1;
            margin: 0;
            padding: 0 14px 20px;
            background: rgba(217, 217, 217, 0.5);
        }

        .customer-info .input-group:first-of-type {
            padding-top: 12px;
        }

        .customer-info .input-group:last-of-type {
            padding-bottom: 22px;
            border-radius: 0 0 5px 5px;
        }

        .input-group label {
            margin-bottom: 3px;
            color: #737373;
            font-size: 24px;
            line-height: 36px;
        }

        .customer-info .input-group:first-of-type label::after {
            content: " *";
            color: #d5161b;
        }

        .required {
            color: #d5161b;
        }

        .input-group input {
            height: 45px;
            padding: 4px 7px;
            border: 0;
            border-radius: 5px;
            background: #fff;
            color: #f59e0b;
            font-size: 24px;
            line-height: 36px;
        }

        .order-summary .section-title {
            order: 2;
            margin-top: 20px;
            border-radius: 5px 5px 0 0;
        }

        .summary-details {
            order: 2;
            padding: 12px 14px 0;
            background: rgba(217, 217, 217, 0.5);
        }

        .order-summary .summary-details .detail-row {
            display: grid;
            grid-template-columns: 132px minmax(0, 1fr);
            gap: 10px;
            align-items: start;
            margin-bottom: 15px;
            font-size: 24px;
            line-height: 36px;
        }

        .order-summary .summary-details .detail-row:last-child {
            margin-bottom: 0;
        }

        .order-summary .summary-details .detail-row .label {
            position: static !important;
            z-index: auto !important;
            display: block !important;
            flex: none !important;
            color: #737373;
            font-size: 24px !important;
            line-height: 36px;
            white-space: nowrap;
        }

        .order-summary .summary-details .detail-row .value.yellow-text {
            color: #434343;
            font-size: 24px;
            font-weight: 700;
            line-height: 36px;
            text-align: right;
            overflow-wrap: anywhere;
        }

        .total-box {
            position: relative;
            order: 2;
            z-index: 0;
            margin: 13px 14px 20px;
            padding: 0 12px;
            min-height: 47px;
            border: 1px solid #f59e0b;
            border-radius: 5px;
            background: #fff;
            color: #434343;
            font-size: 24px;
            line-height: 36px;
        }

        .total-box::before {
            content: "";
            position: absolute;
            inset: -13px -14px -20px;
            z-index: -1;
            border-radius: 0 0 5px 5px;
            background: rgba(217, 217, 217, 0.5);
        }

        .order-summary .total-box .total-amount {
            color: #434343;
            font-size: 24px;
            font-weight: 700;
        }

        .checkbox-group {
            order: 3;
            align-items: flex-start;
            gap: 5px;
            margin: 20px 0 0;
            font-size: 20px;
            line-height: 24px;
        }

        .checkbox-group input {
            flex: 0 0 22px;
            width: 22px;
            height: 22px;
            margin: 0;
            accent-color: #737373;
        }

        .checkbox-group label {
            flex: 1;
        }

        .button-group {
            order: 4;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 13px;
            margin-top: 20px;
            margin-bottom: 60px;
        }

        .button-group button {
            min-height: 50px;
            padding: 7px 12px;
            border-radius: 5px;
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
        }

        .button-group .btn-back {
            background: #737373;
            color: #fff;
        }

        .button-group .btn-submit {
            background: #f5780b;
            color: #fff;
        }

        .button-group .btn-submit:disabled {
            background: #f5780b;
            color: #fff;
            opacity: 0.55;
        }
    }

    @media (max-width: 400px) {
        #global-countdown-timer {
            font-size: 20px;
        }

        .booking-form-container .form-header .show-name {
            font-size: 24px;
        }

        .booking-form-container .section-title,
        .input-group label,
        .input-group input,
        .order-summary .summary-details .detail-row,
        .order-summary .summary-details .detail-row .value.yellow-text,
        .total-box,
        .order-summary .total-box .total-amount,
        .button-group button {
            font-size: 20px;
        }

        .order-summary .summary-details .detail-row .label {
            font-size: 20px !important;
        }

        .checkbox-group {
            font-size: 16px;
        }
    }

/* Source: Views/BookTicket/_Payment.cshtml */
.booking-form-container { background-color: var(--container-calendar); color: #ffffff; padding: 0 0 30px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 50px auto 0; border-radius: 8px; width: 100%; }
    .form-header { display: flex; justify-content: space-between; border-bottom: 1px solid #444; margin-bottom: 30px; color: #ccc; padding: 20px 30px; background-color: var(--header-calendar); border-top-left-radius: 8px; border-top-right-radius: 8px; font-size: 24px; }
    .form-header .show-name{font-weight:700}
    .form-header .show-name,.form-header .show-time{color:var(--weekday-calendar)}
    .form-body { display: flex; gap: 60px; padding: 0 30px; }
    .customer-info, .order-summary { flex: 1; }
    .section-title { color: var(--card__subtitle-color); /* Màu vàng Gold */ margin-bottom: 20px; border-bottom: 1px dotted #666; padding-bottom: 10px; font-size: 26px; }
    .input-group { margin-bottom: 20px; }
    .input-group label { display: block; margin-bottom: 8px; font-size: 20px; color: var(--input-group-label-color); }
    .required { color: #ff6b6b; }
    .input-group input{width:100%;padding:12px;background-color:var(--input-group-input-bg-color);border:none;border-radius:4px;color:var(--primary-color);box-sizing:border-box}
    .checkbox-group{font-size:16px;display:flex;align-items:center;gap:8px;color:var(--weekday-calendar)}
    .checkbox-group a{color:var(--primary-color);text-decoration:underline}
    .summary-details .detail-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 15px; }
    .yellow-text{color:var(--yellow-text-color);font-weight:700;font-size:22px}
    .total-box{border:1px solid var(--primary-color);padding:15px;display:flex;justify-content:space-between;align-items:center;margin-top:30px;border-radius:4px;color:var(--weekday-calendar)}
    .total-amount { font-size: 20px; font-weight: bold; }
    .button-group { display: flex; gap: 15px; margin-top: 25px; }
    .button-group button { flex: 1; padding: 10px 15px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: 0.3s; }
    .btn-back { background-color: #777; color: white; }
    .btn-submit { background-color: #c4a661; color: white; }
    .btn-submit:hover:not(:disabled) { background-color: #d4b775; }
    .btn-submit:disabled { background-color: #777; color: #bbb; cursor: not-allowed; opacity: 0.7; }
    .detail-row .label { color: var(--input-group-label-color); }
    @media (max-width: 768px) { .form-body { flex-direction: column; gap: 40px; } .form-header { flex-direction: column; gap: 10px; } }

/* Source: Views/BookTicket/_Payment.cshtml */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Son Media booking flow — Figma frames 169:640, 169:1014, 169:2527 and 169:2622 */
.book-ticket-page {
    --booking-page-bg: #4d4d4d;
    --booking-panel-bg: #424242;
    --booking-panel-header-bg: #2c2c2c;
    --booking-divider: #5c5c5c;
    --booking-text: #ffffff;
    --booking-text-muted: rgba(212, 212, 212, 0.68);
    --booking-red: #e03c31;
    --booking-red-dark: #a60a00;
    --booking-orange: #f59e0b;
    --booking-green: #7a9c59;
    --booking-step-inactive-bg: #737373;
    --booking-step-active-bg: var(--booking-red);
    --booking-step-number-bg: #2c2c2c;
    --booking-step-label-active: #ffffff;
    --booking-step-label-inactive: #d4d4d4;
    --container-calendar: var(--booking-panel-bg);
    --header-calendar: var(--booking-panel-header-bg);
    --weekday-calendar: #d4d4d4;
    --card__subtitle-color: #ffffff;
    --card__desc-color: #d4d4d4;
    --input-group-label-color: var(--booking-text-muted);
    --input-group-input-bg-color: #ffffff;
    --yellow-text-color: #ffffff;
    --btn-booking-bg-color: var(--booking-red);
    --btn-booking-color: #ffffff;
    --primary-color: var(--booking-red);
    min-height: 760px;
    padding-bottom: 100px;
    background: var(--booking-page-bg);
    color: var(--booking-text);
    font-family: "Roboto", Arial, sans-serif;
}

.booking-timer--hidden {
    display: none;
}

.book-ticket-page .calendar-days {
    display: contents;
}

.book-ticket-page .payment-pending-state {
    margin: 80px auto;
    text-align: center;
}

.book-ticket-page .payment-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border: 6px solid rgba(212, 212, 212, 0.25);
    border-left-color: var(--booking-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.book-ticket-page .payment-pending-message {
    color: var(--booking-text-muted);
    line-height: 1.6;
}

.book-ticket-page .sale-time {
    color: #d4d4d4;
    font-size: 18px;
}

.book-ticket-page #seat-type-summary {
    float: right;
    color: var(--booking-text-muted);
    font-size: 16px;
    font-weight: 400;
}

.book-ticket-page .clearfix {
    clear: both;
}

.book-ticket-page .empty-seat-message {
    margin: 16px 0;
    color: var(--booking-text-muted);
    text-align: center;
}

.book-ticket-page .dot {
    background-color: var(--seat-color, transparent);
}

.book-ticket-page .dot.reserved {
    background-color: #767683;
}

.book-ticket-page .dot.selecting {
    background-color: #ff5d60;
}

.book-ticket-page .ticket-item {
    background-color: var(--seat-color);
    color: #ffffff;
}

.book-ticket-page .timer-container {
    background: var(--booking-green);
}

.book-ticket-page .sub-page__title.section__title_primary {
    color: #ffffff;
}

.book-ticket-page .btn-submit,
.book-ticket-page .btn-step-next,
.book-ticket-page .btn-gold {
    background: var(--booking-red);
    color: #ffffff;
}

.book-ticket-page .btn-submit:hover:not(:disabled),
.book-ticket-page .btn-step-next:hover:not(:disabled),
.book-ticket-page .btn-gold:hover:not(:disabled) {
    background: var(--booking-red-dark);
}

.book-ticket-page .btn-submit:disabled,
.book-ticket-page .btn-step-next:disabled,
.book-ticket-page .btn-gold:disabled {
    background: #737373;
    color: rgba(255, 255, 255, 0.65);
    opacity: 1;
}

.book-ticket-page .btn-back,
.book-ticket-page .btn-step-back {
    background: #737373;
    color: #ffffff;
}

@media (min-width: 577px) {
    body.sub-page {
        background: #4d4d4d;
    }

    .book-ticket-page > .container {
        max-width: 1230px;
    }

    .book-ticket-page .sub-page__title.section__title_primary {
        margin: 44px 0 30px;
        font-size: 36px;
        line-height: 48px;
        font-weight: 600;
    }

    .book-ticket-page .stepper-container {
        max-width: 900px;
        margin: 0 auto 36px;
    }

    .book-ticket-page .stepper {
        margin: 0;
        padding: 0;
    }

    .book-ticket-page .step {
        min-height: 50px;
        padding: 7px 34px 7px 0;
        background: #737373;
        color: #d4d4d4;
    }

    .book-ticket-page .step-outer.active .step {
        background: var(--booking-red);
        color: #ffffff;
    }

    .book-ticket-page .step .label {
        color: inherit;
        font-size: 20px;
        line-height: 36px;
    }

    .book-ticket-page .number {
        width: 50px;
        height: 50px;
        left: 24px;
        background: #2c2c2c;
        color: #ffffff;
        font-size: 28px;
        box-shadow: none;
    }

    .book-ticket-page .step-outer.active .number {
        background: var(--booking-red-dark);
        color: #ffffff;
        box-shadow: none;
    }

    .book-ticket-page .calendar-container,
    .book-ticket-page .booking-form-container,
    .book-ticket-page .box-ticket-container {
        background: var(--booking-panel-bg);
        box-shadow: none;
    }

    .book-ticket-page .calendar-container {
        margin-top: 0;
        border-radius: 8px;
    }

    .book-ticket-page .calendar-header,
    .book-ticket-page .form-header,
    .book-ticket-page .pick-seat-header {
        border-bottom: 1px solid var(--booking-divider);
        background: var(--booking-panel-header-bg);
        color: #ffffff;
    }

    .book-ticket-page .calendar-header {
        margin-bottom: 0;
        padding: 20px 30px;
    }

    .book-ticket-page .calendar-header h2,
    .book-ticket-page .calendar-header .nav-btn,
    .book-ticket-page .nav-controls span,
    .book-ticket-page .form-header .show-name,
    .book-ticket-page .form-header .show-time,
    .book-ticket-page .pick-seat-header .show-name,
    .book-ticket-page .pick-seat-header .show-time {
        color: #ffffff;
    }

    .book-ticket-page .calendar-header h2 {
        font-size: 28px;
    }

    .book-ticket-page .calendar-grid {
        padding: 22px 30px 30px;
    }

    .book-ticket-page .weekday {
        color: #d4d4d4;
        font-size: 18px;
    }

    .book-ticket-page .day-cell {
        min-height: 104px;
        border-top-color: var(--booking-divider);
    }

    .book-ticket-page .day-number {
        color: rgba(212, 212, 212, 0.7);
    }

    .book-ticket-page .time-btn {
        background: #5c5c5c;
        color: #ffffff;
    }

    .book-ticket-page .time-btn:hover {
        background: #737373;
    }

    .book-ticket-page .time-btn.selected {
        background: var(--booking-red);
        color: #ffffff;
    }

    .book-ticket-page .day-cell.active-date {
        outline-color: var(--booking-red);
        background: rgba(224, 60, 49, 0.08);
    }

    .book-ticket-page #step-content > .container > .button-group {
        margin: 30px auto 0;
    }

    .book-ticket-page #btnPickDateNext {
        width: 351px;
        min-height: 50px;
        flex: 0 0 351px;
        border-radius: 5px;
        font-size: 20px;
    }

    .book-ticket-page .pick-seat-header {
        max-width: 1400px;
        margin-top: 0;
        padding: 20px 30px;
    }

    .book-ticket-page .box-ticket-container {
        color: #ffffff;
    }

    .book-ticket-page .seat-map-section {
        border-right-color: var(--booking-divider);
    }

    .book-ticket-page .legend-item,
    .book-ticket-page .info-time p,
    .book-ticket-page .selected-summary h3,
    .book-ticket-page .total-box {
        color: #ffffff;
    }

    .book-ticket-page .legend-item {
        font-weight: 400;
    }

    .book-ticket-page .sidebar-section .title {
        color: #ffffff;
    }

    .book-ticket-page .selected-summary h3 {
        border-bottom-color: var(--booking-divider);
    }

    .book-ticket-page .total-box {
        border-color: var(--booking-red);
    }

    .book-ticket-page .booking-form-container {
        margin-top: 0;
        padding-bottom: 30px;
    }

    .book-ticket-page .form-header {
        margin-bottom: 30px;
    }

    .book-ticket-page .section-title {
        color: #ffffff;
        border-bottom-color: var(--booking-divider);
    }

    .book-ticket-page .input-group label,
    .book-ticket-page .detail-row .label,
    .book-ticket-page .checkbox-group {
        color: var(--booking-text-muted);
    }

    .book-ticket-page .input-group input {
        min-height: 46px;
        background: #ffffff;
        color: #434343;
    }

    .book-ticket-page .input-group input:focus {
        outline: 2px solid var(--booking-red);
        outline-offset: 1px;
    }

    .book-ticket-page .yellow-text,
    .book-ticket-page .summary-details .value.yellow-text {
        color: #ffffff;
    }

    .book-ticket-page .checkbox-group a {
        color: var(--booking-orange);
    }

    .book-ticket-page .button-group button,
    .book-ticket-page .btn-step {
        min-height: 50px;
        border-radius: 5px;
    }
}

@media (max-width: 576px) {
    .book-ticket-page {
        --booking-step-active-bg: #e03c31;
        --booking-step-label-active: #e03c31;
        padding-bottom: 0;
        background: #ffffff;
        color: #393b3d;
    }

    .book-ticket-page .sub-page__title.section__title_primary {
        color: #393b3d;
    }

    .book-ticket-page .step-outer.active .step,
    .book-ticket-page .step-outer.active .number,
    .book-ticket-page .mobile-time-btn.selected,
    .book-ticket-page .button-group .btn-submit,
    .book-ticket-page .btn-step-next,
    .book-ticket-page .btn-gold {
        background: #e03c31 !important;
        color: #ffffff !important;
    }

    .book-ticket-page .stepper-mb .mb-step.active,
    .book-ticket-page .mobile-show-title,
    .book-ticket-page .checkbox-group a {
        color: #e03c31;
    }

    .book-ticket-page .timer-container {
        background: #7a9c59;
    }
}