/**
 * Responsive mobile 768 08 -08
 *
 * @format
 */

/* Mobile responsive styles (max-width: 768px) */
/* Vùng bao */

/* Responsive design for mobile (max-width: 768px) */
@media (max-width: 768px) {
	.filter-header-content-inner {
		flex-direction: column;
		align-items: stretch;
	}

	/* Arrange filter items in 2 rows */
	.sc-aaqME {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	/* Ensure button is at the bottom right */
	.sc-iRFsWr {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		/* margin-top: 10px; */
	}

	.filter-header__apply-button {
		padding: 8px;
	}

	.filter-header__apply-button span {
		display: none;
	}

	.filter-header__apply-button svg {
		display: block;
		width: 20px;
		height: 20px;
	}

	/* Hide vertical divider on mobile */
	.div-line {
		display: none;
	}

	/* Show mobile divider */
	.mobile-divider {
		display: block;
		text-align: center;
		font-size: 16px;
		color: #e5e7eb;
		margin: 5px 0;
	}

	/* Adjust dropdown container for mobile */
	.filter-range-date__container {
		margin: 0;
	}

	.dropdown-container select {
		font-size: 12px;
		padding: 6px;
	}
}
/* Bọc ngoài */
.filter-wrapper {
	background: #fff;
	padding: 10px;
}

/* Container filter */
.filter-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
}

/* Nhóm filter */
.filter-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

/* Mỗi item */
.filter-item {
	display: flex;
	flex-direction: column;
}

.filter-label {
	font-size: 14px;
	margin-bottom: 4px;
	margin-left: 10px;
	color: #333;
}

.location-dropdown {
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 15px;
	min-width: 180px;
}

