/* ==========================================================================
   Dermatology Clinic Premium CSS Style Sheet
   Designed with Luxury, Medical, & Premium Healthcare Aesthetics (2026 UX/UI)
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,800;1,700;1,800&display=swap');

/* CSS Variables */
:root {
  color-scheme: light;

  /* Color Palette - Updated to match green/gold Doctor logo */
  --primary: #15803D;          /* Premium Forest Green (Medical & Trustworthy) */
  --primary-hover: #166534;    /* Darker Forest Green */
  --secondary: #D97706;        /* Luxury Gold (Accent from logo text) */
  --secondary-light: #F0FDF4;  /* Light Green background for clean highlights */
  --accent: #EA580C;           /* Warm Orange (Accent from logo face) */
  --accent-light: #FEF3C7;     /* Soft Gold/Amber background */

  /* Premium gold shimmer - a true metallic gold family (not orange/amber)
     used for the clinic wordmark and the accent word inside headings. Kept
     as its own scale, distinct from --secondary, because that token reads
     too orange at display sizes. */
  --gold-deep: #8B6914;
  --gold-mid: #C9A227;
  --gold-bright: #E0B93C;
  --gold-shimmer: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-mid) 55%, var(--gold-bright) 100%);
  --bg-primary: #FFF;
  --bg-secondary: #F8FAFC;      /* Slate 50 */
  --text-primary: #0F172A;     /* Slate 900 */
  --text-secondary: #475569;   /* Slate 600 */
  --text-light: #94A3B8;       /* Slate 400 */
  --border: #E2E8F0;           /* Slate 200 */
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-bg-dark: rgba(15, 23, 42, 0.05);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.08);

  /* Shadows */
  --shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 24px -4px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 40px -8px rgba(15, 23, 42, 0.1);
  --shadow-primary: 0 10px 20px -5px rgba(21, 128, 61, 0.3);

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-round: 50%;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout Constraints */
  --max-width: 1280px;
  --header-height: 108px;  /* Taller to accommodate the enlarged logo lockup */
}

/* Base Styles & Resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Add explicit inheritance for links and form elements to prevent default browser serifs */
a, button, input, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: inherit;
  text-decoration: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);

  /* Evens out line lengths when a heading wraps, instead of leaving a
     single orphan word stranded alone on the last line. */
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  position: relative;
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

h4 {
  font-size: 1.1rem;
}

p {
  color: var(--text-secondary);
  font-size: 1rem;
}

a {
  color: inherit;
  transition: var(--transition-fast);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.section {
  padding: 6.25rem 0; /* 100px padding */
}

.section-bg {
  background-color: var(--bg-secondary);
}

.section-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 4rem auto;
}

.section-header h2 {
  display: inline-block;
  color: var(--primary-hover); /* single on-brand forest green for the whole heading, never plain black */
}

.section-header p {
  margin-top: 1rem;
  font-size: 1.1rem;
}

.badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  background-color: var(--secondary-light);
  color: var(--primary);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

/* Ripple Button Effect & Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  outline: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: var(--bg-primary);
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -5px rgba(15, 118, 110, 0.45);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn-secondary:hover {
  background-color: var(--secondary-light);
  transform: translateY(-2px);
}

.btn-white {
  background-color: var(--bg-primary);
  color: var(--primary);
  box-shadow: var(--shadow-md);
}

.btn-white:hover {
  background-color: #F8FAFC;
  transform: translateY(-2px);
}

/* Ripple effect styles */
.ripple {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ==========================================================================
   Header Section
   ========================================================================== */
.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background-color: var(--bg-primary); /* Always white - logo has transparent design */
  border-bottom: 1px solid var(--border);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

/* Sticky Class added via JS */
.header-wrapper.is-sticky {
  background-color: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: 68px;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1rem;
  padding-top: 28px;
}

.header-location-bar { position: absolute; inset: 0 0 auto; height: 28px; color: rgba(255,255,255,.92); background: var(--primary-hover); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.header-location-inner { height: 100%; }
.header-location-inner a { display: flex; height: 100%; align-items: center; justify-content: center; gap: .42rem; color: inherit; font-size: .7rem; }
.header-location-inner a:hover { color: #fff; }
.header-location-inner svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--secondary); stroke-width: 2; }
.header-location-inner strong { margin-left: .25rem; color: #fff; font-size: .68rem; text-decoration: underline; text-underline-offset: 3px; }
.header-location-inner .header-location-arrow { width: 13px; stroke: #fff; }
.header-wrapper.is-sticky .header-location-bar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.header-wrapper.is-sticky .header-container { padding-top: 0; }
.mobile-directions-link { display: none; }

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0; /* Never shrink the logo */
  padding: 0.75rem 0; /* Breathing room above/below the logo mark */
}

/* Logo Mark: crops the emblem out of the logo artwork (which also bakes in
   the wordmark lower down) so it reads crisply at small header sizes. */
.logo-mark {
  width: 78px;
  height: 72px;
  overflow: hidden;
  position: relative;
  display: block;
  flex-shrink: 0;
  transition: transform var(--transition-normal);
}

.logo-link:hover .logo-mark {
  transform: scale(1.04);
}

/* Logo Image (PNG file) */
.logo-image {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 117px;           /* Zoomed so only the emblem falls inside .logo-mark */
  max-width: none;
  height: auto;
  object-fit: contain;
  display: block;
}

.logo-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.22;
  white-space: nowrap;
  padding-left: 0.75rem;
  border-left: 1.5px solid rgba(201, 162, 39, 0.4); /* thin gold rule separates emblem from wordmark */
}

.logo-wordmark-line1 {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  color: #388D35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Clinic name: a dedicated display serif (distinct from the sans-serif used
   everywhere else) reads as a proper logotype rather than just bold body
   text, and title case (not all-caps) suits a serif much better. */
.logo-wordmark-line2 {
  font-family: 'Playfair Display', 'Plus Jakarta Sans', serif;
  font-weight: 800;
  font-size: 1.52rem;
  background: linear-gradient(135deg, #E49616 0%, #EFB21E 52%, #DE7E1E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.005em;
}

.logo-text {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--primary);
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Sticky header: shrink the logo lockup slightly to fit the compact bar */
.header-wrapper.is-sticky .logo-mark {
  width: 62px;
  height: 56px;
}

.header-wrapper.is-sticky .logo-image {
  width: 93px;
}

.header-wrapper.is-sticky .logo-wordmark-line1 {
  font-size: 0.66rem;
}

.header-wrapper.is-sticky .logo-wordmark-line2 {
  font-size: 1.16rem;
}

/* Footer logo lockup - same emblem + wordmark as the header (just sized
   down like the sticky-header variant) so the clinic's mark reads as one
   consistent identity site-wide instead of a different icon in the footer. */
.footer-info-col .logo-link {
  margin-bottom: 0.25rem;
  padding: 0;
}

.footer-info-col .logo-mark {
  width: 56px;
  height: 50px;
}

.footer-info-col .logo-image {
  width: 84px;
}

.footer-info-col .logo-wordmark-line1 {
  font-size: 0.6rem;
}

.footer-info-col .logo-wordmark-line2 {
  font-size: 1.05rem;
}

.logo-subtext {
  display: block;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.2em; /* Premium wide spacing */
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 3px;
}

/* Navigation Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1rem; /* comfortable spacing between links */
  flex: 1;            /* nav takes available space */
  justify-content: center; /* center links in the space */
}

.nav-link {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 0.9rem; /* slightly smaller size, cleaner */
  color: var(--text-secondary);
  padding: 0.4rem 0.2rem;
  position: relative;
  white-space: nowrap; /* prevent line wrapping */
  letter-spacing: 0.01em;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: width var(--transition-normal);
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--primary);
  font-weight: 600;
}

