/**
 * WP Social Video Downloader — front-end styles.
 * Style: "Soft UI Evolution" (cyan + green CTA). Flexbox/Grid, mobile-first.
 * Mọi rule được scope dưới .svd-widget để không đụng theme.
 */

.svd-widget {
	/* Design tokens — màu đã chỉnh đạt WCAG AA (chữ trắng/nút) */
	--svd-primary: #0e7490;      /* nền nút + chữ trắng = 5.36:1 AA */
	--svd-primary-dark: #0a5f78; /* hover = 7.19:1 AAA */
	--svd-accent: #22d3ee;       /* chỉ dùng cho viền/outline (UI) */
	--svd-cta: #15803d;          /* nền nút tải + chữ trắng = 5.02:1 AA */
	--svd-cta-dark: #166534;     /* hover = 7.13:1 AAA */
	--svd-bg: #ecfeff;
	--svd-surface: #ffffff;
	--svd-text: #164e63;
	--svd-muted: #475569;
	--svd-border: #cbd5e1;       /* viền trang trí (divider) */
	--svd-input-border: #7c8794; /* viền input = 3.65:1 (UI ≥3.0) */
	--svd-danger: #b42318;       /* chữ lỗi trên nền hồng = 6.01:1 AA */
	--svd-radius: 14px;
	--svd-shadow: 0 4px 16px rgba(8, 145, 178, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08);
	--svd-shadow-hover: 0 8px 28px rgba(8, 145, 178, 0.20), 0 2px 6px rgba(15, 23, 42, 0.10);

	box-sizing: border-box;
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(16px, 4vw, 28px);
	background: var(--svd-bg);
	border-radius: var(--svd-radius);
	color: var(--svd-text);
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.svd-widget *,
.svd-widget *::before,
.svd-widget *::after {
	box-sizing: border-box;
}

/* ── Form ───────────────────────────────────────────────── */

.svd-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.svd-label {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--svd-text);
}

.svd-input-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Bọc input + nút Dán để nút nằm gọn bên trong ô. */
.svd-input-wrap {
	position: relative;
	display: flex;
	flex: 1 1 240px;
	min-width: 0;
}

.svd-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 52px 0 16px; /* chừa chỗ cho nút Dán bên phải */
	font-size: 16px; /* ≥16px tránh iOS zoom */
	color: var(--svd-text);
	background: var(--svd-surface);
	border: 1.5px solid var(--svd-input-border);
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── Nút Auto-Paste ─────────────────────────────────────── */

.svd-paste {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--svd-primary);
	background: var(--svd-bg);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.svd-paste:hover {
	background: var(--svd-primary); /* icon trắng trên nền đậm = đủ tương phản */
	color: #fff;
}

.svd-paste:focus-visible {
	outline: 3px solid var(--svd-accent);
	outline-offset: 2px;
}

.svd-paste__icon {
	width: 20px;
	height: 20px;
}

/* ── Auto-Detect Platform ───────────────────────────────── */

.svd-platforms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
}

