/* Reset CSS toàn cục để tránh lỗi tràn viền (overflow-x) trên mobile */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 1. Cấu hình Container đặc biệt (Cách lề 85px) */
.container-ivy {
	width: 100%;
	padding-right: 85px;
	padding-left: 85px;
	margin-right: auto;
	margin-left: auto;
}

/* Trên mobile thì không cần cách lề 85px, chỉ cần 15px */
@media (max-width : 1199px) {
	.container-ivy {
		padding-right: 15px;
		padding-left: 15px;
	}
}

/* 2. Style cho Header */
.site-header {
	background: #fff;
	/*	border-bottom: 1px solid #e1e1e1; /* Đường kẻ mờ bên dưới */
	padding: 17px 0;

}

.site-header .container-ivy {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/*-> Giữ nguyên cái này để 2 bên trái phải dãn ra */
}

.site-header .container-ivy::after {
	content: "";
	position: absolute;
	bottom: -17px;
	/* Đẩy đường kẻ xuống dưới đáy Header (khớp với padding 17px) */
	left: 85px;
	/* Khớp với padding 85px của container trên desktop */
	right: 85px;
	/* Khớp với padding 85px của container trên desktop */
	height: 1px;
	/* Độ dày đường kẻ */
	background-color: #e1e1e1;
	/* Màu đường kẻ xám nhạt */
}

@media (max-width: 1199px) {
	.site-header .container-ivy::after {
		left: 15px;
		right: 15px;
	}
}

/* Menu bên trái */
.ivy-nav-link {
	color: #333 !important;
	font-weight: 600;
	/* Chữ đậm vừa */
	text-decoration: none;
	padding: 10px 0;
	position: relative;
	text-transform: uppercase;
	/* Chữ IN HOA */
	font-size: 12px;
	margin-right: 14px;
	letter-spacing: 0.5px;
	transition: color 0.3s;
}

.ivy-nav-link:hover {
	color: #000 !important;
	text-decoration: none;
}

/* Item màu đỏ (BIG SALE) */
.nav-highlight {
	color: #ff0000 !important;
}

/* Logo ở giữa */
.ivy-logo {
	position: absolute;
	/* Thoát khỏi dòng chảy Flexbox */
	left: 50%;
	/* Đẩy sang 50% container */
	transform: translateX(-50%);
	font-size: 28px;
	font-weight: 700;
	color: #000;
	text-decoration: none !important;
	letter-spacing: 2px;
	z-index: 10;
}

.ivy-logo span {
	font-weight: 300;
	/* Chữ 'moda' mỏng hơn */
}

/* Thanh tìm kiếm bên phải */
.ivy-search-box {
	position: relative;
	width: 250px;
}

.ivy-search-input {
	width: 100%;
	border: 1px solid #e1e1e1;
	border-radius: 4px 0 0 4px;
	/* Bo góc trái */
	padding: 6px 12px;
	font-size: 13px;
	outline: none;
}

.ivy-search-btn {
	background: #fff;
	border: 1px solid #e1e1e1;
	border-left: none;
	border-radius: 0 4px 4px 0;
	/* Bo góc phải */
	color: #666;
}

/* Icon bên phải (User, Cart...) */
.ivy-icon-btn {
	color: #333;
	font-size: 18px;
	margin-left: 20px;
	position: relative;
	text-decoration: none !important;
}

/* Số lượng trong giỏ hàng */
.cart-badge {
	position: absolute;
	top: -8px;
	right: -10px;
	background: #333;
	color: #fff;
	font-size: 10px;
	padding: 2px 5px;
	border-radius: 50%;
}

/* Container cho mỗi item menu cha */
.ivy-menu-item {
	position: static;
	/* Quan trọng để Mega menu full width */
}

/* Mega Menu ẩn mặc định */
.ivy-mega-menu {
	display: none;
	position: absolute;
	/* 1. ĐỊNH VỊ CHUẨN XÁC: Bắt đầu và kết thúc tại lề 85px */
	left: 85px;
	/* Cách mép trái 85px */
	right: 85px;
	/* Cách mép phải 85px */
	width: auto;
	/* Tự động tính toán chiều rộng (Không dùng 100% nữa) */
	top: 100%;
	background: #fff;
	border: 1px solid #f1f1f1;
	/*border-top: none;*/
	z-index: 1000;
	/* Padding bên trong menu: Cách thêm một chút để chữ không dính sát viền */
	padding: 30px 40px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.ivy-mega-menu::before {
	content: "";
	position: absolute;
	/* Đẩy lớp giả lên trên để lấp khoảng trống giữa menu cha và con */
	top: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	/* Chiều cao bằng khoảng hở */
	background: transparent;
	/* Trong suốt */
	display: block;
	z-index: 1001;
	/* Đè lên tất cả */
}

/* Hiện Mega Menu khi Hover */
.ivy-menu-item:hover .ivy-mega-menu {
	display: block;
}

/* Hover vào link con cấp 3 */
/*.ivy-mega-menu a.text-secondary:hover {
		color: #000 !important;
		padding-left: 5px; /* Hiệu ứng đẩy nhẹ sang phải */
/*}*/

/* 2. Layout Lưới đặc biệt (Cách nhau 50px) */
.ivy-grid-wrapper {
	display: flex;
	width: 100%;
}

/* Cột Đặc biệt (ALL ITEMS) - Cố định bên trái */
.ivy-col-special {
	width: 240px;
	flex-shrink: 0;
	padding-right: 40px;
	border-right: 1px solid #eee;
	margin-right: 40px;
	/* Không cần padding-left nữa, hoặc để nhỏ thôi */
	padding-left: 0;
}

/* Khu vực chứa các cột danh mục (ÁO, QUẦN...) */
.ivy-col-categories {
	flex-grow: 1;
	/* Chiếm hết không gian còn lại bên phải */
	display: flex;
	/* QUAN TRỌNG: Kích hoạt chế độ dàn trang Flex */
	flex-direction: row;
	/* QUAN TRỌNG: Bắt buộc xếp theo hàng NGANG */
	flex-wrap: wrap;
	/* Hết chỗ mới được xuống dòng */
	gap: 30px;
	/* Khoảng cách giữa các cột (giảm xuống 30px cho vừa đẹp) */
	padding-left: 40px;
	/* Cách đường kẻ dọc bên trái ra một chút */
	align-content: flex-start;
	/* Dồn nội dung lên trên */
}

/* Mỗi cột danh mục con */
.ivy-sub-cat-item {
	width: 200px;
	/* Đặt chiều rộng cố định cho mỗi cột */
	min-width: 180px;
	/* Không được co nhỏ hơn mức này */
	margin-bottom: 30px;
	/* Khoảng cách dưới chân mỗi cột */
	/* Đảm bảo không dính thuộc tính block cũ */
	display: block;
	box-sizing: border-box;
}

/* Link Style */
.ivy-cat-title {
	display: block;
	font-weight: 700;
	color: #333;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: 15px;
	text-decoration: none !important;
}

.ivy-cat-title:hover {
	color: #000;
}

.ivy-flex-container {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	/* BẮT BUỘC: Để nội dung dồn về bên trái */
}

.ivy-mega-menu .container-ivy {
	width: 100%;
	padding: 0;
	/* Xóa padding 85px đi để tránh bị cộng dồn thành 170px */
	margin: 0;
}

/* --------------------------------- FOOTER STYLE --------------------------------- */
/* --- FOOTER STYLE (PHIÊN BẢN TO & THOÁNG) --- */
.site-footer {
	background: #fff;
	/* 1. TĂNG PADDING CỰC MẠNH */
	padding-top: 60px;
	/* Đẩy nội dung xuống sâu hơn */
	padding-bottom: 10px;
	/* Khoảng trống bên dưới nhiều hơn */
	border-top: 1px solid #e1e1e1;
	font-size: 14px;
	/* 2. TĂNG CỠ CHỮ TOÀN BỘ (gốc 14-16px) */
	color: #333;
	line-height: 1.2;
	/* Giãn dòng thoáng hơn */
	margin-top: 40px;
}

/* 1. Tiêu đề cột (Giới thiệu, Liên hệ...) */
/* Tiêu đề cột */
.footer-title {
	font-size: 20px;
	/* Tiêu đề to đùng */
	font-weight: 600;
	/* Rất đậm */
	text-transform: uppercase;
	margin-bottom: 20px;
	/* Cách nội dung xa hơn (gốc 25px) */
	color: #000;
	letter-spacing: 0px;
}

/* 2. Danh sách link */
.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 16px;
	/* Tăng khoảng cách giữa các dòng link (Cũ là 16px) */
}

