/**
 * DS Elements — Thẻ phối bộ
 */

.elementor-widget-ds-combo-cards {
	width: 100%;
	min-width: 0;
}

.ds-cbc {
	--ds-cbc-cols: 2;
	--ds-cbc-gap: var(--ds-space-4);
	--ds-cbc-ratio: 1.24;
	--ds-cbc-piece: 36px;

	width: 100%;
	min-width: 0;
}

.ds-cbc *,
.ds-cbc *::before,
.ds-cbc *::after {
	box-sizing: border-box;
}

/* --- Tiêu đề ------------------------------------------------------------ */

.ds-cbc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-space-4);
	margin-bottom: var(--ds-cbc-head-gap, var(--ds-space-4));
}

.ds-cbc__heading {
	margin: 0;
	color: var(--ds-cbc-heading-color, var(--ds-color-brand));
	font-size: var(--ds-cbc-heading-fs, var(--ds-fs-h3));
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h3);
	text-transform: uppercase;
}

.ds-cbc__more {
	flex: 0 0 auto;
	color: var(--ds-cbc-more-color, var(--ds-color-brand-light));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
	text-decoration: none;
	white-space: nowrap;
}

.ds-cbc__more:hover {
	text-decoration: underline;
}

/* --- Lưới --------------------------------------------------------------- */

.ds-cbc__grid {
	display: grid;
	grid-template-columns: repeat(var(--ds-cbc-cols), minmax(0, 1fr));
	gap: var(--ds-cbc-gap);
}

.ds-cbc__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;

	background: var(--ds-cbc-card-bg, var(--ds-color-white));
	border: 1px solid var(--ds-cbc-card-border, var(--ds-color-border));
	border-radius: var(--ds-cbc-card-radius, var(--ds-radius-md));
	box-shadow: var(--ds-shadow-card);
	transition: box-shadow var(--ds-transition), transform var(--ds-transition);
}

.ds-cbc__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ds-shadow-raised);
}

.ds-cbc__media {
	background: var(--ds-color-surface);
}

.ds-cbc__media img {
	width: 100%;
	height: auto; /* thuộc tính height của <img> WordPress thắng aspect-ratio nếu thiếu dòng này */
	display: block;
	aspect-ratio: var(--ds-cbc-ratio);
	object-fit: cover;
}

/* Căn giữa theo chiều ngang: thiết kế xếp tên, mô tả, dãy món và nút thành một
   cột giữa thẻ. */
.ds-cbc__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ds-space-2);
	padding: var(--ds-space-4);
	min-width: 0;
	text-align: center;
}

.ds-cbc__title {
	margin: 0;
	color: var(--ds-cbc-title-color, var(--ds-color-heading));
	font-size: var(--ds-fs-h4);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
}

.ds-cbc__subtitle {
	margin: 0;
	color: var(--ds-cbc-subtitle-color, var(--ds-color-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

/* --- Dãy ảnh món -------------------------------------------------------- */

.ds-cbc__pieces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ds-space-2);
	margin-top: var(--ds-space-2);
}

.ds-cbc__piece {
	flex: 0 0 auto;
	display: block;
	width: var(--ds-cbc-piece);
	height: var(--ds-cbc-piece);
	overflow: hidden;
	background: var(--ds-color-surface);
	border-radius: var(--ds-radius-pill);
}

.ds-cbc__piece img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* --- Nút ---------------------------------------------------------------- */

/* margin-top: auto đẩy nút xuống đáy để mọi thẻ có nút thẳng hàng nhau, kể cả
   khi mô tả dài ngắn khác nhau. */
.ds-cbc__btn {
	margin-top: auto;
	width: 100%;
	padding: var(--ds-space-3) var(--ds-space-3);

	background: var(--ds-cbc-btn-bg, var(--ds-color-brand));
	color: var(--ds-cbc-btn-color, var(--ds-color-white));
	border-radius: var(--ds-cbc-btn-radius, var(--ds-radius-sm));

	font-size: var(--ds-fs-button);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-button);
	letter-spacing: var(--ds-ls-button);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--ds-transition);
}

a.ds-cbc__btn:hover {
	background: var(--ds-cbc-btn-bg-hover, var(--ds-color-brand-light));
}

.ds-cbc__btn--static {
	display: block;
	cursor: default;
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 767px) {
	.ds-cbc__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ds-space-2);
	}

	.ds-cbc__body {
		padding: var(--ds-space-3);
	}
}