/* ===== FONTS (Menscape brand) ===== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap');

/* Inter เป็น body font ทั่วทั้งเว็บ */
body, body * {
    font-family: 'Inter', 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Anton สำหรับ headlines / titles / display text */
h1, h2, h3, h4, h5, h6,
.title, .title-main, .title-sub, .cap, .name,
.company-name,
.modal-title, .empty-step__title,
.cap.short, .cap.full,
#events h3,
.sb-title {
    font-family: 'Anton', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

/* บังคับ FontAwesome ไม่ให้โดน override (ไอคอนยังทำงาน) */
.fa, .fas, .far, .fal, .fab, .fi,
i.fa, i.fas, i.far, i.fal, i.fab, i.fi,
[class*=" fa-"], [class^="fa-"],
[class*=" flaticon-"], [class^="flaticon-"] {
    font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Pro',
                 'Font Awesome 6 Free', 'Font Awesome 6 Pro' !important;
}
.fal, i.fal { font-weight: 300 !important; }
.far, i.far { font-weight: 400 !important; }
.fa, .fas, i.fa, i.fas { font-weight: 900 !important; }
.fab, i.fab { font-family: 'Font Awesome 5 Brands', 'Font Awesome 6 Brands' !important; font-weight: 400 !important; }

#main #main-buttons,
#main #main-buttons.default-bg {
    min-height: 600px !important;
    padding: 28px 28px !important;
}

#main #main-buttons .wrapper {
    min-height: 600px !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#main #main-buttons .company-name {
display: none !important;
}

#main-buttons .wrapper .inner .bar {
justify-content: flex-end !important;
margin-top: 300px;
}

/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}

/* ===== CATEGORY / SERVICE / PROVIDER CARDS (Menscape brand style) ===== */

/* Container: flex layout + gap ระหว่างการ์ด */
#sb_category_step_container,
#sb_service_step_container,
#sb_provider_step_container,
#sb_location_step_container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    align-items: stretch !important;
}
#sb_category_step_container > .item,
#sb_service_step_container > .item,
#sb_provider_step_container > .item,
#sb_location_step_container > .item {
    flex: 1 1 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    min-width: 280px !important;
    margin: 0 !important;
}

