:root {
    --main: #0CAE74;
    --border: #e9e9e9;
    --muted: #6b7280;
    --bg: #f7fffb;
    --fw-title: 700;
    --fw-step: 700;
    --fw-label: 700;
    --fw-normal: 500;
    --fw-strong: 600;
}

.booking-wrapper {
    background: radial-gradient(900px 420px at 15% 10%, rgba(12,174,116,.12) 0%, rgba(255,255,255,1) 55%), linear-gradient(135deg,#f7fffb,#fff);
    padding: 28px 0;
}

.booking-shell {
    /* max-width:980px; */
    /* margin:0 auto; */
}

.booking-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: px;
    box-shadow: 0 14px 40px rgba(16,24,40,.08);
    border-radius: 10px;
    border-color: rgb(1 122 72 / 36%);
}

/* Title */
.title-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.title-main {
    margin: 0;
    font-weight: var(--fw-title);
    letter-spacing: .1px;
    color: #017A48;
    text-transform: uppercase;
    font-weight: 800;
    color: #099E69 !important;
    font-size: 22px;
    font-weight: 900;
    font-family: var(--title-font);
}

.title-sub {
    margin: 2px 0 0;
    color: var(--muted);
    font-weight: var(--fw-normal);
    font-size: .90rem;
    font-size: 17px;
    color: rgb(17, 61, 72);
}

/* Stepbar */
.stepbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #eefaf4;
    border-radius: 18px;
    background: linear-gradient(180deg,#fff,#fbfbfb);
    background: #;
    margin-bottom: 14px;
    border-radius: 10px;
    background: #eefaf4;
}

.stepdot {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-strong);
    border: 1.5px solid var(--border);
    color: #64748b;
    background: #fff;
    /* border-radius: 10px; */
}

.stepdot.active {
    border-color: rgba(12,174,116,.35);
    background: rgba(12,174,116,.08);
    color: var(--main);
    background: #099E69;
    color: #fff;
    background: #0CAE74;
}

.steptext {
    font-weight: var(--fw-step);
    color: #111827;
    font-size: 17px;
    font-weight: 600;
}

.steptext small {
    display: block;
    font-weight: var(--fw-normal);
    color: var(--muted);
    margin-top: 1px;
    font-size: .78rem;
}

.stepsep {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg,#eaeaea,#f4f4f4);
    border-radius: 999px;
    background: #008e39;
}

/* Inputs */
.modern-input {
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
    transition: .2s;
    background: #fff;
    font-weight: var(--fw-normal);
    font-size: .9rem;
}

.modern-input:focus {
    border-color: rgba(12,174,116,.55) !important;
    box-shadow: 0 0 0 .2rem rgba(12,174,116,.14) !important;
}

.labelx {
    font-weight: var(--fw-label);
    color: #111827;
    margin-bottom: 5px;
    font-size: .85rem;
}

/* Pills */
.pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: .18s;
    box-shadow: 0 4px 10px rgba(16,24,40,.05);
    font-weight: var(--fw-strong);
    color: #0f172a;
    user-select: none;
    min-width: 92px;
    font-size: .85rem;
}

.pill:hover {
    transform: translateY(-.5px);
    border-color: rgba(12,174,116,.35);
    box-shadow: 0 6px 14px rgba(12,174,116,.10);
}

.pill input {
    display: none;
}

.pill.is-checked {
    border-color: rgba(12,174,116,.45);
    background: rgba(12,174,116,.06);
    color: var(--main);
    font-weight: var(--fw-strong);
}

/* Buttons */
.btn-next-step, .btn-submit-custom {
    border-radius: 18px;
    padding: 11px 14px;
    font-weight: var(--fw-strong);
    font-size: .95rem;
    background: var(--main);
    border: 0;
    color: #fff;
    transition: .18s;
    /*  box-shadow:0 14px 30px rgba(12,174,116,.20);*/
    font-weight: 500;
    border-radius: 10px;
    /* height: 40px; */
    height: 48px;
    background: #07875A;
}

