/* Font Inter — tu host (tai tu Google Fonts, subset Viet+Latin, weights 400/600/700/800) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-700-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/inter-800-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-navy: #1E3A8A;
  --color-blue: #0F6CBD;
  --color-blue-light: #4FA3FF;
  --color-cyan: #00C2FF;
  --color-cyan-soft: #66D9FF;
  --color-cyan-pale: #AEEBFF;
  --color-orange: #FF6A00;
  --color-orange-light: #FFA64D;
  --color-bg: #F5FAFF;
  --color-white: #FFFFFF;
  --color-text: #102326;
  --color-muted: #4B5563;
  --color-border: #D7E8F7;

  --gradient-blue: linear-gradient(135deg, #1E3A8A 0%, #0F6CBD 100%);
  --gradient-cta: linear-gradient(135deg, #FF6A00 0%, #FFA64D 100%);
  --gradient-cta-hover: linear-gradient(135deg, #E85F00 0%, #FF8F2E 100%);

  --shadow-soft: 0 18px 45px rgba(30, 58, 138, 0.12);
  --shadow-card: 0 10px 30px rgba(15, 108, 189, 0.10);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  /* Trạng thái form — chức năng UX, không phải màu thương hiệu (xem notes/handao_brand_rules.md) */
  --color-error: #c0392b;
  --color-success-bg: #e6f6ea;
  --color-success-text: #1f7a3d;

  --max-width: 1100px;
  --font-base: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  margin: 0 0 0.5em;
}

h2 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 0.5em;
  color: var(--color-navy);
}

/* Thanh nhấn màu thương hiệu dưới mỗi tiêu đề section — tạo phân cấp & nhịp */
h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: var(--gradient-cta);
}

.section-intro {
  max-width: 640px;
  margin: 0 auto 22px;
  text-align: center;
  color: var(--color-muted);
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.85em 1.7em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--gradient-cta);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--gradient-cta-hover);
  box-shadow: 0 10px 24px rgba(255, 106, 0, 0.3);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.btn-outline:hover {
  background: var(--color-bg);
}

.btn-small {
  padding: 0.55em 1.1em;
  font-size: 0.9rem;
}

.btn-full {
  width: 100%;
  text-align: center;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 10;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.3;
}

.logo-title {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}

.logo-tagline {
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--color-muted);
}

/* Nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
}

/* Màn hình hẹp (~360px) logo bóp nút CTA lại làm chữ "vấn" rớt xuống một mình.
   Giữ nút luôn trên 1 dòng. */
.main-nav a.nav-cta {
  white-space: nowrap;
}

.main-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-navy);
}

.main-nav a:hover {
  color: var(--color-blue);
}

.main-nav a.nav-cta {
  color: var(--color-white);
}

.main-nav a.nav-cta:hover {
  color: var(--color-white);
}

/* Banner đầu trang — ảnh chiến dịch, bấm vào nhảy tới form */
.top-banner {
  background: var(--color-white);
  padding: 14px 0 0;
}

.top-banner-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

.top-banner a {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease;
}

/* Vệt sáng lướt nhẹ qua banner để hút mắt.
   Cố ý lướt nhanh (~2,6s) rồi NGHỈ (~3,9s) thay vì chạy liên tục —
   chạy liên tục sẽ gây rối mắt và làm khách khó đọc chữ trong banner. */
.top-banner-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 255, 255, 0.35) 49%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.35) 51%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 200% 0;
  animation: topBannerShine 6.5s ease-in-out infinite;
}

@keyframes topBannerShine {
  0% {
    background-position: 200% 0;
  }
  40% {
    background-position: -60% 0;
  }
  100% {
    background-position: -60% 0;
  }
}

/* Người dùng bật "giảm chuyển động" trong hệ điều hành (tránh chóng mặt) → tắt hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  .top-banner-shine {
    animation: none;
    opacity: 0;
  }
}

.top-banner a:hover {
  box-shadow: var(--shadow-soft);
}

.top-banner img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .top-banner {
    padding: 10px 0 0;
  }

  .top-banner-inner {
    padding: 0 12px;
  }

  .top-banner a {
    border-radius: 14px;
  }
}

/* Banner mobile là ảnh dọc (1086×1448) — pin tỷ lệ để không giật layout khi tải */
@media (max-width: 640px) {
  .top-banner img {
    aspect-ratio: 1086 / 1448;
    object-fit: cover;
  }
}

