.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;
        }
    }

.booking-form-container {
    --invoice-panel-bg: rgba(255, 255, 255, 0.06);
    --invoice-text: var(--weekday-calendar);
    --invoice-label: var(--input-group-label-color);
    --invoice-input-bg: var(--input-group-input-bg-color);
    --invoice-border: var(--primary-color);
}

[data-theme="light"] .booking-form-container {
    --invoice-panel-bg: #ececec;
}

.booking-form-container .form-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 60px;
    row-gap: 0;
}

.booking-form-container .customer-info,
.booking-form-container .order-summary {
    min-width: 0;
}

.booking-form-container .booking-terms,
.booking-form-container .invoice-section,
.booking-form-container .button-group {
    grid-column: 1 / -1;
}

.booking-form-container .booking-terms {
    margin-top: 12px;
}

.booking-form-container .invoice-section {
    margin-top: 12px;
    padding: 9px 16px;
    border: 1px dashed var(--invoice-border);
    border-radius: 5px;
    background: var(--invoice-panel-bg);
    color: var(--invoice-text);
}

.booking-form-container .invoice-request-row,
.booking-form-container .invoice-confirm-row,
.booking-form-container .invoice-save-row {
    margin: 0;
    align-items: center;
    color: var(--invoice-text);
}

.booking-form-container .invoice-fields[hidden] {
    display: none;
}

.booking-form-container .invoice-fields {
    padding: 16px 8px 6px;
    border-top: 1px dotted var(--invoice-border);
    margin-top: 16px;
}

.booking-form-container .invoice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 60px;
    row-gap: 14px;
}

.booking-form-container .invoice-grid .input-group {
    margin: 0;
    min-width: 0;
}

.booking-form-container .invoice-grid label {
    display: block;
    margin-bottom: 3px;
    color: var(--invoice-label);
}

.booking-form-container .input-group label,
.booking-form-container .order-summary .summary-details .detail-row .label {
    color: var(--invoice-label);
}

.booking-form-container .checkbox-group input {
    accent-color: var(--primary-color);
}

.booking-form-container .invoice-grid input {
    width: 100%;
    height: 45px;
    padding: 4px 12px;
    background: var(--invoice-input-bg);
    color: var(--primary-color);
    border: 1px solid transparent;
    border-radius: 5px;
}

.booking-form-container .invoice-grid input:focus-visible,
.booking-form-container .checkbox-group input:focus-visible {
    outline: 2px solid var(--invoice-border);
    outline-offset: 2px;
}

.booking-form-container .invoice-grid input.is-invalid {
    border-color: #d5161b;
}

.booking-form-container .invoice-field-error {
    display: block;
    min-height: 18px;
    color: #d5161b;
    font-size: 14px;
    line-height: 18px;
}

.booking-form-container .invoice-field-error:empty {
    min-height: 0;
}

.booking-form-container .invoice-confirm-row,
.booking-form-container .invoice-save-row {
    margin-top: 14px;
}

.booking-form-container .button-group {
    justify-content: center;
}

.booking-form-container .button-group button {
    flex: 0 1 165px;
}

@media (max-width: 768px) {
    .booking-form-container .form-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .booking-form-container .customer-info,
    .booking-form-container .order-summary,
    .booking-form-container .booking-terms,
    .booking-form-container .invoice-section,
    .booking-form-container .button-group {
        grid-column: 1;
    }

    .booking-form-container .invoice-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .booking-form-container .customer-info,
    .booking-form-container .order-summary {
        display: flex;
        flex-direction: column;
        background: var(--container-calendar);
        border-radius: 5px;
    }

    .booking-form-container .customer-info .input-group,
    .booking-form-container .summary-details,
    .booking-form-container .total-box::before,
    .booking-form-container .section-title {
        background: var(--container-calendar);
    }

    .booking-form-container .customer-info .input-group input,
    .booking-form-container .total-box {
        background: var(--invoice-input-bg);
        color: var(--primary-color);
    }

    .booking-form-container .section-title,
    .booking-form-container .form-header .show-name,
    .booking-form-container .order-summary .summary-details .detail-row .value.yellow-text,
    .booking-form-container .order-summary .total-box .total-amount {
        color: var(--invoice-text);
    }

    .booking-form-container .booking-terms {
        margin-top: 20px;
        order: 0;
    }

    .booking-form-container .invoice-section {
        padding: 8px 10px;
    }

    .booking-form-container .invoice-fields {
        padding: 12px 5px 6px;
    }

    .booking-form-container .invoice-grid label {
        font-size: 20px;
        line-height: 28px;
    }

    .booking-form-container .invoice-grid input {
        font-size: 20px;
    }

    .booking-form-container .button-group button {
        flex: auto;
    }
}

    @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;
        }
    }