.footer-links a {
	color: #555;
	text-decoration: none;
	transition: all 0.2s;
	font-weight: 500;
	/* Chữ đậm hơn một chút cho dễ đọc */
	display: block;
	padding: 2px 0;
}

.footer-links a:hover {
	color: #000;
	padding-left: 5px;
	/* Hiệu ứng đẩy nhẹ sang phải khi hover */
}

/* 3. Mạng xã hội */
.social-list {
	display: flex;
	gap: 29px;
	/* Cách xa nhau hơn */
	margin-bottom: 30px !important;
}

.social-list i {
	font-size: 24px;
	/* 4. PHÓNG TO ICON (gốc 18px) */
}

.social-list a {
	color: #333;
	transition: color 0.2s;
}

/*.social-list a:hover {
	color: #000;
}

/* 4. Nút Hotline (To hơn) */
.hotline-btn {
	background: #222;
	color: #fff;
	display: inline-block;
	padding: 15px 22px;
	/* Nút to hơn */
	border-radius: 15px 0 15px 0;
	font-weight: 600;
	font-size: 15px;
	/* Chữ trong nút to hơn */
}

/* 5. Khung Newsletter (To và Nổi bật) */
.newsletter-box {
	border: 1px solid #ccc;
	padding: 30px 22px;
	/* Tăng khoảng cách bên trong cho khung "mập" ra */
	border-top-left-radius: 50px;
	/* Bo góc mạnh hơn */
	border-bottom-right-radius: 50px;
	position: relative;
	background: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
	/* Thêm bóng nhẹ cho nổi */
}

.newsletter-box h6 {
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 20px;
	font-weight: 600;
}

.newsletter-group {
	display: flex;
	border-bottom: 1px solid #999;
	/* Đường kẻ đậm hơn chút */
	padding-bottom: 10px;
}

.newsletter-group input {
	border: none;
	width: 100%;
	outline: none;
	font-size: 14px;
	/* Chữ nhập to hơn */
	color: #333;
	background: transparent;
	padding: 10px 0px;
}

.newsletter-group button {
	background: #fff;
	border: 1px solid #333;
	border-radius: 20px 0 20px 0;
	padding: 8px 25px;
	/* Nút to hơn */
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #333;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.3s;
}

.newsletter-group button:hover {
	background: #000;
	color: #fff;
}

/* Copyright */
.footer-bottom {
	font-size: 16px;
	color: #888;
	padding-top: 30px;
	margin-top: 50px;
	border-top: 1px solid #d1d2d4;
}

/* Container Flex bao quanh toàn bộ footer */
.footer-flex-container {
	display: flex;
	justify-content: flex-start;
	/* Căn trái */
	align-items: flex-start;
	/* Căn thẳng hàng trên cùng */
	flex-wrap: nowrap;
	/* Không cho xuống dòng ở màn hình to */
	padding-bottom: 30px;
}

/* 1. Cột Social & Hotline */
.footer-col-social {
	width: 298px;
	/* Đặt chiều rộng cố định để không bị co */
	flex-shrink: 0;
	/* YÊU CẦU: Cách cột Giới thiệu 61px */
	margin-right: 61px;
}

/* 2. Cột Giới thiệu */
.footer-col-intro {
	width: 136px;
	/* Chiều rộng đủ chứa chữ */
	flex-shrink: 0;
	/* YÊU CẦU: Cách cột Dịch vụ 68px */
	margin-right: 68px;
}

/* 3. Cột Dịch vụ khách hàng */
.footer-col-service {
	width: 248px;
	flex-shrink: 0;
	/* YÊU CẦU: Cách cột Liên hệ 68px */
	margin-right: 68px;
}

/* 4. Cột Liên hệ */
.footer-col-contact {
	width: 91px;
	flex-shrink: 0;
	/* YÊU CẦU: Cách cột Newsletter 61px */
	margin-right: 61px;
}

/* 5. Cột Newsletter */
.footer-col-newsletter {
	flex-grow: 1;
	/* Chiếm hết phần còn lại */
	min-width: 293px;
}

/* --- RESPONSIVE --- */
/* Với màn hình nhỏ hơn 1400px (Laptop nhỏ), ta phải giảm khoảng cách đi một chút kẻo vỡ giao diện */
@media (max-width : 1440px) {
	.footer-col-social {
		margin-right: 30px;
		width: 250px;
	}

	.footer-col-intro {
		margin-right: 30px;
		width: 140px;
	}

	.footer-col-service {
		margin-right: 30px;
		width: 220px;
	}

	.footer-col-contact {
		margin-right: 30px;
		width: 120px;
	}
}

/* Với màn hình Tablet & Mobile: Chuyển về dạng lưới (Grid) hoặc Cột dọc */
@media (max-width : 1199px) {
	.footer-flex-container {
		flex-wrap: wrap;
		/* Cho phép xuống dòng */
	}

	/* Reset margin cứng để layout không bị lệch */
	.footer-col-social,
	.footer-col-intro,
	.footer-col-service,
	.footer-col-contact,
	.footer-col-newsletter {
		width: 50%;
		/* Mỗi cột chiếm 50% màn hình */
		margin-right: 0;
		padding-right: 15px;
		margin-bottom: 30px;
		box-sizing: border-box;
		/* QUAN TRỌNG: Ngăn tràn viền do padding */
	}

	/* Newsletter full width trên mobile */
	.footer-col-newsletter {
		width: 100%;
	}

	.newsletter-box {
		box-sizing: border-box;
		/* Ngăn ô nhập email tràn ra khỏi màn hình */
	}
}

/* Với màn hình Mobile: Chuyển về 1 cột (100% width) để không bị đè chữ */
@media (max-width : 768px) {

	.footer-col-social,
	.footer-col-intro,
	.footer-col-service,
	.footer-col-contact {
		width: 100%;
		/* Chiếm trọn màn hình */
	}

	/* Fix lỗi các icon BCT / DMCA quá to chèn ép layout */
	.footer-col-social .d-flex {
		flex-wrap: wrap;
		gap: 10px;
	}

	.newsletter-box {
		margin-top: 15px;
	}
}


.fa-facebook-f {
	color: #4267b2;
}


.fa-google {
	color: #ea4335;
}


.fa-instagram {
	/*color: #E4405F */
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

	/* 2. Kỹ thuật cắt nền theo hình dạng của chữ/icon (Giữ nguyên) */
	-webkit-background-clip: text;
	background-clip: text;

	/* 3. Làm cho màu gốc của icon trong suốt (Giữ nguyên) */
	-webkit-text-fill-color: transparent;
	color: transparent !important;

	/* Đảm bảo hiển thị đúng */
	display: inline-block;
}

.fa-youtube {
	color: #ff0000;
}

a.zalo-icon {
	color: #0068ff;
	text-decoration: none;
}


/* --------------------------------- BANNER SLIDER STYLE --------------------------------- */
.ivy-banner-wrapper {
	/* Tạo độ bo góc chéo đặc trưng */
	border-top-left-radius: 80px;
	/* Bo góc trên trái */
	border-bottom-right-radius: 80px;
	/* Bo góc dưới phải */
	/* QUAN TRỌNG: Cắt phần ảnh thừa bị lòi ra ngoài góc bo */
	overflow: hidden;
	/* Thêm chút bóng đổ cho nổi bật (Optional) */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	/* Đảm bảo khung hình không bị méo */
	position: relative;
	width: 100%;
}

/* Chỉnh mũi tên chuyển slide cho đẹp hơn */
.carousel-control-prev,
.carousel-control-next {
	width: 5%;
	/* Thu nhỏ vùng bấm lại */
}

