/* ==========================================================================
   BỆNH VIỆN ĐA KHOA PHÚC AN — Design System
   Signature motif: the "vital line" (EKG pulse) — used as section dividers,
   in the hero, and as the accent on stat counters. It is the one recurring
   idea a hospital brand can own without irony: a sign of life, watched over.
   ========================================================================== */

:root{
  --c-primary: #02A74F;
  --c-primary-dark: #027A3B;
  --c-primary-tint: #E3F5EA;
  --c-bg: #F5FBF7;
  --c-white: #FFFFFF;
  --c-text: #1F2937;
  --c-text-muted: #5B6B63;
  --c-border: #D8ECE0;
  --c-urgent: #D14343;
  --c-urgent-tint: #FBE9E9;

  --font-display: 'Roboto', 'Segoe UI', sans-serif;
  --font-body: 'Roboto', 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 8px rgba(2,54,26,0.06);
  --shadow-md: 0 8px 28px rgba(2,54,26,0.10);
  --shadow-lg: 0 20px 48px rgba(2,54,26,0.14);

  --container: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing: -0.01em;
}
p{ margin:0 0 1em; }
.container{ max-width: var(--container); margin:0 auto; padding: 0 24px; }

:focus-visible{ outline: 3px solid var(--c-primary-dark); outline-offset: 2px; }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--c-primary-dark);
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:22px; height:2px; background: var(--c-primary); border-radius:2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight:700; font-size:15px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn-primary{ background: var(--c-primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--c-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline{ background:transparent; border-color: var(--c-white); color:var(--c-white); }
.btn-outline:hover{ background: rgba(255,255,255,.14); transform: translateY(-2px); }
.btn-ghost{ background: var(--c-primary-tint); color: var(--c-primary-dark); }
.btn-ghost:hover{ background:#d3f0dd; }
.btn-sm{ padding:10px 18px; font-size:14px; }

/* ---------- Image slots: drop a real photo into any placeholder ----------
   Every icon-placeholder box below can host a real photo: add an <img class="real-photo">
   as the first child pointing at the real file. If the file is missing, onerror removes it
   and the icon placeholder shows through unaffected. ------------------------------------- */
.real-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:5; }
.card-media, .sd-media, .gallery-item, .video-card, .pkg-media, .intro-media, .avatar{
  position:relative; overflow:hidden;
}
.hero-art, .page-hero{ position:relative; }
.hero-bg-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.28; mix-blend-mode:luminosity; }
.hero .container, .page-hero .container{ position:relative; z-index:1; }

/* ---------- Promo banner slider (full-bright, no dimming, standalone) ---------- */
.promo-slider{ position:relative; width:100%; aspect-ratio: 3/1; background: var(--c-primary-tint); overflow:hidden; }
.promo-slide{ position:absolute; inset:0; opacity:0; transform: scale(1.04); transition: opacity 1.3s ease, transform 5s ease; z-index:1; }
.promo-slide.active{ opacity:1; transform: scale(1); z-index:2; }
.promo-slide a{ display:block; width:100%; height:100%; }
.promo-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 640px){ .promo-slide img{ object-fit:contain; background:var(--c-primary-tint); } }

.site-header{ position: fixed; top:0; left:0; right:0; width:100%; z-index: 100; }
body{ padding-top: 108px; }
section[id]{ scroll-margin-top: 108px; }

.topbar{
  background: linear-gradient(90deg, var(--c-primary-tint) 0%, #ffffff 60%);
  border-bottom: 1px solid var(--c-border);
}
.topbar-row{ display:flex; align-items:center; justify-content:flex-end; gap:24px; height:40px; padding:0; }
.topbar-contact{ display:flex; align-items:center; gap:22px; margin-right:auto; }
.topbar-contact a{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color: var(--c-primary-dark); }
.topbar-contact svg{ width:14px; height:14px; }

.header-main{ background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); }
.header-top{ display:flex; align-items:center; justify-content:space-between; gap: 24px; height:68px; padding:0; }

.brand{ display:flex; align-items:center; }
.brand-logo{ height:38px; width:auto; display:block; }

