/* hanh-huong/xa-hoi.css — giao diện đi cùng nhau (xa-hoi.js), nhãn tên người khác (dam-dong.js), pháp đường
   (phap-duong.js). Tiền tố .xh- để không đụng CSS của trang. Chỉ animate transform/opacity (iPhone).
   Vị trí chỉnh được từ trang qua biến: --xh-tren (mép trên, dưới thanh tiêu đề), --xh-duoi (mép dưới, chừa chỗ
   cho nút đi của trang), --xh-trai / --xh-phai. Màu lấy theo bảng chung của site (có giá trị dự phòng). */
.xh, .xh-pd, .xh-nhan {
  --xh-gold: var(--gold, #d4a857); --xh-gold-light: var(--gold-light, #f0d28e); --xh-cream: var(--cream, #faf6ec);
  --xh-text: var(--text, #e8d8c0); --xh-dim: var(--text-dim, #b8a58c); --xh-line: var(--line, rgba(212, 168, 87, 0.38));
  --xh-panel: #18110c;   /* đặc hẳn: nhãn tên người phía sau không lấm tấm xuyên qua bảng */ --xh-serif: var(--serif, "Noto Serif", Cambria, "Times New Roman", serif);
  --xh-sans: var(--sans, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.xh { --xh-tren: calc(66px + env(safe-area-inset-top)); --xh-duoi: calc(16px + env(safe-area-inset-bottom));
  --xh-trai: calc(12px + env(safe-area-inset-left)); --xh-phai: calc(12px + env(safe-area-inset-right));
  position: fixed; inset: 0; pointer-events: none; z-index: 25; font-family: var(--xh-sans); color: var(--xh-text); }
.xh > * { pointer-events: auto; }
.xh [hidden], .xh-pd[hidden], .xh-pd [hidden] { display: none !important; }
.xh-an { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── nút chung: cao ≥ 44px cho người lớn tuổi ── */
.xh-nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--xh-line); background: #1b130d; color: var(--xh-gold-light);
  font: 600 15px/1.2 var(--xh-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.xh-nut:hover { border-color: rgba(212, 168, 87, 0.75); }
.xh-nut:active { transform: scale(0.97); }
.xh-nut:focus-visible { outline: 3px solid var(--xh-gold-light); outline-offset: 2px; }
.xh-nut:disabled { opacity: .45; cursor: default; transform: none; }
.xh-nut-chinh { border: 0; color: #2a1806; background: linear-gradient(180deg, #f2d48f 0%, #d4a857 100%); box-shadow: 0 6px 18px rgba(212, 168, 87, 0.22); }
.xh-nut-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: transparent; font-size: 26px; font-weight: 400; line-height: 1; }
.xh-nut-nho { min-height: 44px; padding: 0 14px; font-size: 13.5px; border-radius: 999px; }

/* ── góc đếm người thật ── (nền đặc như --xh-panel: nhãn tên người đứng phía sau không lấm tấm xuyên qua) */
.xh-cot { position: fixed; top: var(--xh-tren); left: var(--xh-trai); display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-width: calc(100vw - 24px); pointer-events: none !important; }
.xh-cot > * { pointer-events: auto; }
.xh-goc { max-width: min(330px, calc(100vw - 24px)); display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 14px 10px 12px; border-radius: 16px; background: #1a120c; border: 1px solid var(--xh-line); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.xh-cham { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #8f8578; }
.xh-goc[data-tt="da-noi"] .xh-cham { background: #e9b85e; box-shadow: 0 0 10px rgba(233, 184, 94, 0.8); animation: xh-tho 2.6s ease-in-out infinite; }
.xh-goc[data-tt="dang-noi"] .xh-cham { background: #c9b48f; animation: xh-tho 1.2s ease-in-out infinite; }
@keyframes xh-tho { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.xh-goc-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xh-goc-chinh { font: 600 15px/1.35 var(--xh-sans); color: var(--xh-cream); }
.xh-goc-phu { font-size: 13px; line-height: 1.4; color: #d9c59d; }

/* ── hàng nút ── */
.xh-hang { display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100vw - 24px); }

/* ── dẫn đường tới người đang đi theo ── */
.xh-dan { max-width: min(380px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 12px; border-radius: 999px; background: #2f1e0f; border: 1px solid var(--xh-gold); }
.xh-dan-mui { flex: none; width: 24px; height: 24px; fill: var(--xh-gold-light); transition: transform .3s; }
.xh-dan-chu { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--xh-cream); }

/* ── bảng (thẻ người, câu chúc, quanh đây, lời mời) ── */
.xh-bang { position: fixed; z-index: 4; right: var(--xh-phai); top: var(--xh-tren); width: 360px; max-height: calc(100% - var(--xh-tren) - var(--xh-duoi));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 20px 20px; border-radius: 18px;
  background: var(--xh-panel); border: 1px solid var(--xh-line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); animation: xh-len .28s ease-out; }
@keyframes xh-len { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.xh-bang-tt, .xh-the-ten { margin: 0 44px 4px 0; font: 700 22px/1.25 var(--xh-serif); color: #fff3d2; outline: none; overflow-wrap: anywhere; }
.xh-bang-phu { margin: 4px 0 14px; font-size: 14px; line-height: 1.55; color: var(--xh-dim); }
.xh-the-ao, .xh-the-vi, .xh-the-lan, .xh-the-kc { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.xh-the-ao { color: var(--xh-dim); }
.xh-the-vi { font-family: var(--xh-serif); font-style: italic; font-size: 16px; color: var(--xh-gold-light); }
.xh-the-lan { color: var(--xh-cream); }
.xh-the-kc { color: var(--xh-dim); font-size: 14px; min-height: 1.5em; }
.xh-the-nut { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.xh-nut-an { margin-top: 10px; width: 100%; background: transparent; color: var(--xh-dim); }
.xh-chuc-ds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xh-nut-cau { min-height: 52px; padding: 6px 10px; font-family: var(--xh-serif); font-weight: 600; font-size: 15px; color: var(--xh-cream); text-align: center; white-space: normal; }
.xh-gan-ds { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.xh-nut-nguoi { width: 100%; justify-content: space-between; color: var(--xh-cream); }
.xh-gan-ten { font-family: var(--xh-serif); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xh-gan-kc { flex: none; font-weight: 500; font-size: 13px; color: var(--xh-dim); }
.xh-gan-rong { font-size: 15px; line-height: 1.55; color: var(--xh-dim); }
.xh-moi-o { width: 100%; min-height: 46px; margin: 0 0 10px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--xh-line);
  background: rgba(250, 246, 236, 0.08); color: var(--xh-cream); font: 500 14px var(--xh-sans); }
.xh-moi .xh-nut-chinh { width: 100%; }

/* ── thông báo nhẹ ── */
.xh-bao { position: fixed; left: 50%; top: calc(var(--xh-tren) + 4px); width: min(440px, calc(100vw - 24px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none !important; z-index: 3; }
.xh-bao-the { max-width: 100%; padding: 10px 16px; border-radius: 14px; background: rgba(32, 22, 14, 0.94); border: 1px solid var(--xh-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); font-size: 15px; line-height: 1.45; color: var(--xh-cream); text-align: center;
  opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; overflow-wrap: anywhere; }
.xh-bao-the.hien { opacity: 1; transform: none; }
.xh-bao-the.chao { border-color: var(--xh-gold); background: rgba(56, 36, 16, 0.95); font-family: var(--xh-serif); }
.xh-bao-the.minh { color: var(--xh-gold-light); }

/* ── nhãn tên người khác (dam-dong.js, đặt trong lớp nhãn của trang) ── */
.xh-nhan { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; transition: opacity .25s; }
.xh-nhan-in { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
.xh-nhan-ten { display: block; padding: 3px 10px 4px; border-radius: 10px; background: rgba(22, 15, 10, 0.72); border: 1px solid rgba(212, 168, 87, 0.32);
  font: 600 13px/1.3 var(--xh-serif); color: #fbeccb; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.xh-nhan.chon .xh-nhan-ten { border-color: var(--xh-gold); background: rgba(48, 30, 14, 0.92); }
.xh-nhan.theo .xh-nhan-ten { border-color: #b9d4c9; }
.xh-nhan-bong { display: none; position: relative; width: max-content; max-width: 220px; padding: 6px 12px 7px; border-radius: 14px; background: rgba(250, 246, 236, 0.96);
  color: #3a2515; font: 600 14px/1.3 var(--xh-serif); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); white-space: normal; text-align: center; }
.xh-nhan-bong::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: rgba(250, 246, 236, 0.96); }
.xh-nhan.co-bong .xh-nhan-bong { display: block; animation: xh-bong .3s ease-out; }
@keyframes xh-bong { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }

/* ── pháp đường ── */
.xh-pd { position: fixed; z-index: 32; right: calc(16px + env(safe-area-inset-right)); top: calc(70px + env(safe-area-inset-top)); width: 430px;
  max-height: calc(100% - 96px - env(safe-area-inset-top)); display: flex; flex-direction: column; padding: 18px 20px 16px; border-radius: 18px;
  background: var(--xh-panel); border: 1px solid var(--xh-line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); font-family: var(--xh-sans); color: var(--xh-text);
  animation: xh-len .3s ease-out; }
.xh-pd-dau { position: relative; }
.xh-pd-tt { margin: 0 44px 0 0; font: 600 14px/1.4 var(--xh-sans); letter-spacing: .5px; text-transform: uppercase; color: var(--xh-gold); outline: none; }
.xh-pd .xh-nut-x { top: -10px; right: -10px; }
.xh-pd-gio { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: #f1dfb8; }
.xh-pd-bai { margin: 8px 0 0; font: 700 21px/1.3 var(--xh-serif); color: #fff3d2; }
.xh-pd-nguon { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--xh-dim); }
.xh-pd-nghe { margin: 6px 0 0; font-size: 14px; color: var(--xh-cream); }
.xh-pd-hang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.xh-pd-hang .xh-nut-chinh { flex: 1 1 100%; }
.xh-pd-ghi { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--xh-dim); }
.xh-pd-doan { position: relative; flex: 1 1 auto; min-height: 120px; margin: 10px 0 0; padding: 4px 6px 4px 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; counter-reset: none; }
.xh-pd-li { margin: 0 0 6px; padding: 9px 12px; border-radius: 12px; font: 400 16px/1.7 var(--xh-serif); color: rgba(232, 216, 192, 0.62); border: 1px solid transparent; transition: opacity .3s; }
.xh-pd-li.dang { color: #fff3d2; background: rgba(212, 168, 87, 0.1); border-color: rgba(212, 168, 87, 0.32); }

/* màn hẹp: cột đi cùng nằm sát dưới thanh tiêu đề. Khi trang đang hiện số bậc lớn ở giữa phía trên (≈ 60–120px),
   trang gắn lớp .hh-bac lên <body> → cột xuống ngay dưới số bậc cho khỏi đè (không bao giờ trôi xuống giữa màn hình). */
@media (max-width: 900px) {
  .xh { --xh-tren: calc(58px + env(safe-area-inset-top)); }
  body.hh-bac .xh { --xh-tren: calc(124px + env(safe-area-inset-top)); }
}
@media (max-width: 720px) {
  .xh { --xh-duoi: calc(96px + env(safe-area-inset-bottom)); }
  .xh-bang { left: var(--xh-trai); right: var(--xh-phai); top: auto; bottom: var(--xh-duoi); width: auto; max-height: 62%; padding: 16px 16px 16px; border-radius: 20px; }
  /* pháp đường chiếm nửa dưới: phía trên vẫn thấy chánh điện; chừa hàng nút đáy (≈ 70px) cho nút "Đứng dậy" của trang */
  .xh-pd { left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); top: auto; bottom: calc(72px + env(safe-area-inset-bottom));
    width: auto; max-height: 48%; padding: 14px 16px 12px; border-radius: 20px; }
  .xh-pd-doan { min-height: 90px; }
  .xh-pd-bai { font-size: 19px; }
  .xh-pd-li { font-size: 16px; padding: 8px 10px; }
  /* góc đếm thu gọn: chữ nhỏ, đệm mỏng */
  .xh-cot { gap: 6px; }
  .xh-goc { max-width: calc(100vw - 24px); padding: 6px 11px 7px 10px; gap: 8px; border-radius: 14px; }
  .xh-cham { width: 8px; height: 8px; margin-top: 5px; }
  .xh-goc-chinh { font-size: 13.5px; line-height: 1.3; }
  .xh-goc-phu { font-size: 12px; line-height: 1.3; }
  .xh-hang { gap: 6px; }
  .xh-hang .xh-nut { padding: 0 12px; font-size: 14px; }
  .xh-nhan-ten { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .xh *, .xh-pd, .xh-nhan, .xh-nhan * { animation: none !important; transition: none !important; }
}