/* ==========================================================================
   Dr Tống Hiền — style.css
   Giao diện HTML/CSS thuần, không thư viện, không tài nguyên ngoài.
   Design token ở :root theo bảng màu W2k (trắng + vàng champagne, chú thích trong :root).
   Mobile-first: mặc định cho 360px, mở rộng ở 768px / 1024px / 1440px.
   Đặt tên lớp theo khối: .khoi, .khoi__phan, biến thể .khoi--kieu, .is-open.
   ========================================================================== */

:root {
  /* Bảng màu W2k (người dùng 2026-11-13): chủ đạo TRẮNG + VÀNG champagne;
     xanh đậm chỉ còn điểm xuyết rất nhỏ (biểu tượng, viền focus, chữ nhãn nhỏ).
     Chữ trắng chỉ đặt trên nền từ vàng nâu #8C6A3C trở lên để đạt tương phản AA. */
  --color-white: #FFFFFF;
  --color-ivory: #FFFDF9;        /* trắng ngà: nền header/thanh menu */
  --color-cream: #FBF7F0;        /* kem: nền khối xen kẽ, đáy gradient thẻ */
  --color-kem-dam: #F3EBDD;      /* kem đậm: nền footer */
  --color-gold: #C8AD7F;         /* champagne: viền, đường kẻ, nền nút có chữ nâu */
  --color-gold-light: #E9DCC3;   /* vàng nhạt: viền/nền nhấn rất nhẹ */
  --color-gold-dam: #B08D57;     /* vàng đậm: chữ nhấn lớn, trạng thái rê chuột */
  --color-vang-nau: #8C6A3C;     /* vàng nâu: nền nút/tab đang chọn (chữ trắng), chữ liên kết */
  --color-vang-nau-dam: #7C5A2E; /* vàng nâu đậm: chữ nhỏ trên nền kem đậm, đạt AA */
  --color-nau: #3E3226;          /* nâu ấm: chữ thân bài, tiêu đề */
  --color-nau-phu: #7A6A58;      /* nâu phụ: chữ mô tả, ghi chú */
  --color-navy: #3E3226;         /* giữ tên token cũ (trang-con.css dùng): chữ thân bài */
  --color-text-muted: #7A6A58;   /* giữ tên token cũ: chữ phụ */
  --color-surface: #FBF7F0;      /* nền khối xen kẽ: kem nhạt thay xám lạnh cũ */
  --color-teal: #0F4C5C;         /* xanh đậm: CHỈ điểm xuyết — danh sách chỗ dùng ở báo cáo T231 */

  /* Thẻ hồ sơ bác sĩ trang chủ: nền kem rất nhạt, nhãn "trắng mờ", bóng nâu nhạt */
  --color-white-mo: rgba(255, 255, 255, 0.72);
  --color-bong-nau: rgba(62, 50, 38, 0.16);
  /* T240: thẻ hồ sơ bác sĩ — nền kem đầu gradient + vòng halo vàng champagne nhạt */
  --color-kem-ho-so: #FBF5EA;
  --color-halo-dac: rgba(233, 220, 195, 0.55);
  --color-halo-trong: rgba(233, 220, 195, 0);

  /* T243: khu hồ sơ bác sĩ — nền kem vàng ấm, viền vàng phát sáng, dải lụa vàng/teal,
     halo vàng óng (giá trị theo brief người dùng 2026-11-13 "Luxury"). */
  --color-hs-nen-1: #FBF3E2;
  --color-hs-nen-2: #F8ECD4;
  --color-hs-nen-3: #F3E1BF;
  --color-hs-nen-4: #F8EDD6;
  --color-hs-vien-1: #E3C58C;
  --color-hs-vien-2: #C8A15E;
  --color-hs-vien-3: #F0DDAF;
  --color-hs-lua-1: #B8894A;
  --color-hs-lua-2: #E9C77E;
  --color-hs-lua-3: #FFF1CC;
  --color-hs-lua-4: #D4A45A;
  --color-hs-teal-lua: #3E8A86;      /* đầu trong của dải lụa teal ở đáy */
  --color-hs-bong: rgba(140, 106, 60, 0.18);
  --color-hs-sang-the: rgba(255, 248, 232, 0.6);
  --color-hs-sang-1: rgba(255, 255, 255, 0.8);   /* vệt sáng góc trên trái thẻ */
  --color-hs-sang-2: rgba(255, 255, 255, 0.55);  /* vệt sáng giữa phải thẻ */
  --color-hs-vien-mo: rgba(200, 161, 94, 0.35);
  --color-hs-halo-vien: rgba(222, 180, 100, 0.5);
  --color-hs-halo-1: rgba(255, 244, 214, 0.95);
  --color-hs-halo-2: rgba(250, 230, 185, 0.6);
  --color-hs-halo-3: rgba(250, 230, 185, 0);
  --color-hs-halo-glow: rgba(222, 180, 100, 0.65);

  /* T244: chữ trái khu hồ sơ bác sĩ — tên vàng ánh kim (sáng trên → nâu vàng dưới),
     huy hiệu icon 52px nền gradient vàng, thẻ thông tin trắng ngà hơi trong. */
  --color-ten-1: #F3DDA6;
  --color-ten-2: #C9A35F;
  --color-ten-3: #8C6A3C;
  --color-huy-hieu-1: #FFF6DD;
  --color-huy-hieu-2: #EBCB8B;
  --color-the-tt-nen: rgba(255, 252, 245, 0.85);
  --color-the-tt-vien-glow: rgba(214, 178, 110, 0.35);
  --color-sao-vang: #C9A35F;

  /* Khu "Dịch vụ nổi bật": cam đào nhạt + đốm sáng mờ (brief người dùng 2026-11-13) */
  --color-peach: #F2B394;
  --color-peach-light: #F8E6DA;
  --color-glow-peach: rgba(242, 179, 148, 0.16);
  --color-glow-gold: rgba(200, 173, 127, 0.2);
  --color-shine: rgba(255, 255, 255, 0.55);
  /* T233: tab "Phòng khám" — nền champagne rất nhạt khi chưa chọn + vệt sáng mảnh */
  --color-champagne-nhat: #F7F0E3;
  --color-shine-mo: rgba(255, 255, 255, 0.35);
  /* T245: ánh kim lấp lánh cho chữ "Top" (dải sáng hẹp #FFF4D6 giữa các sắc vàng) */
  --color-vang-sang: #C9A35F;
  --color-vang-anh-kim: #E9D3A0;
  --color-vang-lap-lanh: #FFF4D6;

  /* T250: FOOTER sang trọng trắng ngà – vàng champagne (teal chỉ điểm xuyết ở nút chính).
     Chữ nhỏ trên nền kem dùng vàng nâu đậm #7C5A2E / nâu #3E3226 để đạt tương phản AA. */
  --color-ft-nen-1: #FFFDF8;        /* đỉnh nền footer: trắng ngà */
  --color-ft-nen-2: #F6EEDF;        /* đáy nền footer: kem */
  --color-ft-goi-1: #F3E1BF;        /* dải kêu gọi: champagne sáng */
  --color-ft-goi-2: #E9CF9A;        /* dải kêu gọi: champagne giữa */
  --color-ft-goi-3: #F7EAD0;        /* dải kêu gọi: champagne rất nhạt */
  --color-ft-goi-vien: rgba(176, 141, 87, 0.45);
  --color-ft-goi-chu-phu: #4A3418;  /* dòng phụ trên dải kêu gọi (nâu đậm, AA) */
  --color-ft-bong: rgba(140, 106, 60, 0.16);
  --color-ft-link: #7C5A2E;         /* liên kết footer (vàng nâu đậm, AA trên nền kem) */
  --color-ft-link-hover: #4A3418;   /* rê chuột: vàng nâu đậm hơn */
  --color-ft-icon-nen-1: #FFF6DD;   /* nền huy hiệu icon */
  --color-ft-icon-nen-2: #EBCB8B;
  --color-ft-hoa-tiet: 0.07;        /* độ mờ họa tiết gương mặt */
  --shadow-the: 0 10px 26px rgba(62, 50, 38, 0.1);
  --shadow-the-hover: 0 20px 44px rgba(62, 50, 38, 0.18);
  --shadow-nut: 0 8px 20px rgba(242, 179, 148, 0.4);

  /* Header: bóng nhẹ khi cuộn, không còn ánh xanh lạnh */
  --color-bong-header: rgba(62, 50, 38, 0.12);

  /* Lớp phủ hộp thoại (tìm kiếm, ảnh lớn): nâu ấm 55% */
  --color-overlay: rgba(62, 50, 38, 0.55);

  /* Lớp phủ gradient thẻ "Phòng khám" (T231; T233 làm nhẹ hơn): trắng ngà đặc dần
     rồi trong suốt về phía ảnh, chữ trên lớp phủ là nâu ấm / vàng đậm */
  --color-lop-duc: rgba(255, 253, 249, 0.92);
  --color-lop-vua: rgba(255, 253, 249, 0.6);
  --color-lop-nhat: rgba(255, 253, 249, 0.35);
  --color-lop-trong: rgba(255, 253, 249, 0);

  /* T237: khu "Phòng khám" (brief Luxury Medical Beauty) — thẻ nền trắng ngà #FAF8F2,
     chữ nâu xám #4A4038, teal đậm cho tiêu đề/nút; lớp phủ gradient 6 mốc đúng màu nền
     thẻ (250,248,242) nên chuyển sang trong suốt mà không có mép cứng. */
  --color-the-nen: #FAF8F2;
  --color-nau-xam: #4A4038;
  --color-teal-dam: #0B3A46;     /* teal đậm làm CHỮ trên nền champagne (≥ 4.5:1) */
  --color-the-lop-1: rgba(250, 248, 242, 0.98);
  --color-the-lop-2: rgba(250, 248, 242, 0.96);
  --color-the-lop-3: rgba(250, 248, 242, 0.88);
  --color-the-lop-4: rgba(250, 248, 242, 0.58);
  --color-the-lop-5: rgba(250, 248, 242, 0.2);
  --color-the-lop-6: rgba(250, 248, 242, 0);

  /* Chữ: font hệ thống, không tải font ngoài. --font-heading phải hỗ trợ tiếng Việt. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Cambria", "Times New Roman", "Noto Serif", serif;

  /* Khoảng cách */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Hình thức */
  --radius: 2px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(62, 50, 38, 0.12);
  --transition: 180ms ease;

  /* Khung trang */
  --container: 1200px;
  --header-height: 4.5rem;
}

/* --------------------------------------------------------------------------
   Nền tảng
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* scroll-behavior: smooth; */
  /* Tắt smooth scroll để các bước kiểm chứng click vào phần tử dưới fold (tab dịch vụ/bảng giá)
     được xác định chính xác — scrollIntoView của trình duyệt headless không còn animation. */
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-nau);
}

p {
  margin: 0 0 var(--space-3);
}

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

a {
  color: var(--color-vang-nau);
}

/* Focus rõ ràng cho bàn phím; không tắt outline mặc định */
:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

/* Chỉ hiện với trình đọc màn hình (h1 ẩn, nhãn ô nhập…) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Liên kết "Bỏ qua tới nội dung chính": ẩn, chỉ hiện khi nhận focus */
.bo-qua {
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  z-index: 60;
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-vang-nau);
  color: var(--color-vang-nau);
  text-decoration: none;
  transform: translateY(-200%);
}

.bo-qua:focus,
.bo-qua:focus-visible {
  transform: none;
}

.khung {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* --------------------------------------------------------------------------
   Nút dùng chung
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* Nút chính: nền vàng nâu + chữ trắng (đạt AA 4.9:1); rê chuột đậm hơn */
.btn--chinh {
  background: var(--color-vang-nau);
  border-color: var(--color-vang-nau);
  color: var(--color-white);
}

.btn--chinh:hover {
  background: var(--color-vang-nau-dam);
  border-color: var(--color-vang-nau-dam);
  color: var(--color-white);
}

/* Nút phụ: viền vàng chữ nâu; rê chuột đảo thành nền vàng nâu chữ trắng */
.btn--phu {
  background: transparent;
  border-color: var(--color-vang-nau);
  color: var(--color-vang-nau);
}

.btn--phu:hover {
  background: var(--color-vang-nau);
  border-color: var(--color-vang-nau);
  color: var(--color-white);
}

/* Nút chỉ có biểu tượng (tìm kiếm, mở/đóng menu) */
.nut-bieu-tuong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-pill);
  color: var(--color-nau);
  cursor: pointer;
}

.nut-bieu-tuong:hover {
  background: var(--color-surface);
  border-color: var(--color-gold);
}

.nut-bieu-tuong svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* --------------------------------------------------------------------------
   KHU VỰC: Header (logo, menu chính, tìm kiếm, menu di động)
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  /* Trên cột nút nổi (40) để lớp phủ tìm kiếm che được cả cột nút */
  z-index: 50;
  background: var(--color-ivory);
  border-bottom: 1px solid var(--color-gold);
  transition: box-shadow 250ms ease;
}

/* Khi cuộn > 40px (JS thêm hd-da-cuon): dải thông điệp thu về 0, header thấp hơn ~12%,
   bóng nhẹ. position: sticky nên bố cục nội dung bên dưới không bị nhảy. */
.header.hd-da-cuon {
  box-shadow: 0 6px 18px var(--color-bong-header);
}

/* --------------------------------------------------------------------------
   T226: Dải thông điệp chạy trên header (marquee CSS, thuần, không JS)
   Cấu trúc: .hd-thong-bao[role=region] > .hd-thong-bao__chay > 2 × .hd-thong-bao__ban
   Mỗi .hd-thong-bao__ban chứa các <span class="hd-thong-bao__muc"> (the/thong-bao.html).
   2 bản giống nhau + translateX(0 → -50%) = chạy vô hạn, không khoảng trống.
   -------------------------------------------------------------------------- */

.hd-thong-bao {
  overflow: hidden;
  max-height: 30px;
  /* T231: dải thông điệp nền gradient vàng nâu → vàng champagne, chữ trắng */
  background: linear-gradient(90deg, var(--color-vang-nau) 0%, var(--color-gold-dam) 100%);
  color: var(--color-white);
  transition: max-height 250ms ease, opacity 250ms ease, visibility 0s linear 0s;
}

/* Lúc cuộn: thu hẳn dải; visibility ẩn sau khi chạy xong hiệu ứng để trình đọc màn hình bỏ qua */
.header.hd-da-cuon .hd-thong-bao {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 250ms ease, opacity 250ms ease, visibility 0s linear 250ms;
}

.hd-thong-bao__chay {
  display: flex;
  width: max-content;
  animation: hd-thong-bao-chay var(--hd-thoi-gian, 60s) linear infinite;
}

