/* ================================================================
   Ngải Spa — hệ thống giao diện
   Màu, chữ, khoảng cách theo bộ nhận diện thương hiệu Ngải 2026.
   Viết CSS thuần, không cần build — sửa file là thấy ngay.
   ================================================================ */

:root {
  /* Màu thương hiệu */
  --xanh: #578736;
  --xanh-tham: #2e542d;
  --xanh-nhat: #7ba75c;
  --cam: #f8b000;
  --kem: #f6f3ea;
  --kem-2: #efe9da;
  --kem-3: #e4dcc7;
  --trang: #ffffff;
  --muc: #2b2b25;
  --muc-2: #5f5f54;
  --muc-3: #64645a; /* đã làm đậm hơn để chữ nhỏ đạt chuẩn tương phản 4.5:1 */

  /* Chữ */
  --f-tieu-de: "Playfair Display", "Noto Serif", Georgia, serif;
  --f-than: "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-nhan: "Oswald", "Noto Sans", sans-serif;

  /* Khoảng cách — thoáng, hợp phong cách nghỉ dưỡng cao cấp */
  --k-1: 8px;
  --k-2: 16px;
  --k-3: 24px;
  --k-4: 40px;
  --k-5: 64px;
  --k-6: 96px;
  --k-7: 128px;

  --rong: 1240px;
  --rong-hep: 780px;
  --bo: 4px;
  --vien: 1px solid rgba(43, 43, 37, 0.12);
  --do-bong: 0 18px 48px rgba(46, 84, 45, 0.1);
  --nhanh: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--kem);
  color: var(--muc);
  font-family: var(--f-than);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-tieu-de);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--xanh-tham);
  text-wrap: balance; /* tránh còn trơ một chữ ở dòng cuối */
}
h1 { font-size: clamp(2.15rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
p { margin: 0 0 var(--k-2); }

:focus-visible {
  outline: 3px solid var(--cam);
  outline-offset: 3px;
  border-radius: var(--bo);
}

/* ---------- khối dùng lại ---------- */
.bo-cuc { width: 100%; max-width: var(--rong); margin: 0 auto; padding: 0 var(--k-3); }
.hep { max-width: var(--rong-hep); }
.muc { padding: var(--k-6) 0; }
.muc-nho { padding: var(--k-5) 0; }
.nen-trang { background: var(--trang); }
.nen-kem2 { background: var(--kem-2); }
.nen-xanh { background: var(--xanh-tham); color: rgba(255, 255, 255, 0.9); }
.nen-xanh h2, .nen-xanh h3 { color: var(--trang); }
.giua { text-align: center; }

.nhan {
  font-family: var(--f-nhan);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* dùng xanh thẫm chứ không phải xanh chủ đạo: chữ nhỏ cần tương phản cao hơn */
  color: var(--xanh-tham);
  margin: 0 0 var(--k-2);
  display: block;
}
.nen-xanh .nhan { color: var(--cam); }

.dan {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--xanh);
  opacity: 0.4;
  margin: var(--k-3) 0;
}
.giua .dan { margin-left: auto; margin-right: auto; }

.dan-y { color: var(--muc-2); font-size: 1.06rem; }
.nen-xanh .dan-y { color: rgba(255, 255, 255, 0.82); }

/* ---------- nút ---------- */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 32px;
  font-family: var(--f-nhan);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--bo);
  cursor: pointer;
  transition: background var(--nhanh), color var(--nhanh), border-color var(--nhanh), transform var(--nhanh);
}
.nut:hover { transform: translateY(-2px); }
.nut:active { transform: translateY(0); }

.nut-chinh { background: var(--xanh); color: var(--trang); }
.nut-chinh:hover { background: var(--xanh-tham); }

/* Cam nghệ chỉ dùng làm VIỀN và chữ, không tô kín cả nút — tô kín sẽ chỏi.
   Chỉ dùng trên nền xanh thẫm; trên nền sáng chữ cam không đủ tương phản. */
.nut-cam {
  background: transparent;
  border-color: var(--cam);
  color: var(--cam);
}
.nut-cam:hover { background: rgba(248, 176, 0, 0.14); }

/* Nút trắng — dùng trên nền xanh thẫm khi cần nổi bật hơn nút viền */
.nut-trang { background: var(--trang); color: var(--xanh-tham); }
.nut-trang:hover { background: var(--kem); }

.nut-vien { border-color: currentColor; color: var(--xanh-tham); background: transparent; }
.nut-vien:hover { background: var(--xanh-tham); color: var(--trang); border-color: var(--xanh-tham); }

.nut-sang { border-color: rgba(255, 255, 255, 0.7); color: var(--trang); background: transparent; }
.nut-sang:hover { background: var(--trang); color: var(--xanh-tham); }

/* ================================================================
   Thanh mời đổi ngôn ngữ — hiện cho khách nước ngoài
   ================================================================ */
.moi-ngon-ngu {
  display: none;
  background: var(--xanh-tham);
  color: var(--trang);
  padding: 12px var(--k-3);
}
.moi-ngon-ngu.hien { display: block; }
.moi-ngon-ngu > div {
  max-width: var(--rong);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-2);
  flex-wrap: wrap;
  text-align: center;
}
.moi-ngon-ngu p { margin: 0; font-size: 1.02rem; }
.moi-ngon-ngu .nut { min-height: 44px; padding: 10px 22px; font-size: 0.76rem; }
.moi-dong {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}
.moi-dong:hover { color: var(--trang); }

/* ================================================================
   Đầu trang
   ================================================================ */
.dau-trang {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(246, 243, 234, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(43, 43, 37, 0.08);
  transition: background var(--nhanh), box-shadow var(--nhanh);
}
.dau-trang.trong-suot {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.dau-trang.trong-suot .dt-lien-ket { color: var(--trang); }
.dau-trang.trong-suot .logo-toi { display: none; }
.dau-trang.trong-suot .logo-sang { display: block; }
.logo-sang { display: none; }

/* Khi bảng menu đang mở, đầu trang trở về nền sáng và chữ tối — nếu vẫn để trong suốt
   thì chữ trắng sẽ nằm trên nền kem của bảng menu và không đọc được. */
.dau-trang.trong-suot.menu-mo {
  background: rgba(246, 243, 234, 0.98);
  border-bottom-color: rgba(43, 43, 37, 0.08);
  backdrop-filter: blur(14px);
}
.dau-trang.trong-suot.menu-mo .dt-lien-ket,
.dau-trang.trong-suot.menu-mo .nn-co,
.dau-trang.trong-suot.menu-mo .dt-hamburger { color: var(--muc); }
.dau-trang.trong-suot.menu-mo .nn-co.dang-dung {
  border-color: var(--xanh);
  background: rgba(87, 135, 54, 0.09);
}
.dau-trang.trong-suot.menu-mo .logo-toi { display: block; }
.dau-trang.trong-suot.menu-mo .logo-sang { display: none; }

.dt-trong {
  max-width: var(--rong);
  margin: 0 auto;
  padding: 14px var(--k-3);
  display: flex;
  align-items: center;
  gap: var(--k-3);
}
.dt-logo img { height: 46px; width: auto; }

.dt-menu { display: flex; align-items: center; gap: var(--k-3); margin-left: auto; }
.dt-lien-ket {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--muc);
  padding: 8px 2px;
  position: relative;
  white-space: nowrap;
}
.dt-lien-ket::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--nhanh);
}
.dt-lien-ket:hover::after { width: 100%; }

.dt-phai { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.dt-menu + .dt-phai { margin-left: var(--k-3); }

/* ---------- mục menu có danh sách con ---------- */
.dt-nhom { position: relative; }
.dt-nhom > .dt-lien-ket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.dt-nhom > .dt-lien-ket svg { width: 13px; height: 13px; transition: transform var(--nhanh); }
.dt-nhom[aria-expanded="true"] > .dt-lien-ket svg { transform: rotate(180deg); }

.dt-con {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  min-width: 330px;
  background: var(--trang);
  border: var(--vien);
  border-radius: var(--bo);
  box-shadow: var(--do-bong);
  padding: 8px;
  display: none;
  z-index: 95;
}
.dt-con.hien { display: block; }
.dt-con a {
  display: block;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: var(--bo);
  font-size: 0.98rem;
  color: var(--muc);
  transition: background var(--nhanh);
}
.dt-con a:hover { background: var(--kem); }
.dt-con a small { display: block; font-size: 0.8rem; color: var(--muc-3); }
.dt-con hr { border: 0; border-top: 1px solid rgba(43,43,37,0.1); margin: 6px 10px; }

/* ---------- dãy cờ đổi ngôn ngữ (hiện sẵn, không giấu trong nút thả xuống) ---------- */
.nn { display: flex; align-items: center; gap: 4px; }
.nn-co {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--bo);
  line-height: 1;
  opacity: 0.72;
  transition: background var(--nhanh), border-color var(--nhanh), opacity var(--nhanh);
}
/* Chỉ hiện lá cờ. Mã ngôn ngữ vẫn còn trong mã nguồn cho trình đọc màn hình,
   nhưng ẩn khỏi mắt người xem. */
