/* Top 5 doctors SEO pages */
.dd-top5-shell {
	--dd-blue: #1a7fc4;
	--dd-mint: #09e5ab;
	--dd-mint-dark: #09dca4;
	--dd-cyan: #20c0f3;
	--dd-text: #272b41;
	--dd-muted: #64748b;
	--dd-bg: #f0f7fb;
	--dd-card: #fff;
	--dd-border: rgba(21, 85, 141, 0.12);
	background: var(--dd-bg);
}
.dd-top5-shell .breadcrumb-bar {
	background: linear-gradient(135deg, #0f3a5f 0%, #15558d 55%, #1a6aa8 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 28px rgba(15, 58, 95, 0.18);
	margin-bottom: 0;
	padding: 14px 0 16px;
}
.dd-top5-shell .breadcrumb-bar .breadcrumb-title {
	color: #ffffff;
	font-size: 1.35rem;
	font-weight: 800;
	margin-top: 12px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.dd-top5-shell .page-breadcrumb ol {
	background: transparent;
	margin: 0;
}
.dd-top5-shell .page-breadcrumb ol li a {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
}
.dd-top5-shell .page-breadcrumb ol li a:hover {
	color: #ffffff;
	text-decoration: underline;
}
.dd-top5-shell .page-breadcrumb ol li.active {
	color: #b8f0ff;
	font-weight: 600;
}
.dd-top5-shell .page-breadcrumb .breadcrumb-item + .breadcrumb-item:before {
	color: rgba(255, 255, 255, 0.65);
}

/* Featured paid-listing tooltip (chip + tag) */
.dd-feat-tip {
	position: relative;
	cursor: help;
	z-index: 4;
}
.dd-feat-tip__box {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 30;
	width: 268px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #ffffff;
	color: #475569;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	white-space: normal;
	border: 1px solid rgba(32, 192, 243, 0.35);
	box-shadow: 0 12px 28px rgba(26, 127, 196, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
	pointer-events: none;
}
.dd-feat-tip__box::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 18px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid rgba(32, 192, 243, 0.35);
	border-top: 1px solid rgba(32, 192, 243, 0.35);
	transform: rotate(45deg);
}
.dd-feat-tip:hover .dd-feat-tip__box,
.dd-feat-tip:focus .dd-feat-tip__box,
.dd-feat-tip:focus-within .dd-feat-tip__box {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
		.dd-top5-hero {
			position: relative;
			padding: 36px 0 28px;
			background:
				radial-gradient(ellipse 80% 60% at 10% 0%, rgba(32,192,243,.18), transparent 55%),
				radial-gradient(ellipse 70% 50% at 90% 20%, rgba(9,229,171,.16), transparent 50%),
				linear-gradient(180deg, #e8f4fb 0%, var(--dd-bg) 100%);
			overflow: hidden;
		}
		.dd-top5-hero::before {
			content: "";
			position: absolute; inset: 0;
			background-image: linear-gradient(rgba(21,85,141,.04) 1px, transparent 1px),
				linear-gradient(90deg, rgba(21,85,141,.04) 1px, transparent 1px);
			background-size: 28px 28px;
			pointer-events: none;
		}
		.container-pad { width: min(1120px, 92%); margin: 0 auto; position: relative; }
		.dd-pill {
			display: inline-flex; align-items: center; gap: 6px;
			background: #f1f5f9; color: var(--dd-blue);
			border-radius: 999px; padding: 6px 12px;
			font-size: 11px; font-weight: 700; letter-spacing: .04em;
			text-transform: uppercase;
		}
		.dd-pill i { color: #0d9488; }
		.dd-top5-hero h1 {
			margin: 12px 0 10px;
			font-size: clamp(1.75rem, 4vw, 2.375rem);
			font-weight: 800;
			color: #15558d;
			line-height: 1.2;
			letter-spacing: -0.01em;
		}
		.dd-top5-hero h1 em {
			font-style: normal;
			font-weight: 800;
			background-image: linear-gradient(90deg, #1a7fc4 0%, #20c0f3 50%, #6574e2 100%);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			color: #20c0f3;
		}
		.dd-top5-hero p { margin: 0; color: var(--dd-muted); max-width: 540px; font-size: 14px; line-height: 1.55; }
		.dd-top5-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
		.dd-badge {
			display: inline-flex; align-items: center; gap: 6px;
			background: rgba(9,229,171,.12);
			border: 1px solid rgba(9,229,171,.32);
			border-radius: 999px; padding: 6px 12px;
			font-size: 12px; font-weight: 600; color: #0f766e;
		}
		.dd-badge--soft {
			background: rgba(21,85,141,.06);
			border-color: rgba(21,85,141,.14);
			color: var(--dd-blue);
		}
		.dd-crumb {
			padding: 12px 0 0;
			font-size: 13px; color: var(--dd-muted);
			margin-bottom: 18px;
		}
		.dd-crumb a { font-weight: 600; }
		.dd-top5-hero .dd-pill {
			margin-top: 4px;
		}
		.dd-top5-hub { padding: 8px 0 56px; }
		.dd-state {
			background: var(--dd-card);
			border: 1px solid var(--dd-border);
			border-radius: 18px;
			box-shadow: 0 10px 28px rgba(15,58,95,.05);
			margin-bottom: 18px;
			overflow: hidden;
		}
		.dd-state__head {
			display: flex; align-items: center; justify-content: space-between;
			gap: 12px; padding: 16px 18px;
			background: linear-gradient(90deg, rgba(21,85,141,.06), transparent);
			border-bottom: 1px solid var(--dd-border);
			cursor: pointer; user-select: none;
		}
		.dd-state__head h2 {
			margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--dd-blue);
			display: flex; align-items: center; gap: 10px;
		}
		.dd-state__head h2 i {
			width: 34px; height: 34px; border-radius: 10px;
			display: grid; place-items: center;
			background: rgba(9,229,171,.15); color: #0d9488; font-size: 14px;
		}
		.dd-state__count { font-size: 12px; font-weight: 600; color: var(--dd-muted); }
		.dd-state__body { padding: 8px 12px 16px; }
		.dd-city { margin: 10px 6px; }
		.dd-city__title {
			display: flex; align-items: center; justify-content: space-between;
			gap: 8px; margin: 0 0 10px; padding: 4px 6px;
			font-size: 14px; font-weight: 700; color: #1a7fc4;
		}
		.dd-city__title span { color: var(--dd-muted); font-weight: 600; font-size: 12px; }
		.dd-spec-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
			gap: 10px;
		}
		.dd-spec-link {
			display: flex; align-items: center; gap: 12px;
			padding: 12px 14px;
			background: #f8fafc;
			border: 1px solid var(--dd-border);
			border-radius: 14px;
			transition: border-color .15s, box-shadow .15s, transform .15s;
			color: inherit;
		}
		.dd-spec-link:hover {
			border-color: rgba(9,229,171,.45);
			box-shadow: 0 8px 20px rgba(15,58,95,.08);
			transform: translateY(-1px);
			color: inherit; text-decoration: none;
		}
		.dd-spec-link__rank {
			flex: 0 0 auto;
			width: 40px; height: 40px; border-radius: 12px;
			display: grid; place-items: center;
			background: linear-gradient(135deg, #20c0f3, #09e5ab);
			color: #fff; font-weight: 800; font-size: 12px;
		}
		.dd-spec-link__text { min-width: 0; flex: 1; }
		.dd-spec-link__text strong {
			display: block; font-size: 13px; color: var(--dd-blue);
			white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		}
		.dd-spec-link__text small {
			display: block; margin-top: 2px; color: var(--dd-muted); font-size: 11px;
		}
		.dd-spec-link__arrow { color: #94a3b8; font-size: 12px; }
		.dd-top5-page { padding-bottom: 56px; }
		.dd-featured {
			display: grid;
			grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
			gap: 0;
			background: #fff;
			border: 1px solid var(--dd-border);
			border-radius: 20px;
			overflow: visible;
			box-shadow: 0 14px 36px rgba(15,58,95,.08);
			margin: -8px 0 28px;
		}
		.dd-featured__media {
			position: relative;
			min-height: 260px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: visible;
			border-radius: 20px 0 0 20px;
			background: linear-gradient(145deg, #e8f4fb 0%, #d8f5ee 55%, #cfe8f8 100%);
		}
		.dd-featured__avatar {
			width: 140px; height: 140px; border-radius: 50%;
			display: grid; place-items: center;
			font-size: 3rem; font-weight: 800; color: #fff;
			background: linear-gradient(145deg, #4ec8f5, #20c0f3);
			box-shadow: 0 12px 28px rgba(32, 192, 243, .28);
			border: 4px solid rgba(255,255,255,.85);
			overflow: hidden;
		}
		.dd-featured__avatar a,
		.dd-featured__avatar img {
			width: 100%; height: 100%;
			display: grid; place-items: center;
			color: #fff; text-decoration: none;
			object-fit: cover; border-radius: 50%;
		}
		.dd-featured__avatar .doctor-avatar-initial {
			font-size: 3rem; font-weight: 800; color: #fff;
		}
		.dd-featured__chip {
			position: absolute; z-index: 5; top: 16px; left: 16px;
			display: inline-flex; align-items: center; gap: 6px;
			background: rgba(255,255,255,.95);
			border-radius: 999px; padding: 7px 12px;
			font-size: 11px; font-weight: 700; color: #0d9488;
			box-shadow: 0 4px 14px rgba(0,0,0,.12);
		}
		.dd-featured__chip i { color: #f59e0b; }
		.dd-featured__body {
			padding: 22px 24px;
			display: flex; flex-direction: column; justify-content: center;
		}
		.dd-featured__kicker {
			font-size: 12px; font-weight: 700; color: #0d9488;
			text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
		}
		.dd-featured__body h2 {
			margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--dd-blue);
		}
		.dd-featured__spec { margin: 0 0 10px; color: var(--dd-muted); font-size: 14px; }
		.dd-featured__meta {
			display: flex; flex-wrap: wrap; gap: 10px 16px;
			margin: 0 0 16px; font-size: 13px; color: #475569;
		}
		.dd-featured__meta i { color: #0d9488; margin-right: 4px; }
		.dd-featured__actions { display: flex; flex-wrap: wrap; gap: 10px; }
		.btn-dd {
			display: inline-flex; align-items: center; gap: 8px;
			border-radius: 999px; padding: 10px 18px;
			font-size: 13px; font-weight: 700; border: none; cursor: pointer;
		}
		.btn-dd-primary { background: var(--dd-mint); color: #0f5f4a; }
		.btn-dd-primary:hover { background: var(--dd-mint-dark); color: #0f5f4a; }
		.btn-dd-ghost {
			background: rgba(21,85,141,.06); color: var(--dd-blue);
			border: 1px solid var(--dd-border);
		}
		.dd-rank-list { display: grid; gap: 14px; }
		.dd-rank-card {
			position: relative;
			overflow: visible;
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			gap: 16px; align-items: start;
			background: #fff;
			border: 1px solid var(--dd-border);
			border-radius: 16px;
			padding: 18px 18px 16px;
			box-shadow: 0 6px 18px rgba(15,58,95,.04);
			transition: border-color .15s, box-shadow .15s;
		}
		.dd-rank-card:hover {
			border-color: rgba(9,229,171,.4);
			box-shadow: 0 10px 24px rgba(15,58,95,.08);
		}
		.dd-rank-card.is-featured {
			border-color: rgba(9,229,171,.4);
			box-shadow: 0 10px 28px rgba(15,58,95,.08);
			background: linear-gradient(180deg, rgba(9,229,171,.06), #fff 48%);
		}
		.dd-rank-card__avatar {
			width: 64px; height: 64px; border-radius: 50%;
			display: grid; place-items: center;
			font-size: 1.15rem; font-weight: 800; color: #fff;
			flex: 0 0 auto; border: 3px solid #e2e8f0;
			background: linear-gradient(145deg, #4ec8f5, #20c0f3);
			overflow: hidden;
		}
		.dd-rank-card__avatar a,
		.dd-rank-card__avatar img {
			width: 100%; height: 100%;
			display: grid; place-items: center;
			color: #fff; text-decoration: none;
			object-fit: cover; border-radius: 50%;
		}
		.dd-rank-card__avatar .doctor-avatar-initial {
			font-size: 1.15rem; font-weight: 800; color: #fff;
		}
		.dd-rank-card__info { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
		.dd-rank-card__info h3 {
			margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--dd-blue);
		}
		.dd-rank-card__info h3 .gender {
			font-weight: 500; color: var(--dd-muted); font-size: 13px;
		}
		.dd-rank-card__degree {
			margin: 0 0 4px; font-size: 13px; color: #475569; font-weight: 500;
		}
		.dd-rank-card__spec {
			margin: 0 0 10px; font-size: 13px; color: #0d9488; font-weight: 600;
		}
		.dd-rank-card__spec i { margin-right: 4px; }
		.dd-rank-card__details {
			display: grid; gap: 5px;
			font-size: 13px; color: #475569;
		}
		.dd-rank-card__details p { margin: 0; line-height: 1.4; }
		.dd-rank-card__details i {
			width: 16px; color: #0d9488; margin-right: 6px; text-align: center;
		}
		.dd-rank-card__details a { color: #475569; font-weight: 500; }
		.dd-rank-card__details a:hover { color: var(--dd-mint-dark); }
		.dd-rank-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
		.dd-tag {
			font-size: 10px; font-weight: 700; text-transform: uppercase;
			letter-spacing: .03em; padding: 3px 8px; border-radius: 999px;
			background: #f1f5f9; color: #475569;
		}
		.dd-tag--feat { background: rgba(245,158,11,.15); color: #b45309; }
		.dd-rank-card__cta {
			display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
			min-width: 140px;
		}
		.dd-rank-card__cta .btn-dd { padding: 8px 14px; font-size: 12px; width: 100%; justify-content: center; }
		.dd-fee { font-size: 15px; font-weight: 700; color: var(--dd-blue); white-space: nowrap; text-align: right; }
		.dd-fee small { display: block; font-weight: 500; color: var(--dd-muted); font-size: 10px; }
		.dd-list-head {
			display: flex; align-items: baseline; justify-content: space-between;
			gap: 12px; flex-wrap: wrap;
			margin: 0 0 14px;
		}
		.dd-list-head h2 {
			margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--dd-blue);
		}
		.dd-list-head p { margin: 0; font-size: 13px; color: var(--dd-muted); }
		.dd-seo-intro {
			background: #fff;
			border: 1px solid var(--dd-border);
			border-radius: 16px;
			padding: 18px 20px;
			margin: 0 0 22px;
			font-size: 14px; line-height: 1.65; color: #475569;
		}
		.dd-seo-intro h2 {
			margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: var(--dd-blue);
		}
		.dd-seo-intro p { margin: 0 0 10px; }
		.dd-seo-intro p:last-child { margin-bottom: 0; }
		.dd-seo-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 14px;
			margin-top: 28px;
		}
		.dd-seo-block {
			background: #fff;
			border: 1px solid var(--dd-border);
			border-radius: 16px;
			padding: 18px 18px 14px;
		}
		.dd-seo-block h2 {
			margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--dd-blue);
			display: flex; align-items: center; gap: 8px;
		}
		.dd-seo-block h2 i { color: #0d9488; }
		.dd-seo-block p, .dd-seo-block li {
			font-size: 13px; line-height: 1.6; color: #475569; margin: 0 0 8px;
		}
		.dd-seo-block ul { margin: 0; padding-left: 18px; }
		.dd-seo-wide {
			margin-top: 14px;
			background: #fff;
			border: 1px solid var(--dd-border);
			border-radius: 16px;
			padding: 18px 20px;
		}
		.dd-seo-wide h2 {
			margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--dd-blue);
		}
		.dd-seo-wide p { margin: 0 0 10px; font-size: 13px; line-height: 1.65; color: #475569; }
		.dd-seo-wide p:last-child { margin-bottom: 0; }
		.dd-tips {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 12px;
			margin-top: 14px;
		}
		.dd-tip {
			background: #f8fafc;
			border: 1px solid var(--dd-border);
			border-radius: 14px;
			padding: 14px;
		}
		.dd-tip strong {
			display: block; margin-bottom: 6px;
			font-size: 13px; color: var(--dd-blue);
		}
		.dd-tip p { margin: 0; font-size: 12px; line-height: 1.55; color: #64748b; }
		.dd-faq { margin-top: 28px; }
		.dd-faq h2 {
			margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; color: var(--dd-blue);
		}
		.dd-faq details {
			background: #fff;
			border: 1px solid var(--dd-border);
			border-radius: 12px;
			padding: 12px 14px;
			margin-bottom: 8px;
		}
		.dd-faq summary {
			font-weight: 700; font-size: 14px; color: var(--dd-blue); cursor: pointer;
		}
		.dd-faq details p {
			margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: #475569;
		}
		.dd-seo-note {
			margin-top: 28px;
			padding: 16px 18px;
			background: #fff;
			border-left: 4px solid var(--dd-cyan);
			border-radius: 0 12px 12px 0;
			font-size: 13px; color: #475569; line-height: 1.55;
		}
		.dd-related { margin-top: 28px; }
		.dd-related h3 {
			font-size: 15px; font-weight: 800; color: var(--dd-blue); margin: 0 0 12px;
		}
		.dd-related__row { display: flex; flex-wrap: wrap; gap: 8px; }
		.dd-related__row a {
			padding: 8px 12px; border-radius: 999px;
			background: #fff; border: 1px solid var(--dd-border);
			font-size: 12px; font-weight: 600; color: #475569;
		}
		.dd-related__row a:hover { border-color: var(--dd-mint); color: var(--dd-blue); }
		.dd-featured__extra {
			display: grid; gap: 6px;
			margin: 0 0 14px;
			font-size: 13px; color: #475569;
		}
		.dd-featured__extra p { margin: 0; }
		.dd-featured__extra i { width: 16px; color: #0d9488; margin-right: 6px; }
		@media (max-width: 900px) {
			.dd-tips { grid-template-columns: 1fr; }
		}
		@media (max-width: 767px) {
			.dd-featured { grid-template-columns: 1fr; }
			.dd-featured__media { min-height: 180px; border-radius: 20px 20px 0 0; }
			.dd-seo-grid { grid-template-columns: 1fr; }
			.dd-rank-card {
				grid-template-columns: 1fr;
			}
			.dd-rank-card__cta {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-top: 4px;
				min-width: 0;
			}
			.dd-rank-card__cta .btn-dd { width: auto; }
			.dd-rank-card__avatar { width: 52px; height: 52px; }
			.dd-fee { text-align: left; }
		}