/* ==========================================================================
   ĐÔNG Y NHÂN TÂM — Hệ thống giao diện
   Kỹ thuật: Flexbox toàn phần, không CSS Grid, không position absolute/fixed.
   Mọi giá trị thiết kế khai báo trong :root và dùng lại bằng var().
   ========================================================================== */

/* ============================ 1. DESIGN TOKENS ============================ */
:root {
  /* --- Màu thương hiệu: lấy từ logo Đông Y Nhân Tâm --- */
  --green-900: #0e3a22;
  --green-800: #14512a;
  --green-700: #1c6438;
  --green-600: #2a7a4a;
  --jade-500: #4f8f74;
  --jade-300: #8fb5a4;
  --jade-100: #d9e7e0;

  --brass-700: #8a5f24;
  --brass-600: #a9762f;
  --brass-400: #c9a05a;
  --brass-200: #e8d3a9;

  --wood-700: #5d4530;


  --cream: #fbf7ef;
  --cream-2: #f5eee0;
  --sand: #ece2cf;
  --white: #ffffff;

  --ink: #1f2420;
  /* Đậm hơn bản gốc #4a534c: lớp phủ nền sáng hạ còn 72% nên hoa văn
     trống đồng hiện rất rõ, màu cũ chỉ còn 3.67:1 ở chỗ hoa văn đậm nhất. */
  --ink-2: #333a34;
  /* Vẫn nhạt hơn --ink-2 một bậc để giữ phân cấp, nhưng phải đủ đậm
     để qua 4.5:1 trên nền có hoa văn. */
  --ink-3: #3a423b;

  --line: #ddd2bd;
  --line-soft: #e8dfcd;
  --line-dark: #2c5540;

  /* --- Vai trò ngữ nghĩa --- */
  --bg-page: var(--cream);
  --bg-surface: var(--white);
  --bg-surface-2: var(--cream-2);
  --bg-dark: var(--green-900);

  --text-strong: var(--ink);
  --text-body: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-on-dark: var(--cream);
  --text-on-dark-soft: #c4d6cb;

  --accent-text: var(--brass-700);
  --accent-on-dark: var(--brass-400);

  --border: var(--line);
  --border-soft: var(--line-soft);
  --border-on-dark: var(--line-dark);

  /* --- Hoa văn nền --- */
  /* Ảnh trống đồng dùng cho các khối nền tối, không lặp, luôn phủ kín khung */
  --drum-image: url("../assets/web/nen-trong-dong.jpg");
  /* Lớp phủ nâu trầm giữ chữ dễ đọc mà vẫn thấy hoa văn */
  --drum-scrim: linear-gradient(rgba(14, 58, 34, 0.55), rgba(14, 58, 34, 0.61));
  --drum-scrim-soft: linear-gradient(rgba(14, 58, 34, 0.5), rgba(14, 58, 34, 0.58));
  /* Hoa văn vector, lặp liền mạch, dùng cho nền sáng */
  /* Lớp phủ sáng đặt trên ảnh trống đồng, để nền sáng vẫn thấy hoa văn
     trống đồng rất mờ mà chữ không bị nhiễu. */
  --drum-scrim-cream: linear-gradient(
    rgba(251, 247, 239, 0.72),
    rgba(251, 247, 239, 0.73)
  );
  --drum-scrim-sand: linear-gradient(
    rgba(245, 238, 224, 0.72),
    rgba(245, 238, 224, 0.73)
  );

  /* --- Ảnh nền khu mở đầu trang chủ --- */
  --hero-image: url("../assets/web/luong-y-dinh-cong-luc-trang-dau.jpg");
  --hero-min-h: 41rem;
  --hero-inner-h: 34rem;
  /* Lớp phủ tối dần về bên phải, giữ chân dung sáng rõ và chữ luôn đọc được */
  --hero-scrim: linear-gradient(
    to right,
    rgba(28, 19, 10, 0) 24%,
    rgba(28, 19, 10, 0.64) 40%,
    rgba(28, 19, 10, 0.8) 62%
  );

  /* --- Chân trang ảnh, lộ dần khi cuộn --- */
  --footer-image: url("../assets/web/bia-dong-y-nhan-tam.jpg");
  --footer-scrim: linear-gradient(
    rgba(14, 58, 34, 0.66),
    rgba(14, 58, 34, 0.86)
  );
  --footer-cta-h: 13rem;


  /* --- Font --- */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;

  /* --- Cỡ chữ --- */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --fs-3xl: clamp(1.75rem, 1.35rem + 1.9vw, 2.5rem);
  --fs-4xl: clamp(2.125rem, 1.5rem + 2.9vw, 3.375rem);
  --fs-hero: clamp(2.375rem, 1.25rem + 3.1vw, 3.75rem);

  /* --- Độ đậm --- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Chiều cao dòng --- */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  /* --- Giãn chữ --- */
  --ls-tight: -0.015em;
  --ls-wide: 0.04em;
  --ls-wider: 0.14em;

  /* --- Khoảng cách (thang 4px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  /* --- Nhịp dọc giữa các khối --- */
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --section-y-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* --- Khung chứa --- */
  --container-max: 75rem;
  --container-narrow: 48rem;
  --container-pad: var(--sp-5);
  --container-pad-lg: var(--sp-10);

  /* --- Bề rộng đoạn văn, giữ số ký tự mỗi dòng dễ đọc --- */
  --measure-sm: 20rem;
  --measure-md: 24rem;
  --measure-lg: 34rem;
  --measure-xl: 36rem;
  --measure-2xl: 44rem;

  /* --- Màu trạng thái tương tác trên nền tối --- */
  --hover-brass-soft: rgba(201, 160, 90, 0.12);
  --hover-brass: rgba(201, 160, 90, 0.14);
  /* Nền nhạt cho nhãn ưu đãi nằm trên thẻ giá màu vàng đồng */
  --tint-green-soft: rgba(20, 81, 42, 0.14);

  /* --- Chiều cao bản đồ nhúng --- */
  --map-h: 20rem;

  /* --- Bảng giá --- */
  --price-card-bg: rgba(6, 30, 17, 0.55);
  --price-card-bg-hover: rgba(6, 30, 17, 0.72);

  /* --- Ô ảnh chờ bổ sung --- */
  --avatar-size: 4rem;

  /* --- Bóng đổ cho logo trắng trên ảnh --- */
  --logo-shadow: rgba(0, 0, 0, 0.45);

  /* --- Bo góc --- */
  --r-sm: 0.25rem;
  --r-md: 0.5rem;
  --r-lg: 0.875rem;
  --r-xl: 1.25rem;
  --r-pill: 62.5rem;
  --r-circle: 50%;

  /* --- Viền --- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-4: 4px;

  /* --- Đổ bóng --- */
  --shadow-sm: 0 1px 2px rgba(45, 32, 18, 0.05), 0 2px 6px rgba(45, 32, 18, 0.04);
  --shadow-md: 0 2px 4px rgba(45, 32, 18, 0.05), 0 10px 24px rgba(45, 32, 18, 0.07);

  /* --- Chuyển động --- */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 240ms cubic-bezier(0.33, 0.1, 0.25, 1);
  --t-slow: 520ms cubic-bezier(0.22, 0.7, 0.25, 1);

  /* Nhịp bấm huyệt: vào có lực, ra thì buông. Dùng cho tương tác chạm. */
  --t-press: 90ms cubic-bezier(0.4, 0, 1, 1);
  --t-release: 320ms cubic-bezier(0.16, 0.84, 0.28, 1);
  /* Nét đồng tự vẽ ra, và ảnh phóng rất chậm khi rê chuột */
  --t-draw: 620ms cubic-bezier(0.16, 0.84, 0.28, 1);
  --t-image: 760ms cubic-bezier(0.22, 0.61, 0.24, 1);
  /* Khối hiện dần: nhấc rất ngắn, các con lần lượt vào theo thứ tự đọc */
  --reveal-lift: 0.5rem;
  --reveal-step: 55ms;
  --reveal-step-max: 5;
  /* Bề ngang vạch đồng trước eyebrow, cũng là đích của hiệu ứng tự vẽ */
  --rule-w: 2rem;
  /* Vành đồng của gói nổi bật vào sau các thẻ khác một nhịp */
  --t-ring-delay: 220ms;

  /* --- Kích thước --- */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.75rem;
  --icon-xl: 2.5rem;
  --tap-min: 2.75rem;
  --logo-h: 4.25rem;
  --logo-h-sm: 3.5rem;
  --footer-logo-h: 7.5rem;
  --header-h: 5.25rem;
  --mobile-nav-max: 40rem;

  /* --- Lớp chồng --- */
  --z-curtain: 0;
  --z-content: 1;
  --z-header: 100;

  /* --- Tỉ lệ khung ảnh --- */
  --ratio-portrait: 4 / 5;
  --ratio-landscape: 3 / 2;
  --ratio-wide: 16 / 9;
  --ratio-square: 1 / 1;
}

