/* =====================================================================
   LANDING RĂNG SỨ — CSS bổ sung cho các khối RIÊNG của trang này.
   Nạp SAU styles.css (dùng chung với landing niềng răng) nên ghi đè được.
   Tách file để sau này sửa/gỡ không đụng vào styles.css gốc.
   Toàn bộ màu lấy từ biến brand khai báo ở :root trong styles.css.
   ===================================================================== */

/* ---- Dải con số uy tín dưới hero (4 ô: 44 năm · 3 cơ sở · 15 năm · Miễn phí) ---- */
.hero-stats {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.hero-stats li {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue);
  border-radius: var(--radius-md);
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}
.hero-stats b {
  color: var(--color-orange);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.hero-stats span {
  color: var(--color-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}
@media (max-width: 400px) {
  .hero-stats { gap: 6px; }
  .hero-stats b { font-size: 1.1rem; }
  .hero-stats span { font-size: 0.64rem; }
}

/* ---- Banner ưu đãi (dạng cô gái + khay, tái dùng CSS .promo-row có sẵn trong styles.css) ---- */
.promo-section { padding: 4px 0 2px; }
/* .promo-row giờ là thẻ <a> -> bỏ gạch chân, giữ màu chữ gốc */
a.promo-row { text-decoration: none; color: inherit; }
a.promo-row:hover { text-decoration: none; }

/* Dòng Zirconia được đánh dấu ưu đãi trong bảng giá */
.price-table tr.is-promo { background: #FFF3E9; }
.price-table tr.is-promo b { color: var(--color-orange); }
.row-badge {
  display: inline-block;
  background: var(--color-orange);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Gợi ý "(không bắt buộc)" cạnh nhãn ô form không bắt buộc */
.optional-hint {
  color: var(--color-muted);
  font-weight: 400;
  font-size: 0.82rem;
}

/* Nút "Chỉ đường" (Google Maps) cạnh Hotline trong popup 3 cơ sở */
.clinic-directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  color: var(--color-orange);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.clinic-directions svg { color: var(--color-orange); }
.clinic-directions:hover { text-decoration: underline; }
@media (max-width: 380px) {
  .clinic-directions { margin-left: 12px; }
}

/* =============== TỐI ƯU CHUYỂN ĐỔI (hội đồng 14 chuyên gia 2026-08-08) =============== */

/* Màu cam ĐẬM hơn cho CHỮ cam trên nền trắng (WCAG: #FF6A00 chỉ ~2,87:1). Nút nền đặc vẫn giữ #FF6A00. */
:root { --color-orange-text: #B34700; }
.hero-stats b,
.compare-mini__price b { color: var(--color-orange-text); }

/* Chống iOS tự phóng to khi chạm ô nhập: cỡ chữ ô form tối thiểu 16px */
#lead-form input, #lead-form select,
#popup-lead-form input, #popup-lead-form select { font-size: 16px; }

/* Khi form chính trong khung nhìn: KHÓA hẳn chạm nút nổi (không chỉ mờ) — khỏi cướp cú chạm nút Gửi */
.back-to-top.is-near-form,
.floating-contact.is-near-form { pointer-events: none; }

/* Dòng cam kết bảo mật dưới nút Gửi của form trang */
.form-privacy {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 10px 0 0; color: var(--color-navy);
  font-size: 0.82rem; font-weight: 600; font-style: italic; opacity: 0.85;
}

/* Nhắc ưu đãi ở màn đầu (above-the-fold) — khớp thông điệp quảng cáo -50% */
.hero-promo-note {
  margin: 8px auto 0; text-align: center;
  font-size: 0.94rem; color: var(--color-navy); font-weight: 600;
}
.hero-promo-note b { color: var(--color-orange-text); }

/* Sửa màu số ưu đãi trong khay promo: #C0392B trùng màu BÁO LỖI -> đổi sang navy (chỉ trang răng sứ) */
.promo-section .form-promo__deals b { color: var(--color-navy); }

/* Khối trấn an trên form: 3 cam kết gỡ rào cản — DẢI NGANG GỌN, giữ 3 cột cả trên mobile để trang ngắn */
.reassure-section { padding: 8px 0 2px; }
.reassure-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.reassure-list li {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue); border-radius: var(--radius-md); padding: 10px 6px;
}
.reassure-icon { font-size: 1.35rem; line-height: 1; }
.reassure-list b { color: var(--color-navy); font-size: 0.78rem; line-height: 1.3; font-weight: 700; }
@media (max-width: 380px) {
  .reassure-list { gap: 6px; }
  .reassure-list b { font-size: 0.72rem; }
}

/* Thanh CTA dính đáy màn hình — CHỈ mobile. Ẩn khi form chính vào khung nhìn (.is-hidden do JS bật). */
.sticky-cta { display: none; }
@media (max-width: 640px) {
  .sticky-cta {
    display: block;
    position: fixed; left: 10px; right: 10px; bottom: 10px;
    z-index: 54;                 /* dưới popup, trên nội dung; nút nổi (z-55) vẫn chạm được */
    text-align: center; text-decoration: none;
    font-weight: 800; font-size: 1rem; color: #fff;
    padding: 13px 16px; border-radius: 999px;
    background: linear-gradient(90deg, #FF6A00 0%, #FF8A33 100%);
    box-shadow: 0 8px 22px rgba(255, 106, 0, 0.45);
    transition: transform 0.28s ease, opacity 0.28s ease;
  }
  .sticky-cta.is-hidden { transform: translateY(170%); opacity: 0; pointer-events: none; }
  /* Xếp 3 tầng KHÔNG đè nhau (px tính từ đáy màn hình):
     thanh CTA [10–62] < nút nổi [72–116] < back-to-top [126–166]. */
  .floating-contact { bottom: 72px; }
  .back-to-top { bottom: 134px; }
  /* Widget "khách vừa đăng ký" nâng lên TRÊN cụm nút nổi (nút nổi bên phải, widget bên trái) — khỏi đè */
  .social-proof { bottom: 124px; }
  body { padding-bottom: 66px; }         /* chừa chỗ, khỏi che footer */
}

/* Ẩn khỏi màn hình nhưng trình đọc màn hình vẫn đọc được */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Cụm nút CTA đặt cuối mỗi section */
.section-cta {
  text-align: center;
  margin-top: 28px;
}

/* Nhãn TRƯỚC/SAU ở khối "Trước – sau": đưa lên GÓC TRÊN.
   Lý do: ảnh ghép có phần cận răng ở NỬA DƯỚI — để nhãn ở dưới (mặc định) sẽ che mất răng.
   Góc trên là vùng tóc/nền nên không che chi tiết quan trọng. */
/* Nhãn ca dưới mỗi ảnh trước–sau */
.ba-caption {
  text-align: center;
  margin: 8px 0 0;
  color: var(--color-navy);
  font-size: 0.82rem;
  font-weight: 600;
}

#ba-carousel .ba-label {
  top: 10px;
  bottom: auto;
}

/* ===================== HIỆU ỨNG LIGHT (dải sáng lướt) — đồng bộ 3 chỗ =====================
   Dùng lại @keyframes shineSweep có sẵn trong styles.css. Dải sáng chéo, chạy 1 lần, nhẹ nhàng. */

/* --- 1) BANNER HERO: lướt 1 lần khi trang vừa mở --- */
.hero-banner-link { position: relative; overflow: hidden; }
.hero-banner-link::before,
.hero-banner-link::after {
  content: ''; position: absolute; top: -25%; left: 0; height: 150%;
  pointer-events: none; z-index: 2;
  transform: translateX(-260%) skewX(-18deg);
}
.hero-banner-link::after {
  width: 34%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 30%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.28) 70%, rgba(255,255,255,0) 100%);
  animation: shineSweep 2.8s linear .8s 1;
}
.hero-banner-link::before {
  width: 18%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.36) 50%, rgba(255,255,255,0) 100%);
  animation: shineSweep 2.8s linear 1.2s 1;
}

