/* ==========================================================================
   Nha khoa Quang Hưng — nhakhoaquanghung.vn

   Bảng màu sáng, bố cục kiểu ấn phẩm. Ba nguyên tắc chi phối mọi thứ bên dưới:

     1. MỘT sắc nhấn duy nhất (xanh #0E7A55). Mọi thứ khác là mực, xám, giấy.
     2. Phân cấp bằng cỡ chữ, độ đậm và KHOẢNG TRỐNG — không bằng màu, không
        bằng đổ bóng, không bằng nền kính mờ.
     3. Đường kẻ tóc thay cho hộp. Viền 1px màu nhạt gọn hơn mọi loại bóng đổ.

   Trang có hai chế độ:
     mặc định       — các chương xếp thành một trang cuộn bình thường
     html.stage-on  — chương thành lớp phủ cố định trên sân khấu 3D
   ========================================================================== */

:root {
  --paper: #faf9f6;          /* nền trang */
  --card: #ffffff;
  --ink: #16211d;            /* chữ chính */
  --ink-2: #3d4a45;
  --muted: #5c6a65;
  --faint: #8e9a95;
  /* Lấy đúng màu trong logo (#136054) làm màu nhấn, không tự chọn một sắc xanh
     khác — nút, gạch chân và ký hiệu đứng cạnh logo suốt trang, lệch một chút
     là nhìn ra ngay. */
  --accent: #136054;
  --accent-ink: #0d463d;
  --accent-wash: #eef4f2;
  --rule: rgba(22, 33, 29, .13);
  --rule-2: rgba(22, 33, 29, .22);
  --lift: 0 1px 2px rgba(22, 33, 29, .04), 0 12px 32px rgba(22, 33, 29, .07);

  --frame: 22px;             /* khoảng lùi của khung viền quanh trang */
  --wrap: 1240px;
  --ease: cubic-bezier(.22, .72, .28, 1);
  --ch-count: 9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-loading { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: 'Playfair Display', 'Be Vietnam Pro', Georgia, serif;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0;
  color: var(--ink);
}

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------ sân khấu 3D */

#stage {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block;
  pointer-events: none;   /* mọi sự kiện con trỏ bắt ở window */
}

#stage-fallback {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 76% 18%, #ffffff, transparent 62%),
    linear-gradient(180deg, #ffffff, #ecebe5 78%);
}

.site-head, main, #stage-ui, .site-foot, .fab, .skip, .chapters {
  position: relative;
  z-index: 2;
}

/* Khung viền quanh toàn trang — đường kẻ tóc lùi vào từ mép màn hình.
   Đây là thứ tạo cảm giác "được đóng khung" mà không thêm một pixel màu nào. */
.page-frame {
  position: fixed;
  inset: var(--frame);
  z-index: 1;
  pointer-events: none;
  border: 1px solid var(--rule);
}
.page-frame::before,
.page-frame::after {
  content: '';
  position: absolute;
  background: var(--rule);
}
/* hai vạch dấu ở giữa cạnh trên và dưới */
.page-frame::before { left: 50%; top: -1px; width: 56px; height: 1px; margin-left: -28px; background: var(--accent); }
.page-frame::after { left: 50%; bottom: -1px; width: 56px; height: 1px; margin-left: -28px; background: var(--accent); }

/* ---------------------------------------------------------------- loader */

#loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--paper);
  transition: opacity .7s var(--ease), visibility .7s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-mark img { width: 62px; height: 62px; animation: bob 2.6s var(--ease) infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.loader-bar { width: 150px; height: 1px; background: var(--rule); overflow: hidden; }
.loader-bar i {
  display: block; height: 100%; width: 34%;
  background: var(--accent);
  animation: slide 1.25s var(--ease) infinite;
}
@keyframes slide {
  from { transform: translateX(-110%); }
  to { transform: translateX(380%); }
}
.loader-text {
  margin: 0; font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}

/* ------------------------------------------------------------- nguyên tố */

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 40px;
}

.skip {
  position: absolute; left: -9999px; top: 12px;
  background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: 4px; font-weight: 600;
}
.skip:focus { left: 16px; z-index: 99; }