/* Bản sao thứ 2 chỉ để nối tiếp hình ảnh — không cho trình đọc màn hình đọc lại */
.hd-thong-bao__ban {
  display: flex;
  flex: none;
  align-items: center;
  height: 30px;
}

.hd-thong-bao__muc {
  position: relative;
  padding-inline: var(--space-4) var(--space-6);
  font-size: 0.75rem;
  line-height: 30px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-white);
}

/* Chấm vàng ngăn cách 2 thông điệp (thuần trang trí, không phải chữ) */
.hd-thong-bao__muc::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-6) / 2 - 2px);
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-gold-light);
  transform: translateY(-50%);
}

/* Rê chuột vào dải → tạm dừng để đọc */
.hd-thong-bao:hover .hd-thong-bao__chay {
  animation-play-state: paused;
}

@keyframes hd-thong-bao-chay {
  from {
    transform: translateX(0);
  }

  to {
    /* Đúng 1 bản (nửa chiều rộng khung chạy) → điểm nối trùng khít, không giật */
    transform: translateX(-50%);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-2) var(--space-4);
  background: var(--color-ivory);
  transition: padding 250ms ease;
}

/* Cuộn xuống: giảm padding dọc → header thấp hơn ~12% mà không đổi bố cục ngang */
.header.hd-da-cuon .header__inner {
  padding-block: var(--space-1);
}

/* Logo chữ khi cai-dat.logo trống; có file logo thì ảnh thay chữ */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-nau);
  text-decoration: none;
}

.logo__anh {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* T226: logo ngang đầy đủ, không bị cắt — mobile 170px, desktop 250px (cuộn: 200px) */
.logo__anh img {
  display: block;
  width: 10.625rem;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  transition: width 250ms ease;
}

/* Có ảnh logo thật → ẩn phần chữ (vẫn còn tên qua aria-label của liên kết).
   Dùng .logo__anh-img thay vì .logo__anh để không ẩn chữ khi span .logo__anh rỗng
   (chưa có logo — chỉ hiện chữ). */
.logo:has(.logo__anh-img) .logo__chu {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.logo__chu {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.logo__ten {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-nau);
}

.logo__phu {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.header__tac-vu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
}

/* Menu di động: ẩn mặc định, .is-open do JS bật */
.header__menu {
  display: none;
}

.header__menu.is-open {
  display: block;
  position: fixed;
  /* T226: JS đo chiều cao header thật (--hd-cao-header) để menu bám sát đáy header,
     kể cả khi dải thông điệp đang hiện hay đã thu gọn lúc cuộn. */
  top: var(--hd-cao-header, var(--header-height));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  overflow-y: auto;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--color-ivory);
  border-bottom: 1px solid var(--color-gold-light);
  box-shadow: var(--shadow);
}

/* Khóa cuộn trang khi menu di động mở */
body.is-menu-open {
  overflow: hidden;
}

.header__dong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-pill);
  color: var(--color-nau);
  cursor: pointer;
}

.menu,
.menu__con-ds {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.menu__muc {
  position: relative;
}

.menu__lien-ket,
.menu__nut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 500;
  /* T231: chữ menu nâu ấm trên nền thanh menu trắng ngà */
  color: var(--color-nau);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu__lien-ket:hover,
.menu__nut:hover {
  background: var(--color-surface);
  color: var(--color-gold-dam);
}

/* T226: gạch chân trượt trái → phải khi rê chuột (thuần trang trí, không đổi kích thước) */
.menu__lien-ket::after,
.menu__nut::before {
  content: "";
  position: absolute;
  right: var(--space-3);
  bottom: 0.4rem;
  left: var(--space-3);
  height: 1px;
  background: var(--color-gold-dam);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms ease;
  pointer-events: none;
}

.menu__lien-ket:hover::after,
.menu__lien-ket:focus-visible::after,
.menu__nut:hover::before,
.menu__nut:focus-visible::before,
.menu__muc.is-open .menu__nut::before {
  transform: scaleX(1);
}

/* Mũi tên chỉ menu con; đổi hướng khi mở */
.menu__nut::after {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transition);
}

.menu__muc.is-open .menu__nut::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.menu__con {
  margin: var(--space-1) 0 var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-gold-light);
}

.menu__con-ds li + li {
  margin-top: var(--space-1);
}

.menu__con-ds a {
  display: block;
  padding: var(--space-2);
  color: var(--color-navy);
  text-decoration: none;
  border-radius: var(--radius);
}

.menu__con-ds a:hover {
  background: var(--color-surface);
  color: var(--color-gold-dam);
}

/* --------------------------------------------------------------------------
   Lớp phủ tìm kiếm (role="dialog")
   Không đặt display cho .search-hop để thuộc tính [hidden] còn tác dụng.
   -------------------------------------------------------------------------- */

.search-hop {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: var(--space-4);
  background: var(--color-overlay);
}

.search-hop__khung {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin: 12vh auto 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.search-hop__dong {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.search-hop__nhan {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-nau);
}

.search-hop__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.search-hop__o {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   Thân trang
   -------------------------------------------------------------------------- */

.trang-chinh {
  min-height: 30vh;
  padding-block: var(--space-7);
  background: var(--color-white);
}

.trang-chinh__hop {
  max-width: 46rem;
}

/* --------------------------------------------------------------------------
   Khu vực trang chủ dùng chung (mỗi khu vực là <section data-khu-vuc="…">)
   -------------------------------------------------------------------------- */

.khu-vuc {
  padding-block: var(--space-6);
}

/* Nền xám lạnh xen kẽ giữa các khu vực */
.khu-vuc--xen {
  background: var(--color-surface);
}

.khu-vuc__tieu-de {
  margin-bottom: var(--space-4);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

/* --------------------------------------------------------------------------
   KHU VỰC: Banner trượt (trang chủ)
   .banner__day là khung có tỉ lệ cố định; các ảnh xếp chồng bằng position
   absolute, chỉ ảnh đang chọn không có [hidden] nên mới hiện.
   Các chấm "Ảnh N" nằm trong luồng (flex) nên tự xếp thành hàng ở đáy khung.
   -------------------------------------------------------------------------- */

.banner {
  position: relative;
}

.banner__day {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  /* Ảnh banner thật 1774x887 (tỉ lệ 2:1): khung giữ đúng tỉ lệ để không cắt chữ/logo */
  aspect-ratio: 2 / 1;
  min-height: 8rem;
  padding: var(--space-3);
  overflow: hidden;
  background: var(--color-surface);
}

.banner__anh {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

/* Ghi đè display của khung để thuộc tính hidden còn tác dụng */
.banner__anh[hidden] {
  display: none;
}

.banner__anh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ảnh thật có chữ + logo sát mép trên: khi khung hẹp hơn 2:1 vẫn giữ phần đầu ảnh */
  object-position: center top;
}

.banner__dieu-khien {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-2);
  /* Chỉ 2 nút nhận chuột, phần còn lại để bấm xuyên xuống ảnh */
  pointer-events: none;
}

.banner__dieu-khien[hidden] {
  display: none;
}

.banner__nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  color: var(--color-nau);
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--transition), color var(--transition);
}

.banner__nut:hover {
  background: var(--color-gold-light);
}

/* Chấm chọn ảnh: nút trong suốt 2.25rem (vùng bấm đủ lớn), chấm vẽ bằng ::before */
.banner__cham {
  position: relative;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.banner__cham[hidden] {
  display: none;
}

.banner__cham::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  transform: translate(-50%, -50%);
  transition: width var(--transition), background var(--transition);
}

.banner__cham[aria-current="true"]::before {
  width: 1.6rem;
  background: var(--color-gold);
}

/* T247: chuyển ảnh bằng TRƯỢT NGANG (thay hiệu ứng mờ dần của T242).
   JS thêm .banner__anh--truot cho ảnh cũ + ảnh mới, đặt ảnh mới ngoài khung
   (translateX ±100%) rồi mới bật transition về 0; ảnh cũ trượt ra phía ngược
   lại. Chỉ animate transform nên khung 2:1 không đổi bố cục, không lộ nền
   trống; .banner__day đã có overflow: hidden nên phần ngoài khung bị cắt. */
.banner__anh--truot {
  will-change: transform;
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* T242: nút "Tạm dừng trình chiếu"/"Phát trình chiếu" ở góc dưới phải banner.
   Nền trắng mờ + viền champagne, kích thước nhỏ, không che chữ/logo (chữ banner
   nằm sát mép trên ảnh). Biểu tượng ‖ / ▶ đổi theo data-banner-trang-thai. */
.banner__dung {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--color-white-mo);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  color: var(--color-nau);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.banner__dung:hover {
  background: var(--color-white);
  color: var(--color-gold-dam);
}

.banner__dung[hidden] {
  display: none;
}

/* Mặc định hiện biểu tượng ‖ (đang phát); khi tạm dừng hiện ▶ */
.banner__dung [data-bieu-tuong="phat"] {
  display: none;
}

.banner__dung[data-banner-trang-thai="dung"] [data-bieu-tuong="dung"] {
  display: none;
}

.banner__dung[data-banner-trang-thai="dung"] [data-bieu-tuong="phat"] {
  display: block;
}

/* T242: giảm chuyển động → không có trình chiếu tự động: ẩn nút, không trượt */
@media (prefers-reduced-motion: reduce) {
  .banner__dung {
    display: none;
  }

  .banner__anh--truot {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   KHU VỰC: Phòng khám Dr Tống Hiền (trang chủ) — 3 tab Cơ sở · Không gian · Thiết bị
   T237 (brief "Luxury Medical Beauty"): thẻ ngang bo 32px, nền trắng ngà #FAF8F2;
   desktop/tablet ảnh chỉ chiếm phần bên phải (58% / 50%), vùng chữ bên trái 42%;
   lớp phủ gradient trắng ngà chuyển dần sang trong suốt (không mép cứng);
   mobile: chữ trên nền trắng ngà, ảnh 4:3 ở dưới, không lớp phủ.
   Giữ khối tab chung .tab + JS khoiTaoTab và mọi biến của slot co-so-panel;
   dưới thẻ là thư viện ảnh cuộn ngang (kéo chuột bằng main.js).
   Mọi lớp mới đều tiền tố csx-.
   -------------------------------------------------------------------------- */

/* T237: nền khu "Phòng khám" trắng ngà #FAF8F2 (brief Luxury Medical Beauty) —
   ghi đè nền kem xen kẽ của .khu-vuc--xen bằng specificity 2 lớp. */
.khu-vuc.csx-khu {
  background: var(--color-the-nen);
}

/* Hàng nút tab mobile: 3 nút chia đều 1 hàng phía trên thẻ (xem thêm T238 bên dưới) */
.tab--co-so {
  position: relative;
}

.tab--co-so .tab__ds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 0;
}

/* T238: vùng khoét lõm góc trên phải thẻ (chỉ bật từ 768px — xem @media).
   Mobile: khung bọc trong suốt, 3 tab chia đều như cũ. */
.csx-khoet {
  position: relative;
}

/* T238: tab dạng viên thuốc, cao bằng nhau, khoảng cách đều, viền champagne mảnh, bóng nhẹ.
   Chưa chọn = nền trắng ngà #FAF8F2 chữ teal; ĐANG CHỌN = nền teal #0F4C5C chữ trắng;
   rê chuột = nâng 2px, chữ champagne đậm (tab chọn giữ chữ trắng), chuyển 280ms.
   Vệt sáng (::after) chạy chéo trái → phải mỗi ~3,5s, nằm dưới chữ (.csx-tab__chu). */
.tab--co-so .tab__nut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-3);
  background: var(--color-the-nen);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px var(--color-bong-nau);
  font-size: 0.9rem;
  color: var(--color-teal);
  text-align: center;
  transition:
    background 280ms ease,
    color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease,
    transform 280ms ease;
}

/* Chữ tab nằm trên vệt sáng */
.tab--co-so .tab__nut > .csx-tab__chu {
  position: relative;
  z-index: 1;
}

/* Vệt sáng trắng-champagne mảnh, trong ~0,35; không nhận chuột, không đổi kích thước nút */
.tab--co-so .tab__nut::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  z-index: -1;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, var(--color-shine-mo), transparent);
  transform: rotate(18deg) translateX(-220%);
  animation: csx-lap-lanh 3.5s linear infinite;
  pointer-events: none;
}

.tab--co-so .tab__nut:hover {
  background: var(--color-white);
  color: var(--color-gold-dam);
  box-shadow: 0 6px 14px var(--color-bong-nau);
  transform: translateY(-2px);
}

.tab--co-so .tab__nut[aria-selected="true"],
.tab--co-so .tab__nut[aria-selected="true"]:hover {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}

/* Tab đang chọn khi rê chuột: giữ nền teal chữ trắng, chỉ sáng nhẹ + nâng 2px */
.tab--co-so .tab__nut[aria-selected="true"]:hover {
  filter: brightness(1.06);
}

@keyframes csx-lap-lanh {
  0% {
    transform: rotate(18deg) translateX(-220%);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  75%,
  100% {
    transform: rotate(18deg) translateX(360%);
    opacity: 0;
  }
}

/* Thẻ thông tin trong mỗi tab: ảnh + lớp phủ + chữ (biến giữ nguyên như cũ) */
.csx-khung {
  position: relative;
}

.csx-the {
  position: relative;
  display: flex;
  /* Mobile: chữ trên nền trắng ngà, ảnh dưới (DOM: figure trước, lớp chữ sau) */
  flex-direction: column-reverse;
  overflow: hidden;
  /* T237: nền thẻ trắng ngà #FAF8F2, bo góc 32px */
  background: var(--color-the-nen);
  border-radius: 32px;
  box-shadow: var(--shadow-the);
  color: var(--color-nau-xam);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

/* T238: đã thay chỗ khuyết nhỏ ở góc trên phải bằng PHẦN KHOÉT LÕM rộng chứa cả hàng
   3 tab (xem khối .csx-khoet ở @media min-width: 768px bên dưới). Thẻ .csx-the không
   còn pseudo-element khoét góc riêng để không có 2 chỗ khuyết chồng nhau. */

/* Rê chuột: thẻ nâng 6px, bóng đậm hơn; ảnh phóng 4% trong 400ms (không đổi bố cục) */
.csx-the:hover,
.csx-the:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-the-hover);
}

.csx-the__anh {
  margin: 0;
  overflow: hidden;
  background: var(--color-the-nen);
  /* Mobile: ảnh dưới chữ, tỉ lệ 4:3; bo góc do .csx-the (overflow: hidden) cắt */
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.csx-the__anh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ảnh phóng nhẹ khi rê chuột, cắt trong khung overflow: hidden */
  transition: transform 400ms ease;
}

.csx-the:hover .csx-the__anh img,
.csx-the:focus-within .csx-the__anh img {
  transform: scale(1.04);
}