/* --- 2) BĂNG CHUYỀN TRƯỚC–SAU (#ba-carousel): lướt mỗi khi đổi ảnh (JS thêm .is-shining) --- */
#ba-carousel .why-slide-media { position: relative; overflow: hidden; }
#ba-carousel .why-slide-media::before,
#ba-carousel .why-slide-media::after {
  content: ''; position: absolute; top: -25%; left: 0; height: 150%;
  pointer-events: none; z-index: 3;   /* trên cả nhãn TRƯỚC/SAU */
  transform: translateX(-260%) skewX(-18deg);
}
#ba-carousel .why-slide-media::after {
  width: 38%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 30%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.30) 70%, rgba(255,255,255,0) 100%);
}
#ba-carousel .why-slide-media::before {
  width: 20%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
}
#ba-carousel .why-slide-media.is-shining::after { animation: shineSweep 2.6s linear 1; }
#ba-carousel .why-slide-media.is-shining::before { animation: shineSweep 2.6s linear .4s 1; }

/* --- 3) BANNER TRONG POPUP: lướt 1 lần khi popup nổ (đổi display -> animation chạy lại) --- */
#lead-popup .lead-popup__banner { position: relative; overflow: hidden; }
#lead-popup .lead-popup__banner::before,
#lead-popup .lead-popup__banner::after {
  content: ''; position: absolute; top: -25%; left: 0; height: 150%;
  pointer-events: none; z-index: 2;
  transform: translateX(-260%) skewX(-18deg);
}
#lead-popup.is-open .lead-popup__banner::after {
  width: 36%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 30%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.28) 70%, rgba(255,255,255,0) 100%);
  animation: shineSweep 2.6s linear .3s 1;
}
#lead-popup.is-open .lead-popup__banner::before {
  width: 18%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.36) 50%, rgba(255,255,255,0) 100%);
  animation: shineSweep 2.6s linear .7s 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-link::before, .hero-banner-link::after,
  #ba-carousel .why-slide-media.is-shining::before, #ba-carousel .why-slide-media.is-shining::after,
  #lead-popup.is-open .lead-popup__banner::before, #lead-popup.is-open .lead-popup__banner::after { animation: none; }
}

