/**
 * pdh-card-t3 — Package card mẫu T3 (Figma 1642:47707).
 *
 * Ảnh banner full + giá + box tốc độ (↓/↑ + gauge) + nút pill viền cam.
 * Dùng bởi grid v1/v2 khi chọn card_style=v3. Data từ mapper chung.
 * Scope dưới `.pdh-card-t3` — không leak global.
 */

.pdh-card-t3 {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 0 2px 32px -4px rgba(16, 24, 40, 0.04), 0 4px 16px 10px rgba(16, 24, 40, 0.02), 0 4px 4px -8px rgba(0, 0, 0, 0.03);
	transition: box-shadow .2s ease;
}

/* Banner ảnh — tỉ lệ 342/276 như Figma. */
.pdh-card-t3__banner {
	position: relative;
	width: 100%;
	aspect-ratio: 342 / 276;
	overflow: hidden;
}
.pdh-card-t3__banner-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pdh-card-t3__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	color: #f56011;
}
.pdh-card-t3__badge-icon { width: 14px; height: 14px; object-fit: contain; }

.pdh-card-t3__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 auto;
	padding: 24px 20px 16px;
}

/* Giá — value Inter Bold 32, period 12, note 12. */
.pdh-card-t3__price-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pdh-card-t3__name {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	color: #252525;
}
.pdh-card-t3__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.pdh-card-t3__price-label {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: #3d3d3d;
}
.pdh-card-t3__price-value {
	font-family: 'Inter', inherit;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 700;
	/* Màu giá theo variant — token --iw-price (T1 đỏ, T2 hồng, T3 cam…). */
	color: var(--iw-price, var(--iw-accent, #252525));
}
.pdh-card-t3__price-currency {
	/* đ glued vào số — cùng size/màu giá. */
	font-size: inherit;
	color: inherit;
}
.pdh-card-t3__price-period {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: #3d3d3d;
}
/* Info icon → hover hiện note (tooltip qua iw-card-tooltip.js, key data-iw-note). */
.pdh-card-t3__price-info-wrap {
	display: inline-flex;
	align-items: center;
	align-self: center;
	cursor: pointer;
	outline: none;
}
.pdh-card-t3__price-info-icon {
	width: 14px;
	height: 14px;
	object-fit: contain;
	opacity: 0.6;
	transition: opacity .15s;
}
.pdh-card-t3__price-info-wrap:hover .pdh-card-t3__price-info-icon,
.pdh-card-t3__price-info-wrap:focus-visible .pdh-card-t3__price-info-icon { opacity: 1; }

/* Box tốc độ — nền xám, viền, label + ↓/↑ + gauge bên phải. */
.pdh-card-t3__speed {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 15px;
	background: #f7f7f8;
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	box-shadow: 0 2px 4px -4px rgba(16, 24, 40, 0.12), 0 0 8px -2px rgba(16, 24, 40, 0.12);
}
.pdh-card-t3__speed-main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pdh-card-t3__speed-label {
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
	color: #3d3d3d;
}
.pdh-card-t3__speed-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pdh-card-t3__speed-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.pdh-card-t3__speed-item strong {
	font-size: 15px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: -0.075px;
	color: #3d3d3d;
}
.pdh-card-t3__speed-arrow { flex-shrink: 0; }
.pdh-card-t3__speed-gauge {
	flex-shrink: 0;
	width: 62px;
	line-height: 0;
}
.pdh-card-t3__speed-gauge svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Nút pill (Figma 1642:47767) — màu đi theo variant qua token --iw-accent /
 * --iw-accent-strong (KHÔNG hardcode cam):
 *   - rest: nền trắng, viền + chữ accent.
 *   - hover/nổi bật: gradient accent→accent-strong, chữ trắng, ring mờ ngoài.
 */
.pdh-card-t3__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	/* NORMAL = gradient đầy (token CTA sáng theo variant) + ring mờ ngoài. */
	background: linear-gradient(180deg, var(--iw-cta-grad-from, var(--iw-accent, #ff8f4b)), var(--iw-cta-grad-to, var(--iw-accent-strong, #ff5c00)));
	color: #fff;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--iw-accent, #f56011) 12%, transparent);
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Card hover → shadow đậm (Figma card giữa). */
.pdh-card-t3:hover {
	box-shadow: 0 12px 32px 8px rgba(10, 13, 18, 0.15), 0 8px 8px -4px rgba(10, 13, 18, 0.03), 0 0 3px -1.5px rgba(10, 13, 18, 0.08);
}
/* HOVER nút = đảo lại: nền trắng, viền + chữ accent, bỏ ring. */
.pdh-card-t3__cta:hover,
.pdh-card-t3__cta:focus-visible {
	border-color: var(--iw-accent, #f56011);
	background: #fff;
	color: var(--iw-accent, #f56011);
	box-shadow: none;
}

/* Skeleton shimmer */
.pdh-card-t3__sk {
	position: relative;
	overflow: hidden;
	background: #eee;
	border-radius: 8px;
}
.pdh-card-t3__sk--img { width: 100%; aspect-ratio: 342 / 276; border-radius: 0; }
.pdh-card-t3__sk--price { height: 40px; width: 60%; }
.pdh-card-t3__sk--speed { height: 64px; width: 100%; border-radius: 12px; }
.pdh-card-t3__sk--cta { height: 48px; width: 100%; border-radius: 999px; }
.pdh-card-t3__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-t3-shimmer 1.4s infinite;
}
@keyframes pdh-card-t3-shimmer { 100% { transform: translateX(100%); } }

/* Link tên gói + ảnh → trang chi tiết. */
.pdh-card-t3__banner-link { display: block; width: 100%; height: 100%; line-height: 0; }
.pdh-card-t3__name a { color: inherit; text-decoration: none; transition: color .15s; }
.pdh-card-t3__name a:hover { color: var(--iw-accent, #f56011); }

/* Tablet 768–991: card hẹp hơn (2–3/view) → thu nhỏ gauge cho cân box tốc độ. */
@media (min-width: 768px) and (max-width: 991px) {
	.pdh-card-t3__speed-gauge { width: 44px; }
	.pdh-card-t3__speed { gap: 6px; padding: 12px; }
}