.nn-co .co {
  width: 28px;
  height: 19px;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(43, 43, 37, 0.16);
}
.dau-trang.trong-suot .nn-co .co { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
.dau-trang.trong-suot.menu-mo .nn-co .co { box-shadow: 0 0 0 1px rgba(43, 43, 37, 0.16); }
.nn-co em {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nn-co:hover { opacity: 1; background: rgba(87, 135, 54, 0.1); border-color: rgba(87, 135, 54, 0.35); }
.nn-co.dang-dung { opacity: 1; border-color: var(--xanh); background: rgba(87, 135, 54, 0.09); }

.dau-trang.trong-suot .nn-co { color: var(--trang); }
.dau-trang.trong-suot .nn-co:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
.dau-trang.trong-suot .nn-co.dang-dung { border-color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.14); }

/* ---------- menu điện thoại ---------- */
.dt-hamburger {
  display: none;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid rgba(43, 43, 37, 0.25);
  border-radius: var(--bo);
  cursor: pointer;
  padding: 12px;
}
.dt-hamburger span {
  display: block; height: 1.5px; background: currentColor; margin: 4px 0;
  transition: transform var(--nhanh), opacity var(--nhanh);
}
.dt-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.dt-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dt-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ================================================================
   Hero
   ================================================================ */
.hero {
  position: relative;
  min-height: 640px;      /* mốc an toàn cho trình duyệt cũ */
  min-height: 100vh;
  min-height: 100svh;     /* trừ thanh địa chỉ trên điện thoại */
  display: flex;
  align-items: center;
  margin-top: -81px;
  padding-top: 81px;
  overflow: hidden;
}
.hero-anh {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(24, 40, 20, 0.86) 0%,
    rgba(24, 40, 20, 0.62) 38%,
    rgba(24, 40, 20, 0.22) 70%,
    rgba(24, 40, 20, 0.34) 100%);
  z-index: -1;
}
.hero-trong { max-width: 730px; padding: var(--k-6) 0 var(--k-5); color: var(--trang); }
.hero .nhan { color: var(--cam); }
.hero h1 { color: var(--trang); margin-bottom: var(--k-3); }
.hero-y {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 500px;
  margin-bottom: var(--k-4);
}
.hero-nut { display: flex; gap: var(--k-2); flex-wrap: wrap; }

.hero-cuon {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--f-nhan);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-cuon::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(rgba(255,255,255,0.7), transparent);
  animation: cuon 2.4s ease-in-out infinite;
}
@keyframes cuon { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ================================================================
   Dải tin cậy
   ================================================================ */
.tin-cay { background: var(--kem-2); border-bottom: 1px solid rgba(43,43,37,0.07); }
.tc-luoi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--k-3);
  padding: var(--k-4) 0;
}
.tc-o { display: flex; gap: 14px; align-items: flex-start; }
.tc-o svg { width: 30px; height: 30px; flex: none; color: var(--xanh); stroke-width: 1.3; }
.tc-o b {
  display: block;
  font-family: var(--f-nhan);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xanh-tham);
  margin-bottom: 2px;
}
.tc-o span { font-size: 0.92rem; color: var(--muc-2); line-height: 1.5; }

/* ================================================================
   Khối hai cột chữ + ảnh
   ================================================================ */
.doi {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--k-6);
  align-items: center;
}
.doi-dao { direction: rtl; }
.doi-dao > * { direction: ltr; }
.doi-anh { position: relative; }
.doi-anh img { border-radius: var(--bo); box-shadow: var(--do-bong); width: 100%; }
.doi-anh::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--xanh);
  opacity: 0.28;
  border-radius: var(--bo);
  z-index: -1;
}

/* ================================================================
   Liệu pháp — các bước
   ================================================================ */
.buoc-luoi {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--k-3);
  margin-top: var(--k-5);
}
.buoc { text-align: center; }
.buoc-vong {
  width: 74px; height: 74px;
  margin: 0 auto var(--k-2);
  border: 1px solid rgba(87, 135, 54, 0.4);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--xanh);
  transition: background var(--nhanh), color var(--nhanh), border-color var(--nhanh);
}
.buoc:hover .buoc-vong { background: var(--xanh); color: var(--trang); border-color: var(--xanh); }
.buoc-vong svg { width: 31px; height: 31px; stroke-width: 1.3; }
.buoc b {
  display: block;
  font-family: var(--f-tieu-de);
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--xanh-tham);
  margin-bottom: 4px;
}
.buoc span { font-size: 0.86rem; color: var(--muc-2); line-height: 1.5; }

/* ================================================================
   Dịch vụ
   ================================================================ */
.dv-luoi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--k-3);
  margin-top: var(--k-5);
}
.dv {
  background: var(--trang);
  border-radius: var(--bo);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  border: 1px solid rgba(43,43,37,0.07);
  transition: transform var(--nhanh), box-shadow var(--nhanh), border-color var(--nhanh);
}
.dv:hover { border-color: rgba(87, 135, 54, 0.35); }
.dv:hover h3 { color: var(--xanh); }
.dv:hover { transform: translateY(-5px); box-shadow: var(--do-bong); }
.dv-anh { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.dv-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.dv:hover .dv-anh img { transform: scale(1.05); }
.dv-huy {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--cam);
  color: var(--xanh-tham);
  font-family: var(--f-nhan);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
}
.dv-noi { padding: var(--k-3); display: flex; flex-direction: column; flex: 1; }
.dv-noi h3 { margin-bottom: 8px; }
.dv-noi p { font-size: 0.95rem; color: var(--muc-2); flex: 1; }
.dv-gia {
  display: flex; align-items: baseline; gap: 8px;
  padding-top: var(--k-2);
  border-top: 1px solid rgba(43,43,37,0.09);
  margin-top: var(--k-2);
}
.dv-gia b {
  font-family: var(--f-tieu-de);
  font-size: 1.35rem;
  font-weight: 700; /* đủ đậm để giá vẫn đọc rõ khi in màu xanh */
  color: var(--xanh);
}
.dv-gia span { font-size: 0.84rem; color: var(--muc-3); }

/* Ô dịch vụ chưa có ảnh thật: nền kem + hoạ tiết, trông chủ ý chứ không như ảnh lỗi */
.dv-anh.dv-ve {
  background: linear-gradient(150deg, var(--kem) 0%, var(--kem-2) 60%, var(--kem-3) 100%);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.dv-anh.dv-ve::before,
.dv-anh.dv-ve::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(87, 135, 54, 0.24);
  border-radius: 50%;
}
.dv-anh.dv-ve::before { width: 190px; height: 190px; right: -54px; top: -54px; }
.dv-anh.dv-ve::after { width: 120px; height: 120px; left: -34px; bottom: -34px; }
.dv-ve svg { width: 92px; height: 92px; color: var(--xanh); stroke-width: 0.9; position: relative; opacity: .9; }

/* ================================================================
   Sản phẩm
   ================================================================ */
.sp-luoi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--k-3);
  margin-top: var(--k-5);
}
.sp {
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.08);
  border-radius: var(--bo);
  padding: var(--k-4) var(--k-3);
  text-align: center;
  transition: transform var(--nhanh), box-shadow var(--nhanh), border-color var(--nhanh);
}
.sp:hover { transform: translateY(-5px); box-shadow: var(--do-bong); border-color: rgba(87, 135, 54, 0.35); }
.sp-vong {
  width: 84px; height: 84px;
  margin: 0 auto var(--k-3);
  border-radius: 50%;
  background: var(--kem);
  display: grid; place-items: center;
  color: var(--xanh);
}
.sp-vong svg { width: 38px; height: 38px; stroke-width: 1.2; }
.sp h3 { font-size: 1.16rem; margin-bottom: 6px; }
.sp p { font-size: 0.9rem; color: var(--muc-2); margin: 0; }

.sp-ghi-chu {
  margin-top: var(--k-4);
  text-align: center;
  font-size: 0.88rem;
  color: var(--muc-3);
}

/* ================================================================
   Góc sức khoẻ — bài viết
   ================================================================ */