.carousel-indicators li {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	/* Chấm tròn thay vì gạch ngang */
	margin: 0 5px;
}

/* --------------------------------- PRODUCT CARD STYLE --------------------------------- */
.product-item {
	margin-bottom: 30px;
	position: relative;
	transition: all 0.3s ease;
}

/* Khung chứa ảnh */
.product-image {
	position: relative;
	overflow: hidden;
	/* Cắt phần thừa */
	aspect-ratio: 2/3;
	/* Tỷ lệ khung hình chuẩn thời trang (dọc) */
}

.product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Đảm bảo ảnh phủ kín khung */
	transition: transform 0.5s ease;
}

/* Ảnh Hover (Ảnh thứ 2) */
.img-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	/* Mặc định ẩn đi */
	z-index: 2;
	/* Nằm đè lên ảnh chính */
}

/* Khi rê chuột vào khung ảnh -> Hiện ảnh Hover */
.product-item:hover .img-hover {
	opacity: 1;
}

/* Hiệu ứng zoom nhẹ khi hover (Optional - cho sang) */
.product-item:hover .product-image img {
	transform: scale(1.05);
}

/* Thông tin sản phẩm */
.product-info {
	padding-top: 15px;
	text-align: left;
	/* IvyModa thường căn giữa hoặc trái */
}

.product-title a {
	color: #333;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	margin-bottom: 5px;
}

.product-title a:hover {
	color: #000;
}

.product-price {
	color: #333;
	font-weight: 700;
	font-size: 15px;
}

/* --- CUSTOM SORT DROPDOWN --- */
.custom-sort-dropdown .dropdown-toggle::after {
	display: none !important;
}

.custom-sort-dropdown.show .fa-chevron-down {
	transform: rotate(180deg) !important;
	transition: transform 0.2s;
}

.custom-sort-dropdown .fa-chevron-down {
	transition: transform 0.2s;
}

.custom-sort-dropdown .dropdown-item {
	color: #333;
	font-size: 15px;
	font-weight: 300;
}

.custom-sort-dropdown .dropdown-item:hover,
.custom-sort-dropdown .dropdown-item:active {
	background-color: #f8f9fa;
	color: #000;
}

.sort-btn-wrapper {
	flex: 1;
}

.sort-btn-wrapper button {
	width: 100%;
}

@media (min-width: 992px) {
	.sort-btn-wrapper {
		flex: 0 0 260px;
		max-width: 260px;
	}
}

/* --------------------------------- SECTION HEADER (NEW ARRIVAL) --------------------------------- */
.ivy-section-header {
	text-align: center;
	margin-bottom: 25px;
	/* Cách xa sản phẩm một chút */
	/* border-bottom: 1px solid #eee; -> Bỏ dòng kẻ này đi vì IvyModa kẻ ở tab active */
}

/* 1. Dòng chữ NEW ARRIVAL to đùng */
.ivy-section-title {
	font-size: 32px;
	/* Chữ to */
	font-weight: 700;
	/* In đậm */
	text-transform: uppercase;
	letter-spacing: 3px;
	/* Giãn cách chữ cho sang */
	color: #000;
	margin-bottom: 15px;
	/* Cách 2 cái tab bên dưới */
}

/* 2. Hai cái tab IVY moda | Metagent */
.ivy-tab-item {
	display: inline-block;
	font-size: 18px;
	/* Chữ tab nhỏ hơn tiêu đề */
	font-weight: 400;
	/* Mảnh hơn */
	color: #6c757d;
	/* Màu xám (Metagent) */
	padding: 0 15px 5px;
	/* Đưa gạch chân sát lên chữ */
	cursor: pointer;
	position: relative;
	text-decoration: none !important;
	margin: 0 10px;
}

/* Tab đang chọn (IVY moda) */
.ivy-tab-item.active {
	color: #000;
	/* Màu đen đậm */
	font-weight: 500;
	border-bottom: 2px solid #000;
	/* Gạch chân màu đen */
}

/* Hiệu ứng hover cho tab chưa chọn */
.ivy-tab-item:hover {
	color: #000;
}

.ivy-tab-item:hover {
	color: #000;
}

/* --- GRID 5 CỘT (Custom) --- */
.row-ivy-5 {
	display: flex;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-left: -10px;
}

.col-ivy-5 {
	position: relative;
	width: 20%;
	/* 100% chia 5 = 20% */
	padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 30px;
}

@media (max-width : 1199px) {
	.col-ivy-5 {
		width: 33.33%;
	}

	body {
		padding-bottom: 60px;
		/* Space for mobile bottom nav */
	}

	/* Mobile Filter Popup Overlay */
	#mobileFilter.show {
		position: absolute;
		top: 110px;
		/* Positioned below title and sort bar */
		left: 15px;
		right: 15px;
		width: auto;
		z-index: 1040;
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	}
}

@media (max-width : 576px) {
	.col-ivy-5 {
		width: 50%;
	}
}

/* --- PRODUCT CARD STYLE (IVY STYLE) --- */
.product-item {
	position: relative;
	transition: all 0.3s;
}

/* 1. Nhãn NEW (Màu cam) */
/*.badge-new {
	position: absolute;
	top: 0;
	left: 0;
	background: #f7941d; /* Màu cam Ivy */
/*color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	z-index: 5;
	text-transform: uppercase;
}

/* 2. Phần dưới ảnh */
.product-info {
	padding-top: 15px;
}

/* Dòng Màu sắc & Tim */
.info-row-1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.list-colors {
	display: flex;
	gap: 5px;
}

.color-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid #ddd;
	position: relative;
}

.color-dot.active::after {
	/* Dấu tick hoặc viền đen cho màu đang chọn */
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	border: 1px solid #000;
	border-radius: 50%;
}

.btn-wishlist {
	color: #999;
	font-size: 14px;
	cursor: pointer;
}

.btn-wishlist:hover {
	color: #f00;
}

/* Tên sản phẩm */
.product-title a {
	color: #575757;
	font-size: 14px;
	font-weight: 400;
	display: block;
	margin-bottom: 5px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/* Dòng Giá & Giỏ hàng */
.info-row-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-price {
	font-weight: 600;
	color: #333;
	font-size: 15px;
}

.btn-bag-black {
	background: #222;
	color: #fff;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px 0 10px 0;
	transition: background 0.2s;
	font-size: 14px;
}

.btn-bag-black:hover {
	background: #000;
	color: #fff;
}

/* --- 2. STYLE NÚT "XEM TẤT CẢ" (HÌNH CHIẾC LÁ) --- */
.btn-ivy-see-all {
	background: #fff;
	color: #333;
	border: 1px solid #333;
	/* Viền đen */
	padding: 12px 40px;
	/* Nút dài */
	font-size: 14px;
	font-weight: 400;
	/* TẠO HÌNH CHIẾC LÁ: Bo góc trên-trái và dưới-phải */
	border-radius: 20px 0 20px 0;
	transition: all 0.3s;
	display: inline-block;
	text-decoration: none;
}

.btn-ivy-see-all:hover {
	background: #000;
	border-color: #000;
	color: #fff;
	text-decoration: none;
}

/* --- PRODUCT CARD STYLE (CHUẨN IVYMODA) --- */
.product-item {
	position: relative;
	background: #fff;
	transition: all 0.3s ease;
	margin-bottom: 30px;
}

/* 1. Nhãn NEW (Màu cam đặc trưng) */
.badge-new {
	position: absolute;
	top: 0;
	left: 0;
	background: #f7941d;
	/* Màu cam Ivy */
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	z-index: 5;
	text-transform: uppercase;
}

/* 1b. Nhãn Best Seller (Màu đỏ gấp khúc) */
.badge-best-seller {
	position: absolute;
	top: 10px;
	left: -5px;
	background: #b8232a;
	/* Màu đỏ đô */
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	padding: 4px 12px;
	z-index: 5;
	border-radius: 0 15px 15px 0;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.badge-best-seller::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 0;
	height: 0;
	border-top: 5px solid #7a151b;
	/* Màu tối tạo độ sâu góc gấp */
	border-left: 5px solid transparent;
}

/* Nhãn giảm giá -5% (Hình tròn vàng) */
.badge-discount {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #f7941d;
	/* Màu vàng cam */
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}

/* 2. Ảnh sản phẩm */
.product-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2/3;
	/* Tỷ lệ ảnh dọc */
}