/* Card — white background, rounded, shadow */
.category-item.item,
.service-item.item,
.provider-item.item,
.location-item.item {
    background: #FFFFFF !important;
    border: 1px solid #EBEBEB !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 24px rgba(10, 20, 56, 0.06) !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.category-item.item:hover,
.service-item.item:hover,
.provider-item.item:hover,
.location-item.item:hover {
    border-color: #B8D7FD !important;
    box-shadow: 0 12px 36px rgba(11, 117, 249, 0.18) !important;
    transform: translateY(-2px) !important;
}

/* Card structure */
.category-item .tab.tab-col,
.service-item .tab.tab-col,
.provider-item .tab.tab-col {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
.category-item .excerpt-info,
.service-item .excerpt-info,
.provider-item .excerpt-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* Icon area — light blue background */
.category-item .preloader,
.service-item .preloader,
.provider-item .preloader {
    background: #F4F8FF !important;
    padding: 32px 0 !important;
    text-align: center !important;
}
.category-item .preloader svg path,
.service-item .preloader svg path,
.provider-item .preloader svg path {
    fill: #0B75F9 !important;
}
.category-item .preloader svg,
.service-item .preloader svg,
.provider-item .preloader svg {
    width: 80px !important;
    height: 80px !important;
}

/* Tab-pd (content area) */
.category-item .tab-pd,
.service-item .tab-pd,
.provider-item .tab-pd {
    padding: 20px 24px 24px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
.category-item .tab-pd .content,
.service-item .tab-pd .content,
.provider-item .tab-pd .content { flex: 1 !important; }

/* Title — Anton uppercase navy */
.category-item .cap.short,
.service-item .cap.short,
.provider-item .cap.short,
.category-item .cap.full,
.service-item .cap.full,
.provider-item .cap.full,
.provider-item .name {
    font-family: 'Anton', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #0A1438 !important;
    margin: 0 0 8px 0 !important;
}

/* Description */
.category-item .txt.short,
.service-item .txt.short,
.provider-item .txt.short,
.category-item .txt.full,
.service-item .txt.full,
.provider-item .txt.full {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #1B1B1B !important;
    margin-bottom: 12px !important;
}

/* Select button — blue pill */
.category-item .btn-bar,
.service-item .btn-bar,
.provider-item .btn-bar {
    margin-top: 16px !important;
}
.btn.select.custom {
    background: #0B75F9 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0 !important;
    box-shadow: 0 4px 14px rgba(11, 117, 249, 0.35) !important;
    transition: all 0.2s !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
.btn.select.custom a {
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 14px 28px !important;
    text-decoration: none !important;
    display: block !important;
}
.btn.select.custom:hover {
    background: #095fd0 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(11, 117, 249, 0.45) !important;
}

/* Price/Duration badges (Service step) */
.bar-service .badge.price,
.bar-service .badge.price.right {
    background: #F4F8FF !important;
    color: #0B75F9 !important;
    border: 1px solid #B8D7FD !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
}
.bar-service .time {
    color: #1B1B1B !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Mobile */
@media (max-width: 640px) {
    #sb_category_step_container > .item,
    #sb_service_step_container > .item,
    #sb_provider_step_container > .item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}


.category-item .preloader,
.service-item .preloader,
.provider-item .preloader,
.location-item .preloader {
    display: none !important;
}

.category-item .tab,
.service-item .tab,
.provider-item .tab,
.category-item .excerpt-info,
.service-item .excerpt-info,
.provider-item .excerpt-info,
.category-item .tab-pd,
.service-item .tab-pd,
.provider-item .tab-pd {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

.btn.select.custom {
    background: #0B75F9 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    box-shadow: 0 4px 14px rgba(11, 117, 249, 0.35) !important;
    transition: all 0.2s !important;
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
}
.btn.select.custom a {
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.btn.select.custom:hover {
    background: #095fd0 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(11, 117, 249, 0.45) !important;
}

#main-buttons .btn.map {
    display: none !important;
}

/* ===== STEPS TABS ===== */
.booking-info > ul.clearfix {
    background: #0A1438 !important;
    border-radius: 12px !important;
    padding: 4px !important;
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    gap: 4px !important;
    box-shadow: none !important;
}

.booking-info ul li.step_info_item {
    flex: 1 !important;
    list-style: none !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* Default — text ฟ้าอ่อน */
.booking-info ul li.step_info_item a {
    display: block !important;
    background: transparent !important;
    border: none !important;
    color: #A7CDFF !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    text-align: center !important;
    height: 100% !important;
    box-sizing: border-box !important;
}
.booking-info ul li.step_info_item a .title-small,
.booking-info ul li.step_info_item a .title-sub {
    color: inherit !important;
}

/* Active + Passed — bg ขาว + text navy */
.booking-info ul li.step_info_item.active a,
.booking-info ul li.step_info_item.passed a,
.booking-info ul li.step_info_item.filled a {
    background: #FFFFFF !important;
    color: #0A1438 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.booking-info ul li.step_info_item.active a .title-small,
.booking-info ul li.step_info_item.active a .title-sub,
.booking-info ul li.step_info_item.passed a .title-small,
.booking-info ul li.step_info_item.passed a .title-sub,
.booking-info ul li.step_info_item.filled a .title-small,
.booking-info ul li.step_info_item.filled a .title-sub {
    color: #0A1438 !important;
}

.booking-info ul li.step_info_item.active a,
.booking-info ul li.step_info_item.passed a,
.booking-info ul li.step_info_item.filled a {
    background: #FFFFFF !important;
    color: #0A1438 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.booking-info ul li.step_info_item {
    background: transparent !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.category-item .btn-bar,
.service-item .btn-bar,
.provider-item .btn-bar,
.location-item .btn-bar {
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    float: none !important;
}

.category-item .btn-bar .btn.select.custom,
.service-item .btn-bar .btn.select.custom,
.provider-item .btn-bar .btn.select.custom {
    float: none !important;
    margin: 0 !important;
}

/* เช็คเผื่อ float มาจาก btn select เอง */
.btn.select.custom {
    float: none !important;
}

/* ===== TIME STEP SIDEBAR — สีเท่านั้น ===== */

.timeline-sidebar .service-item.item {
    background: #0A1438 !important;
    color: #FFFFFF !important;
}

.timeline-sidebar .cap.short,
.timeline-sidebar .cap.full {
    color: #FFFFFF !important;
}

.timeline-sidebar .txt.short,
.timeline-sidebar .txt.full {
    color: #CBE2FD !important;
}

.timeline-sidebar .read-more {
    color: #A7CDFF !important;
}

.timeline-sidebar .bar-service .time,
.timeline-sidebar .bar-service .time span {
    color: #A7CDFF !important;
}

.timeline-sidebar .bar-service .badge.price,
.timeline-sidebar .bar-service .badge.price.right {
    background: rgba(11, 117, 249, 0.18) !important;
    color: #A7CDFF !important;
    border-color: transparent !important;
}

.timeline-sidebar .bar-service .badge.badge-deposit {
    color: #CBE2FD !important;
    border-color: transparent !important;
}

.timeline-sidebar .bar-service .badge.badge-deposit .text {
    color: #A7CDFF !important;
}


/* ===== PROVIDER CARD — Time step sidebar ===== */

.provider-item.item {
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid #EBEBEB !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(10, 20, 56, 0.06) !important;
}

/* รูปเต็มความกว้าง */
.provider-item .tab.tab-col > span {
    display: block !important;
    width: 100% !important;
}
.provider-item .photo.user {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

/* ข้อมูลใต้รูป */
.provider-item .excerpt-info {
    padding: 16px 18px !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* ชื่อหมอ */
.provider-item .name {
    font-family: 'Anton', 'Helvetica Neue', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #0A1438 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
}

/* Read more */
.provider-item .read-more {
    color: #0B75F9 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    display: inline-block !important;
    align-self: flex-start !important;
}
.provider-item .read-more:hover {
    color: #095fd0 !important;
    text-decoration: underline !important;
}

/* span ครอบรูป → ทำเป็น block + ขยายตามรูป */
.provider-item .tab.tab-col > span {
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    line-height: 0 !important;
}

/* รูป */
.provider-item .photo.user {
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

/* Card + ตัวห่อข้างใน — ห้ามจำกัดความสูง */
.provider-item.item,
.provider-item .tab.tab-col,
.provider-item .tab.tab-col > .excerpt-info {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* ===== Hide เฉพาะ category / service / location (มีแค่ไอคอน) ===== */
.category-item .preloader,
.service-item .preloader,
.location-item .preloader {
    display: none !important;
}

/* ===== PROVIDER — แสดงรูป + ปรับความสูง ===== */
.provider-item .preloader {
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    overflow: hidden !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.provider-item .preloader a,
.provider-item .preloader a.provider-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.provider-item .preloader .photo.user,
.provider-item .photo.user {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

/* ถ้าหมอไม่มีรูป (fallback svg) ก็ไม่ให้ขาด layout */
.provider-item .preloader .default.img {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F4F8FF !important;
}
.provider-item .preloader .default.img svg {
    width: 80px !important;
    height: 80px !important;
}
.provider-item .preloader .default.img svg path { fill: #0B75F9 !important; }

/* 3 cols สำหรับ provider step */
#sb_provider_step_container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    align-items: stretch !important;
}
#sb_provider_step_container > .item {
    flex: 1 1 calc(33.333% - 16px) !important;
    max-width: calc(33.333% - 16px) !important;
    min-width: 240px !important;
    margin: 0 !important;
}

/* ลดความสูงรูป + ปรับตำแหน่งให้เห็นใบหน้าชัดขึ้น */
.provider-item .preloader {
    height: 260px !important;
}
.provider-item .preloader .photo.user,
.provider-item .photo.user {
    background-position: center 25% !important;   /* เลื่อนกรอบให้เห็นหน้า ไม่โดนตัดที่คาง */
}

/* Tablet — 2 cols */
@media (max-width: 1024px) {
    #sb_provider_step_container > .item {
        flex: 1 1 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}

/* Mobile — 1 col */
@media (max-width: 640px) {
    #sb_provider_step_container > .item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    .provider-item .preloader { height: 320px !important; }
}

/* เอา padding/margin ออกให้รูปเต็มกว้าง */
.provider-item.item {
    overflow: hidden !important;
    padding: 0 !important;
}
.provider-item .tab.tab-col,
.provider-item .tab.tab-col.tab-with-popup {
    padding: 0 !important;
    margin: 0 !important;
}

/* preloader = container ของรูป — เต็ม + สูงขึ้น */
.provider-item .preloader {
    width: 100% !important;
    height: 340px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
.provider-item .preloader a,
.provider-item .preloader a.provider-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.provider-item .preloader .photo.user,
.provider-item .photo.user {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center 25% !important;
    background-repeat: no-repeat !important;
}

/* ลูกศร prev/next month + week — ทำให้เห็นชัดบน bg */
#sb_prev_month, #sb_next_month,
#sb_prev_date, #sb_next_date,
.sb-date-navigate {
    color: #0A1438 !important;
}
#sb_prev_month .fa, #sb_next_month .fa,
#sb_prev_date .fa, #sb_next_date .fa,
.sb-date-navigate .fa {
    color: #0B75F9 !important;
    font-size: 16px !important;
}
#sb_prev_month .txt, #sb_next_month .txt,
#sb_prev_date .txt, #sb_next_date .txt,
.sb-date-navigate .txt {
    color: #0A1438 !important;
    font-weight: 600 !important;
}

#sb_prev_month:hover, #sb_next_month:hover,
#sb_prev_date:hover, #sb_next_date:hover,
.sb-date-navigate:hover { opacity: 0.7 !important; }

body .sb-date-navigate .fa,
body .sb-date-navigate .fa::before,
body .sb-date-navigate .fa-angle-left,
body .sb-date-navigate .fa-angle-right,
body #sb_prev_month .fa,
body #sb_next_month .fa,
body #sb_prev_date .fa,
body #sb_next_date .fa,
body #sb_prev_month .fa::before,
body #sb_next_month .fa::before,
body #sb_prev_date .fa::before,
body #sb_next_date .fa::before {
    color: #0B75F9 !important;
    font-size: 16px !important;
}

/* ตัวหนังสือข้างๆ ลูกศร */
body .sb-date-navigate .txt,
body #sb_prev_month .txt,
body #sb_next_month .txt,
body #sb_prev_date .txt,
body #sb_next_date .txt {
    color: #0A1438 !important;
    font-weight: 600 !important;
}

/* iti dropdown arrow (triangle border trick) */
.iti__arrow {
    border-top-color: #0B75F9 !important;
}
.iti__arrow.iti__arrow--up {
    border-bottom-color: #0B75F9 !important;
    border-top-color: transparent !important;
}

/* ถ้าธีมใหม่ใช้ SVG แทน */
.iti__arrow svg,
.iti__arrow svg path {
    fill: #0B75F9 !important;
    color: #0B75F9 !important;
}

textarea.form-control {
    color: #0A1438 !important;
    border: 1.5px solid #0A1438 !important;
}
textarea.form-control:focus {
    border-color: #0B75F9 !important;
    box-shadow: 0 0 0 3px rgba(11, 117, 249, 0.15) !important;
    outline: none !important;
}

.form-control {
    color: #0A1438 !important;
    border-color: #0A1438 !important;
}

select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B75F9'><path d='M4.5 6l3.5 3.5L11.5 6z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 36px !important;
}

#main-buttons .btn.book {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}
#main-buttons .btn.book:hover {
    background: #F4F8FF !important;
    transform: translateY(-2px) !important;
}
#main-buttons .btn.book a {
    color: #0A1438 !important;
}

#main #main-buttons,
#main #main-buttons.default-bg {
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #0B75F9 !important;
    aspect-ratio: 1920 / 720 !important;   /* ใส่สัดส่วนรูปจริง */
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
}

#main #main-buttons .wrapper {
    height: 100% !important;
    min-height: 0 !important;
}


/* ทำให้ container เป็น position context */
#main #main-buttons {
    position: relative !important;
    overflow: visible !important;
}
#main #main-buttons .wrapper,
#main #main-buttons .inner {
    position: relative !important;
    height: 100% !important;
}

/* ปุ่มลอย bottom-right ตลอด ไม่ใช้ margin-top แล้ว */
#main-buttons .wrapper .inner .bar {
    position: absolute !important;
    bottom: 6% !important;
    right: 5% !important;
    margin-top: 0 !important;
    justify-content: flex-end !important;
}

/* Tablet — ขนาดปุ่มเล็กลง */
@media (max-width: 1024px) {
    #main-buttons .btn.book a {
        padding: 10px 20px !important;
        font-size: 12px !important;
    }
}

/* Mobile — ปุ่มเล็กกว่า + ขยับขึ้นนิด */
@media (max-width: 640px) {
    #main-buttons .wrapper .inner .bar {
        bottom: 4% !important;
        right: 4% !important;
    }
    #main-buttons .btn.book a {
        padding: 8px 14px !important;
        font-size: 10px !important;
        letter-spacing: 0.04em !important;
    }
}

/* ลบ rule absolute เดิมที่ผมเขียนให้ก่อนหน้าออก */

#main #main-buttons {
    position: relative !important;
}

#main #main-buttons .wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px !important;
}

#main #main-buttons .wrapper .inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
}

