.item-card {
	overflow: hidden;
	height: 350px;
}

.item-card .card-title {
	height: 38px;
}

.item-card:hover {
	/* background: #f1f1f1; 
            transform: scale(1.03);*/
	border: 0.5px solid rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.item-card a:hover {
	text-decoration: none;
}

.item-card img {
	transition: transform 0.2s ease-in-out;
	/* mượt khi hover */
	transform-origin: center center;
	/* phóng to từ giữa */
	max-height: 170px;
	min-height: 170px;
}

.item-card img:hover {
	transform: scale(1.03);
}

.item-card .price {
	font-size: 1.1rem !important;
}

.listing-item {
	border-bottom: 1px solid #dee2e6;
	padding: 15px 0;
}

.listing-item img {
	max-width: 120px;
	border-radius: 5px;
}

/*left menu member*/
.leftmenu-mem .list-group-item.active {
	/* viền cũng warning */
	color: black !important;
	font-weight: 600;
	background-color: white !important;
}

/*member menu off canvas*/
#mobileMenu .list-group-item.active {
	z-index: 2;
	color: black;
	font-weight: 600;
	background-color: var(--bs-tertiary-bg);
	border-color: var(--bs-tertiary-bg);
}

.collapse-text {
	max-height: 120px;
	/* chiều cao rút gọn */
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.collapse-text.expanded {
	max-height: 1000px;
	/* đủ lớn để hiển thị toàn bộ text */
}


footer {
	margin-bottom: 60px !important;
}

.footer-text {
	color: #6c757d;
	line-height: 1.6;
	transition: color 0.2s;
}

.footer-text a {
	color: #6c757d;
	/* link cũng màu muted */
	text-decoration: none;
	/* bỏ gạch chân */
}

.footer-text a:hover {
	color: #343a40;
	/* hover đổi đậm hơn */
	text-decoration: underline;
}

a.secondary-link {
	color: #6c757d;
	/* xám nhẹ */
	text-decoration: none;
	/* font-weight: 500; */
	transition: all 0.3s ease;
	border-bottom: 1px solid transparent;
}

a.secondary-link:hover {
	color: #495057;
	/* đậm hơn chút */
	border-bottom: 1px solid #adb5bd;
	/* ánh nhẹ khi hover */
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	/* ánh nhẹ */
}

/*gallery chi tiet */
.gallery-main {
	width: 100%;
	aspect-ratio: 4 / 3;
	/* giữ tỷ lệ đẹp */
	object-fit: cover;
	border: 1px solid #dee2e6;
	border-radius: .5rem;
}

.thumb {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: .5rem;
	border: 2px solid transparent;
	cursor: pointer;
}

.thumb.active {
	border-color: #0d6efd;
}

.thumb-wrap {
	gap: .5rem;
}

.sticky-side {
	position: sticky;
	top: 1rem;
}

.price {
	font-size: 1.6rem;
	font-weight: 700;
}

/*end gallery chi tiet */

.breadcrumb .active {
	font-weight: 500 !important;
}

.category-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	/* không cho scroll dọc */
	-webkit-overflow-scrolling: touch;
	/* mượt trên iOS */
	scrollbar-width: none;
	/* Firefox ẩn thanh scroll */
}

.category-scroll::-webkit-scrollbar {
	display: none;
	/* Chrome/Safari ẩn thanh scroll */
}

.grid-template {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	/* 2 hàng */
	grid-auto-columns: 154px;
	/* chiều rộng 1 item, tùy chỉnh */
	gap: 8px;
}

#pillTabs .nav-link {
	border-radius: 0;
	color: black;
}

#pillTabs .nav-item .nav-link {
	border-radius: 10px 10px 0 0;

}

#pillTabs .nav-link.active {
	background: var(--bs-web);
	color: #fff;
}

/*step*/
/* Stepper base */
.stepper {
	position: relative;
	width: 100%;
	margin: 10px 0;
}

/* Step */
.step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	position: relative;
	text-align: center;
}

/* Circle (vòng tròn số) */
.step .circle {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	line-height: 35px;
	font-weight: 600;
	color: white;
	background-color: var(--bs-secondary);
	z-index: 2;
	transition: background-color 0.3s ease;
}

/* Label text */
.step .label {
	margin-top: 6px;
	font-size: 0.9rem;
	color: var(--bs-secondary);
}

/* Line nối giữa các step */
.line {
	flex: 1;
	height: 3px;
	background-color: var(--bs-secondary);
	margin: 0 4px;
	z-index: 1;
}

/* Completed steps */
.step.completed .circle {
	background-color: var(--bs-web);
}

.step.completed .label {
	color: var(--bs-web);
}

.step.completed~.line {
	background-color: var(--bs-web);
}

/* Active step (bước hiện tại) */
.step.active .circle {
	background-color: var(--bs-web);
	box-shadow: 0 0 8px rgba(var(--bs-web-rgb), 0.6);
}

.step.active .label {
	color: var(--bs-web);
}