.product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* Hiệu ứng Hover ảnh */
.img-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 2;
}

.product-item:hover .img-hover {
	opacity: 1;
}

.product-item:hover .product-image img {
	transform: scale(1.05);
}

/* 3. Phần thông tin bên dưới */
.product-info {
	padding: 15px 0 0 0;
	/* Cách ảnh ra một chút */
}

/* Dòng 1: List Màu + Tim */
.info-row-1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.list-colors {
	display: flex;
	gap: 6px;
	/* Khoảng cách giữa các chấm màu */
}

/* Chấm tròn màu sắc */
.color-dot {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #e1e1e1;
	position: relative;
	cursor: pointer;
}

/* Hiệu ứng: Màu đầu tiên có vòng tròn bao ngoài (Active) */
.color-dot.active::after {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	border: 1px solid #000;
	/* Vòng tròn đen bao ngoài */
	border-radius: 50%;
}

/* Nút Tim (Yêu thích) */
.btn-wishlist {
	color: #333;
	font-size: 16px;
	cursor: pointer;
	background: none;
	border: none;
}

.btn-wishlist:hover {
	color: #f00;
}

/* Dòng 2: Tên sản phẩm */
.product-title {
	margin-bottom: 8px;
}

.product-title a {
	color: #333;
	font-size: 14px;
	font-weight: 400;
	/* Chữ thường, không đậm */
	text-decoration: none;
	display: block;
	white-space: nowrap;
	/* Không xuống dòng */
	overflow: hidden;
	/* Cắt chữ thừa */
	text-overflow: ellipsis;
	/* Thêm dấu ... */
}

.product-title a:hover {
	color: #000;
}

/* Dòng 3: Giá + Nút Túi xách đen */
.info-row-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-price {
	font-size: 16px;
	font-weight: 700;
	/* Giá in đậm */
	color: #000;
}

/* Nút giỏ hàng đen bo góc */
.btn-bag-black {
	background: #222;
	color: #fff;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	/* Bo góc nhẹ */
	transition: background 0.2s;
	text-decoration: none !important;
}

.btn-bag-black:hover {
	background: #000;
	color: #fff;
}

/* --------------------------------- TRANG CHI TIẾT SẢN PHẨM --------------------------------- */
/* ======================================================= */
/* ===       TRANG CHI TIẾT SẢN PHẨM (CUSTOM SIZE)     === */
/* ======================================================= */

/* 1. LAYOUT CHÍNH: Chia 2 cột (Ảnh - Thông tin) */
.product-detail-row {
	display: flex;
	width: 100%;
	align-items: flex-start;
	/* Căn hàng từ trên xuống */
}

/* ------------------------------------------------------- */
/* CỘT TRÁI: KHỐI ẢNH (GALLERY) */
/* ------------------------------------------------------- */
.gallery-wrapper {
	display: flex;
	/* Chiều cao khớp ảnh lớn bạn đo */
	height: 845px;
	gap: 20px;
	/* Khoảng cách giữa Ảnh to và Thumb nhỏ */
	flex-shrink: 0;
	/* Không cho phép co lại */
	align-items: center;
}

/* Ảnh Lớn (Main Image) - ÉP CỨNG 563px x 845px */
.gallery-main {
	width: 563px;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.main-img-display {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ảnh phủ kín, không méo */
	display: block;
}

/* Nút chuyển ảnh trên Main Image */
.main-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	z-index: 10;
	cursor: pointer;
	padding: 10px;
	outline: none;
}

.main-arrow.prev {
	left: 5px;
}

.main-arrow.next {
	right: 5px;
}

.main-arrow svg {
	transition: stroke 0.3s ease;
}

.main-arrow:hover svg {
	stroke: #000;
}

/* Cột Thumbnail (Ảnh nhỏ bên cạnh ảnh lớn) */
.gallery-thumbs-container {
	width: 100px;
	/* Kích thước thumb ~100px */
	height: auto;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 40px 0;
}

/* Khung cuộn ảnh nhỏ */
.gallery-thumbs-scroll {
	overflow-y: hidden;
	/* Ẩn thanh cuộn để dùng mũi tên */
	height: 645px;
	/* CHỐT: Chiều cao vừa đủ cho 4 ảnh (4*150 + 3*15) */
	display: flex;
	flex-direction: column;
	scroll-behavior: smooth;
	/* Hiệu ứng cuộn mượt */

}

.gallery-thumbs-scroll::-webkit-scrollbar {
	display: none;
}

/* Ảnh nhỏ */
.thumb-img {
	width: 100px;
	height: 150px;
	/* Cố định chiều cao ảnh nhỏ */
	object-fit: cover;
	margin-bottom: 15px;
	cursor: pointer;
	border: 1px solid transparent;
	opacity: 0.7;
	transition: all 0.3s;
	flex-shrink: 0;
	/* Không cho ảnh bị bóp méo khi cuộn */
}

.thumb-img:last-child {
	margin-bottom: 0;
}

.thumb-img.active,
.thumb-img:hover {
	opacity: 1;
	border-color: #000;
}

/* Mũi tên điều hướng thumb */
.thumb-arrow {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 30px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	color: #333;
	transition: 0.3s;
}

.thumb-arrow:hover {
	background: #000;
	color: #fff;
}

.thumb-arrow.up {
	top: 0;
}

.thumb-arrow.down {
	bottom: 0;
}

/* ------------------------------------------------------- */
/* CỘT PHẢI: THÔNG TIN (INFO) - CÁCH 105PX */
/* ------------------------------------------------------- */
.product-info-col {
	flex-grow: 1;
	/* Chiếm hết phần còn lại của màn hình */
	/* QUAN TRỌNG: Padding trái 120px như bạn đo */
	padding-left: 120px !important;
	/* Canh chỉnh nội dung */
	padding-top: 10px;
}

/* --- RESPONSIVE (Mobile & Tablet) --- */
/* Khi màn hình nhỏ hơn 1400px (Laptop nhỏ) -> Giảm padding kẻo vỡ layout */
@media (max-width : 1400px) {
	.product-info-col {
		padding-left: 50px !important;
		/* Giảm xuống còn 50px */
	}

	.gallery-main {
		width: 450px;
		/* Thu nhỏ ảnh lại chút */
		height: 675px;
	}

	.gallery-wrapper {
		height: 675px;
	}
}

/* Tablet dọc (768px - 991px): Vẫn dùng layout chia 2 cột như Desktop/iPad Pro, nhưng thu nhỏ ảnh để nhường chỗ cho chữ */
@media (min-width: 768px) and (max-width: 991px) {
	.product-info-col {
		padding-left: 30px !important;
	}
	.gallery-main {
		width: 320px;
		height: 480px;
	}
	.gallery-wrapper {
		height: 480px;
	}
	.gallery-thumbs-scroll {
		height: 480px;
	}
	.gallery-thumbs-container {
		width: 80px;
		padding: 20px 0;
	}
	.thumb-img {
		width: 80px;
		height: 120px;
	}
}

