/* =========================================================
   RUBIK NAILS & BEAUTY - PERFECT QUIET LUXURY CSS
   ========================================================= */

/* 1. ĐẶT MÀU NỀN & CHỮ CƠ BẢN */
body, #main, div.ui-widget-content, #sb_booking_content, .v-application {
    background-color: #F4EFE7 !important;
    color: #292725 !important;
    font-family: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
}

#main h1, #main h2, #main h3, #main h4, #main h5, .section-title {
    color: #66594E !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* 2. SỬA LỖI HIỂN THỊ BANNER & ẨN CHỮ LẶP */
.company-title-wrapper, .sb-company-title {
    margin-top: 150px !important;
    color: #66594E !important;
}
div[id*="about"] [class*="title"], div[class*="about"] [class*="title"], .about-company h1 {
    display: none !important;
}

/* 3. THẺ DỊCH VỤ (SERVICE CARDS) */
#events .event, .sb-service-card { 
    background-color: #FFFFFF !important; 
    border: 1px solid #EAEAEA !important; 
    border-radius: 8px !important; 
}
#events .event .price, .sb-service-card .price { color: #292725 !important; font-weight: 700 !important; }
#main span.read-more { color: #292725 !important; -webkit-text-fill-color: #292725 !important; text-decoration: underline !important; }

/* 4. NÚT CTA (AUSWÄHLEN, BUCHEN...) */
#main .btn:not(.time-item):not(.sb-time-btn), #main button.sb-btn {
    background-color: #66594E !important; 
    color: #FFFFFF !important;
    border-radius: 4px !important;
}

/* ========================================================= */
/* 5. GIAO DIỆN LỊCH VÀ MÀU SẮC NGÀY THÁNG                  */
/* ========================================================= */

html body .ui-datepicker td,
html body .ui-datepicker td a,
html body .ui-datepicker td span,
html body .sb-calendar .sb-date-box,
html body .sb-calendar .sb-available-date,
html body .sb-calendar .sb-unavailable-date,
html body .calendar-cell {
    background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important;
}

html body .ui-datepicker-header *,
html body .sb-calendar-header *,
html body .ui-datepicker th,
html body .ui-datepicker th span {
    color: #292725 !important; -webkit-text-fill-color: #292725 !important; font-weight: bold !important;
}

/* Ngày CÒN TRỐNG (Xanh lục thẫm) */
html body .ui-datepicker td:not(.ui-state-disabled) .ui-state-default,
html body .sb-calendar .sb-available-date:not(.sb-active),
html body .calendar-cell:not(.disabled):not(.selected) {
    color: #2D6A4F !important; -webkit-text-fill-color: #2D6A4F !important; font-weight: 700 !important; opacity: 1 !important;
}

/* Ngày HẾT CHỖ (Đỏ gạch nhạt) */
html body .ui-datepicker td.ui-state-disabled .ui-state-default,
html body .sb-calendar .sb-unavailable-date,
html body .calendar-cell.disabled,
html body .calendar-cell.disabled span {
    color: #B5655D !important; -webkit-text-fill-color: #B5655D !important; font-weight: 500 !important; opacity: 0.6 !important;
}

/* Ngày ĐANG CHỌN (Nền Champagne) */
html body .ui-datepicker td.ui-state-active .ui-state-default,
html body .sb-calendar .sb-date-box.sb-active,
html body .sb-calendar .sb-available-date.sb-active,
html body .calendar-cell.selected {
    background-color: #B99A6A !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-radius: 4px !important;
}

/* ========================================================= */
/* 6. KHỐI GIỜ CÒN TRỐNG (AVAILABLE) -> XANH LỤC THẪM        */
/* ========================================================= */

html body .time-item:not(.disabled):not(.booked),
html body .time-slot:not(.disabled):not(.booked),
html body .time-cell.available,
html body .v-application div[class*="time"] button.v-btn:not(.v-btn--disabled),
html body .v-application .sb-step-time button.v-btn:not(.v-btn--disabled) {
    background-color: #2D6A4F !important;
    border: 1px solid #2D6A4F !important;
    background-image: none !important;
}

html body .time-item:not(.disabled):not(.booked) *,
html body .time-slot:not(.disabled):not(.booked) *,
html body .time-cell.available *,
html body .v-application div[class*="time"] button.v-btn:not(.v-btn--disabled) *,
html body .v-application .sb-step-time button.v-btn:not(.v-btn--disabled) * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-decoration: none !important;
}

html body .time-item:not(.disabled):not(.booked):hover, 
html body .v-application div[class*="time"] button.v-btn:not(.v-btn--disabled):hover {
    background-color: #1B4332 !important;
}

#main .sb-legend-color, #main .circle-color, #main span[style*="background-color: rgb(45, 106, 79)"], #main span[style*="background-color:#2D6A4F"], #main .sb-available-color {
    background-color: #2D6A4F !important; background: #2D6A4F !important; border-color: #2D6A4F !important;
}