/*
 * Sửa giao diện trên điện thoại / máy tính bảng.
 * Nạp sau CSS riêng của từng trang (cuối <head>) nên ghi đè được các file *_responsive.css.
 */

/* ---------- Dùng chung ---------- */

/* Ảnh nhỏ "Bài viết mới" ở footer: luôn vuông 60x60, không đè lên bài bên dưới */
.footer_blog_item {
	min-height: 60px;
}

.footer_blog_image {
	overflow: hidden;
}

.footer_blog_image img {
	width: 60px;
	height: 60px;
	object-fit: cover;
}

/* ---------- Máy tính bảng và điện thoại (< 992px) ---------- */
@media only screen and (max-width: 991px) {

	/* Menu mở từ nút ☰: nền đặc để chữ trang phía sau không lộ ra,
	   cuộn được khi màn hình thấp */
	.menu.active {
		opacity: 1;
	}

	.menu {
		overflow-y: auto;
	}

	.menu_content {
		min-height: 100%;
		height: auto;
		padding: 70px 0 40px;
	}

	.menu_account {
		display: flex;
		justify-content: center;
		gap: 24px;
		margin-top: 22px;
		padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.menu_account_item a {
		font-size: 14px;
		font-weight: 700;
		color: #fff;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	/* Trang danh sách và trang chi tiết: nội dung chính lên trước,
	   khối danh mục + "Góp ý cho chúng tôi" xuống cuối trang */
	.offers,
	.listing {
		display: flex;
		flex-direction: column;
		padding-bottom: 60px;
	}

	.offers > .search,
	.listing > .search {
		order: 2;
		margin-top: 60px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.offers > .container,
	.listing > .container {
		order: 1;
	}

	/* Khối "Khám phá thêm" ở cuối trang: có tiêu đề và khoảng đệm,
	   danh mục là một thẻ trắng bo góc tách khỏi nền gradient */
	.offers > .search .search_inner > .container,
	.listing > .search .search_inner > .container {
		padding-top: 32px;
	}

	.offers > .search .search_inner > .container::before,
	.listing > .search .search_inner > .container::before {
		content: "Khám phá thêm Bình Liêu";
		display: block;
		margin-bottom: 16px;
		font-size: 20px;
		font-weight: 700;
		color: #fff;
	}

	.offers > .search .search_tabs_container,
	.listing > .search .search_tabs_container {
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 8px 24px rgba(22, 41, 29, 0.18);
	}

	.offers > .search .search_tab,
	.listing > .search .search_tab {
		height: 54px;
		border-bottom: 1px solid #f0ebf5 !important;
	}

	.offers > .search .search_tab:last-child,
	.listing > .search .search_tab:last-child {
		border-bottom: none !important;
	}

	.offers > .search .search_tab img,
	.listing > .search .search_tab img {
		width: 30px;
		height: 30px;
		object-fit: contain;
		margin-right: 14px;
	}

	/* Mục đang xem: màu tím đậm cho nổi trên nền cam */
	.offers > .search .search_tab.active,
	.listing > .search .search_tab.active {
		background: #1f3d2b;
	}

	.offers > .search .feedback_panel,
	.listing > .search .feedback_panel {
		padding-top: 32px !important;
	}

	/* Nút lọc / sắp xếp: lưới 2 cột gọn gàng */
	.offers_sorting_container {
		margin-top: 40px !important;
	}

	.offers_sorting {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		width: 100%;
	}

	.offers_sorting > li {
		width: calc(50% - 5px) !important;
		margin: 0 !important;
		height: 44px;
		line-height: 40px;
		padding-left: 14px;
		padding-right: 12px;
	}

	.offers_sorting li i {
		line-height: 40px;
	}

	.offers_sorting li ul {
		z-index: 20;
	}

	.offers_grid {
		margin-top: 40px;
	}

	/* Hiện ngay các thẻ có hiệu ứng AOS (trang Điểm đến, Sự kiện):
	   trên điện thoại hiệu ứng làm thẻ ẩn và để lại khoảng trắng lớn */
	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---------- Điện thoại (< 768px) ---------- */
@media only screen and (max-width: 767px) {

	/* Thẻ trong trang danh sách: điểm đánh giá xuống ngay dưới tên, không đè lên tên */
	.offers_grid .offers_content {
		display: flex;
		flex-direction: column;
	}

	.offers_grid .offers_content > * {
		order: 5;
	}

	.offers_grid .offers_content > .offers_price {
		order: 1;
	}

	.offers_grid .offers_content > .offers_rating {
		order: 2;
	}

	.offers_grid .offers_content > .offer_reviews {
		order: 3;
		position: static;
		display: flex;
		align-items: center;
		margin-top: 8px;
		margin-bottom: 10px;
	}

	.offers_grid .offers_content > .book_button {
		align-self: flex-start;
	}

	.offers_content .offer_reviews_title {
		margin-top: 0 !important;
	}

	.offers_content .offers_price {
		line-height: 1.2;
	}

	/* Trang chi tiết: nút "Gọi điện" / "Chỉ đường" / "Đặt ngay" thẳng hàng */
	.hotel_title_button {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		margin-top: 20px;
	}

	.hotel_title_button .button {
		margin: 0 !important;
	}

	.hotel_title_button .hotel_map_link_container {
		width: 100%;
	}

	/* Bảng trong bài viết: chữ được xuống dòng, bảng quá rộng thì vuốt ngang */
	.hotel_info_text table,
	.blog_post_text table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: normal !important;
		font-size: 14px;
	}

	.hotel_info_text th,
	.hotel_info_text td,
	.blog_post_text th,
	.blog_post_text td {
		min-width: 100px;
		padding: 10px 12px !important;
	}

	/* Ảnh và video trong bài viết không tràn khung */
	.hotel_info_text img,
	.blog_post_text img,
	.hotel_info_text iframe,
	.blog_post_text iframe,
	.hotel_info_text video,
	.blog_post_text video {
		max-width: 100%;
		height: auto;
	}
}

/* ---------- Điện thoại nhỏ (< 576px) ---------- */
@media only screen and (max-width: 575px) {

	/* Trang chủ: bớt khoảng trắng giữa các khối */
	.intro,
	.intro ~ .offers,
	.testimonials,
	.trending {
		padding-top: 60px;
	}

	.intro {
		padding-bottom: 60px;
	}

	.intro_items {
		margin-top: 40px;
	}

	.offers_items {
		margin-top: 40px;
	}

	.cta {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.contact {
		padding-bottom: 60px;
	}

	.footer {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.footer_column {
		margin-bottom: 40px;
	}

	/* Thẻ tour trang chủ: bỏ khoảng trắng lớn trước "Chi tiết" khi ảnh và chữ xếp chồng */
	.offers_items .offers_col {
		margin-bottom: 50px;
	}

	.offers_items .offers_content {
		height: auto;
	}

	.offers_items .offers_link {
		margin-top: 0;
		padding-top: 16px;
	}

	/* Tên trong thẻ danh sách nhỏ lại một chút cho vừa màn hình */
	.offers_content .offers_price {
		font-size: 24px;
	}
}