/*
 * t4/card.css — Package Card T4 ("Thông tin gói").
 * Figma node 328:5946. Scoped dưới .pdh-card-t4 (BEM). Màu theo design:
 * secondary navy #002391 (header + giá), CTA gradient xanh #40c706→#34ad00.
 */

.pdh-card-t4 {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 342px;
	/* Fill chiều cao slide (Swiper stretch) để mọi card trong hàng bằng nhau. */
	height: 100%;
	font-family: inherit;
	filter: drop-shadow(0 12px 8px rgba(16, 24, 40, 0.08)) drop-shadow(0 4px 3px rgba(16, 24, 40, 0.03));
}

.pdh-card-t4 *,
.pdh-card-t4 *::before,
.pdh-card-t4 *::after {
	box-sizing: border-box;
}

/* Reset Flatsome bleed — chỉ trong scope card. */
.pdh-card-t4 ul,
.pdh-card-t4 li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Header navy ─────────────────────────────────────────────── */
.pdh-card-t4__header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px 16px;
	background: #002391;
	border: 1px solid rgba(0, 35, 145, 0.2);
	border-radius: 16px 16px 0 0;
}

.pdh-card-t4__header-text {
	max-width: 100%;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	color: #fff;
	text-align: center;
	/* Clamp 1 dòng để thanh header mọi card cao bằng nhau dù tên dài ngắn khác. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Body ────────────────────────────────────────────────────── */
.pdh-card-t4__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	/* 2 nhóm: __top (tốc độ + features) bám trên, __pricing bám đáy → CTA mọi
	   card thẳng hàng dù số feature khác nhau. */
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 24px 16px 16px;
	background: #fff;
	border: 1px solid #002391;
	border-top: 0;
	border-radius: 0 0 16px 16px;
}

.pdh-card-t4__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}

/* ── Tốc độ ↓/↑ ──────────────────────────────────────────────── */
.pdh-card-t4__speed {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 16px;
}

.pdh-card-t4__speed-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pdh-card-t4__speed-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	line-height: 24px;
	color: #888;
}

.pdh-card-t4__speed-arrow {
	flex: 0 0 auto;
}

.pdh-card-t4__speed-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	color: #252525;
}

.pdh-card-t4__speed-sep {
	width: 1px;
	height: 40px;
	background: #d1d1d1;
}

/* ── Divider ─────────────────────────────────────────────────── */
.pdh-card-t4__divider {
	width: 100%;
	height: 1px;
	background: #ececec;
}

/* ── Tính năng ───────────────────────────────────────────────── */
.pdh-card-t4__features {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	/* Tối đa ~4 dòng (4×24px line-height + 3×4px gap); dài hơn → scroll, card
	   không cao thêm. padding-right chừa chỗ scrollbar khỏi đè chữ. */
	max-height: 108px;
	overflow-y: auto;
	padding-right: 4px;
	overscroll-behavior: contain;
}

/* Scrollbar mảnh, kín đáo (WebKit + Firefox). */
.pdh-card-t4__features {
	scrollbar-width: thin;
	scrollbar-color: #d1d1d1 transparent;
}
.pdh-card-t4__features::-webkit-scrollbar {
	width: 4px;
}
.pdh-card-t4__features::-webkit-scrollbar-thumb {
	background: #d1d1d1;
	border-radius: 4px;
}

.pdh-card-t4__feature {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	font-size: 16px;
	line-height: 24px;
	color: #3d3d3d;
}

.pdh-card-t4__feature-icon {
	flex: 0 0 auto;
	margin-top: 2px;
}

.pdh-card-t4__feature-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* ── Giá + VAT + CTA ─────────────────────────────────────────── */
.pdh-card-t4__pricing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.pdh-card-t4__price-details {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.pdh-card-t4__price-head {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pdh-card-t4__price-label {
	font-size: 16px;
	line-height: 24px;
	color: #3d3d3d;
}

.pdh-card-t4__price-info-wrap {
	display: inline-flex;
	align-items: center;
	cursor: help;
	line-height: 0;
}

.pdh-card-t4__price {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.pdh-card-t4__price-value {
	font-size: 32px;
	font-weight: 700;
	line-height: 44px;
	color: #002391;
}

.pdh-card-t4__price-currency {
	font-size: inherit;
	font-weight: inherit;
}

.pdh-card-t4__price-period {
	font-size: 16px;
	line-height: 24px;
	color: #888;
}

.pdh-card-t4__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 13px 24px;
	/* CTA theo token màu template (T2 hồng, T4 xanh…). Token grad trống thì
	   fallback về accent của template hiện hành → template mới tự đúng màu. */
	background: linear-gradient(90deg, var(--iw-cta-grad-from, var(--iw-accent, #40c706)), var(--iw-cta-grad-to, var(--iw-accent-strong, #34ad00)));
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.pdh-card-t4__cta:hover,
.pdh-card-t4__cta:focus-visible {
	filter: brightness(1.05);
	color: #fff;
}

.pdh-card-t4__cta:active {
	transform: translateY(1px);
}

/* ── Skeleton shimmer ────────────────────────────────────────── */
.pdh-card-t4__sk {
	position: relative;
	overflow: hidden;
	background: #ececec;
	border-radius: 6px;
}

.pdh-card-t4__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-t4-shimmer 1.4s infinite;
}

.pdh-card-t4__sk--header { width: 140px; height: 22px; background: rgba(255, 255, 255, 0.4); }
.pdh-card-t4__sk--speed  { width: 100%; height: 56px; }
.pdh-card-t4__sk--price  { width: 160px; height: 60px; }
.pdh-card-t4__sk--cta    { width: 100%; height: 48px; border-radius: 12px; }
.pdh-card-t4__sk--feature { display: block; width: 100%; height: 20px; }
.pdh-card-t4__sk--feature-short { width: 60%; }

@keyframes pdh-card-t4-shimmer {
	100% { transform: translateX(100%); }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.pdh-card-t4 {
		max-width: 100%;
	}
}