/* Nhãn nhỏ đầu mỗi khối: chữ hoa, giãn ký tự, kèm một vạch dẫn ngắn.
   Vạch dẫn là chi tiết làm nên vẻ ấn phẩm — nó neo dòng chữ vào lề. */
.kicker {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
}
.kicker::before {
  content: ''; width: 34px; height: 1px; flex: none;
  background: currentColor; opacity: .55;
}

.btn {
  --bg: transparent; --fg: var(--ink); --bd: var(--rule-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--bd); border-radius: 2px;
  background: var(--bg); color: var(--fg);
  font: inherit; font-weight: 600; font-size: 14.5px;
  letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
}
.btn.primary { --bg: var(--accent); --fg: #fff; --bd: var(--accent); }
.btn.primary:hover { --bg: var(--accent-ink); --bd: var(--accent-ink); }
.btn.ghost:hover { --bd: var(--ink); background: rgba(22, 33, 29, .035); }
.btn.small { padding: 9px 18px; font-size: 13.5px; }

/* --------------------------------------------------------------- header */

.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 18px max(40px, calc((100vw - var(--wrap)) / 2 + 40px));
  border-bottom: 1px solid transparent;
  transition: padding .4s var(--ease), background .4s var(--ease),
              border-color .4s var(--ease);
}
.site-head.stuck {
  padding-block: 11px;
  background: rgba(250, 249, 246, .86);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--rule);
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img {
  /* KHÔNG bo tròn: dấu hiệu mới là hình chiếc răng vẽ bằng nét thẳng, cắt tròn
     là mất bốn góc trên của nó. Logo cũ tròn sẵn nên trước đây không lộ. */
  width: 44px; height: 44px; object-fit: contain;
  transition: width .4s var(--ease), height .4s var(--ease);
}
.site-head.stuck .brand img { width: 37px; height: 37px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.3; }
.brand-txt b { font-size: 15px; font-weight: 700; letter-spacing: -.012em; }
.brand-txt i {
  font-style: normal; font-size: 10.5px; color: var(--faint);
  letter-spacing: .09em; text-transform: uppercase;
}

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  position: relative;
  padding: 8px 2px; margin-inline: 11px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  transition: color .25s var(--ease);
}
/* gạch chân mảnh trượt ra khi trỏ vào — thay cho nền bo tròn */
.site-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }
/* :not(.nav-cta) — nút Đặt lịch đã là nền xanh, tô chữ màu nhấn lên nữa thì
   xanh trên xanh và nhãn biến mất khi đang ở chương đặt lịch */
.site-nav a.active:not(.nav-cta) { color: var(--accent); }
.site-nav a.active:not(.nav-cta)::after { transform: scaleX(1); }

.site-nav .nav-cta {
  margin-left: 18px; margin-right: 0;
  padding: 10px 20px; border-radius: 2px;
  color: #fff; background: var(--accent); font-weight: 600;
}
.site-nav .nav-cta::after { display: none; }
.site-nav .nav-cta:hover { color: #fff; background: var(--accent-ink); }

.head-phone {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--rule-2); border-radius: 2px;
  font-size: 14px; font-weight: 600;
  transition: border-color .25s var(--ease);
}
.head-phone:hover { border-color: var(--ink); }
.head-phone svg { color: var(--accent); }

