/* ============================================================
   IIGO.VN — Trang chi tiết ĐỊA ĐIỂM CỘNG ĐỒNG
   Phương án A: Thông tin nhanh + cột Ghé thăm

   CHỈ PHẦN RUỘT — từ gallery (khối 2) tới dòng mời đối tác (khối 12).
   Không có header, menu mobile, back-to-top: những cái đó theme đã có.
   Nạp SAU vuta.libs.css. Layout, tab, accordion, bảng do vuta.libs lo;
   file này chỉ lo token, dáng và các khối riêng của trang.

   Bảng màu ở :root bên dưới có ba token mới (--primary-strong, --primary-ink,
   --text-3). Nếu theme đã khai các token khác trùng tên thì chỉ lấy ba dòng đó.
   ============================================================ */

/* Token giới hạn trong trang chi tiết (bản gốc khai ở :root). */
.place-detail, .lightbox {
  --main-color: #c69863;
  --primary: var(--main-color);
  /* Nền nút và tab đặc: cùng gốc vàng của brand nhưng đủ tối cho chữ trắng 4,5:1.
     #c69863 với chữ trắng chỉ đạt 2,60:1 nên không dùng làm nền nút. */
  --primary-strong: #9a6a2e;
  --primary-hover: #845a27;
  /* Màu chữ/link gốc brand trên nền sáng */
  --primary-ink: #8a5f24;
  --primary-light: rgba(198, 152, 99, .18);
  --second: #ff6b35;
  /* Bản đậm của --second, đủ tương phản để làm CHỮ: giá tiền, ưu đãi.
     #ff6b35 trên nền trắng chỉ đạt 3,0:1 nên không dùng cho chữ. */
  --hot: #c2410c;
  --hot-bg: #fdefe8;
  --second-color: #fcfae8;
  --radius: 11px;
  --border-focus: var(--primary-strong);
  --ring-focus: rgba(154, 106, 46, .2);
  /* Nền trang ấm, card trắng nổi lên trên. Trước đây nền trắng + card trắng +
     viền #ececec nên mọi thứ dính vào nhau, nhìn nhạt nhoà. */
  --bg: #f6f2eb;
  --surface: #ffffff;
  --muted: #f3ece1;
  --border: #e6ddcf;
  --text: #1f1f1f;
  --text-2: #525252;
  /* Thay cho --third-color #ababab của theme: màu đó chỉ đạt 2,30:1 */
  --text-3: #6e6e6e;
  --ok: #146b3c; --ok-bg: #eaf6ef;
  /* Chữ trong ô KHOÁ. Phải đậm hơn --text-3: ô khoá nằm trên nền --muted (#f3ece1)
     chứ không phải nền trắng, mà --text-3 trên nền đó chỉ còn 4,35:1 — dưới ngưỡng
     AA. #666 đạt 4,89:1. Trạng thái "chưa mở" thể hiện bằng nền và nét đứt, không
     bằng cách làm chữ mờ đi cho tới mức khó đọc. */
  --text-locked: #666666;
  --warn: #9a6400; --warn-bg: #fdf4e4;
  --danger: #b3261e; --danger-bg: #fdeceb;
}

/* Reset gọn trong phạm vi trang, không đụng tới `a`, `ul`, `h2` của toàn site.
   Bọc bằng :where() để đặc hiệu vẫn bằng 0 — nếu không, `.place-detail a` (0,2,0)
   sẽ thắng `.btn--primary { color: #fff }` (0,1,0) và chữ trên nút đổi thành màu body. */
.place-detail { color: var(--text); }
:where(.place-detail) a { color: inherit; text-decoration: none; }
:where(.place-detail) :where(h1, h2, h3) { font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
:where(.place-detail) ul { margin: 0; padding: 0; list-style: none; }

/* Giữ chỗ cho icon trước khi nó được vẽ thành <svg>: không có dòng này thì cả trang
   nhảy xuống một đoạn ngay sau khi script icon chạy xong. */
.place-detail .material-symbols-outlined:not(.icon-solid), .lightbox .material-symbols-outlined:not(.icon-solid) {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; font-size: 16px; line-height: 1; vertical-align: middle; overflow: hidden;
}

/* ---------- nút, chip, badge ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text);
  font: 500 14px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn .material-symbols-outlined { font-size: 16px; width: 16px; height: 16px; }
.btn--primary { background: var(--primary-strong); border-color: var(--primary-strong); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--outline { border-color: var(--border); background: #fff; }
.btn--outline:hover { border-color: #d6d6d6; background: var(--muted); }
.btn--block { width: 100%; }
.btn--lg { height: 46px; font-size: 15px; }
.btn:focus-visible, a:focus-visible, .link:focus-visible, button:focus-visible {
  outline: 2px solid var(--border-focus); outline-offset: 2px; }
/* Chip nằm trực tiếp trên nền trang (không trong .card), nên dùng --surface
   (trắng) chứ không phải --muted: --muted (#f3ece1) gần sát màu nền trang
   (#f6f2eb), chip gần như chìm mất, chỉ còn viền 1px mảnh phân biệt được. */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 13px; font-weight: 500; }
.chip svg { width: 14px; height: 14px; }
.chip .material-symbols-outlined { font-size: 14px; width: 14px; height: 14px; }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--hot { background: var(--hot-bg); color: var(--hot); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- card chung ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  margin-bottom: 16px; }
.card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 17px; font-weight: 700; }
.card-h svg { width: 18px; height: 18px; color: var(--primary-ink); }
.card-h .material-symbols-outlined { font-size: 18px; width: 18px; height: 18px; color: var(--primary-ink); }

/* ---------- 2. gallery ---------- */
.place-gallery { margin: 16px 0 24px; }
.ph { position: relative; overflow: hidden; border-radius: 10px; background: #efece8; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-main .ph { height: 316px; }
.gallery-side .ph { height: 154px; margin-bottom: 8px; }
.place-gallery .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.62);
  color: #fff; font-size: 20px; font-weight: 600; }
/* Đứng một mình trên nền trang, không trong .card, nên cũng cần --surface
   thay vì --muted — cùng lý do với .chip ở trên. */
.gallery-flat .ph { height: 220px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-3); }
.gallery-flat .ph span { display: grid; justify-items: center; gap: 6px; font-size: 14px; }

/* ---------- 2b. video trong khối media ---------- */
.ph-link { display: block; height: 100%; cursor: pointer; }
.ph--video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.18); }
.ph-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--text); }
.ph-play svg { width: 22px; height: 22px; margin-left: 3px; }
.ph-play .material-symbols-outlined { font-size: 22px; width: 22px; height: 22px; margin-left: 3px; }
.gallery-side .ph-play { width: 38px; height: 38px; }
.gallery-side .ph-play svg { width: 15px; height: 15px; margin-left: 2px; }
.gallery-side .ph-play .material-symbols-outlined { font-size: 15px; width: 15px; height: 15px; margin-left: 2px; }
.ph-dur { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 2px 7px; border-radius: 6px;
  background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 600; }
.ph .more { z-index: 2; }

