/* ==========================================================================
   Sati Booking - Frontend styles
   ========================================================================== */

#sb-widget, #sb-widget * {
	box-sizing: border-box;
}

/* [SONG NGU] Nut chuyen EN/VI - dat goc tren-phai widget, phong cach toi
   gian, khong lan at giao dien chinh. */
.sb-lang-toggle {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-bottom: 10px;
}
.sb-lang-btn {
	border: 1px solid #e0dcd3;
	background: #fff;
	color: #8a8378;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
	cursor: pointer;
	letter-spacing: 0.3px;
	transition: all 0.15s ease;
}
.sb-lang-btn:hover {
	border-color: #c9764f;
	color: #c9764f;
}
.sb-lang-btn.active {
	background: #c9764f;
	border-color: #c9764f;
	color: #fff;
}

/* Chan style button/input mac dinh cua theme leak vao widget (font, vien
   ngoai, text-shadow...) - cac mau nen/vien rieng cua tung nut duoc chi
   dinh !important o moi rule ben duoi de dam bao luon thang the truoc CSS
   cua theme, du theme co dung selector nao. */
#sb-widget button,
#sb-widget input,
#sb-widget select {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	text-shadow: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: normal;
}

#sb-widget {
	--sb-accent: #de8d4a;
	--sb-accent-dark: #c97a3a;
	--sb-ink: #1a1a1a;
	--sb-muted: #6b6b6b;
	--sb-border: #e2e2e2;
	--sb-bg: #ffffff;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--sb-ink);
	max-width: 1180px;
	margin: 0 auto;
	position: relative;
}

/* ---------- Search bar ---------- */

.sb-bar {
	background: var(--sb-bg) !important;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(30, 20, 10, 0.18);
	padding: 28px 32px;
	display: flex;
	align-items: flex-end;
	gap: 28px;
	flex-wrap: wrap;

	/* [KHOANG CACH DEU] Thanh nay co wrap. Khi khung cao hon noi dung — hay
	 * gap tren dien thoai, luc moi truong xep thanh 3 hang — align-content
	 * mac dinh la "stretch", tuc la CAC HANG BI GIAN DEU RA cho kin chieu
	 * cao. Nhin ra khoang trong lon bang nhau giua Check-in / Check-out /
	 * Guests, tuong nhu co gi do bi thieu.
	 *
	 * flex-start: cac hang nam sat nhau, khoang cach dung bang "gap". */
	align-content: flex-start;
}

.sb-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 200px;
	position: relative;
}

.sb-field label {
	font-size: 22px;
	font-weight: 600 !important;
	color: var(--sb-ink) !important;
	font-family: inherit !important;
}

.sb-input-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff !important;
	border: 1px solid var(--sb-border) !important;
	border-radius: 10px;
	padding: 12px 16px;
}

.sb-icon--calendar {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
	color: var(--sb-ink) !important;
}

.sb-date-input {
	border: none !important;
	outline: none;
	font-size: 16px;
	font-family: inherit !important;
	color: var(--sb-ink) !important;
	background: transparent !important;
	width: 100%;
}

/* ---------- Date range picker (2 o rieng kieu Viking + o Nights) ---------- */

.sb-field--daterange {
	flex: 2 1 480px;
	position: relative;
}

.sb-daterange-group {
	display: flex;
	gap: 16px;
	align-items: stretch;
}

.sb-date-box {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-date-box label {
	font-size: 22px;
	font-weight: 600 !important;
	color: var(--sb-ink) !important;
	font-family: inherit !important;
}

.sb-date-box__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff !important;
	border: 1px solid var(--sb-border) !important;
	border-radius: 10px;
	padding: 12px 16px;
	text-align: left;
	width: 100%;
	min-height: 64px;
}

.sb-date-box.is-active .sb-date-box__btn {
	border-color: var(--sb-accent) !important;
}

.sb-date-box__btn .sb-icon--calendar {
	color: var(--sb-ink) !important;
	flex-shrink: 0;
}

.sb-date-box__placeholder {
	font-size: 16px;
	color: var(--sb-ink) !important;
	font-family: inherit !important;
}