/* Header Utilities Right */
.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0; /* Never allow right section to shrink */
}

.mobile-header-call { display: none; }

.header-hotline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hotline-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background-color: var(--secondary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-normal);
}

.header-hotline:hover .hotline-icon {
  background-color: var(--primary);
  color: var(--bg-primary);
  transform: scale(1.05);
}

.hotline-info {
  display: flex;
  flex-direction: column;
}

.hotline-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.hotline-number {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

/* Compact header button */
.btn-header {
  padding: 0.55rem 1.1rem !important;
  font-size: 0.82rem !important;
  border-radius: var(--radius-sm) !important;
  white-space: nowrap !important;  /* NEVER wrap text in header button */
  flex-shrink: 0;
  line-height: 1.3;
}

/* Hamburger Button */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  outline: none;
}

.hamburger span {
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition-normal);
}

/* Hamburger active state */
.hamburger.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   Hero Banner Section
   ========================================================================== */

/* Visually hidden but still readable by search engines/screen readers -
   used for the real H1 since the banner image itself carries the headline. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-section {
  position: relative;
  padding-top: var(--header-height);
  background: var(--bg-primary);
}

/* Full-bleed slider. The two real banners have different native aspect
   ratios (banner_1.jpg ~16:9, banner_2.jpg ~2.7:1) and both carry critical
   baked-in logo/headline text right to their edges, so object-fit:contain
   is used instead of cover - this guarantees neither is ever cropped no
   matter what size a future replacement banner is. Any resulting letterbox
   gap is filled by each slide's blurred .hero-slide-backdrop copy (see
   below) instead of showing empty space. */
.hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;

  /* Caps how tall the banner gets on wide desktop screens (where the 21:9
     width-driven height can push the "Đặt lịch ngay" bar below the fold)
     without affecting mobile, where the aspect-ratio height is already well
     under this cap. The blurred backdrop absorbs any extra letterboxing
     this introduces. */
  max-height: min(75vh, 750px);
  overflow: hidden;
  background-color: var(--secondary-light);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Blurred, scaled-up copy of the same slide image fills the box edge-to-edge
   behind the sharp contain image below, so there's never an empty letterbox
   gap even when a future banner's aspect ratio doesn't match the box. Scaled
   up so the blur radius never reveals its own crop edge. */
.hero-slide-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.92) saturate(1.1);
  transform: scale(1.15);
  pointer-events: none;
}

.hero-slide-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill; /* fill the box without cropping, so the baked-in text/logo is never cut off */
}

/* Soft bottom scrim so the dots stay legible over any slide */
.hero-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0) 16%);
  z-index: 2;
  pointer-events: none;
}

.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--text-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.hero-slider-arrow:hover {
  background-color: var(--bg-primary);
  color: var(--primary);
  transform: translateY(-50%) scale(1.08);
}

.hero-slider-prev { left: 1rem; }
.hero-slider-next { right: 1rem; }

.hero-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

.hero-slider-dot {
  width: 28px;
  height: 28px;
  padding: 9px;
  border: none;
  border-radius: 50%;
  background-clip: content-box;
  background-color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: var(--transition-fast);
}

.hero-slider-dot.is-active {
  width: 36px;
  border-radius: 14px;
  background-color: var(--bg-primary);
}

/* Mobile-only doctor spotlight card (hidden on desktop - see @media 768px
   below for the visible layout). Bridges the shrunken mobile banner and the
   CTA bar with an explicit trust signal (face + credentials + rating). */
.hero-doctor-spotlight {
  display: none;
}

.hero-mobile-intro { display: none; }

/* CTA strip directly under the banner slider - kept light so it doesn't
   visually merge into the dark green Stats section right below it. */
.hero-cta-bar {
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.hero-cta-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1.5rem;
}

.hero-cta-bar-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hero-cta-bar-text strong {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
}

.hero-cta-bar-text span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.btn-lg {
  padding: 1.05rem 2.5rem;
  font-size: 1rem;
  border-radius: calc(var(--radius-md) + 6px);
}

.btn-sm {
  padding: 0.6rem 1.35rem;
  font-size: 0.85rem;
}

/* Booking Card (clean solid card) */
.booking-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-normal);
}

.booking-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.booking-card-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.form-control-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form-control-icon {
  position: absolute;
  left: 1rem;
  width: 18px;
  height: 18px;
  color: var(--primary);
  pointer-events: none;
  flex-shrink: 0;
}

.form-control {
  font-family: 'Inter', sans-serif;

  /* 16px min - iOS Safari auto-zooms the page on focus for any input with a
     smaller computed font-size, which made the modal jump/zoom on tap. */
  font-size: 1rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  transition: all var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
  background-color: var(--bg-primary);
}

/* Native select/date chrome ignores our padding differently across iOS/Android,
   so give them an explicit custom chevron and matching right padding instead
   of relying on the platform default (which looked inconsistent on iOS). */
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.75rem;
}

input[type="date"].form-control {
  min-height: 3rem;
}

input[type="date"].form-control::-webkit-date-and-time-value {
  text-align: left;
}

.booking-privacy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.booking-privacy-note svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
  flex-shrink: 0;
}

/* Success State Style */
.booking-success {
  text-align: center;
  padding: 2rem 0;
  display: none;
}

.booking-success-icon {
  width: 60px;
  height: 60px;
  background-color: var(--accent-light);
  color: var(--accent);
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Booking Modal - houses the booking card as a popup, opened from any
   "Đặt lịch" / "Nhận tư vấn" trigger across the site (see script.js). */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.booking-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.booking-modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.65);
}

.booking-modal-inner {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  transform: scale(0.94) translateY(12px);
  transition: transform var(--transition-normal);
}

.booking-modal.is-open .booking-modal-inner {
  transform: scale(1) translateY(0);
}

.booking-modal-inner .booking-card {
  margin: 0;
}

.booking-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: var(--transition-fast);
}