/* Ghi danh tác giả — ảnh và video mua của nhiếp ảnh gia phải có dòng này */
.media-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin: -16px 0 24px; color: var(--text-3); font-size: 12.5px; }
.media-credit span { display: inline-flex; align-items: center; gap: 6px; }
.media-credit svg { width: 13px; height: 13px; flex-shrink: 0; }
.media-credit .material-symbols-outlined { font-size: 13px; width: 13px; height: 13px; flex-shrink: 0; }
.media-credit b { color: var(--text-2); font-weight: 600; }

/* ---------- lightbox, dựng trên .ps-popup của vuta.libs ---------- */
.lightbox.ps-popup { background-color: rgba(10,10,10,.93); overflow: hidden; transition-duration: .18s; }
/* vuta.libs đặt transition-delay .5s cho .ps-popup.active — hợp với popup quảng cáo,
   nhưng bấm xem ảnh mà đợi gần một giây thì tưởng chưa ăn nút. */
.lightbox.ps-popup.active { transition-delay: 0s; }
.lightbox .ps-popup__content { display: grid; align-content: center; gap: 12px;
  max-width: 1080px; min-height: 0; height: auto; padding: 0 56px; }
.lightbox-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 10px; background: #000; }
.lightbox-stage img, .lightbox-stage video, .lightbox-stage iframe {
  width: 100%; height: 100%; display: block; border: 0; object-fit: contain; }
.lightbox-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 4px 16px; color: #d4d4d4; font-size: 13px; }
.lightbox-cap b { color: #fff; font-weight: 600; }
.lightbox-cap [data-lb-count] { flex-shrink: 0; }
.lightbox-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
.lightbox-nav:hover { background: rgba(255,255,255,.26); }
.lightbox-nav svg { width: 20px; height: 20px; }
.lightbox-nav .material-symbols-outlined { font-size: 20px; width: 20px; height: 20px; }
.lightbox-prev { left: 4px; }
.lightbox-next { right: 4px; }
/* .ps-popup__close của lib là ô đen vuông — bo lại cho hợp nền tối */
.lightbox .ps-popup__close { top: 16px; right: 16px; border-radius: 10px;
  background-color: rgba(255,255,255,.14); }
.lightbox .ps-popup__close:hover { background-color: rgba(255,255,255,.26); color: #fff; }
.lightbox .ps-popup__close svg { width: 18px; height: 18px; }
.lightbox .ps-popup__close .material-symbols-outlined { font-size: 18px; width: 18px; height: 18px; }
@media (max-width: 575px) {
  .lightbox .ps-popup__content { padding: 0 10px; }
  .lightbox-nav { width: 36px; height: 36px; }
  .lightbox-prev { left: -4px; }
  .lightbox-next { right: -4px; }
}

/* ---------- cột ---------- */
.col-main, .col-side { margin-bottom: 24px; }

/* ---------- 3. tên địa điểm ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-3); font-size: 13px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a:hover { color: var(--text-2); }
.place-title { margin: 8px 0 4px; font-size: 32px; }

/* Tích xác minh đối tác — dáng Facebook/Zalo OA: vòng tròn đặc màu brand,
   dấu check trắng, nằm NGAY sau chữ cuối của tên, không xuống dòng riêng.
   CỐ Ý không dùng flex trên .place-title: flex-wrap coi badge là một ITEM
   riêng, nên khi dòng cuối không đủ chỗ, nó rớt hẳn xuống dòng MỚI của
   riêng nó (đã thấy lỗi này khi thử) thay vì bám ngay sau từ cuối như một
   icon trong dòng chữ bình thường. display: inline-flex + vertical-align
   mới cho nó chảy theo dòng chữ như browser vẫn làm với icon cạnh text. */
.verify-badge { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 8px; border-radius: 50%;
  background: var(--hot); color: #fff; vertical-align: middle; }
.verify-badge svg { width: 13px; height: 13px; stroke-width: 3; }
.verify-badge .material-symbols-outlined { font-size: 13px; width: 13px; height: 13px; }
@media (max-width: 767px) { .verify-badge { width: 19px; height: 19px; margin-left: 6px; } .verify-badge svg { width: 11px; height: 11px; }
.verify-badge .material-symbols-outlined { font-size: 11px; width: 11px; height: 11px; } }
.place-alias { color: var(--text-2); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px;
  color: var(--text-2); font-size: 14px; }
.meta-row b { color: var(--text); }
.meta-item { display: inline-flex; align-items: center; gap: 6px; }
.meta-item svg { width: 15px; height: 15px; color: var(--text-3); }
.meta-item .material-symbols-outlined { font-size: 15px; width: 15px; height: 15px; color: var(--text-3); }
/* Sao đánh giá là mục đầu của hàng meta, theo đúng hợp đồng dữ liệu
   (google_rating luôn hiện trước). Tô vàng — quy ước sao đánh giá ở khắp nơi
   (Google, App Store, Agoda), không phải màu brand, nên tách riêng khỏi
   --primary để không lẫn với các icon brand khác trên trang. */
.meta-item:first-child svg { color: #f59e0b; }
/* Sao đánh giá là mục đầu của hàng meta, theo đúng hợp đồng dữ liệu
   (google_rating luôn hiện trước). Tô vàng — quy ước sao đánh giá ở khắp nơi
   (Google, App Store, Agoda), không phải màu brand, nên tách riêng khỏi
   --primary để không lẫn với các icon brand khác trên trang. */
.meta-item:first-child .material-symbols-outlined { color: #f59e0b; }
.addr { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--text-2); font-size: 14px; }
.addr svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--text-3); }
.addr .material-symbols-outlined { font-size: 16px; width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--text-3); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---------- 4. thông tin nhanh ---------- */
.facts { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); }
.facts.vuta-row { margin-left: 0; margin-right: 0; }
.facts [class^="vuta-col-"] { padding: 14px 16px; border-left: 1px solid var(--border); }
.facts [class^="vuta-col-"]:first-child { border-left: 0; }
.fact-k { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--text-3);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fact-k svg { width: 14px; height: 14px; }
.fact-k .material-symbols-outlined { font-size: 14px; width: 14px; height: 14px; }
.fact-v { color: var(--text); font-size: 15px; font-weight: 700; text-wrap: pretty; }
/* Ô giá (luôn là ô đầu của .facts theo hợp đồng dữ liệu) là ô người đọc liếc
   trước — tô màu brand cho giá trị, ba ô còn lại giữ đen. Scope vào .facts
   để không lỡ tay ăn vào .place-gallery, .near-grid, .plan-grid… cũng dùng
   [class*="vuta-col"]:first-child. */
.facts > [class*="vuta-col"]:first-child .fact-v { color: var(--primary-ink); }
.fact-s { margin-top: 4px; color: var(--text-2); font-size: 13px; text-wrap: pretty; }

/* ---------- 5. tabs neo ---------- */
.tabs { display: flex; gap: 4px; margin-top: 20px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.tabs a { display: inline-flex; align-items: center; height: 42px; padding: 0 14px; border-bottom: 2px solid transparent;
  color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.tabs a[aria-current] { border-bottom-color: var(--primary); color: var(--text); font-weight: 600; }

/* Chừa chỗ cho header dính (64px, xem demo-chrome.css) khi cuộn tới một mục
   bằng neo (#tien-ich, #duong-di…) — thiếu dòng này thì mục tiêu lên sát mép
   trên, bị header đè lên nửa dòng chữ đầu. Khớp với đoạn JS chặn bấm tab
   trong dia-diem-cong-dong.js (cuộn mượt, không giật). */
/* KHÔNG đặt scroll-margin-top ở đây: vuta.libs.css đã có
   html { scroll-padding-top: 100px } cho header dính. Đặt thêm là cộng dồn,
   neo rơi xuống cách đỉnh 180px, hở một mảng trống. Bỏ vutalibs thì mới
   thêm lại dòng dưới đây:
   :where(.place-detail) [id] { scroll-margin-top: 80px; } */

/* ---------- 6. bài viết ---------- */
/* font-weight ghi rõ 600: trên wireframe tiêu đề bài nằm trong <article> nên ăn
   `article h2 { font-weight: 600 }` của vuta.libs. Ở đây khối là <div> nên phải tự đặt,
   không thì rơi về 700 và lệch khỏi bản đã duyệt. */
.article h2 { margin: 26px 0 10px; font-size: 20px; font-weight: 600; }
.article > h2:first-child { margin-top: 0; }
.article h3 { margin: 18px 0 8px; font-size: 16.5px; font-weight: 600; }
.article p { margin-bottom: 12px; color: #333; }
.article .lead { font-size: 16.5px; color: #2b2b2b; }

/* ---------- 6b. video nhúng trong bài viết ----------
   Khung giữ sẵn tỉ lệ 16:9 nên lúc iframe nhảy vào không đẩy chữ xuống. */
.video-embed { margin: 22px 0; }
.video-embed-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: #000; }
.video-embed-frame > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-embed-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed-frame .ph-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--text); }
.video-embed-frame .ph-play svg { width: 26px; height: 26px; margin-left: 3px; }
.video-embed-frame .ph-play .material-symbols-outlined { font-size: 26px; width: 26px; height: 26px; margin-left: 3px; }
/* Nút bật tiếng: autoplay chỉ chạy được khi tắt tiếng, nên phải có đường mở tiếng
   bằng một cú bấm — cú bấm đó là thao tác người dùng nên trình duyệt cho phát tiếng. */
.video-unmute { position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border: 0; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff;
  font: 600 13px/1 Inter, sans-serif; cursor: pointer; }
.video-unmute:hover { background: rgba(0,0,0,.85); }
.video-unmute svg { width: 15px; height: 15px; }
.video-unmute .material-symbols-outlined { font-size: 15px; width: 15px; height: 15px; }
.video-embed figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 8px; color: var(--text-3); font-size: 12.5px; }
.video-embed figcaption b { color: var(--text-2); font-weight: 600; }
.video-embed figcaption svg { width: 13px; height: 13px; flex-shrink: 0; }
.video-embed figcaption .material-symbols-outlined { font-size: 13px; width: 13px; height: 13px; flex-shrink: 0; }

/* ---------- 7. tiện ích ---------- */
.amen { display: flex; flex-wrap: wrap; gap: 8px; }
.amen-item { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--muted); font-size: 14px; }
.amen-item svg { width: 16px; height: 16px; color: var(--primary-ink); }
.amen-item .material-symbols-outlined { font-size: 16px; width: 16px; height: 16px; color: var(--primary-ink); }
.note-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--text-3); font-size: 13px; }
.note-line svg { width: 14px; height: 14px; flex-shrink: 0; }
.note-line .material-symbols-outlined { font-size: 14px; width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- 8. bản đồ + cách đến ---------- */
.map-wrap { position: relative; height: 260px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: #e9e5df; }
/* Khối chứa bản đồ Leaflet của theme; bỏ .map-tiles nếu dùng Leaflet thật */
.map-wrap > #map, .map-wrap > .leaflet-container { width: 100%; height: 100%; }
.map-tiles { position: absolute; inset: -50px; display: grid; grid-template-columns: repeat(3, 256px);
  grid-auto-rows: 256px; justify-content: center; align-content: center; }
.map-tiles img { width: 256px; height: 256px; display: block; }
.map-pin { position: absolute; left: 50%; top: 50%; translate: -50% -100%; color: var(--second); }
.map-pin svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.map-pin .material-symbols-outlined { font-size: 34px; width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.map-open { position: absolute; right: 10px; bottom: 10px; z-index: 500; }
.howto { display: grid; gap: 10px; margin-top: 14px; }
.howto li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2); }
.howto svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--primary-ink); }
.howto .material-symbols-outlined { font-size: 16px; width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--primary-ink); }
.howto b { color: var(--text); font-weight: 600; }