/* ===================== POPUP "NỔ" ĐĂNG KÝ — banner trên + form đè dưới (1 thẻ liền mạch) =====================
   Kiểu tham khảo: mẫu phun xăm + thammylinhanh.com — banner ở đầu, form nằm trên nền gradient cùng thẻ,
   ô nhập bo tròn dạng viên, nút CTA cam, dòng "Cam kết bảo mật thông tin khách hàng" ở cuối.
   KHÔNG gắn ưu đãi giả (vault chưa có chương trình răng sứ thật). */
#lead-popup .lead-popup__card {
  /* Nền gradient xanh nhạt để banner (nền sáng) hòa vào form, không có lằn trắng gãy khúc */
  background: linear-gradient(180deg, #EAF5FF 0%, #F5FAFF 55%, #FFFFFF 100%);
  /* MỤC TIÊU: banner vuông 1:1 + form hiện HẾT trong 1 màn, KHÔNG phải kéo.
     Nới max-height + nén form gọn để tổng vừa khít màn điện thoại nhỏ nhất (iPhone SE 667px). */
  max-height: 94vh;
}

#lead-popup .lead-popup__banner img {
  /* Banner VUÔNG 1:1, rộng bằng thẻ, bo góc theo thẻ */
  border-radius: 20px 20px 0 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;   /* nếu ảnh không thật vuông, ưu tiên giữ phần trên (tiêu đề/model) */
}

#lead-popup .lead-popup__form-wrap {
  padding: 10px 16px 12px;   /* form sát banner, gọn */
}

/* Ẩn dòng "Để lại thông tin…" khỏi mắt (banner đã nói rồi) — vẫn giữ cho trình đọc màn hình
   để tiết kiệm chiều cao, form lọt gọn 1 màn. */
#lead-popup .lead-popup__sub {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Các ô sát nhau hơn để dồn gọn */
#lead-popup #popup-lead-form .form-group {
  margin-bottom: 7px;
}

/* Ô nhập + select dạng VIÊN (pill) trắng nổi trên nền gradient — chữ ký của kiểu form này.
   Padding thấp lại (~44px cao) để 4 ô + nút + dòng bảo mật + banner vuông vừa 1 màn. */