/* Mobile: chữ nằm TRÊN ảnh, trên nền trắng ngà của thẻ (không lớp phủ) */
.csx-the__lop {
  position: relative;
  z-index: 2;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-the-nen);
}

.csx-the__chu {
  min-width: 0;
}

/* T237: tiêu đề teal đậm, font serif, in hoa (W2p: teal chỉ dùng cho chữ tiêu đề/nội dung) */
.csx-the__tieu-de {
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
}

/* Phụ đề vàng đậm: đặt trên nền trắng ngà/ kem nên chữ phải đậm và đủ lớn */
.csx-the__phu-de {
  margin-bottom: var(--space-3);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-dam);
}

.csx-the__mo-ta {
  margin-bottom: var(--space-4);
  color: var(--color-nau-xam);
}

/* Đường phân cách champagne 1px giữa các nhóm thông tin */
.csx-the__lien-he,
.csx-the__cong-nghe {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gold);
}

.csx-the__dia-chi {
  margin-bottom: var(--space-2);
  font-size: 1.05rem;
  color: var(--color-nau-xam);
}

.csx-the__gio {
  margin-bottom: var(--space-3);
  color: var(--color-nau-xam);
}

.csx-the__nhan {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-vang-nau);
}

.csx-the__chi-duong {
  margin-bottom: 0;
}

/* T237: nút "Chỉ đường": pill nền champagne #C8AD7F, chữ teal đậm (5.7:1),
   rê chuột nâng 2px + bóng + vệt sáng chạy (dùng lại nhịp csx-lap-lanh của tab). */
.csx-nut {
  position: relative;
  /* Ngăn xếp riêng để vệt sáng (z-index âm) nằm trên nền nút nhưng dưới chữ */
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: var(--color-teal-dam);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

/* Vệt sáng trắng chéo chạy trái → phải mỗi 3,5s, nằm dưới chữ */
.csx-nut::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  z-index: -1;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, var(--color-shine), transparent);
  transform: rotate(18deg) translateX(-220%);
  animation: csx-lap-lanh 3.5s linear infinite;
  pointer-events: none;
}

.csx-nut:hover,
.csx-nut:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: var(--shadow-the);
}

/* Danh sách công nghệ: nút viền champagne, chữ nâu trên nền sáng */
.csx-the__cong-nghe-ds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-the__cong-nghe-ds a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  color: var(--color-vang-nau);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.csx-the__cong-nghe-ds a:hover {
  background: var(--color-vang-nau);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   T230: Thư viện ảnh dưới thẻ Phòng khám — cuộn ngang + scroll-snap,
   ẩn thanh cuộn nhưng vẫn vuốt/kéo được; 2 nút mũi tên tròn nhỏ.
   Hành vi: assets/js/main.js → khoiTaoThuVienCoSo.
   -------------------------------------------------------------------------- */

.csx-thu-vien-khung {
  position: relative;
  margin-top: var(--space-4);
}

.csx-thu-vien {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* ẩn thanh cuộn Firefox */
  -ms-overflow-style: none; /* ẩn thanh cuộn Edge/IE cũ */
  cursor: grab;
  overscroll-behavior-x: contain;
}

.csx-thu-vien::-webkit-scrollbar {
  display: none; /* ẩn thanh cuộn Chrome/Safari/Edge */
}

/* Đang kéo bằng chuột: tắt snap để ảnh đi theo con trỏ, đổi con trỏ nắm */
.csx-thu-vien--keo {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.csx-anh {
  /* Mobile ~1,2 ảnh mỗi lượt; tablet 2, desktop 3 (xem @media bên dưới) */
  flex: 0 0 82%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
  border-radius: 18px;
  scroll-snap-align: start;
}

.csx-anh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.csx-anh:hover img {
  transform: scale(1.05);
}

/* T233: căn ảnh RIÊNG cho từng ảnh (không dùng 1 giá trị chung) bằng selector thuộc tính
   `img[src$="…"]`. Ảnh thẻ chính và ảnh gallery dùng chung vài tên tệp nhưng khung khác
   nhau nên phải đặt giá trị riêng: ảnh thẻ chính ở đây, ảnh gallery trong .csx-thu-vien. */
/* T237 (brief mới): ảnh thẻ chỉ chiếm 58% bên phải nên căn lại mặt tiền để vẫn thấy
   trọn biểu tượng gương mặt + "Dr Tống Hiền" + "BEAUTY AND SPA" + cửa ra vào.
   Các ảnh còn lại giữ giá trị T233.
   T249: ảnh gốc dọc 3:4, khung thẻ ngang chỉ thấy ~55% chiều cao và người nằm ở nửa
   dưới → hạ điểm neo xuống để lấy phần người (co-so-3: bác sĩ + khách + máy). */
.csx-the__anh img[src$="co-so-1-mat-tien-phong-kham.webp"] {
  object-position: center 22%;
}

.csx-the__anh img[src$="co-so-2-phong-dieu-tri.jpg"] {
  object-position: center 60%; /* giường + bố trí phòng */
}

.csx-the__anh img[src$="co-so-3-khong-gian-phong-kham.jpg"] {
  object-position: center 78%; /* T249: thấy bác sĩ + khách + máy móc */
}

.csx-thu-vien .csx-anh img[src$="co-so-1-mat-tien-phong-kham.webp"] {
  object-position: center 18%;
}

/* T249: ảnh nhóm người — hạ điểm neo xuống 85% để thấy trọn nhóm người từ đầu tới
   gần chân (trước đây 30% chỉ thấy phần trên khung). */
.csx-thu-vien .csx-anh img[src$="co-so-6-doi-ngu-phong-kham.jpg"],
.csx-thu-vien .csx-anh img[src$="co-so-7-doi-ngu-phong-kham.jpg"] {
  object-position: center 85%;
}

.csx-thu-vien .csx-anh img[src$="co-so-2-phong-dieu-tri.jpg"] {
  object-position: center 60%;
}

/* T249: tách co-so-4 khỏi luật chung với co-so-5 — ảnh khách nằm + kỹ thuật viên cần
   neo thấp hơn (95% / 90%). */
.csx-thu-vien .csx-anh img[src$="co-so-4-trai-nghiem-dieu-tri.jpg"] {
  object-position: center 95%;
}

.csx-thu-vien .csx-anh img[src$="co-so-5-trai-nghiem-dieu-tri.jpg"] {
  object-position: center 90%;
}

.csx-thu-vien .csx-anh img[src$="co-so-3-khong-gian-phong-kham.jpg"] {
  object-position: center 78%; /* T249: thấy bác sĩ + khách + máy móc */
}

.csx-thu-vien .csx-anh img[src$="cong-nghe-trifill-pro.jpg"] {
  object-position: center 50%;
}

/* T265: 2 ảnh mặt tiền mới của gallery tab "Cơ sở" (ảnh dọc 3:4 trong khung ngang 4:3).
   toan-canh: hạ điểm neo xuống 62% để thấy biển hiệu + cửa kính + bậc thềm;
   bien-hieu: T267 nâng lên 12% (30% cũ cắt mất đỉnh chữ "Dr Tống Hiền"). */
.csx-thu-vien .csx-anh img[src$="co-so-8-mat-tien-toan-canh.jpg"] {
  object-position: center 62%;
}

.csx-thu-vien .csx-anh img[src$="co-so-9-mat-tien-bien-hieu.jpg"] {
  object-position: center 12%;
}

/* T267: ảnh máy soi da mới (dọc 3:4; máy soi da + bác sĩ + khách ở khoảng 40–85%
   chiều cao) — neo 62% cho ảnh thẻ chính, 65% cho ảnh gallery (khung 4:3 thấp hơn). */
.csx-the__anh img[src$="co-so-10-may-soi-da.jpg"] {
  object-position: center 62%;
}

.csx-thu-vien .csx-anh img[src$="co-so-10-may-soi-da.jpg"] {
  object-position: center 65%;
}

.csx-mui-ten {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  color: var(--color-nau);
  cursor: pointer;
}

/* JS ẩn nút khi không còn chỗ cuộn (display của nút sẽ lấn át thuộc tính hidden) */
.csx-mui-ten[hidden] {
  display: none;
}

.csx-mui-ten--truoc {
  left: var(--space-2);
}

.csx-mui-ten--sau {
  right: var(--space-2);
}

.csx-mui-ten:hover {
  background: var(--color-gold-light);
}

/* T230 (review): ở màn hình nhỏ (< 768px), mọi phần tử trong khu co-so phải nằm trọn
   trong khung viewport — không có width/min-width cố định, chữ được xuống dòng,
   hàng 3 tab chia đều 1 hàng và nhỏ font nếu cần.
   T237: mobile xếp dọc — chữ trên nền trắng ngà, ảnh 4:3 ở dưới, không lớp phủ. */
@media (max-width: 767px) {
  [data-khu-vuc="co-so"] .tab--co-so .tab__ds,
  [data-khu-vuc="co-so"] .tab__noi-dung,
  [data-khu-vuc="co-so"] .tab__panel,
  [data-khu-vuc="co-so"] .csx-khung,
  [data-khu-vuc="co-so"] .csx-the,
  [data-khu-vuc="co-so"] .csx-the__lop,
  [data-khu-vuc="co-so"] .csx-the__chu {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  [data-khu-vuc="co-so"] .tab--co-so .tab__ds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
  }

  [data-khu-vuc="co-so"] .tab--co-so .tab__nut {
    min-width: 0;
    min-height: 2.25rem;
    padding: var(--space-1);
    font-size: clamp(0.78rem, 3.2vw, 0.9rem);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: none;
  }

  [data-khu-vuc="co-so"] .csx-the {
    border-radius: 24px;
  }

  [data-khu-vuc="co-so"] .csx-the__lop {
    padding: var(--space-4) var(--space-3) var(--space-3);
  }

  [data-khu-vuc="co-so"] .csx-the__chu {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-khu-vuc="co-so"] .csx-the__tieu-de {
    font-size: clamp(1.25rem, 5.5vw, 1.7rem);
    letter-spacing: 0.04em;
    word-break: break-word;
  }

  [data-khu-vuc="co-so"] .csx-the__phu-de {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    word-break: break-word;
  }

  [data-khu-vuc="co-so"] .csx-the__mo-ta {
    font-size: 0.95rem;
  }

  [data-khu-vuc="co-so"] .csx-the__dia-chi,
  [data-khu-vuc="co-so"] .csx-the__gio {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-khu-vuc="co-so"] .csx-the__cong-nghe-ds a {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  [data-khu-vuc="co-so"] .csx-thu-vien-khung,
  [data-khu-vuc="co-so"] .csx-thu-vien {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  [data-khu-vuc="co-so"] .csx-anh {
    flex: 0 0 82%;
  }
}

/* Scroll reveal (main.js → khoiTaoCoSoHien): chỉ ẩn phần tử đang nằm dưới màn hình
   lúc tải; không JS / giảm chuyển động → không thêm lớp nên không bao giờ kẹt ẩn.
   Giống .dvnb-the--an/--hien của T222, có biến trễ riêng cho từng ảnh gallery. */
.csx-an {
  opacity: 0;
  transform: translateY(24px);
}

.csx-hien {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms ease-out var(--csx-tre, 0ms),
    transform 600ms ease-out var(--csx-tre, 0ms);
}

/* Video quy trình chăm sóc (T205): nằm dưới khối ảnh + thông tin trong khu vực Cơ sở.
   Video dọc hay ngang đều vừa khung (width 100%, không vượt 40rem), không tự phát. */
.co-so__video-khoi {
  max-width: 40rem;
  margin: var(--space-6) auto 0;
}

.co-so__video {
  display: block;
  width: 100%;
  max-width: 40rem;
  max-height: 80vh;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   TAB dùng chung (khu vực Dịch vụ, Bảng giá của trang chủ; tái dùng cho trang khác)
   Cấu trúc: .tab > .tab__ds[role=tablist] > .tab__nut[role=tab] + .tab__noi-dung > .tab__panel
   Hành vi: assets/js/main.js → khoiTaoTab (bấm + phím ←/→/Home/End).
   -------------------------------------------------------------------------- */

.tab__ds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gold-light);
}

.tab__nut {
  padding: var(--space-2) var(--space-3);
  /* T231: tab thường nền trắng ngà viền champagne chữ nâu */
  background: var(--color-ivory);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  color: var(--color-nau);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.tab__nut:hover {
  background: var(--color-cream);
  color: var(--color-gold-dam);
}

/* Tab đang chọn: nền vàng nâu chữ trắng (AA 4.9:1) */
.tab__nut[aria-selected="true"],
.tab__nut[aria-selected="true"]:hover {
  background: var(--color-vang-nau);
  border-color: var(--color-vang-nau);
  color: var(--color-white);
}

/* Tab không chọn: panel có [hidden] → phải giữ display:none dù panel là grid */
.tab__panel[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   KHU VỰC: Dịch vụ nổi bật (trang chủ) — lưới thẻ dịch vụ trong mỗi tab
   -------------------------------------------------------------------------- */

.dich-vu__luoi {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem));
}

.the-dich-vu {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
}

.the-dich-vu__anh {
  margin: 0;
  background: var(--color-surface);
}

.the-dich-vu__anh img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 450;
  object-fit: cover;
}

.the-dich-vu__than {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.the-dich-vu__ten {
  margin: 0;
  font-size: 1.1rem;
}

.the-dich-vu__cong-nghe {
  margin: 0;
  font-size: 0.9rem;
}

.the-dich-vu__nhan {
  margin-right: var(--space-1);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.the-dich-vu__xem {
  margin-top: auto;
  align-self: flex-start;
  padding-bottom: 1px;
  font-weight: 600;
  color: var(--color-vang-nau);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
}

.the-dich-vu__xem:hover {
  border-bottom-color: var(--color-vang-nau);
}

/* --------------------------------------------------------------------------
   KHU VỰC: Dịch vụ nổi bật dạng thẻ (T222, W2g) — thay khối tab cũ ở trang chủ
   Lưới 3 thẻ, nền khu kem rất nhẹ + đốm sáng mờ; thẻ bo 24px, nội dung gradient
   kem → hồng đào, viền champagne; nút gradient cam đào → champagne có nhịp nổi
   và vệt sáng chạy. Mọi lớp mới đều tiền tố dvnb-.
   Hành vi: assets/js/main.js → khoiTaoDichVuNoiBat (reveal + chọn sẵn dịch vụ).
   -------------------------------------------------------------------------- */

.dvnb-khu {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-white) 62%);
}

/* Đốm sáng mờ ở 2 góc: thuần trang trí, không nhận chuột nên không chặn bấm */
.dvnb-khu::before,
.dvnb-khu::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 26rem;
  height: 26rem;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.dvnb-khu::before {
  top: -9rem;
  right: -7rem;
  background: radial-gradient(circle, var(--color-glow-gold) 0%, transparent 70%);
}

.dvnb-khu::after {
  bottom: -11rem;
  left: -8rem;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, var(--color-glow-peach) 0%, transparent 70%);
}

/* Nội dung nằm trên 2 đốm sáng */
.dvnb-khung {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   T239: Tiêu đề 2 dòng khu "Dịch vụ nổi bật" (brief người dùng 2026-11-13)
   Dòng 1 = h2.dvnb-td: chữ "Top" serif nghiêng, chữ gradient vàng kim, đứng cạnh
            pill viền champagne "DỊCH VỤ NỔI BẬT" có 2 ngôi sao lấp lánh ở 2 đầu.
   Dòng 2 = p.dvnb-td-phu: "Tại Phòng khám …" (tên lấy từ cai-dat.md).
   Hiện dần khi cuộn: main.js → khoiTaoDichVuNoiBat (cùng cơ chế với 3 thẻ).
   -------------------------------------------------------------------------- */

.dvnb-td {
  /* T245: cỡ chữ "Top" (người dùng: 128px hơi to → bớt lại một chút) — khai báo 1 chỗ
     để quy tắc nhích pill bên dưới luôn tỉ lệ theo cỡ chữ này. ~70px mobile → ~104px desktop. */
  --dvnb-top-co: clamp(4.375rem, 13vw, 6.5rem);
  /* Độ nhích pill = 0.14 × cỡ chữ Top, tính sẵn thành clamp âm (không dùng phép nhân
     trong calc để chạy được cả trình duyệt cũ). */
  --dvnb-pill-nhich: clamp(-0.91rem, -1.82vw, -0.6125rem);
  display: flex;
  flex-wrap: wrap;
  /* T241: pill đặt NGANG CHÂN CHỮ "Top" (không căn giữa theo chiều dọc của chữ).
     gap: hàng 20px (khi pill xuống dòng trên mobile vẫn đủ chỗ cho đuôi chữ "p")
     × cột 14px (khoảng cách Top ↔ pill đúng brief 10–14px). */
  align-items: flex-end;
  justify-content: center;
  gap: 20px 14px;
  /* Dòng 2 "Tại Phòng khám …" sát dòng 1 hơn một chút (~6px) */
  margin: 0 0 6px;
  text-align: center;
}

/* "Top": serif nghiêng, chữ gradient champagne ánh kim pha nâu vàng (không tải font ngoài).
   T282: sửa hiệu ứng bị "khựng" mỗi chu kỳ. Nền gradient rộng gấp BA chữ (background-size
   300% 100%) và được thiết kế lặp: đoạn 1/3 đầu (0–33,33%) và 1/3 cuối (66,67–100%) cùng
   một dãy màu champagne tĩnh (vàng nâu → vàng sáng → vàng ánh kim, cùng chiều trái → phải);
   vệt sáng --color-vang-lap-lanh nằm HẸP ở giữa (khoảng 44–56%). Góc 90deg để mốc phần trăm
   của gradient trùng đúng trục ngang, nhờ vậy 1/3 đầu và 1/3 cuối là 2 bản SAO y hệt nhau:
   background-position 100% (thấy 1/3 cuối) và 0% (thấy 1/3 đầu) cho ra CÙNG một hình —
   vòng lặp không còn nhảy/khựng. */
.dvnb-td-top {
  font-family: "Cambria", "Times New Roman", "Noto Serif", serif;
  font-style: italic;
  font-weight: 600;
  font-size: var(--dvnb-top-co);
  line-height: 1;
  background-image: linear-gradient(
    90deg,
    var(--color-vang-nau) 0%,
    var(--color-vang-sang) 8%,
    var(--color-vang-anh-kim) 18%,
    var(--color-vang-anh-kim) 33.333%,
    var(--color-vang-anh-kim) 42%,
    var(--color-vang-lap-lanh) 50%,
    var(--color-vang-anh-kim) 58%,
    var(--color-vang-nau) 66.667%,
    var(--color-vang-sang) 74.667%,
    var(--color-vang-anh-kim) 84.667%,
    var(--color-vang-anh-kim) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: dvnb-top-anh-kim 4s linear infinite;
  will-change: background-position;
}

/* Vệt sáng lướt TRÁI → PHẢI trong ~2,4s (0% → 60% của chu kỳ 4s) rồi nghỉ tới hết chu kỳ.
   background-position chạy 100% → 0%: dải sáng ở giữa gradient dịch dần sang phải. Chỉ
   animate background-position; reduced-motion tắt ở cuối file. */
@keyframes dvnb-top-anh-kim {
  0% {
    background-position: 100% 50%;
  }

  60%,
  100% {
    background-position: 0% 50%;
  }
}

/* Pill "DỊCH VỤ NỔI BẬT": in hoa bằng CSS, nền trắng ngà, viền champagne, chữ teal đậm */
.dvnb-td-pill {
  position: relative;
  /* T241: flex-end đặt đáy pill trùng đáy hộp chữ "Top" — với font serif, đáy hộp
     nằm dưới đường chân chữ (baseline) khoảng 0.15em, nên nhích pill lên 0.14 × cỡ
     chữ Top để ĐÁY PILL ≈ chân chữ Top (lệch < 8px), chữ Top vươn cao hơn hẳn pill;
     tỉ lệ theo mọi cỡ màn hình (T245: 70px mobile → 104px desktop). */
  translate: 0 var(--dvnb-pill-nhich);
  /* Ngăn xếp riêng để vệt sáng (z-index âm) nằm trên nền pill nhưng dưới chữ */
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  max-width: 100%;
  padding: 0.55em 1.1em;
  background: var(--color-ivory);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px var(--color-bong-nau);
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 2.2vw, 0.9375rem); /* ~15px desktop */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal);
}

/* T245: vệt sáng trắng ánh vàng tự lướt chéo trái → phải mỗi 3.5s (lướt ~0.9s, phần lớn
   thời gian nằm ngoài), nằm dưới chữ nhờ isolation + z-index âm, không nhận chuột. */
.dvnb-td-pill::before {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  z-index: -1;
  width: 35%;
  height: 220%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 246, 220, 0.75) 50%,
    transparent 100%
  );
  transform: rotate(18deg) translateX(-260%);
  animation: dvnb-pill-luot 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dvnb-pill-luot {
  0%,
  62% {
    transform: rotate(18deg) translateX(-260%);
    opacity: 0;
  }

  68% {
    opacity: 1;
  }

  88% {
    transform: rotate(18deg) translateX(360%);
    opacity: 1;
  }

  92%,
  100% {
    transform: rotate(18deg) translateX(360%);
    opacity: 0;
  }
}

