/* --- BREADCRUMBS & TIÊU ĐỀ --- */
.mtk-breadcrumbs a { color: #333; transition: color 0.3s; }
.mtk-breadcrumbs a:hover { color: #f7a33e; }
.mtk-archive-title { font-weight: bold; text-transform: uppercase; margin-bottom: 15px; font-size: 1.5em; }

/* --- HIỂN THỊ NỘI DUNG (jQuery DEVVN STYLE) --- */
.mtk-archive-desc-wrapper {
	margin-bottom: 40px;
}
#mtk-desc-content {
	overflow: hidden;
	position: relative;
	margin-bottom: 20px;
	padding-bottom: 25px;
	line-height: 1.6;
}
.mtk-readmore-btn {
	text-align: center;
	cursor: pointer;
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	background: #fff;
}
.mtk-readmore-btn-less {
	bottom: -30px;
}
.mtk-readmore-btn:before {
	height: 55px;
	margin-top: -45px;
	content: "";
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	display: block;
}
.mtk-readmore-btn a {
	display: block;
	width: fit-content;
	margin: 0 auto;
	height: 34px;
	line-height: 34px;
	background: #f7a33e; /* Màu vàng cam của Flatsome */
	font-size: 14px;
	color: #fff !important;
	border-radius: 4px; /* Bo góc nhẹ thay vì bo tròn hẳn */
	padding: 0 20px;
	text-align: center;
	font-weight: bold;
}
.mtk-readmore-btn a:after {
	content: '';
	width: 0;
	right: 0;
	border-top: 5px solid #fff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	display: inline-block;
	vertical-align: middle;
	margin: -2px 0 0 8px;
}
.mtk-readmore-btn-less:before {
	display: none;
}
.mtk-readmore-btn-less a:after {
	border-top: 0;
	border-bottom: 5px solid #fff;
}

/* --- SIDEBAR BỘ LỌC --- */
.mtk-sidebar-filter { border-right: 1px solid #eee; padding-right: 20px; }
.mtk-filter-title { font-weight: bold; text-transform: uppercase; font-size: 1.1em; border-bottom: 2px solid #f1f1f1; padding-bottom: 10px; margin-bottom: 20px; }
.mtk-filter-group { margin-bottom: 25px; }
.mtk-filter-group-title { color: #3b82f6; font-size: 0.95em; font-weight: bold; text-transform: uppercase; margin-bottom: 15px; }

/* Radio (Kiểu dáng) */
.mtk-filter-list-radio { list-style: none; margin-left: 0; padding-left: 0; }
.mtk-filter-list-radio li { margin-bottom: 10px; }
.mtk-filter-list-radio label { cursor: pointer; display: flex; align-items: center; gap: 8px; color: #444; }

/* Pills (Phong cách) */
.mtk-filter-list-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mtk-pill-label input { display: none; }
.mtk-pill-text {
	display: inline-block; padding: 6px 15px; background: #888; color: #fff;
	border-radius: 20px; cursor: pointer; font-size: 0.85em; transition: background 0.2s;
}
.mtk-pill-label input:checked + .mtk-pill-text { background: #f7a33e; }
.mtk-pill-label:hover .mtk-pill-text { background: #666; }

/* --- CARD SẢN PHẨM (KẾ THỪA TỪ SINGLE) --- */
.mtk-related-card { margin-bottom: 30px; }
/* --- CARD SẢN PHẨM: ẢNH TỶ LỆ 16:9 CHUẨN --- */
.mtk-related-img {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* CÔNG THỨC 16:9 */
    overflow: hidden;
    border: 1px solid #eee;
}
.mtk-related-img a {
    display: block;
}
.mtk-related-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.mtk-related-img:hover img {
    transform: scale(1.05); /* Zoom nhẹ thêm chút cho mượt */
    opacity: 0.9;
}
.mtk-related-content { padding-top: 15px; }
.mtk-related-post-title { font-size: 1em; font-weight: bold; margin-bottom: 10px; line-height: 1.4; }
.mtk-related-post-title a { color: #222; }
.mtk-related-post-title a:hover { color: #f7a33e; }
.mtk-related-swatches { display: flex; gap: 6px; margin-bottom: 10px; }
.mtk-related-swatch-item { display: inline-block; width: 18px; height: 18px; border: 1px solid #ddd; }
.mtk-related-meta { font-size: 0.85em; line-height: 1.6; margin-bottom: 8px; }
.mtk-related-meta .meta-label { color: #888; }
.mtk-related-meta .meta-value { color: #222; font-weight: bold; }
.mtk-related-stars { color: #f5a623; font-size: 13px; letter-spacing: 2px; }
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	#mtk-ajax-results .row.mtk-archive-grid .large-4{
		flex-basis: 100%;
    	max-width: 100%;
	}

}