/* ============================ 2. RESET & BASE ============================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Nội dung nằm trên chân trang, tạo hiệu ứng trượt che khi cuộn */
main {
  position: relative;
  z-index: var(--z-content);
  background-color: var(--bg-page);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}

p {
  margin: 0;
}

/* figure có lề mặc định 40px hai bên, phải bỏ để không phá lưới flex */
figure,
figcaption,
blockquote {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: var(--bw-2) solid var(--brass-600);
  outline-offset: var(--sp-1);
  border-radius: var(--r-sm);
}

::selection {
  background-color: var(--brass-200);
  color: var(--ink);
}

/* ============================ 3. TIỆN ÍCH DÙNG CHUNG ============================ */
.sr-only {
  width: var(--bw-1);
  height: var(--bw-1);
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  display: block;
  height: 0;
  overflow: hidden;
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: center;
}

.skip-link:focus {
  height: auto;
  padding: var(--sp-3);
}

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

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.icon {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  fill: none;
}

.icon-lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.icon-xl {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

/* ============================ 4. KHỐI TRANG ============================ */
.section {
  display: flex;
  flex-direction: column;
  padding-block: var(--section-y);
}

.section-sm {
  padding-block: var(--section-y-sm);
}

/* Ba tầng nền dùng chung cho mọi trang. Kem là mặt đọc chính nên chỉ có
   lớp thảo dược nhỏ; be ấm thêm lớp hoa văn lớn; nền tối đủ cả hai lớp
   đặt trên ảnh trống đồng. Ba mặt khác nhau về mật độ nhưng cùng một
   ngôn ngữ hoa văn, nên đi liền nhau vẫn thấy là một hệ. */
.section-cream {
  background-color: var(--bg-page);
  background-image: var(--drum-scrim-cream), var(--drum-image);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.section-sand {
  background-color: var(--bg-surface-2);
  background-image: var(--drum-scrim-sand), var(--drum-image);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.section-dark {
  background-color: var(--bg-dark);
  background-image: var(--drum-scrim), var(--drum-image);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--text-on-dark-soft);
}

.section-dark .section-title,
.section-dark h3 {
  color: var(--text-on-dark);
}

.section-dark .section-lead {
  color: var(--text-on-dark-soft);
}

/* --- Đầu khối --- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--container-narrow);
  margin-bottom: var(--sp-10);
}

.section-head-center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.section-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* Đầu khối thứ hai trong cùng một section cần khoảng thở phía trên */
.section-head-gap {
  margin-top: var(--sp-16);
}

/* ---- Bảng gợi ý chọn phương pháp ---- */
.method-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.method-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background-color: var(--bg-surface);
  border: var(--bw-1) solid var(--border-soft);
  border-left: var(--bw-4) solid var(--brass-400);
  border-radius: var(--r-md);
}

.method-case {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.method-pick {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-text);
}

.eyebrow::before {
  content: "";
  width: var(--sp-8);
  height: var(--bw-1);
  background-color: var(--brass-400);
}

.section-head-center .eyebrow::after {
  content: "";
  width: var(--sp-8);
  height: var(--bw-1);
  background-color: var(--brass-400);
}

.section-dark .eyebrow {
  color: var(--accent-on-dark);
}

.section-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
}

.section-title-lg {
  font-size: var(--fs-4xl);
}

.section-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  font-weight: var(--fw-light);
}

/* ============================ 5. NÚT BẤM ============================ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-6);
  border: var(--bw-1) solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base),
    border-color var(--t-base), box-shadow var(--t-base);
}

.button-primary {
  background-color: var(--green-800);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
}

.button-primary:hover {
  box-shadow: var(--shadow-md);
}

.button-accent {
  background-color: var(--brass-400);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.button-accent:hover {
  box-shadow: var(--shadow-md);
}

.button-outline {
  border-color: var(--border);
  background-color: transparent;
  color: var(--text-strong);
}

.button-outline:hover {
  border-color: var(--green-700);
  color: var(--green-800);
}

.button-light {
  border-color: var(--border-on-dark);
  background-color: transparent;
  color: var(--text-on-dark);
}

.button-light:hover {
  border-color: var(--brass-400);
  color: var(--white);
}

.button-block {
  width: 100%;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--green-800);
  transition: gap var(--t-fast), color var(--t-fast);
}

.text-link:hover {
  gap: var(--sp-3);
  color: var(--brass-700);
}

.section-dark .text-link {
  color: var(--accent-on-dark);
}

.section-dark .text-link:hover {
  color: var(--white);
}

/* ============================ 6. HEADER ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  flex-direction: column;
  background-color: var(--bg-page);
  border-bottom: var(--bw-1) solid var(--border-soft);
  transition: box-shadow var(--t-base);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  height: var(--logo-h-sm);
  width: auto;
}

.main-nav {
  display: none;
}

.main-nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  transition: color var(--t-fast), background-color var(--t-fast);
}

.nav-link:hover {
  color: var(--green-800);
  background-color: var(--bg-surface-2);
}

.nav-link.is-active {
  color: var(--green-800);
  font-weight: var(--fw-semibold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.header-call {
  display: none;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-md);
  background-color: transparent;
  color: var(--text-strong);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.nav-toggle:hover {
  background-color: var(--bg-surface-2);
  border-color: var(--green-700);
}

/* --- Menu di động: nằm trong luồng, đẩy nội dung xuống --- */
.mobile-nav {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  max-height: 0;
  overflow: hidden;
  border-top: var(--bw-1) solid transparent;
  transition: max-height var(--t-slow), border-color var(--t-base);
}