.main-nav{ display:flex; align-items:center; gap: 0; }
.main-nav a{
  padding: 9px 10px; border-radius:999px; font-size:13.5px; font-weight:500; color: var(--c-text);
  transition: background .15s ease, color .15s ease; white-space:nowrap;
}
.main-nav a:hover, .main-nav a.active{ background: var(--c-primary-tint); color: var(--c-primary-dark); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.btn-arrow{ gap:10px; }
.btn-arrow svg{ width:15px; height:15px; transition: transform .15s ease; }
.btn-arrow:hover svg{ transform: translateX(3px); }

.menu-toggle{
  display:none; background:none; border:none; width:40px; height:40px; border-radius:10px;
  align-items:center; justify-content:center;
}
.menu-toggle:hover{ background: var(--c-primary-tint); }

@media (max-width: 1024px){
  .topbar-contact a span{ display:none; }
  .brand-logo{ height:30px; }
  .topbar-row{ height:36px; }
  .header-top{ height:56px; }
  body{ padding-top: 92px; }
  section[id]{ scroll-margin-top: 92px; }
}
@media (max-width: 640px){
  .topbar-row{ justify-content:space-between; }
  .topbar-contact{ margin-right:0; gap:14px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--c-primary-dark) 0%, var(--c-primary) 62%, #04c161 100%);
  color:#fff; padding: 92px 0 120px;
}
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; background: rgba(255,255,255,.14); padding:8px 16px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.04em; margin-bottom:22px; }
.hero-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:#fff; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.3);} }
.hero h1{ font-size: clamp(32px, 4vw, 48px); margin-bottom:18px; }
.hero p.lead{ font-size:18px; opacity:.92; max-width:520px; margin-bottom:32px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-vitalline{ width:100%; height:auto; opacity:.5; }
.hero-art{ position:relative; }
.hero-quickfacts{
  position:absolute; left:-20px; bottom:-46px; background:#fff; color:var(--c-text);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding:18px 22px;
  display:flex; gap:22px;
}
.hero-quickfacts .fact b{ display:block; font-family:var(--font-display); font-size:22px; color:var(--c-primary-dark); }
.hero-quickfacts .fact span{ font-size:12.5px; color:var(--c-text-muted); }

/* ---------- Vital divider ---------- */
.vital-divider{ display:block; width:100%; height:34px; margin: 0 0 8px; }
.vital-divider path{ fill:none; stroke: var(--c-primary); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }

/* ---------- Quick info strip ---------- */
.quickstrip{ background:#fff; margin-top:-64px; position:relative; z-index:3; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.quickstrip.quickstrip-flat{ margin-top:0; border-radius:0; box-shadow:none; border-bottom:1px solid var(--c-border); }
.quickstrip .container{ display:grid; grid-template-columns: repeat(4,1fr); }
.quickstrip-item{ display:flex; gap:14px; align-items:flex-start; padding: 26px 22px; border-right:1px solid var(--c-border); }
.quickstrip-item:last-child{ border-right:none; }
.quickstrip-item .ic{ width:42px; height:42px; border-radius:10px; background:var(--c-primary-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.quickstrip-item .ic svg{ width:22px; height:22px; color: var(--c-primary-dark); }
.quickstrip-item h4{ font-size:15px; margin-bottom:2px; }
.quickstrip-item p{ font-size:13.5px; color: var(--c-text-muted); margin:0; }
.quickstrip-item.urgent .ic{ background: var(--c-urgent-tint); }
.quickstrip-item.urgent .ic svg{ color: var(--c-urgent); }

/* ---------- Section shell ---------- */
section{ padding: 88px 0; }
.section-head{ max-width:680px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(26px, 3vw, 34px); }
.section-head p{ color: var(--c-text-muted); font-size:16.5px; }
.bg-tint{ background: var(--c-primary-tint); }
.bg-dark{ background: var(--c-primary-dark); color:#fff; }
.bg-dark .section-head p{ color: rgba(255,255,255,.8); }

/* ---------- Intro / values ---------- */
.intro-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.value-list{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:24px; }
.value-chip{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--c-border); border-radius:12px; padding:14px 16px; font-weight:700; font-size:14.5px; }
.value-chip svg{ width:18px; height:18px; color:var(--c-primary); flex-shrink:0; }
.intro-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; background: var(--c-primary-tint); aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; }

/* ---------- Stat counters ---------- */
.stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background: rgba(255,255,255,.18); border-radius: var(--radius-lg); overflow:hidden; }
.stat{ background: var(--c-primary-dark); padding:34px 20px; text-align:center; }
.stat b{ font-family:var(--font-display); font-size: clamp(28px,3vw,38px); display:block; }
.stat span{ font-size:13.5px; opacity:.85; }

/* ---------- Card grids ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }

.card{
  background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-md);
  overflow:hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-media{ aspect-ratio: 16/10; background: var(--c-primary-tint); display:flex; align-items:center; justify-content:center; color: var(--c-primary); }
.card-media svg{ width:44px; height:44px; }
.card-body{ padding:20px 22px 22px; }
.card-body h3{ font-size:17px; margin-bottom:8px; }
.card-body p{ font-size:14px; color: var(--c-text-muted); margin-bottom:14px; }
.card-link{ font-weight:700; font-size:14px; color: var(--c-primary-dark); display:inline-flex; align-items:center; gap:6px; }
.card-link svg{ width:14px; height:14px; transition: transform .15s ease; }
.card:hover .card-link svg{ transform: translateX(3px); }

/* Doctor card */
.doctor-card{ text-align:center; }
.avatar-ring{
  width:104px; height:104px; margin:0 auto 14px; border-radius:50%;
  background: conic-gradient(var(--c-primary), var(--c-primary-tint), var(--c-primary));
  padding:4px; display:flex; align-items:center; justify-content:center;
}
.avatar-ring .avatar{
  width:100%; height:100%; border-radius:50%; background: var(--c-primary-tint);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:900; font-size:26px; color: var(--c-primary-dark);
}
.doctor-card .role{ font-size:13px; color: var(--c-text-muted); margin-bottom:2px; }
.doctor-card .specialty{ display:inline-block; background: var(--c-primary-tint); color: var(--c-primary-dark); font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; margin-bottom:10px; }

/* ---------- Process ---------- */
.process-rail{ position:relative; display:grid; grid-template-columns: repeat(6,1fr); gap:18px; }
.process-rail::before{
  content:""; position:absolute; top:23px; left:6%; right:6%; height:2px;
  background: repeating-linear-gradient(90deg, var(--c-primary) 0 8px, transparent 8px 16px);
}
.process-step{ position:relative; text-align:center; }
.process-step .num{
  width:46px; height:46px; border-radius:50%; background:#fff; border:2px solid var(--c-primary);
  color:var(--c-primary-dark); font-family:var(--font-display); font-weight:900; font-size:17px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; position:relative; z-index:2;
}
.process-step h4{ font-size:14.5px; }

/* ---------- Booking form ---------- */
.booking-wrap{ display:grid; grid-template-columns: .95fr 1.05fr; gap:48px; align-items:flex-start; }
.booking-side h2{ font-size: clamp(26px,3vw,32px); }
.booking-perks{ margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.perk{ display:flex; gap:12px; align-items:flex-start; }
.perk .ic{ width:34px; height:34px; border-radius:9px; background:var(--c-primary-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.perk .ic svg{ width:18px; height:18px; color:var(--c-primary-dark); }
.perk h4{ font-size:14.5px; margin-bottom:2px; }
.perk p{ font-size:13.5px; color:var(--c-text-muted); margin:0; }

.booking-form{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding:36px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.field .req{ color: var(--c-urgent); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--c-border); border-radius:10px;
  font-family:inherit; font-size:14.5px; background: var(--c-bg); color:var(--c-text);
  transition: border-color .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--c-primary); background:#fff; }
.field textarea{ resize:vertical; min-height:88px; }
.form-note{ font-size:12.5px; color: var(--c-text-muted); margin-top:6px; }
.form-success{
  display:none; background: var(--c-primary-tint); border:1.5px solid var(--c-primary); color:var(--c-primary-dark);
  border-radius: var(--radius-md); padding:20px; align-items:flex-start; gap:12px; margin-bottom:20px;
}
.form-success.show{ display:flex; }
.form-success svg{ width:22px; height:22px; flex-shrink:0; margin-top:2px; }

/* ---------- News ---------- */
.news-card .tag{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--c-primary-dark); }
.news-card .date{ font-size:12.5px; color: var(--c-text-muted); }
.news-card h3{ font-size:16.5px; }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap:14px; }
.gallery-grid .g1{ grid-column: span 2; grid-row: span 2; }
.gallery-item{ border-radius:14px; background: var(--c-primary-tint); display:flex; align-items:center; justify-content:center; color:var(--c-primary); overflow:hidden; }
.gallery-item svg{ width:30px; height:30px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; }
.contact-card{ background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-md); padding:20px 22px; display:flex; gap:14px; margin-bottom:14px; }
.contact-card-highlight{ border:2px solid #0084FF; background: linear-gradient(90deg, rgba(0,132,255,.06), #fff 60%); box-shadow: 0 6px 20px rgba(0,132,255,.12); }
.ic-img{ background:transparent !important; overflow:hidden; }
.ic-img img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }
.contact-card .ic{ width:40px; height:40px; border-radius:10px; background:var(--c-primary-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-card .ic svg{ width:20px; height:20px; color:var(--c-primary-dark); }
.map-embed{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:4/3; background: var(--c-primary-tint); }
.map-embed iframe{ width:100%; height:100%; display:block; }

/* ---------- FAQ ---------- */
.faq-item{ background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-md); margin-bottom:12px; overflow:hidden; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; font-weight:700; font-size:15px; }
.faq-q svg{ width:18px; height:18px; flex-shrink:0; transition: transform .2s ease; color: var(--c-primary-dark); }
.faq-item.open .faq-q svg{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-a p{ padding: 0 22px 20px; color: var(--c-text-muted); font-size:14.5px; margin:0; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:13.5px; color: var(--c-text-muted); margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap; }
.breadcrumb a{ color: var(--c-primary-dark); font-weight:500; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ background: linear-gradient(160deg, var(--c-primary-dark), var(--c-primary)); color:#fff; padding: 56px 0 70px; }
.page-hero h1{ font-size: clamp(28px,3.4vw,40px); margin-bottom:10px; }
.page-hero p{ opacity:.9; max-width:560px; font-size:16px; margin:0; }

/* ---------- Filters ---------- */
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
.filter-bar select, .filter-bar input[type="search"]{
  padding:11px 16px; border-radius:999px; border:1.5px solid var(--c-border); background:#fff; font-family:inherit; font-size:14px;
}
.filter-bar input[type="search"]{ flex:1; min-width:200px; }

/* ---------- Doctor detail ---------- */
.doctor-detail{ display:grid; grid-template-columns: 320px 1fr; gap:44px; }
.doctor-profile-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding:28px; text-align:center; position:sticky; top:100px; }
.doctor-profile-card .avatar-ring{ width:130px; height:130px; }
.doctor-profile-card .avatar-ring .avatar{ font-size:32px; }
.doctor-detail-body h2{ font-size:24px; }
.detail-block{ margin-bottom:32px; }
.detail-block h3{ font-size:18px; border-bottom:2px solid var(--c-border); padding-bottom:10px; margin-bottom:14px; }
.timeline-item{ display:flex; gap:14px; margin-bottom:14px; }
.timeline-item .yr{ font-weight:700; color:var(--c-primary-dark); min-width:70px; }
.schedule-table{ width:100%; border-collapse: collapse; }
.schedule-table th, .schedule-table td{ padding:10px 12px; border:1px solid var(--c-border); text-align:center; font-size:13.5px; }
.schedule-table th{ background: var(--c-primary-tint); }

/* ---------- Floating CTA bar ---------- */
.floating-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:#fff; border-top:1px solid var(--c-border); box-shadow: 0 -6px 20px rgba(2,54,26,.08);
  display:none;
}
.floating-cta .row{ display:grid; grid-template-columns: repeat(4,1fr); }
.floating-cta a{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; font-size:11.5px; font-weight:700; color:var(--c-text); }
.floating-cta a svg{ width:20px; height:20px; color: var(--c-primary-dark); }
.floating-cta a.primary{ color: var(--c-primary-dark); }

/* ---------- Footer ---------- */
.site-footer{ background: #0E2A1B; color: rgba(255,255,255,.82); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap:32px; margin-bottom:44px; }
.footer-grid h4{ color:#fff; font-size:14.5px; margin-bottom:16px; }
.footer-grid ul li{ margin-bottom:10px; font-size:14px; }
.footer-grid ul li a:hover{ color:#fff; }
.footer-logo-chip{ display:inline-flex; align-items:center; background:#fff; padding:8px 14px; border-radius:10px; margin-bottom:16px; }
.footer-brand p{ font-size:14px; color: rgba(255,255,255,.65); max-width:280px; }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.social-row svg{ width:16px; height:16px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color: rgba(255,255,255,.55); }

/* ---------- Service overview strip (icon row) ---------- */
.service-strip{ display:grid; grid-template-columns: repeat(5,1fr); gap:20px; }
.service-strip-item{ text-align:center; padding:40px 18px 30px; border-radius: var(--radius-md); background:#F2F6F4; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.service-strip-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); background:#fff; }
.service-strip-item .ic{ width:72px; height:72px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; }
.service-strip-item .ic svg{ width:64px; height:64px; color: var(--c-primary-dark); }
.service-strip-item h4{ font-size:14.5px; font-weight:700; margin:0; color: var(--c-text); }

/* ---------- Package carousel ---------- */
.pkg-scroll{ display:flex; gap:20px; overflow-x:auto; padding-bottom:12px; scroll-snap-type:x mandatory; }
.pkg-scroll::-webkit-scrollbar{ height:6px; }
.pkg-scroll::-webkit-scrollbar-thumb{ background: var(--c-border); border-radius:6px; }
.pkg-card{ flex:0 0 260px; scroll-snap-align:start; background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-md); overflow:hidden; }
.pkg-card .pkg-media{ aspect-ratio:4/3; background: linear-gradient(150deg, var(--c-primary-tint), #fff); display:flex; align-items:center; justify-content:center; color:var(--c-primary); }
.pkg-card .pkg-media svg{ width:40px; height:40px; }
.pkg-card-body{ padding:16px 18px 20px; }
.pkg-card-body h4{ font-size:15px; margin-bottom:6px; }
.pkg-card-body p{ font-size:13px; color:var(--c-text-muted); margin-bottom:12px; min-height:36px; }

/* ---------- Specialty deep-dive (alternating photo + text) ---------- */
.specialty-deep{ display:grid; grid-template-columns: 1fr 1fr; gap:52px; align-items:center; padding: 52px 0; border-bottom:1px solid var(--c-border); }
.specialty-deep:last-child{ border-bottom:none; }
.specialty-deep.reverse .sd-media{ order:2; }
.sd-media{ aspect-ratio:4/3; border-radius: var(--radius-lg); background: var(--c-primary-tint); display:flex; align-items:center; justify-content:center; color:var(--c-primary); }
.sd-media svg{ width:64px; height:64px; }
.sd-text .eyebrow{ margin-bottom:10px; }
.sd-text h3{ font-size:24px; margin-bottom:12px; }
.sd-text p{ color:var(--c-text-muted); }

/* ---------- Improvements / news-highlight cards ---------- */
.improve-card{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:16/10; background: linear-gradient(160deg, var(--c-primary-dark), var(--c-primary)); display:flex; align-items:flex-end; padding:26px; color:#fff; }
.improve-card h3{ font-size:19px; margin-bottom:6px; }
.improve-card p{ font-size:13.5px; opacity:.88; margin:0; }

/* ---------- Video section ---------- */
.video-card{ position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio:16/9; background: var(--c-text); display:flex; align-items:center; justify-content:center; }
.video-card .play-btn{ width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; }
.video-card .play-btn svg{ width:20px; height:20px; color:var(--c-primary-dark); margin-left:3px; }
.video-card .dur{ position:absolute; bottom:10px; right:12px; background:rgba(0,0,0,.6); color:#fff; font-size:11.5px; padding:2px 8px; border-radius:6px; }
.video-title{ font-size:14px; font-weight:700; margin-top:10px; }

/* ---------- News layout with sidebar ---------- */
.news-layout{ display:grid; grid-template-columns: 2fr 1fr; gap:40px; }
.news-side{ background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-md); padding:22px; align-self:start; }
.news-side h4{ font-size:15px; margin-bottom:16px; }
.news-side-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--c-border); }
.news-side-item:last-child{ border-bottom:none; }
.news-side-item .n{ font-family:var(--font-display); font-weight:900; font-size:20px; color: var(--c-primary-tint); flex-shrink:0; }
.news-side-item h5{ font-size:13.5px; margin:0 0 4px; line-height:1.4; }
.news-side-item span{ font-size:11.5px; color:var(--c-text-muted); }

/* ---------- App promo band ---------- */
.app-promo{ display:flex; align-items:center; justify-content:space-between; gap:24px; background: rgba(255,255,255,.06); border-radius: var(--radius-md); padding:24px 28px; margin-top:36px; flex-wrap:wrap; }
.app-promo h4{ color:#fff; font-size:16px; margin-bottom:4px; }
.app-promo p{ color: rgba(255,255,255,.65); font-size:13.5px; margin:0; }
.app-qr{ width:64px; height:64px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.app-qr svg{ width:40px; height:40px; color:var(--c-text); }

/* ---------- Cookie consent banner ---------- */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:300; max-width:520px;
  background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding:22px 24px;
  display:none; border:1px solid var(--c-border);
}
.cookie-banner.show{ display:block; }
.cookie-banner p{ font-size:13.5px; color: var(--c-text-muted); margin-bottom:14px; }
.cookie-banner .row{ display:flex; gap:10px; }

/* ---------- Social chat bubble (Facebook Messenger) ---------- */
.social-bubbles{
  position:fixed; right:24px; bottom:24px; z-index:250;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.social-bubble{
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease;
}
.social-bubble:hover{ transform: scale(1.08); }
.social-bubble img{ width:100%; height:100%; object-fit:contain; display:block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.social-bubble-primary{ width:68px; height:68px; }
@media (max-width: 1024px){
  .social-bubbles{ bottom:80px; }
  .social-bubble-primary{ width:58px; height:58px; }
}

@media (max-width: 1024px){
  .service-strip{ grid-template-columns: repeat(2,1fr); }
  .specialty-deep, .specialty-deep.reverse{ grid-template-columns:1fr; }
  .specialty-deep.reverse .sd-media{ order:0; }
  .news-layout{ grid-template-columns:1fr; }
  .chat-bubble{ display:none; }
}
@media (max-width: 640px){
  .service-strip{ grid-template-columns: repeat(2,1fr); }
  .cookie-banner{ left:12px; right:12px; bottom:76px; }
}

/* ---------- 404 ---------- */
.notfound{ text-align:center; padding: 120px 0; }
.notfound .code{ font-family:var(--font-display); font-size:96px; font-weight:900; color: var(--c-primary); line-height:1; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .hero .container{ grid-template-columns: 1fr; }
  .hero-quickfacts{ position:static; margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); }
  .quickstrip{ margin-top:26px; }
  .quickstrip .container{ grid-template-columns: repeat(2,1fr); }
  .quickstrip-item{ border-right:none; border-bottom:1px solid var(--c-border); }
  .intro-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .stats-bar{ grid-template-columns: repeat(2,1fr); }
  .process-rail{ grid-template-columns: repeat(3,1fr); row-gap:32px; }
  .process-rail::before{ display:none; }
  .booking-wrap{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .doctor-detail{ grid-template-columns:1fr; }
  .doctor-profile-card{ position:static; }
  .footer-grid{ grid-template-columns: repeat(3,1fr); }
  .floating-cta{ display:block; }
  body{ padding-bottom:64px; }
}
@media (max-width: 640px){
  section{ padding: 56px 0; }
  .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .stats-bar{ grid-template-columns: repeat(2,1fr); }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:110px; }
  .gallery-grid .g1{ grid-column:span 2; grid-row:span 1; }
  .header-actions .hotline span{ display:none; }
}