#lead-popup .form-group input,
#lead-popup .form-group select {
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 11px 16px;
  box-shadow: 0 2px 6px rgba(15, 108, 189, 0.06);
}

#lead-popup .form-group select {
  padding-right: 40px;   /* chừa chỗ mũi tên */
}

/* Nút CTA bo tròn viên cho đồng bộ với ô nhập */
#lead-popup .lead-popup__submit {
  border-radius: 999px;
  margin-top: 2px;
  padding: 12px;
}

/* Dòng cam kết bảo mật ở cuối */
.lead-popup__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 9px 0 0;
  color: var(--color-navy);
  font-size: 0.8rem;
  font-weight: 600;
  font-style: italic;
  opacity: 0.85;
}

.lead-popup__privacy svg {
  flex: 0 0 auto;
  color: var(--color-blue);
}

/* ===================== HERO DẠNG BANNER (ảnh anh Thiện thiết kế) ===================== */
/* Bỏ khoảng đệm trên của .hero để banner sát header; giữ nền chuyển màu nhẹ phía dưới. */
.hero--banner {
  padding: 0 0 24px;
}

.hero-banner-link {
  display: block;
  max-width: 1440px;   /* không để banner ngang phóng quá to trên màn siêu rộng */
  margin: 0 auto;
  line-height: 0;      /* bỏ khe trắng dưới ảnh inline */
}

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

/* Hàng CTA + ghi chú ngay dưới banner — căn giữa cho cân, nhất là trên điện thoại */
.hero-cta-row {
  text-align: center;
  padding-top: 20px;
}

.hero-cta-row .hero-note {
  margin-top: 12px;
}

@media (max-width: 640px) {
  .hero--banner {
    padding-bottom: 16px;
  }
  .hero-cta-row {
    padding-top: 16px;
  }
  /* Nút CTA dưới banner trải rộng cho dễ chạm trên điện thoại */
  .hero-cta-row .btn-primary {
    display: block;
    width: 100%;
  }
}

