/* ==========================================================
   MT Product Cards - Stylesheet
   Namespace: mtpc__ (Minh Thành Product Cards)
   Version: 1.0.0
   ========================================================== */

.mtpc__wrap {
	--mtpc-navy: #2C2825;
	--mtpc-orange: #DA7756;
	--mtpc-card-bg: #FFFFFF;
	--mtpc-visual-bg: #FFFFFF;
	--mtpc-line: #E8E2D5;
	--mtpc-text: #2C2825;
	--mtpc-muted: #6B655C;
	--mtpc-radius-md: 6px;
	--mtpc-radius-lg: 8px;
	--mtpc-transition: 0.22s cubic-bezier(.4,0,.2,1);
	--mtpc-cols: 4;

	font-family: inherit;
	color: var(--mtpc-text);
	width: 100%;
	margin: 0 auto 15px;
	padding: 0;
	line-height: 1.55;
	box-sizing: border-box;
}
.mtpc__wrap *,
.mtpc__wrap *::before,
.mtpc__wrap *::after { box-sizing: border-box; }

/* ===== HEADER ===== */
.mtpc__header {
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--mtpc-line);
	position: relative;
}
.mtpc__header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 64px;
	height: 2px;
	background: var(--mtpc-orange);
}
.mtpc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mtpc-orange);
	margin-bottom: 8px;
}
.mtpc__eyebrow::before {
	content: "";
	width: 20px;
	height: 1px;
	background: var(--mtpc-orange);
}
.mtpc__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--mtpc-navy);
	margin: 0 0 6px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.mtpc__lead {
	font-size: 14px;
	color: var(--mtpc-muted);
	margin: 0;
}

/* ===== GRID ===== */
.mtpc__grid {
	display: grid;
	grid-template-columns: repeat(var(--mtpc-cols, 4), 1fr);
	gap: 12px;
	margin-top: 0;
}

/* ===== CARD ===== */
.mtpc__card {
	display: block;
	background: var(--mtpc-card-bg);
	border: 1px solid var(--mtpc-line);
	border-radius: var(--mtpc-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: all var(--mtpc-transition);
	position: relative;
	-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
	.mtpc__card:hover {
		border-color: var(--mtpc-orange);
		transform: translateY(-2px);
		box-shadow: 0 10px 22px -10px rgba(44, 40, 37, 0.2);
	}
	.mtpc__card:hover .mtpc__name { color: var(--mtpc-orange); }
	.mtpc__card:hover .mtpc__img { transform: scale(1.06); }
}
.mtpc__card:active {
	transform: scale(0.98);
	border-color: var(--mtpc-orange);
}

/* ===== VISUAL ===== */
.mtpc__visual {
	position: relative;
	background: var(--mtpc-visual-bg);
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--mtpc-line);
	transition: background var(--mtpc-transition);
	overflow: hidden;
	padding: 8px;
}
.mtpc__img {
	position: relative;
	z-index: 1;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	transition: transform var(--mtpc-transition);
	display: block;
}
.mtpc__img-placeholder {
	font-size: 32px;
	color: #B4B2A9;
	opacity: 0.6;
}

/* ===== BODY ===== */
.mtpc__body {
	padding: 12px 10px 14px;
	text-align: center;
}
.mtpc__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--mtpc-navy);
	margin: 0 0 2px;
	line-height: 1.3;
	transition: color var(--mtpc-transition);
}
.mtpc__alias {
	font-size: 11px;
	color: var(--mtpc-muted);
	font-weight: 500;
	font-style: italic;
	display: block;
	line-height: 1.4;
}

/* ============================================
   RESPONSIVE: ≤ 600px → 2 cột
   ============================================ */
@media (max-width: 600px) {
	.mtpc__wrap { padding: 0; }
	.mtpc__header { margin-bottom: 14px; padding-bottom: 12px; }
	.mtpc__eyebrow { font-size: 10px; margin-bottom: 6px; }
	.mtpc__title { font-size: 18px; }
	.mtpc__lead { font-size: 13px; }

	.mtpc__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		margin-top: 0;
	}
	.mtpc__visual { height: 150px; padding: 10px; }
	.mtpc__body { padding: 14px 12px 16px; }
	.mtpc__name { font-size: 15px; }
	.mtpc__alias { font-size: 12px; }
}

/* ============================================
   RESPONSIVE: ≤ 480px → 2 cột compact
   ============================================ */
@media (max-width: 480px) {
	.mtpc__wrap { padding: 0; }
	.mtpc__title { font-size: 17px; line-height: 1.25; }
	.mtpc__lead { font-size: 12.5px; line-height: 1.5; }
	.mtpc__grid { gap: 8px; margin-top: 0; }
	.mtpc__card { border-radius: var(--mtpc-radius-md); }
	.mtpc__visual { height: 120px; padding: 6px; }
	.mtpc__body { padding: 10px 8px 12px; }
	.mtpc__name { font-size: 13px; line-height: 1.25; }
	.mtpc__alias { font-size: 10.5px; line-height: 1.35; }
}

/* ============================================
   RESPONSIVE: ≤ 360px → mobile rất nhỏ
   ============================================ */
@media (max-width: 360px) {
	.mtpc__title { font-size: 16px; }
	.mtpc__visual { height: 105px; }
	.mtpc__name { font-size: 12.5px; }
	.mtpc__alias { font-size: 10px; }
}