.bai-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-3); margin-top: var(--k-5); }
.bai {
  display: flex;
  flex-direction: column;
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.08);
  border-radius: var(--bo);
  overflow: hidden;
  transition: transform var(--nhanh), box-shadow var(--nhanh);
}
.bai:hover { transform: translateY(-4px); box-shadow: var(--do-bong); }
.bai-anh { aspect-ratio: 3 / 2; overflow: hidden; }
.bai-anh img { width: 100%; height: 100%; object-fit: cover; }
.bai-noi { padding: var(--k-3); }
.bai-noi h3 { font-size: 1.1rem; margin-bottom: 8px; }
.bai-noi p { font-size: 0.9rem; color: var(--muc-2); margin: 0; }

/* ================================================================
   Trang con — đầu trang nhỏ (không dùng ảnh tràn màn hình như trang chủ)
   ================================================================ */
.dinh {
  position: relative;
  padding: var(--k-6) 0;
  background: var(--xanh-tham);
  color: var(--trang);
  overflow: hidden;
}
.dinh-anh {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.34;
  z-index: 0;
}
.dinh > .bo-cuc { position: relative; z-index: 1; }
.dinh h1 { color: var(--trang); font-size: clamp(2rem, 4.6vw, 3.4rem); }
.dinh .nhan { color: var(--cam); }
.dinh p { color: rgba(255, 255, 255, 0.88); max-width: 620px; }

.duong-dan {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: var(--k-2);
}
.duong-dan a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.duong-dan a:hover { color: var(--trang); }

/* ================================================================
   Nhóm dịch vụ trên trang Dịch vụ
   ================================================================ */
.nhom-dv { padding: var(--k-6) 0; border-bottom: 1px solid rgba(43, 43, 37, 0.09); }
.nhom-dv:last-of-type { border-bottom: 0; }
.nhom-trong { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--k-5); align-items: start; }
.nhom-dao .nhom-anh { order: 2; }
.nhom-anh img { border-radius: var(--bo); width: 100%; }
.nhom-anh .dv-ve {
  aspect-ratio: 4 / 3;
  border-radius: var(--bo);
}
.nhom-dv h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: var(--k-2); }

.bang-dv { margin-top: var(--k-3); }
.bang-dv-hang {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--k-2);
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px dashed rgba(43, 43, 37, 0.16);
}
.bang-dv-hang:last-child { border-bottom: 0; }
.bang-dv-ten { font-weight: 500; }
.bang-dv-ten small { display: block; font-weight: 400; font-size: 0.84rem; color: var(--muc-3); }
/* Link sang trang riêng của dịch vụ. Nằm trong <small> nên phải nhẹ hơn chữ
   chính — chỉ là lối đi thêm cho người muốn đọc kỹ, không tranh chỗ với nút Thêm. */
.bang-dv-ten .dv-them {
  white-space: nowrap;
  color: var(--xanh, #588534);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-size: 0.98em;
}
.bang-dv-ten .dv-them:hover { opacity: 0.75; }
.bang-dv-gia {
  font-family: var(--f-tieu-de);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--xanh);
  white-space: nowrap;
}
.bang-dv-gia small { display: block; font-family: var(--f-than); font-size: 0.76rem; font-weight: 400; color: var(--muc-3); text-align: right; }

/* ================================================================
   Bảng thanh toán / xác nhận đơn (nổi giữa màn hình)
   ================================================================ */
.tt-nen {
  position: fixed; inset: 0;
  background: rgba(20, 30, 18, 0.6);
  backdrop-filter: blur(3px);
  z-index: 120;
  display: none;
  overflow-y: auto;
  padding: var(--k-3);
}
.tt-nen.hien { display: flex; align-items: flex-start; justify-content: center; }
.tt-bang {
  background: var(--kem);
  border-radius: 12px;
  width: min(460px, 100%);
  margin: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.tt-dau {
  background: var(--trang);
  padding: var(--k-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--k-2);
  border-bottom: 1px solid rgba(43, 43, 37, 0.1);
}
.tt-dau h2 { font-size: 1.25rem; }
.tt-dau .gio-dong { width: 44px; height: 44px; background: none; border: 0; font-size: 1.7rem; color: var(--muc-2); cursor: pointer; line-height: 1; }
.tt-than { padding: var(--k-3); }

.tt-demo {
  background: var(--cam);
  color: #3a2a00;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
  padding: 10px var(--k-3);
  line-height: 1.4;
}
.tt-vong-xong {
  width: 68px; height: 68px; margin: 0 auto var(--k-2);
  border-radius: 50%; background: rgba(87,135,54,.14);
  display: grid; place-items: center; color: var(--xanh);
}
.tt-vong-xong svg { width: 34px; height: 34px; stroke-width: 2; }

.tt-qr {
  text-align: center;
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.1);
  border-radius: var(--bo);
  padding: var(--k-3);
  margin-bottom: var(--k-3);
}
.tt-qr img { width: 220px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.tt-qr .cho { width: 220px; height: 220px; margin: 0 auto; display: grid; place-items: center; color: var(--muc-3); }

.tt-nh { list-style: none; margin: 0; padding: 0; }
.tt-nh li {
  display: flex; align-items: center; gap: var(--k-2);
  padding: 11px 0; border-bottom: 1px dashed rgba(43,43,37,.14);
}
.tt-nh .nhan { margin: 0; flex: none; width: 96px; letter-spacing: 0.08em; }
.tt-nh b { font-weight: 600; flex: 1; word-break: break-word; }
.tt-nh .chep {
  background: none; border: 1px solid rgba(87,135,54,.4); color: var(--xanh);
  border-radius: 6px; padding: 5px 10px; font-size: 0.78rem; cursor: pointer; white-space: nowrap;
}
.tt-nh .chep:hover { background: rgba(87,135,54,.1); }
.tt-tong b { color: var(--xanh); font-size: 1.15rem; font-family: var(--f-tieu-de); }

.tt-than .nut { width: 100%; margin-top: var(--k-2); }
.tt-ghi { margin: var(--k-2) 0 0; font-size: 0.82rem; color: var(--muc-3); text-align: center; line-height: 1.5; }

.tt-tom {
  background: var(--trang); border: 1px solid rgba(43,43,37,.1);
  border-radius: var(--bo); padding: var(--k-2) var(--k-3); margin-bottom: var(--k-3);
}
.tt-tom-hang { display: flex; justify-content: space-between; gap: var(--k-2); padding: 6px 0; font-size: 0.95rem; }
.tt-tom-hang span:first-child { color: var(--muc-3); }
.tt-tom-hang span:last-child { text-align: right; font-weight: 500; }

/* ================================================================
   Góc sức khoẻ — danh sách bài + bài viết
   ================================================================ */
/* thẻ bài viết nổi bật (bài đầu) */
.bai-noi-bat {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--k-5);
  align-items: center;
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.08);
  border-radius: var(--bo);
  overflow: hidden;
  margin-bottom: var(--k-5);
}
.bai-noi-bat .bnb-anh { align-self: stretch; }
.bai-noi-bat .bnb-anh img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.bnb-noi { padding: var(--k-5) var(--k-4); }
.bnb-noi h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin: 8px 0 12px; }
.bnb-noi p { color: var(--muc-2); }
.bai-meta { font-size: 0.85rem; color: var(--muc-3); margin-top: var(--k-2); }

/* đầu bài viết trên nền sáng */
.bai-dau { text-align: center; padding: var(--k-6) 0 var(--k-4); }
.bai-dau .bo-cuc { max-width: 760px; }
.bai-dau .duong-dan-s { font-size: 0.85rem; color: var(--muc-3); margin-bottom: var(--k-2); }
.bai-dau .duong-dan-s a { color: var(--xanh); border-bottom: 1px solid rgba(87, 135, 54, 0.3); }
.bai-dau h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 8px 0 var(--k-2); }
.bai-dau .bai-meta { color: var(--muc-3); }
.bai-feature { max-width: 940px; margin: 0 auto var(--k-5); padding: 0 var(--k-3); }
.bai-feature img { width: 100%; border-radius: var(--bo); box-shadow: var(--do-bong); }

/* bài viết trong prose (nội dung dài) */
.prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--muc);
}
.prose > p:first-of-type { font-size: 1.2rem; color: var(--muc-2); }
.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: var(--k-5) 0 var(--k-2);
}
.prose h3 { font-size: 1.25rem; margin: var(--k-4) 0 10px; color: var(--xanh-tham); }
.prose p { margin: 0 0 var(--k-2); }
.prose ul, .prose ol { margin: 0 0 var(--k-3); padding-left: 24px; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--xanh); }
.prose img { border-radius: var(--bo); margin: var(--k-3) 0; }
.prose strong { color: var(--xanh-tham); }
.prose blockquote {
  margin: var(--k-3) 0;
  padding: var(--k-2) var(--k-3);
  border-left: 3px solid var(--xanh);
  background: var(--kem-2);
  border-radius: 0 var(--bo) var(--bo) 0;
  font-family: var(--f-tieu-de);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--xanh-tham);
}
.prose .khung-luu-y {
  background: rgba(87, 135, 54, 0.08);
  border: 1px solid rgba(87, 135, 54, 0.28);
  border-radius: var(--bo);
  padding: var(--k-3);
  margin: var(--k-4) 0;
}
.prose .khung-luu-y p:last-child { margin-bottom: 0; }