/* ---------- 9. nguồn tham khảo ---------- */
.sources li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; color: var(--text-2); }
.sources li + li { border-top: 1px solid var(--border); }
.sources svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-3); }
.sources .material-symbols-outlined { font-size: 14px; width: 14px; height: 14px; flex-shrink: 0; color: var(--text-3); }
.updated { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--text-3); font-size: 13px; }
.updated svg { width: 14px; height: 14px; }
.updated .material-symbols-outlined { font-size: 14px; width: 14px; height: 14px; }

/* ---------- 10. khối Ghé thăm ---------- */
.visit-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.visit-today { margin-top: 8px; font-size: 20px; font-weight: 700; }
.visit-sub { color: var(--text-2); font-size: 13.5px; }
/* accordion của vuta.libs: ul.faq > li > .link + .hidden-content */
.faq { margin-top: 12px; border-top: 1px solid var(--border); }
.faq > li > .link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px;
  color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.faq > li > .link svg { width: 16px; height: 16px; transition: rotate .15s; }
.faq > li > .link .material-symbols-outlined { font-size: 16px; width: 16px; height: 16px; transition: rotate .15s; }
.faq > li.active > .link svg { rotate: 180deg; }
.faq > li.active > .link .material-symbols-outlined { rotate: 180deg; }
.faq > li > .hidden-content { display: none; padding-bottom: 6px; }
.faq table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.faq th { display: none; }
.faq td { padding: 5px 0; color: var(--text-2); }
.faq td:last-child { text-align: right; }
.faq tr[data-today] td { color: var(--text); font-weight: 600; }

/* ---------- 10b. lưu lượng khách theo giờ ----------
   Một mục accordion nữa trong CHÍNH ul.faq phía trên (cùng cơ chế, không JS
   mới cho việc đóng/mở). Bên trong dùng lại đúng khuôn tab của vuta.libs
   (ul.user-nav-tabs + .tab-content > .tab-item) để chọn ngày — y hệt khối 11
   "Khám phá xung quanh" — nên không cần viết JS chuyển ngày riêng.

   MÀU: đây là biểu đồ MỨC ĐỘ (bao nhiêu khách), không phải TRẠNG THÁI
   (tốt/xấu). Bản gốc trên iigo.vn tô xanh–cam–đỏ — mượn bộ màu trạng thái
   cho một con số trung tính là gán sai nghĩa: khách đông không phải "nguy
   hiểm" (đỏ), khách vắng không phải "tốt" (xanh). Thay bằng MỘT tông màu
   brand đậm dần — vắng nhạt, đông đậm — đúng quy tắc: sequential (đo mức
   độ) = một hue, sáng→đậm; status (đỏ/vàng/xanh) chỉ dành cho trạng thái
   thật (còn phòng/hết phòng…), không bao giờ dùng cho một chỉ số đo lường.
   Ba nấc tính từ chính token đã có, không bịa mã màu mới:
     mức 1 (vắng)   color-mix(--primary 40%, trắng) — nhạt
     mức 2 (vừa)    --primary-strong                 — vừa
     mức 3 (đông)   --hot                             — đậm, cùng tông với
                     giá tiền/tích xác minh, nên "đáng chú ý" luôn một màu
                     nhất quán toàn trang.
   Giờ hiển thị LẤY THEO DỮ LIỆU của từng nơi (bao nhiêu giờ mở cửa thì bấy
   nhiêu cột) — không cố định 0–23h như bản gốc, để không bịa ra giờ chùa
   mở cửa lúc nửa đêm. */