/* Hero */
.hero {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%);
  padding: 32px 0 28px;
}

.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}

.hero-text {
  flex: 1 1 400px;
}

.hero-text h1 {
  font-size: 2.2rem;
  color: var(--color-navy);
}

.hero-sub {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 48ch;
}

.hero-note {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.hero-visual {
  flex: 1 1 360px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(135deg, #F5FAFF 0%, #EAF5FF 100%);
  border-radius: 28px;
  padding: 22px 26px 0;
  overflow: hidden;
}

.hero-doctor-photo {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  height: auto;
  object-fit: contain;
}

/* Icon tròn dùng chung (mục Công nghệ) */
.chip-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg);
}

.chip-icon img {
  display: block;
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* Icon nằm CÙNG HÀNG với tiêu đề (thay vì icon một dòng riêng phía trên)
   — gọn mắt hơn và tiết kiệm chiều cao. Dùng grid nên không phải sửa HTML. */
.card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "desc desc";
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-blue-light);
}

.card-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-bg);
}

.card-icon img {
  display: block;
}

.card h3 {
  grid-area: title;
  color: var(--color-navy);
  font-size: 1.05rem;
  margin-bottom: 0;
}

.card p {
  grid-area: desc;
  color: var(--color-muted);
  margin-bottom: 0;
  font-size: 0.95rem;
}

.conditions, .early-check, .pre-info, .process {
  padding: 44px 0;
}

/* Section "Tình trạng" — dạng mô hình răng */
.condition-models {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.condition-model-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.condition-model-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-blue-light);
}

.condition-model-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.condition-model-image img {
  width: 100%;
  max-width: 240px;
  min-width: 180px;
  height: 100%;
  object-fit: contain;
  display: block;
}

.condition-model-title {
  color: var(--color-navy);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.condition-model-desc {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: 14px;
}

/* Nhãn giải pháp gắn thẳng vào thẻ tình trạng — gộp từ mục "Giải pháp" cũ,
   để khách thấy ngay "tình trạng của tôi → phương án tương ứng". */
.condition-solution {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-wrap: balance;
}

.condition-solution b {
  color: var(--color-blue);
  font-weight: 800;
}

.condition-model-cta {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-white);
  background: var(--gradient-cta);
  padding: 7px 16px;
  border-radius: 999px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.condition-model-cta:hover {
  box-shadow: 0 8px 18px rgba(255, 106, 0, 0.32);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .condition-models {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .condition-models {
    grid-template-columns: 1fr;
  }
}

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

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

.early-check {
  background: var(--color-bg);
}

/* Steps — các bước quy trình, căn giữa & cân đều (3+3 trên desktop) */
.steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px 40px;
}

.steps li {
  position: relative;
  z-index: 1;
  flex: 0 1 300px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.step-text {
  width: 100%;
}

.step-visual {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
}

.step-icon-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-number {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white);
}

.steps h3 {
  font-size: 1rem;
  margin-bottom: 0.2em;
  color: var(--color-navy);
}

/* Nhãn công nghệ gắn vào đúng bước dùng nó — gộp từ mục "Công nghệ" cũ,
   thay vì liệt kê lại thành một khu vực riêng. */
.step-tech {
  display: block;
  margin: 0 auto 4px;
  max-width: 30ch;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-blue);
  text-wrap: balance;
}

.steps p {
  color: var(--color-muted);
  font-size: 0.92rem;
  margin: 0 auto;
  max-width: 26ch;
}

/* "Trồng răng Implant là gì?" — kiến thức nền, đặt cuối trang nên cho GẬP lại
   (dùng chung kiểu accordion với FAQ ngay phía trên cho đồng bộ).
   Đây là nội dung TRA CỨU, không phải nội dung thuyết phục → giấu được. */
.pre-info-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.pre-info-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 48px 18px 20px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-navy);
  position: relative;
  text-wrap: balance;
}

.pre-info-card > summary::-webkit-details-marker {
  display: none;
}

.pre-info-card > summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-blue);
}