/* hộp mời đặt lịch cuối bài */
.bai-cta {
  max-width: 720px;
  margin: var(--k-6) auto 0;
  background: var(--xanh-tham);
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--bo);
  padding: var(--k-4);
  text-align: center;
}
.bai-cta h3 { color: var(--trang); margin-bottom: 8px; }
.bai-cta p { margin-bottom: var(--k-3); font-size: 0.98rem; }

/* bài liên quan */
.lien-quan { border-top: 1px solid rgba(43, 43, 37, 0.1); }

/* ================================================================
   Sản phẩm — gian hàng
   ================================================================ */
.sp-loc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--k-4);
}
.sp-loc button {
  min-height: 44px;
  padding: 9px 18px;
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.18);
  border-radius: 40px;
  font-family: var(--f-than);
  font-size: 0.94rem;
  color: var(--muc-2);
  cursor: pointer;
  transition: border-color var(--nhanh), background var(--nhanh), color var(--nhanh);
}
.sp-loc button[aria-pressed="true"] {
  background: var(--xanh);
  border-color: var(--xanh);
  color: var(--trang);
}

.gh-luoi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--k-3);
}
.gh {
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.08);
  border-radius: var(--bo);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--nhanh), box-shadow var(--nhanh);
}
.gh:hover { transform: translateY(-4px); box-shadow: var(--do-bong); }
.gh-anh {
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, var(--kem) 0%, var(--kem-2) 60%, var(--kem-3) 100%);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.gh-anh img { width: 100%; height: 100%; object-fit: cover; }
.gh-anh svg { width: 56px; height: 56px; color: var(--xanh); opacity: 0.8; stroke-width: 1; }
.gh-huy {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--cam);
  color: var(--xanh-tham);
  font-family: var(--f-nhan);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
.gh-noi { padding: var(--k-3); display: flex; flex-direction: column; flex: 1; }
.gh-loai {
  font-family: var(--f-nhan);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muc-3);
  margin-bottom: 5px;
}
.gh-noi h3 { font-size: 1.08rem; margin-bottom: 6px; }
.gh-noi p { font-size: 0.88rem; color: var(--muc-2); flex: 1; margin-bottom: var(--k-2); }
.gh-day { display: flex; align-items: center; justify-content: space-between; gap: var(--k-2); margin-top: auto; }
.gh-gia { font-family: var(--f-tieu-de); font-size: 1.2rem; font-weight: 700; color: var(--xanh); }
.gh-them {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 15px;
  background: transparent;
  border: 1px solid rgba(87, 135, 54, 0.45);
  border-radius: 40px;
  color: var(--xanh);
  font-family: var(--f-nhan); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background var(--nhanh), color var(--nhanh);
}
.gh-them svg { width: 14px; height: 14px; stroke-width: 2; }
.gh-them:hover, .gh-them.da-them { background: var(--xanh); color: var(--trang); border-color: var(--xanh); }

.gh-trong { grid-column: 1 / -1; text-align: center; color: var(--muc-3); padding: var(--k-5) 0; }

@media (max-width: 1000px) {
  .bai-noi-bat { grid-template-columns: 1fr; }
  .bai-noi-bat .bnb-anh img { min-height: 220px; }
  .gh-luoi { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .gh-luoi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .gh-luoi { grid-template-columns: 1fr 1fr; gap: var(--k-2); }
  .gh-noi { padding: var(--k-2); }
  .gh-day { flex-direction: column; align-items: stretch; gap: 8px; }
  .gh-them { justify-content: center; }
}

/* ================================================================
   Đặt lịch — biểu mẫu
   ================================================================ */
.dat-luoi {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--k-6);
  align-items: start;
}
.form-dat {
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.08);
  border-radius: var(--bo);
  padding: var(--k-4);
}
.dl-nhom { margin-bottom: var(--k-3); }
.dl-nhom > label,
.dl-nhan {
  display: block;
  font-family: var(--f-nhan);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xanh-tham);
  margin-bottom: 9px;
}
.dl-nhan .sao { color: var(--cam); }

.dl-o {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid rgba(43, 43, 37, 0.22);
  border-radius: var(--bo);
  background: var(--kem);
  color: var(--muc);
  font-family: var(--f-than);
  font-size: 1rem;
}
.dl-o:focus { outline: 2px solid var(--xanh); outline-offset: 1px; border-color: var(--xanh); }
textarea.dl-o { min-height: 92px; resize: vertical; line-height: 1.6; }
select.dl-o { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f5f54' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px; }

.dl-doi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-2); }

/* chọn cơ sở bằng thẻ bấm */
.dl-cs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-2); }
.dl-cs label {
  display: block;
  padding: 15px;
  border: 1px solid rgba(43, 43, 37, 0.2);
  border-radius: var(--bo);
  background: var(--kem);
  cursor: pointer;
  transition: border-color var(--nhanh), background var(--nhanh);
}
.dl-cs input { position: absolute; opacity: 0; pointer-events: none; }
.dl-cs label:hover { border-color: var(--xanh); }
.dl-cs input:checked + b,
.dl-cs label:has(input:checked) {
  border-color: var(--xanh);
  background: rgba(87, 135, 54, 0.1);
}
.dl-cs b { display: block; font-weight: 600; color: var(--xanh-tham); font-size: 1rem; }
.dl-cs span { display: block; font-size: 0.85rem; color: var(--muc-2); margin-top: 2px; }
.dl-cs em { display: block; font-style: normal; font-size: 0.85rem; color: var(--muc-3); margin-top: 4px; }

.dl-loi { color: #b3261e; font-size: 0.88rem; margin: 6px 0 0; display: none; }
.dl-nhom.sai .dl-o { border-color: #b3261e; }
.dl-nhom.sai .dl-loi { display: block; }

.form-dat .nut { width: 100%; margin-top: var(--k-2); }
.dl-cam-ket { margin: var(--k-2) 0 0; font-size: 0.84rem; color: var(--muc-3); text-align: center; }

/* cột phải: vì sao đặt trước + thông tin */
.dat-ben {
  background: var(--xanh-tham);
  color: rgba(255, 255, 255, 0.88);
  border-radius: var(--bo);
  padding: var(--k-4);
}
.dat-ben h3 { color: var(--trang); margin-bottom: var(--k-2); }
.dat-ben .nhan { color: var(--cam); }
.dat-ds { list-style: none; margin: 0 0 var(--k-3); padding: 0; }
.dat-ds li { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; font-size: 0.98rem; }
.dat-ds svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--cam); stroke-width: 1.6; }
.dat-ben hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); margin: var(--k-3) 0; }
.dat-ben p { font-size: 0.95rem; margin: 0 0 8px; }
.dat-ben a { color: var(--trang); border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.dat-ben a:hover { border-color: var(--cam); }

/* màn cảm ơn sau khi gửi */
.dl-xong {
  display: none;
  text-align: center;
  padding: var(--k-5) var(--k-3);
}
.dl-xong.hien { display: block; }
.dl-xong .vong {
  width: 76px; height: 76px;
  margin: 0 auto var(--k-3);
  border-radius: 50%;
  background: rgba(87, 135, 54, 0.14);
  display: grid; place-items: center;
  color: var(--xanh);
}
.dl-xong .vong svg { width: 38px; height: 38px; stroke-width: 2; }
.dl-tom {
  max-width: 420px;
  margin: var(--k-3) auto 0;
  text-align: left;
  background: var(--kem);
  border: 1px solid rgba(43, 43, 37, 0.1);
  border-radius: var(--bo);
  padding: var(--k-3);
}
.dl-tom-hang { display: flex; justify-content: space-between; gap: var(--k-2); padding: 6px 0; font-size: 0.96rem; }
.dl-tom-hang span:first-child { color: var(--muc-3); }
.dl-tom-hang span:last-child { font-weight: 500; text-align: right; }

/* ================================================================
   Liên hệ
   ================================================================ */
.lh-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-4); }
.lh-cs {
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.08);
  border-radius: var(--bo);
  overflow: hidden;
}
.lh-cs .cs-ban-do { aspect-ratio: 16 / 10; background: var(--kem-3); }
.lh-cs .cs-ban-do iframe { width: 100%; height: 100%; border: 0; display: block; }
.lh-cs-noi { padding: var(--k-4); }
.lh-cs-noi h3 { margin-bottom: 12px; }
.lh-dong {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 0;
  color: var(--muc-2);
  font-size: 0.98rem;
}
.lh-dong svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--xanh); stroke-width: 1.5; }
.lh-dong a { color: var(--muc-2); border-bottom: 1px solid rgba(87, 135, 54, 0.3); }
.lh-dong a:hover { color: var(--xanh); border-color: var(--xanh); }
.lh-cs-nut { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--k-3); }
.lh-cs-nut .nut { padding: 11px 20px; min-height: 46px; font-size: 0.72rem; }