/* Hai nút cạnh nhau: nút phụ (xem bảng giá) + nút chính (đăng ký) */
.section-cta--pair {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Nút phụ — viền xanh, nhẹ hơn CTA cam để không tranh chỗ với nút đăng ký */
.btn-outline-blue {
  background: var(--color-white);
  color: var(--color-navy);
  border: 2px solid var(--color-blue-light);
  box-shadow: none;
}

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

/* Chữ bấm được nằm giữa câu (trong FAQ) — trông như link, hành xử như nút */
.link-inline {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.link-inline:hover {
  color: var(--color-navy);
}

/* Ghi chú: footer GIỮ NGUYÊN 3 khối địa chỉ chi tiết (Bs Thiện chốt 2026-07-24) —
   em từng rút gọn thành 1 dòng + nút mở popup, anh yêu cầu trả lại như cũ.
   Chấp nhận việc footer và popup #clinic-popup cùng nêu địa chỉ: footer là nơi khách
   và Google quen tìm thông tin liên hệ, không coi là trùng lặp thừa. */

/* Dòng gợi ý dưới tiêu đề form — lối vào FAQ và bảng giá cho khách còn băn khoăn */
.form-helper-links {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.92rem;
  margin: -18px auto 24px;
  max-width: 520px;
}

/* Popup "Tìm hiểu" giờ còn 2 cột (đã gỡ cột trùng với popup Cẩm nang) — ghi đè grid 3 cột.
   CHỈ áp cho máy tính: file này nạp sau styles.css nên nếu không bọc @media sẽ đè luôn
   luật mobile (≤768px = 1 cột) khiến điện thoại hiện 2 cột chật. Bọc min-width để tránh. */
@media (min-width: 769px) {
  .learn-cols--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- FAQ đặt trong popup "Tìm hiểu về Răng sứ" --- */
.learn-faq-title {
  margin: 24px 0 12px;
  color: var(--color-navy);
  font-size: 1rem;
  text-align: center;
}

.learn-faq .faq-item {
  background: var(--color-bg);
}

.learn-faq .faq-item summary {
  font-size: 0.93rem;
  padding: 13px 40px 13px 15px;
  min-height: 44px;
}

.learn-faq .faq-item p {
  padding: 0 15px 14px;
  font-size: 0.9rem;
}

/* --- Khối TRƯỚC – SAU: khung "đang cập nhật" khi chưa có ảnh thật --- */
.ba-frame--empty {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, #EAF5FF 0%, #F7FBFF 100%);
  border: 2px dashed var(--color-blue-light);
  border-radius: var(--radius-sm);
}

.ba-empty-note {
  color: var(--color-blue);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.4;
  opacity: 0.75;
}

/* Nhãn TRƯỚC / SAU dùng lại style .ba-label có sẵn trong styles.css;
   ở khung trống làm mờ nhẹ để không tranh chỗ với dòng "đang cập nhật". */
.ba-frame--empty .ba-label {
  opacity: 0.55;
}

/* --- Popup "Cẩm nang khi làm răng sứ" — 4 cam kết dạng danh sách dọc --- */
.guide-pledge-list {
  display: block;   /* ghi đè grid 2 cột của .pledge-list — trong popup hẹp xếp dọc cho dễ đọc */
  margin-bottom: 20px;
}

.guide-pledge-list li {
  margin-bottom: 12px;
}

.guide-pledge-list li:last-child {
  margin-bottom: 0;
}

/* --- Popup "Bảng giá & bảo hành" — rộng hơn popup thường vì có 2 bảng --- */
.price-popup__card {
  max-width: 760px;
}

.price-popup .price-table-title {
  font-size: 1rem;
  margin: 20px 0 10px;
}

.price-popup .price-table-title:first-of-type {
  margin-top: 14px;
}

.price-popup .price-wrap {
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.price-popup .price-notes {
  margin-top: 18px;
}

/* --- Thẻ tình trạng dùng ICON thay vì ảnh mô hình --- */
.condition-model-image--icon {
  aspect-ratio: 1 / 1;
  max-width: 96px;
  padding: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EAF5FF 0%, #F7FBFF 100%);
  border: 1px solid var(--color-border);
}

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

/* --- Ảnh carousel dạng cutout (nền trong suốt) — hiện trọn ảnh, không cắt xén --- */
.why-slide-media--cutout {
  background: linear-gradient(135deg, #E8F4FF 0%, #FFFFFF 60%, #F2F9FF 100%);
}

.why-slide-media--cutout > img {
  object-fit: contain;
  padding: 12px 12px 0;
}

/* =========================== SO SÁNH =========================== */
.compare-section {
  padding: 56px 0;
  background: var(--color-white);
}

.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background: var(--color-white);
}

.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.compare-table thead th {
  background: var(--gradient-blue);
  color: #fff;
  text-align: left;
  padding: 14px 16px;
  font-size: 0.98rem;
  font-weight: 700;
  vertical-align: bottom;
}

.compare-table thead th span {
  display: block;
  font-weight: 500;
  font-size: 0.82rem;
  opacity: 0.85;
}

.compare-table tbody th {
  text-align: left;
  padding: 14px 16px;
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--color-bg);
  width: 30%;
}

.compare-table tbody td {
  padding: 14px 16px;
  color: var(--color-muted);
  vertical-align: top;
}

.compare-table tbody td b {
  color: var(--color-navy);
}

.compare-table tbody tr + tr th,
.compare-table tbody tr + tr td {
  border-top: 1px solid var(--color-border);
}

.compare-note {
  max-width: 760px;
  margin: 20px auto 0;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: #FFF6EE;
  border: 1px solid #FFD9B8;
  color: #7A3E00;
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
}

.compare-note b {
  color: #7A3E00;
}

/* --- Tóm tắt bọc/dán trên trang chính (bản gọn, bảng chi tiết ở popup) --- */
.compare-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 6px;
}

.compare-mini__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue);
  border-radius: var(--radius-md);
  padding: 16px 16px 14px;
}

/* Hàng ngang: tiêu đề bên trái, giá bên phải — gộp 2 dòng thành 1 */
.compare-mini__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.compare-mini__item h3 {
  color: var(--color-navy);
  font-size: 1.02rem;
  margin: 0;
}