.mobile-nav.is-open {
  max-height: var(--mobile-nav-max);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top-color: var(--border-soft);
}

.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-4) var(--sp-6);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}

.mobile-nav-link.is-active {
  background-color: var(--bg-surface-2);
  color: var(--green-800);
  font-weight: var(--fw-semibold);
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: var(--bw-1) solid var(--border-soft);
}

/* ============================ 7. HERO ============================ */
.hero {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface-2);
  background-image: var(--drum-scrim-sand), var(--drum-image);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  padding-block: var(--section-y-sm) var(--section-y);
  border-bottom: var(--bw-1) solid var(--border-soft);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.hero-text {
  max-width: var(--measure-lg);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
}

/* Dưới 1024px khối mở đầu xếp dọc, nút gọi phải nằm trong màn hình đầu tiên.
   Đoạn mô tả và dòng ghi chú lùi xuống sau, cả hai đều không nhận tiêu điểm
   bàn phím nên thứ tự Tab vẫn giữ nguyên. */
.hero-text {
  order: 1;
}

.hero-note {
  order: 2;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: var(--bw-1) solid var(--border);
}

.hero-note-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.hero-note-item .icon {
  color: var(--brass-600);
}

.hero-media {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* --- Khối chân dung lương y trong khu mở đầu --- */
.hero-figure {
  display: flex;
  flex-direction: column;
}

.hero-photo {
  display: flex;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background-color: var(--sand);
}

.hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-square);
  object-fit: cover;
  object-position: 22% center;
}

.hero-caption {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--bg-dark);
  color: var(--text-on-dark-soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.hero-caption-name {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark);
}

.hero-caption-role {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ============================ 8. KHUNG ẢNH ============================ */
.image-frame {
  display: flex;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--sand);
  box-shadow: var(--shadow-md);
}

.image-frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.image-frame-portrait img {
  aspect-ratio: var(--ratio-portrait);
}

.image-frame-landscape img {
  aspect-ratio: var(--ratio-landscape);
}

.image-frame-wide img {
  aspect-ratio: var(--ratio-wide);
}

.image-frame-square img {
  aspect-ratio: var(--ratio-square);
}

/* Ảnh chân dung lương y: cắt lệch để giữ trọn khuôn mặt */
.image-frame img.focus-luongy {
  object-position: 31% center;
}

.image-frame img.focus-center {
  object-position: center;
}

.image-caption {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  border-left: var(--bw-2) solid var(--brass-400);
  background-color: var(--bg-surface);
  border-radius: var(--r-sm);
}

.image-caption-name {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.image-caption-role {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Ảnh minh hoạ trong khối liệu trình, kèm một dòng chú thích ngắn.
   Vạch đồng bên trái nối tiếp ngôn ngữ của .image-caption. */
.service-photo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.service-photo figcaption {
  padding-left: var(--sp-4);
  border-left: var(--bw-2) solid var(--brass-400);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* Liên kết trong dòng chú thích: gạch chân sẵn, đậm màu khi rê vào */
.service-photo figcaption a {
  color: var(--accent-text);
  font-weight: var(--fw-medium);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% var(--bw-1);
  transition: color var(--t-fast);
}

.service-photo figcaption a:hover {
  color: var(--green-800);
}

/* ============================ 9. THẺ NỘI DUNG ============================ */
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.card-service {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 100%;
  padding: var(--sp-6);
  background-color: var(--bg-surface);
  border: var(--bw-1) solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), border-color var(--t-base),
    transform var(--t-base);
}

.card-service:hover {
  border-color: var(--brass-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-12);
  height: var(--sp-12);
  border-radius: var(--r-circle);
  background-color: var(--jade-100);
  color: var(--green-800);
}

.card-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

.card-text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.card-media {
  display: flex;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--sand);
}

.card-media img {
  width: 100%;
  aspect-ratio: var(--ratio-landscape);
  object-fit: cover;
}

/* --- Thẻ bệnh lý --- */
.card-condition {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 100%;
  padding: var(--sp-6);
  background-color: var(--bg-surface);
  border: var(--bw-1) solid var(--border-soft);
  border-left: var(--bw-4) solid var(--green-700);
  border-radius: var(--r-md);
  transition: border-left-color var(--t-base), box-shadow var(--t-base);
}

.card-condition:hover {
  border-left-color: var(--brass-600);
  box-shadow: var(--shadow-sm);
}

.card-condition-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.card-condition-head .icon {
  color: var(--green-700);
}

.card-condition-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background-color: var(--bg-surface-2);
  border: var(--bw-1) solid var(--border-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  overflow-wrap: anywhere;
}

/* --- Danh sách điểm mạnh --- */
.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 100%;
}

.feature-item .icon {
  color: var(--accent-on-dark);
}

.section-cream .feature-item .icon,
.section-sand .feature-item .icon {
  color: var(--brass-600);
}

.feature-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.feature-text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* --- Quy trình --- */
.step-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.step-item {
  display: flex;
  gap: var(--sp-4);
  flex: 1 1 100%;
  padding: var(--sp-5);
  background-color: var(--bg-surface);
  border: var(--bw-1) solid var(--border-soft);
  border-radius: var(--r-md);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--sp-10);
  height: var(--sp-10);
  border-radius: var(--r-circle);
  background-color: var(--green-800);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.step-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.step-text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* --- Danh sách gạch đầu dòng có dấu --- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.check-item .icon {
  margin-top: var(--sp-1);
  color: var(--green-600);
}

.section-dark .check-item .icon {
  color: var(--jade-300);
}

/* ============================ 10. KHỐI HAI CỘT ============================ */
.split {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.split-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  flex: 1 1 50%;
}

.split-media {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 50%;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.prose-lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
}

.quote {
  margin: 0;
  padding-left: var(--sp-5);
  border-left: var(--bw-2) solid var(--brass-400);
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--green-800);
}

.section-dark .quote {
  color: var(--accent-on-dark);
}

/* ============================ 11. ĐẦU TRANG PHỤ ============================ */
.page-head {
  display: flex;
  flex-direction: column;
  padding-block: var(--section-y-sm);
  background-color: var(--bg-dark);
  background-image: var(--drum-scrim-soft), var(--drum-image);
  background-size: auto, cover;
  background-position: center, center top;
  background-repeat: no-repeat;
  color: var(--text-on-dark-soft);
}

.page-head-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--container-narrow);
}

.page-head .eyebrow {
  color: var(--accent-on-dark);
}

.page-title {
  font-size: var(--fs-4xl);
  color: var(--text-on-dark);
}

.page-lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-soft);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-soft);
}

.breadcrumb a:hover {
  color: var(--accent-on-dark);
}

.breadcrumb-sep {
  color: var(--jade-500);
}

/* ============================ 12. THƯ VIỆN ẢNH ============================ */
.gallery-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}

.gallery-group-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-4);
  border-bottom: var(--bw-1) solid var(--border);
}

.gallery-group-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
}

.gallery-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.gallery-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 100%;
}