.sb-date-box__filled {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sb-date-box__row {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.sb-date-box__day {
	font-size: 26px;
	font-weight: 700;
	color: var(--sb-ink) !important;
	font-family: inherit !important;
	line-height: 1;
}

.sb-date-box__monthyear {
	font-size: 14px;
	color: var(--sb-ink) !important;
	font-family: inherit !important;
	letter-spacing: 0.02em;
}

.sb-date-box__weekday {
	font-size: 14px;
	color: var(--sb-muted) !important;
	font-family: inherit !important;
}

.sb-nights-box {
	flex: 0 0 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff !important;
	border: 1px solid var(--sb-border) !important;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 17px;
	color: var(--sb-ink) !important;
	font-family: inherit !important;
	align-self: flex-end;
	min-height: 64px;
}

.sb-calendar-panel {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	background: var(--sb-bg) !important;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(30, 20, 10, 0.22);
	padding: 28px 32px;
	z-index: 30;
	width: max-content;
	max-width: 92vw;
}

.sb-calendar-panel.is-open {
	display: block;
}

.sb-calendar-months {
	display: flex;
	gap: 48px;
}

.sb-cal-month {
	width: 300px;
}

.sb-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.sb-cal-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--sb-ink) !important;
}

.sb-cal-nav {
	background: none !important;
	border: none !important;
	cursor: pointer;
	font-size: 18px;
	color: var(--sb-muted) !important;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
}

.sb-cal-nav.is-visible {
	visibility: visible;
}

.sb-cal-nav:hover {
	color: var(--sb-ink) !important;
}

.sb-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 10px;
}

.sb-cal-weekdays span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--sb-muted) !important;
	text-align: center;
	padding-bottom: 6px;
	border-bottom: 2px dashed var(--sb-border);
}

.sb-cal-weeks {
	display: flex;
	flex-direction: column;
}

.sb-cal-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.sb-cal-day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
}

.sb-cal-day.is-in-range,
.sb-cal-day.is-selected {
	background: #f2ece3 !important;
}

.sb-cal-day.sb-round-left {
	border-top-left-radius: 999px;
	border-bottom-left-radius: 999px;
}

.sb-cal-day.sb-round-right {
	border-top-right-radius: 999px;
	border-bottom-right-radius: 999px;
}

.sb-cal-day-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none !important;
	background: transparent !important;
	font-size: 15px;
	font-family: inherit;
	color: var(--sb-ink) !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.sb-cal-day-btn:hover:not(:disabled) {
	background: #ebe2d4 !important;
}

.sb-cal-day-btn:disabled {
	color: #d7cfc3 !important;
	cursor: default;
}

.sb-cal-day.is-today .sb-cal-day-btn {
	background: #f2ece3;
	font-weight: 700;
}

.sb-cal-day.is-selected .sb-cal-day-btn {
	background: var(--sb-accent);
	color: #fff;
	font-weight: 700;
}

.sb-cal-day.is-empty {
	pointer-events: none;
}

/* ---------- Guests dropdown ---------- */

.sb-field--guests {
	flex: 1 1 260px;
}

.sb-guests-toggle {
	border: 1px solid var(--sb-border) !important;
	border-radius: 10px;
	padding: 12px 16px;
	background: #fff !important;
	font-family: inherit;
	display: flex;
	align-items: center;
	gap: 18px;
	cursor: pointer;
	text-align: left;
}

.sb-guests-toggle span {
	font-size: 13px;
	color: var(--sb-muted) !important;
	letter-spacing: 0.02em;
}

.sb-guests-toggle strong {
	font-size: 24px;
	color: var(--sb-ink) !important;
	margin-right: 4px;
}

.sb-guests-panel {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--sb-bg) !important;
	border: 1px solid var(--sb-border) !important;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(30, 20, 10, 0.15);
	padding: 24px;
	z-index: 20;
	min-width: 320px;
	max-height: 70vh;
	overflow-y: auto;
}

.sb-guests-panel.is-open {
	display: block;
}

.sb-rooms-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

.sb-rooms-field label {
	font-size: 26px;
	color: var(--sb-ink) !important;
	font-family: inherit;
}

.sb-rooms-field input[type="number"],
.sb-room-guest-block__col input[type="number"] {
	appearance: auto !important;
	-webkit-appearance: auto !important;
	-moz-appearance: textfield;
	border: 1px solid var(--sb-border) !important;
	border-radius: 8px;
	background: #fff !important;
	color: var(--sb-ink) !important;
	font-size: 17px;
	font-family: inherit;
	padding: 12px 14px;
	width: 100%;
}