.svd-platform {
	display: inline-flex;
	color: var(--svd-muted);
	opacity: 0.35;
	filter: grayscale(1);
	transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.svd-platform__icon {
	width: 26px;
	height: 26px;
}

/* Logo được nhận diện sẽ sáng lên & nảy nhẹ. */
.svd-platform.is-active {
	opacity: 1;
	filter: grayscale(0);
	transform: scale(1.12);
}

.svd-platform[data-platform="tiktok"].is-active { color: #000; }
.svd-platform[data-platform="youtube"].is-active { color: #ff0000; }
.svd-platform[data-platform="facebook"].is-active { color: #1877f2; }
.svd-platform[data-platform="instagram"].is-active { color: #e4405f; }
.svd-platform[data-platform="x"].is-active { color: #000; }

.svd-input::placeholder {
	color: #64748b; /* 4.76:1 trên nền trắng — AA */
}

.svd-input:focus-visible {
	outline: none;
	border-color: var(--svd-primary);
	box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.25);
}

/* ── Buttons ────────────────────────────────────────────── */

.svd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px; /* touch target ≥44px */
	padding: 0 22px;
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.svd-btn--primary {
	flex: 0 0 auto;
	background: var(--svd-primary);
}

.svd-btn--primary:hover {
	background: var(--svd-primary-dark);
	box-shadow: var(--svd-shadow);
}

.svd-btn:focus-visible {
	outline: 3px solid var(--svd-accent);
	outline-offset: 2px;
}

.svd-btn[disabled] {
	opacity: 0.7;
	cursor: progress;
}

/* Spinner (ẩn cho tới khi loading) */
.svd-spinner {
	width: 18px;
	height: 18px;
	border: 2.5px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	display: none;
	animation: svd-spin 0.7s linear infinite;
}

.svd-widget.is-loading .svd-spinner {
	display: inline-block;
}

@keyframes svd-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ── Message ────────────────────────────────────────────── */

.svd-message {
	margin: 14px 0 0;
	padding: 12px 14px;
	font-size: 0.95rem;
	border-radius: 10px;
	background: #fef2f2;
	color: var(--svd-danger);
	border: 1px solid #fecaca;
}

/* ── Skeleton screen (hiện khi .is-loading) ─────────────── */

.svd-skeleton {
	display: none;
	margin-top: 18px;
}

/* Chỉ hiện skeleton trong lúc fetch */
.svd-widget.is-loading .svd-skeleton {
	display: block;
}

.svd-skel-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 16px;
	background: var(--svd-surface);
	border-radius: var(--svd-radius);
	box-shadow: var(--svd-shadow);
}

.svd-skel-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.svd-skel-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 6px;
}

/* Khối xám nền + dải sáng quét qua (shimmer) */
.svd-skel {
	position: relative;
	overflow: hidden;
	background: #e2e8f0;
	border-radius: 8px;
}

.svd-skel::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent 0,
		rgba(255, 255, 255, 0.65) 50%,
		transparent 100%
	);
	animation: svd-shimmer 1.4s ease-in-out infinite;
}

.svd-skel--thumb {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
}

.svd-skel--badge {
	width: 84px;
	height: 18px;
	border-radius: 999px;
}

.svd-skel--title {
	height: 18px;
	width: 100%;
}

.svd-skel--short {
	width: 55%;
}

.svd-skel--btn {
	height: 46px;
	border-radius: 10px;
}

@keyframes svd-shimmer {
	to {
		transform: translateX(100%);
	}
}

/* ≥560px: thumbnail skeleton sang trái cho khớp result card */
@media (min-width: 560px) {
	.svd-skel-card {
		grid-template-columns: 200px 1fr;
		align-items: start;
	}
}

/* ── Result card ────────────────────────────────────────── */

.svd-result {
	margin-top: 18px;
}

.svd-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 16px;
	background: var(--svd-surface);
	border-radius: var(--svd-radius);
	box-shadow: var(--svd-shadow);
	/* fade-in mượt */
	animation: svd-fade-in 0.3s ease both;
}

@keyframes svd-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.svd-card__media {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #e2e8f0;
	aspect-ratio: 16 / 9;
}

.svd-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.svd-card__duration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 8px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	background: rgba(15, 23, 42, 0.78);
	border-radius: 6px;
}

.svd-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.svd-card__source {
	align-self: flex-start;
	padding: 2px 10px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--svd-primary-dark);
	background: var(--svd-bg);
	border-radius: 999px;
}

.svd-card__title {
	margin: 0;
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--svd-text);
	/* gọn 3 dòng */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Download buttons grid ──────────────────────────────── */

.svd-downloads {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.svd-dl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 8px 14px;
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--svd-cta);
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.svd-dl:hover {
	background: var(--svd-cta-dark);
	box-shadow: var(--svd-shadow-hover);
}

.svd-dl:focus-visible {
	outline: 3px solid var(--svd-cta-dark);
	outline-offset: 2px;
}

/* Trạng thái đang tải (fetch blob) */
.svd-dl {
	position: relative;
	overflow: hidden;
}
.svd-dl.is-downloading {
	opacity: 0.85;
	cursor: progress;
	pointer-events: none;
}

/* ProgressBar: thanh mảnh dưới cùng nút, ẩn khi width=0 */
.svd-dl__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.25);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.svd-dl.is-downloading .svd-dl__bar {
	opacity: 1;
}
.svd-dl__bar-fill {
	display: block;
	width: 0%;
	height: 100%;
	background: #fff;
	transition: width 0.15s ease;
}

/* Indeterminate: dải sáng quét qua khi không biết total size */
.svd-dl__bar.is-indeterminate .svd-dl__bar-fill {
	width: 40% !important;
	animation: svd-dl-indeterminate 1.1s ease-in-out infinite;
}
@keyframes svd-dl-indeterminate {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(300%); }
}

/* Audio nhóm khác màu để dễ phân biệt */
.svd-dl--audio {
	background: var(--svd-primary);
}

.svd-dl--audio:hover {
	background: var(--svd-primary-dark);
}

.svd-dl__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.svd-dl__meta {
	font-size: 0.78rem;
	font-weight: 500;
	opacity: 0.85;
}