.gallery-item figcaption {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.gallery-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background-color: var(--bg-surface-2);
  border: var(--bw-1) dashed var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.gallery-note .icon {
  margin-top: var(--sp-1);
  color: var(--brass-600);
}

/* ============================ 13. HỎI ĐÁP ============================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq-item {
  padding: var(--sp-2) var(--sp-5);
  background-color: var(--bg-surface);
  border: var(--bw-1) solid var(--border-soft);
  border-radius: var(--r-md);
  transition: border-color var(--t-base);
}

.faq-item[open] {
  border-color: var(--brass-400);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--tap-min);
  padding-block: var(--sp-3);
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary .icon {
  color: var(--brass-600);
  transition: transform var(--t-base);
}

.faq-item[open] summary .icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding-block: 0 var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* ============================ 14. THÔNG TIN LIÊN HỆ ============================ */
.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: var(--bw-1) solid var(--border-soft);
}

.info-row:last-child {
  border-bottom: 0;
}

.info-row .icon {
  margin-top: var(--sp-1);
  color: var(--brass-600);
}

.info-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.info-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-value {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

a.info-value:hover {
  color: var(--brass-700);
}

.map-frame {
  display: flex;
  overflow: hidden;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  background-color: var(--sand);
}

.map-frame iframe {
  width: 100%;
  height: var(--map-h);
  border: 0;
}

/* ============================ 15. BIỂU MẪU ============================ */
.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background-color: var(--bg-surface);
  border: var(--bw-1) solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.form-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-4);
  border-bottom: var(--bw-1) solid var(--border-soft);
}

.form-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

.form-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.form-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.field-required {
  color: var(--brass-700);
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--bg-page);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--text-strong);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.field-input:hover,
.field-select:hover,
.field-textarea:hover {
  border-color: var(--jade-500);
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  background-color: var(--white);
  border-color: var(--green-700);
}

.field-textarea {
  min-height: var(--sp-24);
  resize: vertical;
  line-height: var(--lh-normal);
}

.field-help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Dòng báo trạng thái sau khi bấm gửi */
.form-note {
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--tint-green-soft);
  border-left: var(--bw-2) solid var(--green-700);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--green-800);
}

/* Hai cách gửi đặt cạnh nhau, xuống một cột khi màn hẹp */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.form-actions .button {
  flex: 1 1 7rem;
  padding-inline: var(--sp-4);
}

.form-actions-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

/* Nút Messenger: đặc màu nhưng nhạt hơn nút chính, để ba nút không tranh nhau */
.button-light-solid {
  background-color: var(--jade-100);
  color: var(--green-800);
  background-image: linear-gradient(var(--brass-200), var(--brass-200));
}

.button-light-solid:hover {
  color: var(--green-900);
}

/* Khối xem trước tin nhắn, mặc định gấp lại cho gọn */
.form-preview {
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--bg-surface-2);
  border: var(--bw-1) solid var(--border-soft);
  border-radius: var(--r-md);
}

.form-preview-summary {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent-text);
  cursor: pointer;
}

/* Giữ nguyên các dấu xuống dòng do JS soạn ra */
.form-preview-text {
  margin-top: var(--sp-3);
  white-space: pre-line;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* ============================ 16b. CHÂN TRANG ẢNH LỘ DẦN ============================ */
/* Nội dung trang trượt lên trên, để lộ dần khối ảnh nằm phía dưới.
   Dùng sticky nên không cần position absolute hay fixed. */
.footer-curtain {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-dark);
  background-image: var(--footer-scrim), var(--footer-image);
  background-size: cover;
  /* Neo mép trên để chân dung và logo trong ảnh không bị cắt đầu */
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--text-on-dark-soft);
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  min-height: var(--footer-cta-h);
  padding-block: var(--sp-8);
  text-align: center;
}

.footer-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.footer-cta-title {
  max-width: var(--measure-xl);
  font-size: var(--fs-3xl);
  color: var(--text-on-dark);
}

.footer-cta-text {
  max-width: var(--measure-lg);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-soft);
}

.footer-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* ============================ 17. FOOTER ============================ */
.site-footer {
  display: flex;
  flex-direction: column;
  color: var(--text-on-dark-soft);
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
  padding-block: var(--sp-10);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 100%;
}

/* Logo đứng trực tiếp trên ảnh, chuyển trắng đơn sắc để nổi rõ.
   align-self giữ đúng tỉ lệ, nếu không flex sẽ kéo giãn ngang. */
.footer-logo {
  align-self: flex-start;
  height: var(--footer-logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 var(--bw-2) var(--sp-2) var(--logo-shadow));
  opacity: 0.96;
}

.footer-about {
  max-width: var(--measure-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 100%;
}

.footer-title {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-on-dark);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.footer-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-sm);
  transition: color var(--t-fast);
}

.footer-link:hover {
  color: var(--white);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.footer-contact-row .icon {
  margin-top: var(--sp-1);
  color: var(--jade-300);
}

.footer-social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: var(--bw-1) solid var(--border-on-dark);
  border-radius: var(--r-circle);
  color: var(--text-on-dark-soft);
  transition: border-color var(--t-fast), color var(--t-fast),
    background-color var(--t-fast);
}

.social-button:hover {
  border-color: var(--brass-400);
  background-color: var(--hover-brass);
  color: var(--white);
}

/* ---- Dải bản đồ ở chân trang, dùng chung cho cả sáu trang ----
   Một cột trên máy nhỏ, chữ nằm trên bản đồ. Từ 900px trở lên tách
   hai cột: thông tin bên trái, bản đồ bên phải. */
.footer-map {
  border-top: var(--bw-1) solid var(--border-on-dark);
}

.footer-map-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}

.footer-map-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 100%;
}

.footer-map-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.footer-map-row .icon {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--accent-on-dark);
}

.footer-map-row a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 var(--bw-1);
  transition: color var(--t-fast), background-size var(--t-release);
}

.footer-map-row a:hover {
  color: var(--white);
  background-size: 100% var(--bw-1);
}

.footer-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* Khung bản đồ: bo góc và cắt gọn phần thừa của iframe */
.footer-map-frame {
  display: flex;
  overflow: hidden;
  flex: 1 1 100%;
  border-radius: var(--r-lg);
  border: var(--bw-1) solid var(--border-on-dark);
  background-color: var(--price-card-bg);
}

/* Bản gộp artifact không nhúng được khung bản đồ từ miền khác, nên chỗ đó
   là một ảnh bản đồ tĩnh dựng sẵn lúc build, bấm vào mở Google Maps thật. */
.footer-map-static {
  display: flex;
  width: 100%;
}

.footer-map-static img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-landscape);
  object-fit: cover;
  transition: transform var(--t-image);
}

.footer-map-static:hover img {
  transform: scale(1.03);
}

/* Tỉ lệ cố định để bản đồ không bao giờ bị bóp méo hay tràn khung */
.footer-map-iframe {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-landscape);
  border: 0;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-top: var(--bw-1) solid var(--border-on-dark);
  font-size: var(--fs-xs);
}

.footer-legal {
  max-width: var(--measure-2xl);
  line-height: var(--lh-normal);
  color: var(--jade-300);
}