.booking-modal-close:hover {
  background-color: var(--secondary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* ==========================================================================
   Giới thiệu Section
   ========================================================================== */
.about-container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

/* Above the breakpoint where this column becomes a fixed two-up grid (see
   @media 1024px below, where it drops to a single column), the heading's
   fluid font-size (clamp, tied to viewport width) always leaves enough
   room in the column for it to fit on one line - confirmed by measurement
   from 1025px up to very wide desktops - so keep it on one line instead of
   wrapping to an unnecessary second line. */
@media (min-width: 1025px) {
  .about-content h2 {
    white-space: nowrap;
  }
}

.about-images-wrapper {
  position: relative;
}

.about-main-image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
}

.about-floating-badge {
  position: absolute;
  bottom: -20px;
  right: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 260px;
}

.badge-icon-wrapper {
  width: 48px;
  height: 48px;
  background-color: var(--secondary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-text-title {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.1rem;
}

.badge-text-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   Thống kê Section
   ========================================================================== */
.stats-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: var(--bg-primary);
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1rem;
  top: 20%;
  height: 60%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

.stat-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
  background: linear-gradient(to bottom, #FFF 60%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ==========================================================================
   Dịch vụ Section
   ========================================================================== */

/* Static full grid - used on the dedicated dich-vu.html listing page
   (the homepage uses the draggable carousel below instead). */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

/* Side gutters reserve room for the prev/next arrows so they sit outside
   the cards instead of overlapping them. This padding lives on the OUTER
   wrapper, never on the Swiper root itself (.services-carousel-container /
   .reviews-carousel-container below) - Swiper sizes slides from its root
   element's own width, so padding there would let slides render underneath
   it and peek out past the arrows. Keeping the Swiper root unpadded, with
   its own overflow:hidden, clips slides exactly at the visible edge with
   no peek. Shared by both the services and reviews carousels. */
.services-carousel-outer,
.reviews-carousel-outer {
  position: relative;
  padding: 1rem 2.75rem;
}

.services-carousel-container,
.reviews-carousel-container {
  width: 100%;
  overflow: hidden;
}

/* Prev/next affordance for the services/reviews carousels - sits level with
   the card row itself (same treatment as the hero slider arrows: solid
   white disc + strong shadow, no border - a thin outline read as flat/
   cheap) rather than in a separate row below. Parked in the outer
   wrapper's side gutters, hugging the outer edge, so it never overlaps the
   cards but also doesn't leave a big empty gap between itself and the card
   next to it. */
.carousel-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-primary);
  color: var(--primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: var(--transition-fast);
}

.carousel-nav-arrow svg {
  width: 18px;
  height: 18px;
}

.carousel-nav-arrow:hover {
  background-color: var(--primary);
  color: var(--bg-primary);
  transform: translateY(-50%) scale(1.08);
}

.carousel-nav-arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.carousel-nav-prev { left: 0.3rem; }
.carousel-nav-next { right: 0.3rem; }

/* Layout, drag, spacing and slide sizing are all owned by Swiper (see the
   #services-swiper init in script.js) - .services-carousel-track only needs
   its swiper-wrapper role here, no manual flex/gap/cursor rules. Slides are
   left un-stretched (flex-start, not the flexbox default stretch) so one
   card expanding on hover (see .service-card p below) never drags its
   neighbours taller too. */
.services-carousel-track {
  align-items: flex-start;
}

.services-more-cta {
  text-align: center;
  margin-top: 1.5rem;
}

.service-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.service-image-box {
  width: 100%;
  aspect-ratio: 4 / 2.6;
  overflow: hidden;
}

.service-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
  -webkit-user-drag: none;
}

.service-card:hover .service-image {
  transform: scale(1.06);
}

.service-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.service-card:hover h3 {
  color: var(--primary);
}

.service-card p {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  cursor: help;

  /* Clamp to a fixed number of lines (with a trailing "…") so cards with
     shorter/longer descriptions line up at equal height; the full text is
     available via the native title tooltip (see the title="" attribute
     added alongside this text) instead of reflowing the card on hover. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kept on a single row even on the narrowest cards (nowrap, tighter gap +
   button padding below) - letting it wrap to two lines read as broken. */
.service-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.service-card-actions .btn-sm {
  padding: 0.6rem 1rem;
  flex-shrink: 0;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
  transition: gap var(--transition-fast);
}

.service-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.service-card:hover .service-link {
  color: var(--primary-hover);
}

.service-card:hover .service-link svg {
  transform: translateX(4px);
}

/* ==========================================================================
   Doctor Profile (merged into the About section - single-doctor clinic)
   ========================================================================== */
.doctor-inline-profile {
  margin: 0.25rem 0 1.75rem;
  padding: 1.5rem 1.75rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.doctor-inline-profile h3 {
  font-size: 1.3rem;
  margin-bottom: 0.2rem;
}

.doctor-inline-title {
  display: block;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
}

.doctor-credentials,
.checklist {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.doctor-credentials li,
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.doctor-credentials svg,
.checklist svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--primary);
}

/* ==========================================================================
   Trang Bác sĩ (bac-si / bac-si/{slug}) - card dạng chân dung, mirror
   cấu trúc .services-grid/.service-card nhưng tỉ lệ ảnh dọc hơn.
   ========================================================================== */
.doctors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.doctor-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.doctor-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.doctor-image-box {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--bg-secondary);
}

.doctor-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition-slow);
  -webkit-user-drag: none;
}

.doctor-card:hover .doctor-image {
  transform: scale(1.06);
}

.doctor-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.doctor-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.doctor-card:hover h3 {
  color: var(--primary);
}

.doctor-card .specialty {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.doctor-card-actions {
  display: flex;
  align-items: center;
}

.doctor-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--primary);
  white-space: nowrap;
  transition: gap var(--transition-fast);
}

.doctor-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.doctor-card:hover .doctor-link {
  color: var(--primary-hover);
}

.doctor-card:hover .doctor-link svg {
  transform: translateX(4px);
}

.doctor-team-swiper {
  width: min(100%, 980px);
  margin-inline: auto;
  min-width: 0;
  overflow: hidden;
}

.doctor-team-swiper .swiper-wrapper {
  align-items: stretch;
}

.doctor-team-swiper .swiper-pagination {
  margin-top: 0.75rem;
}

.doctor-team-card {
  height: auto;
}

.doctor-team-card .doctor-image-box {
  aspect-ratio: 4 / 4.6;
}

.doctor-team-card .doctor-image {
  object-fit: cover;
  object-position: top center;
}

.doctor-team-card .doctor-card-body {
  min-height: 142px;
  padding: 1.15rem 1.25rem 1.25rem;
}

.doctor-team-card .doctor-card-body h3 {
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
}

.doctor-team-card .doctor-card-body h3 a {
  color: inherit;
}

.doctor-team-card .doctor-card-body h3 a:hover {
  color: var(--primary);
}

.doctor-team-card .specialty {
  margin-bottom: 0.8rem;
  font-size: 0.84rem;
}

/* Ảnh hero trang chi tiết bác sĩ - đồng bộ với .about-main-image ở trang chủ
   (portrait 3:4, object-fit: cover, neo về phía trên để không mất đầu). Trước
   đây dùng tỉ lệ 4:3 + contain cho ảnh chân dung nên bị viền xám hai bên,
   nhìn rất xấu. */
.doctor-detail-image {
  width: 90%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Name + "verified profile" checkmark on the doctor detail header - a
   small filled badge (not a claim of government licensing, just signals
   this is the clinic's own confirmed/official profile). */
.doctor-detail-name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.doctor-verified-icon {
  flex-shrink: 0;
  width: 0.65em;
  height: 0.65em;
}

/* Small circular badge pinned to the corner of the hero photo - same
   "verified" signal as .doctor-verified-icon, sized for a photo overlay. */
.doctor-photo-verified-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: var(--bg-primary);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--bg-primary);
}

.doctor-photo-verified-badge svg {
  width: 18px;
  height: 18px;
}

/* Three-up "why trust this doctor" grid: education / current role /
   experience, each sourced directly from the doctor's own profile fields
   (no invented stats). auto-fit keeps it responsive without extra
   @media rules. */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4.5rem;
}

.trust-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: all var(--transition-normal);
}

