/**
 * pdh-card-square — "Dịch vụ bổ sung" (Figma 407:58272).
 *
 * Ảnh vuông 1:1 + tên + giá "Chỉ từ … đ". Tối giản, không CTA/tốc độ.
 * Màu CỐ ĐỊNH (KHÔNG dùng token --iw-accent) → không đổi theo template T1-T5.
 * Scope dưới `.pdh-card-square`.
 */

.pdh-card-square {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 12px;
	overflow: hidden;
	box-sizing: border-box;
	font-family: inherit;
}

/* Ảnh vuông 1:1 (Figma 342×342) */
.pdh-card-square__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	flex-shrink: 0;
}
.pdh-card-square__image-link { display: block; width: 100%; height: 100%; line-height: 0; }
.pdh-card-square__image-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Container nền xám nhạt — tên + giá. */
.pdh-card-square__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: #f3f3f3;
}

.pdh-card-square__name {
	margin: 0;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: #3d3d3d;
	word-break: break-word;
}
.pdh-card-square__name a { color: inherit; text-decoration: none; transition: color .15s; }
.pdh-card-square__name a:hover { color: #4564ed; }

/* Giá: label "Chỉ từ" (xám) + value (xanh cố định) + đ. */
.pdh-card-square__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.pdh-card-square__price-label {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #888;
}
.pdh-card-square__price-value {
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: #4564ed;
}
.pdh-card-square__price-currency { font-size: inherit; color: inherit; font-weight: inherit; }
.pdh-card-square__price-period {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #888;
}
.pdh-card-square__price-info-wrap {
	display: inline-flex;
	align-items: center;
	align-self: center;
	cursor: help;
	outline: none;
}
.pdh-card-square__price-info-icon { width: 14px; height: 14px; object-fit: contain; opacity: 0.6; }
.pdh-card-square__price-info-wrap:hover .pdh-card-square__price-info-icon { opacity: 1; }

/* Features optional (mặc định ẩn) — tick xanh cố định. */
.pdh-card-square__features {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	width: 100%;
}
.pdh-card-square__features li.pdh-card-square__feature { margin: 0; padding: 0; }
.pdh-card-square__feature {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	color: #3d3d3d;
	list-style: none;
}
.pdh-card-square__feature-icon { flex: 0 0 auto; margin-top: 1px; }
.pdh-card-square__feature-text { flex: 1 1 auto; min-width: 0; }

/* Skeleton shimmer */
.pdh-card-square__sk {
	position: relative;
	overflow: hidden;
	background: #e6e6e6;
	border-radius: 6px;
}
.pdh-card-square__sk--img { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; }
.pdh-card-square__sk--name { height: 24px; width: 70%; margin-bottom: 8px; }
.pdh-card-square__sk--price { height: 20px; width: 45%; }
.pdh-card-square__sk::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	animation: pdh-card-square-shimmer 1.4s infinite;
}
@keyframes pdh-card-square-shimmer { 100% { transform: translateX(100%); } }

/* ── 2col mobile (--m2col ≤767): thu nhỏ text cho khít 50% width. ── */
@media (max-width: 767px) {
	:is(.pdh-grid-t1__slider--m2col, .pdh-grid-t2__slider--m2col) .pdh-card-square__body { gap: 6px; padding: 12px; }
	:is(.pdh-grid-t1__slider--m2col, .pdh-grid-t2__slider--m2col) .pdh-card-square__name { font-size: 16px; line-height: 22px; }
	:is(.pdh-grid-t1__slider--m2col, .pdh-grid-t2__slider--m2col) .pdh-card-square__price-label { font-size: 12px; }
	:is(.pdh-grid-t1__slider--m2col, .pdh-grid-t2__slider--m2col) .pdh-card-square__price-value { font-size: 14px; }
	:is(.pdh-grid-t1__slider--m2col, .pdh-grid-t2__slider--m2col) .pdh-card-square__price-period { font-size: 12px; }
	:is(.pdh-grid-t1__slider--m2col, .pdh-grid-t2__slider--m2col) .pdh-card-square__feature { font-size: 12px; line-height: 18px; }
}