/*login form*/
.auth-modal .nav-tabs .nav-link {
	border: none;
	border-bottom: 2px solid transparent;
	color: #6c757d;
	transition: all 0.25s ease;
}

.auth-modal .nav-tabs .nav-link:hover {
	color: var(--bs-web);
	/* background-color: rgba(var(--bs-secondary-rgb), 0.05); */
	border-radius: 0.5rem 0.5rem 0 0;
}

.auth-modal .nav-tabs .nav-link.active {
	border-color: var(--bs-secondary-rgb);
	font-weight: 600;
}

.auth-modal .modal-content {
	border-radius: 1rem;
	background: #fff;
	animation: fadeInScale 0.3s ease;
}

.auth-modal .tab-pane {
	animation: fadeSlide 0.35s ease;
}

@keyframes fadeInScale {
	0% {
		transform: scale(0.95);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes fadeSlide {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.auth-modal .btn-outline-danger:hover,
.auth-modal .btn-outline-primary:hover {
	color: #fff;
}

/*end login form*/

.offcanvas-mem {
	width: 100% !important;
	/* menu chiếm 100% màn hình bên phải */
	font-size: 1rem;
}

.fix-height-postimg {
	height: 180px !important;
}

/* Cho mobile */
@media (max-width: 576px) {
	.fix-height-postimg {
		height: 140px !important;
	}

	.item-card .price {
		font-size: 0.875rem !important;
	}

	.item-card .card-title {
		height: 32px;
	}

}

.fix-h39 {
	height: 39px !important;
}

/* fix max width cua danh sach image nho trong detail page*/
.splide {
	max-width: 100% !important;
}

.chat-item .time {
	align-self: flex-start;
	/* đẩy lên phía trên */
	white-space: nowrap;
	/* không xuống dòng */
}

.chat-item:hover {
	background: #f5f5f5;
}

.chat-item.active {
	background: #e9f3ff;
}

.bubble {
	display: inline-block;
	/* quan trọng: ôm theo nội dung */
	max-width: 75%;
	/* giới hạn chiều rộng để xuống dòng nếu quá dài */
	white-space: normal;
	/* cho phép wrap */
}

/* banner quangcao */
#banner-TopBannerIndex {
	width: 100%;
	height: 300px;
	overflow: hidden;
}

#banner-TopBannerIndex img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
	border-radius: 10px;
}

/* Class dùng chung cho tất cả banner */
.banner-ads-container {
	transition: opacity 0.5s ease-in-out;
	opacity: 1;
}

/* Hiệu ứng ẩn để fade */
.banner-fading {
	opacity: 0 !important;
}

.banner-ads-container img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Mobile */
@media (max-width: 768px) {
	#banner-TopBannerIndex {
		height: 120px;
		min-height: 100px;
	}
}

#banner-MidBannerIndex {
	width: 100%;
	height: 300px;
	overflow: hidden;
}

#banner-MidBannerIndex img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
	border-radius: 10px;
}

/* Mobile */
@media (max-width: 768px) {
	#banner-MidBannerIndex {
		height: 120px;
		min-height: 100px;
	}
}

/*banner-DetailMid*/
#banner-DetailMid {
	width: 100%;
	max-height: 180px;
	overflow: hidden;
}

#banner-DetailMid img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
	border-radius: 10px;
}

/* Mobile */
@media (max-width: 768px) {
	#banner-DetailMid {
		max-height: 120px;
		min-height: 80px;
	}
}

#banner-SearchRight img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
	border-radius: 10px;
}

/* Mobile */
@media (max-width: 768px) {
	#banner-SearchRight img {
		max-height: 100%;
	}
}

/*banner-DetailRight*/
#banner-DetailRight {
	width: 100%;

	overflow: hidden;
}

#banner-DetailRight img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
	border-radius: 10px;
}

/* Mobile */
@media (max-width: 768px) {
	#banner-DetailRight {}
}

/* end banner quangcao */

.sub-cate-btn {
	display: flex !important;
	/* ghi đè btn */
	flex-direction: column !important;
	/* xếp dọc */
	align-items: center;
	justify-content: center;
	gap: 4px;
	/* khoảng cách ảnh & chữ */
	text-align: center;
	padding: 6px 10px;
	/* chỉnh lại cho đẹp */
}

.sub-cate-btn img {
	display: block;
}

/* tất cả input và textarea */
body input::placeholder,
body textarea::placeholder {
	color: #6c757d !important;
	opacity: 0.5 !important;
	/* Độ mờ từ 0 đến 1 (0.5 là mờ 50%) */
	font-size: 0.9rem;
}

::-webkit-input-placeholder {
	/* Edge, Chrome, Safari */
	opacity: 0.4 !important;
}

:-ms-input-placeholder {
	/* IE 10-11 */
	opacity: 0.4 !important;
}

::placeholder {
	/* Firefox, Modern browsers */
	opacity: 0.4 !important;
}

/* main mobi css */
@media (max-width: 768px) {
	.item-card img {
		max-height: 120px;
		min-height: 120px;
	}
}