.traffic-days { display: flex; gap: 4px; margin-bottom: 12px; }
.traffic-days li { flex: 1 1 0; list-style: none; }
.traffic-days a { display: flex; align-items: center; justify-content: center; height: 30px;
  border-radius: 8px; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.traffic-days li.active a { background: var(--primary-strong); color: #fff; }
.traffic-days li:not(.active) a:hover { background: var(--muted); }
/* Khối hiện sẵn, không gập trong accordion — đây là thứ khách thấy ấn tượng
   nhất, giấu sau một cú bấm thì phí. Đổi lại cột phải cao thêm ~150px. */
.traffic { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.traffic-title { margin-bottom: 10px; color: var(--text); font-size: 13.5px; font-weight: 600; }
/* Cuộn ngang: nơi mở 24/7 có 24 cột, nhét hết vào cột phải ~300px thì mỗi cột
   còn ~9px, không đọc nổi giờ. Nên mỗi cột giữ bề ngang cố định 28px và cả hàng
   cuộn ngang. Hai mép làm mờ (mask) để thấy còn dữ liệu phía ngoài — thanh cuộn
   ẩn đi cho đỡ thô, giống .user-nav-tabs ở khối 11.
   Lưu ý: KHÔNG có thẻ <a href="#..."> nào bên trong hàng cuộn này, nên không
   dính lại lỗi "bấm tab bị giật" đã sửa ở khối 5 (lỗi đó do trình duyệt vừa
   cuộn ngang vừa nhảy neo dọc cùng lúc). */
.traffic-bars { display: flex; align-items: flex-end; gap: 3px; height: 118px;
  overflow-x: auto; scroll-behavior: smooth;
  /* Thanh cuộn mảnh chứ KHÔNG ẩn: ẩn đi thì trackpad vuốt ngang được, nhưng
     chuột thường chỉ lăn dọc — các giờ nằm ngoài khung sẽ không cách nào xem
     được. Probe bắt đúng lỗi này. */
  scrollbar-width: thin; scrollbar-color: #d6cab6 transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.traffic-bars::-webkit-scrollbar { height: 6px; }
.traffic-bars::-webkit-scrollbar-track { background: transparent; }
.traffic-bars::-webkit-scrollbar-thumb { background: #d6cab6; border-radius: 3px; }
/* Vùng cuộn phải bấm Tab tới được thì mới dùng phím mũi tên để xem hết giờ */
.traffic-bars:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.traffic-bar { display: flex; flex: 0 0 28px; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; border-radius: 6px; }

/* Giờ hiện tại: KHÔNG tô bằng màu khác, vì màu cột đang dùng để đo mức đông
   vắng — thêm một màu nữa vào đó là hai nghĩa chồng lên một kênh. Dùng kênh
   riêng: một vệt nền mờ phía sau cột + nhãn giờ đậm lên. */
.traffic-bar[data-now] { background: var(--primary-light); }
.traffic-bar[data-now] .traffic-bar-hour { color: var(--text); font-weight: 700; }
.traffic-bar[data-now] .traffic-bar-value { color: var(--text); }
.traffic-bar-value { margin-bottom: 3px; color: var(--text-2); font-size: 10.5px; font-weight: 600; }
.traffic-bar-fill { width: 100%; max-width: 20px; min-height: 3px; height: calc(var(--v, 0) * 1%);
  border-radius: 4px 4px 0 0; background: var(--muted); transition: filter .12s; }
.traffic-bar[data-level="1"] .traffic-bar-fill { background: color-mix(in oklab, var(--primary) 40%, #fff); }
.traffic-bar[data-level="2"] .traffic-bar-fill { background: var(--primary-strong); }
.traffic-bar[data-level="3"] .traffic-bar-fill { background: var(--hot); }
.traffic-bar:hover .traffic-bar-fill { filter: brightness(0.92); }
.traffic-bar-hour { margin-top: 5px; color: var(--text-3); font-size: 10px; }
@media (max-width: 374px) { .traffic-bar-hour { font-size: 9px; } }

.kv { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.kv-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.kv-row svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--text-3); }
.kv-row .material-symbols-outlined { font-size: 16px; width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--text-3); }
.kv-row span { color: var(--text-2); }
.kv-row b { display: block; color: var(--text); font-weight: 600; }
.visit-actions { display: grid; gap: 8px; margin-top: 16px; }
.report { display: inline-flex; align-items: center; min-height: 28px; gap: 6px; margin-top: 12px;
  color: var(--text-3); font-size: 13px; }
.report:hover { color: var(--text-2); text-decoration: underline; }
.report svg { width: 14px; height: 14px; }
.report .material-symbols-outlined { font-size: 14px; width: 14px; height: 14px; }

/* ---------- 11. khám phá xung quanh: tab của vuta.libs ---------- */
/* Bốn mục không vừa một dòng ở 375 và rớt lẻ một mục — cho cuộn ngang thay vì xuống dòng */
.user-nav-tabs { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 14px; overflow-x: auto;
  scrollbar-width: none; }
.user-nav-tabs::-webkit-scrollbar { display: none; }
.user-nav-tabs li { flex-shrink: 0; }
.user-nav-tabs li > a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-2);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.user-nav-tabs li > a svg { width: 15px; height: 15px; }
.user-nav-tabs li > a .material-symbols-outlined { font-size: 15px; width: 15px; height: 15px; }
.user-nav-tabs li.active > a { background: var(--primary-strong); border-color: var(--primary-strong); color: #fff; }
.near-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; }
.near-row:hover { border-color: #ddd4c6; background: var(--muted); }
.near-ico { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px;
  background: var(--primary-light); color: var(--primary-ink); }
.near-ico svg { width: 18px; height: 18px; }
.near-ico .material-symbols-outlined { font-size: 18px; width: 18px; height: 18px; }
.near-name { display: grid; gap: 2px; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; }
.near-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near-sub { color: var(--text-3); font-size: 12.5px; font-weight: 400; }
.near-dist { margin-left: auto; flex-shrink: 0; color: var(--text-2); font-size: 13px; font-weight: 600; }
.near-grid [class^="vuta-col-"] { margin-bottom: 8px; }

/* ============================================================
   CHỈ ĐỊA ĐIỂM ĐỐI TÁC — địa điểm công cộng không dùng mấy khối này
   ============================================================ */

/* Hàng kênh liên hệ trong cột phải. CHỈ dựng kênh nào có số thật —
   ba ô "(Chưa cập nhật)" của trang cũ chính là thứ phải bỏ. */
/* Icon và chữ nằm CÙNG MỘT HÀNG, không xếp chồng: ô hai dòng trông như chữ bị
   rớt xuống. flex-wrap trên hàng cha lo trường hợp cột phải quá hẹp — khi đó ô
   xuống dòng thành ô mới, chứ chữ không bao giờ rớt khỏi icon của nó.
   flex-basis phải là auto, KHÔNG phải một số cố định: đặt 92px thì ba ô tính ra
   292px > bề ngang cột phải (279px ở 1024), nên "WhatsApp" bị đẩy xuống dòng hai
   dù nội dung thật của ba ô cộng lại chỉ 254px. Với auto, basis lấy theo chữ nên
   chỉ xuống dòng khi thật sự không đủ chỗ. */
.contact-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Phải kể cả .is-locked: ô khoá là <span>, không phải <a>, nên selector chỉ nhắm
   `a` sẽ bỏ sót nó — ô mất hết viền, bo góc, padding và lòi ra viền mặc định màu
   đen của trình duyệt. */
.contact-row a, .contact-row .is-locked { flex: 1 1 auto; display: flex; align-items: center;
  justify-content: center; gap: 7px; padding: 11px 8px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.contact-row a:hover { border-color: #ddd4c6; background: var(--muted); color: var(--text); }
.contact-row svg { width: 18px; height: 18px; color: var(--primary-ink); }
.contact-row .material-symbols-outlined { font-size: 18px; width: 18px; height: 18px; color: var(--primary-ink); }

/* Hạng phòng / bảng giá dịch vụ */
.room-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px;
  padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.room-card + .room-card { margin-top: 10px; }
.room-card.is-best { border-color: #e4d3ba; background: #fdfaf5; }
.room-main { flex: 1 1 260px; min-width: 0; }
.room-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; }
.room-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.room-tags span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--muted);
  color: var(--text-2); font-size: 12.5px; }
.room-tags svg { width: 13px; height: 13px; color: var(--text-3); }
.room-tags .material-symbols-outlined { font-size: 13px; width: 13px; height: 13px; color: var(--text-3); }
.room-buy { flex: 0 0 auto; display: grid; justify-items: end; gap: 8px; margin-left: auto; }
/* Nhiều dòng giá cho spa (theo số phút), tour (người lớn/trẻ em), thuê xe (theo
   chặng). Khách sạn chỉ có một dòng — cùng component, khác số dòng. */
.room-prices { display: grid; gap: 4px; text-align: right; }
.room-prices li { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  font-size: 13.5px; }
.room-prices .pl { color: var(--text-3); }
.room-prices .pv { color: var(--hot); font-size: 15px; font-weight: 700; }
.room-prices s { color: var(--text-3); font-size: 12.5px; }
.room-price { display: flex; align-items: baseline; gap: 8px; }
.room-price b { color: var(--hot); font-size: 19px; font-weight: 700; }
.room-price s { color: var(--text-3); font-size: 13.5px; }
.room-price span { color: var(--text-3); font-size: 13px; }
.ota-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13px; }
.ota-row a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  color: var(--text-2); font-size: 13px; font-weight: 500; }
.ota-row a:hover { border-color: #ddd4c6; background: var(--muted); color: var(--text); }
.ota-row a svg { width: 13px; height: 13px; color: var(--text-3); }
.ota-row a .material-symbols-outlined { font-size: 13px; width: 13px; height: 13px; color: var(--text-3); }

/* Chính sách: dùng lại accordion ul.faq của vuta.libs, nhiều mục */
.faq--policy { margin-top: 0; border-top: 0; }
.faq--policy > li { border-bottom: 1px solid var(--border); }
.faq--policy > li > .link { min-height: 46px; color: var(--text); font-size: 14.5px; font-weight: 600; }
.faq--policy > li > .hidden-content { padding: 0 0 14px; color: var(--text-2); font-size: 14px; }
.faq--policy p + p { margin-top: 8px; }

@media (max-width: 575px) {
  .room-buy { justify-items: start; margin-left: 0; width: 100%; }
  .room-prices { text-align: left; }
  .room-prices li { justify-content: flex-start; }
  .room-buy .btn { width: 100%; }
  /* Ba tag rớt thành 2 + 1 ở khổ 375; giữ hai tag nói nhiều nhất về phòng */
  .room-tags span:nth-child(n+3) { display: none; }
}

/* ---------- Lưới ảnh dùng chung ----------
   Dùng cho khối "Hình ảnh" (MỌI loại địa điểm đều có) và khối "Menu" (ảnh chụp
   tờ thực đơn, chỉ nhà hàng). Năm ô ở đầu trang chỉ là cửa vào; ai muốn xem kỹ
   thì cuộn xuống đây xem đủ. */
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.photo-grid .ph { aspect-ratio: 4 / 3; }
.photo-grid .ph img { object-fit: cover; }
.photo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-grid--3 .ph { aspect-ratio: 3 / 4; }
@media (max-width: 767px) { .photo-grid, .photo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ảnh cho từng hạng phòng / dịch vụ / vé — khách chọn phòng cũng bằng mắt,
   không chỉ bằng tên và giá. Thiếu ảnh thì ô này không dựng, thẻ vẫn gọn. */
.room-photo { flex: 0 0 120px; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 9px; background: var(--muted); }
.room-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 575px) { .room-photo { flex: 0 0 100%; aspect-ratio: 16 / 9; } }

/* ---------- Thực đơn có ảnh (danh mục Ẩm thực) ----------
   Nhà hàng khác lưu trú ở chỗ: khách chọn bằng MẮT. Món signature phải có ảnh,
   không thể chỉ là chữ. Dùng lưới 3 cột ở khổ rộng, 2 cột ở khổ hẹp.
   Giá để tuỳ chọn — quán chưa gửi bảng giá thì vẫn hiện ảnh + tên món, không bịa giá. */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dish { display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dish-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--muted); }
.dish-photo img { width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .25s; }
.dish:hover .dish-photo img { transform: scale(1.04); }
.dish-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.dish-name { font-size: 14px; font-weight: 600; text-wrap: pretty; }
.dish-note { color: var(--text-3); font-size: 12.5px; }
.dish-price { margin-top: 2px; color: var(--hot); font-size: 14.5px; font-weight: 700; }
/* Món quán đánh dấu là signature — viền brand + nhãn, không chỉ dựa vào màu */
.dish.is-signature { border-color: #e4d3ba; }
.dish-flag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  height: 22px; margin-bottom: 2px; padding: 0 8px; border-radius: 999px;
  background: var(--hot-bg); color: var(--hot); font-size: 11.5px; font-weight: 600; }
.dish-flag svg { width: 12px; height: 12px; }
.dish-flag .material-symbols-outlined { font-size: 12px; width: 12px; height: 12px; }
@media (max-width: 767px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 11b. ô chức năng khoá — mở khi địa điểm thành đối tác IIGO ----------
   Địa điểm chưa đăng ký vẫn THẤY ô "Đặt ngay", nhưng bấm không được. Đây là chỗ
   bán hàng: chủ quán vào xem trang của chính mình thì thấy ngay thứ mình đang
   thiếu. Ba điều phải giữ khi dựng:

   1. KHÁCH xem trang vẫn luôn có một nút bấm được. Nút khoá KHÔNG bao giờ là nút
      chính — "Chỉ đường" nằm ngay dưới và luôn chạy, vì địa điểm nào cũng có địa
      chỉ. Trang cũ để nút khoá làm nút chính nên khách tưởng web hỏng.
   2. Khoá thì KHÔNG dựng thẻ <a>. Theme hiện tại viết
      <a href="{{ $post->booking_url }}" class="disabled" disabled> — thuộc tính
      `disabled` không có tác dụng gì trên thẻ <a>, nên nút "khoá" vẫn bấm được và
      vẫn nhảy theo href rỗng (tải lại trang). Ở đây dùng <span role="button"
      aria-disabled="true">, không có href, không vào được bằng Tab.
   3. Chữ vẫn phải ĐỌC ĐƯỢC. Màu xám nhạt kiểu "disabled" của trình duyệt rơi
      xuống dưới 3:1. Dùng --text-3 (5,10:1) cho chữ phụ và --primary-ink cho
      vương miện, giữ cảm giác "chưa mở" bằng nền và nét đứt chứ không bằng cách
      làm chữ mờ đi. */
.lock-slot { margin-top: 12px; padding: 12px; border: 1px dashed #e0d3bd; border-radius: var(--radius);
  background: linear-gradient(180deg, #fdfaf5, var(--surface)); text-align: center; }
.lock-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px; border-radius: 10px; background: var(--muted);
  color: var(--text-locked); font-size: 15px; font-weight: 700; cursor: not-allowed;
  user-select: none; }
.lock-btn svg { width: 18px; height: 18px; color: var(--primary-ink); }
.lock-btn .material-symbols-outlined { font-size: 18px; width: 18px; height: 18px; color: var(--primary-ink); }
.lock-note { margin: 9px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.lock-note b { color: var(--primary-ink); font-weight: 700; }
.lock-owner { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin-top: 4px;
  color: var(--primary-ink); font-size: 12.5px; font-weight: 600; }
.lock-owner svg { width: 14px; height: 14px; }
.lock-owner .material-symbols-outlined { font-size: 14px; width: 14px; height: 14px; }
.lock-owner:hover { text-decoration: underline; }

/* Đối tác đã mở: nút "Đặt ngay" chạy thật, kèm một dòng nói rõ đặt qua ĐÂU.
   Không có dòng này thì khách tưởng nút gọi vào số của quán. */
.book-note { margin: 8px 0 0; color: var(--text-3); font-size: 12.5px; text-align: center; }
.book-note svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px;
  color: var(--primary-ink); }
.book-note .material-symbols-outlined { font-size: 13px; width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px;
  color: var(--primary-ink); }

/* Ô liên hệ chưa có số: vẫn hiện để chủ quán thấy mình thiếu gì, nhưng là <span>
   nên bấm không được. Trang cũ để <a href="tel:"> rỗng — bấm vào là máy mở trình
   gọi với số trống. */
.contact-row .is-locked { color: var(--text-locked); background: var(--muted);
  border-color: #ded2bd; border-style: dashed; cursor: not-allowed; user-select: none; }
.contact-row .is-locked svg { color: var(--text-locked); }
.contact-row .is-locked .material-symbols-outlined { color: var(--text-locked); }
/* Nhãn ô khoá để NGẮN bằng ô thường. Từng thử thêm "(chưa có)" vào trong ô: nội
   dung ô phình lên 161px, ba ô cộng lại 309px > 279px bề ngang cột phải, nên ô
   WhatsApp bị đẩy xuống dòng riêng. Lời giải thích chuyển sang title + aria-label,
   ô giữ đúng bề ngang như hai ô kia. */

/* ---------- 12. khối mời đối tác ----------
   Chỉ hiện với địa điểm CHƯA đăng ký. Đây là chỗ bán hàng thật sự của trang, nên
   nó không còn là một dòng chữ suông như bản trước: có tiêu đề, ba gạch đầu dòng
   nói đúng thứ chủ quán nhận được, rồi mới tới nút.

   KHÔNG viết "miễn phí" ở đây — IIGO có chính sách thu phí, hứa sai một chữ là
   mất lòng tin ngay ở bước đầu. Nút dẫn sang trang gói đối tác để người ta tự xem
   giá, đó mới là lời mời trung thực.

   Ba gạch đầu dòng đều là thứ NHÌN THẤY ĐƯỢC ngay trên trang này: ô "Đặt ngay"
   đang khoá ở cột phải, tích cam cạnh tên, và khối "Khám phá xung quanh" ở cuối
   trang. Người đọc đối chiếu được, nên không ai thấy đang bị nói quá. */
.partner-cta { margin-top: 26px; padding: 20px 22px; border: 1px solid #e4d3ba;
  border-radius: var(--radius); background: linear-gradient(180deg, #fdfaf5, var(--surface)); }
.partner-cta-h { display: flex; align-items: center; gap: 9px; margin: 0 0 6px;
  color: var(--text); font-size: 16.5px; font-weight: 700; }
.partner-cta-h svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--primary-ink); }
.partner-cta-h .material-symbols-outlined { font-size: 19px; width: 19px; height: 19px; flex-shrink: 0; color: var(--primary-ink); }
/* Chạy hết bề ngang khối, KHÔNG chặn max-width. Bản trước chặn 70ch cho dễ đọc,
   nhưng khối này rộng gần 1300px ở màn 1440 nên đoạn chữ dừng ở khoảng 60% rồi bỏ
   trống một mảng bên phải — nhìn như đang lỗi chứ không ra chủ ý. Đổi lại dùng
   text-wrap: pretty để dòng cuối không còn trơ một hai chữ. */
.partner-cta-lead { margin: 0 0 14px; color: var(--text-2); font-size: 14px; line-height: 1.55;
  text-wrap: pretty; }
.partner-cta-list { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 16px; }
.partner-cta-list li { display: flex; align-items: center; gap: 7px;
  color: var(--text-2); font-size: 13.5px; }
.partner-cta-list svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ok); }
.partner-cta-list .material-symbols-outlined { font-size: 15px; width: 15px; height: 15px; flex-shrink: 0; color: var(--ok); }
/* Hàng nút căn GIỮA, khác ba khối chữ bên trên vẫn căn trái. Đây là chủ ý: chữ
   căn trái để đọc, còn hàng cuối là lời kêu gọi hành động nên tách ra giữa cho
   mắt dừng lại ở đó. Khối rộng gần hết trang, để nút nằm lệch trái thì nó chìm
   vào đoạn chữ ngay trên. */
.partner-cta-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px; margin-top: 18px; }
.partner-cta-foot .btn { height: 42px; padding: 0 20px; }
.partner-cta-fine { color: var(--text-3); font-size: 12.5px; }

@media (max-width: 575px) {
  .partner-cta { padding: 16px; }
  .partner-cta-list { gap: 7px; }
  .partner-cta-list li { flex: 1 1 100%; }
  /* Màn hẹp: nút chiếm trọn bề ngang nên không còn chuyện căn giữa hay trái,
     chỉ cần dòng chữ nhỏ bên dưới cũng vào giữa cho khớp. */
  .partner-cta-foot { gap: 10px; text-align: center; }
  .partner-cta-foot .btn { width: 100%; }
}

/* ---------- trạng thái: đang tải / rỗng / lỗi ----------
   Trong Botble chỉ render một nhánh bằng @if/@else, nên mặc định ẩn ba nhánh kia.
   Bản HTML mẫu này ẩn sẵn để xem được nhánh "có dữ liệu". */
.st--load, .st--empty, .st--error { display: none; }
.sk { border-radius: 8px; background: linear-gradient(90deg, #f0efed 25%, #e7e5e2 37%, #f0efed 63%);
  background-size: 400% 100%; animation: sk 1.4s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.sk-line { height: 13px; margin-bottom: 10px; }
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; text-align: center; }
.empty-state .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--muted); color: var(--text-3); }
.empty-state .ico svg { width: 22px; height: 22px; }
.empty-state .ico .material-symbols-outlined { font-size: 22px; width: 22px; height: 22px; }
.empty-state b { font-size: 15px; }
.empty-state p { max-width: 380px; color: var(--text-2); font-size: 14px; text-wrap: pretty; }
.error-state { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid #f0d6d4;
  border-radius: 10px; background: var(--danger-bg); }
.error-state > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--danger); }
.error-state > .material-symbols-outlined { font-size: 18px; width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--danger); }
.error-state b { display: block; font-size: 14.5px; }
.error-state p { color: var(--text-2); font-size: 13.5px; text-wrap: pretty; }