.trust-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.trust-card-icon {
  width: 48px;
  height: 48px;
  background-color: var(--secondary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.trust-card-icon svg {
  width: 24px;
  height: 24px;
}

.trust-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.trust-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Credentials list rendered as a 2-column card grid instead of a plain
   stacked checklist - more scannable for a "why trust this doctor" section. */
.credentials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.credentials-grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  line-height: 1.5;
}

.credentials-grid svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--primary);
}

/* ==========================================================================
   Service Detail Page (dich-vu-chi-tiet.html)
   ========================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}

.breadcrumb a {
  color: var(--primary);
  font-weight: 600;
}

.breadcrumb .sep {
  color: var(--text-light);
}

.detail-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 4.5rem;
}

.detail-hero-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background-color: var(--bg-secondary);
}

.detail-intro h2 {
  margin-bottom: 1rem;
}

.detail-intro p {
  line-height: 1.75;
}

.detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 4.5rem;
}

.detail-columns h3 {
  margin-bottom: 1.25rem;
}

.detail-process {
  margin-bottom: 4.5rem;
}

.detail-cta {
  text-align: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  color: var(--bg-primary);
  margin-bottom: 4.5rem;
}

.detail-cta h3 {
  color: var(--bg-primary);
  margin-bottom: 0.75rem;
}

.detail-cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 500px;
  margin: 0 auto 1.75rem;
}

/* ==========================================================================
   Đội ngũ nhân viên Section
   ========================================================================== */
.employees-showcase {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.employees-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: 1.75rem;
}

.employees-caption {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* Equipment gallery (Trang thiết bị hiện đại) - reuses .employees-showcase
   for the shared max-width/centering, but shows a 2x2 grid of photos
   instead of a single hero image. */
.equipment-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.equipment-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-slow);
}

.equipment-gallery img:hover {
  transform: scale(1.03);
}

/* ==========================================================================
   Trang Thư viện ảnh (thu-vien-anh / thu-vien-anh/{slug})
   ========================================================================== */
.gallery-album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.gallery-album-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gallery-album-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.gallery-album-image-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--bg-secondary);
  position: relative;
}

.gallery-album-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-album-card:hover .gallery-album-image-box img {
  transform: scale(1.06);
}

.gallery-album-count {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
}

.gallery-album-body {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gallery-album-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.gallery-album-card:hover .gallery-album-body h3 {
  color: var(--primary);
}

.gallery-album-body p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Grid ảnh bên trong 1 album - bấm vào ảnh mở kích thước đầy đủ ở tab mới. */
.gallery-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.gallery-photo-item {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}

.gallery-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-photo-item:hover img {
  transform: scale(1.08);
}

/* ==========================================================================
   Quy trình khám Section
   ========================================================================== */
.timeline-wrapper {
  position: relative;
  margin-top: 4rem;
}

/* Central Connection Line */
.timeline-line {
  position: absolute;
  top: 50px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(to right, var(--border), var(--primary) 50%, var(--border));
  z-index: 1;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.timeline-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-step-num {
  width: 90px;
  height: 90px;
  border-radius: var(--radius-round);
  background-color: var(--bg-primary);
  border: 4px solid var(--bg-secondary);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  position: relative;
  transition: all var(--transition-normal);
}

.timeline-item:hover .timeline-step-num {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--bg-primary);
  transform: translateY(-5px);
  box-shadow: var(--shadow-primary);
}

.timeline-item h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.timeline-item p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 220px;
}

/* ==========================================================================
   Before & After Gallery Section
   ========================================================================== */

/* Sidebar of treatment categories + large comparison panel */
.ba-viewer {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
}

.ba-viewer > * {
  min-width: 0; /* Let grid items (esp. the horizontal-scroll mobile category row) shrink below their content's natural width instead of expanding the page */
}

.ba-category-col {
  min-width: 0;
}

.ba-category-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Only meaningful once .ba-category-list becomes a horizontal scroller
   below (see @media 1024px) - hidden on desktop's vertical sidebar. */
.ba-category-scroll-btn {
  display: none;
}

.ba-category-btn {
  text-align: left;
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  border: 1px solid transparent;
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ba-category-btn:hover {
  background-color: var(--secondary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.ba-category-btn.is-active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: var(--bg-primary);
  box-shadow: var(--shadow-primary);
}

.ba-viewer-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Interactive Slider Element */
.ba-slider-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  user-select: none;
}

.ba-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ba-before {
  z-index: 1;
}

.ba-after {
  z-index: 2;
  clip-path: inset(0 0 0 50%); /* Start at 50% split */
}

.ba-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background-color: var(--bg-primary);
  z-index: 3;
  cursor: ew-resize;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.ba-handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background-color: var(--primary);
  color: var(--bg-primary);
  border-radius: var(--radius-round);
  border: 4px solid var(--bg-primary);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.ba-slider-handle:hover .ba-handle-button {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Text Badges over images */
.ba-label {
  position: absolute;
  top: 1.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 4;
  letter-spacing: 0.05em;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

.ba-label-before {
  left: 1.5rem;
  background-color: rgba(15, 23, 42, 0.75);
  color: var(--bg-primary);
}

.ba-label-after {
  right: 1.5rem;
  background-color: rgba(21, 128, 61, 0.85);
  color: var(--bg-primary);
}

/* Result chip overlaid on the panel - quantifies the outcome so the case
   reads as concrete proof rather than a generic stock photo. */
.ba-result-chip {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 3;
  background-color: rgba(15, 23, 42, 0.72);
  color: var(--bg-primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
}

/* Customer info card under the comparison panel */
.ba-viewer-info {
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
}

.ba-viewer-info h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.ba-viewer-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.ba-gallery-rating {
  display: flex;
  gap: 0.15rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.ba-gallery-rating svg {
  width: 14px;
  height: 14px;
}

.ba-gallery-quote {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  font-size: 0.9rem;
  font-style: italic;
}

.ba-drag-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-light);
}

.ba-drag-hint svg {
  flex-shrink: 0;
  color: var(--primary);
}

/* ==========================================================================
   Review Khách hàng Carousel Section
   ========================================================================== */

/* Layout, drag, spacing and slide sizing are all owned by Swiper (see the
   #reviews-swiper init in script.js) - .reviews-carousel-track only needs
   its swiper-wrapper role here, no manual flex/gap/cursor rules. */

.review-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.review-rating {
  color: #FBBF24; /* Star Gold */
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.review-quote {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.review-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-round);
  border: 2px solid var(--secondary-light);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
}

.review-author-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.review-author-info p {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Facebook Reel nổi bật trên trang chủ */
.clinic-reel-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(21, 128, 61, 0.08), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(245, 166, 35, 0.1), transparent 28%),
    var(--bg-primary);
}

.clinic-reels-outer {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 3rem;
}

.clinic-reels-outer .carousel-nav-prev {
  left: 0.3rem;
}

.clinic-reels-outer .carousel-nav-next {
  right: 0.3rem;
}

.clinic-reels-swiper {
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0.25rem 0;
}

.clinic-reel-card {
  position: relative;
  width: auto;
  height: auto;
  padding: 0.6rem 0.6rem 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(21, 128, 61, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fbfefc 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.clinic-reel-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #78b83e 55%, #f5a623);
}

.clinic-reel-card:hover {
  transform: translateY(-5px);
  border-color: rgba(21, 128, 61, 0.28);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.15);
}

.clinic-reel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 220 / 392;
  overflow: hidden;
  border-radius: calc(var(--radius-md) - 5px);
  background: #0f172a;
}

.clinic-reel-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.clinic-reel-card h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.8rem 0.35rem 0.05rem;
  color: var(--primary-hover);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.clinic-reel-card h3::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #f5a623;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.12);
}