#main #main-buttons .wrapper .inner .bar {
    margin-top: auto !important;          /* ดันลงล่าง */
    margin-left: auto !important;         /* ดันไปขวา */
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
}

@media (max-width: 640px) {
    #main #main-buttons .wrapper { padding: 16px !important; }
    #main-buttons .btn.book a {
        padding: 8px 14px !important;
        font-size: 10px !important;
    }
}

/* FORCE position relative ให้ section hero — specificity สูงสุด */
html body #main #main-buttons,
html body #main section#main-buttons {
    position: relative !important;
    overflow: visible !important;
}

/* ปุ่มที่มุมขวา-กลาง (vertically centered, right aligned) */
html body #main #main-buttons .wrapper .inner .bar,
html body #main section#main-buttons .wrapper .inner .bar {
    position: absolute !important;
    top: 50% !important;
    right: 5% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ปุ่มใหญ่ขึ้น */
#main-buttons .btn.book {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}
#main-buttons .btn.book:hover {
    background: #F4F8FF !important;
    transform: translateY(-2px) !important;
}
#main-buttons .btn.book a {
    color: #0A1438 !important;
    padding: 18px 36px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Responsive ปุ่มเล็กลงตามจอ */
@media (max-width: 1024px) {
    #main-buttons .btn.book a {
        padding: 14px 28px !important;
        font-size: 13px !important;
    }
}
@media (max-width: 640px) {
    html body #main-buttons .wrapper .inner .bar { right: 4% !important; }
    #main-buttons .btn.book a {
        padding: 10px 18px !important;
        font-size: 11px !important;
    }
}

html body #main #main-buttons {
    position: relative !important;
}

/* บังคับ wrapper + inner เป็น static เพื่อไม่ใช่ parent ของ absolute */
html body #main-buttons .wrapper,
html body #main-buttons .wrapper .inner,
html body #main-buttons .container-fluid {
    position: static !important;
}

/* bar absolute สัมพันธ์กับ section hero โดยตรง */
html body #main #main-buttons .wrapper .inner .bar {
    position: absolute !important;
    top: 50% !important;
    right: 5% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ===== HERO BAR — Force right-center ===== */

/* บังคับ section เป็น position context */
html body #main #main-buttons,
html body #main section#main-buttons {
    position: relative !important;
    overflow: visible !important;
}

/* ห้าม wrapper/inner เป็น position parent */
html body #main #main-buttons > .container-fluid,
html body #main #main-buttons > .container-fluid > .wrapper,
html body #main #main-buttons .wrapper > .inner {
    position: static !important;
    margin: 0 !important;
}

/* Bar — RESET ทุก margin ที่เก่าๆ ค้าง + บังคับ absolute right-center */
html body #main #main-buttons .wrapper .inner .bar {
    position: absolute !important;
    top: 50% !important;
    right: 5% !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}

/* ฆ่า width: 100% บนปุ่มจาก theme */
html body #main-buttons .wrapper .inner .bar .btn,
html body #main-buttons .wrapper .inner .bar .btn a {
    width: auto !important;
    flex: 0 0 auto !important;
}

html body #main #main-buttons .wrapper .inner .bar {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 5% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}

/* ลบ media query เก่าที่ปรับ right: 130px ออก เพราะไม่ใช้แล้ว */
@media (min-width: 1600px) {
    html body #main #main-buttons .wrapper .inner .bar {
        right: auto !important;
        left: 50% !important;
    }
}

html body #main #main-buttons .wrapper .inner .bar {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 5% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}

html body #main section#main-buttons .wrapper .inner .bar,
html body #main section#main-buttons .wrapper .inner div.bar {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 5% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}

/* ===== FIX MODAL FLICKER ===== */

/* บังคับ modal เป็น fixed สัมพันธ์กับ viewport */
.service-item .modal,
.category-item .modal,
.provider-item .modal,
.location-item .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1050 !important;
}

/* ปลด overflow:hidden ของ card */
.category-item.item,
.service-item.item,
.provider-item.item,
.location-item.item {
    overflow: visible !important;
}

/* ลบ transform บน :hover (เก็บ effect ขอบ+เงาแทน) */
.category-item.item:hover,
.service-item.item:hover,
.provider-item.item:hover,
.location-item.item:hover {
    transform: none !important;
    border-color: #B8D7FD !important;
    box-shadow: 0 12px 36px rgba(11, 117, 249, 0.18) !important;
}

/* ===== MODAL CONTENT — readable ===== */

/* พื้น modal ขาว */
.service-item .modal .full-info,
.category-item .modal .full-info,
.provider-item .modal .full-info,
.location-item .modal .full-info {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    padding: 24px !important;
    color: #1B1B1B !important;
}

/* Title */
.service-item .modal .cap.full,
.category-item .modal .cap.full,
.provider-item .modal .cap.full,
.provider-item .modal .name,
.location-item .modal .cap.full {
    font-family: 'Anton', sans-serif !important;
    color: #0A1438 !important;
    text-transform: uppercase !important;
    font-size: 24px !important;
    margin-bottom: 12px !important;
}