/* ---------- màn hẹp ---------- */
@media (max-width: 767px) {
  .gallery-main .ph { height: 200px; margin-bottom: 8px; }
  .gallery-side .ph { height: 110px; }
  .place-title { font-size: 25px; }
  .facts [class^="vuta-col-"]:nth-child(odd) { border-left: 0; }
  .facts [class^="vuta-col-"]:nth-child(n+3) { border-top: 1px solid var(--border); }
  .actions .btn { flex: 1 1 calc(50% - 4px); }
}
@media (max-width: 560px) {
  /* Ô thông tin nhanh chỉ còn nhãn + giá trị: dòng phụ đẩy mỗi ô lên 5 dòng ở khổ 375 */
  .fact-s:not(.keep) { display: none; }
  /* Chip thứ ba rớt xuống một mình, và vé đã có ngay dưới ở khối 4 */
  .chips .chip:nth-child(3) { display: none; }
}


/* ============================================================
   Bổ sung khi ráp vào theme company
   ============================================================ */
.place-detail .meta-item:first-child .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.place-detail .verify-badge .material-symbols-outlined { font-weight: 700; }
.place-detail .room-note { margin-top: 6px; font-size: 13px; color: var(--text-2); }
.place-detail .room-note p { margin: 0 0 4px; }
.place-detail .sources a { color: var(--primary-ink); }
.place-detail .policy-body { font-size: 15px; line-height: 1.7; color: var(--text); }
.place-detail .place-reviews { margin-top: 24px; }
.place-detail .traffic-note { margin: 8px 0 0; color: var(--text-3); font-size: 12px; }
.place-detail a.chip { color: inherit; text-decoration: none; }
.place-detail a.chip:hover { border-color: var(--main-color); color: var(--primary-ink); }