/* ============================ 17b. KHỐI DỊCH VỤ CHI TIẾT ============================ */
.service-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-block: var(--section-y-sm);
  border-bottom: var(--bw-1) solid var(--border);
}

.service-block:last-child {
  border-bottom: 0;
}

.service-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.service-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
}

.service-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.detail-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 100%;
  padding: var(--sp-5);
  background-color: var(--bg-surface);
  border: var(--bw-1) solid var(--border-soft);
  border-radius: var(--r-md);
}

.detail-panel-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}

.mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-base);
}

.mini-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  line-height: var(--lh-normal);
}

.mini-list li::before {
  content: "";
  flex-shrink: 0;
  width: var(--sp-2);
  height: var(--sp-2);
  margin-top: var(--sp-3);
  border-radius: var(--r-circle);
  background-color: var(--brass-400);
}

.step-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.step-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--bg-surface-2);
  border: var(--bw-1) solid var(--border-soft);
  border-radius: var(--r-pill);
  color: var(--text-body);
}

.step-chip-index {
  font-weight: var(--fw-semibold);
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
}

/* Khối nội dung đặt trên nền hoa văn, dùng thay cho ảnh */
.panel-pattern {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background-color: var(--bg-surface-2);
  background-image: var(--drum-scrim-sand), var(--drum-image);
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
}

.panel-pattern-dark {
  background-color: var(--bg-dark);
  background-image: var(--drum-scrim), var(--drum-image);
  background-repeat: no-repeat;
  background-size: auto, cover;
  border-color: var(--border-on-dark);
  color: var(--text-on-dark-soft);
}

.panel-pattern-title {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

.panel-pattern-dark .panel-pattern-title {
  color: var(--text-on-dark);
}

/* ============================ 17c. BẢNG GIÁ ============================ */
.price-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-5);
}

.price-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-3);
  flex: 1 1 100%;
}

.price-badge {
  align-self: center;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  background-color: var(--brass-400);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
}

/* Giữ chỗ ở các gói không có nhãn, để ba thẻ cao bằng nhau */
.price-badge-placeholder {
  visibility: hidden;
}

.price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  flex: 1 1 auto;
  padding: var(--sp-8) var(--sp-6);
  background-color: var(--price-card-bg);
  border: var(--bw-1) solid var(--border-on-dark);
  border-radius: var(--r-xl);
  text-align: center;
  transition: background-color var(--t-base), border-color var(--t-base),
    transform var(--t-base);
}

.price-card:hover {
  background-color: var(--price-card-bg-hover);
  border-color: var(--brass-400);
  transform: translateY(-2px);
}

.price-duration {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-head);
  color: var(--text-on-dark);
}

.price-duration-number {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.price-duration-unit {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
}

/* Dòng báo thời hạn ưu đãi, đặt ngay dưới tiêu đề bảng giá */
.price-promo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  align-self: flex-start;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background-color: var(--hover-brass-soft);
  border: var(--bw-1) solid var(--brass-400);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--accent-on-dark);
}

.price-promo .icon {
  color: var(--brass-400);
}

/* Tên gói đóng khung riêng cho nổi bật giữa thẻ */
.price-name {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-block: var(--bw-1) solid var(--border-on-dark);
  background-color: var(--hover-brass-soft);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-on-dark);
  text-align: center;
}

.price-card-featured .price-name {
  border-color: var(--wood-700);
  background-color: var(--tint-green-soft);
  color: var(--green-800);
}

/* Giá sau ưu đãi là điểm nhấn lớn nhất của mỗi thẻ */
.price-value {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--accent-on-dark);
  font-variant-numeric: tabular-nums;
}

/* Giá cũ và giá ưu đãi đứng cạnh nhau */
.price-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-3);
}

.price-old {
  font-size: var(--fs-lg);
  color: var(--text-on-dark-soft);
  text-decoration: line-through;
  text-decoration-thickness: var(--bw-1);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.price-card-featured .price-old {
  /* Xanh đậm thay nâu: nâu chỉ đạt 3.67:1 trên nền đồng, chưa đủ chuẩn AA */
  color: var(--green-900);
}

/* Dòng ưu đãi kèm theo, ví dụ số buổi tặng thêm */
.price-bonus {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background-color: var(--hover-brass-soft);
  border: var(--bw-1) solid var(--border-on-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent-on-dark);
}

.price-card-featured .price-bonus {
  background-color: var(--tint-green-soft);
  border-color: var(--green-800);
  color: var(--green-800);
}

.price-text {
  flex: 1 1 auto;
  max-width: var(--measure-sm);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.price-card .button {
  width: 100%;
  margin-top: var(--sp-2);
}

/* Gói được chọn nhiều nhất */
.price-card-featured {
  background-color: var(--brass-400);
  border-color: var(--brass-400);
  color: var(--ink);
}

.price-card-featured:hover {
  background-color: var(--brass-200);
  border-color: var(--brass-200);
}

.price-card-featured .price-duration,
.price-card-featured .price-value {
  color: var(--ink);
}

.price-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.price-note .icon {
  margin-top: var(--sp-1);
  color: var(--accent-on-dark);
}

.section-cream .price-note .icon,
.section-sand .price-note .icon {
  color: var(--brass-600);
}

/* ============================ 17d. Ô ẢNH CHỜ BỔ SUNG ============================ */
.photo-slot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 100%;
}

.photo-slot-caption {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Khuôn ảnh dọc, hợp với chân dung và ảnh chụp người đứng */
.photo-slot-portrait .media-emblem,
.photo-slot-portrait .image-frame img {
  aspect-ratio: var(--ratio-portrait);
}

/* Khuôn vuông, hợp với ảnh cận cảnh dụng cụ hoặc thảo dược */
.photo-slot-square .media-emblem,
.photo-slot-square .image-frame img {
  aspect-ratio: var(--ratio-square);
}

/* Các ô cùng một hàng canh theo mép trên để lưới không bị kéo giãn */
.photo-slot .media-emblem,
.photo-slot .image-frame {
  align-self: flex-start;
  width: 100%;
}

/* Ô rộng gấp đôi trong lưới, ảnh giữ khuôn ngang */
.photo-slot-wide .image-frame img {
  aspect-ratio: var(--ratio-landscape);
  object-position: center;
}

/* Khuôn ngang trong lưới ô ảnh, cắt lấy nửa dưới của ảnh dọc */
.photo-slot-crop-bottom .image-frame img {
  aspect-ratio: var(--ratio-landscape);
  object-position: center bottom;
}

/* Ảnh đơn trải hết chiều ngang, dùng cho ảnh tập thể nhiều người */
.photo-wide {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.photo-wide .image-frame img {
  aspect-ratio: var(--ratio-landscape);
  object-position: center;
}

/* Ảnh rộng lấy phần dưới của ảnh dọc, chừa lại vùng bàn trị liệu và đèn */
.photo-wide-crop-bottom .image-frame img {
  object-position: center 72%;
}

.photo-wide + .card-list,
.card-list + .photo-wide {
  margin-top: var(--sp-5);
}

/* Nhãn cho biết nhóm ô này nhận ảnh khuôn nào */
.photo-group-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block: var(--sp-6) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}

.photo-group-note::before {
  content: "";
  width: var(--sp-6);
  height: var(--bw-1);
  background-color: var(--brass-400);
}

.section-dark .photo-slot-caption {
  color: var(--text-on-dark-soft);
}

/* ============================ 17e. NHẬN XÉT KHÁCH HÀNG ============================ */
.review-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 100%;
  padding: var(--sp-6);
  background-color: var(--bg-surface);
  border: var(--bw-1) solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.review-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Chân dung khách, ảnh vuông cắt tròn, không méo nhờ object-fit */
.review-avatar {
  flex-shrink: 0;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--r-circle);
  object-fit: cover;
  background-color: var(--bg-surface-2);
  border: var(--bw-2) solid var(--border);
}

.review-person {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.review-name {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.review-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.review-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--bg-surface-2);
  border-radius: var(--r-md);
}

/* ---- Thẻ nhận xét trên nền tối ---- */
.section-dark .review-card {
  background-color: var(--price-card-bg);
  border-color: var(--border-on-dark);
  box-shadow: none;
  transition: background-color var(--t-base), border-color var(--t-base),
    transform var(--t-base);
}

.section-dark .review-card:hover {
  background-color: var(--price-card-bg-hover);
  border-color: var(--brass-400);
  transform: translateY(-2px);
}

.section-dark .review-name {
  color: var(--text-on-dark);
}

.section-dark .review-meta {
  color: var(--accent-on-dark);
}

.section-dark .review-avatar {
  background-color: var(--hover-brass-soft);
  border-color: var(--brass-400);
}

.section-dark .review-body {
  background-color: transparent;
  padding: 0;
}

/* Năm sao vàng đầu mỗi thẻ */
.stars {
  display: flex;
  gap: var(--sp-1);
  color: var(--brass-400);
}

.stars .icon {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: currentColor;
}

/* Lời nhận xét, in nghiêng cho khác giọng với phần còn lại */
.review-quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 auto;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-soft);
}