.compare-mini__item h3 span {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.compare-mini__item p {
  margin: 0 0 6px;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.compare-mini__price {
  margin: 0 !important;
  color: var(--color-navy);
  font-size: 0.9rem;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

.compare-mini__price b {
  color: var(--color-orange);
}

/* Popup so sánh — rộng như popup bảng giá để bảng 3 cột vừa trên máy tính */
.compare-popup__card {
  max-width: 720px;
}

@media (max-width: 640px) {
  .compare-mini {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =========================== BẢNG GIÁ =========================== */
.price-section {
  padding: 56px 0;
  background: var(--color-bg);
}

.price-table-title {
  text-align: center;
  color: var(--color-navy);
  font-size: 1.08rem;
  margin: 26px 0 12px;
}

.price-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background: var(--color-white);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.price-table thead th {
  background: var(--gradient-blue);
  color: #fff;
  text-align: left;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.price-table thead th:last-child,
.price-table tbody td:last-child {
  text-align: right;
}

.price-table tbody td {
  padding: 12px 16px;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
}

.price-table tbody td:nth-child(2),
.price-table tbody td:nth-child(3) {
  color: var(--color-muted);
  white-space: nowrap;
}

.price-table tbody td:last-child {
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
}

.price-table tbody tr.is-highlight {
  background: linear-gradient(135deg, #EAF5FF 0%, #F7FBFF 100%);
}

.price-table tbody tr.is-highlight td b {
  color: var(--color-orange);
}

.price-notes {
  list-style: none;
  margin: 22px auto 0;
  padding: 0;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.price-notes li {
  position: relative;
  padding-left: 22px;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.price-notes li::before {
  content: "\2022";
  position: absolute;
  left: 6px;
  color: var(--color-blue);
  font-weight: 800;
}

.price-notes b {
  color: var(--color-navy);
}

/* =========================== CAM KẾT =========================== */
.pledge-section {
  padding: 56px 0;
  background: var(--color-white);
}

.pledge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.pledge-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}

.pledge-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pledge-list h3 {
  color: var(--color-navy);
  font-size: 1rem;
  margin: 0 0 5px;
}

.pledge-list p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

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

.faq-list {
  max-width: 820px;
  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-sm);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 46px 15px 18px;
  position: relative;
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.45;
  min-height: 48px;
  display: flex;
  align-items: center;
}

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

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.2px solid var(--color-blue);
  border-bottom: 2.2px solid var(--color-blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}

.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq-item[open] summary {
  background: linear-gradient(135deg, #EAF5FF 0%, #F7FBFF 100%);
}

.faq-item p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--color-muted);
  font-size: 0.93rem;
  line-height: 1.6;
}

.faq-item p a {
  color: var(--color-blue);
  font-weight: 600;
}

/* Nút CTA trên header: chữ dài cho máy tính, chữ ngắn cho điện thoại */
.nav-cta-short { display: none; }

/* =========================== MOBILE =========================== */
@media (max-width: 900px) {
  .pledge-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* ƯU TIÊN ĐIỆN THOẠI — header dính chiếm 98px (15% màn hình) vì nút CTA xuống 2 dòng.
     Rút chữ nút còn "Đăng ký" + thu gọn logo để header còn ~66px, trả chỗ cho nội dung. */
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }

  .header-inner {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .logo {
    align-items: flex-start;
    text-align: left;
  }

  .logo-title {
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .logo-tagline {
    font-size: 0.62rem;
  }

  .main-nav a.nav-cta {
    white-space: nowrap;
    padding: 9px 16px;
    font-size: 0.9rem;
  }

  /* Popup bảng giá trên điện thoại: thu khoảng đệm để bảng có thêm ~40px bề ngang,
     tên dòng sứ khỏi bị bó thành 4 dòng. */
  .price-popup {
    padding: 10px;
  }

  .price-popup .info-popup__scroll {
    padding: 24px 12px 18px;
  }

  .price-popup .price-table thead th,
  .price-popup .price-table tbody td {
    padding: 9px 8px;
  }

  .price-popup .price-table {
    font-size: 0.82rem;
  }

  .compare-section,
  .price-section,
  .pledge-section,
  .faq-section {
    padding: 38px 0;
  }

  .condition-model-image--icon {
    max-width: 68px;
    padding: 13px;
    margin-bottom: 10px;
  }

  /* Bảng giá trên điện thoại: ẩn cột "Nguồn gốc" (mọi dòng đều ghi giống nhau —
     đã nêu ở phần ghi chú bên dưới bảng) để 3 cột còn lại vừa màn hình, khỏi kéo ngang. */
  .price-table thead th:nth-child(2),
  .price-table tbody td:nth-child(2) {
    display: none;
  }

  .price-table {
    font-size: 0.85rem;
  }

  .price-table thead th,
  .price-table tbody td {
    padding: 10px 11px;
  }

  /* Cho ô giá xuống dòng trên điện thoại — dòng khoảng giá ("5.000.000 – 6.000.000")
     nếu giữ nowrap sẽ đẩy bảng tràn ngang. */
  .price-table tbody td:last-child {
    white-space: normal;
  }

  /* ƯU TIÊN ĐIỆN THOẠI — bảng so sánh KHÔNG được bắt khách kéo ngang.
     Trên mobile bảng biến thành các thẻ xếp dọc: mỗi tiêu chí một thẻ,
     bên trong là 2 dòng có nhãn "Bọc răng sứ" / "Dán sứ". Không mất chữ nào. */
  .compare-wrap {
    overflow: visible;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }

  .compare-table,
  .compare-table tbody,
  .compare-table tbody tr,
  .compare-table tbody th,
  .compare-table tbody td {
    display: block;
    width: 100%;
  }

  .compare-table {
    min-width: 0;
    font-size: 0.9rem;
  }

  .compare-table thead {
    display: none;
  }

  .compare-table tbody tr {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 12px;
  }

  .compare-table tbody th {
    background: var(--gradient-blue);
    color: #fff;
    font-size: 0.92rem;
    padding: 11px 15px;
    width: 100%;
  }

  .compare-table tbody td {
    padding: 11px 15px;
    border-top: 1px solid var(--color-border);
  }

  .compare-table tbody td::before {
    content: attr(data-label);
    display: block;
    color: var(--color-blue);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
  }

  .compare-table tbody tr + tr th,
  .compare-table tbody tr + tr td {
    border-top: 0;
  }

  .compare-table tbody tr td + td {
    border-top: 1px solid var(--color-border);
  }

  .faq-item summary {
    font-size: 0.94rem;
    padding: 14px 42px 14px 15px;
  }

  .faq-item p {
    padding: 0 15px 14px;
    font-size: 0.9rem;
  }

  .pledge-list li {
    padding: 16px;
    gap: 12px;
  }
}

/* ===== CO CÁC SECTION GẦN LẠI TRÊN ĐIỆN THOẠI (Bs Thiện chốt 2026-07-24) =====
   Trước: hầu hết 24px trên/dưới, riêng khối so sánh 38px -> khoảng cách 2 section ~48-62px.
   Giảm về 16px -> khoảng cách ~32px, trang liền mạch hơn, bớt lê thê. */
@media (max-width: 640px) {
  .conditions,
  .compare-section,
  .why-us,
  .feedback-section,
  .form-section,
  .pledge-section,
  .faq-section,
  .price-section {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  /* Khoảng cách dưới dòng mô tả (section-intro) cũng đang rộng 32px -> siết còn 18px */
  .section-intro {
    margin-bottom: 18px;
  }
}

/* ===== QUY ƯỚC CỠ TIÊU ĐỀ VÙNG (H2) — MỘT MOTIF DUY NHẤT (Bs Thiện chốt 2026-07-24) =====
   Trước đây h2 mỗi vùng một cỡ (.why-us/.conditions/.form-section + override mobile) CỘNG với
   JS tự-co -> chữ to chữ bé loạn. Nay ép TẤT CẢ tiêu đề vùng về cùng 1 cỡ, cho xuống dòng nếu dài.
   Dùng !important để thắng mọi rule h2 rải rác trong styles.css.
   - Desktop: 1.9rem · Mobile: 1.35rem · in hoa, căn giữa, navy (giữ nguyên style gốc). */
main h2 {
  font-size: 1.9rem !important;
  white-space: normal !important;
  line-height: 1.28;
}
@media (max-width: 640px) {
  main h2 {
    font-size: 1.35rem !important;
  }
}