.pre-info-card[open] > summary::after {
  content: "\2013";
}

.pre-info-card > summary:hover {
  color: var(--color-blue);
}

.pre-info-card .pre-info-inner {
  padding: 0 20px 22px;
}

.pre-info-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 62%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.96rem;
  color: var(--color-text);
}

.info-list-icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.pre-info-visual {
  flex: 0 0 42%;
  background: linear-gradient(135deg, #F5FAFF 0%, #EAF5FF 100%);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}

.pre-info-visual img {
  display: block;
  max-width: 340px;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  margin: 0 auto;
}

.pre-info-visual-caption {
  margin: 12px -20px 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-muted);
  white-space: nowrap;
  text-align: center;
}

/* Form */
.form-section {
  background: var(--color-bg);
  padding: 48px 0;
}

.form-section h2 {
  color: var(--color-navy);
}

.form-intro {
  text-align: center;
  color: var(--color-muted);
  margin-bottom: 6px;
}

/* Khối nhắc lại ưu đãi ngay tại form — chốt lý do để khách để lại thông tin */
.form-offer {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 600px;
  margin: 14px auto;
  padding: 12px 18px;
  background: #FFF4EC;
  border: 1px solid #FFD3B3;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.45;
}

.form-offer-icon {
  color: var(--color-orange);
  flex-shrink: 0;
}

.form-offer strong {
  color: var(--color-orange);
}

.form-privacy-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  max-width: 600px;
  margin: 0 auto 24px;
  text-wrap: balance;
}

#lead-form {
  max-width: 540px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-soft);
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: var(--color-text);
}

.required {
  color: var(--color-error);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-text);
  resize: vertical;
}

.form-group textarea {
  min-height: 90px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(15, 108, 189, 0.15);
}

.form-group.has-error input,
.form-group.has-error select {
  border-color: var(--color-error);
}

.form-group.is-prefilled select {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(15, 108, 189, 0.15);
  animation: prefilledPulse 1.6s ease;
}

@keyframes prefilledPulse {
  0% { box-shadow: 0 0 0 0 rgba(15, 108, 189, 0.35); }
  100% { box-shadow: 0 0 0 3px rgba(15, 108, 189, 0.15); }
}

@media (prefers-reduced-motion: reduce) {
  .form-group.is-prefilled select {
    animation: none;
  }
}

.error-message {
  display: block;
  color: var(--color-error);
  font-size: 0.85rem;
  min-height: 1.2em;
  margin-top: 4px;
}

.form-success {
  margin-top: 16px;
  padding: 14px;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 600;
}

/* Footer */
.site-footer {
  position: relative;
  background: var(--gradient-blue);
  color: var(--color-white);
  padding: 44px 0;
  background-image: url("assets/footer-pattern.svg"), var(--gradient-blue);
  background-repeat: repeat, no-repeat;
  background-size: 140px 140px, 100% 100%;
}

.footer-icon {
  vertical-align: -2px;
  margin-right: 6px;
  color: var(--color-cyan-pale);
  flex: 0 0 auto;
}

.footer-locations h4 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-locations a {
  display: inline-flex;
  align-items: center;
}

.footer-hours {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.footer-brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

.footer-locations a {
  color: var(--color-cyan-pale);
  text-decoration: underline;
  font-weight: 600;
}

.footer-locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
}

.footer-locations h4 {
  margin-bottom: 4px;
}

.footer-locations p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
  font-size: 0.9rem;
}

.footer-hours,
.footer-website {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.site-footer .btn-outline {
  border-color: var(--color-white);
  color: var(--color-white);
}

.site-footer .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

.footer-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0;
  max-width: 640px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column;
    gap: 20px;
  }

  /* Quan trọng: reset flex-basis vì ở chế độ column, flex-basis (400px/320px,
     vốn dùng làm chiều RỘNG ưu tiên khi xếp hàng ngang trên desktop) bị trình
     duyệt hiểu thành chiều CAO tối thiểu — gây khoảng trắng ảo rất lớn dưới
     mỗi khối trên mobile. */
  .hero-text,
  .hero-visual {
    flex-basis: auto;
  }

  .hero-visual {
    max-width: 460px;
    margin: 0 auto;
    padding: 16px 18px 0;
  }

  .hero-doctor-photo {
    max-width: 100%;
    max-height: 300px;
  }
}