.lh-kenh-luoi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--k-2);
  margin-top: var(--k-4);
}
.lh-kenh-o {
  display: flex; align-items: center; gap: 12px;
  padding: 15px;
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.08);
  border-radius: var(--bo);
  transition: border-color var(--nhanh), transform var(--nhanh);
}
.lh-kenh-o:hover { border-color: rgba(87, 135, 54, 0.4); transform: translateY(-2px); }
.lh-kenh-o b { display: block; font-size: 0.98rem; font-weight: 500; color: var(--muc); }
.lh-kenh-o span { font-size: 0.82rem; color: var(--muc-3); }

@media (max-width: 1000px) {
  .dat-luoi { grid-template-columns: 1fr; gap: var(--k-4); }
  .lh-luoi { grid-template-columns: 1fr; }
  .lh-kenh-luoi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dl-doi { grid-template-columns: 1fr; }
  .dl-cs { grid-template-columns: 1fr; }
  .lh-kenh-luoi { grid-template-columns: 1fr; }
}

/* ================================================================
   Mua online — nút thêm vào giỏ trên từng dịch vụ
   ================================================================ */
.bang-dv-hang { grid-template-columns: 1fr auto auto; }
.bang-dv-mua {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 15px;
  margin-left: var(--k-2);
  background: transparent;
  border: 1px solid rgba(87, 135, 54, 0.45);
  border-radius: 40px;
  color: var(--xanh);
  font-family: var(--f-nhan);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--nhanh), color var(--nhanh), border-color var(--nhanh);
}
.bang-dv-mua svg { width: 15px; height: 15px; stroke-width: 2; }
.bang-dv-mua:hover { background: var(--xanh); color: var(--trang); border-color: var(--xanh); }
.bang-dv-mua.da-them { background: var(--xanh); color: var(--trang); border-color: var(--xanh); }

/* chọn thời lượng khi dịch vụ có 2 mức */
.bang-dv-chon {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.bang-dv-chon button {
  /* 44px là sàn chạm — trước để 34px, ngón tay bấm trượt sang nút bên cạnh.
     Đây là nút chọn thời lượng (70/100 phút) ngay trong bảng giá, bấm trượt là
     khách chọn nhầm gói. Giữ nhìn vẫn thanh bằng cách nới padding dọc. */
  min-height: 44px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(43, 43, 37, 0.22);
  border-radius: 40px;
  font-family: var(--f-than);
  font-size: 0.82rem;
  color: var(--muc-2);
  cursor: pointer;
  transition: border-color var(--nhanh), background var(--nhanh), color var(--nhanh);
}
.bang-dv-chon button[aria-pressed="true"] {
  border-color: var(--xanh);
  background: rgba(87, 135, 54, 0.1);
  color: var(--xanh-tham);
  font-weight: 600;
}

/* ---------- giỏ hàng nổi ---------- */
.gio-nut {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 100;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 22px;
  background: var(--xanh-tham);
  color: var(--trang);
  border: 0;
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(46, 84, 45, 0.4);
  font-family: var(--f-nhan);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.gio-nut.hien { display: inline-flex; }
.gio-nut svg { width: 20px; height: 20px; flex: none; }
.gio-dem {
  background: var(--cam);
  color: #3a2a00;
  border-radius: 40px;
  min-width: 22px;
  padding: 1px 7px;
  font-size: 0.76rem;
  font-weight: 700;
}

/* ---------- bảng giỏ hàng ---------- */
.gio-nen {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 18, 0.55);
  backdrop-filter: blur(3px);
  z-index: 110;
  display: none;
}
.gio-nen.hien { display: block; }
.gio-bang {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  background: var(--kem);
  z-index: 111;
  display: none;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
}
.gio-bang.hien { display: flex; }
.gio-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-2);
  padding: var(--k-3);
  border-bottom: 1px solid rgba(43, 43, 37, 0.12);
  background: var(--trang);
}
.gio-dau h2 { font-size: 1.3rem; }
.gio-dong {
  width: 44px; height: 44px;
  background: transparent; border: 0;
  font-size: 1.7rem; line-height: 1;
  color: var(--muc-2); cursor: pointer;
}
.gio-than { flex: 1; overflow-y: auto; padding: var(--k-3); }
.gio-trong { text-align: center; color: var(--muc-3); padding: var(--k-5) 0; }

.gio-mon {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--k-2);
  padding: 14px 0;
  border-bottom: 1px solid rgba(43, 43, 37, 0.1);
}
.gio-mon b { font-weight: 500; font-size: 1rem; }
.gio-mon small { display: block; color: var(--muc-3); font-size: 0.83rem; }
.gio-gia { font-family: var(--f-tieu-de); font-weight: 700; color: var(--xanh); white-space: nowrap; }
.gio-sl { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.gio-sl button {
  /* Nút cộng/trừ số lượng trong giỏ — trước 30px, nhỏ hơn cả đầu ngón tay. */
  width: 44px; height: 44px;
  border: 1px solid rgba(43, 43, 37, 0.24);
  background: var(--trang);
  border-radius: 50%;
  font-size: 1rem; line-height: 1;
  color: var(--muc); cursor: pointer;
}
.gio-sl span { min-width: 22px; text-align: center; font-weight: 600; }
.gio-bo {
  background: none; border: 0; padding: 0;
  color: var(--muc-3); font-size: 0.83rem;
  text-decoration: underline; cursor: pointer;
  margin-left: auto;
}
.gio-bo:hover { color: #a33; }

/* ---------- mã giảm giá ---------- */
.ma-khoi {
  margin-top: var(--k-3);
  padding: var(--k-3);
  background: var(--trang);
  border: 1px dashed rgba(87, 135, 54, 0.45);
  border-radius: var(--bo);
}
.ma-khoi > p {
  font-family: var(--f-nhan);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muc-3);
  margin-bottom: 10px;
}
.ma-hang { display: flex; gap: 8px; }
.ma-hang input {
  flex: 1;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(43, 43, 37, 0.24);
  border-radius: var(--bo);
  font-family: var(--f-than);
  font-size: 1rem;
  text-transform: uppercase;
  background: var(--kem);
  color: var(--muc);
}
.ma-hang input:focus { outline: 2px solid var(--xanh); outline-offset: 1px; border-color: var(--xanh); }
.ma-hang .nut { min-height: 46px; padding: 10px 20px; }
.ma-bao { margin: 10px 0 0; font-size: 0.9rem; }
.ma-bao.duoc { color: var(--xanh); font-weight: 500; }

/* Tên + số điện thoại trong giỏ — thêm 03/08/2026.
   Không có hai ô này thì đơn mua về tới lễ tân mà không gọi lại được cho khách. */
.gio-lien-he { display: grid; gap: 10px; }
.gio-lien-he > p { margin-bottom: 0; }
.gio-o-nhom { display: flex; flex-direction: column; }
.gio-o-nhom input {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(43, 43, 37, 0.24);
  border-radius: var(--bo);
  font-family: var(--f-than);
  font-size: 1rem;
  background: var(--kem);
  color: var(--muc);
}
.gio-o-nhom input:focus { outline: 2px solid var(--xanh); outline-offset: 1px; border-color: var(--xanh); }
.gio-loi { display: none; margin-top: 5px; font-size: 0.82rem; color: #b3261e; }
.gio-o-nhom.sai input { border-color: #b3261e; }
.gio-o-nhom.sai .gio-loi { display: block; }
.ma-bao.khong { color: #b3261e; }
.ma-goi-y {
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--muc-2);
  line-height: 1.55;
}
.ma-goi-y code {
  background: var(--kem-2);
  border: 1px solid rgba(87, 135, 54, 0.3);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: var(--f-nhan);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--xanh-tham);
  cursor: pointer;
}
.ma-goi-y code:hover { background: rgba(87, 135, 54, 0.16); }

/* ---------- tổng tiền + đặt ---------- */
.gio-day {
  padding: var(--k-3);
  border-top: 1px solid rgba(43, 43, 37, 0.12);
  background: var(--trang);
}
.gio-dong-tien {
  display: flex;
  justify-content: space-between;
  gap: var(--k-2);
  padding: 4px 0;
  font-size: 0.96rem;
  color: var(--muc-2);
}
.gio-dong-tien.tong {
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid rgba(43, 43, 37, 0.14);
  font-size: 1.2rem;
  color: var(--muc);
}
.gio-dong-tien.tong b { font-family: var(--f-tieu-de); font-weight: 700; color: var(--xanh); }
.gio-dong-tien.giam { color: var(--xanh); font-weight: 500; }
.gio-day .nut { width: 100%; margin-top: var(--k-2); }
.gio-ghi-chu { margin: 10px 0 0; font-size: 0.82rem; color: var(--muc-3); text-align: center; }

@media (max-width: 720px) {
  .bang-dv-hang { grid-template-columns: 1fr auto; }
  .bang-dv-mua { grid-column: 1 / -1; margin-left: 0; margin-top: 10px; align-self: start; }
  .gio-nut { right: 14px; bottom: 82px; }
}

/* ================================================================
   Ưu đãi
   ================================================================ */
.uu-dai {
  background: var(--xanh-tham);
  color: var(--trang);
  border-radius: var(--bo);
  padding: var(--k-5);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--k-5);
  align-items: center;
  position: relative;
}
/* Ảnh minh hoạ bên phải, thay cho vòng tròn trang trí cũ vì vòng tròn cắt ngang chữ */
.ud-anh { position: relative; }
.ud-anh img {
  width: 100%;
  border-radius: var(--bo);
  display: block;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.ud-huy {
  position: absolute;
  left: -18px; bottom: -18px;
  background: var(--kem);
  color: var(--xanh-tham);
  border: 2px solid var(--cam);
  border-radius: 50%;
  width: 108px; height: 108px;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
.ud-huy b {
  display: block;
  font-family: var(--f-tieu-de);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--xanh-tham);
}
.ud-huy > span {
  display: block;
  font-family: var(--f-nhan);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muc-2);
  margin-bottom: 2px;
}
.uu-dai h2 { color: var(--trang); margin-bottom: var(--k-2); }
.uu-dai .nhan { color: var(--cam); }
.ud-so {
  font-family: var(--f-tieu-de);
  font-size: clamp(3.6rem, 9vw, 6rem);
  font-weight: 600;
  line-height: 0.94;
  color: var(--cam);
}
.ud-so small {
  display: block;
  font-size: 1rem;
  font-family: var(--f-than);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 18px;
}
.ud-ds { list-style: none; margin: 0 0 var(--k-3); padding: 0; }
.ud-ds li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0;
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
}
.ud-ds svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--cam); stroke-width: 2; }
.ud-dk { margin: var(--k-3) 0 0; font-size: 0.84rem; color: rgba(255, 255, 255, 0.72); }
.ud-so.nho { font-size: clamp(3rem, 7vw, 4.6rem); }