/* ============================================================
   Cột phải dính (sticky)
   style.min.css đặt `body { overflow: hidden }` và `html { overflow-x: hidden }`: khi cả hai
   đều khác `visible`, body thành một khung cuộn riêng (không bao giờ cuộn) nên mọi
   `position: sticky` bên trong mất tác dụng. `overflow-x: clip` vẫn chặn tràn ngang mà
   không tạo khung cuộn. Chỉ áp cho trang có .place-detail, không đụng các trang khác.
   ============================================================ */
body:has(.place-detail) { overflow: visible; overflow-x: clip; }
.place-detail .col-side { align-self: stretch; }
.place-detail .sticky-box { position: sticky; top: 100px; }
@media (max-width: 1199px) { .place-detail .col-side .sticky-box { position: static; } }

/* ============================================================
   Khối đánh giá của cộng đồng IIGO — cùng phong cách thẻ với các khối khác
   ============================================================ */
.place-detail .place-reviews { margin-top: 24px; }
.place-detail .reviews-card { margin-top: 0; }

.place-detail .rv-stars { display: inline-flex; gap: 1px; color: #d6cfc3; font-size: 18px; line-height: 1; letter-spacing: 0; }
.place-detail .rv-stars .is-on { color: #f59e0b; }
.place-detail .rv-stars--sm { font-size: 14px; }

/* Tóm tắt: điểm trung bình bên trái, phân bố sao bên phải */
.place-detail .rv-summary { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center;
  padding: 16px; background: var(--muted); border-radius: var(--radius); }
.place-detail .rv-score { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.place-detail .rv-score-value { font-size: 40px; font-weight: 700; line-height: 1; color: var(--text); }
.place-detail .rv-score-count { color: var(--text-2); font-size: 13px; }
.place-detail .rv-breakdown { display: grid; gap: 7px; }
.place-detail .rv-row { display: grid; grid-template-columns: 34px 1fr 30px; gap: 10px; align-items: center; font-size: 13px; color: var(--text-2); }
.place-detail .rv-row-star { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--text); }
.place-detail .rv-row-star span { color: #f59e0b; font-size: 12px; }
.place-detail .rv-row-bar { height: 8px; border-radius: 999px; background: #e6ddcf; overflow: hidden; }
.place-detail .rv-row-bar span { display: block; height: 100%; border-radius: 999px; background: #f59e0b; }
.place-detail .rv-row-count { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 575px) { .place-detail .rv-summary { grid-template-columns: 1fr; gap: 14px; } }

/* Chưa đăng nhập / đã đánh giá */
.place-detail .rv-login, .place-detail .rv-notice { display: flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-2); font-size: 14px; }
.place-detail .rv-login p { margin: 0; }
.place-detail .rv-login a { color: var(--primary-ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.place-detail .rv-notice { border-style: solid; background: var(--muted); color: var(--text); }

/* Form viết đánh giá */
.place-detail .rv-form { display: grid; gap: 14px; margin-top: 18px; padding: 18px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); }
.place-detail .rv-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.place-detail .rv-star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.place-detail .rv-star-input input { position: absolute; opacity: 0; pointer-events: none; }
.place-detail .rv-star-input label { margin: 0; padding: 0 1px; color: #d6cfc3; font-size: 30px; line-height: 1; cursor: pointer;
  transition: color .12s, transform .12s; }
.place-detail .rv-star-input label:hover,
.place-detail .rv-star-input label:hover ~ label,
.place-detail .rv-star-input input:checked ~ label { color: #f59e0b; }
.place-detail .rv-star-input label:hover { transform: scale(1.12); }
.place-detail .rv-star-input input:focus-visible + label { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }
.place-detail .rv-textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.55; resize: vertical; }
.place-detail .rv-textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--ring-focus); outline: 0; }
.place-detail .rv-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.place-detail .rv-file-count { color: var(--text-2); font-size: 13.5px; }
.place-detail .rv-preview { display: flex; gap: 10px; flex-wrap: wrap; }
.place-detail .rv-preview:empty { display: none; }
.place-detail .rv-form > .btn { justify-self: start; }
#review-message { margin-top: 12px; }

/* Danh sách đánh giá */
.place-detail .rv-list { margin-top: 20px; }
.place-detail .rv-item { padding: 18px 0; border-top: 1px solid var(--border); }
.place-detail .rv-item:first-child { border-top: 0; padding-top: 4px; }
.place-detail .rv-item-head { display: flex; align-items: center; gap: 12px; }
.place-detail .rv-avatar { display: inline-flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--primary-light); color: var(--primary-ink); font-weight: 700; font-size: 15px; }
.place-detail .rv-item-meta { display: grid; gap: 2px; min-width: 0; }
.place-detail .rv-user { color: var(--text); font-size: 14.5px; }
.place-detail .rv-item-sub { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.place-detail .rv-date { color: var(--text-3); font-size: 12.5px; }
.place-detail .rv-content { margin-top: 10px; color: var(--text); font-size: 14.5px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.place-detail .rv-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.place-detail .rv-image { position: relative; display: block; width: 84px; height: 84px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--border); background: var(--muted); }
.place-detail .rv-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-detail .rv-image-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .5); color: #fff; font-weight: 700; font-size: 17px; }
.place-detail .rv-empty { margin: 8px 0 0; color: var(--text-2); font-size: 14px; }
@media (max-width: 575px) { .place-detail .rv-image { width: 72px; height: 72px; } .place-detail .rv-form { padding: 14px; } }

/* Leaflet: nhốt các lớp bên trong bản đồ vào một vùng xếp chồng riêng.
   Leaflet đặt z-index 200–1000 cho tile, marker, popup, nút zoom; nếu .map-wrap không tạo
   stacking context thì các số đó tranh với toàn trang và bản đồ đè lên menu/header khi cuộn.
   isolation: isolate khiến mọi z-index bên trong chỉ có nghĩa trong .map-wrap. */
.place-detail .map-wrap { isolation: isolate; z-index: 0; }
.place-detail .map-wrap .leaflet-container { z-index: 0; }

/* Nút "Đối tác IIGO" cạnh tên địa điểm: viên thuốc chuyển màu thương hiệu (vàng → cam), chữ trắng đậm,
   icon huy hiệu có dấu tích. Nền và hiệu ứng ánh sáng lấy từ .partner của theme (custom.css). */
.place-detail .meta-row .partner { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0;
  padding: 8px 18px 8px 12px; border-radius: 11px; vertical-align: middle; font-size: 17px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0; white-space: nowrap; box-shadow: 0 3px 10px rgba(198, 152, 99, .35);
  /* Vệt sáng chạy ngang (.partner::after + @keyframes shine trong custom.css) chỉ chạy BÊN TRONG nút */
  position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .place-detail .meta-row .partner::after { animation: none; } }
.place-detail .meta-row .partner .material-symbols-outlined { width: 26px; height: 26px; font-size: 26px;
  font-variation-settings: 'FILL' 0, 'wght' 500; }
@media (max-width: 767px) {
  .place-detail .meta-row .partner { padding: 6px 13px 6px 9px; font-size: 14px; border-radius: 9px; }
  .place-detail .meta-row .partner .material-symbols-outlined { width: 21px; height: 21px; font-size: 21px; }
}


/* ============================================================
   Nội dung bài viết (.article): kiểu chữ thống nhất
   Dữ liệu có nhiều bài dán từ Google Docs/Word mang theo font (Google Sans, Roboto...), cỡ chữ,
   màu, nền trắng và khoảng cách dòng riêng. Bộ tối ưu tốc độ của Botble đổi các style inline đó
   thành class page_speed_N (độ ưu tiên thấp) nên ở đây ép về font/màu của site bằng !important.
   Phần video nhúng (.video-embed) được loại ra để không mất khung/nút của nó.
   ============================================================ */
.place-detail .article { font-family: inherit; font-size: 16px; line-height: 1.75; color: #333; overflow-wrap: anywhere; }

.place-detail .article :where(p, span, div, li, ul, ol, strong, b, em, i, u, a, td, th, blockquote, table, tr, h1, h2, h3, h4, h5, h6, sup, sub, small, figure, figcaption):not(.video-embed *) {
  font-family: inherit !important; letter-spacing: normal !important; word-spacing: normal !important; text-indent: 0 !important;
}
.place-detail .article :where(p, span, div, li, strong, b, em, i, u, a, td, th, blockquote):not(.video-embed *) {
  font-size: inherit !important; line-height: inherit !important;
}
.place-detail .article :where(p, span, div, li, strong, b, em, i, u, td, th, blockquote, sup, sub, small):not(.video-embed *) {
  color: inherit !important;
}
.place-detail .article :where(p, span, div, li, ul, ol, strong, b, em, i, u, a, h1, h2, h3, h4, h5, h6):not(.video-embed *) {
  background: transparent !important;
}

.place-detail .article p { margin: 0 0 12px; }
.place-detail .article :where(strong, b) { font-weight: 700; }
.place-detail .article em, .place-detail .article i { font-style: italic; }

.place-detail .article :is(h1, h2, h3, h4, h5, h6) { color: var(--text) !important; line-height: 1.35 !important; font-weight: 600 !important; }
.place-detail .article :is(h1, h2) { margin: 26px 0 10px; font-size: 20px !important; }
.place-detail .article h3 { margin: 20px 0 8px; font-size: 17.5px !important; }
.place-detail .article :is(h4, h5, h6) { margin: 16px 0 6px; font-size: 16px !important; }
.place-detail .article :is(h1, h2, h3, h4, h5, h6) :where(strong, b, span) { font-weight: inherit !important; font-size: inherit !important; color: inherit !important; }
.place-detail .article > :first-child { margin-top: 0; }

/* Theme reset `ol, ul { margin: 0; padding: 0 }` làm mất chấm đầu dòng và thụt lề của danh sách trong bài */
.place-detail .article ul, .place-detail .article ol { margin: 0 0 14px; padding-left: 24px; }
.place-detail .article ul > li { list-style: disc; }
.place-detail .article ol > li { list-style: decimal; }
.place-detail .article ul ul > li { list-style: circle; }
.place-detail .article li { margin: 0 0 6px; padding-left: 2px; }
.place-detail .article li > p { margin: 0; }
.place-detail .article li > :is(ul, ol) { margin: 6px 0 0; }

/* Khung trích dẫn dùng làm hộp lưu ý (hay mở đầu bằng emoji) */
.place-detail .article blockquote { margin: 16px 0 !important; padding: 12px 16px !important; border-left: 3px solid var(--main-color);
  border-radius: 0 10px 10px 0; background: var(--muted) !important; }
.place-detail .article blockquote p { margin: 0 0 8px; }
.place-detail .article blockquote > :last-child { margin-bottom: 0; }

.place-detail .article a:not(.btn) { color: var(--primary-ink) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; display: inline; }

.place-detail .article img { display: block; max-width: 100% !important; height: auto !important; margin: 10px 0; border-radius: 10px; }
.place-detail .article table { display: block; width: 100%; overflow-x: auto; margin: 14px 0; border-collapse: collapse; }
.place-detail .article :is(th, td) { padding: 8px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.place-detail .article th { background: var(--muted) !important; font-weight: 700; }
.place-detail .article hr { margin: 22px 0; border: 0; border-top: 1px solid var(--border); }
@media (max-width: 575px) {
  .place-detail .article { font-size: 15.5px; }
  .place-detail .article :is(h1, h2) { font-size: 19px !important; }
}