.nav-toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--rule-2); border-radius: 2px;
  background: transparent; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 1px; margin: 5px auto;
  background: var(--ink);
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(22, 33, 29, .28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* -------------------------------------------------------- chỉ mục chương */

.chapters { display: none; }

html.stage-on .chapters {
  display: flex;
  position: fixed;
  right: calc(var(--frame) + 20px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  flex-direction: column;
  gap: 0;
}
.chapters button {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 7px 0 7px 16px;
  border: 0; background: none; color: var(--faint);
  font: inherit; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.chapters button i {
  width: 16px; height: 1px; background: currentColor; order: 2;
  transition: width .4s var(--ease), background .4s var(--ease);
}
.chapters button span {
  opacity: 0; transform: translateX(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.chapters button:hover { color: var(--ink-2); }
.chapters button:hover span { opacity: 1; transform: none; }
.chapters button.on { color: var(--accent); }
.chapters button.on i { width: 34px; background: var(--accent); }
.chapters button.on span { opacity: 1; transform: none; }

/* ================================================== chương — chế độ thường */

.ch { position: relative; padding: 130px 0 96px; }
.ch-in {
  width: 100%; max-width: var(--wrap); min-width: 0;
  margin-inline: auto; padding-inline: 40px;
}
.col { position: relative; max-width: 560px; min-width: 0; }
.col.wide { max-width: 720px; }
.col-right { margin-left: auto; }
.col-center { max-width: none; }

.ch h1 {
  font-size: clamp(2.8rem, 6.4vw, 4.9rem);
  margin: 0 0 26px;
}
.ch h1 em { font-style: italic; color: var(--accent); }
.ch h2 { font-size: clamp(1.85rem, 3.7vw, 2.9rem); margin: 0 0 22px; }
.ch h3 { font-size: 1.06rem; }

.lead {
  font-size: clamp(1rem, 1.2vw, 1.09rem);
  color: var(--muted); margin: 0 0 32px; max-width: 52ch;
}
.lead.sm { font-size: .99rem; margin-bottom: 24px; }
.note { margin: 26px 0 0; font-size: 14px; color: var(--faint); }
.note a {
  color: var(--accent); font-weight: 600;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 1px;
  transition: border-color .3s var(--ease);
}
.note a:hover { border-bottom-color: var(--accent); }

/* Dòng địa điểm ở hero: chữ hoa nhỏ với vạch dẫn, không phải viên thuốc bo tròn */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 26px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--accent);
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; }

.scroll-hint {
  display: flex; align-items: center; gap: 12px;
  margin: 52px 0 0; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}
.scroll-hint span {
  width: 44px; height: 1px; flex: none; background: var(--rule-2);
  position: relative; overflow: hidden;
}
.scroll-hint span::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: sweep 2.4s var(--ease) infinite;
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Vệt sáng rất nhẹ sau chữ nằm trực tiếp trên sân khấu 3D. Trên nền sáng chỉ
   cần một lớp giấy mờ, không cần khối tối như bản nền đen.
   farthest-side để dải màu tắt đúng ở mép hộp — ellipse lớn hơn hộp sẽ bị cắt
   thành hình chữ nhật lộ mép cứng. */
.col::before {
  content: '';
  position: absolute; inset: -64px -110px; z-index: -1;
  pointer-events: none;
  background: radial-gradient(farthest-side at 50% 50%,
    rgba(250, 249, 246, .96), rgba(250, 249, 246, .72) 52%, rgba(250, 249, 246, 0) 100%);
}

/* ------------------------------------------------------------- số liệu */

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 0; border-top: 1px solid var(--rule);
}
.stats div {
  margin: 0; padding: 24px 20px 0 0;
  border-right: 1px solid var(--rule);
}
.stats div:last-child { border-right: 0; }
.stats div + div { padding-left: 22px; }
.stats dt {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stats dd {
  margin: 9px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--faint);
  letter-spacing: .04em;
}

/* --------------------------------------------------- danh sách dịch vụ */

.svc {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.svc li {
  display: grid; grid-template-columns: minmax(150px, 178px) 1fr;
  gap: 3px 26px; align-items: baseline;
  padding: 13px 0 13px 14px;
  border-bottom: 1px solid var(--rule);
  margin-left: -14px;
  cursor: default;
  transition: background .3s var(--ease), padding-left .35s var(--ease);
}
.svc li b { font-size: 1rem; font-weight: 600; transition: color .3s var(--ease); }
.svc li span { font-size: 13.4px; line-height: 1.5; color: var(--muted); }
.svc li:hover, .svc li.on { background: var(--accent-wash); padding-left: 20px; }
.svc li.on b, .svc li:hover b { color: var(--accent-ink); }

/* ----------------------------------------------------------- các bước */

.steps-min { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; }
.steps-min li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-size: 14.6px; color: var(--muted);
}
.steps-min b {
  flex: none; width: 22px;
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--accent); font-size: 14px; font-weight: 600;
}

.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0; margin: 30px 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--rule);
}
.steps li {
  padding: 26px 22px 26px 0;
  border-right: 1px solid var(--rule);
  transition: background .35s var(--ease);
}
.steps li + li { padding-left: 22px; }
.steps li:last-child { border-right: 0; }
.steps li b {
  display: block; margin-bottom: 14px;
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .08em;
}
.steps li h3 { margin: 0 0 8px; font-size: 1.02rem; }
.steps li p { margin: 0; color: var(--muted); font-size: 13.4px; }