/* ---------- thẻ ưu đãi trên trang Ưu đãi ---------- */
.ud-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k-3); margin-top: var(--k-5); }
.ud-the {
  background: var(--trang);
  border: 1px solid rgba(43, 43, 37, 0.08);
  border-radius: var(--bo);
  padding: var(--k-4);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.ud-the.noi-bat { border-color: var(--cam); }
.ud-the.noi-bat::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--cam);
}
.ud-moc {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  font-family: var(--f-nhan);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xanh-tham);
  background: var(--kem);
  border: 1px solid rgba(87, 135, 54, 0.3);
  border-radius: 40px;
  padding: 5px 14px;
  margin-bottom: var(--k-3);
}
.ud-the.noi-bat .ud-moc { border-color: var(--cam); }
.ud-the h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 10px; }
.ud-the > p { color: var(--muc-2); font-size: 0.98rem; }
.ud-the .nut { align-self: flex-start; margin-top: auto; }
.ud-ap-dung { list-style: none; margin: var(--k-2) 0 var(--k-3); padding: 0; }
.ud-ap-dung li {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 6px 0; font-size: 0.96rem; color: var(--muc-2);
}
.ud-ap-dung svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--xanh); stroke-width: 2; }

.dieu-khoan { list-style: none; margin: var(--k-3) 0 0; padding: 0; max-width: 760px; }
.dieu-khoan li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 0.95rem;
  color: var(--muc-2);
  border-bottom: 1px solid rgba(43, 43, 37, 0.08);
}
.dieu-khoan li::before {
  content: "";
  position: absolute; left: 4px; top: 19px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--xanh); opacity: 0.6;
}

/* ================================================================
   Bảng giá
   ================================================================ */
.gia-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--k-6); margin-top: var(--k-4); }
.gia-hang {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--k-2);
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px dashed rgba(43,43,37,0.16);
}
.gia-ten { font-weight: 500; color: var(--muc); }
.gia-ten small { display: block; font-weight: 400; font-size: 0.83rem; color: var(--muc-3); letter-spacing: 0.02em; }
.gia-so {
  font-family: var(--f-tieu-de);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--xanh);
  white-space: nowrap;
}
.gia-ghi-chu { margin-top: var(--k-4); font-size: 0.88rem; color: var(--muc-3); }

/* ================================================================
   Đánh giá
   ================================================================ */
.dg-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-3); margin-top: var(--k-5); }
.dg {
  background: var(--trang);
  border: 1px solid rgba(43,43,37,0.07);
  border-radius: var(--bo);
  padding: var(--k-4) var(--k-3);
}
.dg-sao { color: var(--cam); letter-spacing: 3px; font-size: 1.05rem; margin-bottom: var(--k-2); }
.dg blockquote {
  margin: 0 0 var(--k-3);
  font-family: var(--f-tieu-de);
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--muc);
}
.dg cite { font-style: normal; font-size: 0.88rem; color: var(--muc-3); }

.huy-hieu { display: flex; flex-wrap: wrap; gap: var(--k-3); justify-content: center; margin-top: var(--k-5); }
.hh {
  display: flex; align-items: center; gap: 12px;
  background: var(--trang);
  border: 1px solid rgba(43,43,37,0.09);
  border-radius: var(--bo);
  padding: 14px 22px;
}
.hh svg { width: 26px; height: 26px; color: var(--xanh); stroke-width: 1.4; flex: none; }
.hh b { display: block; font-size: 0.95rem; color: var(--xanh-tham); }
.hh span { font-size: 0.8rem; color: var(--muc-3); }

/* ================================================================
   Cơ sở
   ================================================================ */
.cs-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-4); margin-top: var(--k-5); }
.cs {
  background: var(--trang);
  border: 1px solid rgba(43,43,37,0.08);
  border-radius: var(--bo);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cs-ban-do { aspect-ratio: 16 / 9; background: var(--kem-3); }
.cs-ban-do iframe { width: 100%; height: 100%; border: 0; display: block; }
.cs-noi { padding: var(--k-4) var(--k-3) var(--k-3); flex: 1; display: flex; flex-direction: column; }
.cs-noi h3 { margin-bottom: 6px; }
.cs-dc { color: var(--muc-2); font-size: 0.98rem; margin-bottom: var(--k-3); }
/* Địa chỉ bấm được — mở thẳng Google Maps */
.dc-lien-ket {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muc-2);
  border-bottom: 1px solid rgba(87, 135, 54, 0.35);
  padding-bottom: 1px;
  transition: color var(--nhanh), border-color var(--nhanh);
}
.dc-lien-ket:hover { color: var(--xanh); border-color: var(--xanh); }
.dc-lien-ket svg { width: 17px; height: 17px; flex: none; margin-top: 4px; stroke-width: 1.5; color: var(--xanh); }
.chan a[data-ban-do] { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.chan a[data-ban-do]:hover { border-color: var(--cam); }
.cs-nut { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.cs-nut .nut { padding: 11px 20px; min-height: 46px; font-size: 0.72rem; }

/* ================================================================
   Chân trang
   ================================================================ */
/* Chừa chỗ dưới cùng để nút liên hệ nổi không đè lên dòng chữ cuối */
.chan { background: var(--xanh-tham); color: rgba(255,255,255,0.72); padding: var(--k-6) 0 100px; }
.chan-luoi { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--k-4); }
.chan h4 {
  font-family: var(--f-nhan);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cam);
  margin-bottom: var(--k-2);
}
.chan img { height: 54px; width: auto; margin-bottom: var(--k-2); }
.chan ul { list-style: none; margin: 0; padding: 0; }
.chan li { padding: 5px 0; }
.chan a:hover { color: var(--trang); }
.chan-mxh { display: flex; gap: 10px; margin-top: var(--k-2); }
.chan-mxh a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--bo);
  transition: background var(--nhanh), border-color var(--nhanh);
}
.chan-mxh a:hover { background: var(--xanh); border-color: var(--xanh); }
.chan-mxh svg { width: 19px; height: 19px; }
.chan-day {
  margin-top: var(--k-5);
  padding-top: var(--k-3);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between; gap: var(--k-2); flex-wrap: wrap;
  font-size: 0.85rem;
}