.sb-room-guest-block {
	padding-top: 14px;
	border-top: 1px solid var(--sb-border);
	margin-bottom: 14px;
}

.sb-room-guest-block:first-child {
	border-top: none;
	padding-top: 0;
}

.sb-room-guest-block__title {
	font-size: 24px;
	color: var(--sb-ink) !important;
	margin-bottom: 10px;
	font-family: inherit;
}

.sb-room-guest-block__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.sb-room-guest-block__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sb-room-guest-block__col label {
	font-size: 20px;
	color: var(--sb-ink) !important;
	font-family: inherit;
}

.sb-guests-done {
	margin-top: 10px;
	width: 100%;
	background: var(--sb-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px;
	padding: 10px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Search button ---------- */

.sb-search-btn {
	background: var(--sb-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px;
	padding: 16px 40px;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
	flex-shrink: 0;
}

.sb-search-btn:hover {
	background: var(--sb-accent-dark) !important;
}

.sb-search-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------- Messages & results ---------- */

.sb-message {
	margin-top: 16px;
	font-size: 15px;
	text-align: center;
	color: var(--sb-ink);
	background: rgba(255, 255, 255, 0.92);
	border-radius: 10px;
	padding: 0;
}

.sb-message:not(:empty) {
	padding: 12px 16px;
}

.sb-message.is-error {
	color: #a13a3a;
	background: #fdecec;
}

.sb-message.is-success {
	color: #2f6b3f;
	background: #eaf6ec;
}

.sb-results {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.sb-room-card {
	background: var(--sb-bg);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(30, 20, 10, 0.15);
	display: flex;
	flex-direction: column;
}

.sb-room-card__carousel {
	position: relative;
	height: 180px;
	background-color: #efe7db;
	overflow: hidden;
}

.sb-room-card__slides {
	display: flex;
	height: 100%;
	transition: transform 0.3s ease;
}

.sb-room-card__slide {
	flex: 0 0 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.sb-room-card__nav {
	position: absolute !important;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.4) !important;
	color: #fff !important;
	border: none !important;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.sb-room-card__nav--prev {
	left: 8px;
}

.sb-room-card__nav--next {
	right: 8px;
}

.sb-room-card__carousel--single .sb-room-card__nav,
.sb-room-card__carousel--single .sb-room-card__dots {
	display: none;
}

.sb-room-card__dots {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 5px;
	z-index: 2;
}

.sb-room-card__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
}

.sb-room-card__dot.is-active {
	background: #fff;
}

.sb-room-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sb-room-card__name {
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	margin: 0;
	color: var(--sb-ink);
}

.sb-room-card__desc {
	font-size: 14px;
	color: var(--sb-muted);
	margin: 0 0 4px;
	line-height: 1.5;
}

.sb-room-card__avail {
	font-size: 13px;
	color: var(--sb-accent-dark);
	font-weight: 600;
	margin: 0;
}

.sb-room-card__footer {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sb-room-card__price {
	font-size: 16px;
	font-weight: 700;
	color: var(--sb-ink);
}

.sb-room-card__btn {
	background: var(--sb-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.sb-room-card__btn:hover {
	background: var(--sb-accent-dark) !important;
}

.sb-form-section-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sb-accent-dark);
	margin: 18px 0 10px;
}

.sb-form-section-title:first-of-type {
	margin-top: 0;
}

.sb-service-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--sb-border);
	font-size: 13px;
}

.sb-service-row:last-child {
	border-bottom: none;
}

.sb-service-row input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
	/* [SUA LOI] Ep hien thi VA bam duoc, tranh bi theme WordPress ghi de
	   CSS mac dinh cua checkbox (VD appearance:none/pointer-events:none
	   khien checkbox bien mat hoac khong bam duoc). Dung !important vi
	   theme co the dung selector cu the hon/co !important rieng. */
	appearance: auto !important;
	-webkit-appearance: auto !important;
	-moz-appearance: auto !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: inline-block !important;
	position: static !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	border: 1px solid #999;
	background: #fff;
	margin: 3px 0 0 0 !important;
}

.sb-service-row__body {
	flex: 1;
}

.sb-service-row__name {
	font-weight: 600;
	color: var(--sb-ink);
}

.sb-service-row__desc {
	color: var(--sb-muted);
	font-size: 12px;
	margin: 2px 0 0;
}

.sb-service-row__price {
	font-weight: 600;
	color: var(--sb-ink);
	white-space: nowrap;
	font-size: 13px;
}

.sb-service-row__price--dynamic {
	color: var(--sb-muted);
	font-weight: 400;
	font-style: italic;
}

.sb-coupon-row {
	display: flex;
	gap: 8px;
	margin-bottom: 6px;
}

.sb-coupon-row input {
	flex: 1;
	border: 1px solid var(--sb-border) !important;
	border-radius: 8px;
	padding: 9px 10px;
	font-family: inherit;
	font-size: 13px;
	background: #fff !important;
	color: var(--sb-ink) !important;
	text-transform: uppercase;
}

.sb-coupon-row button {
	background: var(--sb-ink) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.sb-coupon-applied-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 2px;
}
.sb-coupon-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #eef6f0;
	color: #2f6b3f;
	border: 1px solid #cfe8d6;
	border-radius: 20px;
	padding: 4px 6px 4px 12px;
	font-size: 12.5px;
	font-weight: 600;
}
.sb-coupon-tag__remove {
	background: none;
	border: none;
	color: #2f6b3f;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 2px 4px;
}
.sb-coupon-tag__remove:hover {
	color: #a13a3a;
}

.sb-coupon-status {
	font-size: 12.5px;
	margin: 0 0 10px;
	min-height: 16px;
}

.sb-coupon-status.is-error {
	color: #a13a3a;
}

.sb-coupon-status.is-success {
	color: #2f6b3f;
}

.sb-price-breakdown {
	margin-top: 8px;
}

.sb-price-breakdown__row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--sb-muted);
	padding: 3px 0;
}