@media (max-width: 680px) {
  .main-nav a:not(.nav-cta) {
    display: none;
  }
}

/* Tablet nhỏ: 2 bước / hàng cho cân đối */
@media (max-width: 700px) {
  .steps li {
    flex: 0 1 240px;
  }
}

/* Mobile: 2 cột gọn, luôn căn giữa & cân đều */
@media (max-width: 560px) {
  .steps li {
    flex: 0 1 44%;
    max-width: none;
  }

  .steps p {
    font-size: 0.86rem;
  }
}

/* Điện thoại rất hẹp: về 1 cột cho dễ đọc */
@media (max-width: 360px) {
  .steps li {
    flex-basis: 100%;
  }
}

@media (max-width: 600px) {
  h2 {
    font-size: 1.5rem;
  }

  .hero-text h1 {
    font-size: 1.7rem;
  }

  #lead-form {
    padding: 22px;
    border-radius: var(--radius-md);
  }

  .btn {
    font-size: 0.98rem;
  }

  .footer-locations h4,
  .footer-hours {
    flex-wrap: wrap;
  }
}

/* ==================================================
   MOBILE-FIRST SPACING OVERHAUL (v12)
   Gộp toàn bộ tinh chỉnh khoảng cách/kích thước cho mobile
   vào 2 breakpoint chính, tổ chức theo từng section để dễ
   bảo trì. Đặt cuối file để có độ ưu tiên cascade cao nhất,
   không cần xoá các breakpoint cột (900/860/700/680/560px)
   phía trên — những breakpoint đó chỉ đổi số cột, vẫn giữ
   nguyên logic hoạt động.
   ================================================== */

@media (max-width: 768px) {
  /* Nhịp độ section chung — giảm padding trên/dưới */
  .conditions,
  .early-check,
  .pre-info,
  .process,
  .form-section {
    padding: 32px 0;
  }

  h2 {
    font-size: 1.65rem;
    margin-bottom: 0.4em;
  }

  .section-intro {
    margin-bottom: 20px;
  }

  /* Hero */
  .hero {
    padding: 28px 0 24px;
  }

  .hero-text h1 {
    font-size: 1.9rem;
    line-height: 1.2;
  }

  .hero-sub {
    line-height: 1.55;
    margin-bottom: 14px;
  }

  .hero-note {
    margin-top: 8px;
  }

  /* Card chung (card-grid dùng ở early-check, process...) */
  .card-grid {
    gap: 16px;
  }

  .card {
    padding: 18px;
  }

  /* Section Tình trạng */
  .condition-models {
    gap: 16px;
  }

  .condition-model-card {
    padding: 16px;
  }

  .condition-model-image {
    aspect-ratio: auto;
    height: 150px;
    padding: 8px;
    margin-bottom: 10px;
  }

  .condition-model-image img {
    min-width: 0;
    max-width: 100%;
    width: auto;
    height: 100%;
  }

  .condition-model-desc {
    margin-bottom: 10px;
  }

  .condition-model-cta {
    padding: 12px 16px;
    font-size: 0.8rem;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* Quy trình */
  .steps {
    gap: 20px;
  }

  .step-visual {
    margin-bottom: 10px;
  }

  /* Thông tin trước khi niềng răng — 1 cột, ảnh trước danh sách */
  .pre-info-card {
    padding: 26px 22px;
  }

  .pre-info-card h2 {
    margin-bottom: 20px;
  }

  .pre-info-inner {
    flex-direction: column;
    gap: 20px;
  }

  .info-list {
    order: 2;
    gap: 10px;
  }

  .info-list li {
    padding: 12px 14px;
  }

  .pre-info-visual {
    order: 1;
    max-width: 360px;
    margin: 0 auto;
    padding: 16px;
  }

  .pre-info-visual img {
    max-width: 300px;
  }

  .pre-info-visual-caption {
    margin: 10px -16px 0;
    font-size: 0.68rem;
  }

  /* Form */
  #lead-form {
    padding: 20px;
  }

  .form-group {
    margin-bottom: 14px;
  }

  .form-privacy-note {
    margin-bottom: 16px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    min-height: 44px;
  }

  .form-group textarea {
    min-height: 90px;
  }

  #lead-form button[type="submit"] {
    min-height: 48px;
  }

  /* Footer */
  .site-footer {
    padding: 32px 0;
  }

  .footer-inner {
    gap: 16px;
  }

  .footer-locations {
    gap: 14px;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 1.5rem;
  }

  .hero-text h1 {
    font-size: 1.75rem;
    line-height: 1.18;
  }

  .hero-text .btn-primary {
    display: block;
    width: 100%;
    text-align: center;
  }

  .hero-inner {
    gap: 16px;
  }

  .hero-visual {
    max-width: 380px;
    padding: 14px 14px 0;
  }

  .card {
    padding: 16px;
  }

  .condition-model-card {
    padding: 14px;
  }

  .condition-model-image {
    height: 130px;
  }

  .pre-info-card {
    padding: 20px 16px;
  }

  .info-list li {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  .pre-info-visual {
    max-width: 320px;
    padding: 14px;
  }

  .pre-info-visual img {
    max-width: 280px;
  }

  .pre-info-visual-caption {
    margin: 10px -14px 0;
    font-size: 0.68rem;
  }

  .footer-locations {
    gap: 12px;
  }

  .site-footer {
    padding: 28px 0;
  }
}