/* Description */
.service-item .modal .txt.full,
.service-item .modal .txt.full *,
.category-item .modal .txt.full,
.category-item .modal .txt.full *,
.provider-item .modal .txt.full,
.provider-item .modal .txt.full *,
.location-item .modal .txt.full,
.location-item .modal .txt.full * {
    color: #1B1B1B !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ปุ่ม X ปิด */
.service-item .modal .close-full-info,
.category-item .modal .close-full-info,
.provider-item .modal .close-full-info,
.location-item .modal .close-full-info {
    color: #0A1438 !important;
    background: #F4F8FF !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
}
.service-item .modal .close-full-info .fa,
.category-item .modal .close-full-info .fa,
.provider-item .modal .close-full-info .fa {
    color: #0A1438 !important;
}

/* รูป provider ใน modal */
.provider-item .modal .preloader.img-full img {
    width: 100% !important;
    max-height: 320px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
}

/* Backdrop modal */
.modal-backdrop {
    background: rgba(10, 20, 56, 0.6) !important;
}

/* กากบาทปิด modal — navy bg + white X */
.service-item .modal .close-full-info,
.category-item .modal .close-full-info,
.provider-item .modal .close-full-info,
.location-item .modal .close-full-info {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    background: #0A1438 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.2s !important;
}

.service-item .modal .close-full-info:hover,
.category-item .modal .close-full-info:hover,
.provider-item .modal .close-full-info:hover,
.location-item .modal .close-full-info:hover {
    background: #0B75F9 !important;
    transform: rotate(90deg) !important;
}

.service-item .modal .close-full-info .fa,
.category-item .modal .close-full-info .fa,
.provider-item .modal .close-full-info .fa,
.location-item .modal .close-full-info .fa,
.service-item .modal .close-full-info i,
.category-item .modal .close-full-info i,
.provider-item .modal .close-full-info i,
.location-item .modal .close-full-info i {
    color: #FFFFFF !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* ซ่อน fa icon เก่า */
.service-item .modal .close-full-info i,
.category-item .modal .close-full-info i,
.provider-item .modal .close-full-info i,
.location-item .modal .close-full-info i {
    display: none !important;
}

/* วาด × เองด้วย pseudo-element */
.service-item .modal .close-full-info::after,
.category-item .modal .close-full-info::after,
.provider-item .modal .close-full-info::after,
.location-item .modal .close-full-info::after {
    content: '×' !important;
    color: #FFFFFF !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    font-family: 'Inter', 'Arial', sans-serif !important;
}

/* รูป provider ใน modal — แสดงเต็มไม่ crop */
.provider-item .modal .preloader.img-full img,
.provider-item .modal .preloader.img-full .photo.user {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

/* ตัว container ของรูป — ไม่ล็อกความสูง */
.provider-item .modal .preloader.img-full {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
}

/* ===== BOOKING RESULT POPUP — readable ===== */

.subscribe-component--popup .modal-content {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    padding: 24px !important;
    color: #1B1B1B !important;
}

/* Icon */
.subscribe-component--status-icon svg,
.subscribe-component--status-icon .cls-1 {
    fill: #0B75F9 !important;
    color: #0B75F9 !important;
}

/* Title: "Pay later", "Subscribe..." */
.subscribe-component--popup .subscribe-component--title,
.subscribe-component--popup .booking-status,
.subscribe-component--popup h4 {
    font-family: 'Anton', sans-serif !important;
    color: #0A1438 !important;
    font-size: 22px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 400 !important;
    margin: 16px 0 12px 0 !important;
}

/* Body text */
.subscribe-component--popup .subscribe-component--txt,
.subscribe-component--popup .booking-message,
.subscribe-component--popup p {
    color: #1B1B1B !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Divider เส้นแบ่ง */
.subscribe-component--divider {
    border-top: 1px solid #EBEBEB !important;
    margin: 16px 0 !important;
}

/* ปุ่ม Subscribe */
.subscribe-component--popup #subscribe-client-push-btn,
.subscribe-component--popup .btn.btn-primary {
    background: #0B75F9 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 32px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    box-shadow: 0 4px 14px rgba(11, 117, 249, 0.35) !important;
}
.subscribe-component--popup #subscribe-client-push-btn:hover,
.subscribe-component--popup .btn.btn-primary:hover {
    background: #095fd0 !important;
}

/* ปุ่ม Close */
.subscribe-component--popup .btn-danger {
    background: transparent !important;
    color: #0A1438 !important;
    border: 1.5px solid #0A1438 !important;
    border-radius: 999px !important;
    padding: 10px 28px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}

/* กากบาทปิด ขวาบน */
.subscribe-component--popup .close-modal {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    background: #0A1438 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
}
.subscribe-component--popup .close-modal i { display: none !important; }
.subscribe-component--popup .close-modal::after {
    content: '×' !important;
    color: #FFFFFF !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

/* X ปิด booking result popup */
#booking-result-popup .close-modal,
.subscribe-component--popup .close-modal,
.modal-header .close-modal {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    background: #0A1438 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

#booking-result-popup .close-modal i,
.subscribe-component--popup .close-modal i,
.modal-header .close-modal i {
    display: none !important;
}

#booking-result-popup .close-modal::after,
.subscribe-component--popup .close-modal::after,
.modal-header .close-modal::after {
    content: '×' !important;
    color: #FFFFFF !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    font-family: 'Inter', Arial, sans-serif !important;
}

#booking-result-popup .close-modal:hover,
.subscribe-component--popup .close-modal:hover {
    background: #0B75F9 !important;
    transform: rotate(90deg) !important;
}

#steps-nav,
.booking-info > ul.clearfix {
    margin-top: 16px !important;
}

/* เพิ่ม note ด้านล่างหน้า invoice/payment */
.invoice-pay-page::after {
    content: '** If you prefer not to make a deposit in advance, you may pay at the clinic on the day of your visit. However, please note that your appointment cannot be guaranteed, and the waiting time may exceed 2 hours.' !important;
    display: block !important;
    color: #1B1B1B !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0px auto !important;
    padding: 16px 20px !important;
    background: #FFF8E1 !important;
    border: 1px solid #FCD34D !important;
    border-left: 4px solid #D97706 !important;
    border-radius: 8px !important;
    max-width: 1200px !important;
    font-family: 'Inter', sans-serif !important;
}

#main-buttons .wrapper .inner .bar .btn,
#main-buttons .wrapper .inner .bar .btn:nth-of-type(1),
#main-buttons .wrapper .inner .bar .btn:nth-of-type(2),
#main-buttons .wrapper .inner .bar .btn:nth-of-type(3) {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
}

@media (max-width: 640px) {

    /* Tabs — grid 2 cols ให้เห็นครบ */
    .booking-info > ul.clearfix {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px !important;
    }
    .booking-info ul li.step_info_item {
        flex: 1 1 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        min-width: 0 !important;
        background: transparent !important;
    }
    .booking-info ul li.step_info_item a {
        display: block !important;
        padding: 8px 10px !important;
        text-align: center !important;
        height: auto !important;
    }
    .booking-info ul li.step_info_item .title-small {
        display: block !important;
        font-size: 9px !important;
        margin: 0 0 2px 0 !important;
        color: inherit !important;
        font-weight: 700 !important;
    }
    .booking-info ul li.step_info_item .title-sub {
        display: block !important;
        font-size: 11px !important;
        color: inherit !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Our time — ขวา ใต้ tabs */
    #time-settings {
        text-align: right !important;
        padding: 8px 12px 0 0 !important;
        margin: 0 !important;
    }
    #time-settings .time {
        display: inline-block !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        font-size: 11px !important;
        color: #0A1438 !important;
    }
}

@media (max-width: 640px) {
    html body .booking-info > ul.clearfix {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: unset !important;
        gap: 4px !important;
        padding: 4px !important;
    }
    html body .booking-info ul li.step_info_item {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }
    html body .booking-info ul li.step_info_item a {
        display: block !important;
        padding: 8px 6px !important;
        text-align: center !important;
        height: auto !important;
    }
    html body .booking-info ul li.step_info_item .title-small {
        display: block !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    html body .booking-info ul li.step_info_item .title-sub {
        display: block !important;
        font-size: 11px !important;
        margin-top: 2px !important;
    }
    html body #time-settings {
        text-align: right !important;
        padding: 8px 12px 0 0 !important;
    }
    html body #time-settings .time {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        font-size: 11px !important;
        color: #0A1438 !important;
    }
}

@media (max-width: 640px) {
    /* Active / Passed — text navy บนพื้นขาว */
    html body .booking-info ul li.step_info_item.active a,
    html body .booking-info ul li.step_info_item.passed a,
    html body .booking-info ul li.step_info_item.filled a {
        background: #FFFFFF !important;
        color: #0A1438 !important;
    }
    html body .booking-info ul li.step_info_item.active a .title-small,
    html body .booking-info ul li.step_info_item.active a .title-sub,
    html body .booking-info ul li.step_info_item.passed a .title-small,
    html body .booking-info ul li.step_info_item.passed a .title-sub,
    html body .booking-info ul li.step_info_item.filled a .title-small,
    html body .booking-info ul li.step_info_item.filled a .title-sub {
        color: #0A1438 !important;
    }

    /* Default (ยังไม่ถึง) — text ฟ้าอ่อนบนพื้นโปร่งใส */
    html body .booking-info ul li.step_info_item a {
        color: #A7CDFF !important;
    }
}


@media (max-width: 640px) {
    html body .booking-info ul li.active a,
    html body .booking-info ul li.active a *,
    html body .booking-info ul li.passed a,
    html body .booking-info ul li.passed a *,
    html body .booking-info ul li.filled a,
    html body .booking-info ul li.filled a *,
    html body .booking-info ul a[aria-current="step"],
    html body .booking-info ul a[aria-current="step"] * {
        color: #0A1438 !important;
        background-color: transparent !important;
    }

    html body .booking-info ul li.active a,
    html body .booking-info ul li.passed a,
    html body .booking-info ul li.filled a,
    html body .booking-info ul a[aria-current="step"] {
        background-color: #FFFFFF !important;
    }
}


@media (max-width: 768px) {
    #sb_booking_info ul li.active a,
    #sb_booking_info ul li.active a *,
    #sb_booking_info ul a[aria-current="step"],
    #sb_booking_info ul a[aria-current="step"] *,
    #sb_booking_info ul a[aria-current="step"] .content,
    #sb_booking_info ul a[aria-current="step"] .title-small,
    #sb_booking_info ul a[aria-current="step"] .title-sub {
        color: #0A1438 !important;
    }
    #sb_booking_info ul li.active,
    #sb_booking_info ul li.active a,
    #sb_booking_info ul a[aria-current="step"] {
        background: #FFFFFF !important;
        background-color: #FFFFFF !important;
    }
}

@media (max-width: 768px) {
    #main #main-content #sb_content #sb-timeline #steps-nav .booking-info ul li.active .title-small,
    #main #main-content #sb_content #sb-timeline #steps-nav .booking-info ul li.active .title-sub,
    #main #main-content #sb_content #sb-timeline #steps-nav .booking-info ul li.passed .title-small,
    #main #main-content #sb_content #sb-timeline #steps-nav .booking-info ul li.passed .title-sub,
    #main #main-content #sb_content #sb-timeline #steps-nav .booking-info ul li.filled .title-small,
    #main #main-content #sb_content #sb-timeline #steps-nav .booking-info ul li.filled .title-sub {
        color: #0A1438 !important;
    }

    #main #main-content #sb_content #sb-timeline #steps-nav .booking-info ul li:not(.active):not(.passed):not(.filled) .title-small,
    #main #main-content #sb_content #sb-timeline #steps-nav .booking-info ul li:not(.active):not(.passed):not(.filled) .title-sub {
        color: #A7CDFF !important;
    }
}

