/* ============================================================
   cho-phong-kham.css — landing riêng cho chủ phòng khám
   Kế thừa biến màu từ dcpk-custom.css (--pr-color, --pr-rgb, --primary-1)
   ============================================================ */

/* ---------- Hero B2B ---------- */
.owner-hero {
	background:
		radial-gradient(1100px 480px at 15% -10%, rgba(255,255,255,.16), transparent 60%),
		linear-gradient(120deg, #0a2f52 0%, #0d6ec8 55%, #12a08a 100%);
	position: relative;
	overflow: hidden;
	padding: 64px 0 56px;
}
.owner-hero::after{
	content:"";
	position:absolute; inset:0;
	background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	opacity:.35;
	pointer-events:none;
}
.owner-hero .container{ position:relative; z-index:1; }
.owner-hero .eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	background:rgba(255,255,255,.14);
	border:1px solid rgba(255,255,255,.28);
	color:#fff; font-size:13px; font-weight:600; letter-spacing:.3px;
	padding:6px 14px; border-radius:100px; margin-bottom:18px;
}
.owner-hero h1{ color:#fff; font-weight:800; line-height:1.15; text-shadow:0 2px 14px rgba(0,0,0,.18); }
.owner-hero .lead-text{ color:rgba(255,255,255,.92); font-size:17px; max-width:560px; }
.owner-hero .hero-stats{ display:flex; gap:28px; margin-top:28px; flex-wrap:wrap; }
.owner-hero .hero-stats .num{ color:#fff; font-weight:800; font-size:24px; line-height:1; }
.owner-hero .hero-stats .lbl{ color:rgba(255,255,255,.78); font-size:13px; }
.owner-hero .cta-row{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }
.owner-hero .btn-white{ background:#fff; color:var(--pr-color); border:none; font-weight:700; }
.owner-hero .btn-white:hover{ background:#eef4ff; color:var(--pr-color); }
.owner-hero .btn-ghost-white{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55); font-weight:600; }
.owner-hero .btn-ghost-white:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* preview mockup card floating in hero */
.owner-hero-preview{
	background:#fff; border-radius:16px; padding:14px;
	box-shadow:0 30px 60px rgba(6,20,40,.35);
	transform: rotate(1.2deg);
}
.owner-hero-preview .browser-bar{
	display:flex; align-items:center; gap:6px; padding:0 4px 10px;
}
.owner-hero-preview .browser-bar span{ width:9px; height:9px; border-radius:50%; background:#e3e7ee; display:inline-block; }
.owner-hero-preview .browser-bar .url{
	margin-left:8px; background:#f3f5f8; border-radius:100px; font-size:11px; color:#8a94a3;
	padding:4px 12px; flex:1;
}
.owner-hero-preview .preview-body{ border-radius:10px; overflow:hidden; }

/* ---------- Section eyebrow / heading kit ---------- */
.section-eyebrow{
	text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:1.2px;
	color:var(--pr-color); margin-bottom:8px; display:block;
}
.section-heading{ font-weight:800; margin-bottom:10px; }
.section-sub{ color:#6b7688; max-width:620px; }

/* ---------- Quy trình (timeline dạng đường nối) ---------- */
.owner-steps{ position:relative; }
.owner-steps .step-card{
	background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:22px 20px;
	height:100%; position:relative; transition:box-shadow .2s ease, transform .2s ease;
}
.owner-steps .step-card:hover{ box-shadow:0 14px 32px rgba(15,23,42,.08); transform:translateY(-3px); }
.owner-steps .step-num{
	width:38px; height:38px; border-radius:10px;
	background:var(--primary-1); color:var(--pr-color);
	display:flex; align-items:center; justify-content:center;
	font-weight:800; font-size:15px; margin-bottom:14px;
}
.owner-steps .step-shot{
	border-radius:10px; border:1px solid #eef0f4; margin-top:14px; overflow:hidden; background:#f7f9fc;
}
.owner-steps .step-connector{
	display:none;
}
@media (min-width:992px){
	.owner-steps .col-lg-3:not(:last-child) .step-card::after{
		content:"";
		position:absolute; top:38px; right:-18px;
		width:36px; height:2px;
		background:repeating-linear-gradient(90deg, #d7deea 0 6px, transparent 6px 10px);
		z-index:2;
	}
}

/* ---------- Template gallery with filter ---------- */
.tmpl-filter{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.tmpl-filter .chip{
	border:1px solid #e3e7ee; background:#fff; color:#4b5666;
	padding:7px 16px; border-radius:100px; font-size:13.5px; font-weight:600;
	cursor:pointer; transition:.15s ease;
}
.tmpl-filter .chip:hover{ border-color:var(--pr-color); color:var(--pr-color); }
.tmpl-filter .chip.active{ background:var(--pr-color); border-color:var(--pr-color); color:#fff; }

.tmpl-card{
	border:1px solid #eef0f4; border-radius:14px; overflow:hidden; background:#fff;
	transition:box-shadow .2s ease, transform .2s ease;
}
.tmpl-card:hover{ box-shadow:0 16px 36px rgba(15,23,42,.1); transform:translateY(-3px); }
.tmpl-card .tmpl-thumb{ position:relative; overflow:hidden; }
.tmpl-card .tmpl-thumb img{ width:100%; height:170px; object-fit:cover; display:block; transition:transform .35s ease; }
.tmpl-card:hover .tmpl-thumb img{ transform:scale(1.06); }
.tmpl-card .tmpl-overlay{
	position:absolute; inset:0; background:rgba(10,20,35,.45);
	display:flex; align-items:center; justify-content:center; gap:8px;
	opacity:0; transition:opacity .2s ease;
}
.tmpl-card:hover .tmpl-overlay{ opacity:1; }
.tmpl-card .tmpl-badge{ position:absolute; top:10px; left:10px; z-index:2; }
.tmpl-card .tmpl-body{ padding:14px 16px; }

/* ---------- Pricing ---------- */
.pricing-card{
	border:1px solid #eef0f4; border-radius:16px; padding:28px 24px; height:100%;
	background:#fff; position:relative; overflow:hidden; transition:box-shadow .2s ease, transform .2s ease;
}
.pricing-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(15,23,42,.08); }
.pricing-card.featured{
	border:2px solid var(--pr-color);
	box-shadow:0 20px 46px rgba(var(--pr-rgb),.16);
}
.pricing-card .pricing-tag{
	position:absolute; top:16px; right:-38px; width:150px;
	background:var(--pr-color); color:#fff; font-size:12px; font-weight:700;
	padding:5px 0; text-align:center; letter-spacing:.3px;
	transform:rotate(45deg); box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.pricing-card .price{ font-weight:800; font-size:34px; color:#111827; margin:6px 0 2px; }
.pricing-card .price small{ font-size:14px; font-weight:600; color:#8a94a3; }
.pricing-card ul{ list-style:none; padding:0; margin:20px 0 0; }
.pricing-card ul li{ display:flex; gap:10px; padding:7px 0; font-size:14.5px; color:#374151; }
.pricing-card ul li i{ color:#20c997; margin-top:3px; }
.pricing-card ul li.disabled{ color:#b3bac6; }
.pricing-card ul li.disabled i{ color:#d5dae2; }

/* ---------- Trust / bảo mật band ---------- */
.trust-band{ background:#0a2f52; border-radius:18px; padding:36px 32px; color:#fff; }
.trust-band .trust-item{ display:flex; gap:14px; }
.trust-band .trust-icon{
	width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,.12);
	display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px;
}
.trust-band h6{ color:#fff; margin-bottom:4px; }
.trust-band p{ color:rgba(255,255,255,.72); font-size:13.5px; margin:0; }

/* ---------- Lead capture strip ---------- */
.lead-strip{
	background: linear-gradient(120deg, #0d6ec8, #12a08a);
	border-radius:20px; padding:40px; color:#fff;
}
.lead-strip h3{ color:#fff; font-weight:800; }
.lead-strip .form-control{ border:none; height:46px; }
.lead-strip .btn-white{ background:#fff; color:var(--pr-color); font-weight:700; height:46px; }

/* ---------- Testimonial ---------- */
.owner-quote{
	border-left:3px solid var(--pr-color); padding-left:18px; font-size:16px; color:#374151;
}
.owner-quote .who{ font-size:13.5px; color:#8a94a3; margin-top:10px; }

@media (max-width: 767px){
	.owner-hero{ padding:44px 0 40px; text-align:center; }
	.owner-hero .lead-text{ margin:0 auto; }
	.owner-hero .hero-stats{ justify-content:center; }
	.owner-hero .cta-row{ justify-content:center; }
	.owner-hero-preview{ margin-top:30px; transform:none; }
}