.review-quote-mark {
  color: var(--brass-400);
  opacity: 0.55;
}

.review-quote-mark .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  fill: currentColor;
}

/* Câu đúc kết của khách, tách khỏi đoạn văn bằng một vạch đồng */
.review-punch {
  padding-left: var(--sp-4);
  border-left: var(--bw-2) solid var(--brass-400);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--accent-on-dark);
}

/* Lời gốc tiếng Anh, để nguyên văn cho người đọc đối chiếu */
.review-original {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: var(--bw-1) solid var(--border-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: var(--lh-normal);
  color: var(--text-on-dark-soft);
  opacity: 0.85;
}

.review-original-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-on-dark);
}

/* ---- Ba ô chỉ số uy tín ---- */
.stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex: 1 1 100%;
  padding: var(--sp-8) var(--sp-5);
  background-color: var(--price-card-bg);
  border: var(--bw-1) solid var(--border-on-dark);
  border-radius: var(--r-lg);
  text-align: center;
  transition: border-color var(--t-base), background-color var(--t-base);
}

.stat-item:hover {
  background-color: var(--price-card-bg-hover);
  border-color: var(--brass-400);
}

/* Giữ chỗ ở ô không có nhãn trên, để ba con số thẳng hàng */
.stat-note-placeholder {
  visibility: hidden;
}

.stat-note {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-on-dark);
}

.stat-value {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--accent-on-dark);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: var(--fs-base);
  color: var(--text-on-dark-soft);
}

/* Khối biểu tượng dùng khi chưa có ảnh thật cho liệu trình */
.media-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ratio-landscape);
  background-color: var(--bg-dark);
  background-image: var(--drum-scrim-soft), var(--drum-image);
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--r-lg);
  color: var(--accent-on-dark);
}

.media-emblem .icon {
  width: var(--sp-16);
  height: var(--sp-16);
  stroke-width: 1;
}

/* ============================ 18. HIỆU ỨNG CUỘN ============================ */
/* Khối hiện dần. Quãng nhấc rất ngắn để không thành hiệu ứng trượt,
   đường cong buông dần như tay rời khỏi huyệt. */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-lift));
  transition: opacity var(--t-draw), transform var(--t-draw);
}

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

/* Khối có nhiều thẻ con thì để từng thẻ vào lần lượt theo thứ tự đọc.
   JS gán --reveal-i cho từng con. Chốt ở bậc thứ năm để hàng dài
   không biến thành một làn sóng chạy ngang. */
.reveal.reveal-stagger {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Không đặt transition ở đây: JS gắn .reveal-stagger sau khi trang đã vẽ,
   nếu có chuyển tiếp thì các thẻ đang hiện sẽ mờ đi rồi mới hiện lại và
   người dùng thấy một cái nháy. Ẩn thì tức thì, chỉ lúc hiện mới có nhịp. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(var(--reveal-lift));
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-draw), transform var(--t-draw);
  transition-delay: calc(min(var(--reveal-i, 0), var(--reveal-step-max)) * var(--reveal-step));
}

/* ======================= 18b. TƯƠNG TÁC NHỎ =======================
   Nhịp lấy từ chính động tác của nghề: ấn xuống thì nhanh và dứt khoát,
   buông ra thì chậm. Mỗi thành phần chỉ đổi một thứ chính khi rê chuột,
   kèm nhiều nhất một chi tiết phụ. Toàn bộ nằm dưới khối giảm chuyển
   động ở mục 21 nên người tắt hiệu ứng sẽ không thấy gì chạy.
   ================================================================= */

/* ---- Vạch đồng trước eyebrow tự vẽ ra khi khối lọt vào khung nhìn ----
   Mặc định là vạch đầy đủ, chỉ khối chưa hiện mới thu về 0. Nhờ vậy khi
   không có JS hoặc khi tắt chuyển động, vạch vẫn hiện đúng thiết kế. */
.eyebrow::before,
.section-head-center .eyebrow::after {
  transition: width var(--t-draw);
}

.reveal:not(.is-visible) .eyebrow::before,
.reveal:not(.is-visible) .eyebrow::after {
  width: 0;
}

/* ---- Nút bấm ----
   Màu mới quét ngang từ trái thay vì đổi phắt một cái, và nút lún xuống
   một pixel khi nhấn. Quét bằng background-size nên không cần lớp phủ. */
.button {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0 100%;
  transition: color var(--t-base), border-color var(--t-base),
    box-shadow var(--t-base), background-size var(--t-release),
    transform var(--t-release);
}

.button:active {
  transform: translateY(var(--bw-1));
  transition: transform var(--t-press);
}

.button-primary {
  background-image: linear-gradient(var(--green-700), var(--green-700));
}

.button-accent {
  background-image: linear-gradient(var(--brass-200), var(--brass-200));
}

.button-outline {
  background-image: linear-gradient(var(--bg-surface-2), var(--bg-surface-2));
}

.button-light {
  background-image: linear-gradient(var(--hover-brass-soft), var(--hover-brass-soft));
}

.button:hover {
  background-size: 100% 100%;
}

/* ---- Liên kết chân trang: gạch chân tự kéo từ trái ---- */
.footer-link {
  align-self: flex-start;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom 0.7em;
  background-size: 0 var(--bw-1);
  transition: color var(--t-fast), background-size var(--t-release);
}

.footer-link:hover {
  background-size: 100% var(--bw-1);
}