/* Khi màn hình nhỏ hơn 768px (Mobile) -> Xếp dọc toàn bộ */
@media (max-width : 767px) {
	.product-detail-row {
		flex-direction: column;
	}

	.gallery-wrapper {
		width: 100%;
		height: auto;
		flex-direction: column;
		margin-bottom: 30px;
	}

	.gallery-main {
		width: 100%;
		height: auto;
		aspect-ratio: 2/3;
		/* Match desktop exact proportions */
	}

	.gallery-thumbs-container {
		width: 100%;
		height: auto;
		flex-direction: row;
		padding: 0 0 10px 0;
	}

	.gallery-thumbs-scroll {
		flex-direction: row;
		flex-wrap: nowrap;
		/* Tắt rớt dòng để có thể vuốt ngang */
		width: 100%;
		height: auto;
		overflow-x: auto;
		/* Bật thanh cuộn ngang */
		overflow-y: hidden;
		gap: 10px;
		justify-content: flex-start;
		scroll-snap-type: x mandatory;
		/* Snap từng ảnh khi vuốt */
		-webkit-overflow-scrolling: touch;
		/* Mượt mà trên iOS */
	}

	.product-info-col {
		padding-left: 0 !important;
		/* Mobile thì bỏ padding trái */
		padding-right: 0;
	}

	/* Ép các nút bấm nằm ngang trên 1 dòng trên mobile */
	.action-buttons {
		flex-wrap: nowrap !important;
		gap: 8px !important;
	}

	.btn-add-cart-black,
	.btn-buy-now-white {
		padding: 0 15px !important;
		/* Padding nhỏ lại gọn gàng */
		font-size: 12px !important;
		/* Cỡ chữ nhỏ lại chút */
		height: 40px !important;
		/* Nút thấp lại */
		white-space: nowrap;
		/* Không cho chữ rớt dòng */
	}

	.btn-wishlist-box {
		flex-shrink: 0;
		width: 40px !important;
		height: 40px !important;
	}

	.thumb-img {
		/* Tính toán width chính xác cho 4 ảnh hiển thị: 100% trừ đi 3 khoảng cách 10px = 30px, chia đều 4 */
		width: calc((100% - 30px) / 4);
		height: auto;
		aspect-ratio: 2/3;
		/* Force 2:3 aspect ratio */
		flex-shrink: 0;
		/* Ngăn chặn bị bóp méo khi flex row */
		margin-right: 0;
		/* Dùng gap thay cho margin */
		margin-bottom: 0;
		scroll-snap-align: start;
		/* Điểm dừng khi vuốt */
	}

	.thumb-arrow {
		display: none;
	}
}

/* ----------------------------------------  2. Product Info (Thông tin) -------------------- */
.product-price-large {
	font-size: 24px;
	font-weight: 700;
	color: #333;
	margin-bottom: 20px;
}

/* Label: Màu sắc: Trắng ngà */
.color-label {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
}

/* Nút Size */
.size-box {
	display: inline-block;
	min-width: 40px;
	height: 40px;
	line-height: 38px;
	text-align: center;
	border: 1px solid #ddd;
	margin-right: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #999;
}

.size-box.active {
	border-color: #000;
	color: #000;
	font-weight: 700;
}

.size-box.disabled {
	background: #eee;
	text-decoration: line-through;
	opacity: 0.5;
	cursor: not-allowed;
}

/* Input Số lượng */
.qty-control {
	display: inline-flex;
	align-items: center;
	border: 1px solid #e1e1e1;
	border-radius: 20px 0 20px 0;
	/* Bo góc hình chiếc lá */
	overflow: hidden;
	height: 45px;
}

.detail-tabs {
	border-bottom: 1px solid #eee;
}

.detail-tabs .nav-item {
	margin-bottom: -1px;
}

.detail-tabs .nav-link {
	border: none;
	border-bottom: 2px solid transparent;
	color: #777;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 14px;
	padding: 15px 15px;
}

.detail-tabs .nav-link:hover {
	border-color: transparent;
	color: #333;
}

.detail-tabs .nav-link.active {
	border: none;
	border-bottom: 2px solid #000;
	color: #333;
	background: transparent;
}

.qty-btn {
	width: 40px;
	height: 100%;
	background: #fff;
	border: none;
	font-size: 18px;
	cursor: pointer;
	transition: 0.3s;
}

.qty-btn:hover {
	background: #f5f5f5;
}

.qty-input {
	width: 50px;
	height: 100%;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	border-top: none;
	border-bottom: none;
	text-align: center;
	font-weight: 600;
	outline: none;
}

/* Group Button Mua hàng */
.action-buttons {
	display: flex;
	gap: 15px;
	align-items: center;
}

.btn-add-cart-black {
	background: #222;
	color: #fff;
	border: 1px solid #222;
	padding: 0 20px;
	height: 50px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	border-radius: 20px 0 20px 0 !important;
	/* Ép bo góc chiếc lá */
	cursor: pointer;
	transition: 0.3s;
}

.btn-add-cart-black:hover {
	background: #fff;
	color: #000;
}

.btn-buy-now-white {
	background: #fff;
	color: #222;
	border: 1px solid #222;
	padding: 0 20px;
	height: 50px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	border-radius: 20px 0 20px 0 !important;
	cursor: pointer;
	transition: 0.3s;
}

.btn-buy-now-white:hover {
	background: #000;
	color: #fff;
}

.btn-wishlist-box {
	width: 50px;
	height: 50px;
	border: 1px solid #222;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px 0 15px 0 !important;
	/* Bo góc nhẹ hơn nút to */
	cursor: pointer;
	font-size: 20px;
}

/* Tab Chi tiết sản phẩm */
.single-tab-header {
	border-bottom: 1px solid #ddd;
	margin-bottom: 20px;
}

.tab-title {
	display: inline-block;
	border-bottom: 2px solid #000;
	padding-bottom: 10px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: -1px;
	/* Đè lên đường kẻ mờ */
}

/* ------------------------------------ TRANG GIỎ HÀNG (CART PAGE) ------------------------------------ */

/* 1. Thanh tiến trình (Progress Bar) */
.checkout-progress {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
	position: relative;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Đường kẻ ngang mờ */
.checkout-progress::before {
	content: '';
	position: absolute;
	top: 15px;
	left: 0;
	width: 100%;
	height: 4px;
	background: #f0f0f0;
	z-index: 1;
}

.progress-step {
	position: relative;
	z-index: 2;
	text-align: center;
	background: #fff;
	/* Để che đường kẻ */
	padding: 0 10px;
}

.step-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid #f0f0f0;
	display: inline-block;
	margin-bottom: 10px;
}

.step-text {
	font-size: 13px;
	color: #999;
	display: block;
}

/* Step đang Active (Màu đen) */
.progress-step.active .step-dot {
	border-color: #000;
	background: #000;
}

.progress-step.active .step-text {
	color: #000;
	font-weight: 700;
}

/* 2. Bảng giỏ hàng (Cột trái) */
.cart-header-row {
	display: flex;
	border-bottom: 1px solid #ddd;
	padding-bottom: 15px;
	margin-bottom: 20px;
	font-size: 12px;
	font-weight: 700;
	color: #666;
	text-transform: uppercase;
}

.cart-item-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.cart-img {
	width: 100px;
	margin-right: 20px;
}

.cart-img img {
	width: 100%;
	height: auto;
}

.cart-info {
	flex-grow: 1;
}

.cart-name {
	font-size: 16px;
	color: #333;
	margin-bottom: 5px;
	text-decoration: none;
}

.cart-meta {
	font-size: 13px;
	color: #999;
}

/* Bộ điều chỉnh số lượng (+ -) */
.cart-qty-box {
	display: flex;
	border: 1px solid #ddd;
	border-radius: 4px;
	width: 100px;
}

.qty-btn-cart {
	width: 30px;
	height: 35px;
	background: #fff;
	border: none;
	cursor: pointer;
	font-size: 16px;
}

.qty-input-cart {
	width: 40px;
	height: 35px;
	border: none;
	text-align: center;
	outline: none;
	font-size: 14px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.cart-price-total {
	font-size: 16px;
	font-weight: 700;
	color: #000;
}

.cart-remove-btn {
	color: #999;
	font-size: 18px;
	cursor: pointer;
	transition: color 0.2s;
}

.cart-remove-btn:hover {
	color: #f00;
}

/* 3. Tổng tiền (Cột phải) */
.cart-summary {
	background: #fff;
	/* Có thể thêm border hoặc shadow nếu muốn */
}

.summary-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
	font-size: 14px;
	color: #666;
}

.summary-row.total {
	border-top: 1px solid #eee;
	padding-top: 15px;
	font-weight: 700;
	color: #000;
	font-size: 16px;
}

.warning-text {
	font-size: 13px;
	color: #cc0000;
	/* Màu đỏ cảnh báo */
	margin-top: 15px;
	line-height: 1.5;
	background: #fff5f5;
	padding: 10px;
	border-radius: 4px;
}

.btn-checkout {
	display: block;
	width: 100%;
	background: #222;
	color: #fff;
	text-align: center;
	padding: 15px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px 0 4px 0;
	margin-top: 20px;
	transition: background 0.3s;
}