.sb-price-breakdown__row--discount {
	color: #2f6b3f;
}

.sb-price-breakdown__row--surcharge {
	color: #a05a2c;
}

.sb-modal-total {
	font-size: 15px;
	font-weight: 700;
	text-align: right;
	margin: 0 0 14px;
	padding-top: 10px;
	border-top: 1px dashed var(--sb-border);
	color: var(--sb-ink) !important;
}

.sb-modal-total .sb-modal-total__original {
	text-decoration: line-through;
	color: var(--sb-muted);
	font-weight: 400;
	font-size: 13px;
	margin-right: 6px;
}

.sb-card-payment-section {
	border: 1px solid var(--sb-border);
	border-radius: 10px;
	padding: 18px;
	margin-bottom: 18px;
	background: #fafaf7;
}

.sb-card-payment-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 10px;
	color: var(--sb-ink);
}

.sb-card-payment-section__badge {
	background: #e9e2d3;
	color: #7a6a45;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 20px;
	letter-spacing: 0.3px;
}

.sb-card-payment-section__note {
	font-size: 12px;
	color: var(--sb-muted);
	line-height: 1.6;
	margin: 0 0 12px;
}

.sb-card-payment-section__fields {
	opacity: 0.55;
	pointer-events: none;
}

.sb-card-payment-section__fields input {
	background: #f0eee7;
	cursor: not-allowed;
}

.sb-card-payment-section__row2 {
	display: flex;
	gap: 12px;
}

.sb-card-payment-section__row2 .sb-form-row {
	flex: 1;
}

#sb-guest-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.sb-guest-row {
	display: grid;
	grid-template-columns: 20px 1fr 1fr;
	gap: 8px;
	align-items: center;
}

.sb-guest-row__num {
	font-size: 12px;
	color: var(--sb-muted);
	font-weight: 600;
}

.sb-guest-row__name,
.sb-guest-row__nationality {
	border: 1px solid var(--sb-border) !important;
	border-radius: 8px;
	padding: 9px 10px;
	font-family: inherit;
	font-size: 13px;
	background: #fff !important;
	color: var(--sb-ink) !important;
}

.sb-success-mark {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #eaf6ec;
	color: #2f6b3f;
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
}

#sb-modal-success-view h3 {
	text-align: center;
}

#sb-success-text {
	text-align: center;
	font-size: 14px;
	color: var(--sb-muted);
	margin-bottom: 10px;
}

.sb-payment-section {
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--sb-border);
}

.sb-payment-sub {
	font-size: 12.5px;
	color: var(--sb-muted);
	margin: 0 0 12px;
}