@media (max-width: 480px) {
  .clinic-reel-card {
    padding: 0.45rem 0.45rem 0.7rem;
  }

  .clinic-reel-card h3 {
    font-size: 0.8rem;
  }
}

@media (max-width: 1180px) {
  .clinic-reels-outer {
    padding-inline: 2.6rem;
  }

  .clinic-reels-outer .carousel-nav-prev {
    left: 0.15rem;
  }

  .clinic-reels-outer .carousel-nav-next {
    right: 0.15rem;
  }
}

@media (max-width: 640px) {
  .clinic-reels-outer {
    /* Keep a small side gutter so the video controls remain visible and do
       not sit on top of the Facebook player controls. */
    padding-inline: 2.25rem;
  }

  .clinic-reels-outer .carousel-nav-prev { left: 0.1rem; }
  .clinic-reels-outer .carousel-nav-next { right: 0.1rem; }
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background-color: var(--border);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.carousel-dot.active {
  background-color: var(--primary);
  width: 24px;
  border-radius: 100px;
}

/* Both Swiper carousels reuse the .carousel-dot/.active styling above via
   bulletClass/bulletActiveClass (see script.js) - just cancel Swiper's own
   absolute overlay positioning so the dots stay in normal flow below the
   cards, like before. */
.swiper-pagination {
  position: static;
}

/* ==========================================================================
   Tin tức Section
   ========================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.news-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.news-img-box {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}

.news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.news-card:hover .news-img {
  transform: scale(1.05);
}

.news-date {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background-color: var(--bg-primary);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.news-content {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  transition: color var(--transition-fast);
}

.news-card:hover .news-content h3 {
  color: var(--primary);
}

.news-content p {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.news-link {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.news-card:hover .news-link {
  gap: 0.5rem;
  color: var(--primary-hover);
}

/* ==========================================================================
   News Page (tin-tuc.html)
   ========================================================================== */
.page-header-section {
  margin-top: var(--header-height);
  padding: 7.5rem 0 5.5rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(21, 128, 61, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 88% 0%, rgba(217, 119, 6, 0.14) 0%, transparent 38%),
    linear-gradient(180deg, #f6fbf8 0%, #fff 100%);
}

.page-header-section::before,
.page-header-section::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: var(--radius-round);
}

.page-header-section::before {
  width: 320px;
  height: 320px;
  right: -140px;
  top: -140px;
  background: rgba(21, 128, 61, 0.08);
}

.page-header-section::after {
  width: 260px;
  height: 260px;
  left: -120px;
  bottom: -140px;
  background: rgba(217, 119, 6, 0.08);
}

.page-header-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.page-header-content h1 {
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  color: var(--primary-hover); /* single on-brand forest green for the whole heading, never plain black */
}

.page-header-content p {
  font-size: 1.1rem;
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto;
}

/* --fit: for a page with one fixed, known-short title (e.g. dich-vu.html) -
   measured to comfortably fit on one line once given a bit more room, so
   above the breakpoint where the h1's fluid font-size hits its max (4rem)
   widen the column and lock it to one line instead of wrapping. */
@media (min-width: 1025px) {
  .page-header-content--fit {
    max-width: 960px;
  }

  .page-header-content--fit h1 {
    white-space: nowrap;
  }
}

/* --wide: for a page whose title is dynamic content (e.g. tin-tuc-chi-tiet.html
   article titles) - length varies per item and a long one genuinely can't
   fit on a single line at this font size on any realistic screen, so this
   only widens the column to cut an unnecessary 3rd line down to a balanced
   2 (verified against every current article title); it does NOT force
   nowrap, since a future longer title must still be free to wrap safely. */
@media (min-width: 1025px) {
  .page-header-content--wide {
    max-width: 1100px;
  }
}

.news-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.news-article-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.news-article-card:hover {
  transform: translateY(-8px);
  border-color: rgba(21, 128, 61, 0.35);
  box-shadow: 0 22px 45px -24px rgba(15, 23, 42, 0.38);
}

.news-article-img-box {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.news-article-img-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.3) 0%, transparent 45%);
  pointer-events: none;
}

.news-article-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow), filter var(--transition-slow);
}

.news-article-card:hover .news-article-img {
  transform: scale(1.06);
}

.news-category-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.news-article-content {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

.news-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.news-article-meta .news-date {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: var(--secondary-light);
  color: var(--primary);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: none;
}

.news-article-meta .news-date svg {
  width: 14px;
  height: 14px;
}

.news-author {
  color: var(--text-secondary);
  font-size: 0.83rem;
  font-weight: 600;
}

.news-article-content h2 {
  font-size: clamp(1.24rem, 2.1vw, 1.5rem);
  line-height: 1.42;
  margin: 0;
}

.news-article-content p {
  margin: 0;
  line-height: 1.72;
  font-size: 0.97rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-article-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.news-article-footer .btn-secondary {
  border-color: rgba(21, 128, 61, 0.2);
  background-color: #f6fbf7;
  color: var(--primary);
  padding: 0.72rem 1.1rem;
}

.news-article-footer .btn-secondary:hover {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--bg-primary);
}

.news-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.36rem 0.68rem;
}

.news-stats svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   News Detail Page (tin-tuc-chi-tiet.html)
   ========================================================================== */
.news-detail-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.news-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}

.news-detail-meta-item svg {
  flex-shrink: 0;
  color: var(--primary);
}

.news-detail-hero-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background-color: var(--bg-secondary);
  margin-bottom: 3rem;
}

.news-detail-body {
  max-width: 780px;
  margin: 0 auto 4.5rem;
}

.news-detail-body h2 {
  font-size: clamp(1.3rem, 2.3vw, 1.6rem);
  margin: 2.25rem 0 1rem;
}

.news-detail-body h2:first-child {
  margin-top: 0;
}

.news-detail-body p {
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.news-detail-body p:last-child {
  margin-bottom: 0;
}

.news-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.faq-item:hover,
.faq-item.active {
  border-color: var(--primary);
}

.faq-item.active {
  box-shadow: var(--shadow-sm);
}

.faq-header {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  outline: none;
}

.faq-header:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.faq-question {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.faq-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal) ease-in-out;
}

.faq-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  border-top: 1px solid transparent;
}

.faq-item.active .faq-body {
  /* JS will assign exact scrollHeight for smooth transition */
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 50%, var(--secondary) 100%);
  color: var(--bg-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-container {
  max-width: 800px;
  position: relative;
  z-index: 2;
}

.cta-section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
  color: var(--bg-primary);
}

/* Both CTA headings that use this section (index.html/tin-tuc.html's
   "Nhận Tư Vấn..." and dich-vu.html's "Chưa Biết Chọn...") are fixed,
   known text - measured to need ~890px at this heading's max font-size,
   so widen the column and lock to one line above the breakpoint where
   there's room, instead of wrapping unnecessarily. */
@media (min-width: 1025px) {
  .cta-container {
    max-width: 950px;
  }

  .cta-section h2 {
    white-space: nowrap;
  }
}

.cta-section p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.15rem;
  margin-bottom: 2.5rem;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Decorative circles */
.cta-section::before,
.cta-section::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.cta-section::before {
  width: 400px;
  height: 400px;
  top: -200px;
  left: -100px;
}