/* ================================================================
   Nút liên hệ nổi — 7 kênh
   ================================================================ */
.lh-boc { position: fixed; right: 20px; bottom: 20px; z-index: 100; }
.lh-nut {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px;
  padding: 14px 24px;
  background: var(--xanh);
  color: var(--trang);
  border: 0;
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(46, 84, 45, 0.35);
  font-family: var(--f-nhan);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--nhanh), transform var(--nhanh);
}
.lh-nut:hover { background: var(--xanh-tham); transform: translateY(-2px); }
.lh-nut svg { width: 21px; height: 21px; flex: none; }

.lh-bang {
  position: absolute;
  right: 0; bottom: calc(100% + 12px);
  /* Bảng chọn kênh liên hệ nổi lên từ nút góc phải. 300px cứng sẽ tràn ra
     ngoài mép trên máy 320px; kẹp lại theo bề rộng màn hình. */
  width: min(300px, calc(100vw - 32px));
  background: var(--trang);
  border-radius: 10px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.22);
  padding: var(--k-2);
  display: none;
}
.lh-bang.hien { display: block; }
.lh-bang > p {
  margin: 4px 6px var(--k-2);
  font-family: var(--f-nhan);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muc-3);
}
.lh-kenh {
  display: flex; align-items: center; gap: 13px;
  min-height: 52px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--muc);
  transition: background var(--nhanh);
}
.lh-kenh:hover { background: var(--kem); }
.lh-icon {
  width: 36px; height: 36px; flex: none;
  border-radius: 8px;
  display: grid; place-items: center;
  color: #fff;
}
.lh-icon svg { width: 20px; height: 20px; }
.lh-kenh b { display: block; font-size: 0.96rem; font-weight: 500; }
.lh-kenh span { font-size: 0.79rem; color: var(--muc-3); }