/* ---- Thẻ dịch vụ ----
   Bỏ kiểu nhấc thẻ lên hai pixel vì thẻ nào cũng nhấc thì thành mặc định
   của khuôn mẫu. Thay bằng viền chuyển sang đồng và một vạch ngắn kéo ra
   dưới tên thẻ. */
.card-service:hover {
  border-color: var(--brass-400);
  box-shadow: var(--shadow-sm);
  transform: none;
}

.card-service .card-title {
  background-image: linear-gradient(var(--brass-400), var(--brass-400));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 var(--bw-2);
  padding-bottom: var(--sp-2);
  transition: background-size var(--t-draw);
}

.card-service:hover .card-title {
  background-size: var(--rule-w) var(--bw-2);
}

/* ---- Khối năm bước: số thứ tự chuyển sang đồng khi rê vào hàng ---- */
.step-item {
  transition: border-color var(--t-base);
}

.step-item:hover {
  border-color: var(--brass-400);
}

.step-number {
  transition: background-color var(--t-release), color var(--t-release);
}

.step-item:hover .step-number {
  background-color: var(--brass-600);
  color: var(--cream);
}

/* ---- Bảng giá ----
   Thẻ giá là nơi khách bấm nên được phép phản hồi rõ hơn phần còn lại. */
.price-card {
  transition: background-color var(--t-base), border-color var(--t-base),
    box-shadow var(--t-release), transform var(--t-release);
}

.price-card:hover {
  transform: translateY(calc(var(--sp-1) * -1));
}

/* Giá cũ mờ thêm khi rê vào, để mắt dồn về giá mới */
.price-old {
  transition: opacity var(--t-release);
}

.price-card:hover .price-old {
  opacity: 0.45;
}

/* Gói được chọn nhiều nhất: vành đồng tự hiện khi khối lọt vào khung nhìn.
   Đây là điểm nhấn duy nhất của cả trang, không lặp lại ở chỗ nào khác. */
.price-card-featured {
  box-shadow: 0 0 0 0 rgba(201, 160, 90, 0);
  transition: background-color var(--t-base), border-color var(--t-base),
    box-shadow var(--t-draw), transform var(--t-release);
}

.reveal.is-visible .price-card-featured,
.reveal-stagger.is-visible .price-card-featured {
  box-shadow: 0 0 0 var(--bw-4) var(--hover-brass-soft);
  transition-delay: var(--t-ring-delay);
}

/* ---- Ô chỉ số ---- */
.stat-item {
  transition: border-color var(--t-base), background-color var(--t-base);
}

/* ---- Ảnh: phóng rất chậm và hiện một sợi viền đồng bên trong khung ---- */
.image-frame,
.card-media {
  transition: box-shadow var(--t-release), outline-color var(--t-release);
  outline: var(--bw-1) solid transparent;
  outline-offset: calc(var(--bw-1) * -1);
}

.image-frame img,
.card-media img {
  transition: transform var(--t-image);
}

.image-frame:hover img,
.card-media:hover img {
  transform: scale(1.035);
}

.image-frame:hover,
.card-media:hover {
  outline-color: var(--brass-400);
}

/* ---- Thẻ nhận xét: ảnh chân dung nhích lại gần khi rê vào thẻ ---- */
.review-avatar {
  transition: border-color var(--t-release), transform var(--t-release);
}

.section-dark .review-card:hover .review-avatar {
  border-color: var(--brass-400);
  transform: scale(1.05);
}

/* ============================ 19. TABLET (>= 768px) ============================ */
/* ==================== 19a. ĐIỆN THOẠI NHỎ (dưới 480px) ==================== */
/* Màn 360 đến 414px: bóp lề và cỡ chữ để nội dung không bị chật */
@media (max-width: 29.99rem) {
  :root {
    --container-pad: var(--sp-4);
    --section-y: clamp(2.75rem, 2rem + 4vw, 3.5rem);
    --section-y-sm: 2.25rem;
    --fs-hero: clamp(1.875rem, 1.1rem + 3.6vw, 2.25rem);
    --fs-4xl: clamp(1.75rem, 1.1rem + 3vw, 2.125rem);
    --fs-3xl: clamp(1.5rem, 1rem + 2.6vw, 1.875rem);
    --logo-h-sm: 3rem;
    --header-h: 4.5rem;
    --footer-logo-h: 5rem;
    --avatar-size: 3.25rem;
  }

  /* Chân dung mở đầu thấp lại để không đẩy nội dung xuống quá sâu */
  .hero-photo img {
    aspect-ratio: var(--ratio-landscape);
  }

  .hero-caption {
    padding: var(--sp-3) var(--sp-4);
  }

  .hero-inner {
    gap: var(--sp-6);
  }

  .hero-copy {
    gap: var(--sp-4);
  }

  /* Hai nút gọi và đặt lịch chiếm trọn bề ngang, dễ bấm bằng ngón tay */
  .hero-actions .button,
  .footer-cta-actions .button {
    flex: 1 1 100%;
  }

  .card-service,
  .card-condition,
  .review-card,
  .form-card,
  .panel-pattern {
    padding: var(--sp-5);
  }

  .price-card {
    padding: var(--sp-6) var(--sp-5);
  }

  .faq-item summary {
    font-size: var(--fs-md);
  }
}

/* ==================== 19b. ĐIỆN THOẠI LỚN (từ 480px) ==================== */
@media (min-width: 30rem) {

  .hero-photo img {
    aspect-ratio: var(--ratio-landscape);
    object-position: center;
  }
}

/* ==================== 19c. MÁY TÍNH BẢNG DỌC (từ 768px) ==================== */
@media (min-width: 48rem) {
  :root {
    --container-pad: var(--sp-8);
  }

  /* Bảng giá xếp ba cột sớm, thẻ vẫn đủ rộng để đọc */
  .price-item {
    flex: 1 1 calc(33.333% - var(--sp-5) * 2 / 3);
  }

  .price-card {
    padding: var(--sp-6) var(--sp-5);
  }

  .split {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-10);
  }

  .split-top {
    align-items: flex-start;
  }

  .split-reverse {
    flex-direction: row-reverse;
  }

  .card-service {
    flex: 1 1 calc(50% - var(--sp-5) / 2);
  }

  .card-condition {
    flex: 1 1 calc(50% - var(--sp-5) / 2);
  }

  .feature-item {
    flex: 1 1 calc(50% - var(--sp-6) / 2);
  }

  .step-item {
    flex: 1 1 calc(50% - var(--sp-5) / 2);
  }

  .gallery-item {
    flex: 1 1 calc(50% - var(--sp-5) / 2);
  }

  .footer-brand {
    flex: 1 1 100%;
  }

  .footer-col {
    flex: 1 1 calc(50% - var(--sp-10) / 2);
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }


  .form-card {
    padding: var(--sp-8);
  }

  .field-row {
    display: flex;
    gap: var(--sp-5);
  }

  .field-row .field {
    flex: 1 1 50%;
  }

  .photo-slot {
    flex: 1 1 calc(50% - var(--sp-5) / 2);
  }

  .review-card {
    flex: 0 1 calc(50% - var(--sp-5) / 2);
  }

  /* Thẻ nhận xét dài luôn chiếm trọn một hàng riêng */
  .review-card-wide {
    flex: 1 1 100%;
  }

  .stat-item {
    flex: 1 1 calc(33.333% - var(--sp-5) * 2 / 3);
  }

  .method-row {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-6);
  }

  .method-case {
    flex: 0 0 38%;
  }

  .method-pick {
    flex: 1 1 auto;
  }

  .service-detail {
    flex-direction: row;
  }

  .detail-panel {
    flex: 1 1 50%;
  }
}