/* Vệt sáng champagne lướt qua pill khi rê chuột (700ms, không nhận chuột) */
.dvnb-td-pill::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  z-index: -1;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, var(--color-shine), transparent);
  transform: rotate(18deg) translateX(-220%);
  pointer-events: none;
}

.dvnb-td-pill:hover::after,
.dvnb-td-pill:focus-within::after {
  animation: dvnb-td-vet-sang 700ms ease-out;
}

@keyframes dvnb-td-vet-sang {
  from {
    transform: rotate(18deg) translateX(-220%);
  }

  to {
    transform: rotate(18deg) translateX(360%);
  }
}

/* 2 ngôi sao ✦ champagne lấp lánh: scale .85 ↔ 1.15 + opacity .6 ↔ 1, chu kỳ 2.6s,
   lệch pha nhau 1.3s (T245). Chỉ animate transform/opacity (hiệu năng). */
.dvnb-td-spark {
  display: inline-block;
  font-size: 0.9em;
  line-height: 1;
  color: var(--color-gold);
  animation: dvnb-td-nhap-nhay 2.6s ease-in-out infinite;
}

.dvnb-td-spark:last-child {
  animation-delay: -1.3s;
}

@keyframes dvnb-td-nhap-nhay {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Dòng 2: "Tại Phòng khám …" — sans-serif đậm, teal đậm, cách lưới thẻ 32px */
.dvnb-td-phu {
  margin: 0 0 var(--space-6);
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 4vw, 1.75rem); /* ~20px mobile → ~28px desktop */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--color-teal);
}

.dvnb-luoi {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}

/* Thẻ: flex cột, nút margin-top:auto để 3 thẻ cao bằng nhau vẫn thẳng hàng đáy nút */
.dvnb-the {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-peach-light) 100%);
  border: 1px solid var(--color-gold);
  border-radius: 24px;
  box-shadow: var(--shadow-the);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

/* Rê chuột: thẻ nâng nhẹ, bóng đậm hơn; layout không đổi */
.dvnb-the:hover,
.dvnb-the:focus-within {
  transform: translateY(-10px);
  box-shadow: var(--shadow-the-hover);
}

/* Khung ảnh 4:3: cắt ảnh khi phóng để không tràn khỏi bo góc thẻ */
.dvnb-anh {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
}

.dvnb-anh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.dvnb-the:hover .dvnb-anh img,
.dvnb-the:focus-within .dvnb-anh img {
  transform: scale(1.04);
}

.dvnb-than {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-5);
}

/* Pill nhãn nhóm dịch vụ: in hoa, chữ nhỏ, nền trắng mờ */
.dvnb-nhan {
  align-self: flex-start;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  background: var(--color-white-mo);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-nau);
}

.dvnb-ten {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
}

.dvnb-ten a {
  color: var(--color-nau);
  text-decoration: none;
}

.dvnb-ten a:hover,
.dvnb-ten a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.dvnb-mo-ta {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Nút đăng ký: gradient cam đào → champagne, chữ trắng đậm in hoa, pill.
   Chạy nổi lên xuống bằng animation (transform); hover nâng thêm 3px bằng
   thuộc tính translate độc lập để không bị animation ghi đè. */
.dvnb-nut {
  position: relative;
  /* Tạo ngăn xếp riêng để vệt sáng (z-index âm) nằm trên nền nút nhưng dưới chữ */
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 2.75rem;
  margin-top: auto;
  padding: var(--space-2) var(--space-5);
  background: linear-gradient(90deg, var(--color-peach) 0%, var(--color-gold) 100%);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-nut);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  animation: dvnb-noi 2.5s ease-in-out infinite;
  transition: translate 300ms ease, filter 300ms ease, box-shadow 300ms ease;
}

.dvnb-nut:hover,
.dvnb-nut:focus-visible {
  translate: 0 -3px;
  filter: brightness(1.06);
  box-shadow: var(--shadow-the-hover);
}

/* Vệt sáng trắng chéo chạy trái → phải mỗi 3.5s, nằm dưới chữ (z-index âm trong nút) */
.dvnb-nut::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  z-index: -1;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, var(--color-shine), transparent);
  transform: rotate(18deg) translateX(-220%);
  animation: dvnb-lap-lanh 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dvnb-noi {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes dvnb-lap-lanh {
  0% {
    transform: rotate(18deg) translateX(-220%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  70%,
  100% {
    transform: rotate(18deg) translateX(360%);
    opacity: 0;
  }
}

/* Scroll reveal (JS thêm lớp): ẩn 24px + mờ, hiện 600ms ease-out, trễ 0/150/300ms.
   JS bỏ 2 lớp sau khi hiện xong nên hiệu ứng rê chuột vẫn dùng transition mặc định;
   không có JS hoặc giảm chuyển động → không bao giờ thêm lớp ẩn (thẻ hiện bình thường). */
.dvnb-the--an {
  opacity: 0;
  transform: translateY(24px);
}

.dvnb-the--hien {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms ease-out var(--dvnb-tre, 0ms),
    transform 600ms ease-out var(--dvnb-tre, 0ms);
}

/* T239: tiêu đề 2 dòng cũng hiện dần (JS thêm lớp, cùng nhịp với 3 thẻ) */
.dvnb-td--an {
  opacity: 0;
  transform: translateY(24px);
}

.dvnb-td--hien {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms ease-out var(--dvnb-tre, 0ms),
    transform 600ms ease-out var(--dvnb-tre, 0ms);
}

/* --------------------------------------------------------------------------
   KHU VỰC: Bảng giá (trang chủ) — ảnh bảng giá theo tab + nút "Tư vấn ngay"
   -------------------------------------------------------------------------- */

.bang-gia__anh {
  display: block;
  width: 100%;
  max-width: 42rem;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--color-gold-light);
}

.bang-gia__tu-van {
  margin: var(--space-5) 0 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   KHU VỰC: Đăng ký tư vấn (trang chủ; khối form dùng lại ở cuối trang bài)
   Lỗi hiện ngay dưới ô (.truong__loi) + aria-invalid trên ô sai.
   -------------------------------------------------------------------------- */

.dang-ky__khung {
  max-width: 46rem;
}

.dang-ky__ghi-chu {
  margin-top: calc(var(--space-3) * -1);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.dang-ky__form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-gold-light);
}

/* Gửi thành công: form ẩn hẳn (display của grid lấn át thuộc tính hidden) */
.dang-ky__form[hidden] {
  display: none;
}

.truong {
  min-width: 0;
}

/* T294: ô bẫy chống bot — đẩy ra ngoài khung, kích thước 1px, KHÔNG dùng display:none
   (display:none sẽ khiến bot "thấy" form thiếu ô và có thể bỏ qua bẫy).
   position:absolute nên không chiếm chỗ trong lưới form, không tràn ngang mobile. */
.truong--bay {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.truong__nhan {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
  color: var(--color-navy);
}

/* Ô nhập / ô chọn: cùng kiểu với ô tìm kiếm, cao tối thiểu 2.75rem cho dễ bấm */
.truong__o {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-navy);
}

/* Ô sai: viền dày 2px màu vàng nâu + chữ lỗi bên dưới (không chỉ dựa vào màu) */
.truong__o[aria-invalid="true"] {
  border-color: var(--color-vang-nau);
  border-width: 2px;
}

.truong__loi {
  margin: var(--space-1) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-vang-nau-dam);
}

/* Chưa có lỗi: phần tử rỗng không chiếm chỗ */
.truong__loi:empty {
  display: none;
}

.truong__bat-buoc {
  color: var(--color-vang-nau-dam);
}

/* T289: ô tick đồng ý xử lý dữ liệu cá nhân (Nghị định 13/2023).
   Ô 18px màu vàng champagne (accent-color), chữ 14px nâu, dòng thoáng.
   <label> bọc cả ô + chữ nên bấm vào chữ cũng tick; chữ tự xuống dòng,
   ô co theo cỡ cố định nên không tràn ngang trên mobile. */
.truong--dong-y {
  margin-top: var(--space-1);
}

.dong-y {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.875rem; /* 14px */
  line-height: 1.55;
  color: var(--color-nau);
  cursor: pointer;
}

.dong-y input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  /* Nhích nhẹ để ô thẳng hàng với dòng chữ đầu của nhãn nhiều dòng */
  margin: 0.15em 0 0;
  accent-color: var(--color-gold);
  cursor: pointer;
}