.i-zalo { background: #0068ff; }
.i-mess { background: #0084ff; }
.i-whatsapp { background: #25d366; }
.i-line { background: #06c755; }
.i-kakao { background: #fee500; color: #191600; }
.i-wechat { background: #07c160; }
.i-goi { background: var(--xanh); }

/* ================================================================
   Điện thoại & máy tính bảng
   ================================================================ */
/* Menu ngang 7 mục chỉ vừa từ ~1040px trở lên — hẹp hơn thì thu vào nút ba gạch.
   Nút đổi ngôn ngữ và nút Đặt lịch KHÔNG bị thu vào, luôn nhìn thấy. */
@media (max-width: 1040px) {
  /* Menu mobile là panel CỐ ĐỊNH tự cuộn bên trong (top do JS đặt = đáy header),
     kèm khoá cuộn nền — tránh hai vùng cuộn đánh nhau gây "đơ" khi kéo. */
  .dt-menu {
    position: fixed;
    top: 71px; left: 0; right: 0; bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    background: var(--kem);
    border-top: 1px solid rgba(43, 43, 37, 0.1);
    padding: var(--k-2) var(--k-3) var(--k-6);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 88;
    display: none;
  }
  .dt-menu.hien { display: flex; }
  /* Header có backdrop-filter sẽ trở thành "khung chứa" của menu fixed, nhốt menu
     trong chiều cao header. Tắt filter khi menu mở để menu phủ đúng cả màn hình. */
  .dau-trang.menu-mo,
  .dau-trang.trong-suot.menu-mo { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Khi menu mở, ẩn dãy cờ để header về đúng một hàng — menu (top:71) khớp ngay dưới
     hàng logo, không bị cờ nổi đè lên. Đóng menu là cờ hiện lại. */
  .dau-trang.menu-mo .nn { display: none; }
  .dt-lien-ket {
    padding: 15px 0;
    border-bottom: 1px solid rgba(43, 43, 37, 0.08);
    font-size: 1.06rem;
    color: var(--muc);
  }
  .dt-lien-ket::after { display: none; }
  .dt-hamburger { display: block; }
  .dt-phai { margin-left: auto; }

  /* Danh sách con mở kiểu xếp gấp, không nổi đè lên trang */
  .dt-nhom { position: static; }
  .dt-nhom > .dt-lien-ket { width: 100%; justify-content: space-between; padding: 15px 0; }
  .dt-con {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: rgba(87, 135, 54, 0.06);
    border-radius: var(--bo);
    margin: 0 0 10px;
    padding: 4px;
  }
  .dt-con a { font-size: 0.96rem; }
}

@media (max-width: 1000px) {
  .doi { grid-template-columns: 1fr; gap: var(--k-4); }
  .doi-anh::before { display: none; }
  .tc-luoi { grid-template-columns: repeat(2, 1fr); gap: var(--k-3) var(--k-2); }
  .buoc-luoi { grid-template-columns: repeat(3, 1fr); gap: var(--k-4) var(--k-2); }
  .dv-luoi, .dg-luoi, .bai-luoi { grid-template-columns: repeat(2, 1fr); }
  .sp-luoi { grid-template-columns: repeat(2, 1fr); }
  .nhom-trong { grid-template-columns: 1fr; gap: var(--k-3); }
  .ud-luoi { grid-template-columns: 1fr; }
  .nhom-dao .nhom-anh { order: 0; }
  .dinh { padding: var(--k-5) 0; }
  .uu-dai { grid-template-columns: 1fr; gap: var(--k-4); padding: var(--k-4); }
  .ud-huy { left: auto; right: 12px; bottom: -14px; width: 92px; height: 92px; }
  .ud-huy b { font-size: 1.55rem; }
  .gia-luoi { grid-template-columns: 1fr; gap: 0; }
  .cs-luoi { grid-template-columns: 1fr; }
  .chan-luoi { grid-template-columns: 1fr 1fr; gap: var(--k-4) var(--k-3); }
}

@media (max-width: 720px) {
  :root { --k-5: 48px; --k-6: 64px; --k-7: 80px; }
  body { font-size: 16px; }

  .dt-phai { gap: 8px; }
  .dt-phai .nut-dat-lich { display: none; }
  .dt-logo img { height: 38px; }
  .dt-trong { padding: 12px var(--k-3); gap: var(--k-2); }
  /* Dãy cờ KHÔNG bao giờ bị giấu vào menu — khách nước ngoài phải thấy ngay */
  .nn { gap: 2px; }
  .nn-co { width: 40px; }
  .nn-co .co { width: 26px; height: 17.5px; }

  /* Thanh mời đổi ngôn ngữ — thu gọn trên điện thoại. Bản cũ chiếm gần hai
     dòng ngay đỉnh màn hình, ăn mất chỗ đắt nhất của trang. */
  .moi-ngon-ngu { padding: 8px var(--k-2); }
  .moi-ngon-ngu > div { flex-wrap: nowrap; gap: 10px; justify-content: space-between; }
  .moi-ngon-ngu p { font-size: .88rem; text-align: left; }
  /* ⚠️ 44px là SÀN, không được hạ. Bản thu gọn đầu tiên để 36px cho đỡ chiếm
     chỗ — dưới mức chạm tối thiểu, ngón tay bấm trượt. Thu gọn bằng cách giảm
     padding ngang và cỡ chữ, KHÔNG giảm chiều cao. */
  .moi-ngon-ngu .nut { min-height: 44px; padding: 8px 14px; font-size: .68rem; white-space: nowrap; }

  /* Điện thoại — màn hình đầu tiên phải bán được hàng, không phải chỉ có ảnh.
     Sửa 09/08/2026 sau khi CEO soi trên máy thật: hero cũ cao 92svh, chữ căn
     giữa nên tiêu đề và nút đặt lịch bị đẩy xuống dưới mép màn. Hạ chiều cao,
     đẩy chữ lên trên, và phủ thêm một lớp tối dọc cho chữ nổi hẳn. */
  .hero {
    margin-top: -71px; padding-top: 71px;
    min-height: 520px; min-height: 76svh;
    align-items: flex-start;
  }
  /* Lớp phủ dọc riêng cho điện thoại: gradient ngang của bản máy tính để lộ
     phần trên bên phải, đúng chỗ chữ nằm khi màn hẹp. */
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(24, 40, 20, 0.86) 0%,
        rgba(24, 40, 20, 0.72) 46%,
        rgba(24, 40, 20, 0.46) 78%,
        rgba(24, 40, 20, 0.58) 100%);
  }
  .hero h1 { font-size: clamp(1.6rem, 7.4vw, 2.1rem); }
  .hero-y { font-size: 1rem; margin-bottom: var(--k-3); }
  .hero-trong { padding: var(--k-5) 0; }
  .hero-nut { flex-direction: column; align-items: stretch; }
  .hero-nut .nut { width: 100%; }
  .hero-cuon { display: none; }

  .tc-luoi { grid-template-columns: 1fr; }
  .buoc-luoi { grid-template-columns: repeat(2, 1fr); }
  .dv-luoi, .dg-luoi, .bai-luoi { grid-template-columns: 1fr; }
  .sp-luoi { grid-template-columns: repeat(2, 1fr); gap: var(--k-2); }
  .sp { padding: var(--k-3) var(--k-2); }
  .chan-luoi { grid-template-columns: 1fr; }
  .chan-day { flex-direction: column; }

  .lh-boc { right: 14px; bottom: 14px; }
  .lh-nut { padding: 14px 20px; }
  .lh-nut .lh-chu { display: none; }
  .lh-nut { border-radius: 50%; width: 58px; height: 58px; padding: 0; justify-content: center; }
  .lh-bang { width: calc(100vw - 28px); right: 0; }
}

/* Máy hẹp: dãy cờ xuống hàng riêng bên dưới, giữ đủ 5 cờ chứ không cắt bớt */
@media (max-width: 560px) {
  .dt-trong { flex-wrap: wrap; row-gap: 0; }
  .nn {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 6px 0;
    border-top: 1px solid rgba(43, 43, 37, 0.1);
  }
  .dau-trang.trong-suot .nn { border-top-color: rgba(255, 255, 255, 0.28); }
  .nn-co { width: 48px; }
  .hero { margin-top: -140px; padding-top: 140px; }
}

@media (max-width: 380px) {
  .dt-logo img { height: 34px; }
  .nn-co { width: 44px; }
}

/* ===== Băng ảnh bìa luân chuyển (trang chủ) ===== */
/* ⚠️ THỨ TỰ LỚP CỦA HERO — sửa 09/08/2026, đừng đụng vào nếu chưa đọc hết.

   Lỗi đã xảy ra: băng ảnh .hero-bang thêm vào sau nhưng quên khai z-index, nên
   nó nằm ở lớp 0 và ĐÈ LÊN lớp phủ tối .hero::after (vốn ở -1). Chữ trắng nằm
   thẳng trên ảnh sáng — trên điện thoại nhìn như "một đoạn ảnh trắng trơn",
   không đọc được tiêu đề lẫn nút đặt lịch. CEO phát hiện ngay sau khi live.

   Cách chữa: cho .hero tự tạo một ngữ cảnh xếp lớp riêng (isolation: isolate)
   rồi đánh số DƯƠNG cho cả ba lớp. Cách cũ dùng số âm (-2, -1) chạy được nhưng
   mong manh: lớp âm nằm sau nền của MỌI thẻ cha, chỉ cần một thẻ cha có nền đục
   là ảnh biến mất sạch. Số dương trong ngữ cảnh riêng thì không phụ thuộc ai. */
.hero { isolation: isolate; }
.hero-bang { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero::after { z-index: 1; }
.hero > .bo-cuc { position: relative; z-index: 2; }
.hero-bang picture { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.hero-bang picture.hien { opacity: 1; }
.hero-bang img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-bang picture { transition: none; }
}

/* ===== Bảng combo có neo giá gốc ===== */
.cb-luoi { display: grid; gap: 14px; margin-top: var(--k-4); }
.cb-hang {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: center;
  background: #fff; border: 1px solid #e2ddcc; border-left: 4px solid var(--xanh, #578736);
  padding: 16px 18px;
}
.cb-hang.cb-noi { border-left-color: var(--cam, #F8B000); background: #fffdf6; }
.cb-ten { font-weight: 600; font-size: 1.05rem; }
.cb-ten small { display: block; font-weight: 400; font-size: .85rem; color: var(--muc-3, #6b7263); margin-top: 3px; }
.cb-gia { text-align: right; white-space: nowrap; line-height: 1.25; }
.cb-cu { display: block; text-decoration: line-through; color: #9aa094; font-size: .95rem; }
.cb-moi { font-size: 1.5rem; font-weight: 700; color: var(--xanh, #578736); font-family: var(--f-tieu, inherit); }
.cb-giam {
  display: inline-block; margin-left: 6px; background: var(--cam, #F8B000); color: #2E542D;
  font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
@media (max-width: 560px) {
  .cb-hang { grid-template-columns: 1fr; }
  .cb-gia { text-align: left; margin-top: 6px; }
  .cb-cu { display: inline; margin-right: 8px; }
}

/* ===== Tổng quan chương trình ưu đãi (đầu trang /uu-dai/) ===== */
.tq-luoi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tq-the {
  display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #e2ddcc;
  padding: 22px 20px; text-decoration: none; color: inherit; transition: border-color .18s, transform .18s;
}
.tq-the:hover, .tq-the:focus-visible { border-color: var(--xanh, #578736); transform: translateY(-2px); }
.tq-bieu { width: 34px; height: 34px; color: var(--xanh, #578736); }
.tq-ten { font-weight: 600; font-size: 1.08rem; color: var(--reu, #2E542D); }
.tq-so { font-family: var(--f-tieu, inherit); font-size: 1.35rem; font-weight: 700; color: var(--xanh, #578736); }
.tq-y { font-size: .9rem; color: var(--muc-3, #6b7263); flex: 1; }
.tq-di { font-size: .88rem; font-weight: 600; color: var(--xanh, #578736); }

/* ===== Hỏi đáp trang chủ (khối FAQ, thêm 09/08/2026) ===== */
.hd-luoi {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--k-4) var(--k-5); margin-top: var(--k-5); text-align: left;
}
.hd h3 {
  font-family: var(--f-than); font-size: 1.06rem; font-weight: 600;
  color: var(--xanh-tham); margin-bottom: var(--k-1);
}
.hd p { color: var(--muc-2); font-size: 1rem; margin: 0; }
@media (max-width: 720px) {
  .hd-luoi { grid-template-columns: 1fr; gap: var(--k-3); }
}

/* ===== Trang Menu 2026 (/menu.html, thêm 09/08/2026) ===== */
.mn-trang { padding: var(--k-5) 0 var(--k-6); background: var(--kem); }
.mn-dau { text-align: center; margin-bottom: var(--k-6); }
.mn-logo img { width: 150px; height: auto; }
.mn-dau h1 { margin: var(--k-3) 0 var(--k-2); }
.mn-dau .dan-y { max-width: 620px; margin: 0 auto var(--k-4); }
.mn-tai { display: flex; gap: var(--k-2); justify-content: center; flex-wrap: wrap; }
.mn-tai .nut small { display: block; font-size: .74rem; font-weight: 400; opacity: .75; }

.mn-phan { margin-bottom: var(--k-6); }
.mn-phan > h2 {
  font-size: 1.6rem; padding-bottom: var(--k-2); margin-bottom: var(--k-3);
  border-bottom: 2px solid var(--xanh);
}
.mn-phan h3 {
  font-family: var(--f-nhan); text-transform: uppercase; letter-spacing: .06em;
  font-size: 1rem; color: var(--xanh-tham); margin: var(--k-4) 0 var(--k-2);
}
.mn-bang { width: 100%; border-collapse: collapse; background: var(--trang); }
.mn-bang th, .mn-bang td {
  text-align: left; padding: 14px 16px; border-bottom: 1px solid rgba(43, 43, 37, .08);
  vertical-align: top; font-weight: 400;
}
.mn-bang th { width: 72%; }
.mn-bang th span, .mn-bang td span {
  display: block; font-size: .88rem; color: var(--muc-3); margin-top: 4px; font-weight: 400;
}
.mn-bang td { text-align: right; white-space: nowrap; font-weight: 600; color: var(--xanh-tham); }
.mn-bang tr:last-child th, .mn-bang tr:last-child td { border-bottom: 0; }

.mn-cs { list-style: none; padding: 0; display: grid; gap: var(--k-3); grid-template-columns: repeat(2, 1fr); }
.mn-cs li { background: var(--trang); padding: var(--k-3); }

@media (max-width: 720px) {
  .mn-bang th { width: 62%; }
  .mn-bang th, .mn-bang td { padding: 12px 10px; }
  .mn-cs { grid-template-columns: 1fr; }
}
.hero-cuon { z-index: 2; }

/* ===== Soát giao diện 09/08/2026 — vá theo bộ quy tắc UI/UX ===== */

/* Bỏ độ trễ chạm 300ms trên máy cũ (quy tắc Touch/Tap Delay).
   Chỉ áp cho thứ bấm được, không áp cho cả trang — tránh chặn nhân đôi để phóng to. */
a, button, [role="button"], input[type="submit"], .nut, label { touch-action: manipulation; }

/* Bảng menu — khung cuộn ngang phòng khi tên dịch vụ dài trên màn hẹp
   (quy tắc Responsive/Table Handling). Không có khung này, bảng đẩy cả trang
   tràn ngang — lỗi mức CAO trên điện thoại. */
.mn-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mn-cuon .mn-bang { min-width: 300px; }