.cta-section::after {
  width: 600px;
  height: 600px;
  bottom: -300px;
  right: -100px;
}

/* ==========================================================================
   Footer Section
   ========================================================================== */
.footer-top {
  padding: 5rem 0 3rem 0;
  border-bottom: 1px solid var(--border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
  gap: 3rem;
}

.footer-info-col p {
  margin: 1.25rem 0 1.5rem 0;
  font-size: 0.9rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.social-btn {
  min-height: 42px;
  padding: .55rem .85rem;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  border: 0;
  box-shadow: 0 5px 14px rgba(15,23,42,.12);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.social-btn:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 9px 20px rgba(15,23,42,.17);
  filter: brightness(1.06);
}
.social-facebook { background: linear-gradient(135deg, #1877f2, #0d5dcc); }
.social-facebook svg { width: 20px; height: 20px; fill: currentColor; }
.social-zalo { background: linear-gradient(135deg, #159cff, #0759d8); }
.social-zalo-mark { display: grid; min-width: 27px; height: 22px; padding-inline: 3px; place-items: center; color: #0759d8; font-size: .56rem; font-weight: 900; background: #fff; border-radius: 6px; }

.footer-col h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.footer-col h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background-color: var(--primary);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.footer-links a:hover {
  color: var(--primary);
  padding-left: 4px;
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-contact-item {
  display: flex;
  gap: 0.75rem;
}

.footer-contact-item svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item div {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.footer-map-box {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 180px;
  border: 1px solid var(--border);
  background-color: var(--bg-secondary);
  position: relative;
}

.footer-map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.footer-bottom {
  padding: 1.5rem 0;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: var(--text-light);
}

/* News listing: horizontal cards with a sticky category filter, matching the
   compact editorial layout used by the reference site. */
.news-listing-section { background: linear-gradient(180deg, #fff 0, #fafbfc 100%); }
.news-listing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 2.25rem; align-items: start; }
.news-list-column { min-width: 0; }
.news-list-card { display: grid; grid-template-columns: minmax(260px, 38%) 1fr; min-height: 218px; margin-bottom: 1.35rem; overflow: hidden; background: #fff; border: 1px solid rgba(24, 52, 43, .1); border-radius: 18px; box-shadow: 0 8px 30px rgba(20, 55, 43, .07); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); }
.news-list-card:hover { transform: translateY(-4px); border-color: rgba(21,128,61,.22); box-shadow: 0 16px 38px rgba(20,55,43,.13); }
.news-list-image { position: relative; min-height: 218px; overflow: hidden; background: #edf3ef; }
.news-list-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); }
.news-list-card:hover .news-list-image img { transform: scale(1.04); }
.news-date-badge { position: absolute; top: .9rem; left: .9rem; min-width: 54px; padding: .42rem .5rem; color: var(--primary-dark); text-align: center; line-height: 1.05; background: rgba(255,255,255,.95); border: 0; border-radius: 10px; box-shadow: 0 5px 18px rgba(0,0,0,.2); backdrop-filter: blur(6px); }
.news-date-badge strong, .news-date-badge span { display: block; }
.news-date-badge strong { font-size: 1.05rem; }
.news-date-badge span { margin-top: .2rem; font-size: .7rem; text-transform: uppercase; }
.news-list-content { display: flex; flex-direction: column; justify-content: center; padding: 1.55rem 1.8rem; }
.news-list-category { align-self: flex-start; margin-bottom: .6rem; padding: .27rem .65rem; color: var(--primary-dark); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(21,128,61,.08); border-radius: 999px; }
.news-list-content h2 { margin: 0 0 .65rem; font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.42; }
.news-list-content h2 a { color: var(--text-primary); }
.news-list-content h2 a:hover { color: var(--primary); }
.news-list-content p { display: -webkit-box; margin: 0 0 .8rem; overflow: hidden; color: var(--text-secondary); line-height: 1.65; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-list-meta { display: flex; align-items: center; gap: .9rem; color: var(--text-light); font-size: .76rem; }
.news-list-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.news-list-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.news-read-more { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; color: var(--primary); font-weight: 700; }
.news-read-more span { font-size: 1rem; transition: transform var(--transition-fast); }
.news-read-more:hover span { transform: translateX(3px); }
.news-category-sidebar { position: sticky; top: 100px; padding: 1.1rem 1.25rem 1.25rem; background: #fff; border: 1px solid rgba(24,52,43,.1); border-radius: 16px; box-shadow: 0 8px 30px rgba(20,55,43,.07); }
.news-search-form { margin-bottom: 1rem; }
.news-search-control { position: relative; display: flex; align-items: center; height: 46px; overflow: hidden; background: #f7faf8; border: 1px solid rgba(24,52,43,.12); border-radius: 11px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.news-search-control:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,128,61,.1); }
.news-search-control > svg { width: 18px; height: 18px; margin-left: .8rem; flex: 0 0 auto; fill: none; stroke: var(--text-light); stroke-width: 2; }
.news-search-control input { width: 100%; min-width: 0; height: 100%; padding: 0 .55rem; color: var(--text-primary); font: inherit; font-size: .83rem; background: transparent; border: 0; outline: 0; }
.news-search-control input::placeholder { color: var(--text-light); }
.news-search-control input::-webkit-search-cancel-button { cursor: pointer; }
.news-search-control button { display: grid; width: 38px; height: 36px; margin-right: 4px; flex: 0 0 38px; place-items: center; color: #fff; cursor: pointer; background: var(--primary); border: 0; border-radius: 8px; transition: background var(--transition-fast), transform var(--transition-fast); }
.news-search-control button:hover { background: var(--primary-dark); transform: translateX(1px); }
.news-search-control button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.news-category-menu > summary { list-style: none; pointer-events: none; }
.news-category-menu > summary::-webkit-details-marker { display: none; }
.news-category-menu > summary > span:not(.news-category-menu-icon), .news-category-menu > summary > svg { display: none; }
.news-category-menu-icon { display: none; }
.news-category-sidebar h2, .news-category-menu::before { content: "Danh mục tin tức"; display: block; margin: 0 0 .65rem; padding-bottom: .85rem; color: var(--primary-dark); font-size: 1rem; font-weight: 800; text-transform: uppercase; border-bottom: 2px solid rgba(21,128,61,.14); }
.news-category-sidebar nav a { display: flex; justify-content: space-between; gap: .75rem; padding: .78rem .4rem; color: var(--text-primary); border-bottom: 1px solid rgba(24,52,43,.08); border-radius: 7px; transition: color var(--transition-fast), padding var(--transition-fast), background var(--transition-fast); }
.news-category-sidebar nav a:hover, .news-category-sidebar nav a.is-active { padding-left: .75rem; color: var(--primary); background: rgba(21,128,61,.06); }
.news-category-sidebar nav small { min-width: 1.7rem; padding: .1rem .4rem; text-align: center; color: var(--text-light); background: var(--bg-secondary); border-radius: 999px; }
.news-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.news-pagination a { display: grid; width: 40px; height: 40px; place-items: center; color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px; }
.news-pagination a:hover, .news-pagination a.is-active { color: #fff; background: var(--primary); border-color: var(--primary); }
.news-empty-state { padding: 3rem; text-align: center; color: var(--text-secondary); background: var(--bg-secondary); border-radius: var(--radius-md); }

@media (max-width: 900px) {
  .news-listing-layout { grid-template-columns: 1fr; }
  .news-category-sidebar { position: static; grid-row: 1; padding: 0; overflow: hidden; border-color: rgba(21,128,61,.14); border-radius: 13px; box-shadow: 0 5px 18px rgba(20,55,43,.07); }
  .news-search-form { margin: 0; padding: .7rem .75rem; background: #fff; border-bottom: 1px solid rgba(24,52,43,.07); }
  .news-search-control { height: 44px; }
  .news-category-menu::before { display: none; }
  .news-category-menu > summary { display: flex; align-items: center; gap: .75rem; min-height: 58px; padding: .65rem .85rem; cursor: pointer; pointer-events: auto; user-select: none; transition: background var(--transition-fast); }
  .news-category-menu > summary:hover { background: rgba(21,128,61,.035); }
  .news-category-menu > summary > span:not(.news-category-menu-icon) { display: flex; min-width: 0; flex: 1; flex-direction: column; color: var(--text-primary); font-size: .91rem; font-weight: 750; line-height: 1.2; }
  .news-category-menu > summary small { width: auto; min-width: 0; margin: 0 0 .16rem; padding: 0; color: var(--primary); text-align: left; font-size: .59rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; background: transparent; border-radius: 0; }
  .news-category-menu > summary > svg { display: block; width: 18px; height: 18px; color: var(--text-secondary); fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform var(--transition-fast), color var(--transition-fast); }
  .news-category-menu[open] > summary { background: rgba(21,128,61,.045); }
  .news-category-menu[open] > summary > svg { color: var(--primary); }
  .news-category-menu[open] > summary > svg { transform: rotate(180deg); }
  .news-category-menu-icon { display: flex; width: 34px; height: 34px; flex: 0 0 34px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; background: linear-gradient(145deg, #19934b, #08783e); border-radius: 9px; box-shadow: 0 4px 10px rgba(8,120,62,.2); }
  .news-category-menu-icon i { display: block; width: 15px; height: 1.7px; background: currentColor; border-radius: 2px; }
  .news-category-sidebar nav { padding: .45rem .65rem .65rem; background: #fff; border-top: 1px solid rgba(24,52,43,.07); }
  .news-category-sidebar nav a { padding: .68rem .65rem; font-size: .87rem; }
}
@media (max-width: 600px) {
  .news-page-header .page-header-content { padding-block: 2.5rem; }
  .news-listing-section { padding-top: 1.25rem; }
  .news-listing-layout { gap: 1rem; }
  .news-list-card { grid-template-columns: 1fr; margin-bottom: 1rem; border-radius: 15px; }
  .news-list-image { min-height: 0; aspect-ratio: 16 / 9; }
  .news-list-content { padding: 1.05rem 1.1rem 1.15rem; }
  .news-list-category { margin-bottom: .5rem; }
  .news-list-content h2 { margin-bottom: .5rem; font-size: 1.05rem; }
  .news-list-content p { margin-bottom: .75rem; font-size: .88rem; line-height: 1.55; -webkit-line-clamp: 2; }
  .news-list-meta { flex-wrap: wrap; gap: .45rem .8rem; }
  .news-read-more { width: 100%; margin: .25rem 0 0; padding-top: .65rem; border-top: 1px solid rgba(24,52,43,.08); }
  .news-date-badge { top: .65rem; left: .65rem; min-width: 48px; }
  .news-pagination { margin-top: 1.4rem; }
  .news-pagination a { width: 38px; height: 38px; }
}

/* ==========================================================================
   Floating Widgets / Buttons
   ========================================================================== */
.floating-widgets {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 999;
}

.mobile-action-bar { display: none; }

.float-btn {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-primary);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 20px rgba(0,0,0,.24), 0 0 0 3px rgba(255,255,255,.55);
  transition: all var(--transition-normal);
  position: relative;
}

.float-btn:hover {
  transform: translateY(-4px) scale(1.05);
}

.float-btn svg {
  width: 27px;
  height: 27px;
}

/* Label that slides in on hover so each floating button is unambiguous */
.float-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background-color: var(--text-primary);
  color: var(--bg-primary);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.float-btn:hover .float-tooltip,
.float-btn:focus-visible .float-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.float-booking {
  background: linear-gradient(135deg, #ff8a00, #f04438);
}

.float-hotline {
  background: linear-gradient(135deg, #22c55e, #08783e);
  animation: pulse-phone 2s infinite;
}

.float-messenger {
  background: linear-gradient(135deg, #00b2ff, #006aff 55%, #a033ff);
}

.float-zalo {
  background: linear-gradient(135deg, #19a7ff, #0055d8);
}
.float-zalo-mark { color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: -.04em; }

.float-top {
  background-color: var(--text-primary);
  opacity: 0;
  visibility: hidden;
}

.float-top.is-visible {
  opacity: 1;
  visibility: visible;
}

@keyframes pulse-phone {
  0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(21, 128, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */
.reveal {
  opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.reveal-fade-up {
  transform: translateY(40px);
}

.reveal-fade-left {
  transform: translateX(-40px);
}

.reveal-fade-right {
  transform: translateX(40px);
}

.reveal-zoom-in {
  transform: scale(0.92);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Swiper's loop mode clones the edge slides for seamless infinite scroll;
   those clones are never seen by the reveal-on-scroll IntersectionObserver
   (only the originals are), so without this they'd stay permanently
   invisible whenever the loop cycles a clone into view. */
.swiper-slide-duplicate.reveal {
  opacity: 1;
  transform: none;
}

/* Delay helpers for animations */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Laptop (1440px or less) */
@media (max-width: 1440px) {
  :root {
    --max-width: 1200px;
  }
}

/* Desktop Medium / Large Tablet (1024px or less) */
@media (max-width: 1024px) {
  :root {
    --header-height: 70px;
  }
  .header-location-bar { display: none; }
  .header-container { padding-top: 0; }
  
  .about-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .detail-hero-grid,
  .detail-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-images-wrapper {
    order: -1;
    display: flex;
    justify-content: center;
  }

  .about-main-image {
    width: 80%;
  }

  .services-grid,
  .doctors-grid,
  .gallery-album-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gallery-photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .stat-item:nth-child(2)::after {
    display: none;
  }

  .timeline-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .timeline-line {
    display: none; /* Hide linear line on tablet wrap */
  }

  .ba-viewer {
    grid-template-columns: 1fr;
  }

  .ba-category-col {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .ba-category-list {
    flex: 1;
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .ba-category-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Explicit prev/next affordance - the horizontal scroll gesture alone
     isn't discoverable, so surface arrows once the list becomes a row. */
  .ba-category-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    color: var(--primary);
    border: 1px solid var(--border);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }

  .ba-category-scroll-btn:hover {
    background-color: var(--primary);
    color: var(--bg-primary);
    border-color: var(--primary);
  }

  .news-grid {
    grid-template-columns: 1fr 1fr;
  }

  .news-page-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .news-related-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Tablet Portrait (768px or less) */
@media (max-width: 768px) {
  .section {
    padding: 4.5rem 0;
  }

  /* Hamburger Menu Layout */
  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: -100%;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: var(--bg-primary);
    flex-direction: column;
    padding: 3rem 2rem;
    gap: 2rem;
    transition: left var(--transition-normal);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    z-index: 999;
  }

  .nav-menu.is-active {
    left: 0;
  }

  .nav-link {
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
  }

  .page-header-section {
    padding: 6.5rem 0 4.25rem;
  }

  .page-header-content p {
    font-size: 1rem;
  }

  .credentials-grid {
    grid-template-columns: 1fr;
  }

  .news-article-content {
    padding: 1.2rem;
  }

  .news-article-footer {
    align-items: stretch;
  }

  .news-article-footer .btn {
    width: 100%;
  }

  .header-right .btn {
    display: none; /* Hide header booking button on tablet/mobile header */
  }
  .mobile-directions-link { display: flex; align-items: center; justify-content: center; gap: .45rem; color: var(--primary); font-weight: 700; }
  .mobile-directions-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }

  .mobile-header-call { display: grid; width: 40px; height: 40px; place-items: center; color: #fff; background: var(--primary); border-radius: 50%; box-shadow: 0 5px 14px rgba(21,128,61,.22); }
  .mobile-header-call svg { width: 20px; height: 20px; fill: currentColor; }

  .hero-mobile-intro { display: block; padding: 1.2rem 1.15rem .25rem; text-align: center; background: #fff; }
  .hero-mobile-eyebrow { display: inline-block; margin-bottom: .45rem; color: var(--primary); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .hero-mobile-intro h2 { max-width: 580px; margin: 0 auto .75rem; color: var(--text-primary); font-size: clamp(1.12rem, 5.2vw, 1.45rem); line-height: 1.4; }
  .hero-mobile-trust-list { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem .8rem; }
  .hero-mobile-trust-list span { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-secondary); font-size: .75rem; font-weight: 600; }
  .hero-mobile-trust-list svg { width: 14px; height: 14px; fill: none; stroke: var(--primary); stroke-width: 2.5; }

  .hero-doctor-spotlight {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    margin: 0.9rem 1rem;
    background: linear-gradient(135deg, var(--secondary-light) 0%, var(--bg-primary) 55%);
    border: 1px solid rgba(21, 128, 61, 0.16);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  .hero-doctor-spotlight-avatar-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .hero-doctor-spotlight-avatar {
    width: 84px;
    height: 108px;
    border-radius: var(--radius-md);
    object-fit: cover;
    object-position: top center;
    display: block;
    border: 3px solid var(--bg-primary);
    box-shadow: 0 0 0 2.5px var(--primary);
  }

  /* Small trust checkmark, like a "verified professional" badge, anchored
     to the avatar's corner - reinforces credibility at a glance. */
  .hero-doctor-spotlight-verified {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--bg-primary);
    border: 2px solid var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-doctor-spotlight-info {
    flex: 1;
    min-width: 0;
  }

  .hero-doctor-spotlight-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.2rem;
    color: var(--secondary);
    gap: 0.15rem;
    margin-bottom: 0.35rem;
  }

  .hero-doctor-spotlight-rating svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  .hero-doctor-spotlight-rating span {
    margin-left: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-hover);
    white-space: normal;
  }

  .hero-doctor-spotlight-info h3 {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    font-weight: 800;
    color: var(--primary-hover);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: initial;
  }

  .hero-doctor-spotlight-info p {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-secondary);
    white-space: normal;
  }

  .hero-doctor-spotlight-credential {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary);
    margin-top: 0.2rem;
  }

}

/* Mobile Devices (576px or less) */
@media (max-width: 576px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  /* The 24px side margin felt heavy on narrow phones - trimmed everywhere
     (this is the shared .container used across every section). */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .service-card-body {
    padding: 1.5rem;
  }

  .header-hotline {
    display: none; /* Hide hotline from header to save space on mobile */
  }

  .floating-widgets { display: none; }
  .mobile-action-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1500; display: grid; grid-template-columns: .85fr .9fr .9fr 1.25fr; min-height: 64px; padding: 5px max(7px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)); background: rgba(255,255,255,.96); border-top: 1px solid rgba(24,52,43,.12); box-shadow: 0 -7px 24px rgba(20,55,43,.12); backdrop-filter: blur(14px); }
  .mobile-action-bar a { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-secondary); font-size: .66rem; font-weight: 700; border-radius: 10px; }
  .mobile-action-bar svg { width: 21px; height: 21px; }
  .mobile-action-call svg { fill: var(--primary); }
  .mobile-zalo-mark { display: grid; width: 25px; height: 21px; place-items: center; color: #fff; font-size: .52rem; font-weight: 800; background: #0866ff; border-radius: 6px; }
  .mobile-action-facebook svg { fill: #1877f2; }
  .mobile-action-booking { color: #fff !important; background: linear-gradient(135deg, var(--primary), #08783e); box-shadow: 0 4px 11px rgba(21,128,61,.2); }
  .mobile-action-booking svg { fill: none; stroke: currentColor; stroke-width: 2; }

  .booking-modal { align-items: flex-end; padding: 0; }
  .booking-modal-inner { max-width: none; max-height: min(92dvh, 760px); border-radius: 20px 20px 0 0; transform: translateY(100%); }
  .booking-modal.is-open .booking-modal-inner { transform: translateY(0); }
  .booking-modal-inner .booking-card { padding: 1.4rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .booking-modal-close { top: .65rem; right: .65rem; }

  .hero-cta-bar-inner {
    justify-content: center;
    text-align: center;
    padding: 1.25rem 1.5rem;
  }

  .hero-cta-bar-inner .btn {
    width: 100%;
  }

  .hero-slider-arrow {
    width: 34px;
    height: 34px;
  }

  .hero-slider-arrow svg {
    width: 16px;
    height: 16px;
  }

  /* Narrower gutters on small phones - the cards need the room more than
     the arrows do here. */
  .services-carousel-outer,
  .reviews-carousel-outer {
    padding: 1rem 2.25rem;
  }

  .carousel-nav-arrow {
    width: 30px;
    height: 30px;
  }

  .carousel-nav-arrow svg {
    width: 15px;
    height: 15px;
  }

  .carousel-nav-prev { left: 0.2rem; }
  .carousel-nav-next { right: 0.2rem; }

  .services-grid,
  .doctors-grid,
  .gallery-album-grid {
    grid-template-columns: 1fr;
  }

  .doctor-team-card .doctor-card-body {
    min-height: 134px;
    padding: 1rem 1.1rem 1.1rem;
  }

  .gallery-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-related-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .stat-item { min-height: 138px; padding: 1.35rem .65rem; border-bottom: 1px solid rgba(255,255,255,.18); }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.18); }
  .stat-item:nth-last-child(-n + 2) { border-bottom: 0; }
  .stat-item::after { display: none !important; }
  .stat-number { font-size: clamp(2rem, 10vw, 2.7rem); }
  .stat-label { font-size: .75rem; line-height: 1.35; }

  .timeline-grid {
    grid-template-columns: 1fr;
  }

  .ba-slider-container {
    aspect-ratio: 4/3;
  }

  .ba-viewer-info {
    padding: 1.25rem;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .page-header-section {
    padding: 5.5rem 0 3.5rem;
  }

  .page-header-content h1 {
    font-size: clamp(1.8rem, 9vw, 2.4rem);
  }

  .news-article-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .news-stats {
    width: 100%;
  }

  .news-stats span {
    width: 100%;
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .floating-widgets {
    bottom: 1.5rem;
    right: 1.5rem;
  }

  .float-btn {
    width: 44px;
    height: 44px;
  }
}