/* Chưa tick mà bấm gửi: viền ngoài vàng nâu đậm (không chỉ dựa vào màu sắc) */
.dong-y input[aria-invalid="true"] {
  outline: 2px solid var(--color-vang-nau-dam);
  outline-offset: 2px;
}

.dang-ky__gui {
  margin: 0;
}

.dang-ky__cam-on {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-gold-light);
}

.dang-ky__cam-on[hidden] {
  display: none;
}

.dang-ky__cam-on-chu {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-nau);
}

.dang-ky__loi-gui {
  font-size: 0.9rem;
}

.dang-ky__lien-he {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

/* --------------------------------------------------------------------------
   Nội dung Markdown đã dựng (Cam kết, Bác sĩ ở trang chủ; dùng lại cho trang bài)
   -------------------------------------------------------------------------- */

.noi-dung {
  max-width: 46rem;
}

.noi-dung > :first-child {
  margin-top: 0;
}

.noi-dung > :last-child {
  margin-bottom: 0;
}

.noi-dung h2 {
  margin-top: var(--space-6);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

.noi-dung h3 {
  margin-top: var(--space-5);
  font-size: 1.1rem;
}

.noi-dung ul,
.noi-dung ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

.noi-dung li + li {
  margin-top: var(--space-1);
}

.noi-dung a {
  text-underline-offset: 2px;
}

.noi-dung img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-gold-light);
}

.noi-dung figure {
  margin: var(--space-4) 0;
}

.noi-dung table {
  width: 100%;
  margin-bottom: var(--space-4);
  border-collapse: collapse;
  font-size: 0.95rem;
}

.noi-dung th,
.noi-dung td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gold-light);
  text-align: left;
  vertical-align: top;
}

.noi-dung th {
  background: var(--color-surface);
}

/* Hỏi–đáp mở/đóng: "## Câu hỏi thường gặp" → <details><summary> */
.noi-dung details {
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
}

.noi-dung summary {
  font-weight: 600;
  color: var(--color-nau);
  cursor: pointer;
}

.noi-dung details[open] summary {
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   KHU VỰC: Kết quả khách hàng (trang chủ) — tab theo nhóm, ảnh trong dải cuộn ngang
   (lưới .ket-qua__luoi bên dưới dùng cho trang /ket-qua)
   -------------------------------------------------------------------------- */

.ket-qua__luoi {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.ket-qua__anh {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-gold-light);
}

.ket-qua__anh img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* T208: khu vực ket-qua trang chủ chuyển sang tab theo nhóm — mọi ảnh của nhóm
   nằm trong dải cuộn ngang (.ket-qua__dai) nên KHÔNG còn giới hạn 8 ảnh.
   Trang /ket-qua dùng lại .ket-qua__luoi (trangcon sở hữu) và vẫn hiện đủ ảnh. */

/* Hàng nút tab kết quả: dạng ô viền; chọn = nền vàng nâu + chữ trắng,
   chưa chọn = nền trắng ngà viền gold chữ nâu. Mobile 2 nút/hàng, desktop 4–5 nút/hàng. */
.tab--ket-qua .tab__ds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  border-bottom: 0;
}

.tab--ket-qua .tab__nut {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-ivory);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius);
  color: var(--color-nau);
  text-align: center;
}

.tab--ket-qua .tab__nut:hover {
  background: var(--color-cream);
  color: var(--color-gold-dam);
}

.tab--ket-qua .tab__nut[aria-selected="true"] {
  background: var(--color-vang-nau);
  border-color: var(--color-vang-nau);
  color: var(--color-white);
}

.ket-qua__mo-ta {
  max-width: 52rem;
  color: var(--color-text-muted);
}

.ket-qua__lien-ket {
  margin-bottom: var(--space-3);
}

.ket-qua__xem-dich-vu {
  font-weight: 600;
  color: var(--color-vang-nau);
  text-underline-offset: 2px;
}

/* Dải ảnh: cuộn ngang + scroll-snap, ảnh vuông bo góc.
   Mobile ~1,2 ảnh mỗi lượt; desktop 3 ảnh (xem @media 768px).
   tabindex="0" trong khuôn để cuộn được bằng bàn phím (ảnh không nhận focus). */
.ket-qua__dai {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  scroll-snap-type: x mandatory;
}

.ket-qua__dai .ket-qua__anh {
  flex: 0 0 82%;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   KHU VỰC: Bác sĩ (trang chủ) — ảnh chân dung + hồ sơ từ content
   -------------------------------------------------------------------------- */

.ho-so {
  display: grid;
  gap: var(--space-5);
}

.ho-so__anh {
  margin: 0;
  max-width: 20rem;
}

.ho-so__anh img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-gold-light);
}

.ho-so__xem {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   KHU VỰC: Hồ sơ bác sĩ trang chủ (T240; nền + cột phải làm lại ở T243) — thẻ lớn
   theo ảnh mẫu 2026-11-13 (lần 2).
   Cấu trúc: .doi-ngu > article.dn-the
     .dn-trai (học hàm + tên gradient champagne + pill vai trò + thẻ thông tin)
     .dn-phai (halo vàng phát sáng + chân dung tách nền neo đáy thẻ)
   Nền kem vàng ấm + viền vàng phát sáng + dải lụa vàng/teal: T243.
   Desktop 2 cột 58/42, tablet 55/45, mobile dọc: thông tin trên, ảnh dưới.
   Dải .doi-ngu giữ cuộn ngang/scroll-snap để còn dùng được khi có nhiều bác sĩ.
   Hành vi: assets/js/main.js → khoiTaoBacSiHien (chữ fade-up, ảnh fade-in).
   -------------------------------------------------------------------------- */

.doi-ngu {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding: 0 0 var(--space-4);
  scroll-snap-type: x mandatory;
}

/* Hiện chỉ có 1 bác sĩ (thẻ :only-child) → không có gì để cuộn: bỏ khung cắt
   để bóng đổ + viền phát sáng của thẻ hiện đủ (nhiều bác sĩ thì vẫn cuộn ngang). */
.doi-ngu:has(.dn-the:only-child) {
  overflow: visible;
  scroll-snap-type: none;
}

/* Mỗi thẻ chiếm trọn khung; 1 bác sĩ thì không có chỗ trống để cuộn */
.doi-ngu > .dn-the {
  flex: 0 0 100%;
  max-width: none;
  margin-inline: 0;
  scroll-snap-align: start;
}

/* T243: thẻ lớn — nền kem vàng ẤM (gradient 120deg) + 2 vệt sáng trắng mờ (góc trên trái,
   giữa phải); viền vàng 2px phát sáng vẽ bằng pseudo-element ::before (gradient + mask nên
   chỉ còn vành); bóng nâu ấm + quầng sáng trong. Bo 28px, cắt gọn mọi lớp trang trí. */
.dn-the {
  position: relative;
  /* Gom mọi z-index của lớp trang trí vào trong thẻ */
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 0%, var(--color-hs-sang-1) 0%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(ellipse at 88% 40%, var(--color-hs-sang-2) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(
      120deg,
      var(--color-hs-nen-1) 0%,
      var(--color-hs-nen-2) 40%,
      var(--color-hs-nen-3) 75%,
      var(--color-hs-nen-4) 100%
    );
  border: 2px solid transparent;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px var(--color-hs-vien-mo),
    0 18px 50px var(--color-hs-bong),
    inset 0 0 40px var(--color-hs-sang-the);
  color: var(--color-nau);
}

/* Viền gradient vàng phát sáng: pseudo phủ đúng 2px sát mép thẻ, mask để chỉ còn vành */
.dn-the::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 2px;
  background: linear-gradient(
    135deg,
    var(--color-hs-vien-1) 0%,
    var(--color-hs-vien-2) 45%,
    var(--color-hs-vien-3) 100%
  );
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* T244: Họa tiết gương mặt chìm sau/phải tên như ảnh mẫu (opacity ~.18, cao ~220px desktop).
   Đặt bằng background → tệp thiếu thì không vỡ giao diện. Chỉ trang trí, không nhận chuột. */
.dn-hoa-tiet {
  position: absolute;
  top: 1.5rem;
  left: 40%;
  z-index: 0;
  width: 9rem;
  height: 9rem;
  background: url("/anh/hoa-tiet-guong-mat.png") center / contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

/* T243: DẢI LỤA — thay các đường lượn mảnh cũ bằng các dải lụa DÀY (4 dải vàng):
   2 dải ở góc trên phải, 2 dải ở cạnh đáy phải (dải mảnh hơn ẩn ở mobile), 1 dải teal ở đáy giữa.
   Tất cả nằm DƯỚI chân dung (z-index 0) và dưới chữ (.dn-trai z-index 1),
   không nhận chuột, bị cắt gọn trong thẻ (overflow: hidden của .dn-the). */
.dn-lua {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
}

/* Dải phụ hơi mờ (blur 1px) để cụm lụa có chiều sâu */
.dn-lua__mo {
  filter: blur(1px);
}

/* Màu các điểm dừng gradient của dải lụa — đặt ở CSS (không dùng style nội tuyến,
   CSP của site chỉ cho tài nguyên cùng nguồn): vàng óng có dải sáng ở giữa. */
.dn-lua stop:nth-of-type(1) {
  stop-color: var(--color-hs-lua-1);
}

.dn-lua stop:nth-of-type(2) {
  stop-color: var(--color-hs-lua-2);
}

.dn-lua stop:nth-of-type(3) {
  stop-color: var(--color-hs-lua-3);
}

.dn-lua stop:nth-of-type(4) {
  stop-color: var(--color-hs-lua-4);
}

/* Dải teal ở đáy: xanh đậm → xanh ngọc, khai báo sau để thắng quy tắc vàng ở trên */
.dn-lua--teal stop:nth-of-type(1) {
  stop-color: var(--color-teal);
}

.dn-lua--teal stop:nth-of-type(2) {
  stop-color: var(--color-hs-teal-lua);
}

.dn-lua--tren {
  top: 0;
  right: 0;
  width: min(26rem, 52%);
}

.dn-lua--duoi {
  right: 0;
  bottom: 0;
  width: 100%;
}

.dn-lua--teal {
  bottom: 0;
  left: 50%;
  width: min(24rem, 52%);
  transform: translateX(-50%);
}

/* Cột trái: chữ + thẻ thông tin nằm trên lớp trang trí */
.dn-trai {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.dn-dau {
  position: relative;
}

/* T244: Dòng học hàm — chữ teal đậm in hoa (~22px desktop) + đường kẻ gradient vàng
   dài ~180px + ngôi sao 4 cánh SVG ở cuối (như ảnh mẫu 2026-11-13 lần 2). */
.dn-hoc-ham {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.dn-hoc-ham__chu {
  flex: none;
}

/* Đường kẻ: dày 2px, hai đầu bo tròn, vàng đậm → champagne → vàng nhạt */
.dn-hoc-ham__duong {
  flex: 0 1 4.5rem;
  width: 4.5rem;
  max-width: 40vw;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    var(--color-gold-dam) 0%,
    var(--color-gold) 55%,
    var(--color-gold-light) 100%
  );
}

/* Ngôi sao 4 cánh: SVG, tô bằng currentColor để đổi màu theo token */
.dn-hoc-ham__sao {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  fill: var(--color-sao-vang);
  filter: drop-shadow(0 0 4px rgba(200, 163, 95, 0.45));
}

/* T244: Tên in hoa serif đậm, ~80px desktop / ~52px mobile, gradient VÀNG ÁNH KIM dọc
   (sáng ở đỉnh → nâu vàng ở chân) + bóng vàng nhẹ. */
.dn-ten {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 12vw, 3.25rem); /* ~52px trên máy rộng, co lại khi hẹp để không tràn */
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--color-ten-1) 0%, var(--color-ten-2) 45%, var(--color-ten-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 5px rgba(200, 161, 94, 0.35));
}

/* T244: Nét lượn vàng mảnh dài dưới tên (SVG, màu điểm dừng đặt ở CSS bên dưới) */
.dn-gach {
  display: block;
  width: min(22rem, 100%);
  height: auto;
  margin-bottom: var(--space-3);
  color: var(--color-gold);
}

.dn-gach stop:nth-of-type(1) {
  stop-color: var(--color-gold-dam);
  stop-opacity: 0.9;
}

.dn-gach stop:nth-of-type(2) {
  stop-color: var(--color-gold);
  stop-opacity: 0.9;
}

.dn-gach stop:nth-of-type(3) {
  stop-color: var(--color-gold-light);
  stop-opacity: 0.15;
}

/* T244: Pill vai trò — chữ teal đậm, nền trắng ngà, viền vàng 1.5px, bóng vàng nhẹ,
   icon người nằm trong vòng tròn nền gradient vàng nhạt viền vàng. */
.dn-vai-tro {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.6rem 1.1rem;
  background: var(--color-ivory);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(200, 161, 94, 0.22);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-teal);
}

.dn-vai-tro__vong {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  background: radial-gradient(circle at 35% 30%, var(--color-huy-hieu-1), var(--color-huy-hieu-2) 75%);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  color: var(--color-gold-dam);
}

.dn-vai-tro__icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* T244: Thẻ thông tin — nền trắng ngà hơi trong + blur nhẹ, viền vàng 1.5px gradient
   (padding-box/border-box) + quầng sáng vàng, bo 26px, nổi nhẹ khi rê chuột. */
.dn-thong-tin {
  position: relative;
  padding: 1.25rem;
  background:
    linear-gradient(var(--color-the-tt-nen), var(--color-the-tt-nen)) padding-box,
    linear-gradient(
      135deg,
      var(--color-hs-vien-3) 0%,
      var(--color-gold) 48%,
      var(--color-hs-vien-1) 100%
    ) border-box;
  border: 1.5px solid transparent;
  border-radius: 26px;
  box-shadow:
    0 0 0 1px var(--color-the-tt-vien-glow),
    0 14px 36px rgba(140, 106, 60, 0.16);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.dn-thong-tin:hover,
.dn-thong-tin:focus-within {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px var(--color-the-tt-vien-glow),
    0 20px 44px rgba(140, 106, 60, 0.22);
}

/* T244: Danh sách hồ sơ (ul/li từ Markdown): dòng cao thoáng, kẻ ngăn gradient vàng
   mờ dần 2 đầu, mỗi dòng 1 huy hiệu tròn vàng 52px (desktop) + glyph nâu vàng. */
.dn-ds ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dn-ds li {
  position: relative;
  padding: 0.85rem 0 0.85rem 3.75rem;
  font-size: 1.0625rem; /* ~17px mobile */
  line-height: 1.5;
  color: var(--color-nau);
}

/* Kẻ ngăn giữa các dòng: gradient vàng nhạt mờ dần hai đầu (không dùng border liền) */
.dn-ds li + li {
  background-image: linear-gradient(
    90deg,
    rgba(233, 220, 195, 0) 0%,
    var(--color-gold-light) 14%,
    var(--color-gold) 50%,
    var(--color-gold-light) 86%,
    rgba(233, 220, 195, 0) 100%
  );
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

/* Huy hiệu tròn: nền radial-gradient vàng sáng, viền vàng, bóng nhẹ */
.dn-ds li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2.75rem;
  height: 2.75rem;
  background: radial-gradient(circle at 35% 30%, var(--color-huy-hieu-1), var(--color-huy-hieu-2) 70%, var(--color-sao-vang));
  border: 1px solid var(--color-gold-dam);
  border-radius: var(--radius-pill);
  box-shadow:
    0 3px 8px rgba(140, 106, 60, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  transform: translateY(-50%);
}

/* Glyph nâu vàng đậm theo thứ tự dòng (SVG data-URI làm mask-image), mặc định là dấu cộng y tế */
.dn-ds li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-vang-nau);
  transform: translateY(-50%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

/* 1 mũ tốt nghiệp */
.dn-ds li:nth-child(1)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l10-4 10 4-10 4z'/%3E%3Cpath d='M6 10v4.5c0 1.7 2.7 3 6 3s6-1.3 6-3V10'/%3E%3Cpath d='M22 8v5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l10-4 10 4-10 4z'/%3E%3Cpath d='M6 10v4.5c0 1.7 2.7 3 6 3s6-1.3 6-3V10'/%3E%3Cpath d='M22 8v5'/%3E%3C/svg%3E");
}

/* 2 tòa nhà phòng khám */
.dn-ds li:nth-child(2)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V9l8-5 8 5v11'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3Cpath d='M9 11h.01M15 11h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V9l8-5 8 5v11'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3Cpath d='M9 11h.01M15 11h.01'/%3E%3C/svg%3E");
}

/* 3 nhóm người */
.dn-ds li:nth-child(3)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='2.6'/%3E%3Cpath d='M4 19c0-2.7 2.2-4.4 5-4.4s5 1.7 5 4.4'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3Cpath d='M15.5 14.8c2.4.2 4.5 1.7 4.5 4.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='2.6'/%3E%3Cpath d='M4 19c0-2.7 2.2-4.4 5-4.4s5 1.7 5 4.4'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3Cpath d='M15.5 14.8c2.4.2 4.5 1.7 4.5 4.2'/%3E%3C/svg%3E");
}