/* ---------------------------------------------------------------- bác sĩ */

.docs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 22px; margin-top: 34px;
}
.doc { margin: 0; }
.doc-img {
  aspect-ratio: 3 / 4; overflow: hidden;
  background: #f0eee9;
  border: 1px solid var(--rule);
}
.doc-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: saturate(.94);
  transition: transform .9s var(--ease);
}
.doc:hover .doc-img img { transform: scale(1.035); }
.doc figcaption { display: grid; gap: 3px; padding: 14px 0 0; text-align: left; }
.doc figcaption b { font-size: .94rem; font-weight: 600; letter-spacing: -.012em; }
.doc figcaption i { font-style: normal; font-size: 11.5px; color: var(--accent); }
.doc figcaption span { font-size: 11.5px; color: var(--faint); }

/* ----------------------------------------------------------------- cơ sở */

.branches {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px; margin-top: 34px;
}
/* Ba cơ sở phải nằm gọn trong MỘT màn hình. Trong cột hẹp thì auto-fit chỉ xếp
   được 2 cột, cơ sở thứ ba rơi xuống hàng dưới và bị khung cắt mất. Chương này
   cho cột trải rộng, ép đúng 3 cột và ảnh dẹt hơn để đủ chiều cao. */
#co-so .col { max-width: 1060px; }
#co-so .branches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#co-so .branch-img { aspect-ratio: 3 / 2; }
.branch { display: flex; flex-direction: column; }
.branch-img {
  aspect-ratio: 4 / 3; overflow: hidden;
  background: #f0eee9; border: 1px solid var(--rule);
}
.branch-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.94);
  transition: transform .9s var(--ease);
}
.branch:hover .branch-img img { transform: scale(1.035); }
.branch-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 0; flex: 1; }
.branch-tag {
  margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.branch-body h3 { font-size: 1.24rem; margin: 0; }
.branch-addr { margin: 0; color: var(--muted); font-size: 13.4px; flex: 1; }
.branch-act { display: flex; gap: 8px; margin-top: 8px; }

/* ------------------------------------------------------------- đặt lịch */

.ch-in.book {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 56px; align-items: start;
}

.contact-list {
  margin: 34px 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--rule);
}
.contact-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 14.6px;
}
.contact-list .ci {
  min-width: 104px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.contact-list a {
  color: var(--ink); font-weight: 600;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 1px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.contact-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.book-form {
  display: grid; gap: 16px; padding: 32px;
  border: 1px solid var(--rule); background: var(--card);
  box-shadow: var(--lift);
}
.field { display: grid; gap: 7px; }
.field label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.field .opt { font-weight: 500; letter-spacing: .06em; text-transform: none; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 0;
  border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 15px;
  transition: border-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 54px; }
.field select { padding-right: 18px; }
.field input::placeholder, .field textarea::placeholder { color: #b3bcb8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--accent);
}
.field input.bad, .field textarea.bad { border-bottom-color: #c2453a; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-err {
  margin: 0; padding: 11px 14px;
  border-left: 2px solid #c2453a; background: #fdf1f0;
  color: #96322a; font-size: 13.6px;
}
.form-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.form-fine { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.5; }
.form-done {
  display: grid; gap: 13px; padding: 20px;
  border: 1px solid var(--rule); background: var(--accent-wash);
}
.done-title {
  margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-ink);
}
.form-done pre {
  margin: 0; padding: 15px;
  border: 1px solid var(--rule); background: var(--card);
  font-family: 'Be Vietnam Pro', ui-monospace, monospace;
  font-size: 13px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  max-height: 190px; overflow: auto;
}
.done-act { display: flex; flex-wrap: wrap; gap: 9px; }

/* ============================================ chương — chế độ SÂN KHẤU 3D */

/* Ở chế độ này cuộn phải do JS điều khiển hoàn toàn: để scroll-behavior smooth
   thì mọi lệnh scrollTo đều chạy hoạt hình riêng của trình duyệt, chồng lên bộ
   giảm chấn của máy quay và làm vị trí cảnh khó đoán. */
html.stage-on { scroll-behavior: auto; }

html.stage-on #stage-ui {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
html.stage-on.past-track #stage-ui { opacity: 0 !important; }

html.stage-on .ch {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: 104px 0 80px;
  opacity: 0;
  transition: opacity .12s linear;
}
/* chỉ chương đang hiện mới nhận được chuột */
html.stage-on .ch.live { pointer-events: auto; }
html.stage-on .ch:not(.live) * { pointer-events: none; }

html.stage-on .ch .col {
  transform: translateY(16px);
  transition: transform .85s var(--ease);
}
html.stage-on .ch.live .col { transform: none; }

#scroll-track { display: none; }
html.stage-on #scroll-track { display: block; }

/* nhãn neo vào toạ độ 3D */
.pins { display: none; }
html.stage-on .pins {
  display: block; position: absolute; inset: 0;
  pointer-events: none; z-index: 3;
}
.pin {
  position: absolute; top: 0; left: 0;
  display: grid; gap: 2px;
  /* nhãn nằm đè lên chính vật thể nên phải có nền giấy mờ, không thì chữ xám
     trên men răng trắng là không đọc được */
  padding: 5px 11px 6px 15px;
  border-left: 1px solid var(--rule-2);
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(4px);
  font-weight: 400;
  opacity: 0;
  transition: opacity .5s var(--ease);
  will-change: transform;
}
.pin::before {
  content: ''; position: absolute; left: -3px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink);
}
.pin i {
  font-style: normal; font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; color: var(--ink);
}
.pin span { font-size: 11px; color: var(--faint); }
.pin-hot { border-left-color: #c2453a; }
.pin-hot::before { background: #c2453a; }
.pin-hot i { color: #a3372e; }

/* ---------------------------------------------------------------- footer */

.site-foot {
  padding: 84px 0 30px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 44px; padding-bottom: 52px;
}
/* Footer dùng bản logo đầy đủ (dấu hiệu + chữ) nên không lặp lại tên bằng thẻ
   <b> nữa; tên nằm trong alt của ảnh. */
.foot-brand .foot-logo { width: 208px; height: auto; margin-bottom: 18px; }
.foot-brand p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.foot-brand .muted { color: var(--faint); }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col b {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px; font-weight: 600;
}
.foot-col a, .foot-col span { font-size: 13.6px; color: var(--muted); }
.foot-col a:hover { color: var(--accent); }
.foot-col .muted { color: var(--faint); font-size: 13px; }
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 26px; border-top: 1px solid var(--rule);
  font-size: 12.2px; color: var(--faint);
}

/* ------------------------------------------------------------ nút gọi nổi */

.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  display: none; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 26px rgba(14, 122, 85, .28);
}

/* ================================================================== khổ hẹp */

/* Câu "rê chuột vào một chiếc răng" chỉ đúng khi có con trỏ thật. Trên cảm ứng
   nó là hướng dẫn sai — chỉ còn danh sách tên bên dưới là bấm được. */
@media (hover: none), (pointer: coarse) { .only-mouse { display: none; } }

@media (max-width: 1500px) { .chapters button span { display: none; } }
@media (max-width: 1180px) { html.stage-on .chapters { right: calc(var(--frame) + 8px); } }
@media (max-width: 1080px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }

@media (max-width: 980px) {
  :root { --frame: 14px; }
  .head-phone { display: none; }
  .nav-toggle { display: block; }
  .fab { display: grid; }
  .site-head { padding-inline: 24px; }
  .wrap, .ch-in { padding-inline: 26px; }

  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 38;
    width: min(300px, 84vw);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 96px 26px 28px;
    background: var(--paper);
    border-left: 1px solid var(--rule);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .42s var(--ease), visibility .42s var(--ease);
    overflow-y: auto;
  }
  .site-nav.open { transform: none; visibility: visible; }
  .site-nav a {
    margin-inline: 0; padding: 15px 0; font-size: 15.5px;
    border-bottom: 1px solid var(--rule);
  }
  .site-nav a::after { display: none; }
  .site-nav .nav-cta {
    margin: 20px 0 0; padding: 14px 20px; text-align: center;
    border-bottom: 0; justify-content: center;
  }

  .ch-in.book { grid-template-columns: 1fr; gap: 34px; }
  .col, .col.wide { max-width: none; }
  .col-right { margin-left: 0; }
  .steps li, .steps li + li { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--rule); }
}