@media (max-width: 768px) {
    html body #main #sb-timeline #steps #time-settings {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        max-width: none !important;
        width: 100% !important;
        text-align: right !important;
        padding: 8px 12px 0 0 !important;
        margin: 0 !important;
        z-index: auto !important;
    }
}

/* ====== BOOK YOUR CONSULTATION SECTION ====== */
.booking-wrapper { max-width: 1100px; margin: auto; padding: 40px 20px; }
.booking-header { text-align: center; margin-bottom: 40px; }
.booking-header h1 { font-size: 54px; font-weight: 800; margin-bottom: 15px; color: #08184a; }
.booking-header p { font-size: 22px; color: #2f3d68; margin-bottom: 30px; }
.booking-features { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.booking-feature { display: flex; align-items: center; gap: 10px; font-size: 18px; color: #0d1b4c; }
.booking-cards { display: flex; gap: 30px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.booking-card { background: #ffffff; border-radius: 24px; padding: 35px; width: 460px; box-shadow: 0 8px 30px rgba(0,0,0,0.06); transition: 0.3s ease; }
.booking-card:hover { transform: translateY(-4px); }
.priority-card { border: 2px solid #1f6fff; }
.priority-title { color: #1f6fff; }
.flexible-card { border: 2px solid #f5c400; }
.flexible-title { color: #f5c400; }
.booking-card h2 { font-size: 38px; margin-bottom: 8px; font-weight: 800; }
.booking-card h3 { font-size: 22px; font-weight: 600; margin-bottom: 25px; color: #2f3d68; }
.booking-list { list-style: none; padding: 0; margin: 0 0 30px; }
.booking-list li { margin-bottom: 16px; font-size: 19px; line-height: 1.5; display: flex; align-items: flex-start; gap: 12px; }
.notice-box { border-radius: 14px; padding: 18px 20px; font-size: 17px; margin-bottom: 25px; line-height: 1.5; }
.priority-notice { background: #eef5ff; color: #1f6fff; }
.flexible-notice { background: #fff9e6; color: #b88900; }
.booking-btn { width: 100%; border: none; border-radius: 14px; padding: 18px; font-size: 20px; font-weight: 700; cursor: pointer; transition: 0.3s ease; display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.priority-btn { background: #1f6fff; color: white; }
.priority-btn:hover { background: #1257d6; color: white; }
.flexible-btn { background: #f5c400; color: #08184a; }
.flexible-btn:hover { background: #ddb000; color: #08184a; }
@media (max-width: 992px) {
    .booking-header h1 { font-size: 42px; }
    .booking-header p { font-size: 18px; }
    .booking-card { width: 100%; }
    .booking-cards { flex-direction: column; }
}
@media (max-width: 600px) {
    .booking-header h1 { font-size: 34px; }
    .booking-feature { font-size: 16px; }
    .booking-card { padding: 25px; }
    .booking-card h2 { font-size: 30px; }
    .booking-card h3 { font-size: 18px; }
    .booking-list li { font-size: 16px; }
    .booking-btn { font-size: 18px; }
}

/* Icons สีต่างๆ */
.booking-header h1 .fa { color: #1f6fff; margin-right: 8px; }
.booking-feature .fa { color: #1f6fff; font-size: 22px; }
.booking-list li .fa { color: #22c55e; font-size: 18px; margin-top: 3px; }
.notice-box .fa { margin-right: 6px; }
.priority-card h2 .fa { color: #1f6fff; margin-right: 8px; }
.flexible-card h2 .fa { color: #f5c400; margin-right: 8px; }
.booking-btn .fa { margin-left: 8px; }

/* บังคับ 2 cols ตั้งแต่ tablet ขึ้นไป (เดิม stack ที่ 992px เปลี่ยนเป็น 768px) */
@media (max-width: 992px) {
    .booking-card { width: calc(50% - 15px) !important; }
    .booking-cards { flex-direction: row !important; }
}
@media (max-width: 768px) {
    .booking-card { width: 100% !important; }
    .booking-cards { flex-direction: column !important; }
}

/* Force text alignment + flex layout ไม่ให้ theme แทรก */
.booking-wrapper .booking-list,
.booking-wrapper .booking-list li,
.booking-wrapper .booking-feature {
    text-align: left !important;
}
.booking-wrapper .booking-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
}
.booking-wrapper .booking-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #1B1B1B !important;
}
.booking-wrapper .booking-list li .fa,
.booking-wrapper .booking-list li .fas,
.booking-wrapper .booking-list li .far,
.booking-wrapper .booking-list li i {
    flex-shrink: 0 !important;
    color: #22c55e !important;
    font-size: 18px !important;
    margin-top: 2px !important;
    line-height: 1.5 !important;
}
.booking-wrapper .booking-list li span {
    flex: 1 !important;
    text-align: left !important;
}

/* Feature highlights — horizontal layout */
.booking-wrapper .booking-features {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}
.booking-wrapper .booking-feature {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 16px !important;
}
.booking-wrapper .booking-feature i,
.booking-wrapper .booking-feature .fas {
    color: #1f6fff !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
}

/* Icon ใน h1/h2 */
.booking-wrapper .booking-header h1 i,
.booking-wrapper .booking-header h1 .fas {
    color: #1f6fff !important;
    margin-right: 12px !important;
}
.booking-wrapper .priority-card h2 i,
.booking-wrapper .priority-card h2 .fas {
    color: #1f6fff !important;
    margin-right: 8px !important;
}
.booking-wrapper .flexible-card h2 i,
.booking-wrapper .flexible-card h2 .fas {
    color: #f5c400 !important;
    margin-right: 8px !important;
}

/* Notice box icon */
.booking-wrapper .notice-box i,
.booking-wrapper .notice-box .fas {
    margin-right: 6px !important;
}

/* Button icon */
.booking-wrapper .booking-btn i,
.booking-wrapper .booking-btn .fas {
    margin-left: 8px !important;
}

/* Mobile — ลด padding + ขนาด */
@media (max-width: 600px) {
    .booking-wrapper { padding: 24px 12px !important; }
    .booking-wrapper .booking-card { padding: 20px !important; }
    .booking-wrapper .booking-card h2 { font-size: 26px !important; }
    .booking-wrapper .booking-card h3 { font-size: 16px !important; margin-bottom: 18px !important; }
    .booking-wrapper .booking-list li { font-size: 14px !important; }
    .booking-wrapper .booking-list li .fa,
    .booking-wrapper .booking-list li .fas { font-size: 16px !important; }
    .booking-wrapper .notice-box { font-size: 14px !important; padding: 12px 14px !important; }
    .booking-wrapper .booking-btn { font-size: 16px !important; padding: 14px !important; }
    .booking-wrapper .booking-header h1 { font-size: 28px !important; }
    .booking-wrapper .booking-header p { font-size: 15px !important; }
    .booking-wrapper .booking-features { gap: 16px !important; }
    .booking-wrapper .booking-feature { font-size: 14px !important; }
}

/* บังคับ text ไม่ให้แตกทีละตัวอักษร */
.booking-wrapper,
.booking-wrapper *,
.booking-wrapper .booking-feature,
.booking-wrapper .booking-feature span,
.booking-wrapper .booking-list,
.booking-wrapper .booking-list li,
.booking-wrapper .booking-list li span,
.booking-wrapper .notice-box,
.booking-wrapper h1,
.booking-wrapper h2,
.booking-wrapper h3,
.booking-wrapper p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
}

/* Feature item — flex แบบเดิม + span มี flex: 1 */
.booking-wrapper .booking-feature {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
}
.booking-wrapper .booking-feature span {
    display: inline-block !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* List item — text เต็มความกว้างที่เหลือ */
.booking-wrapper .booking-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    min-width: 0 !important;
}
.booking-wrapper .booking-list li span {
    display: inline-block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: normal !important;
}

/* Icon ห้ามขยาย */
.booking-wrapper .booking-feature > i,
.booking-wrapper .booking-feature > .fas,
.booking-wrapper .booking-list li > i,
.booking-wrapper .booking-list li > .fas {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

/* Container — ใช้พื้นที่ที่มี */
.booking-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* ห้าม break ตัวอักษร */
.booking-wrapper, .booking-wrapper * {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

/* Header */
.booking-wrapper .booking-header { width: 100% !important; text-align: center !important; }

/* Features — stack ถ้าแคบ, row ถ้ากว้าง */
.booking-wrapper .booking-features {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    width: 100% !important;
}
.booking-wrapper .booking-feature {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.booking-wrapper .booking-feature span { flex: 1 1 0 !important; min-width: 0 !important; }
.booking-wrapper .booking-feature > i,
.booking-wrapper .booking-feature > .fas { flex-shrink: 0 !important; }

/* Cards — stack ถ้าแคบ, 2 cols ถ้ากว้างพอ */
.booking-wrapper .booking-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
    justify-content: center !important;
}
.booking-wrapper .booking-card {
    flex: 1 1 280px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
}

/* List */
.booking-wrapper .booking-list { list-style: none !important; padding: 0 !important; margin: 0 0 16px 0 !important; width: 100% !important; }
.booking-wrapper .booking-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}
.booking-wrapper .booking-list li > i,
.booking-wrapper .booking-list li > .fas { flex-shrink: 0 !important; color: #22c55e !important; }
.booking-wrapper .booking-list li span { flex: 1 1 0 !important; min-width: 0 !important; }

.bk-top {
    text-align: center;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
}

.bk-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #0A1438;
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}
.bk-line {
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: #fbbf24;
}

.bk-title {
    font-family: 'Anton', sans-serif;
    color: #0A1438;
    font-size: 42px;
    margin: 0 0 12px 0;
    text-transform: none;
    letter-spacing: 0;
}
.bk-title i { color: #0A1438; margin-right: 8px; }

.bk-subtitle {
    color: #5b6280;
    font-size: 16px;
    margin: 0 0 32px 0;
}

.bk-features {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}
.bk-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #0A1438;
    text-align: left;
    line-height: 1.4;
}
.bk-feature i {
    color: #0B75F9;
    font-size: 28px;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 600px) {
    .bk-title { font-size: 28px; }
    .bk-features { gap: 20px; flex-direction: column; align-items: center; }
}

/* Menscape features — 3 cols icon บน text ล่าง */
.ms-features {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-around !important;
    gap: 8px !important;
    margin: 24px auto !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

.ms-feat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    flex: 1 1 80px !important;
    min-width: 0 !important;
    max-width: 120px !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

.ms-feat i {
    color: #0B75F9 !important;
    font-size: 28px !important;
    flex-shrink: 0 !important;
}

.ms-feat span {
    font-size: 12px !important;
    color: #0A1438 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}

/* ซ่อน Menscape Clinic title ที่ theme generate */
html body #about-us > .section-pd > .title-main {
    display: none !important;
}

/* Cards container — 2 cols side by side, stack ถ้าแคบ */
.ms-cards {
    display: flex !important;
    gap: 16px !important;
    margin-top: 32px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

.ms-card {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 8px) !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

/* Mobile — stack ถ้าจอจริงๆ แคบ */
@media (max-width: 480px) {
    .ms-card {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

.ms-card-priority {
    border: 2px solid #1f6fff !important;
}

.ms-card-flexible {
    border: 2px solid #f5c400 !important;
}

/* Card head (icon + title) */
.ms-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
.ms-card-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}
.ms-head-priority .ms-card-icon { background: #1f6fff !important; }
.ms-card-head h3 {
    font-family: 'Anton', sans-serif !important;
    font-size: 22px !important;
    margin: 0 0 2px 0 !important;
    color: #1f6fff !important;
    text-transform: none !important;
}
.ms-card-head p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0A1438 !important;
}

/* List */
.ms-card-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}
.ms-card-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    color: #1B1B1B !important;
    line-height: 1.45 !important;
    word-break: keep-all !important;
}
.ms-card-list li i {
    color: #22c55e !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}
.ms-card-list li span { flex: 1 !important; }

/* Notice box */
.ms-card-notice {
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
    word-break: keep-all !important;
}
.ms-notice-priority {
    background: #eef5ff !important;
    color: #1f6fff !important;
}
.ms-card-notice i { margin-right: 6px !important; }

/* Button */
.ms-card-btn {
    display: block !important;
    text-align: center !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: 0.2s !important;
}
.ms-btn-priority {
    background: #1f6fff !important;
    color: #FFFFFF !important;
}
.ms-btn-priority:hover { background: #1257d6 !important; color: #FFFFFF !important; }
.ms-card-btn i { margin-left: 8px !important; }

/* Force icon เป็นวงกลม fixed size */
.ms-card-icon {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    background: #1f6fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 20px !important;
}

/* Text container ขวาของ icon — ใช้พื้นที่ที่เหลือ */
.ms-card-head > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* บังคับ text ไม่ให้แตก */
.ms-card,
.ms-card *,
.ms-card h3,
.ms-card p,
.ms-card li,
.ms-card span {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
}

/* Card head text style */
.ms-card-head h3 {
    font-family: 'Anton', sans-serif !important;
    font-size: 20px !important;
    margin: 0 0 2px 0 !important;
    color: #1f6fff !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}
.ms-card-head p {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0A1438 !important;
    line-height: 1.3 !important;
}

/* List item — block layout แทน flex */
.ms-card-list li {
    display: block !important;
    padding-left: 26px !important;
    position: relative !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    color: #1B1B1B !important;
    line-height: 1.45 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.ms-card-list li i,
.ms-card-list li .fas {
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    color: #22c55e !important;
    font-size: 16px !important;
    flex: none !important;
}

.ms-card-list li span {
    display: inline !important;
    flex: none !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* ทุก text ใน card ชิดซ้าย */
.ms-card,
.ms-card *,
.ms-card-list,
.ms-card-list li,
.ms-card-list li span,
.ms-card-head,
.ms-card-head h3,
.ms-card-head p,
.ms-card-notice {
    text-align: left !important;
}

/* ปุ่มยังคง center */
.ms-card-btn {
    text-align: center !important;
}

/* Head — icon บน title ล่าง center */
.ms-card-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #EBEBEB !important;
}

.ms-card-icon {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 22px !important;
}

.ms-head-priority .ms-card-icon,
.ms-card-icon { background: #1f6fff !important; }
.ms-head-flexible .ms-card-icon,
.ms-icon-flexible { background: #f5c400 !important; }

.ms-card-head h3 {
    font-family: 'Anton', sans-serif !important;
    font-size: 20px !important;
    margin: 0 0 4px 0 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    text-align: center !important;
    word-break: normal !important;
}
.ms-head-priority h3 { color: #1f6fff !important; }
.ms-head-flexible h3 { color: #f5c400 !important; }

.ms-card-head p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0A1438 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

/* Icon — บังคับ fixed 48x48 circle ไม่ stretch */
.ms-card-icon,
.ms-card-head .ms-card-icon,
.ms-card .ms-card-icon {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    font-size: 22px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Card head — center column */
.ms-card-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #EBEBEB !important;
    text-align: center !important;
    width: 100% !important;
}

/* Force ทุก icon ในการ์ดเป็น inline (ยกเว้น list items + card head icon) */
.ms-card-notice i,
.ms-card-notice .fas,
.ms-card-btn i,
.ms-card-btn .fas {
    display: inline-block !important;
    vertical-align: middle !important;
    position: static !important;
    margin: 0 !important;
}

.ms-card-notice i,
.ms-card-notice .fas {
    margin-right: 6px !important;
    color: inherit !important;
}

.ms-card-btn i,
.ms-card-btn .fas {
    margin-left: 8px !important;
    color: inherit !important;
}

/* List items icons — absolute (เดิม) */
.ms-card-list li i,
.ms-card-list li .fas {
    display: inline-block !important;
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
}

/* Title h3 — บังคับ 1 บรรทัด ไม่ wrap */
.ms-card-head h3 {
    font-size: 18px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}


html body .ms-card .ms-card-notice,
html body .ms-card .ms-card-btn {
    display: block !important;
}

html body .ms-card .ms-card-notice > i,
html body .ms-card .ms-card-notice > .fas,
html body .ms-card .ms-card-btn > i,
html body .ms-card .ms-card-btn > .fas {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

html body .ms-card .ms-card-notice > span,
html body .ms-card .ms-card-btn > span {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
}

html body .ms-card .ms-card-notice > i,
html body .ms-card .ms-card-notice > .fas {
    margin-right: 8px !important;
}

html body .ms-card .ms-card-btn > i,
html body .ms-card .ms-card-btn > .fas {
    margin-left: 8px !important;
}

/* Notice — icon ซ้าย + text ขวา ใช้ flex */
html body .ms-card .ms-card-notice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
}
html body .ms-card .ms-card-notice > i,
html body .ms-card .ms-card-notice > .fas {
    flex: 0 0 auto !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
}
html body .ms-card .ms-card-notice > span {
    flex: 1 1 auto !important;
    text-align: left !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Button — text + icon flex inline */
html body .ms-card .ms-card-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
}
html body .ms-card .ms-card-btn > span {
    flex: 0 1 auto !important;
}
html body .ms-card .ms-card-btn > i,
html body .ms-card .ms-card-btn > .fas {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Notice — icon absolute, text fills with padding */
html body .ms-card .ms-card-notice {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #eef5ff !important;
    border-radius: 8px !important;
    padding: 12px 14px 12px 38px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    text-align: left !important;
    color: #1f6fff !important;
    position: relative !important;
    line-height: 1.4 !important;
}
html body .ms-card .ms-notice-flexible {
    background: #fff9e6 !important;
    color: #b88900 !important;
}

html body .ms-card .ms-card-notice > i,
html body .ms-card .ms-card-notice > .fas {
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    margin: 0 !important;
    display: inline-block !important;
}

html body .ms-card .ms-card-notice > span {
    display: inline !important;
    width: auto !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    flex: none !important;
}

/* Button — simple inline */
html body .ms-card .ms-card-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

html body .ms-card .ms-card-btn > span,
html body .ms-card .ms-card-btn > i {
    display: inline-block !important;
    vertical-align: middle !important;
    width: auto !important;
    flex: none !important;
    position: static !important;
}

html body .ms-card .ms-card-btn > i {
    margin-left: 8px !important;
}

html body .ms-card .ms-card-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #EBEBEB !important;
}
html body .ms-card .ms-card-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    font-size: 18px !important;
}
html body .ms-card .ms-card-head > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
}
html body .ms-card .ms-card-head h3 {
    font-size: 16px !important;
    text-align: left !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
html body .ms-card .ms-card-head p {
    font-size: 11px !important;
    text-align: left !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.3 !important;
}

html body .ms-card .ms-card-btn {
    white-space: nowrap !important;
}
html body .ms-card .ms-card-btn > span {
    white-space: nowrap !important;
    display: inline !important;
}

/* Center icon ใน vงกลม */
html body .ms-card .ms-card-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}
html body .ms-card .ms-card-icon > i,
html body .ms-card .ms-card-icon > .fas {
    display: inline-block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    vertical-align: middle !important;
}

/* Arrow ห่างจาก text มากขึ้น */
html body .ms-card .ms-card-btn > i,
html body .ms-card .ms-card-btn > .fas {
    margin-left: 12px !important;
}

/* Force icon เต็มกล่อง + center 100% */
html body .ms-card .ms-card-icon > i,
html body .ms-card .ms-card-icon > .fas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    line-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
}

/* Flexible — icon, title, notice, button สีเหลือง */
html body .ms-card .ms-icon-flexible {
    background: #f5c400 !important;
}
html body .ms-card .ms-head-flexible h3 {
    color: #f5c400 !important;
}
html body .ms-card .ms-notice-flexible {
    background: #fff9e6 !important;
    color: #b88900 !important;
}
html body .ms-card .ms-btn-flexible {
    background: #f5c400 !important;
    color: #0A1438 !important;
}
html body .ms-card .ms-btn-flexible:hover {
    background: #ddb000 !important;
    color: #0A1438 !important;
}

html body .ms-card {
    padding: 28px 22px !important;
}

html body .ms-card .ms-card-btn {
    width: auto !important;
    margin: 0 auto !important;
    padding: 14px 28px !important;
}

/* เพิ่ม padding card ให้ text มีพื้นที่หายใจ */
html body .ms-card {
    padding: 24px 20px !important;
}
html body .ms-card .ms-card-list li {
    padding-right: 4px !important;
}

/* Arrow ใน button — ห้าม position absolute */
html body .ms-card .ms-card-btn {
    width: auto !important;
    margin: 0 auto !important;
    padding: 14px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
}
html body .ms-card .ms-card-btn > i,
html body .ms-card .ms-card-btn > .fas {
    position: static !important;
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
}
html body .ms-card .ms-card-btn > span {
    flex: 0 1 auto !important;
}

html body .ms-card .ms-card-btn {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

html body .ms-card .ms-card-btn > span {
    display: inline-block !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body .ms-card .ms-card-btn > i,
html body .ms-card .ms-card-btn > .fas {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    position: static !important;
    width: auto !important;
    flex: none !important;
}

html body #about-us div.ms-card a.ms-card-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    flex: none !important;
    position: relative !important;
}

html body #about-us div.ms-card a.ms-card-btn > span {
    display: inline-block !important;
    vertical-align: middle !important;
    flex: none !important;
}

html body #about-us div.ms-card a.ms-card-btn > i,
html body #about-us div.ms-card a.ms-card-btn > .fas {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    position: static !important;
    flex: none !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
}

html body #about-us div.ms-card a.ms-card-btn {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 14px 40px 14px 16px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

html body #about-us div.ms-card a.ms-card-btn > span {
    display: inline-block !important;
    vertical-align: middle !important;
    width: auto !important;
}

html body #about-us div.ms-card a.ms-card-btn > i,
html body #about-us div.ms-card a.ms-card-btn > .fas {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    display: inline-block !important;
    width: auto !important;
    font-size: 14px !important;
}

.page--booking #main-buttons .wrapper .inner .bar,
.page--booking #main-buttons .btn.book {
    display: none !important;
}

html body #header .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

html body #header .row > [class*="col-"] {
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
}

html body #header .row > .col-xs-8 {
    flex: 0 0 67% !important;
    max-width: 67% !important;
    width: 67% !important;
}

html body #header .row > .col-xs-4 {
    flex: 0 0 33% !important;
    max-width: 33% !important;
    width: 33% !important;
    text-align: right !important;
}

@media (max-width: 640px) {
html body .booking-info ul li.step_info_item a .title-small,
html body .booking-info ul li.step_info_item a .title-sub {
    font-size: 11px !important;
}
}

@media (max-width: 640px) {
    html body #steps-nav,
    html body #steps-nav .booking-info,
    html body .booking-info > ul.clearfix,
    html body #steps-nav .container-fluid,
    html body #steps-nav .row {
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }

    html body #steps-nav .booking-info ul li.step_info_item {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 640px) {

    /* หัวข้อการ์ด 16px */
    html body .category-item .cap.short,
    html body .service-item .cap.short,
    html body .provider-item .cap.short,
    html body .location-item .cap.short {
        font-size: 16px !important;
    }

    /* ปุ่ม Select 11px */
    html body .btn.select.custom,
    html body .btn.select.custom a {
        font-size: 11px !important;
        padding: 12px 20px !important;
    }

    /* การ์ด 2 columns บน mobile */
    html body #sb_category_step_container > .item,
    html body #sb_service_step_container > .item,
    html body #sb_location_step_container > .item {
        flex: 1 1 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        min-width: 0 !important;
    }
    html body #sb_category_step_container,
    html body #sb_service_step_container,
    html body #sb_location_step_container {
        gap: 12px !important;
    }
}

@media (max-width: 640px) {
    html body .btn.select.custom {
        padding: 0 !important;
    }
    html body .btn.select.custom a {
        font-size: 11px !important;
        padding: 10px 18px !important;
    }
}

html body .category-item .btn-bar,
html body .service-item .btn-bar,
html body .provider-item .btn-bar,
html body .location-item .btn-bar {
    justify-content: flex-end !important;
    text-align: right !important;
}

@media (max-width: 640px) {
    /* Service — 1 column */
    html body #sb_service_step_container > .item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* Category + Location — 2 columns */
    html body #sb_category_step_container > .item,
    html body #sb_location_step_container > .item {
        flex: 1 1 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        min-width: 0 !important;
    }
}

/* Bar-service — แสดงตามแนวตั้ง ทั้ง price กับ deposit ชิดซ้าย */
html body .bar-service {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

html body .bar-service .time {
    flex: 1 1 100% !important;
    margin-bottom: 4px !important;
}

html body .bar-service .badge.price,
html body .bar-service .badge.price.right {
    float: none !important;
    flex: 0 0 auto !important;
    order: 1 !important;
    margin-right: auto !important;
}

html body .bar-service .badge.badge-deposit,
html body .bar-service .badge.badge-deposit.right,
html body .bar-service .badge-deposit {
    float: none !important;
    flex: 0 0 auto !important;
    order: 2 !important;
    align-self: flex-start !important;
    width: fit-content !important;
    margin-top: 4px !important;
    margin-right: auto !important;
}

/* ห้าม flex-basis: 100% ของ deposit ในบางกรณี */
html body .bar-service::after {
    content: '' !important;
    flex: 1 1 100% !important;
    order: 1.5 !important;
    height: 0 !important;
}

html body div.bar-service {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

html body div.bar-service > .badge,
html body div.bar-service > .badge.right,
html body div.bar-service > .badge.price.right,
html body div.bar-service > .badge.badge-deposit.right {
    float: none !important;
    margin: 0 !important;
    align-self: flex-start !important;
}

html body .service-item .btn-bar,
html body .category-item .btn-bar,
html body .provider-item .btn-bar,
html body .location-item .btn-bar {
    margin-top: -20px !important;
}

html body .category-item .tab-pd .content,
html body .service-item .tab-pd .content,
html body .provider-item .tab-pd .content,
html body .location-item .tab-pd .content {
    flex: 0 0 auto !important;
}

html body .category-item .tab-pd,
html body .service-item .tab-pd,
html body .provider-item .tab-pd,
html body .location-item .tab-pd {
    justify-content: flex-start !important;
}

html body .service-item .btn-bar,
html body .category-item .btn-bar,
html body .provider-item .btn-bar,
html body .location-item .btn-bar {
    margin-top: 8px !important;
}

@media (max-width: 640px) {
    html body #sb_provider_step_container > .item {
        flex: 1 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        min-width: 0 !important;
    }
    html body #sb_provider_step_container {
        gap: 12px !important;
    }
    html body .provider-item .preloader {
        height: 200px !important;
    }
    html body .provider-item .name {
        font-size: 13px !important;
    }
}

@media (max-width: 640px) {
    html body .provider-item .txt.short,
    html body .provider-item .txt.short p,
    html body .provider-item .txt.short span {
        font-size: 14px !important;
    }

    html body .provider-item .txt.short p:first-child,
    html body .provider-item .txt.short p:first-child span {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #0A1438 !important;
    }
}

@media (max-width: 640px) {
    html body .provider-item .name {
        margin-bottom: 10px !important;
    }
    html body .provider-item .txt.short {
        margin-top: 10px !important;
    }
}

html body .sb-date-navigate .fa,
html body .sb-date-navigate .fa::before,
html body .sb-date-navigate .fa-angle-left,
html body .sb-date-navigate .fa-angle-right,
html body #sb_prev_month .fa,
html body #sb_next_month .fa,
html body #sb_prev_date .fa,
html body #sb_next_date .fa,
html body #sb_prev_month .fa::before,
html body #sb_next_month .fa::before,
html body #sb_prev_date .fa::before,
html body #sb_next_date .fa::before {
    color: #0A1438 !important;
}

html body #sb-timeline .header .fa,
html body #sb-timeline .header [class*="fa-"],
html body .timeline-wrapper .header .fa,
html body .timeline-wrapper .header [class*="fa-"],
html body .slots-weekly-view .header .fa,
html body .slots-weekly-view .header [class*="fa-"],
html body #sb_dateview_container .fa,
html body #sb_dateview_container [class*="fa-"],
html body #sb_timeview_container .fa,
html body #sb_timeview_container [class*="fa-"],
html body .top-date-select .header .fa,
html body .top-date-select .header [class*="fa-"] {
    color: #0A1438 !important;
}

html body [title="left arrow icon"],
html body [title="right arrow icon"],
html body [aria-label="Prev month"] span,
html body [aria-label="Next month"] span,
html body [aria-label="Prev month"] .fa,
html body [aria-label="Next month"] .fa,
html body #sb_prev_month span,
html body #sb_next_month span,
html body #sb_prev_month .fa,
html body #sb_next_month .fa,
html body #sb_prev_date span,
html body #sb_next_date span,
html body #sb_prev_date .fa,
html body #sb_next_date .fa {
    color: #0A1438 !important;
}

html body #sb_prev_month .fa::before,
html body #sb_next_month .fa::before,
html body #sb_prev_date .fa::before,
html body #sb_next_date .fa::before,
html body [title="left arrow icon"]::before,
html body [title="right arrow icon"]::before {
    color: #0A1438 !important;
}

html body #sb_prev_month .txt,
html body #sb_next_month .txt,
html body #sb_prev_date .txt,
html body #sb_next_date .txt,
html body .sb-date-navigate .txt {
    filter: brightness(0) !important;
}

@media (max-width: 640px) {
    /* Mon, Tue, Wed labels */
    html body .slots-weekly-timeline .day-container .day,
    html body .slots-weekly-view .day-container .day,
    html body #sb_time_slots_weekly_container .day {
        font-size: 15px !important;
    }

    /* Time slots (10:00 AM, etc.) */
    html body .sb-cell,
    html body .sb-cell.free,
    html body .time-slot .sb-cell,
    html body .slot .sb-cell {
        font-size: 14px !important;
    }
}

html body .slots-weekly-timeline .data-col .day-container,
html body .slots-weekly-view .data-col .day-container,
html body #sb_time_slots_weekly_container .day-container {
    position: sticky !important;
    top: 0 !important;
    background: #FFFFFF !important;
    z-index: 100 !important;
    padding: 8px 4px !important;
    box-shadow: 0 2px 8px rgba(10, 20, 56, 0.08) !important;
}