/* 4 dấu cộng y tế */
.dn-ds li:nth-child(4)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* 5 huy chương */
.dn-ds li:nth-child(5)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M9 12.5L7.5 21 12 18l4.5 3L15 12.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M9 12.5L7.5 21 12 18l4.5 3L15 12.5'/%3E%3C/svg%3E");
}

/* Cột phải: chân dung lớn, halo phía sau */
.dn-phai {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding-top: var(--space-4);
}

/* T243: VÒNG SÁNG (halo) sau chân dung — đĩa radial-gradient vàng óng nhạt + VÀNH dày 6px
   gradient vàng (conic-gradient + mask để chỉ còn vành) phát sáng; đĩa ::after mờ là quầng
   sáng lan ra ngoài vành. Đường kính ~460px ở desktop (xem @media). */
.dn-halo {
  position: absolute;
  bottom: 6%;
  left: 50%;
  isolation: isolate;
  width: min(90%, 22rem);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    var(--color-hs-halo-1) 0%,
    var(--color-hs-halo-2) 45%,
    var(--color-hs-halo-3) 70%
  );
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
  pointer-events: none;
}

.dn-halo::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 6px;
  background: conic-gradient(
    from 210deg,
    var(--color-hs-vien-3) 0%,
    var(--color-hs-lua-2) 22%,
    var(--color-hs-lua-1) 48%,
    var(--color-hs-vien-1) 70%,
    var(--color-hs-lua-3) 88%,
    var(--color-hs-vien-3) 100%
  );
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Quầng sáng vàng lan quanh vành (mờ + drop-shadow) */
.dn-halo::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 6px solid var(--color-hs-halo-vien);
  border-radius: inherit;
  filter: blur(7px) drop-shadow(0 0 18px var(--color-hs-halo-glow));
}

/* Khung ảnh: chừa khoảng trống phía trên để ảnh phóng 4% từ đáy không bị cắt đỉnh */
.dn-khung-anh {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  padding-top: var(--space-3);
  overflow: visible;
}

/* T243: chân dung tách nền — khung dọc nhẹ 1:1,16 (mobile ~380px, desktop ~540px),
   object-fit: cover chỉ cắt phần MÉP TRONG SUỐT hai bên (người cách biên ~9%) nên
   không cắt đầu/vai; đáy ảnh bám đáy khung (xem .dn-khung-anh ở @media). */
.dn-anh {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.16;
  object-fit: cover;
  object-position: center bottom;
  /* GIỮ hiệu ứng cũ: phóng từ ĐÁY nên cạnh dưới ảnh đứng yên */
  transform-origin: center bottom;
  transition: transform 300ms ease, filter 300ms ease;
}

.dn-the:hover .dn-anh,
.dn-the:focus-within .dn-anh {
  transform: scale(1.04);
  filter: drop-shadow(0 12px 18px var(--color-bong-nau));
}

/* Hiệu ứng hiện dần (main.js → khoiTaoBacSiHien): chữ + thẻ thông tin fade-up, ảnh fade-in.
   JS chỉ thêm lớp ẩn khi phần tử nằm dưới màn hình lúc tải; không JS / giảm chuyển động
   → không bao giờ kẹt ẩn. */
.dn-an {
  opacity: 0;
  transform: translateY(24px);
}

.dn-an--anh {
  transform: none;
}

.dn-hien {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms ease-out var(--dn-tre, 0ms),
    transform 600ms ease-out var(--dn-tre, 0ms);
}

.doi-ngu__xem {
  margin: var(--space-5) 0 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   T281: Khu giới thiệu bác sĩ thay bằng ẢNH THIẾT KẾ có sẵn chữ
   (site/content/anh/bac-si-gioi-thieu.jpg, 1200x737).
   - Màn < 768px: ẩn ảnh, giữ thẻ HTML (.doi-ngu) vì chữ trong ảnh quá nhỏ.
   - Màn ≥ 768px: hiện ảnh rộng 100% khung, bo 28px, bóng ấm nhẹ; thẻ HTML
     được ẩn hẳn bằng display:none để không lặp nội dung, không nhận focus/tab
     và trình đọc màn hình không đọc lại (review T281).
   - Nút "Xem hồ sơ bác sĩ" nằm ngoài .doi-ngu nên luôn hiện dưới ảnh/thẻ.
   -------------------------------------------------------------------------- */

.dn-anh-thiet-ke {
  display: none;
  margin: 0;
}

@media (min-width: 768px) {
  .dn-anh-thiet-ke {
    display: block;
  }

  .dn-anh-thiet-ke img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
    box-shadow: 0 18px 48px var(--color-hs-bong);
  }

  /* Ẩn thẻ HTML cũ trên màn lớn để không lặp nội dung với ảnh thiết kế
     (dùng display:none thay vì opacity/absolute theo review T281). */
  [data-khu-vuc="bac-si"] .doi-ngu {
    display: none;
  }
}

/* T243: mobile — chân dung tràn tới đáy thẻ (bù padding của thẻ), halo nhỏ theo,
   dải lụa giản lược còn 2 dải (vàng ở đáy + teal ở đáy giữa) như brief. */
@media (max-width: 767px) {
  .dn-phai {
    margin: 0 calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  }

  .dn-halo {
    bottom: 2%;
    width: min(92%, 19rem);
  }

  .dn-lua--tren {
    display: none;
  }

  .dn-lua__phu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   KHU VỰC: Bằng cấp & chứng chỉ (#bang-cap, trang chủ) — T259
   Lưới 3 cột desktop (≥1024px) / 2 cột tablet (≥600px) / 1 cột mobile (<600px).
   Mỗi thẻ: nền trắng ngà, viền champagne 1px, bo 16px, bóng ấm nhẹ, padding 12px.
   Khung ảnh 4:3 dùng object-fit: contain trên nền kem để KHÔNG cắt mất chữ trên
   giấy tờ. Ảnh vẫn bấm mở hộp thoại ảnh lớn (.anh-lon qua data-anh-lon) — JS
   không đổi, chỉ đổi hình thức thẻ.
   -------------------------------------------------------------------------- */

/* Dòng phụ dưới tiêu đề khu: căn giữa, nâu vàng (AA trên nền kem) */
.giay-phep__mo-ta {
  max-width: 46rem;
  margin: calc(var(--space-3) * -1) auto var(--space-5);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  color: var(--color-vang-nau);
}

.giay-phep__luoi {
  display: grid;
  gap: var(--space-4);
  /* Mobile (< 600px): 1 cột; tablet/desktop nâng cột ở 2 @media bên dưới */
  grid-template-columns: minmax(0, 1fr);
}

/* Thẻ chứng chỉ: flex cột để mọi thẻ trong 1 hàng cao bằng nhau */
.giay-phep__muc {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: var(--space-3);
  background: var(--color-ivory);
  border: 1px solid var(--color-gold);
  border-radius: 16px;
  box-shadow: 0 8px 20px var(--color-bong-nau);
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

/* Rê chuột / focus bàn phím: nâng 4px, viền vàng đậm hơn, bóng đậm hơn */
.giay-phep__muc:hover,
.giay-phep__muc:focus-within {
  transform: translateY(-4px);
  border-color: var(--color-gold-dam);
  box-shadow: var(--shadow-the-hover);
}

/* Nút bọc ảnh giữ nguyên hành vi mở ảnh lớn (cursor zoom-in), chỉ đổi hình thức */
.giay-phep__nut {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--color-cream); /* nền kem sau ảnh: ảnh contain không lộ nền trắng */
  border: 0;
  border-radius: 12px;
  cursor: zoom-in;
}

/* Ảnh giấy tờ: khung 4:3, contain để thấy TRỌN chữ (không cắt như cover) */
.giay-phep__nut img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* Chú thích có dấu dưới ảnh: 15px nâu đậm, căn giữa, tối đa 3 dòng */
.giay-phep__chu {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.45;
  text-align: center;
  color: var(--color-nau);
}

/* Tablet (≥ 600px): 2 cột */
@media (min-width: 600px) {
  .giay-phep__luoi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop (≥ 1024px): 3 cột */
@media (min-width: 1024px) {
  .giay-phep__luoi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   KHU VỰC: Kiến thức & tin tức (trang chủ) — lưới thẻ bài viết
   Thẻ .the-bai-viet dùng lại được ở /kien-thuc và "bài liên quan".
   -------------------------------------------------------------------------- */

.bai-viet__luoi {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem));
}

.the-bai-viet {
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
}

/* Cả thẻ là 1 liên kết: nền trắng, chữ giữ màu token */
.the-bai-viet__lien-ket {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-navy);
  text-decoration: none;
}

.the-bai-viet__anh {
  margin: 0;
  background: var(--color-surface);
}

.the-bai-viet__anh img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 400;
  object-fit: cover;
}