/* Responsive – chia 2 hàng ở mobile */
@media (max-width: 768px) {
	.filter-group {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.location-dropdown {
		min-width: 100%;
	}
	.desktop-text {
		display: none;
	}
	.mobile-icon {
		display: block;
	}
}

/*  */
@media (max-width: 768px) {
	.filter-group {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px; /* khoảng cách giữa các item */
	}

	.filter-group > * {
		flex: 1 1 calc(50% - 10px); /* chia 2 cột */
		min-width: 150px;
	}
}

@media (max-width: 767px) {
	/* Adjust overall container padding */
	.col-12.mb-4.px-0.px-md-3 {
		padding: 0 10px !important;
	}

	/* Fix icon and content alignment */
	.col-6.d-flex.align-items-center.mb-2 {
		display: flex;
		align-items: center;
		/* Consistent spacing between icon and text */
	}

	.col-6.d-flex.align-items-center.mb-2 img {
		width: 16px !important; /* Smaller icon size */
		height: 16px;
		object-fit: contain; /* Ensure icons scale correctly */
	}

	.col-6.d-flex.align-items-center.mb-2 label {
		font-size: 12px; /* Smaller font for labels */
		line-height: 1.2;
		margin: 0;
	}

	/* Reduce image size in carousel */
	.col-md-4.px-0 {
		width: 100%; /* Full width on mobile */
	}

	.carousel.slide {
		height: 150px; /* Reduced height for carousel */
	}

	.carousel-inner img {
		height: auto !important; /* Match carousel height */
		object-fit: cover; /* Maintain aspect ratio */
	}

	/* Adjust carousel indicators */
	.custom-carousel-indicators {
		bottom: 5px !important;
	}

	.custom-carousel-indicators .btnCarousel {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #fff;
		opacity: 0.5;
	}

	.custom-carousel-indicators .btnCarousel.active {
		opacity: 1;
	}

	/* Resize and style the button */
	.sc-dwsnSq.bWIwaw.primary-btn.w-100 {
		padding: 8px 12px; /* Smaller padding */
		font-size: 14px; /* Smaller font */
		line-height: 1.2;
		width: 50% !important; /* Slightly narrower */
		margin: 0 auto; /* Center button */
		border-radius: 6px;
	}

	/* Adjust content column */
	.col-md-6.p-3 {
		padding: 10px !important; /* Reduced padding */
	}

	.body-1-semi-bold.mb-1.hotel-name {
		font-size: 16px; /* Smaller hotel name */
	}

	.address.mb-2 {
		font-size: 12px;
	}

	.text-muted.small.mt-2 {
		font-size: 11px; /* Smaller description */
		line-height: 1.3;
	}

	/* Adjust price column */
	.col-md-2.d-flex.flex-column {
		padding: 10px !important;
		align-items: flex-start; /* Align price and button to start */
	}

	.sc-gUQvok.letfsk.price2,
	.sc-fmciRz.flxGLN.price2,
	.sc-iFMAIt.bSRrbj.price2 {
		font-size: 12px; /* Smaller price text */
	}
	/* Ensure layout stacks vertically */
	.d-flex.cursor-pointer.flex-row {
		flex-direction: column !important;
	}

	.col-md-4.px-0,
	.col-md-6.p-3,
	.col-md-2.d-flex.flex-column {
		width: 100%; /* Stack columns vertically */
	}
	.d-flex {
		flex-wrap: revert;
	}
	.container,
	.row {
		flex-direction: row !important;
	}
}

/* Maintain desktop styles */
@media (min-width: 768px) {
	.d-flex.cursor-pointer.flex-row {
		flex-direction: row !important;
	}

	.col-md-4.px-0 {
		width: 33.33%; /* Restore original width */
	}

	.col-md-6.p-3 {
		width: 50%;
		padding: 15px !important;
	}

	.col-md-2.d-flex.flex-column {
		width: 16.67%;
		padding: 15px !important;
	}

	.carousel.slide {
		height: auto; /* Restore default height */
	}

	.carousel-inner img {
		height: auto !important;
	}

	.sc-dwsnSq.bWIwaw.primary-btn.w-100 {
		padding: 10px;
		font-size: 16px;
		width: 100% !important;
	}
}

/*  */
/* Responsive cho mobile */
@media (max-width: 768px) {
	.price-column {
		padding: 0.5rem;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.price-column .price2 {
		font-size: 0.85rem; /* Thu nhỏ chữ */
	}

	.price-column .fs-5 {
		font-size: 1.25rem !important; /* Giá lớn vẫn nổi bật nhưng nhỏ hơn desktop */
	}

	.price-column .bSRrbj {
		display: none; /* Ẩn dòng "Đã bao gồm thuế và phí" để gọn */
	}

	.price-column button {
		font-size: 0.9rem;
		padding: 0.2rem;
	}
	.price-info {
		display: flex;
		flex-direction: column; /* 3 hàng */
		width: 80%;
	}

	.price-note {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.price-column button {
		width: auto; /* Thu nhỏ nút */
		padding: 0.3rem 0.6rem;
		font-size: 0.9rem;
	}
}
@media (max-width: 768px) {
	.promo-wrapper {
		display: flex;
		gap: 10px;
	}
	.promo-wrapper > div {
		flex: 1; /* Tự chia đều 50% */
		margin-bottom: 0 !important; /* Bỏ margin dọc khi nằm ngang */
	}
}

/* Desktop and default styles */
.no-rooms-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 15px;
	width: 100%;
	background: #f8f8f8;
	border-top: 1px solid #eee;
}

.no-rooms-message {
	font-size: 12px;
	font-weight: bold;
	color: #ed1c24;
	text-align: center;
	margin-bottom: 10px;
}
.no-rooms-alert {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid rgb(255, 16, 1);
	background-color: rgb(254, 239, 239);
	border-radius: 8px;
}

.alert-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.alert-text {
	font-size: 14px;
	color: #dc3545;
	font-weight: 500;
	font-weight: bold;
}

/* Mobile responsive styles */
@media (max-width: 767px) {
	.no-rooms-section {
		padding: 10px;
		background: #fff;
		border-top: none;
	}
	.no-rooms-section {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.no-rooms-message {
		font-size: 12px;
		margin-bottom: 8px;
		width: 60%;
	}

	.no-rooms-alert {
		padding: 6px;
		gap: 6px;
		height: -webkit-fill-available;
	}

	.alert-icon {
		width: 14px;
		height: 14px;
	}

	.alert-text {
		font-size: 13px;
	}

	/* Two-column layout for mobile */
	.card-container {
		display: flex;
		flex-wrap: nowrap; /* Ensures columns stay on the same row */
		gap: 10px; /* Space between columns */
		width: 100%;
	}

	.card-column {
		flex: 0 0 50%; /* Each column takes 50% width for two columns */
		max-width: 50%;
		padding: 0 5px; /* Small padding for spacing between columns */
	}
}

/* Desktop card-column */
.card-column {
	flex: 0 0 16.67%; /* Equivalent to col-md-2 */
	max-width: 16.67%;
	padding: 0;
}

/* footer */
@media (max-width: 600px) {
	.contact-title {
		font-size: 2rem;
	}

	.contact-content {
		padding: 32px 8px 36px 8px;
	}

	.contact-section {
		min-height: 220px;
	}
}
@media (max-width: 768px) {
	.fyXYhT .banner-item-v2 .banner-image {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		margin-left: -9px;
		margin-top: -5px;
	}

	.plus-icon {
		display: inline;
		font-weight: bold;
	}

	.content-wrapper {
		display: none;
		/* Hide by default on small screens */
	}

	.tabbs {
		max-width: 79.375rem;
		margin: 0 auto;
		padding: 1.5rem 1rem;
		max-width: 1200px;
		margin: 0 auto;
		display: table-cell;
	}

	.locations {
		display: none;
		flex-direction: row;
	}

	.custom-list li {
		margin-bottom: 30px;
		margin-left: 50px;
		margin-right: 15px;
		/* Adds 30px gap between each list item */
	}

	.sidebar-open {
		width: max-content;
		/* Sidebar width when open */
	}

	.jexDYC {
		display: none !important;
		flex-direction: column;
		gap: 8px;
	}

	.image-container img.small-image {
		max-height: 400px;
		object-fit: cover;
	}

	.divide {
		display: grid;
	}

	.title {
		font-size: 30px;
		font-weight: 500;
		line-height: 32px;
		letter-spacing: 0.005em;
	}

	.header-container {
		display: grid;
		flex-direction: row;
		gap: 30px;
		max-width: 1340px;
		margin: auto;
		width: 100%;
	}

	.brand-filter {
		display: none;
	}

	.brand-filter1 {
		display: flex;
		flex-direction: column;
		-webkit-box-align: center;
		align-items: center;
		gap: 24px;
	}

	.buildings {
		display: grid;
		margin-left: auto;
		margin-right: auto;
	}

	.footer-content__heading {
		font-size: 30px;
		font-weight: 500;
		line-height: 32px;
		max-width: 290px;
	}

	.action-text {
		justify-content: center;
	}

	.dVFObO .footer-content-container .footer-content__heading {
		font-family: "Forma DJR Micro";
		font-size: 30px;
		font-weight: 500;
		line-height: 32px;
		color: white;
		margin-left: 45px;
	}

	.footer-image {
		width: 100%;
		height: 360px;
		object-fit: cover;
	}

	.bar {
		margin-top: -12px;
		margin-left: -4px;
		margin-right: 4px;
	}

	.jVGtjY {
		flex-direction: row;
		-webkit-box-pack: justify;
		justify-content: space-between;
		display: flow-root;
	}

	.bIferO {
		display: flow-root;
		flex-direction: row;
		-webkit-box-pack: justify;
		justify-content: space-between;
	}

	.bYngFR {
		max-width: 428px;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 16px;
	}

	.download-wrapper {
		margin-top: 16px;
	}

	.LEOYk {
		height: 100%;
		width: 100%;
		padding: 32px 24px;
		display: flex;
		flex-direction: column;
		gap: 32px;
		background-color: rgb(0, 0, 0);
	}

	.SZuKi {
		max-width: 428px;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin-top: 16px;
	}

	.download {
		margin-top: 5px;
	}

	.lastimg {
		display: flex;
		margin-top: 15px;
		gap: 12px;
	}

	.adjust {
		width: 192px;
		height: 192px;
	}

	.scroll-container {
		position: relative;
		width: 100%;
		/* Ensure the scroll container takes up full width */
		display: flex;
		align-items: center;
	}

	.scroll-wrapper {
		overflow-x: auto;
		width: 100%;
		/* Ensure it takes up all available space */
		scroll-behavior: smooth;
		padding: 0 40px;
		/* Add padding to make room for the scroll buttons */
		box-sizing: border-box;
	}

	.divide {
		display: inline-flex;
		width: max-content;
		/* Ensure content is sized correctly for scrolling */
	}

	.card-container {
		display: inline-block;
		width: 100%;
		/* Allow the card container to take full available width */
		max-width: 300px;
		/* Set a max-width to keep card size consistent */
		margin-right: 10px;
		/* Space between cards */
	}

	.scroll-left,
	.scroll-right {
		cursor: pointer;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.1);
		display: block;
		/* Optional: background for better visibility */
	}

	.scroll-left {
		left: 0;
	}

	.scroll-right {
		right: 0;
	}

	/* Enable horizontal scrolling for primary tabs */
	.nav-tabs {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		justify-content: center;
		scrollbar-width: none;
		/* Smooth scrolling on iOS */
	}

	/* Ensure tabs take only as much space as needed */
	.nav-item {
		flex: 0 0 auto;
	}

	.sidebar {
		display: block;
		/* Change to block or another display property for smaller screens */
		/* other responsive styles */
	}

	.container1 {
		max-width: 79.375rem;
		margin: 0 auto;
		padding: 1.5rem 1rem;
		max-width: 1200px;
		margin: 0 auto;
	}

	.img-tab {
		width: 100%;
		height: 100%;
		object-fit: contain;
		max-width: 40px;
		/* Adjust this to match button height */
		max-height: 40px;
		/* Adjust this to match button height */
	}

	/* Align the image center if necessary */
	.nav-link {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.jexDYC {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.bbbJXf {
		display: flex;
		flex-direction: row;
		gap: 16px;
	}

	.item {
		max-width: 154px;
		width: 100%;
		display: flex;
		flex-direction: row;
		gap: 4px;
		border-radius: 8px;
		border: 1px solid rgb(218, 218, 218);
		padding: 8px;
	}

	.body-2-medium {
		font-family: Be Vietnam Pro;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
	}

	.bbbJXf img {
		max-width: 40px;
		max-height: 40px;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.sign-up-policy {
		margin-top: 8px;
		text-align: center;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		color: rgb(19, 19, 19);
	}

	.term-of-service-policy {
		font-weight: 500;
		line-height: 20px;
		color: rgb(255, 38, 74);
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
		letter-spacing: 0.001em;
	}

	.container1 {
		display: none;
	}
}
@media (max-width: 768px) {
	.sidebar-open {
		width: 200px;
	}
	.sidebar a {
		font-size: 19px;
	}
	.sidebar li {
		margin-bottom: 20px;
		margin-left: 0px;
	}
}
@media (max-width: 768px) {
	.dmyNaS:not(.is-home-page-container) .filter-header-content-inner {
		width: 96%;
		padding: 0 10px;
	}
	.jlkUCc .navbar-header .header-logo img {
		margin-left: 10px;
	}

	/* Hiển thị chữ "Tìm phòng" ở mọi kích thước */
	.filter-header__apply-button span {
		display: inline-block !important;
	}
	.sc-iRFsWr.bUSPeg {
		justify-content: center;
	}
	.ehxPr.is-circle {
		padding: 0;
		border-radius: 20px;
		height: 40px;
		width: 138px;
	}
}
@media (max-width: 768px) {
	.branch-list-container,
	.sc-cvlWTT.cbAeBN.container.my-5 {
		max-width: 100vw;
	}
	.row {
		display: flex;
		flex-wrap: wrap;
		margin-right: -15px;
		margin-left: 0px;
	}
	.bAXwnw {
		margin-left: 12px;
	}
}

/* show fillter in mobile */
/* Ẩn filter mặc định trên mobile */
@media (max-width: 991px) {
	#filter-find-room-el {
		display: none;
	}
}

/* Nút Hiện search */
@media (max-width: 991px) {
	/* Mặc định ẩn filter trên mobile */
	#filter-find-room-el {
		display: none;
	}

	/* Nút hiện search */
	/* Nút hiện search */
	.btn-show-search {
		background: #ed1c24c7;
		color: white;
		border: none;
		padding: 8px 14px;
		border-radius: 6px;
		font-size: 14px;
		cursor: pointer;
		margin: 10px;

		margin-right: 15px;
		float: right; /* Đẩy nút qua bên phải */
	}

	/* Nút ẩn search */
	.btn-hide-search {
		background: #ccc;
		color: black;
		border: none;
		padding: 6px 12px;
		border-radius: 6px;
		font-size: 13px;
		cursor: pointer;
		margin: 5px 10px;
		float: right; /* Đẩy nút qua bên phải */
	}
}
.sidebar li a {
	margin-left: 10px !important;
}

/* Fix navbar centering on mobile */
@media (max-width: 768px) {
	.sc-jJoQJp.jlkUCc.container-fluid.main-header-nav,
	.main-header-nav,
	.jlkUCc.main-header-nav {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		flex-direction: row !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.sc-jJoQJp.jlkUCc .container,
	.main-header-nav .container,
	.main-header-nav > .container,
	.jlkUCc .container,
	.jlkUCc.container-fluid .container {
		max-width: 100% !important;
		width: 100% !important;
		flex-direction: row !important;
		display: block !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		box-sizing: border-box !important;
	}
	.sc-jJoQJp.jlkUCc .navbar-header,
	.jlkUCc .navbar-header,
	.main-header-nav .navbar-header {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.sc-jJoQJp.jlkUCc .navbar-header .header-logo,
	.jlkUCc .navbar-header .header-logo,
	.main-header-nav .navbar-header .header-logo {
		flex: 0 0 auto !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
	.jlkUCc .navbar-header .header-logo img {
		margin-left: 0 !important;
	}
	.sc-jJoQJp.jlkUCc .navbar-header .header-menu,
	.jlkUCc .navbar-header .header-menu,
	.main-header-nav .navbar-header .header-menu {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px !important;
		flex: 0 0 auto !important;
		margin-left: auto !important;
		margin-right: 0 !important;
		padding-right: 0 !important;
	}
	/* Ensure account menu items are visible and properly spaced */
	.jlkUCc .navbar-header .header-menu .header-menu__item.account-menu {
		display: flex !important;
		padding: 8px !important;
	}
}