.sb-payment-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sb-payment-option {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--sb-border) !important;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	cursor: pointer;
	background: #fff !important;
	color: var(--sb-ink) !important;
}

.sb-payment-option:has(input:checked) {
	border-color: var(--sb-accent) !important;
	background: #fdf6ef !important;
}

.sb-payment-option.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.sb-qr-box {
	margin-top: 14px;
	text-align: center;
	background: #f7f1ea;
	border-radius: 10px;
	padding: 16px;
}

.sb-qr-title {
	font-weight: 700;
	margin: 0 0 10px;
	font-size: 14px;
}

.sb-qr-box img {
	max-width: 220px;
	width: 100%;
	border-radius: 8px;
	background: #fff;
	padding: 6px;
}

.sb-qr-meta {
	font-size: 13px;
	margin: 10px 0 0;
}

.sb-payment-status {
	font-size: 12.5px;
	color: var(--sb-muted);
	margin: 10px 0 0;
	min-height: 16px;
}

/* ---------- Modal ---------- */

.sb-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

.sb-modal.is-open {
	display: flex;
}

.sb-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 14, 10, 0.55);
}

.sb-modal__box {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	width: 92%;
	max-width: 460px;
	max-height: 88vh;
	overflow-y: auto;
	font-family: 'Inter', sans-serif;
}

.sb-modal__box h3 {
	font-family: 'Playfair Display', serif;
	margin: 0 0 8px;
	font-size: 24px;
}

.sb-modal__summary {
	font-size: 14px;
	color: var(--sb-muted);
	margin-bottom: 18px;
}

.sb-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none !important;
	border: none !important;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--sb-muted) !important;
}

.sb-form-row {
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sb-form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--sb-ink) !important;
}

.sb-form-row input,
.sb-form-row textarea {
	border: 1px solid var(--sb-border) !important;
	border-radius: 8px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	background: #fff !important;
	color: var(--sb-ink) !important;
}