.btn-checkout:hover {
	background: #000;
	color: #fff;
}

.btn-continue {
	display: inline-block;
	padding: 10px 25px;
	border: 1px solid #333;
	color: #333;
	text-decoration: none;
	font-weight: 600;
	border-radius: 4px 0 4px 0;
	margin-top: 20px;
	transition: all 0.3s;
}

.btn-continue:hover {
	background: #000;
	color: #fff;
}

/* ------------------------------------  CHECKOUT PAGE ------------------------------------------------ */
.checkout-container {
	padding-bottom: 80px;
}

/* 1. Các ô nhập liệu (Input) */
.form-control-ivy {
	border: 1px solid #ddd;
	border-radius: 4px 0 4px 0;
	/* Bo góc chéo đặc trưng */
	padding: 10px 15px;
	height: 45px;
	font-size: 14px;
	width: 100%;
	margin-bottom: 20px;
	outline: none;
	transition: border 0.3s;
}

.form-control-ivy:focus {
	border-color: #000;
}

/* Nút Đăng nhập/Đăng ký nhanh */
.auth-buttons-checkout {
	display: flex;
	gap: 15px;
	margin-bottom: 25px;
}

.btn-auth-checkout {
	flex: 1;
	padding: 10px;
	border: 1px solid #333;
	background: #fff;
	color: #333;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px 0 4px 0;
	transition: all 0.3s;
}

.btn-auth-checkout.active {
	background: #222;
	color: #fff;
}

.btn-auth-checkout:hover {
	background: #000;
	color: #fff;
}

/* 2. Phương thức vận chuyển (Box) */
.shipping-method-box {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 20px;
	margin-top: 10px;
	display: flex;
	align-items: center;
}

.shipping-method-box input[type="radio"] {
	margin-right: 10px;
	transform: scale(1.2);
	accent-color: #000;
}

.shipping-method-box label {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
}

/* 3. Tóm tắt đơn hàng (Box bên phải) */
.order-summary-box {
	background: #fff;
	padding: 20px 0;
}

.summary-line {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
	font-size: 14px;
	color: #666;
}

.summary-line.total {
	border-top: 1px solid #eee;
	padding-top: 15px;
	font-weight: 700;
	color: #000;
	font-size: 16px;
}

.btn-place-order {
	display: block;
	width: 100%;
	background: #222;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	padding: 15px;
	text-align: center;
	border: none;
	border-radius: 4px 0 4px 0;
	cursor: pointer;
	margin-top: 20px;
	transition: background 0.3s;
}

.btn-place-order:hover {
	background: #000;
}

/* Input mã giảm giá */
.coupon-input-group {
	display: flex;
	gap: 10px;
	margin: 20px 0;
}

.btn-apply-coupon {
	border: 1px solid #333;
	background: #fff;
	padding: 0 20px;
	font-weight: 700;
	border-radius: 4px 0 4px 0;
	cursor: pointer;
}

.btn-apply-coupon:hover {
	background: #000;
	color: #fff;
}







/* Style cho khung Phương thức thanh toán */
.payment-box {
	border: 1px solid #e1e1e1;
	border-radius: 10px;
	/* Bo góc tròn 10px */
	padding: 25px;
	background: #fff;
}

/* Tinh chỉnh Radio button cho to rõ hơn */
.payment-box .custom-control-label {
	cursor: pointer;
	font-size: 15px;
	padding-left: 5px;
	/* Cách xa nút tròn một chút */
}

.payment-box .custom-control-input:checked~.custom-control-label::before {
	background-color: #000;
	/* Màu đen khi chọn */
	border-color: #000;
}












/* ------------------------------------ MINI CART & ICON ------------------------------------ */

/* 1. Icon Header */
.header-cart-icon {
	position: relative;
	display: inline-block;
	padding: 10px;
	margin-left: 10px;
}

.cart-badge {
	position: absolute;
	top: 0;
	right: 0;
	background: #222;
	/* Màu đen hoặc đỏ tùy bạn */
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
	line-height: 20px;
}

/* 2. Overlay (Lớp nền tối) */
.cart-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1040;
	display: none;
	/* Mặc định ẩn */
	opacity: 0;
	transition: opacity 0.3s;
}

.cart-overlay.open {
	display: block;
	opacity: 1;
}

/* 3. Sidebar (Ngăn kéo) */
.mini-cart-sidebar {
	position: fixed;
	top: 0;
	right: -400px;
	/* Giấu sang bên phải */
	width: 400px;
	height: 100%;
	background: #fff;
	z-index: 1050;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.mini-cart-sidebar.open {
	right: 0;
	/* Trượt ra */
}

/* Nội dung bên trong */
.mini-cart-header {
	padding: 20px;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
	/* Không bao giờ được co nhỏ lại */
}

.close-btn {
	background: none;
	border: none;
	font-size: 30px;
	cursor: pointer;
}

.mini-cart-body {
	padding: 20px;
	/* --- SỬA/THÊM CÁC DÒNG NÀY --- */
	flex-grow: 1;
	/* Chiếm TẤT CẢ khoảng trống còn lại ở giữa */
	overflow-y: auto;
	/* Nếu dài quá thì hiện thanh cuộn dọc */
	overflow-x: hidden;
	/* Ẩn thanh cuộn ngang */
	height: auto;
	/* Bỏ height cố định nếu có */
	/* Tùy chỉnh thanh cuộn cho đẹp (giống Ivy) */
	scrollbar-width: thin;
	scrollbar-color: #ccc #fff;
}

.mini-cart-item {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
}

.mini-cart-img {
	width: 70px;
	height: 100px;
	object-fit: cover;
}

.mini-cart-footer {
	padding: 20px;
	border-top: 1px solid #eee;
	background: #f9f9f9;
	flex-shrink: 0;
	/* Không bao giờ được co nhỏ lại */
	z-index: 10;
}

/* ------------------------------------ OWL CAROUSEL CUSTOM ------------------------------------ */
/*.owl-nav button.owl-prev, .owl-nav button.owl-next {
	position: absolute;
	top: 40%; /* Căn giữa theo chiều dọc của ảnh */
/*	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: #fff !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	color: #333 !important;
	font-size: 18px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
}

.owl-nav button.owl-prev:hover, .owl-nav button.owl-next:hover {
	background: #000 !important;
	color: #fff !important;
}

.owl-nav button.owl-prev {
	left: -20px; /* Thò ra bên trái */
/*}

.owl-nav button.owl-next {
	right: -20px; /* Thò ra bên phải */
/*}

/* Ẩn mũi tên nếu không hover (Optional - IvyModa luôn hiện hoặc hover mới hiện) */
/* .product-slider:hover .owl-nav button { opacity: 1; } */


/* --- OWL CAROUSEL NAV (MŨI TÊN) --- */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
	position: absolute;
	top: 40%;
	/* Căn giữa theo chiều dọc của khung ảnh */
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: #fff !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	/* Đổ bóng nhẹ */
	color: #333 !important;
	font-size: 18px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	outline: none;
}

.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
	background: #000 !important;
	color: #fff !important;
}

/* Mũi tên Trái: Đẩy sang trái -20px để nằm chườm ra ngoài */
.owl-nav button.owl-prev {
	left: -10px;
}

/* Mũi tên Phải: Đẩy sang phải -20px */
.owl-nav button.owl-next {
	right: -10px;
}





/* ------------------------------------ FILTER SIDEBAR ------------------------------------ */
.filter-group {
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
}

.filter-group:last-child {
	border-bottom: none;
}

.custom-control-label {
	font-size: 14px;
	color: #333;
	cursor: pointer;
}

.custom-control-input:checked~.custom-control-label::before {
	color: #fff;
	border-color: #000;
	background-color: #000;
	/* Checkbox màu đen giống Ivy */
}

/* Pagination Style */
.page-item.active .page-link {
	background-color: #000;
	border-color: #000;
	color: #fff !important;
}

