/* Nút liên hệ, nút chat nổi, khung tour, dòng Facebook — xem
   templates/_lien_he.html. Dùng chung cho mọi trang nên không dựa vào biến CSS
   của trang nào (mỗi biến có giá trị dự phòng). */

/* ---------- Nút Messenger / WhatsApp (dạng viên thuốc) ---------- */
.lh-hang{display:inline-flex;flex-wrap:wrap;gap:8px}
/* Hàng nút ở giữa khối "Need help planning?": xuống dòng gọn, căn giữa khi hẹp */
.lh-hang-giua{display:flex;justify-content:center;margin-top:1rem}
/* Trong thẻ gói dịch vụ (dich_vu_o.html): hàng nút nằm dưới nút đặt lịch, cách ra một chút */
.dv-chi-tiet .lh-hang{display:flex;margin-top:10px}
.lh-nut-the{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:#fff;color:var(--ink,var(--mt-text));
  border:1px solid rgba(14,42,37,.2);
  font:inherit;font-size:.85rem;font-weight:700;line-height:1.2;text-decoration:none;
}
.lh-nut-the:hover{background:var(--mt-surface);text-decoration:none}
.lh-nut-the:focus-visible,.lh-noi-nut:focus-visible,.lh-tour-nut:focus-visible,.lh-dong:focus-visible{
  outline:3px solid var(--accent,var(--mt-primary));outline-offset:2px}
.lh-mess svg{color:#0866FF}
.lh-wa svg{color:#128C7E}

/* ---------- Nút chat nổi ---------- */
/* --lh-nang do lien-he.js đặt khi trang có thanh cố định sát đáy (data-lh-tranh). */
.lh-noi{
  position:fixed;right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--lh-nang,0px));
  z-index:35;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.lh-menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.lh-menu[hidden]{display:none}
.lh-menu .lh-nut-the{box-shadow:0 6px 18px rgba(14,42,37,.22);padding:10px 15px;font-size:.9rem}
.lh-noi-nut{
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:var(--brand,var(--mt-primary));color:#fff;
  box-shadow:0 6px 18px rgba(14,42,37,.3);
}
.lh-noi-nut:hover{background:var(--brand-dark,var(--mt-primary-hover))}
@media (max-width:600px){
  /* Điện thoại: nút nhỏ hơn và sát mép hơn để ít che nội dung */
  .lh-noi{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--lh-nang,0px))}
  .lh-noi-nut{width:46px;height:46px}
}

/* ---------- Find a tour ---------- */
/* display:contents: nút Find a tour là một phần tử của hàng .hang-nut cùng Map/Messenger/WhatsApp */
.lh-tour{display:contents}
.lh-tour-nut{
  display:inline-flex;align-items:center;gap:10px;
  padding:.5rem 1rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--accent,var(--mt-primary));color:var(--mt-on-primary);
  font:inherit;font-weight:700;font-size:.9rem;
}
.lh-sap{
  font-size:.7rem;font-weight:700;letter-spacing:.02em;
  background:var(--brand,var(--mt-primary));color:#fff;border-radius:999px;padding:.15rem .55rem;
}
.lh-hop{
  /* margin:auto giữ khung ở giữa màn hình — trang nào reset *{margin:0} sẽ làm khung dạt lên góc */
  margin:auto;width:min(92vw,26rem);border:0;border-radius:16px;padding:1.4rem 1.4rem 1.2rem;
  color:var(--ink,var(--mt-text));background:#fff;box-shadow:0 20px 50px rgba(14,42,37,.35);
}
.lh-hop::backdrop{background:rgba(14,42,37,.55)}
.lh-hop h2{font-family:var(--font-heading,'Playfair Display',Georgia,serif);font-size:1.2rem;font-weight:600;letter-spacing:-.01em}
.lh-hop p{margin-top:.6rem;line-height:1.55;font-size:.95rem;color:rgba(14,42,37,.75)}
.lh-hop-nut{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:1.1rem}
.lh-dong{
  font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
  background:none;border:0;color:var(--brand,var(--mt-primary));padding:.5rem .6rem;
}


@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.lh-noi,.lh-tour,.lh-hang{display:none!important}}