/* ==================================================
   NÚT HỖ TRỢ CHUYỂN ĐỔI (v14)
   Back-to-top, floating contact buttons, popup đăng ký.
   Toàn bộ chỉ xử lý giao diện phía client — không gọi API.
   ================================================== */

/* Back to top */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 204px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--gradient-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, box-shadow 0.15s ease;
  z-index: 60;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.back-to-top.is-near-form {
  opacity: 0.35;
}

/* Floating contact buttons */
.floating-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 55;
  transition: opacity 0.2s ease;
}

.floating-contact.is-near-form {
  opacity: 0.35;
}

.floating-contact__btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.floating-contact__btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-soft);
}

.floating-contact__btn--fanpage,
.floating-contact__btn--messenger {
  background: var(--gradient-blue);
}

.floating-contact__btn--hotline {
  background: var(--gradient-cta);
}

.floating-contact__tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .floating-contact__btn:hover .floating-contact__tooltip {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .floating-contact {
    flex-direction: row;
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }

  .floating-contact__btn {
    width: 44px;
    height: 44px;
  }

  .floating-contact__tooltip {
    display: none;
  }

  .back-to-top {
    right: 12px;
    bottom: 66px;
    width: 40px;
    height: 40px;
  }
}

/* Popup đăng ký tư vấn */
.lead-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.lead-popup.is-open {
  display: flex;
}

.lead-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 35, 38, 0.45);
}

.lead-popup__card {
  position: relative;
  background: var(--color-white);
  border-radius: 24px;
  padding: 28px 24px 24px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-soft);
  text-align: center;
  animation: leadPopupIn 0.25s ease;
}

@keyframes leadPopupIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lead-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lead-popup__card h3 {
  color: var(--color-navy);
  font-size: 1.25rem;
  margin-bottom: 10px;
  padding-right: 20px;
}