/* Màn dọc: chữ dồn xuống nửa dưới, dải trên dành cho mô hình 3D. Các danh sách
   dài chuyển thành băng vuốt ngang để mọi chương vẫn gọn trong một khung nhìn. */
@media (max-width: 760px) {
  html.stage-on .ch { align-content: end; padding: 86px 0 28px; }
  html.stage-on .ch .col::before { inset: -40px -50px -26px -34px; }
  .ch h1 { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .ch h2 { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .lead { font-size: .96rem; margin-bottom: 22px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div { padding: 18px 14px 16px 0; border-bottom: 1px solid var(--rule); }
  .stats div:nth-child(2n) { border-right: 0; }
  .stats div + div { padding-left: 0; }
  .stats div:nth-child(2n) { padding-left: 16px; }
  .row2 { grid-template-columns: 1fr; }
  /* Chương là lớp phủ cao đúng một màn hình, không cuộn được bên trong. Ở 390px
     nội dung chương đặt lịch cao 1239px trong khi chỗ trống chỉ 730px, nên phần
     dưới form bị cắt cụt. Cắt những gì đã có ở nơi khác — hotline/email/giờ mở
     cửa nằm nguyên trong footer ngay bên dưới và ở nút gọi nổi — rồi bóp chặt
     khoảng cách các trường lại cho vừa. */
  #dat-lich .lead, #dat-lich .contact-list { display: none; }
  html.stage-on #dat-lich { padding: 70px 0 18px; }
  .book-form { padding: 18px 16px; gap: 12px; }
  .book-form .field { gap: 5px; }
  .book-form .field input, .book-form .field select, .book-form .field textarea { padding: 9px 0; }
  .book-form .field textarea { min-height: 44px; }
  .book-form .row2 { gap: 13px; }
  /* Nút "Gọi ngay" trong form là thừa trên điện thoại: đã có nút gọi nổi ở góc
     và số hotline trong footer. Bỏ nó đi thì nút chính được cả hàng, không phải
     xếp hai nút chồng lên nhau (tốn thêm 67px không có). */
  .form-act .btn.ghost { display: none; }
  .form-act { margin-top: 2px; }
  .form-act .btn { flex: 1; justify-content: center; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .brand-txt i { display: none; }
  .scroll-hint { margin-top: 28px; }
  .form-done pre { max-height: 130px; }

  html.stage-on .svc,
  html.stage-on .steps,
  html.stage-on .docs,
  html.stage-on .branches {
    display: flex; min-width: 0; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    border-top: 0; padding-bottom: 4px;
    margin-inline: -26px; padding-inline: 26px;
    /* scroll-snap tính mốc theo hộp padding chứ không theo hộp nội dung, nên
       nếu thiếu dòng này trình duyệt tự cuộn sẵn 26px và thẻ đầu tiên dính sát
       mép màn hình, lệch hẳn so với tiêu đề bên trên. */
    scroll-padding-inline: 26px;
  }
  html.stage-on .svc::-webkit-scrollbar,
  html.stage-on .steps::-webkit-scrollbar,
  html.stage-on .docs::-webkit-scrollbar,
  html.stage-on .branches::-webkit-scrollbar { display: none; }

  html.stage-on .svc > li,
  html.stage-on .steps > li,
  html.stage-on .docs > .doc,
  html.stage-on .branches > .branch {
    flex: 0 0 min(74%, 290px); scroll-snap-align: start;
  }
  html.stage-on .svc > li {
    grid-template-columns: 1fr; margin-left: 0;
    padding: 16px 18px; border: 1px solid var(--rule); background: var(--card);
  }
  html.stage-on .steps > li { border: 1px solid var(--rule); padding: 20px 18px; }
  html.stage-on .docs > .doc { flex-basis: min(52%, 200px); }

  .pin { padding-left: 12px; }
  .pin i { font-size: 11.5px; }
  .pin span { display: none; }
}

@media (max-width: 420px) { .chapters { display: none !important; } }

/* ------------------------------------------- tôn trọng giảm chuyển động */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------------- in ấn */

@media print {
  #stage, #stage-fallback, #loader, .fab, .nav-toggle, .site-nav,
  .chapters, .scroll-hint, .pins, #scroll-track, .page-frame { display: none !important; }
  html.stage-on #stage-ui { position: static; }
  html.stage-on .ch { position: static; opacity: 1 !important; page-break-inside: avoid; }
  body { background: #fff; }
  .site-head { position: static; }
  .book-form { box-shadow: none; }
}

/* ==========================================================================
   Trang bảng giá (/bang-gia.html)
   Trang dữ liệu — không dựng WebGL, chỉ dùng nền chuyển sắc bằng CSS.
   Ba lớp .sec / .sec-lead / .hero-cta chỉ còn trang này dùng; trang chủ đã
   chuyển sang hệ chương (.ch / .ch-in / .col).
   ========================================================================== */

.sec { padding: clamp(64px, 8vh, 96px) 0; }
.sec-lead { margin: 0; max-width: 60ch; color: var(--muted); font-size: 1.02rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.page-price .price-head { padding-top: 132px; padding-bottom: 0; }
.page-price h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  margin: 0 0 22px; max-width: 17ch;
}

.price-note {
  max-width: 60ch; margin: 26px 0 0; padding: 20px 24px;
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  color: var(--ink-2); font-size: 14px;
}
.price-note b { color: var(--ink); }

.price-h2 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); margin: 0; }
.price-sub { margin: 9px 0 26px; color: var(--faint); font-size: 13.5px; }

.price-groups { padding-bottom: 0; }
.pgs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.pg {
  display: grid; gap: 7px; align-content: start;
  padding: 22px 22px 24px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  transition: background .35s var(--ease);
}
.pg:hover { background: var(--accent-wash); }
.pg b { font-size: 14.5px; font-weight: 600; }
.pg-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem; color: var(--accent-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.pg-n {
  font-size: 10.5px; color: var(--faint);
  letter-spacing: .12em; text-transform: uppercase;
}

.price-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 18px; margin-bottom: 10px;
}
.price-search { position: relative; flex: 1 1 280px; max-width: 400px; }
.price-search input {
  width: 100%; padding: 11px 34px 11px 0;
  border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 15px;
  transition: border-color .25s var(--ease);
}
.price-search input::placeholder { color: #b3bcb8; }
.price-search input:focus { outline: none; border-bottom-color: var(--accent); }
#q-clear {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--faint);
  font-size: 17px; line-height: 1; cursor: pointer;
}
#q-clear:hover { color: var(--ink); }

.price-count {
  margin: 0 0 18px; font-size: 10.5px; color: var(--faint);
  letter-spacing: .14em; text-transform: uppercase;
}

/* bảng rộng phải cuộn trong khung của nó, không đẩy cả trang tràn ngang */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--rule-2); }
.page-price table { width: 100%; border-collapse: collapse; font-size: 14.4px; }
.page-price thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 13px 18px 13px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
  white-space: nowrap;
}
.page-price tbody td {
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.page-price tbody tr:hover td { background: var(--accent-wash); }
.page-price td.u { color: var(--faint); white-space: nowrap; font-size: 13px; }
.page-price td.p {
  text-align: right; white-space: nowrap; padding-right: 0;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.page-price thead th:last-child { text-align: right; padding-right: 0; }

.price-empty {
  margin: 26px 0 0; padding: 22px;
  border: 1px dashed var(--rule-2);
  text-align: center; color: var(--muted); font-size: 14px;
}
.price-empty a { color: var(--accent); font-weight: 600; }

.price-cta { text-align: center; }
.price-cta .sec-lead { margin-inline: auto; }
.price-cta .hero-cta { justify-content: center; margin: 28px 0 0; }

@media (max-width: 620px) {
  .page-price .price-head { padding-top: 112px; }
  .page-price tbody td, .page-price thead th { padding-right: 12px; }
  .page-price table { font-size: 13.6px; }
  .price-search { max-width: none; }
}