.the-bai-viet__than {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.the-bai-viet__tieu-de {
  margin: 0;
  font-size: 1.1rem;
}

.the-bai-viet__mo-ta {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.the-bai-viet__ngay {
  margin: auto 0 0;
  padding-top: var(--space-2);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Rê chuột / focus bàn phím: gạch chân tiêu đề (gold chỉ làm đường kẻ) */
.the-bai-viet__lien-ket:hover .the-bai-viet__tieu-de,
.the-bai-viet__lien-ket:focus-visible .the-bai-viet__tieu-de {
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Nút "Xem tất cả..." dưới lưới (Kiến thức, Kết quả trang chủ) */
.kien-thuc__xem,
.ket-qua__xem {
  margin: var(--space-5) 0 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   KHU VỰC: Truyền thông / Chứng nhận / Đối tác (trang chủ) — lưới ảnh, logo
   -------------------------------------------------------------------------- */

.anh-luoi {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anh-luoi__muc {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
}

.anh-luoi__muc img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Lưới logo (truyền thông, đối tác): ảnh ngang 240x80, thu nhỏ vừa ô */
.anh-luoi--logo .anh-luoi__muc img {
  max-width: 12rem;
}

/* Lưới ảnh chứng nhận / máy móc: ảnh vuông 400x400 */
.anh-luoi--anh .anh-luoi__muc img {
  max-width: 10rem;
}

/* --------------------------------------------------------------------------
   Hộp thoại ảnh lớn dùng chung (giấy phép, bảng giá, kết quả)
   .anh-lon[hidden] phải giữ display:none vì khung là flex.
   -------------------------------------------------------------------------- */

.anh-lon {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-overlay);
}

.anh-lon[hidden] {
  display: none;
}

.anh-lon__khung {
  max-width: min(92vw, 56rem);
  max-height: 88vh;
  margin: 0;
}

.anh-lon__anh {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88vh;
  margin-inline: auto;
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
}

.anh-lon__dong {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  color: var(--color-nau);
  cursor: pointer;
}

.anh-lon__dong:hover {
  background: var(--color-gold-light);
}

body.is-anh-lon {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   KHU VỰC: Footer (T250: làm mới — trắng ngà – vàng champagne, teal chỉ điểm xuyết)
   Cấu trúc: .footer > .footer__noi > (.footer__keu-goi + .footer__inner 4 cột)
             + .footer__cuoi (bản quyền + nút lên đầu trang)
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-7) 0 var(--space-5);
  background: linear-gradient(180deg, var(--color-ft-nen-1) 0%, var(--color-ft-nen-2) 100%);
  color: var(--color-nau);
}

/* Họa tiết gương mặt mờ ở góc phải (thuần trang trí, không chặn bấm) */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: min(26rem, 62%);
  height: 20rem;
  background: url("/anh/hoa-tiet-guong-mat.png") no-repeat right top / contain;
  opacity: var(--color-ft-hoa-tiet);
  pointer-events: none;
}

/* Đường lượn vàng mảnh ngang trên cùng footer */
.footer__duong {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.5rem;
  color: var(--color-gold);
  opacity: 0.55;
  pointer-events: none;
}

.footer__noi {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* (1) Dải kêu gọi: thẻ champagne bo 24px + 2 nút pill */
.footer__keu-goi {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: linear-gradient(120deg, var(--color-ft-goi-1) 0%, var(--color-ft-goi-2) 55%, var(--color-ft-goi-3) 100%);
  border: 1px solid var(--color-ft-goi-vien);
  border-radius: 24px;
  box-shadow:
    0 14px 34px var(--color-ft-bong),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.footer__keu-goi-tieu-de {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--color-nau);
}

.footer__keu-goi-phu {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-ft-goi-chu-phu);
}

.footer__keu-goi-nut {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

/* Nút chính "Đặt lịch": teal chỉ điểm xuyết, chữ trắng (tương phản ~9:1) */
.footer .footer__nut--dat-lich {
  background: var(--color-teal);
  border: 1px solid var(--color-teal);
  color: var(--color-white);
}

.footer .footer__nut--dat-lich:hover {
  background: var(--color-teal-dam);
  color: var(--color-white);
  text-decoration: none;
}

/* Nút "Gọi …": nền trắng ngà viền vàng, chữ vàng nâu đậm (AA) */
.footer .footer__nut--goi {
  background: var(--color-ivory);
  border: 1px solid var(--color-gold);
  color: var(--color-ft-link);
}

.footer .footer__nut--goi:hover {
  background: var(--color-gold-light);
  color: var(--color-ft-link-hover);
  text-decoration: none;
}

.footer .footer__nut--dat-lich:focus-visible {
  outline-color: var(--color-white);
}

/* (3)(4)(5)(6) Lưới 4 cột: thương hiệu · Liên hệ · Dịch vụ · Liên kết */
.footer__inner {
  display: grid;
  gap: var(--space-5);
}

.footer__cot {
  min-width: 0;
}

/* Cột 1: logo + khẩu hiệu + bác sĩ + icon mạng xã hội */
.footer__logo {
  display: inline-flex;
  margin-bottom: var(--space-3);
}

.footer__logo .logo__anh img {
  width: 12rem;
}

.footer__logo .logo__ten {
  font-size: 1.5rem;
  background-image: linear-gradient(180deg, var(--color-ten-1) 0%, var(--color-ten-2) 45%, var(--color-ten-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.footer__khau-hieu {
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-ft-link);
}

.footer__nguon {
  margin-bottom: 0;
  font-size: 0.95rem;
  color: var(--color-ft-link);
}

.footer__mx {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.footer__mx-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(145deg, var(--color-ft-icon-nen-1), var(--color-gold-light));
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  color: var(--color-ft-link);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.footer__mx-nut:hover {
  background: var(--color-gold-light);
  color: var(--color-ft-link-hover);
  transform: translateY(-2px);
}

/* Tiêu đề cột: chữ hoa nhỏ giãn chữ + gạch chân vàng gradient ngắn 40px */
.footer__tieu-de {
  margin-bottom: var(--space-3);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ft-link);
}

.footer__tieu-de::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: var(--space-2);
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-ft-goi-vien) 60%, transparent 100%);
}

.footer__ds {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer a {
  color: var(--color-ft-link);
  text-decoration: none;
}

.footer a:hover {
  color: var(--color-ft-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer a:focus-visible {
  outline-color: var(--color-vang-nau);
}

/* Cột Liên hệ: mỗi dòng có huy hiệu icon tròn 32px vàng */
.footer__ds--lien-he {
  gap: var(--space-3);
}

.footer__ds--lien-he li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

.footer__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: radial-gradient(circle at 35% 30%, var(--color-ft-icon-nen-1), var(--color-ft-icon-nen-2) 72%);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  color: var(--color-ft-link);
  box-shadow: 0 2px 6px var(--color-ft-bong);
}

/* Nút nhỏ "Chỉ đường" dạng pill viền vàng */
.footer__chi-duong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
}

.footer .footer__chi-duong:hover {
  background: var(--color-gold-light);
  text-decoration: none;
}

/* Cột Dịch vụ + Liên kết: mỗi liên kết có chấm vàng nhỏ, rê chuột trượt phải 3px */
.footer__ds--dich-vu li,
.footer__ds--lien-ket li {
  min-width: 0;
}

.footer__ds--dich-vu a,
.footer__ds--lien-ket a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.95rem;
  transition: color var(--transition), transform var(--transition);
}

.footer__ds--dich-vu a::before,
.footer__ds--lien-ket a::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
}

.footer__ds--dich-vu a:hover,
.footer__ds--lien-ket a:hover {
  color: var(--color-ft-link-hover);
  transform: translateX(3px);
  text-decoration: none;
}

/* (7) Dải cuối: đường kẻ gradient vàng mờ 2 đầu + bản quyền + nút lên đầu trang */
.footer__cuoi {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--container);
  margin: var(--space-6) auto 0;
  padding: var(--space-4) var(--space-4) 0;
}

.footer__cuoi::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--space-4);
  left: var(--space-4);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

.footer__ban-quyen {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ft-link);
}

.footer__len-dau {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-ivory);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  color: var(--color-ft-link);
  transition: background var(--transition), color var(--transition);
}

.footer__len-dau:hover {
  background: var(--color-gold-light);
  color: var(--color-ft-link-hover);
}

/* ≥768px: dải kêu gọi 1 hàng, nút pill nằm ngang */
@media (min-width: 768px) {
  .footer__keu-goi {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
  }

  .footer__keu-goi-nut {
    flex: none;
    flex-direction: row;
  }

  .footer__nut {
    width: auto;
    min-width: 9.5rem;
  }
}

/* Tablet (768–1023px): lưới 2 cột
   Thứ tự: Thương hiệu | Liên hệ ; Dịch vụ | Liên kết */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer__noi,
  .footer__cuoi {
    padding-right: 5rem; /* chừa chỗ cho cột nút nổi bên phải */
  }

  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop (≥1024px): 4 cột theo tỉ lệ 1.3fr 1fr 1fr 1fr;
   chừa chỗ phải đủ rộng để nút "Lên đầu trang" không bị cột nút nổi che */
@media (min-width: 1024px) {
  .footer__inner {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }

  .footer__logo .logo__anh img {
    width: 13rem;
  }

  .footer__noi,
  .footer__cuoi {
    padding-right: 7rem;
  }
}

/* Màn hình nhỏ (<768px): Dịch vụ và Liên kết đặt cạnh nhau 2 cột,
   Thương hiệu + Liên hệ chiếm cả hàng; chừa chỗ cho cột nút nổi bên phải */
@media (max-width: 767px) {
  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__cot:nth-child(1),
  .footer__cot:nth-child(2) {
    grid-column: 1 / -1;
  }

  .footer__noi,
  .footer__cuoi {
    padding-right: 4.5rem;
  }
}

/* --------------------------------------------------------------------------
   KHU VỰC: Cột nút nổi bên phải (Zalo, Gọi, Đặt lịch, Chỉ đường)
   -------------------------------------------------------------------------- */

.nut-noi {
  position: fixed;
  right: var(--space-2);
  bottom: var(--space-5);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nut-noi__muc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  color: var(--color-teal);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.nut-noi__muc:hover {
  background: var(--color-gold-light);
}

.nut-noi__bieu-tuong {
  display: inline-flex;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
}

/* Màn hình < 1024px: chỉ hiện biểu tượng (tên vẫn có qua aria-label) để không che nội dung */
.nut-noi__chu {
  display: none;
}

.nut-noi__bieu-tuong svg {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Màn hình lớn hơn
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  /* T226: logo ngang rộng 250px; cuộn xuống còn 200px (mobile giữ 170px) */
  .logo__anh img {
    width: 15.625rem;
  }

  .header.hd-da-cuon .logo__anh img {
    width: 12.5rem;
  }

  /* T226: dải thông điệp cao 34px, chữ lớn hơn mobile */
  .hd-thong-bao {
    max-height: 34px;
  }

  .hd-thong-bao__ban {
    height: 34px;
  }

  .hd-thong-bao__muc {
    font-size: 0.8rem;
    line-height: 34px;
  }

  .logo__ten {
    font-size: 1.35rem;
  }

  .logo__phu {
    font-size: 0.65rem;
  }

  /* T230: thư viện ảnh "Phòng khám" — tablet hiện 2 ảnh mỗi lượt */
  .csx-anh {
    flex-basis: calc((100% - var(--space-3)) / 2);
  }

  .tab--co-so .tab__nut {
    padding: var(--space-2) var(--space-4);
  }

  .banner__day {
    min-height: 16rem;
  }

  .search-hop__khung {
    padding: var(--space-6) var(--space-5) var(--space-5);
  }

  /* Form đăng ký: 2 cột từ 768px; ô "Dịch vụ" và nút gửi chiếm cả hàng */
  .dang-ky__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-6);
  }

  .truong--rong,
  .dang-ky__gui {
    grid-column: 1 / -1;
  }

  /* Bác sĩ: ảnh chân dung bên trái, hồ sơ bên phải */
  .ho-so {
    grid-template-columns: 16rem 1fr;
    align-items: start;
  }

  .ho-so__anh {
    max-width: none;
  }

  /* T240/T243: thẻ hồ sơ bác sĩ — tablet trở lên: chữ cột trái, chân dung neo đáy thẻ
     ở cột phải (ảnh ~385px ở 768px), chữ nhỏ hơn desktop. */
  .dn-the {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: stretch;
    gap: var(--space-5);
    min-height: 34rem;
    padding: var(--space-6);
  }

  .dn-ten {
    font-size: clamp(3.25rem, 5vw, 4rem);
  }

  /* T244: tablet — học hàm ~18px, đường kẻ dài hơn, pill + thẻ thông tin thoáng hơn */
  .dn-hoc-ham {
    font-size: 1.125rem;
  }

  .dn-hoc-ham__duong {
    flex-basis: 8rem;
    width: 8rem;
  }

  .dn-hoc-ham__sao {
    width: 1rem;
    height: 1rem;
  }

  .dn-vai-tro {
    font-size: 1.1rem;
    padding: 0.7rem 1.4rem;
  }

  .dn-vai-tro__vong {
    width: 2rem;
    height: 2rem;
  }

  .dn-vai-tro__icon {
    width: 1rem;
    height: 1rem;
  }

  .dn-thong-tin {
    padding: 1.5rem 1.75rem;
  }

  .dn-ds li {
    padding: 1rem 0 1rem 4rem;
    font-size: 1.125rem;
  }

  .dn-ds li::before {
    width: 3rem;
    height: 3rem;
  }

  .dn-ds li::after {
    left: 0.8125rem;
    width: 1.375rem;
    height: 1.375rem;
  }

  /* Chân dung ra khỏi luồng: neo đáy phải thẻ để đáy ảnh trùng đáy thẻ (không lơ lửng) */
  .dn-phai {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 45%;
    height: 100%;
    padding-top: 0;
  }

  .dn-khung-anh {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: none;
    padding-top: 0;
    transform: translateX(-50%);
  }

  .dn-halo {
    bottom: 10%;
    width: min(100%, 24rem);
  }

  /* Tablet: chân dung ~460px (không vượt) */
  .dn-anh {
    max-height: 29rem;
  }

  .dn-hoa-tiet {
    top: 2rem;
    left: 44%;
    width: 11rem;
    height: 11rem;
  }

  .dn-lua--tren {
    width: min(24rem, 50%);
  }

  /* T208: tab kết quả — tự xếp 4–5 nút/hàng; dải ảnh hiện 3 ảnh mỗi lượt */
  .tab--ket-qua .tab__ds {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  .ket-qua__dai .ket-qua__anh {
    flex-basis: calc((100% - var(--space-3) * 2) / 3);
  }

  /* T222: lưới "Dịch vụ nổi bật" — tablet 2 cột */
  .dvnb-luoi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  /* T237: tablet trở lên — thẻ ngang: ảnh tuyệt đối bên phải, vùng chữ cột trái,
     lớp phủ gradient trắng ngà 6 mốc chuyển dần sang trong suốt (không mép cứng). */
  .csx-the {
    display: block;
    /* Chiều cao thẻ ≥ 460px để ảnh dọc mặt tiền không bị bóp mất biển hiệu */
    min-height: 28.75rem;
  }

  /* T238: PHẦN KHOÉT LÕM ở góc trên PHẢI thẻ, đủ rộng chứa cả hàng 3 tab.
     Vùng khoét dùng đúng nền khu (--color-the-nen) phủ lên thẻ; cạnh dưới-trái bo 28px.
     2 góc lõm ngược (::before bên trái, ::after bên phải-dưới) dựng bằng radial-gradient
     nên đường viền thẻ lượn mềm xuống quanh hàng tab, không phải hình tròn rời. */
  .csx-khoet {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem 0.75rem 1.75rem;
    background: var(--color-the-nen);
    border-bottom-left-radius: 28px;
    transition: transform 300ms ease;
  }

  /* 2 góc lõm ngược: cùng một kiểu gradient (tâm ở góc dưới-trái ô 28x28) */
  .csx-khoet::before,
  .csx-khoet::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    background: radial-gradient(circle 28px at bottom left, transparent 0 27.5px, var(--color-the-nen) 28px);
    pointer-events: none;
  }

  /* Nối cạnh trên thẻ với cạnh trái vùng khoét */
  .csx-khoet::before {
    top: 0;
    left: -28px;
  }

  /* Nối cạnh phải thẻ với cạnh dưới vùng khoét */
  .csx-khoet::after {
    right: 0;
    bottom: -28px;
  }

  /* Hàng tab nằm gọn trong vùng khoét, căn giữa theo chiều dọc */
  .csx-khoet .tab__ds {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    border-bottom: 0;
  }

  /* Thẻ nâng khi rê chuột → vùng khoét + hàng tab nâng theo, đường cắt không bị lệch */
  .tab--co-so:has(.csx-the:hover) .csx-khoet,
  .tab--co-so:has(.csx-the:focus-within) .csx-khoet {
    transform: translateY(-6px);
  }

  /* Tablet: tab nhỏ hơn nhưng vẫn nằm trong khoét */
  .tab--co-so .tab__nut {
    min-height: 2.25rem;
    padding: var(--space-1) var(--space-3);
    font-size: 0.85rem;
    white-space: nowrap;
  }

  /* Tablet (768–1023): ảnh chiếm 50% bên phải; desktop nâng lên 58% bên dưới */
  .csx-the__anh {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 50%;
    aspect-ratio: auto;
    border-radius: 0;
    /* T239: mép TRÁI khối ảnh tan dần vào nền trắng ngà (brief cấm đường phân chia
       cứng) — 28% đầu chiều rộng ảnh chuyển từ trong suốt sang đặc. Áp dụng cho cả
       tablet lẫn desktop; mobile ảnh nằm dưới chữ nên không cần mask. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
  }

  .csx-the__anh img {
    height: 100%;
    /* Giá trị chung dự phòng; từng ảnh được căn riêng ở khối "căn ảnh RIÊNG" phía trên */
    object-position: center 30%;
  }

  .csx-the__lop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 28.75rem;
    padding: var(--space-7) var(--space-6) var(--space-6);
    background: linear-gradient(
      90deg,
      var(--color-the-lop-1) 0%,
      var(--color-the-lop-2) 28%,
      var(--color-the-lop-3) 40%,
      var(--color-the-lop-4) 52%,
      var(--color-the-lop-5) 65%,
      var(--color-the-lop-6) 78%
    );
  }

  /* Chữ chỉ chiếm cột trái, không đè lên vùng ảnh bên phải */
  .csx-the__chu {
    max-width: 45%;
  }

  .csx-the__tieu-de {
    font-size: clamp(1.7rem, 3.2vw, 2.1rem);
  }
}