.sb-phone-input-group {
	display: flex;
	gap: 8px;
}
.sb-phone-cc-wrap {
	position: relative;
	flex: 0 0 92px;
}
.sb-phone-input-group .sb-phone-cc {
	width: 100%;
	border: 1px solid var(--sb-border) !important;
	border-radius: 8px;
	padding: 10px 10px;
	font-family: inherit;
	font-size: 14px;
	background: #fff !important;
	color: var(--sb-ink) !important;
}
.sb-phone-input-group .sb-phone-cc:focus {
	outline: none;
	border-color: var(--sb-accent) !important;
}
.sb-phone-cc-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 220px;
	max-height: 220px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--sb-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	z-index: 50;
}
.sb-phone-cc-dropdown.is-open { display: block; }
.sb-phone-cc-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	font-size: 13px;
	cursor: pointer;
	color: var(--sb-ink);
}
.sb-phone-cc-option:hover,
.sb-phone-cc-option.is-active {
	background: var(--sb-bg-soft, #f6f3ee);
}
.sb-phone-cc-option .sb-phone-cc-option__code {
	font-weight: 600;
	min-width: 40px;
}
.sb-phone-cc-option .sb-phone-cc-option__name {
	color: var(--sb-muted);
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sb-phone-input-group input[type="tel"] {
	flex: 1;
	min-width: 0;
}
.sb-phone-hint {
	font-size: 12px;
	color: var(--sb-muted);
	margin: 2px 0 0;
}

.sb-form-submit {
	width: 100%;
	background: var(--sb-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px;
	padding: 13px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 6px;
}

.sb-form-submit:hover {
	background: var(--sb-accent-dark) !important;
}

.sb-form-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
	.sb-bar {
		padding: 20px;
		gap: 16px;
	}
	.sb-search-btn {
		width: 100%;
	}
	.sb-field {
		flex: 1 1 100%;
	}
	.sb-calendar-panel {
		left: 50%;
		transform: translateX(-50%);
		padding: 20px;
	}
	.sb-calendar-months {
		flex-direction: column;
		gap: 10px;
	}
	.sb-cal-month {
		width: 100%;
	}
	.sb-daterange-group {
		flex-direction: column;
	}
	.sb-nights-box {
		align-self: stretch;
	}
}

/* ---------- [BIEN THE PHONG] Vung chon giuong doi/don trong popup dat phong ---------- */

.sb-variant-select {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.sb-variant-select__card {
	display: block;
	border: 2px solid #e5e0d8;
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.sb-variant-select__card:has(input:checked) {
	border-color: #2f6b3f;
	background: #f4f8f5;
}

.sb-variant-select__card input[type="radio"] {
	margin-right: 8px;
}

.sb-variant-select__row {
	border: 1px solid #e5e0d8;
	border-radius: 10px;
	padding: 10px 12px;
}

.sb-variant-select__row .sb-variant-select__name {
	display: inline-block;
	margin-right: 10px;
	font-weight: 600;
}

.sb-variant-select__name {
	font-weight: 600;
}

.sb-variant-select__images {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	margin-top: 8px;
	padding-bottom: 2px;
}

.sb-variant-select__images img {
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

/* ---------- [TIEN NGHI] Icon tien nghi tren card phong / modal ---------- */

.sb-room-card__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.sb-amenity-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #f4f1ea;
	border-radius: 6px;
	padding: 3px 7px;
	font-size: 11px;
	color: #6b6255;
}

.sb-amenity-badge svg,
.sb-amenity-badge img {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.sb-amenity-badge em {
	font-style: normal;
	white-space: nowrap;
}

/* ---------- [BIEN THE PHONG] Carousel anh trong vung chon giuong ---------- */

.sb-variant-select__desc {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #8a8072;
	margin-top: 2px;
}

.sb-variant-carousel {
	position: relative;
	width: 100%;
	height: 140px;
	border-radius: 8px;
	overflow: hidden;
	margin-top: 8px;
	background: #eee;
}

.sb-variant-carousel__slides {
	display: flex;
	height: 100%;
	transition: transform 0.25s ease;
}

.sb-variant-carousel__slide {
	flex: 0 0 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.sb-variant-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.45);
	color: #fff;
	border: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	z-index: 2;
}

.sb-variant-carousel__nav--prev { left: 8px; }
.sb-variant-carousel__nav--next { right: 8px; }

.sb-variant-carousel__dots {
	position: absolute;
	bottom: 6px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 5px;
	z-index: 2;
}

.sb-variant-carousel__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255,255,255,0.6);
	cursor: pointer;
	display: block;
}

.sb-variant-carousel__dot.is-active {
	background: #fff;
	transform: scale(1.3);
}

/* ---------- [BIEN THE PHONG] Cum chon so luong (khi dat nhieu phong) ---------- */

.sb-variant-select__row-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.sb-variant-select__sep {
	color: #c9bfae;
	font-weight: 300;
}

.sb-variant-select__stepper {
	display: inline-flex;
	align-items: stretch;
	margin-left: auto;
}

.sb-variant-select__qty {
	width: 34px;
	height: 32px;
	border: none;
	background: transparent;
	color: #5c5346;
	font-size: 14px;
	text-align: center;
	cursor: default;
}

.sb-variant-select__qty:focus {
	outline: none;
}

.sb-variant-select__step-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
}

.sb-variant-select__step {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 26px;
	height: 19px;
	padding: 0 !important;
	margin: 0;
	color: #c9bfae;
	cursor: pointer;
}

.sb-variant-select__step svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sb-variant-select__step svg path {
	fill: transparent;
	stroke: #a3906f;
	stroke-width: 1.6;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

.sb-variant-select__step:hover svg path {
	fill: #8a6d3b;
	stroke: #8a6d3b;
}


/* ============================================================================
 * THANH TIM KIEM — BO CUC LAM LAI TU DAU (2.58.0)
 * ============================================================================
 *
 * Cac ban 2.57.x truoc day vo hieu vi mot ly do rat don gian: chung nham ten
 * lop. HTML dung .sb-field--guests va .sb-guests-toggle, con CSS toi viet
 * .sb-guests-field va .sb-guests-box — hai cai khong ton tai. Nen moi quy tac
 * danh cho o Khach deu roi vao khoang khong, va o Khach cu troi noi mot minh
 * trong khi cac o khac da vao hang.
 *
 * Khoi nay thay tron cho tat ca, va cot loi la khong con "chua cho uoc luong"
 * cho nhan nua:
 *
 *   1. Moi cot cao bang nhau  -> align-items: stretch
 *   2. O nhap bam DAY cot     -> margin-top: auto
 *   3. Moi o cao bang nhau    -> min-height chung
 *
 * Vi o bam day va cao bang nhau, dinh cua chung cung tu dong bang nhau —
 * khong phu thuoc nhan 1 dong hay 2 dong, khong phu thuoc tieng Viet hay
 * tieng Anh. Khong con con so uoc luong nao de sai.
 */

.sb-bar {
	--sb-box-h: 4.5rem;      /* chieu cao chung cua moi o; theo co chu goc */
	align-items: stretch;
	align-content: flex-start;
}

.sb-field,
.sb-field--guests,
.sb-field--daterange,
.sb-date-box {
	display: flex;
	flex-direction: column;
	min-width: 0;            /* cho phep co lai; thieu cai nay o se tran ra de len nhau */
}

.sb-daterange-group {
	align-items: stretch;
	min-width: 0;
}

.sb-bar .sb-field > label,
.sb-bar .sb-date-box > label {
	display: block;
	margin: 0 0 10px;
}

/* Bon o: ngay nhan, ngay tra, so dem, khach, va nut tim kiem. */
.sb-date-box__btn,
.sb-guests-toggle,
.sb-nights-box,
.sb-search-btn {
	min-height: var(--sb-box-h);
	margin-top: auto;        /* bam day cot -> day cac o tren cung mot duong */
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

/* O so dem va nut tim kiem nam trong HANG NGANG, ma hang ngang dang stretch
 * -> chung bi keo cao bang ca thanh, tro nen lenh khenh so voi cac o khac.
 * align-self: flex-end tra chung ve dung chieu cao chung va bam day. */
.sb-nights-box,
.sb-search-btn { align-self: flex-end; }

.sb-nights-box {
	justify-content: center;
	white-space: nowrap;     /* "Nights: 1" khong bi be lam hai dong */
	padding: 0 18px;
}

.sb-search-btn {
	justify-content: center;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ----------------------------------------------------------------------------
 * Man hinh vua — nut Tim kiem xuong hang rieng
 * ----------------------------------------------------------------------------
 * Duoi 1100px, nhet ca nam o tren mot hang thi cot nao cung bi bop hep va chu
 * xuong dong lung tung. Cho nut xuong hang rieng, keo dai het be ngang: cac o
 * con lai duoc tho, va nut bam thi de trung hon.
 */
@media (max-width: 1099px) {
	.sb-search-btn {
		flex: 1 0 100%;
		margin-top: 18px;
	}
}

/* ----------------------------------------------------------------------------
 * Dien thoai — xep chong don thuan, bo han flex
 * ----------------------------------------------------------------------------
 * Tren dien thoai moi o mot hang, nen khong can flex nua. display:block thi
 * trinh duyet chi xep chong theo chieu cao that, khong con hang nao gian ra
 * duoc; khoang cach duy nhat la 14px do ta dat.
 */
@media (max-width: 640px) {
	.sb-bar,
	.sb-field,
	.sb-field--daterange,
	.sb-field--guests,
	.sb-daterange-group,
	.sb-date-box {
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 0 !important;
	}

	.sb-date-box,
	.sb-field--guests,
	.sb-nights-box { margin: 0 0 14px !important; }

	.sb-bar .sb-field > label,
	.sb-bar .sb-date-box > label { margin: 0 0 6px !important; }

	.sb-date-box__btn,
	.sb-guests-toggle {
		display: flex !important;
		width: 100%;
		margin-top: 0 !important;
	}

	/* Khong dung !important cho o Nights: JavaScript an no bang style noi
	 * tuyen khi chua chon ngay, !important se de len ca lenh an do. */
	.sb-nights-box {
		width: 100%;
		margin-top: 0 !important;
	}

	.sb-search-btn {
		width: 100%;
		margin: 14px 0 0 !important;
		align-self: auto;
	}

	/* Bang lich chua mo thi khong chiem cho. */
	.sb-calendar-panel:not(.is-open):not(.open) { display: none !important; }
}

/* ----------------------------------------------------------------------------
 * Chot chan cho o "So dem"
 * ----------------------------------------------------------------------------
 * O nay chi co noi dung sau khi chon du hai ngay. Hai quy tac duoi bam theo
 * dung style noi tuyen ma JavaScript dat, nen ke ca sau nay co them quy tac
 * display nao khac thi o rong van khong the hien ra.
 */
.sb-nights-box[style*="display:none"],
.sb-nights-box[style*="display: none"] { display: none !important; }
.sb-bar .sb-nights-box:empty { display: none !important; }