/* ── Nút Copy Caption ───────────────────────────────────── */

.svd-copy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	min-height: 40px;
	padding: 6px 14px;
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--svd-primary-dark);
	background: var(--svd-bg);
	border: 1.5px solid var(--svd-accent);
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.svd-copy:hover {
	background: var(--svd-accent);
	color: #fff;
}

.svd-copy:focus-visible {
	outline: 3px solid var(--svd-accent);
	outline-offset: 2px;
}

.svd-copy.is-copied {
	color: #fff;
	background: var(--svd-cta);
	border-color: var(--svd-cta-dark);
}

.svd-copy__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* ── Recent Downloads (History) ─────────────────────────── */

.svd-history {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--svd-border);
}

.svd-history__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.svd-history__title {
	margin: 0;
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--svd-text);
}

.svd-history__clear {
	font-size: 0.85rem;
	color: var(--svd-muted);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.svd-history__clear:hover {
	color: var(--svd-danger);
}

.svd-history__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.svd-history__item {
	display: flex;
	align-items: stretch;
	gap: 8px;
	background: var(--svd-surface);
	border: 1px solid var(--svd-border);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.svd-history__item:hover {
	border-color: var(--svd-accent);
	box-shadow: var(--svd-shadow);
}

.svd-history__link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px;
	font: inherit;
	text-align: left;
	color: var(--svd-text);
	background: none;
	border: none;
	cursor: pointer;
}

.svd-history__thumb {
	width: 64px;
	height: 40px;
	flex: 0 0 auto;
	object-fit: cover;
	border-radius: 6px;
	background: #e2e8f0;
}

.svd-history__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.92rem;
	line-height: 1.4;
	/* gọn 2 dòng */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.svd-history__remove {
	flex: 0 0 auto;
	width: 40px;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--svd-muted);
	background: none;
	border: none;
	border-left: 1px solid var(--svd-border);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.svd-history__remove:hover {
	color: #fff;
	background: var(--svd-danger);
}

.svd-history__link:focus-visible,
.svd-history__remove:focus-visible {
	outline: 3px solid var(--svd-accent);
	outline-offset: -3px;
}

/* Standalone [svd_recent_downloads] — bỏ divider trên cùng */
.svd-widget--recent .svd-history {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.svd-recent-empty {
	margin: 0;
	color: var(--svd-muted);
	font-size: 0.95rem;
}

/* ── Responsive: ≥560px đưa thumbnail sang trái ─────────── */

@media (min-width: 560px) {
	.svd-card {
		grid-template-columns: 200px 1fr;
		align-items: start;
	}
}

/* ════════════════════════════════════════════════════════════
   FAQ ACCORDION ([svd_faq]) — CSS thuần, dùng <details>/<summary>
   ════════════════════════════════════════════════════════════ */

.svd-faq {
	/* Tự khai báo token vì nằm ngoài .svd-widget */
	--svd-primary: #0891b2;
	--svd-primary-dark: #0e7490;
	--svd-accent: #22d3ee;
	--svd-surface: #ffffff;
	--svd-text: #164e63;
	--svd-muted: #475569;
	--svd-border: #cbd5e1;
	--svd-bg: #ecfeff;

	box-sizing: border-box;
	max-width: 720px;
	margin-inline: auto;
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--svd-text);
	font-size: 16px;
	line-height: 1.6;
}

.svd-faq *,
.svd-faq *::before,
.svd-faq *::after {
	box-sizing: border-box;
}

.svd-faq__heading {
	margin: 0 0 16px;
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 700;
	color: var(--svd-text);
}

.svd-faq__item {
	background: var(--svd-surface);
	border: 1px solid var(--svd-border);
	border-radius: 12px;
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.svd-faq__item.active {
	border-color: var(--svd-accent);
}

/* Nút câu hỏi — reset style mặc định của <button> */
.svd-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 16px 18px;
	min-height: 48px;
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--svd-text);
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
}

.svd-faq__q:focus-visible {
	outline: 3px solid var(--svd-accent);
	outline-offset: -3px;
	border-radius: 12px;
}

/* Icon +/− tự vẽ bằng CSS */
.svd-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.svd-faq__icon::before,
.svd-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2.5px;
	background: var(--svd-primary);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Thanh dọc → tạo dấu + */
.svd-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Khi mở (.active): dấu + xoay thành − */
.svd-faq__item.active .svd-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* Panel xổ bằng max-height (base [data-acc-panel] đã đặt ở cuối file) */
.svd-faq__a-inner {
	padding: 0 18px 16px;
	color: var(--svd-muted);
}