/* ==================== 19d. MÁY TÍNH BẢNG (từ 768px) ==================== */
/* Hai cột giữ khu mở đầu gọn trong tầm nhìn, xếp dọc ở khổ này sẽ cao gấp rưỡi */
@media (min-width: 48rem) {
  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);
  }

  .hero-copy {
    flex: 1 1 56%;
  }

  .hero-figure {
    flex: 1 1 44%;
  }
}

/* Khổ bảng dọc: cột chữ hẹp nên hạ cỡ tiêu đề để không vỡ dòng */
@media (min-width: 48rem) and (max-width: 56.24rem) {
  :root {
    --fs-hero: clamp(2rem, 0.9rem + 2.9vw, 2.5rem);
  }

  .hero-inner {
    gap: var(--sp-6);
  }

  /* Ba gói giá ở khổ này quá hẹp, xếp hai hàng cho dễ đọc */
  .price-item {
    flex: 1 1 calc(50% - var(--sp-5) / 2);
  }
}

/* ============================ 20. DESKTOP (>= 1024px) ============================ */
/* Dải bản đồ tách hai cột từ 900px */
@media (min-width: 56.25rem) {
  .footer-map-inner {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-10);
  }

  .footer-map-info {
    flex: 1 1 40%;
  }

  .footer-map-frame {
    flex: 1 1 60%;
  }
}

/* Chân trang ghim đáy khung nhìn, nội dung trượt lên che dần rồi nhả ra.
   Hiệu ứng chỉ đúng khi chân trang thấp hơn khung nhìn. Từ khi có dải bản
   đồ, chân trang cao khoảng 1300px nên phải kèm điều kiện chiều cao màn,
   nếu không sẽ ghim nửa chừng và trông như lỗi. */
@media (min-width: 64rem) and (min-height: 84rem) {
  .footer-curtain {
    position: sticky;
    bottom: 0;
    z-index: var(--z-curtain);
  }
}

@media (min-width: 64rem) {
  :root {
    --container-pad: var(--container-pad-lg);
    --logo-h-sm: var(--logo-h);
  }

  /* Khu mở đầu: ảnh lương y trải làm nền, chữ đặt sang khoảng trống bên phải */
  .hero {
    justify-content: center;
    min-height: var(--hero-min-h);
    background-color: var(--sand);
    background-image: var(--hero-scrim), var(--hero-image);
    background-size: cover;
    background-position: center, 18% 22%;
    background-repeat: no-repeat;
    border-bottom-color: var(--border-on-dark);
  }

  /* Chữ nằm trên phần nền tối nên chuyển sang tông sáng.
     Dùng brass-200 chứ không phải brass-400: chữ 13px nằm trên ảnh,
     chỗ ảnh sáng nhất chỉ cho brass-400 đạt 3.07:1, chưa đủ AA. */
  .hero .eyebrow {
    color: var(--brass-200);
  }

  /* Màn rộng chữ nằm một cột bên phải nên trả lại đúng thứ tự nguồn */
  .hero-text,
  .hero-note {
    order: 0;
  }

  .hero-title {
    color: var(--text-on-dark);
  }

  .hero-text {
    color: var(--text-on-dark-soft);
  }

  .hero-note {
    border-top-color: var(--border-on-dark);
  }

  .hero-note-item {
    color: var(--text-on-dark-soft);
  }

  .hero-note-item .icon {
    color: var(--accent-on-dark);
  }

  .hero-actions .button-outline {
    border-color: var(--border-on-dark);
    color: var(--text-on-dark);
  }

  .hero-actions .button-outline:hover {
    border-color: var(--brass-400);
    background-color: var(--hover-brass-soft);
    color: var(--white);
  }

  .hero-inner {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-10);
    min-height: var(--hero-inner-h);
  }

  .hero-figure {
    flex: 0 1 40%;
    justify-content: flex-end;
  }

  .hero-photo {
    display: none;
  }

  .hero-caption {
    align-self: flex-start;
    max-width: var(--measure-sm);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
  }

  .hero-copy {
    flex: 1 1 60%;
    justify-content: center;
  }

  .main-nav {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
  }

  .header-call {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none;
  }


  .card-service-wide {
    flex: 1 1 calc(50% - var(--sp-5) / 2);
  }



  .step-item {
    flex: 1 1 calc(33.333% - var(--sp-5) * 2 / 3);
    flex-direction: column;
  }

  .gallery-item {
    flex: 1 1 calc(33.333% - var(--sp-5) * 2 / 3);
  }

  .gallery-item-wide {
    flex: 1 1 calc(66.666% - var(--sp-5) / 3);
  }


  .photo-slot {
    flex: 1 1 calc(33.333% - var(--sp-5) * 2 / 3);
  }

  .photo-slot-wide {
    flex: 1 1 calc(66.666% - var(--sp-5) / 3);
  }


  /* Ba thẻ ngắn xếp vừa một hàng, thẻ dài vẫn trọn hàng riêng */
  .review-card {
    flex: 0 1 calc(33.333% - var(--sp-5) * 2 / 3);
  }

  .review-card-wide {
    flex: 1 1 100%;
  }

  .footer-brand {
    flex: 1 1 calc(28% - var(--sp-10) * 3 / 4);
  }

  .footer-col {
    flex: 1 1 calc(24% - var(--sp-10) * 3 / 4);
  }

  .split-copy {
    flex: 1 1 48%;
  }

  .split-media {
    flex: 1 1 52%;
  }
}

/* ==================== 20b. LAPTOP RỘNG (từ 1200px) ==================== */
/* Từ đây mới đủ chỗ cho ba thẻ dịch vụ một hàng mà chữ không bị bó */
@media (min-width: 75rem) {
  .card-service {
    flex: 1 1 calc(33.333% - var(--sp-5) * 2 / 3);
  }

  .card-condition {
    flex: 1 1 calc(33.333% - var(--sp-5) * 2 / 3);
  }

  .feature-item {
    flex: 1 1 calc(33.333% - var(--sp-6) * 2 / 3);
  }

  .step-item {
    flex: 1 1 calc(20% - var(--sp-5) * 4 / 5);
    flex-direction: column;
  }
}

/* ==================== 20c. MÀN HÌNH RỘNG (từ 1600px) ==================== */
@media (min-width: 100rem) {
  :root {
    --container-max: 82rem;
    --container-pad: var(--sp-12);
    --hero-min-h: 44rem;
  }
}

/* ============================ 21. GIẢM CHUYỂN ĐỘNG ============================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

/* ============================ 22. IN ẤN ============================ */
@media print {
  .site-header,
  .site-footer,
  .footer-cta {
    display: none;
  }

  body {
    background-color: var(--white);
    color: var(--ink);
  }
}