@media (min-width: 1024px) {
  .header__inner {
    padding-block: var(--space-3);
  }

  /* T240/T243: desktop — cột chữ 58% trái, cột chân dung 42% phải (neo đáy thẻ);
     thẻ cao ≥ 600px để chân dung ~540px không bị bóp, tên ~64px. */
  .dn-the {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: var(--space-6);
    min-height: 39rem;
    padding: var(--space-7);
  }

  .dn-ten {
    font-size: 5rem; /* T244: ~80px desktop */
  }

  /* T244: desktop — học hàm ~22px, đường kẻ ~180px, pill ~20px, thẻ thông tin 28/32px,
     dòng hồ sơ ~19px với huy hiệu 52px. */
  .dn-hoc-ham {
    font-size: 1.375rem;
  }

  .dn-hoc-ham__duong {
    flex-basis: 11.25rem;
    width: 11.25rem;
    max-width: 100%;
  }

  .dn-hoc-ham__sao {
    width: 1.05rem;
    height: 1.05rem;
  }

  .dn-gach {
    width: min(28rem, 100%);
  }

  .dn-vai-tro {
    font-size: 1.25rem;
    padding: 0.75rem 1.625rem;
  }

  .dn-vai-tro__vong {
    width: 2.125rem;
    height: 2.125rem;
  }

  .dn-vai-tro__icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  .dn-thong-tin {
    padding: 1.75rem 2rem;
  }

  .dn-ds li {
    padding: 1rem 0 1rem 4.25rem;
    font-size: 1.1875rem; /* ~19px */
  }

  .dn-ds li::before {
    width: 3.25rem; /* 52px */
    height: 3.25rem;
  }

  .dn-ds li::after {
    left: 0.875rem;
    width: 1.5rem;
    height: 1.5rem;
  }

  .dn-phai {
    width: 42%;
  }

  /* Halo ~460px: đường kính gần bằng cột chân dung, đỉnh halo ngang đỉnh đầu */
  .dn-halo {
    bottom: 14%;
    width: min(100%, 28.75rem);
  }

  /* Chân dung ~560px, đầu cách mép trên thẻ ~40–60px; đáy vẫn bám đáy thẻ */
  .dn-anh {
    max-height: 35rem;
  }

  /* T244: họa tiết gương mặt cao ~220px, đặt sau/phải tên như ảnh mẫu */
  .dn-hoa-tiet {
    top: 2.25rem;
    left: 46%;
    width: 13.75rem;
    height: 13.75rem;
  }

  /* Dải lụa vàng rộng hơn ở desktop để nét dày đúng brief (stroke 18–46px) */
  .dn-lua--tren {
    width: min(28rem, 52%);
  }

  /* T230: khi cuộn, thanh menu (không tính dải thông điệp) cao 86px — giảm ~11% so với
     97px lúc đầu trang (giữ logo 200px, chỉ giảm padding ít hơn bản cũ 66px) */
  .header.hd-da-cuon .header__inner {
    min-height: 86px;
    padding-block: var(--space-2);
  }

  /* Menu ngang: ghi đè trạng thái menu di động */
  .header__menu,
  .header__menu.is-open {
    display: flex;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .header__dong,
  .header__mo {
    display: none;
  }

  .menu {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    margin-top: 0;
  }

  .menu__lien-ket,
  .menu__nut {
    width: auto;
    padding: var(--space-2) var(--space-3);
  }

  .menu__con {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 10;
    min-width: 15rem;
    margin: 0;
    padding: var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-gold-light);
    box-shadow: var(--shadow);
  }

  .menu__con-ds a {
    padding: var(--space-2) var(--space-3);
  }

  .nut-noi {
    right: var(--space-3);
    bottom: var(--space-6);
  }

  /* T237: desktop — ảnh thẻ Phòng khám đúng 58% bên phải, vùng chữ 42% bên trái */
  .csx-the__anh {
    width: 58%;
  }

  .csx-the__lop {
    padding: var(--space-8) var(--space-7) var(--space-6) var(--space-6);
  }

  .csx-the__chu {
    max-width: 42%;
  }

  .csx-the__tieu-de {
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  }

  /* T238: desktop — vùng khoét + tab rộng rãi hơn tablet (vẫn nằm gọn trong khoét) */
  .csx-khoet {
    padding: 0.9rem 1.5rem 0.9rem 2rem;
  }

  .tab--co-so .tab__nut {
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-4);
    font-size: 0.9rem;
  }

  /* T230: thư viện ảnh "Phòng khám" — desktop hiện 3 ảnh mỗi lượt */
  .csx-anh {
    flex-basis: calc((100% - var(--space-3) * 2) / 3);
  }

  /* Từ 1024px cột nút nổi hiện cả chữ (giữ aria-label cho trình đọc màn hình) */
  .nut-noi__chu {
    display: inline;
  }

  /* T222: lưới "Dịch vụ nổi bật" — desktop 3 cột */
  .dvnb-luoi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  /* Khoảng 1024px: thu hẹp menu để header không tràn ngang */
  .menu {
    gap: var(--space-1);
  }

  .menu__lien-ket,
  .menu__nut {
    padding: var(--space-2);
  }
}

@media (min-width: 1440px) {
  .khung,
  .header__inner,
  .footer__inner {
    padding-inline: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   KHU VỰC: Quy trình khám & điều trị (trang chủ, T275)
   4 bước đọc từ site/content/quy-trinh.md (mỗi bước 1 thẻ the/quy-trinh.html).
   Tông trắng ngà – vàng champagne (W2k); teal chỉ còn ở viền focus mặc định.
   Desktop (≥1024px): 4 cột ngang, vòng số căn giữa đầu thẻ + đường nối vàng mảnh
   xuyên qua tâm các vòng số (đường nối nằm dưới vòng số, trên nền thẻ).
   Tablet (768–1023px): 2 cột. Mobile (<768px): 1 cột dọc + đường nối dọc bên trái.
   Hiện dần khi cuộn bằng CSS scroll-driven animation; trình duyệt không hỗ trợ
   hoặc người dùng chọn giảm chuyển động → thẻ hiện ngay (không bao giờ kẹt ẩn).
   -------------------------------------------------------------------------- */

[data-khu-vuc="quy-trinh"] {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-cream) 100%);
}

/* Dòng phụ dưới tiêu đề khu */
.quy-trinh__phu {
  max-width: 46rem;
  margin: calc(var(--space-2) * -1) 0 var(--space-5);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-nau-phu);
}

.quy-trinh__ds {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* mobile: 1 cột dọc */
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mobile: đường nối dọc bên trái, chạy qua tâm các vòng số.
   z-index 0 → nằm DƯỚI vòng số (.quy-trinh__so z-index 1) để không đè lên chữ số;
   vòng số có nền đặc nên đường nối chỉ hiện ở khoảng GIỮA các vòng. */
.quy-trinh__ds::before {
  content: "";
  position: absolute;
  top: 3rem;
  bottom: 3rem;
  left: calc(var(--space-4) + 2rem - 1px);
  z-index: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--color-gold) 8%, var(--color-gold) 92%, transparent 100%);
  pointer-events: none;
}

/* Mỗi bước: thẻ trắng ngà viền champagne, vòng số bên trái (mobile/tablet) */
.quy-trinh__buoc {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-ivory);
  border: 1px solid var(--color-gold);
  border-radius: 18px;
  box-shadow: var(--shadow-the);
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

/* Rê chuột / focus bàn phím bên trong: nâng 4px, viền vàng đậm, bóng đậm hơn */
.quy-trinh__buoc:hover,
.quy-trinh__buoc:focus-within {
  transform: translateY(-4px);
  border-color: var(--color-gold-dam);
  box-shadow: var(--shadow-the-hover);
}

/* Vòng số 64px: nền radial vàng nhạt KHÔNG trong suốt, viền champagne, bóng ấm,
   số serif nâu vàng. z-index 1 để nằm TRÊN đường nối (z-index 0) — nền đặc che phần
   đường nối đi qua vòng số, chỉ để lộ khoảng giữa các vòng. */
.quy-trinh__so {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: var(--color-ivory);
  background-image: radial-gradient(circle at 35% 30%, var(--color-huy-hieu-1) 0%, var(--color-huy-hieu-2) 70%, var(--color-sao-vang) 100%);
  border: 1px solid var(--color-vang-sang);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px var(--color-bong-nau), inset 0 1px 0 var(--color-hs-sang-1);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-vang-nau);
}

.quy-trinh__ten {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem; /* ~20px */
  line-height: 1.3;
  color: var(--color-nau);
  overflow-wrap: break-word;
}

.quy-trinh__mo-ta {
  grid-column: 2;
  margin: 0;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  color: var(--color-nau-phu);
  overflow-wrap: break-word;
}

/* Tablet (768–1023px): 2 cột — mỗi hàng 2 thẻ, không vẽ đường nối dọc/ngang */
@media (min-width: 768px) and (max-width: 1023px) {
  .quy-trinh__ds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quy-trinh__ds::before {
    display: none;
  }
}

/* Desktop (≥1024px): 4 cột ngang, vòng số căn giữa đầu thẻ,
   đường nối vàng mảnh chạy ngang qua tâm các vòng số */
@media (min-width: 1024px) {
  .quy-trinh__ds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quy-trinh__ds::before {
    display: block;
    top: calc(var(--space-5) + 2rem - 1px);
    right: 1.5rem;
    bottom: auto;
    left: 1.5rem;
    z-index: 0;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--color-gold) 5%, var(--color-gold) 95%, transparent 100%);
  }

  .quy-trinh__buoc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    text-align: center;
  }

  /* Thẻ cao bằng nhau: vòng số giữ nguyên 64px, mô tả dài ngắn khác nhau thì
     phần mô tả tự giãn xuống đáy thẻ */
  .quy-trinh__so {
    grid-row: auto;
    margin-bottom: var(--space-1);
  }

  .quy-trinh__mo-ta {
    grid-column: auto;
    margin-top: auto;
  }
}

/* Hiện dần khi cuộn: chỉ bật khi trình duyệt hỗ trợ animation theo tiến trình cuộn
   (Edge/Chrome ≥ 115) VÀ người dùng không chọn giảm chuyển động.
   Không hỗ trợ → không có animation nào → thẻ hiện bình thường (không kẹt ẩn).
   Animate thuộc tính `translate` (không phải `transform`) để hiệu ứng nâng thẻ
   khi rê chuột vẫn hoạt động sau khi animation kết thúc. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes quy-trinh-hien {
      from {
        opacity: 0;
        translate: 0 24px;
      }

      to {
        opacity: 1;
        translate: 0 0;
      }
    }

    .quy-trinh__buoc {
      animation: quy-trinh-hien linear both;
      animation-timeline: view();
      /* Hiện xong khi thẻ đã vào 60% quãng đường tiến vào khung nhìn */
      animation-range: entry 0% entry 60%;
    }
  }
}

/* Tôn trọng lựa chọn giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }

  /* T230: tắt nâng thẻ/phóng ảnh "Phòng khám", phóng ảnh thư viện và nâng nút Chỉ đường */
  .csx-the:hover,
  .csx-the:focus-within {
    transform: none;
  }

  .csx-the:hover .csx-the__anh img,
  .csx-the:focus-within .csx-the__anh img,
  .csx-anh:hover img {
    transform: none;
  }

  .csx-nut:hover,
  .csx-nut:focus-visible {
    transform: none;
  }

  /* T237: tắt vệt sáng chạy trên nút "Chỉ đường" */
  .csx-nut::after {
    display: none;
  }

  /* T238: tắt chuyển động của vùng khoét chứa tab */
  .csx-khoet {
    transition: none;
  }

  .tab--co-so:has(.csx-the:hover) .csx-khoet,
  .tab--co-so:has(.csx-the:focus-within) .csx-khoet {
    transform: none;
  }

  /* T259: tắt nâng thẻ "Bằng cấp & chứng chỉ" (giữ nguyên kích thước, không chuyển động) */
  .giay-phep__muc:hover,
  .giay-phep__muc:focus-within {
    transform: none;
  }

  /* T233: tắt vệt sáng và nâng 2px của tab "Phòng khám" */
  .tab--co-so .tab__nut::after {
    display: none;
  }

  .tab--co-so .tab__nut:hover {
    transform: none;
  }

  /* T240: tắt phóng ảnh hồ sơ bác sĩ + nâng thẻ thông tin (giữ nguyên kích thước, không chuyển động) */
  .dn-the:hover .dn-anh,
  .dn-the:focus-within .dn-anh {
    transform: none;
  }

  .dn-thong-tin:hover,
  .dn-thong-tin:focus-within {
    transform: none;
  }

  /* T222: tắt nổi/vệt sáng của nút và phóng ảnh thẻ "Dịch vụ nổi bật";
     JS cũng không thêm lớp reveal khi người dùng chọn giảm chuyển động */
  .dvnb-the:hover,
  .dvnb-the:focus-within {
    transform: none;
  }

  .dvnb-the:hover .dvnb-anh img,
  .dvnb-the:focus-within .dvnb-anh img {
    transform: none;
  }

  .dvnb-nut {
    animation: none;
  }

  .dvnb-nut::after {
    display: none;
  }

  /* T239: ngôi sao đứng yên (opacity 1), tắt vệt sáng của pill tiêu đề */
  .dvnb-td-spark {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .dvnb-td-pill::after {
    display: none;
  }

  /* T245: tắt 3 hiệu ứng ánh kim mới — chữ "Top" giữ gradient TĨNH (dải sáng ở giữa chữ),
     pill không còn vệt sáng tự lướt */
  .dvnb-td-top {
    animation: none;
    background-position: 50% 50%;
  }

  .dvnb-td-pill::before {
    display: none;
  }

  /* T226: tắt marquee — chỉ hiện thông điệp đầu; bỏ hiệu ứng thu gọn header */
  .hd-thong-bao__chay {
    animation: none;
  }

  .hd-thong-bao__ban[aria-hidden="true"] {
    display: none;
  }

  .hd-thong-bao__ban:first-child .hd-thong-bao__muc:not(:first-child) {
    display: none;
  }

  /* T275: tắt hiện dần + nâng thẻ khu "Quy trình khám & điều trị" */
  .quy-trinh__buoc {
    animation: none;
    translate: none;
    transition: none;
  }

  .quy-trinh__buoc:hover,
  .quy-trinh__buoc:focus-within {
    transform: none;
  }

  .header,
  .header__inner,
  .hd-thong-bao,
  .logo__anh img,
  .header__menu.is-open {
    transition: none;
  }
}