/* ------------------------------------ 1. QUICK SIZE POPUP (Danh sách size) ------------------------------------ */
.quick-size-popup {
	display: none;
	/* Mặc định ẩn */
	position: absolute;
	bottom: 45px;
	/* Hiện ngay phía trên nút giỏ hàng */
	right: 0;
	background: #fff;
	width: 60px;
	/* Chiều rộng nhỏ gọn */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	border: 1px solid #eee;
	z-index: 100;
	border-radius: 4px;
	animation: fadeInUp 0.2s ease;
}

.quick-size-popup ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.quick-size-popup li {
	padding: 8px 0;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 1px solid #f5f5f5;
	transition: all 0.2s;
}

.quick-size-popup li:last-child {
	border-bottom: none;
}

.quick-size-popup li:hover {
	background: #000;
	color: #fff;
}

/* ------------------------------------- 2. SUCCESS MODAL (Thông báo thành công) ------------------------------------ */
.ivy-modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* Nền tối mờ */
	align-items: center;
	justify-content: center;
}

.ivy-modal-content {
	background-color: #fff;
	padding: 40px;
	text-align: center;
	width: 450px;
	position: relative;
	border-radius: 0;
	/* IvyModa vuông vức */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	animation: zoomIn 0.3s ease;
}

.close-modal {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 28px;
	cursor: pointer;
	color: #999;
}

/* Icon túi xách trong modal (Nếu dùng CSS vẽ) */
.modal-icon {
	position: relative;
	display: inline-block;
	margin-bottom: 10px;
}

/* ======================================================= */
/* ===           LOGIN / REGISTER PAGE STYLE           === */
/* ======================================================= */
.login-wrapper-90 {
	/* Cách lề trái phải của container đúng 90px */
	margin-left: 90px;
	margin-right: 90px;
}

/* Hàng chứa (Thêm đường kẻ dọc ở giữa cho màn hình lớn) */
.login-row {
	display: flex;
}

.login-col-left {
	border-right: 1px solid #e1e1e1;
	/* Đường kẻ dọc chia đôi */
	padding-right: 40px;
	padding-left: 15px;
	/* Khoảng đệm 15px */
	padding-right: 105px;
}

.login-col-right {
	padding-left: 40px;
	padding-right: 15px;
	padding-left: 105px;
}

/* Responsive: Mobile bỏ đường kẻ và padding */
@media (max-width : 1199px) {
	.login-wrapper-90 {
		margin-left: 0;
		margin-right: 0;
	}

	.login-col-left {
		border-right: none;
		padding-right: 15px;
		border-bottom: 1px solid #e1e1e1;
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.login-col-right {
		padding-left: 15px;
	}
}

/* Tiêu đề mục */
.auth-title {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 20px;
	text-align: center;
	/* Căn giữa giống ảnh */
}

/* Mô tả ngắn */
.auth-desc {
	font-size: 14px;
	color: #666;
	margin-bottom: 30px;
	line-height: 1.6;
	text-align: center;
}

/* Input Form (Bo góc nhẹ) */
.form-control-auth {
	width: 100%;
	height: 45px;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	padding: 10px 15px;
	font-size: 14px;
	outline: none;
	transition: border 0.3s;
}

.form-control-auth:focus {
	border-color: #000;
}

/* Các link phụ (QR, OTP) */
.auth-links-secondary a {
	font-size: 14px;
	color: #333;
	text-decoration: underline;
	/* Gạch chân */
}

.auth-links-secondary a:hover {
	color: #000;
}

/* Nút Đen To (Đăng nhập / Đăng ký) */
.btn-auth-action {
	display: block;
	width: 100%;
	background: #222;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	padding: 12px 0;
	text-align: center;
	border: 1px solid #222;
	border-radius: 15px 0 15px 0;
	/* Bo góc chéo đặc trưng */
	cursor: pointer;
	transition: all 0.3s;
	text-decoration: none;
	/* Dùng cho thẻ a */
	font-size: 16px;
}

.btn-auth-action:hover {
	background: #fff;
	color: #000;
}

a.btn-auth-action {
	text-decoration: none;
}

/* --- USER DROPDOWN (HEADER) --- */
.user-dropdown-container {
	position: relative;
	display: inline-block;
	cursor: pointer;
	padding: 10px 0;
	/* Tạo vùng hover rộng hơn */
}

/* Ẩn menu mặc định */
.user-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: -10px;
	/* Căn lề phải */
	width: 220px;
	background: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	padding: 15px;
	z-index: 9999;
	border: 1px solid #eee;
}

/* Mũi tên nhọn chỉ lên trên (Optional) */
.user-dropdown-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	right: 15px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #fff;
}

/* Hiện menu khi Hover vào container */
/*.user-dropdown-container:hover .user-dropdown-menu {
	    display: block;
	} */
.user-dropdown-menu.show {
	display: block !important;
}

/* Style nội dung bên trong */
.user-info {
	font-size: 14px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 10px;
	color: #333;
}

.user-menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.user-menu-list li {
	margin-bottom: 8px;
}

.user-menu-list a,
.btn-logout-link {
	font-size: 13px;
	color: #555;
	text-decoration: none;
	transition: color 0.2s;
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.user-menu-list a:hover,
.btn-logout-link:hover {
	color: #000;
}

/* ======================================================= */
/* ===           REGISTER PAGE STYLE                   === */
/* ======================================================= */

/* Nhãn (Label) phía trên ô input */
.auth-label {
	font-size: 14px;
	color: #666;
	/* Màu chữ xám giống ảnh */
	margin-bottom: 5px;
	font-weight: 400;
}

/* Ô nhập liệu (Input) chuẩn Ivy */
.form-control-ivy {
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	height: 40px;
	font-size: 14px;
	padding: 5px 15px;
	width: 100%;
	outline: none;
	transition: border 0.3s;
}

.form-control-ivy:focus {
	border-color: #333;
}

/* Nút Đăng ký màu đen (Dùng chung với trang Login) */
/*.btn-auth-action {
	background: #222;
	color: #fff;
	width: 100%;
	padding: 12px;
	text-transform: uppercase;
	font-weight: 700;
	border: none;
	border-radius: 4px 0 4px 0; /* Bo góc chéo */
/*	cursor: pointer;
	transition: all 0.3s;
} */



/* Custom checkbox chỉnh lại một chút cho đẹp */
.custom-control-label::before {
	border-radius: 2px;
}

/* ======================================================= */
/* ===           ACCOUNT PAGE STYLE                    === */
/* ======================================================= */

/* Sidebar Avatar */
.avatar-circle {
	width: 50px;
	height: 50px;
	background: #f1f1f1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 24px;
}

/* Sidebar Menu */
.account-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.account-nav-link {
	display: block;
	padding: 12px 0;
	color: #666;
	text-decoration: none;
	font-size: 14px;
	border-bottom: 1px solid #f5f5f5;
	transition: color 0.2s;
}

.account-nav-link:hover {
	color: #000;
	text-decoration: none;
}

.account-nav-link.active {
	color: #000;
	font-weight: 700;
}

.account-nav-link i {
	width: 25px;
	/* Cố định chiều rộng icon để chữ thẳng hàng */
	text-align: center;
}

/* Form Styles */
.col-form-label {
	font-size: 14px;
	padding-top: 12px;
	/* Căn giữa với input */
}

/* Input readonly (màu xám nhạt giống ảnh) */
.form-control-ivy.bg-light {
	background-color: #f8f9fa !important;
	border-color: #eee;
	color: #555;
}

/* Table bên phải */
.table-bordered td,
.table-bordered th {
	border-color: #e1e1e1;
	vertical-align: middle;
}

/* ======================================================= */
/* ===           FILTER SIDEBAR STYLE (MỚI)            === */
/* ======================================================= */

/* 1. Accordion Header (Tiêu đề Size, Màu sắc...) */
.filter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	/* Giãn cách trên dưới */
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	/* Đậm vừa phải */
	color: #333;
	transition: color 0.2s;
}

.filter-header:hover {
	color: #000;
}

/* Icon cộng/trừ */
.filter-header i {
	font-size: 12px;
	/* Icon nhỏ gọn */
	color: #999;
}