.lead-popup__card p {
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.lead-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lead-popup__cta {
  min-height: 48px;
}

.lead-popup__later {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 0.88rem;
  cursor: pointer;
  padding: 8px;
  min-height: 44px;
}

.lead-popup__later:hover {
  color: var(--color-navy);
}

@media (max-width: 480px) {
  .lead-popup__card {
    padding: 24px 20px 20px;
  }
}

/* ==================================================
   PHÁ NỖI SỢ — Fear → Truth (riêng cho landing Implant)
   Mỗi dòng: cột trái là băn khoăn của khách, cột phải là
   giải thích thực tế. Đánh thẳng vào 5 nỗi sợ trong wiki
   (đau / biến chứng / chi phí / không bền / chọn sai nha khoa).
   ================================================== */
.fear-truth-section {
  padding: 44px 0;
}

.fear-truth-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fear-truth-item {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.ft-fear,
.ft-truth {
  padding: 18px 20px;
  font-size: 0.96rem;
}

.ft-fear {
  background: var(--color-bg);
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
}

.ft-truth {
  color: var(--color-text);
}

.ft-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: 1px;
}

.ft-tag--fear {
  background: #E7EEF6;
  color: var(--color-muted);
}

.ft-tag--truth {
  background: var(--gradient-cta);
  color: var(--color-white);
}

.fear-truth-cta {
  text-align: center;
  margin-top: 28px;
}

@media (max-width: 640px) {
  .fear-truth-item {
    grid-template-columns: 1fr;
  }

  .ft-fear {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .ft-fear,
  .ft-truth {
    padding: 14px 16px;
  }
}

@media (max-width: 768px) {
  .fear-truth-section {
    padding: 32px 0;
  }
}

/* ==================================================
   BỔ SUNG v2 — các section riêng cho landing Implant
   (dựa trên fact thật của Hân Đào trong wiki)
   ================================================== */

/* --- 3 cam kết dưới hero --- */
.hero-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.hero-pillar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gradient-blue);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.hero-pillar img {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}

.hero-pillar b {
  display: block;
  font-size: 0.98rem;
}

.hero-pillar span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 720px) {
  .hero-pillars {
    grid-template-columns: 1fr;
  }
}

/* --- Băng uy tín bác sĩ / FDA --- */
.authority-band {
  background: var(--gradient-blue);
  color: var(--color-white);
  background-image: url("assets/footer-pattern.svg"), var(--gradient-blue);
  background-repeat: repeat, no-repeat;
  background-size: 140px 140px, 100% 100%;
  padding: 44px 0;
}

/* Khối bác sĩ chuyên gia Implant — thẻ hồ sơ chuyên gia (glass card) */
.authority-card {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(174, 235, 255, 0.24);
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(8, 22, 60, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.authority-main {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 36px;
  padding: 34px 44px 34px;
  text-align: left;
}

/* Quầng sáng cyan thương hiệu sau lưng bác sĩ — làm áo blouse trắng bật lên */
.authority-main::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(0, 194, 255, 0.30) 0%, rgba(79, 163, 255, 0.12) 48%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.doctor-photo-frame {
  position: relative;
  z-index: 1;
  flex: 0 0 210px;
  align-self: stretch;
  min-height: 190px;
  overflow: hidden;
  border-radius: 16px;
}

.doctor-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
}

.doctor-info {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
}

.doctor-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cyan-soft);
}

.doctor-info b {
  display: block;
  font-size: 1.55rem;
  color: var(--color-white);
  line-height: 1.2;
}

.doctor-title {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-navy);
  background: var(--color-cyan-pale);
  border-radius: 999px;
  padding: 5px 15px;
}

.doctor-desc {
  margin: 12px 0 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.90);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Bằng chứng vắn tắt về BS Tùng — mỗi dòng đánh trúng một nỗi lo của khách.
   Số liệu & chức danh lấy đúng bản CANONICAL trong wiki, không tự chế. */
.doctor-creds {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left; /* luôn canh trái kể cả khi khối chữ căn giữa trên mobile */
}

.doctor-creds li {
  position: relative;
  padding-left: 26px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  /* KHÔNG dùng text-wrap balance ở đây: các cụm đã dính nbsp sẽ bị "cân"
     thành mỗi cụm một dòng. Để chữ chảy tự nhiên, nbsp lo việc không xé từ. */
}

/* Dấu tích tròn màu cyan thương hiệu */
.doctor-creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%231E3A8A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat,
    var(--color-cyan-soft);
}

/* Dùng .doctor-creds li b (specificity cao hơn) để thắng cả rule tên bác sĩ
   .doctor-info b ở desktop LẪN mobile (nếu không, chữ đậm trong bằng chứng
   bị to 20-24px và mỗi cụm rớt một dòng). */
.doctor-creds li b {
  display: inline;
  font-size: 0.92rem;
  color: var(--color-white);
  font-weight: 800;
}

.doctor-creds span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85em;
}

.authority-stats {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(174, 235, 255, 0.20);
  background: rgba(8, 22, 60, 0.18);
  margin: 0;
  padding-top: 14px;
}