.btn-submit-custom:hover {
    color: #fff !important;
}

/* Section card */
.section-card {
    border: 1px solid #c7d3cd;
    border-radius: 20px;
    padding: 16px;
    background: linear-gradient(180deg, #fff, #fbfbfb);
    border-radius: 10px;
}

/* Time panel */
.time-panel {
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px;
    a background: linear-gradient(180deg,#ffffff,#f9fffc);
}

.time-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.time-head b {
    font-weight: var(--fw-strong);
    color: #0f172a;
    font-weight: 500;
}

.time-picked {
    font-weight: var(--fw-strong);
    color: #0f172a;
    padding: 6px 10px;
    border-radius: 14px;
    border: 1px dashed rgba(12,174,116,.45);
    background: rgba(12,174,116,.06);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    font-weight: 500;
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 992px) {
    .time-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stepbar {
        display: none;
    }
}

/* Slots */
.slot {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px 10px;
    background: #fff;
    text-align: left;
    transition: .18s;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16,24,40,.05);
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.slot:hover {
    transform: translateY(-.5px);
    border-color: rgba(12,174,116,.35);
    box-shadow: 0 6px 14px rgba(12,174,116,.10);
}

.slot.is-selected {
    border-color: rgb(12 174 116);
    background: linear-gradient( 180deg, #fff, #f3fff9);
    background: rgb(12 174 116);
    /* color: #fff; */
    /* background: rgba(12,174,116,.06); */
    /* background: #0CAE74; */
}

.slot .t {
    font-weight: var(--fw-strong);
    color: #0f172a;
    letter-spacing: .1px;
    font-size: .9rem;
    font-weight: 500;
    /* display: none; */
}

.slot .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.slot .dur {
    font-weight: var(--fw-normal);
    font-size: .72rem;
    color: var(--muted);
}

/* Badges */
.badge-ok, .badge-warn {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: var(--fw-strong);
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-ok {
    background: #eafff4;
    color: var(--main);
    border-color: rgba(12,174,116,.25);
}

.badge-warn {
    background: #fff7e6;
    color: #b45309;
    border-color: rgba(180,83,9,.2);
}

/* MR VIỆT nhận thấy telerik:RadDatePicker sinh ra input có class='riTextBox' */
.riTextBox {
    height: 30px!important;
}

/* mấy cái Teleric number nó có sinh ra thẻ input hidden này */
.rdfd_ {
    display: none;
}

.ModalPopupBackground {
    position: fixed;
    inset: 0;
    background: rgba(15, 71, 125, 0.35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000 !important;
}

.RadPicker_Default a.rcCalPopup:hover, .RadPicker_Default a.rcCalPopup:focus, .RadPicker_Default a.rcCalPopup:active {
    background-position: 0 0 !important;
}

.RadPicker_Default .rcCalPopup, .RadPicker_Default .rcTimePopup {
    background-image: url(WebResource.axd?d=ydsXvGR4aYp_Gg771xGOGgBEASUdHx-3nTeeKnKdbgfnroXZb8jCQlhMZhK4apkq7cl8ohNEPwmMGr8oXu8hmEUJpXIF0dVcGlD0zeKhuXwxOHD03fNzfurrGbrUWulvH7iNJlvaf3OPSu67-epPrwrRUbedcqoXu2Wsv3_khlo1&t=635685825008222656);
    background-image: url(/Media/calendar.svg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z' stroke='%23017a48' stroke-width='1.5'/%3E%3Cpath d='M7 4V2.5' stroke='%23017a48' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M17 4V2.5' stroke='%23017a48' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2.5 9H21.5' stroke='%23017a48' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17Z' fill='%23017a48'/%3E%3Cpath d='M18 13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13Z' fill='%23017a48'/%3E%3Cpath d='M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z' fill='%23017a48'/%3E%3Cpath d='M13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13Z' fill='%23017a48'/%3E%3Cpath d='M8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17Z' fill='%23017a48'/%3E%3Cpath d='M8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13Z' fill='%23017a48'/%3E%3C/svg%3E") !important;
}

html body .RadInput_Default .riTextBox, html body .RadInputMgr_Default {
    border-color: #8e8e8e #b8b8b8 #b8b8b8 #8e8e8e;
    background: #fff;
    color: #000;
    font: 12px "segoe ui", arial, sans-serif;
    height: 40px !important;
    font-size: var(--fs-body, 16px) !important;
    padding: 5px;
    padding: 0 30px 0 10px !important;
    /* border: 1px solid #0CAE74 !important; */
    border: 1px solid rgb(1, 122, 72) !important;
}

.form-control {
    color: #212529;
    /* màu chữ khi đã nhập */
}

.form-control::placeholder {
    color: var(--muted);
    opacity: 1;
}

.form-select {
    color: #212529;
    /* màu khi đã chọn */
}

/* Khi đang ở option placeholder */
.form-select option[value=""] {
    color: var(--muted);
}

/* Khi select đang hiển thị placeholder */
.form-select:has(option[value=""]:checked) {
    color: var(--muted);
}

/* ===== OPTION PILL – MEDICAL CLEAN ===== */
.option-group {
    margin-bottom: 1rem;
}

.option-group-title {
    font-size: var(--fs-body, 16px);
    font-weight: 600;
    color: #113d48;
}

.option-buttons {
    display: flex;
    gap: 6px;
}

.option-btn {
    padding: 6px 14px;
    font-size: var(--fs-small, 14px);
    border-radius: 999px;
    border: 1px solid #d0d7de;
    background: #fff;
    color: #444;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    /* color: #113d48; */
}

.option-btn:hover {
    border-color: #2e7d32;
    background: #f4fbf6;
}

.option-btn.selected {
    background: #099E69;
    border-color: #099E69;
    color: #ffffff;
    font-weight: 500;
    font-size: var(--fs-small, 14px);
    background: #0CAE74;
    border-color: #0CAE74;
}

.option-btn:active {
    transform: scale(0.97);
}

@media (max-width: 768px) {
    .option-btn {
        padding: 6px 10px;
        font-size: var(--fs-body, 16px);
    }
}

/* ===== GENDER PILL CLEAN ===== */
.gender-group .option-buttons {
    display: flex;
    gap: 6px;
}

.gender-group .option-btn {
    padding: 6px 12px;
    font-size: var(--fs-small, 14px);
    border-radius: 999px;
    border: 1px solid #d0d7de;
    background: #fff;
    color: #444;
    font-weight: 600;
    transition: all 0.2s ease;
}

.gender-group .option-btn:hover {
    border-color: #2e7d32;
    background: #f4fbf6;
}

.gender-group .option-btn.selected {
    background: #099E69;
    border-color: #099E69;
    color: #ffffff;
    font-weight: 500;
    background: #0CAE74;
    border-color: #0CAE74;
}

.booking-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.booking-content {
    flex: 1;
    min-width: 0;
}

.stepbar.stepbar-vertical {
    width: 260px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    margin-bottom: 0;
    position: static;
    top: 20px;
}

.stepbar-vertical .step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.stepbar-vertical .stepsep-vertical {
    flex: none;
    width: 2px;
    height: 34px;
    margin-left: 16px;
    border-radius: 999px;
    background: #008e39;
}

@media (max-width: 768px) {
    .booking-layout {
        flex-direction:column;
    }

    .stepbar.stepbar-vertical {
        width: 100%;
        position: static;
    }
}

@media (max-width: 576px) {
    .stepbar.stepbar-vertical {
        display:none;
    }
}

.time-len {
    color: rgba(80, 80, 80, 0.82);
    display: none;
}

.is-selected .time-len {
    color: #fff !important;
}

.is-selected .t {
    color: #fff !important;
}