/* 2. Nội dung bên trong (Size list, Color list) */
.filter-content {
	display: none;
	/* Mặc định đóng */
	padding-bottom: 20px;
	padding-left: 5px;
	/* Thụt lề một chút */
}

/* 3. Slider Giá (noUiSlider Custom) */
.noUi-target {
	background: #e1e1e1;
	/* Đường nền xám nhạt */
	border: none;
	box-shadow: none;
	height: 4px;
	/* Độ dày thanh */
	margin-top: 15px;
	margin-bottom: 15px;
}

.noUi-connect {
	background: #000;
	/* Đoạn giữa 2 nút màu đen */
}

.noUi-horizontal .noUi-handle {
	width: 16px;
	height: 16px;
	right: -8px;
	top: -6px;
	background: #000;
	/* Nút tròn màu đen */
	border: 2px solid #fff;
	/* Viền trắng để tách biệt */
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	outline: none;
}

/* Ẩn vạch kẻ mặc định của thư viện */
.noUi-handle:before,
.noUi-handle:after {
	display: none;
}

/* Hiển thị giá tiền dưới slider */
.price-values {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	color: #333;
}

/* 4. Hai nút chức năng dưới cùng (BỎ LỌC - LỌC) */
.filter-actions {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}

/* Nút BỎ LỌC (Trắng) */
.btn-filter-clear {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 48%;
	/* Chia đôi hàng */
	height: 40px;
	background: #fff;
	color: #333;
	border: 1px solid #333;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	/* Bo góc chéo: Trên-Trái & Dưới-Phải */
	border-radius: 12px 0 12px 0;
	transition: all 0.3s;
}

.btn-filter-clear:hover {
	background: #f9f9f9;
	color: #000;
	text-decoration: none;
}

/* Nút LỌC (Đen) */
.btn-filter-submit {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 48%;
	height: 40px;
	background: #222;
	color: #fff;
	border: 1px solid #222;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	/* Bo góc chéo giống nút trắng */
	border-radius: 12px 0 12px 0;
	cursor: pointer;
	transition: all 0.3s;
}

.btn-filter-submit:hover {
	background: #000;
}

/* ======================================================= */
/* ===           CUSTOM COLOR FILTER STYLE             === */
/* ======================================================= */

/* Container chứa các ô màu: Dàn hàng ngang, tự xuống dòng */
.filter-color-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	/* Khoảng cách giữa các ô màu */
	padding-top: 10px;
}

/* Ẩn checkbox mặc định đi */
.color-checkbox-hidden {
	display: none;
}

/* Ô tròn màu sắc (Label) */
.color-swatch {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	/* Làm tròn */
	border: 1px solid #ddd;
	/* Viền mờ cho các màu sáng như Trắng */
	cursor: pointer;
	position: relative;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Hiệu ứng khi Hover: Phóng to nhẹ */
.color-swatch:hover {
	transform: scale(1.1);
	border-color: #999;
}

/* --- TRẠNG THÁI ĐƯỢC CHỌN (CHECKED) --- */
/* Khi checkbox ẩn được tick -> Đổi style của label liền kề */
.color-checkbox-hidden:checked+.color-swatch {
	border: 2px solid #fff;
	/* Tạo khoảng trắng */
	box-shadow: 0 0 0 2px #000;
	/* Vòng tròn đen bao ngoài cùng */
	transform: scale(1.1);
}

/* --- TOOLTIP (Hiện tên màu khi Hover) --- */
/* 1. Hình chữ nhật đen chứa chữ */
.color-swatch:hover::after {
	content: attr(data-title);
	/* Lấy chữ từ data-title trong HTML */
	position: absolute;
	bottom: 125%;
	/* Đẩy lên trên */
	left: 50%;
	transform: translateX(-50%);
	background-color: #000;
	color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 10;
	opacity: 0;
	animation: fadeInTooltip 0.2s forwards;
}

/* 2. Mũi tên tam giác nhỏ ở dưới tooltip */
.color-swatch:hover::before {
	content: '';
	position: absolute;
	bottom: 115%;
	/* Nằm ngay dưới hộp đen */
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: #000 transparent transparent transparent;
	/* Tam giác hướng xuống */
	z-index: 10;
	opacity: 0;
	animation: fadeInTooltip 0.2s forwards;
}

/* Hiệu ứng hiện dần */
@keyframes fadeInTooltip {
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(-5px);
	}
}


/* ======================================================= */
/* ===           CUSTOM SIZE FILTER STYLE              === */
/* ======================================================= */

/* Container chứa các nút Size: Dàn hàng ngang, tự xuống dòng */
.filter-size-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	/* Khoảng cách giữa các nút */
	padding-top: 10px;
}

/* Ẩn checkbox mặc định đi */
.size-checkbox-hidden {
	display: none;
}

/* Nút Size (Label) */
.size-swatch {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 50px;
	/* Chiều rộng tối thiểu */
	height: 35px;
	/* Chiều cao cố định */
	background-color: #fff;
	border: 1px solid #e1e1e1;
	/* Viền mờ */
	/* Bo góc chéo đặc trưng: Trên-Trái & Dưới-Phải */
	border-radius: 8px 0 8px 0;
	font-size: 14px;
	color: #666;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0 10px;
}

/* Hiệu ứng khi Hover */
.size-swatch:hover {
	border-color: #000;
	color: #000;
}

/* --- TRẠNG THÁI ĐƯỢC CHỌN (CHECKED) --- */
/* Khi checkbox ẩn được tick -> Đổi style của label liền kề */
.size-checkbox-hidden:checked+.size-swatch {
	background-color: #000;
	/* Nền đen */
	color: #fff;
	/* Chữ trắng */
	border-color: #000;
	font-weight: 600;
}









/* Khung bao ngoài nội dung */
.product-desc-wrapper {
	overflow: hidden;
	transition: max-height 0.5s ease-in-out;
	position: relative;
}

/* Trạng thái thu gọn: Giới hạn chiều cao (ví dụ 150px) */
.product-desc-wrapper.collapsed {
	max-height: 110px;
}

/* Hiệu ứng mờ dần ở đáy khi bị thu gọn */
.product-desc-wrapper.collapsed::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: linear-gradient(to bottom, transparent, #fff);
}

/* Container chứa nút và đường kẻ */
.toggle-container {
	position: relative;
}

/* Đường kẻ ngang xuyên qua nút */
.toggle-line {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #e1e1e1;
	z-index: 1;
}

/* Nút bấm hình tròn */
.btn-toggle-desc {
	position: relative;
	z-index: 2;
	/* Nằm đè lên đường kẻ */
	background: #fff;
	border: 1px solid #e1e1e1;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #666;
	outline: none;
	transition: 0.3s;
}

.btn-toggle-desc:hover {
	background-color: #f5f5f5;
	color: #333;
}

/* Giới hạn chiều cao của banner để không bị quá to trên Desktop */
.ivy-banner-wrapper .carousel-item img {
	aspect-ratio: 2.5 / 1;
	/* Tỷ lệ vàng chính xác của IVY moda */
	width: 100%;
	object-fit: cover;
	object-position: center;
	/* Đưa về căn giữa chuẩn xác để không bị cắt mất đầu người mẫu */
}

@media (max-width: 768px) {
	.ivy-banner-wrapper .carousel-item img {
		height: 35vh;
		/* Thấp hơn trên Mobile */
	}
}

@media (max-width : 576px) {
	.mini-cart-sidebar {
		width: 85%;
		right: -85%;
	}
}

/* Footer accordion rotation */
.footer-title[aria-expanded="true"] .footer-chevron {
	transform: rotate(90deg);
}

@media (max-width: 768px) {
	.footer-links {
		margin-bottom: 20px;
	}

	.footer-links li a {
		display: block;
		padding: 8px 0;
		color: #666;
		font-size: 14px;
		text-decoration: none;
	}

	.footer-title {
		padding: 20px 0;
		border: none;
	}
}

/* Mini cart footer responsive */
.mini-cart-footer {
	border-top: none;
	padding: 20px;
	background: #fff;
}

@media (max-width: 768px) {
	.mini-cart-footer {
		padding-bottom: 80px !important;
		/* Chừa chỗ cho thanh điều hướng dưới cùng trên mobile */
	}
}