/* Nhãn phân định rõ: 44 năm / 2.990 / 3 cơ sở là thành tựu THƯƠNG HIỆU,
   không phải của riêng bác sĩ (tránh nhầm 44 năm ≠ 20 năm nghề BS Tùng). */
.authority-stats-label {
  margin: 0 0 4px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cyan-soft);
}

.authority-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.authority-stat {
  padding: 22px 18px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.authority-stat:first-child {
  border-left: none;
}

.authority-stat b {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color-orange-light);
  background: var(--gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.92);
  paint-order: stroke fill;
}

.authority-stat span {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Giải pháp theo mức độ mất răng --- */
.solutions {
  padding: 44px 0;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.solution-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.solution-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-blue-light);
}

.solution-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-blue);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}

.solution-card h3 {
  color: var(--color-navy);
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.solution-card p {
  color: var(--color-muted);
  font-size: 0.92rem;
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Công nghệ & thiết bị --- */
.tech {
  background: var(--color-bg);
  padding: 44px 0;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 560px) {
  .tech-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

.tech-chip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.tech-chip .chip-icon {
  width: 40px;
  height: 40px;
}

.tech-chip b {
  display: block;
  color: var(--color-navy);
  font-size: 0.98rem;
}

.tech-chip span {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* --- Câu chuyện khách hàng (testimonial dạng text) --- */
.stories {
  padding: 44px 0;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.story-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.story-quote {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-blue-light);
  font-family: Georgia, serif;
  margin-bottom: 6px;
}

.story-card p {
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.story-meta {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

.story-meta b {
  color: var(--color-navy);
  font-size: 0.95rem;
}

.story-meta span {
  display: block;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.stories-disclaimer {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-style: italic;
  margin: 22px 0 0;
}

@media (max-width: 860px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
}

/* --- FAQ --- */
.faq {
  background: var(--color-bg);
  padding: 44px 0;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 20px;
  font-weight: 600;
  color: var(--color-navy);
  position: relative;
  font-size: 0.98rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-blue);
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  content: "\2013";
}

.faq-item summary:hover {
  color: var(--color-blue);
}

.faq-answer {
  padding: 0 20px 18px;
  color: var(--color-muted);
  font-size: 0.94rem;
}

/* --- Ảnh cấu tạo Implant: nút phóng to --- */
.pre-info-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  position: relative;
}

.pre-info-zoom img {
  display: block;
  max-width: 340px;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  margin: 0 auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pre-info-zoom:hover img,
.pre-info-zoom:focus-visible img {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.pre-info-zoom-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-blue);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 12px;
}

/* --- Lightbox phóng to ảnh (dùng chung cho ảnh có [data-zoom-src]) --- */
.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  align-items: center;
  justify-content: center;
}

.image-lightbox.is-open {
  display: flex;
}

.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 35, 38, 0.82);
}

.image-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: min(1100px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  display: flex;
  animation: leadPopupIn 0.2s ease;
}

.image-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  background: var(--color-white);
}

.image-lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow-card);
}

.image-lightbox__close:hover {
  background: var(--color-white);
}

/* --- Responsive gộp cho các section mới --- */
@media (max-width: 768px) {
  .solutions,
  .tech,
  .stories,
  .faq {
    padding: 32px 0;
  }

  .pre-info-zoom img {
    max-width: 300px;
  }

  .authority-band {
    padding: 28px 0;
  }

  .authority-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 26px 22px 0;
  }

  .doctor-photo-frame {
    flex: 0 0 auto;
    width: 172px;
    height: 200px;
    align-self: center;
  }

  .doctor-info {
    padding-bottom: 24px;
  }

  .doctor-info b {
    font-size: 1.3rem;
  }

  .doctor-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .authority-stats-grid {
    grid-template-columns: 1fr;
  }

  .authority-stat {
    padding: 16px 18px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  .authority-stat:first-child {
    border-top: none;
  }

  .authority-stat b {
    font-size: 1.7rem;
  }
}

/* ==================================================
   TỐI ƯU NGẮT DÒNG (v5)
   - Tiêu đề: cân dòng (balance) cho đều 2 vế.
   - Đoạn văn: pretty để tránh "chữ mồ côi" đứng lẻ cuối dòng.
   - Bỏ giới hạn 26ch quá hẹp ở mô tả bước quy trình (nguyên nhân
     chính khiến text bị xuống dòng thừa).
   ================================================== */