.svd-faq__a-inner p {
	margin: 0 0 10px;
}

.svd-faq__a-inner p:last-child {
	margin-bottom: 0;
}

.svd-faq__a-inner a {
	color: var(--svd-primary-dark);
	text-decoration: underline;
}

/* ── Reduced motion ─────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ════════════════════════════════════════════════════════════ */

.svd-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	z-index: 99999;
	max-width: min(92vw, 420px);
	padding: 12px 18px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: #fff;
	background: #1f2937;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.28);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	pointer-events: none;
}
.svd-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.svd-toast--success { background: #15803d; }
.svd-toast--error { background: #b42318; }

/* ════════════════════════════════════════════════════════════
   SHAKE ANIMATION (cảnh báo ô input)
   ════════════════════════════════════════════════════════════ */

.svd-shake { animation: svd-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.svd-shake .svd-input { border-color: var(--svd-danger); }

@keyframes svd-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60% { transform: translateX(5px); }
}

/* Panel accordion (mặc định đóng) — JS gán max-height = scrollHeight khi mở */
[data-acc-panel] {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.svd-widget *,
	.svd-widget *::before,
	.svd-widget *::after,
	.svd-faq *,
	.svd-faq *::before,
	.svd-faq *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.svd-shake { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   TRANG NGÁCH (Flat Tech — kế thừa biến :root của theme)
   ════════════════════════════════════════════════════════════ */

.svd-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	font-size: 0.88rem;
	color: #6b7280;
}
.svd-breadcrumb a { color: #6b7280; transition: color 0.2s ease; }
.svd-breadcrumb a:hover { color: var(--primary-color, #e65f2b); }
.svd-breadcrumb__sep { color: #cbd5e1; }
.svd-breadcrumb__current { color: var(--text-color, #1a1a1a); font-weight: 600; }

.svd-niche__hero { text-align: center; margin-bottom: 24px; }
.svd-niche__title {
	margin: 0 0 12px;
	font-size: clamp(1.6rem, 4.5vw, 2.4rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--text-color, #1a1a1a);
}
.svd-niche__lead {
	margin: 0 auto;
	max-width: 60ch;
	font-size: clamp(1rem, 2vw, 1.15rem);
	color: #6b7280;
}

.svd-niche__section { margin-top: clamp(32px, 5vw, 52px); }
/* Tăng specificity để thắng .ms-entry__content h2 của theme */
.svd-niche .svd-niche__h2 {
	margin: 0 0 22px;
	text-align: center;
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--text-color, #1a1a1a);
}

/* 3 bước — lưới phẳng: nền trắng, viền 1px, bo góc 8px */
.svd-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.svd-step {
	padding: 24px 20px;
	text-align: center;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	transition: border-color 0.2s ease;
}
.svd-step:hover { border-color: var(--primary-color, #e65f2b); }
.svd-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	margin-bottom: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--primary-color, #e65f2b);
	border-radius: 10px;
}
.svd-step__text { margin: 0; color: #374151; font-size: 0.95rem; line-height: 1.6; }

.svd-niche__features { max-width: 760px; margin-inline: auto; }
.svd-niche__text { margin: 0; color: #374151; line-height: 1.85; }

/* Form công cụ trên trang ngách → tông nóng, phẳng, kế thừa biến theme */
.svd-niche .svd-widget {
	max-width: 640px;
	margin: 24px auto;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
}
.svd-niche .svd-input { background: #f8f9fa; border: 1px solid #e5e7eb; box-shadow: none; }
.svd-niche .svd-input:focus-visible { border-color: var(--primary-color, #e65f2b); box-shadow: none; outline: none; }
.svd-niche .svd-btn--primary {
	background: var(--primary-color, #e65f2b);
	box-shadow: none;
	transition: background-color 0.2s ease;
}
.svd-niche .svd-btn--primary:hover { background: var(--accent-color, #c8372d); box-shadow: none; }
.svd-niche .svd-dl { background: var(--primary-color, #e65f2b); box-shadow: none; transition: background-color 0.2s ease; }
.svd-niche .svd-dl:hover { background: var(--accent-color, #c8372d); box-shadow: none; }
.svd-niche .svd-dl--audio { background: #374151; }
.svd-niche .svd-dl--audio:hover { background: #1f2937; }
.svd-niche .svd-paste { background: #f1f3f5; color: var(--primary-color, #e65f2b); }
.svd-niche .svd-cat,
.svd-niche .svd-card__source { color: var(--primary-color, #e65f2b); background: #fdf1ec; }

@media (max-width: 640px) {
	.svd-steps { grid-template-columns: 1fr; }
}