h1, h2, h3, h4,
.hero-pillar b,
.tech-chip b,
.solution-card h3,
.doctor-title,
/* Các đoạn NGẮN (2-3 dòng): phải dùng balance, không dùng pretty —
   pretty chỉ chống mồ côi ở đoạn dài, đoạn ngắn vẫn rớt chữ lẻ. */
.tech-chip span,
.hero-pillar span,
.section-cta-text,
.story-meta b,
.story-meta span,
.condition-model-desc,
.authority-stat span,
.footer-locations p,
.faq-item summary {
  text-wrap: balance;
}

/* Ngắt dòng thủ công chỉ dành cho desktop.
   Lý do: <br> áp đặt một chỗ ngắt CỐ ĐỊNH cho mọi bề rộng màn hình. Ở desktop
   nó tách câu đúng vế ý; nhưng xuống điện thoại vế đầu đã tự xuống dòng rồi,
   dấu ngắt thành thừa và làm dòng giữa cụt lủn. Dưới 768px thì tắt đi, để
   trình duyệt tự chia (các từ ghép đã được dính bằng nbsp nên vẫn không xé nghĩa). */
@media (max-width: 768px) {
  br.br-desktop {
    display: none;
  }
}

/* text-wrap chỉ ăn trên khối (block), không ăn trên thẻ nằm trong dòng (inline).
   Mấy thẻ này vốn đã chiếm riêng một dòng nên đổi sang block không đổi giao diện,
   nhưng nhờ đó balance mới chống được mồ côi chữ ("khít.", "Chuyển"). */
.tech-chip span,
.hero-pillar span,
.story-meta b {
  display: block;
}

.section-intro,
.hero-sub,
.card p,
.solution-card p,
.story-card p,
.doctor-desc,
.ft-fear,
.ft-truth,
.faq-answer,
.form-intro,
.form-privacy-note,
.footer-note,
.info-list li span {
  text-wrap: pretty;
}

/* Mô tả bước: dùng trọn bề rộng thẻ + cân dòng, bỏ cap 26ch cũ */
.steps p {
  max-width: none;
  text-wrap: balance;
}

/* ==================================================
   ĐIỂM CHẠM CHUYỂN ĐỔI (v15)
   - .section-cta: nút kêu gọi chèn giữa các mục thuyết phục
     (Quy trình / Câu chuyện KH / FAQ) — lấp "sa mạc không CTA"
     dài 8,1 màn hình từ 41,7% đến 94,5% trang.
   - .sticky-cta: thanh 2 nút dính đáy trên điện thoại, đưa hotline
     ra rõ cho nhóm khách Implant lớn tuổi (vốn thích gọi hơn điền form).
   Đặt cuối file để đè đúng vị trí nút nổi ở các breakpoint trước.
   ================================================== */

.section-cta {
  text-align: center;
  margin-top: 34px;
}

.section-cta-text {
  max-width: 46ch;
  margin: 0 auto 14px;
  color: var(--color-muted);
  font-size: 1rem;
}

/* --- Thanh CTA dính đáy: chỉ hiện trên điện thoại --- */
.sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .sticky-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(16, 35, 38, 0.12);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* Khách đã tới form rồi thì thu thanh xuống, không che nút "Gửi thông tin" */
  .sticky-cta.is-near-form {
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
  }

  .sticky-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
  }

  .sticky-cta__btn--call {
    background: var(--color-white);
    color: var(--color-navy);
    border: 2px solid var(--color-navy);
  }

  .sticky-cta__btn--form {
    background: var(--gradient-cta);
    color: var(--color-white);
  }

  /* Hotline đã nằm trong thanh CTA → bỏ khỏi cụm nút nổi cho đỡ trùng */
  .floating-contact__btn--hotline {
    display: none;
  }

  /* Đẩy cụm nút nổi & nút lên đầu trang lên trên thanh CTA */
  .floating-contact {
    bottom: 84px;
  }

  .back-to-top {
    bottom: 138px;
  }

  /* Chừa chỗ để thanh CTA không che nội dung cuối footer */
  .site-footer {
    padding-bottom: 92px;
  }
}