@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* Thổ Địa Phú Yên — thodiaphuyen.com — Theme: Xanh Ngọc & Vàng Đồng (sang trọng) */
:root{
  --blue:#0F5C56;        /* xanh ngọc đậm chủ đạo (deep teal) */
  --blue-d:#0B3D39;      /* xanh ngọc rất đậm cho tiêu đề/header */
  --teal:#C9A227;        /* vàng đồng làm điểm nhấn (gold accent) */
  --brand-navy:#082F64;  /* Thổ Địa */
  --brand-silver:#FFFFFF;/* Review — trắng rõ trên mọi nền */
  --brand-ocean:#0EA5E9; /* Phú Yên */
  --mint:#6FAE9E;        /* xanh ngọc nhạt phụ (sage) */
  --sand:#F3ECD9;        /* kem ấm cho nhãn */
  --ink:#22302E;         /* mực xanh than dễ đọc */
  --muted:#6E7B78;--bg:#FBF8F2;--card:#ffffff;--line:#E7E1D2;
  --radius:18px;--shadow:0 6px 20px rgba(15,92,86,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
/* Dải phân cách "Tất cả địa điểm" dưới khu Đề xuất ở trang Địa điểm */
.dir-divider{display:flex;align-items:center;gap:14px;margin:26px 0 16px;color:var(--blue-d);font-weight:800}
.dir-divider::before,.dir-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.dir-divider span{font-size:1.05rem;white-space:nowrap}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--blue);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1140px;margin:0 auto;padding:0 20px}

/* Header */
header{background:#fff;border-bottom:2px solid var(--teal);position:sticky;top:0;z-index:5000}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;gap:8px;font-size:clamp(.98rem,1.3vw,1.16rem);font-weight:800;color:var(--blue-d);white-space:nowrap;flex:none}
.logo span{color:inherit}
.brand-name{display:inline-flex;align-items:baseline;gap:.22em;white-space:nowrap}
.brand-tho-dia{color:var(--brand-navy)}
.brand-review{color:var(--brand-silver)}
.brand-phu-yen{color:var(--brand-ocean)}
.logo-img{width:44px;height:44px;border-radius:50%;flex:none;box-shadow:0 2px 7px rgba(11,61,57,.28)}
@media(max-width:1120px){.logo-img{width:38px;height:38px}.logo{font-size:1.1rem}}
nav ul{display:flex;gap:6px;list-style:none}
nav a{padding:8px 14px;border-radius:8px;font-weight:600;color:var(--ink);font-size:.95rem;white-space:nowrap}
nav a:hover,nav a.active{background:#F6EEDA;color:var(--blue-d)}
.menu-btn{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--blue-d)}
/* Thanh menu cần nhiều chỗ hơn riêng phần nội dung. Ở 821–1120px, giữ giao
   diện desktop làm logo, tên tài khoản và nút đăng bài bị bẻ từng chữ. */
@media(max-width:1120px){
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;flex:none}
  nav ul{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;padding:10px 20px;border-bottom:1px solid var(--line);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto}
  nav ul.open{display:flex;z-index:5001}
  nav a{display:block;white-space:normal}
}

/* Hero */
.hero{background:linear-gradient(135deg,#0B3D39 0%,#145E56 55%,#0F5C56 100%);color:#fff;padding:70px 0 80px;text-align:center;position:relative;overflow:hidden}
/* Slideshow ảnh: chỉ ảnh đầu tải ngay; các ảnh còn lại do app.js tải khi khung
   đi vào màn hình. Không dùng Ken Burns liên tục vì vừa ép GPU vừa làm mobile
   giật khi cuộn. */
.hero-slides{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .7s ease;transform:translateZ(0)}
.hero-slide.is-active{opacity:1}
/* Lớp phủ xanh–vàng để chữ luôn đọc rõ trên ảnh sáng */
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,61,57,.58),rgba(11,61,57,.74)),
  radial-gradient(circle at 80% 20%,rgba(201,162,39,.22),transparent 45%)}
.hero .container{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}
.hero h1{font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:12px}
.hero p{max-width:640px;margin:0 auto 28px;opacity:.95}
.searchbar{display:flex;gap:8px;max-width:640px;margin:0 auto;background:#fff;padding:8px;border-radius:999px;box-shadow:0 10px 30px rgba(11,61,57,.3)}
.searchbar input,.searchbar select{border:none;outline:none;font-size:1rem;background:transparent;color:var(--ink)}
.searchbar input{flex:1;padding:8px 14px;min-width:0}
.searchbar select{padding:8px;border-left:1px solid var(--line)}
.btn{background:linear-gradient(135deg,#0F5C56,#C9A227);color:#fff;border:none;padding:10px 22px;border-radius:999px;font-weight:700;cursor:pointer;font-size:.95rem;box-shadow:0 4px 14px rgba(15,92,86,.35);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(201,162,39,.4)}
.btn-outline{background:#fff;border:2px solid var(--blue);color:var(--blue);padding:8px 20px;box-shadow:none}
.btn-outline:hover{background:#F6EEDA;transform:translateY(-2px)}

/* Sections */
section{padding:52px 0}
.sec-head{text-align:center;margin-bottom:34px}
.sec-head h2{font-size:1.7rem;color:var(--blue-d)}
.sec-head p{color:var(--muted)}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* Cards */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
a.card{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.card:hover{box-shadow:0 12px 26px rgba(15,92,86,.16)}
.cardlink{color:var(--blue);font-weight:600;font-size:.85rem;cursor:pointer}
.cardlink:hover{text-decoration:underline}
.cardlink.strong{color:var(--blue-d);font-weight:700}
.card .thumb{height:150px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#fff;overflow:hidden;background:#eee}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rank-thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}

/* Ảnh thẻ tự thích nghi theo chiều ảnh (app.js gắn class sau khi ảnh tải):
 * ảnh ngang phủ kín khung; ảnh dọc giữ trọn nội dung trên một nền lấy từ
 * chính ảnh đó. JS chưa chạy thì mặc định vẫn là cover như giao diện cũ. */
.smart-media{position:relative;isolation:isolate;overflow:hidden;background:#DCEAE7;contain:paint}
.smart-media::before{content:"";position:absolute;z-index:0;inset:-14px;
  background-image:var(--smart-media-bg);background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);pointer-events:none}
.smart-media img{position:relative;z-index:1;width:100%;height:100%;display:block;object-position:center}
.smart-media.smart-cover img{object-fit:cover}
.smart-media.smart-contain::before{opacity:.72;filter:blur(10px)}
.smart-media.smart-contain img{object-fit:contain}

/* ===== Thẻ cao bằng nhau =====
 * Trước đây thẻ cao thấp lộn xộn vì mô tả dài ngắn tuỳ nơi (51 tới hơn 2.200 ký tự).
 * Cách xử lý: KHOÁ SỐ DÒNG cho từng phần thay vì cắt chuỗi trong dữ liệu —
 * cắt chuỗi thì hỏng tìm kiếm và hỏng chỗ dò số điện thoại trong app.js.
 *
 * Vừa đặt số dòng tối đa (line-clamp) vừa đặt chiều cao tối thiểu (min-height):
 * chỉ có clamp thì thẻ mô tả ngắn vẫn co lại, vẫn lệch nhau.
 * Dùng em nên đổi cỡ chữ là chiều cao tự theo, không phải chỉnh lại số pixel. */
.card{display:flex;flex-direction:column}
.card .body{padding:16px;display:flex;flex-direction:column;flex:1}

.card h3{font-size:1.05rem;margin-bottom:6px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em}

.card .meta{font-size:.85rem;color:var(--muted);margin-bottom:8px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.8em}

.badge{display:inline-block;background:#F6EEDA;color:var(--blue-d);font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;margin-right:6px}
.badge.cat{background:var(--sand);color:#8A6A1E}

/* Hàng nhãn phải nằm trong .badges — .body là flex column nên nhãn để trần
   sẽ bị xếp dọc mỗi cái một dòng. Chừa sẵn chỗ 2 hàng vì mục có đủ
   VIP/TOP/lượt ghé thì 4 nhãn, mục thường chỉ 2. */
.card .badges{display:flex;flex-wrap:wrap;gap:6px 0;margin-bottom:8px;min-height:1.6rem;align-content:flex-start}
.card .badges .badge{margin-right:6px}

.card p.desc{font-size:.9rem;color:var(--ink);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:4.5em;margin:0}

/* Đẩy hàng "Xem chi tiết" xuống đáy để mọi thẻ có nút thẳng hàng nhau */
.card .links{margin-top:auto;padding-top:10px;display:flex;gap:12px;font-size:.85rem;font-weight:600}

/* Dòng "người chia sẻ" ở trang Cộng đồng: một dòng cố định, luôn chiếm chỗ
   kể cả khi trống, để thẻ có tên và thẻ không tên vẫn cao bằng nhau. */
.card .nguoi-chia-se{margin-top:auto;-webkit-line-clamp:1;line-clamp:1;min-height:1.4em}

/* Category tiles */
.tile{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;text-align:center;cursor:pointer;border:2px solid transparent;transition:transform .15s,box-shadow .15s,border-color .15s}
.tile:hover{transform:translateY(-4px);border-color:#DDD2B0;box-shadow:0 12px 26px rgba(15,92,86,.18)}
.tile .icon{font-size:2rem;margin-bottom:10px;width:60px;height:60px;line-height:60px;margin-left:auto;margin-right:auto;border-radius:50%;background:linear-gradient(135deg,#DCEAE7,#F3ECD9)}
.tile h3{font-size:1rem;color:var(--blue-d)}
.tile p{font-size:.8rem;color:var(--muted)}

/* Trang chủ — khối riêng, cố tình khác trang Địa điểm để có bản sắc */
.hero-stat{margin-top:18px;font-size:.9rem;opacity:.95}

.combo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.combo-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border:2px solid transparent;transition:transform .15s,border-color .15s}
.combo-card:hover{transform:translateY(-3px);border-color:#DDD2B0}
.combo-card-ico{font-size:1.8rem;width:52px;height:52px;flex:none;border-radius:50%;background:linear-gradient(135deg,#DCEAE7,#F3ECD9);display:flex;align-items:center;justify-content:center}
.combo-card h3{font-size:.98rem;color:var(--blue-d);margin-bottom:4px}
.combo-card p{font-size:.83rem;color:var(--muted)}

.spotlight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.spotlight-card{display:block;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .15s}
.spotlight-card:hover{transform:translateY(-3px)}
.spotlight-img{height:200px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:3.4rem;color:#fff;background-color:#8FC2B7}
.spotlight-img img{width:100%;height:100%;object-fit:cover;display:block}
.spotlight-body{padding:16px 18px}
.spotlight-cat{font-size:.78rem;font-weight:800}
.spotlight-body h3{font-size:1.1rem;margin:6px 0 4px;color:var(--ink)}
.spotlight-body p{font-size:.85rem;color:var(--muted)}

.community-box{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
.community-stats{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.community-stats div{text-align:center}
.community-stats b{display:block;font-size:1.6rem;color:var(--blue-d)}
.community-stats span{font-size:.8rem;color:var(--muted)}
.community-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.community-cols h4{font-size:.95rem;color:var(--blue-d);margin-bottom:10px}
.mini-lb-item{font-size:.88rem;padding:7px 0;border-bottom:1px dashed var(--line);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mini-feed-item{font-size:.88rem;padding:6px 0;border-bottom:1px dashed var(--line);display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;min-width:0}
.mini-feed-item:hover b{color:var(--teal);text-decoration:underline}
.mini-feed-thumb{position:relative;display:grid;place-items:center;flex:0 0 52px;width:52px;height:42px;border:1.5px solid var(--ink);border-radius:8px;background:var(--sand);overflow:hidden;font-size:1.15rem}
.mini-feed-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mini-feed-copy{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.25}
.mini-feed-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}
.mini-feed-copy .muted-sm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}
.mini-lb-pts{margin-left:auto;font-weight:700;color:var(--blue-d)}
.muted-sm{font-size:.85rem;color:var(--muted)}
@media(max-width:640px){.community-cols{grid-template-columns:1fr}}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;align-items:center}
.filters select,.filters input{padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;background:#fff}
.filters input{flex:1;min-width:180px}
.count{color:var(--muted);font-size:.9rem;margin-bottom:14px}

/* Blog */
.post-card .thumb{height:170px}
/* Thẻ blog không có hàng "links" nên ngày đăng chính là phần đáy —
   đẩy nó xuống dưới cùng để mọi thẻ có ngày thẳng hàng nhau. */
.post-card .date{font-size:.8rem;color:var(--muted);margin-top:auto;padding-top:10px}
/* Tiêu đề bài blog dài hơn tên địa điểm nhiều, cho 3 dòng thay vì 2 */
.post-card h3{-webkit-line-clamp:3;line-clamp:3;min-height:4.05em}
article.post{max-width:760px;margin:0 auto;background:#fff;padding:36px;border-radius:var(--radius);box-shadow:var(--shadow)}
article.post h1{font-size:1.8rem;color:var(--blue-d);margin-bottom:8px;line-height:1.3}
article.post .meta{color:var(--muted);font-size:.9rem;margin-bottom:22px}
article.post h2{color:var(--blue-d);margin:28px 0 10px;font-size:1.3rem}
article.post p{margin-bottom:14px}
article.post ul{margin:0 0 14px 22px}
article.post .info-box{background:#F7F2E4;border-left:4px solid var(--teal);padding:14px 18px;border-radius:8px;margin:16px 0;font-size:.95rem}
article.post figure{margin:18px 0}
article.post figure img{width:100%;border-radius:10px}
article.post figcaption{font-size:.78rem;color:var(--muted);margin-top:6px;text-align:center}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.home-posts-loading{grid-column:1/-1;text-align:center;padding:28px}
.breadcrumb{font-size:.85rem;color:var(--muted);padding:16px 0}

/* Map app: tabs + xếp hạng + bản đồ + chi tiết */
.map-app{display:flex;flex-direction:column;height:calc(100vh - 64px)}
/* Hàng gợi ý nhanh + ô tra cứu nằm bên trái (chung 1 hàng, không chiếm thêm không gian, luôn hiển thị) */
.map-combos-row{display:flex;align-items:center;gap:10px;padding:9px 16px;background:#F7F2E4;border-bottom:1px solid var(--line);flex-shrink:0;overflow:hidden}
.map-q{flex-shrink:0;width:220px;padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;font-size:.86rem;background:#fff;color:var(--ink)}
.map-q:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,92,86,.10)}
.map-combos-row .map-combos{padding:0;background:transparent;border-bottom:none;flex:1;min-width:0}
@media(max-width:640px){.map-q{width:150px}}
/* Hàng danh mục cũng tự co như hàng gợi ý — xem vua_khung() trong app.js */
.map-tabs{--co-fs:.9rem;--co-px:16px;--co-py:8px;--co-gap:8px;
  display:flex;gap:var(--co-gap);padding:10px 16px;background:#fff;
  border-bottom:1px solid var(--line);overflow-x:auto;flex-shrink:0}
.map-tabs.co-xuong-dong{flex-wrap:wrap;row-gap:6px;overflow-x:visible}
.map-tabs button{border:1px solid var(--line);background:#fff;
  padding:var(--co-py) var(--co-px);border-radius:999px;cursor:pointer;
  font-size:var(--co-fs);font-weight:700;white-space:nowrap;color:var(--ink)}
.map-tabs button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
/* Cỡ chip gợi ý do JS chỉnh (xem vua_khung_combo trong app.js): càng nhiều gợi ý
   thì chip càng co lại cho vừa một hàng. Co hết cỡ mà vẫn không đủ chỗ thì cho
   xuống dòng — thà cao thêm một hàng còn hơn cắt mất chữ ở mép phải. */
.map-combos{--co-fs:.85rem;--co-px:13px;--co-py:6px;--co-gap:8px;
  display:flex;align-items:center;gap:var(--co-gap);padding:9px 16px;background:#F7F2E4;
  border-bottom:1px solid var(--line);overflow-x:auto;flex-shrink:0}
.map-combos.co-xuong-dong{flex-wrap:wrap;row-gap:6px;overflow-x:visible}
/* Màn hình quá hẹp, riêng một chip đã dài hơn chỗ trống: cho chữ ngắt dòng
   ngay trong chip. Chip cao lên hai dòng nhưng đọc được trọn chữ. */
.map-combos.co-ngat-chu button,.map-tabs.co-ngat-chu button{white-space:normal;text-align:center;line-height:1.25}
.combo-lead{font-weight:700;color:var(--blue-d);font-size:.85rem;white-space:nowrap}
/* Chip gợi ý NGẮT DÒNG TRONG CHIP, áp cho cả máy tính lẫn điện thoại.
   Trước đây mỗi chip là một dòng dài liền mạch: "🌅 Hoàng hôn quanh Tuy Hoà (7)"
   kéo tới 253px. Cho chữ xuống dòng ngay trong chip thì còn 151px — hẹp hơn
   40% mà chữ vẫn nguyên cỡ, đọc được.

   20ch là con số ĐO RA trên màn hình thật, không phải ước lượng. Bảng đo ở
   bề ngang 1619px, tám chip hiện có:
       không ngắt : chip 253px, cao 34px, 1 hàng
       24ch       : chip 175px, cao 49px, 1 hàng
       20ch       : chip 151px, cao 49px, 1 hàng   ← hẹp nhất mà còn 1 hàng
       18ch       : chip 136px, cao 66px, 2 HÀNG   ← vỡ
       14ch       : chip 106px, cao 82px, 2 hàng
   Chọn 20ch vì đây là mức hẹp nhất còn giữ được một hàng, và chiều cao cả
   hàng vẫn đúng 70px y như trước khi ngắt dòng — tức là đổi được chip gọn
   hơn mà không phải trả thêm một milimet chiều cao nào.
   Hẹp hơn nữa thì chip tụt xuống 3 dòng và hàng vỡ làm đôi: cao gấp rưỡi mà
   chẳng được gì thêm. */
.map-combos button{border:1px solid #DDD2B0;background:#fff;
  padding:var(--co-py) var(--co-px);border-radius:999px;cursor:pointer;
  font-size:var(--co-fs);font-weight:600;color:var(--blue-d);
  white-space:normal;text-align:center;line-height:1.22;max-width:20ch}
.map-combos button:hover{background:#F0EADA}
.map-combos button.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.combo-hint{margin:10px 12px 0;padding:10px 12px;background:#F7F2E4;border-left:3px solid var(--teal);border-radius:8px;font-size:.85rem;color:var(--blue-d)}
.map-body{display:grid;grid-template-columns:340px 1fr;flex:1;min-height:0;position:relative}
#map{height:100%;min-height:300px}
.map-list{background:var(--bg);border-right:1px solid var(--line);overflow-y:auto;min-height:0}
.map-list-head{position:sticky;top:0;background:#fff;padding:12px 16px;border-bottom:1px solid var(--line);z-index:5;display:flex;justify-content:space-between;align-items:baseline}
.map-list-head h3{font-size:1rem;color:var(--blue-d)}
.map-list-head .count{margin:0}
.rank-item{display:flex;gap:10px;align-items:center;background:#fff;margin:10px 12px;padding:10px;border-radius:12px;box-shadow:var(--shadow);cursor:pointer;border:2px solid transparent}
.rank-item:hover{border-color:#DDD2B0}
.rank-item.sel{border-color:var(--blue)}
.rank-no{width:26px;height:26px;border-radius:50%;background:#e2e8f0;color:#475569;font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rank-no.gold{background:#fbbf24;color:#78350f}
.rank-no.silver{background:#cbd5e1;color:#334155}
.rank-no.bronze{background:#fdba74;color:#7c2d12}
.rank-thumb{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;flex-shrink:0}
.rank-info{min-width:0}
.rank-info h4{font-size:.92rem;line-height:1.3;margin-bottom:2px}
.rank-info p{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.badge.hot{background:#fef3c7;color:#92400e}
.map-detail{position:absolute;top:0;right:0;bottom:0;width:360px;background:#fff;border-left:1px solid var(--line);overflow-y:auto;z-index:600;box-shadow:-4px 0 16px rgba(15,23,42,.12)}
.detail-close{position:sticky;top:10px;margin:10px;background:#0B3D39;color:#fff;border:none;padding:7px 14px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.8rem;z-index:5}
.detail-hero{height:150px;display:flex;align-items:center;justify-content:center;font-size:3.4rem;color:#fff;margin-top:-46px}
.detail-pad{padding:18px}
.detail-pad h2{font-size:1.3rem;color:var(--blue-d);line-height:1.3}
.detail-addr{font-size:.92rem;margin-bottom:14px}
.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.detail-actions .btn{font-size:.85rem;padding:9px 14px}
.btn-green{background:#16a34a}
.btn-green:hover{background:#15803d}
.detail-h3{color:var(--blue-d);font-size:1rem;margin-bottom:6px}
.detail-desc{font-size:.92rem;color:var(--ink)}
.map-reviews{font-size:.9rem}
.map-rv{background:#faf7f0;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px}
.map-rv b{color:var(--ink)}
.map-rv p{margin-top:3px;color:var(--ink);font-size:.88rem}
/* Thư viện ảnh/video trong panel bản đồ */
.map-media .mm-imgs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.map-media .mm-imgs a{width:72px;height:60px;border-radius:8px;overflow:hidden;flex:none;cursor:zoom-in}
.map-media .mm-imgs img{width:100%;height:100%;object-fit:cover;display:block}
.map-media .mm-vids{display:flex;flex-wrap:wrap;gap:8px}
.mm-vid{position:relative;width:112px;height:64px;border-radius:8px;overflow:hidden;flex:none}
.mm-vid img{width:100%;height:100%;object-fit:cover;display:block}
.mm-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;background:rgba(0,0,0,.28)}
.mm-vlink{display:inline-block;background:#1877f2;color:#fff;font-size:.82rem;font-weight:700;padding:6px 12px;border-radius:8px}
/* Badge VIP / HOT + lượt xem ở danh sách trái */
.badge.vip{background:linear-gradient(135deg,#C9A227,#8A6A1E);color:#fff}
.badge.hotx{background:#fee2e2;color:#b91c1c}
.rank-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.rank-views{font-size:.72rem;color:var(--muted);font-weight:700;margin-right:2px}
/* Ô quảng cáo nổi tự đổi trên bản đồ */
.map-ad{position:absolute;left:356px;bottom:16px;width:290px;max-width:calc(100% - 372px);background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;box-shadow:0 8px 24px rgba(11,61,57,.18);padding:12px 12px 12px 14px;z-index:500}
.map-ad-in{display:flex;gap:10px;align-items:center;text-decoration:none;cursor:pointer}
.map-ad-thumb{width:54px;height:54px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff}
.map-ad-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.map-ad-txt b{color:var(--blue-d);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.map-ad-txt>span{color:var(--muted);font-size:.8rem;line-height:1.3}
.map-ad-x{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--muted);font-size:.9rem;cursor:pointer}
.map-ad-tag{position:absolute;bottom:6px;right:10px;font-size:.66rem;color:#b6ab8f;font-style:italic}
.map-ad.flash{animation:adFlash .5s ease}
@keyframes adFlash{0%{opacity:.2;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.map-ad{left:12px;right:12px;width:auto;max-width:none;bottom:12px}}
@media(max-width:900px){
  .map-body{grid-template-columns:1fr;grid-template-rows:45vh 1fr}
  #map{grid-row:1}
  .map-list{grid-row:2;border-right:none;border-top:1px solid var(--line)}
  .map-detail{position:fixed;top:64px;width:100%;bottom:0}
}

/* Ảnh do Agent tự chia giữa các đoạn bài. HTML được máy chủ dựng từ ảnh đã
   kiểm tra quyền sở hữu, không nhận HTML thô từ model. */
.agent-inline-photo{margin:18px 0 22px}
.agent-inline-photo img{
  display:block;width:100%;height:auto;max-height:720px;object-fit:contain;
  border-radius:16px;border:2px solid var(--ink);background:#f5f2ea;
}
.agent-inline-photo figcaption{margin-top:6px;color:var(--muted);font-size:.82rem}
@media(max-width:700px){
  .agent-inline-photo{margin:14px 0 18px}
  .agent-inline-photo img{border-radius:11px}
}

/* CTA */
.cta{background:linear-gradient(135deg,#0B3D39,#C9A227);color:#fff;text-align:center;border-radius:var(--radius);padding:44px 24px;box-shadow:0 10px 30px rgba(11,61,57,.25)}
.cta h2{margin-bottom:10px}
.cta p{opacity:.9;margin-bottom:20px}

/* Footer */
footer{background:linear-gradient(120deg,#0B3D39 0%,#2E6152 38%,#7C7A34 70%,#C9A227 100%);color:#FFF8E7;padding:40px 0 24px;margin-top:40px;border-top:3px solid #C9A227}
footer .grid-4{gap:30px}
footer h4{color:#fff;margin-bottom:12px;font-size:1rem}
footer ul{list-style:none}
footer li{margin-bottom:8px;font-size:.9rem}
footer a{color:#FBF3DA}
footer a:hover{color:#fff}
/* Logo thương hiệu ở cột đầu chân trang (footer lưới) */
.foot-logo{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot-logo,.footer-brand-center{width:max-content;max-width:100%;text-decoration:none;opacity:1}
.foot-logo:hover,.footer-brand-center:hover{opacity:1}
.foot-logo img{width:46px;height:46px;flex:none}
.foot-logo b{font-size:1.3rem;font-weight:800;color:#fff;letter-spacing:.3px}
.foot-logo span{color:inherit}
/* Brand gọn cho footer tối giản (căn trái như mẫu) */
.footer-brand{display:flex;align-items:center;gap:12px;justify-content:flex-start;text-align:left;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.15)}
.footer-brand img{width:48px;height:48px;flex:none}
.footer-brand b{display:block;color:#fff;font-size:1.1rem;line-height:1.2}
.footer-brand span{font-size:.85rem;color:#F3E7C4}
.copy{border-top:1px solid rgba(255,255,255,.22);margin-top:28px;padding-top:18px;text-align:center;font-size:.85rem;color:#F6EFD8}
/* Chân trang tối giản: logo + tên căn GIỮA, không có đường kẻ ngang */
.footer-mini{text-align:center}
.footer-brand-center{display:inline-flex;align-items:center;gap:12px;text-align:left}
.footer-brand-center img{width:48px;height:48px;flex:none}
.footer-brand-center b{display:block;color:#fff;font-size:1.1rem;line-height:1.2}
.footer-brand-center span{font-size:.85rem;color:#F3E7C4}
.footer-mini .copy{border-top:none;margin-top:12px;padding-top:0}
/* Chấm đỏ số thông báo chưa đọc ở menu tài khoản */
.notif-dot{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:.72rem;font-weight:800;text-align:center;vertical-align:middle}
/* Hộp cảnh báo trùng địa điểm ở form đăng */
.dup-warn{background:#FFFBEB;border:1px solid #FCD34D;border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:.92rem;color:#7c5b12}
.dup-warn ul{margin:8px 0 0;padding-left:18px}
.dup-warn li{margin-bottom:5px}
.dup-warn a{color:var(--blue-d);font-weight:700;text-decoration:underline}
.dup-warn .muted-sm{color:#8a7a4d}
/* Bảng giá / loại phòng trên trang chi tiết địa điểm */
.price-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.price-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.price-table th{background:var(--sand);color:var(--blue-d);text-align:left;padding:10px 14px;font-size:.85rem}
.price-table td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
.price-table .price-cell{color:var(--blue);font-weight:800;white-space:nowrap}
@media(max-width:560px){
  .price-table thead{display:none}
  .price-table,.price-table tbody,.price-table tr,.price-table td{display:block;width:100%}
  .price-table tr{border-top:1px solid var(--line);padding:6px 0}
  .price-table td{border:none;padding:4px 14px}
  .price-table td::before{content:attr(data-th) ": ";font-weight:700;color:var(--muted)}
  .price-table td[data-th="Loại / gői"]::before,.price-table td:first-child::before{content:""}
}

/* ===== Trang chi tiết địa điểm (PHP) ===== */
.place-detail{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;max-width:860px;margin:0 auto 40px}
/* ===== Ảnh lớn đầu trang chi tiết (địa điểm + bài blog dùng chung) =====
 * Đã thử hai cách trước đây, cả hai đều sai:
 *   - background cover trong khung cao cố định  -> ảnh dọc mất tới 70% chiều cao
 *   - background contain + nền mờ hai bên       -> không mất gì, nhưng ảnh ngang
 *     bị thu nhỏ nằm giữa, nhìn như bị hụt hai bên cánh
 *
 * Cách hiện tại: <img> thật, rộng 100%, cao TỰ THEO TỶ LỆ ẢNH.
 * Ảnh ngang tràn hết bề ngang và hiện trọn vẹn, không cắt, không viền.
 *
 * Đo trên 354 ảnh đang có: ảnh ngang tỷ lệ 1,07–2,70 (trung vị 4:3), ảnh dọc
 * 0,45–0,91. Ảnh dọc để nguyên tỷ lệ sẽ cao 942–1904px — chiếm hết màn hình,
 * người xem phải cuộn mãi mới tới nội dung. Nên phải chặn chiều cao, và khi bị
 * chặn thì object-fit:cover cắt bớt trên/dưới, giữ nguyên bề ngang.
 *
 * Mức chặn min(78vh, 760px): trên màn hình lớn cho ảnh ngang tỷ lệ từ 1,13 trở
 * lên hiện trọn — tức gần hết số ảnh ngang đang có. */
.place-hero{overflow:hidden;background:#0B3D39;line-height:0}
.place-hero img{display:block;width:100%;height:auto;
  max-height:min(78vh,760px);object-fit:cover;object-position:center}

/* Không có ảnh: khung cao cố định để đặt biểu tượng danh mục */
.place-hero-trong{height:280px;display:flex;align-items:center;justify-content:center;line-height:1}
.place-hero-ico{font-size:5rem}
@media(max-width:640px){.place-hero-trong{height:200px}}
.place-body{padding:24px}
.place-desc{font-size:.98rem;color:var(--ink);line-height:1.7}

/* ===== Huy hiệu "Đã kiểm chứng" =====
 * Màu xanh lá riêng, KHÔNG dùng chung màu với 👑 VIP (chỗ trả phí) hay
 * 🔥 TOP: người đọc phải phân biệt được đâu là quảng cáo, đâu là thông tin
 * đã có người soát. Trộn màu là trộn luôn ý nghĩa. */
.badge.kiem{background:#dcfce7;color:#166534;border:1.5px solid #16a34a;font-weight:800}

/* Dòng ghi nguồn ở cuối trang địa điểm nhập bằng máy.
 * Cố ý để nhạt và nằm cuối: đây là lời nói thật cần có, nhưng không phải
 * thứ đập vào mắt trước cả nội dung. */
.nguon-tin{
  margin:22px 0 4px;padding:12px 14px;border-radius:12px;
  background:#fffbea;border:1.5px solid #FCD34D;
  font-size:.86rem;line-height:1.6;color:#7a6a52
}
.nguon-tin b{color:#5b4c38}
.nguon-tin a{color:#0f5c56;font-weight:700}

/* ===== Nội dung dán thẳng vào thân bài viết =====
 * Mã nhúng YouTube copy từ trang YouTube luôn mang sẵn width="560" height="315".
 * Hai con số đó cố định nên khung video nằm co ro giữa bài, không ăn theo bề
 * ngang khung bài — chính là chuyện đang thấy. Ép lại bằng CSS ở đây thay vì
 * sửa từng bài trong database: người viết cứ dán mã gốc như thường, bài cũ đã
 * đăng cũng tự đúng theo, không phải mở lại sửa tay bài nào. */
.place-desc iframe{
  width:100%;max-width:100%;height:auto;aspect-ratio:16/9;
  display:block;margin:18px 0;border:0;border-radius:12px;
  box-shadow:var(--shadow);background:#000
}
/* Video dọc (Shorts) mà ép 16:9 thì hai bên đen thui, người xem tưởng lỗi.
 * Cho khung dọc và căn giữa — vừa mắt hơn hẳn. */
.place-desc iframe[src*="shorts"]{aspect-ratio:9/16;max-width:340px;margin-left:auto;margin-right:auto}
/* Bản đồ nhúng không phải video, khung 16:9 quá dẹt để nhìn đường. */
.place-desc iframe[src*="google.com/maps"]{aspect-ratio:4/3}
/* Ảnh, video tự tải lên cũng không được tràn ra ngoài khung bài. */
.place-desc img,.place-desc video{max-width:100%;height:auto;display:block;margin:14px 0;border-radius:12px}
/* Bảng dài trong bài thì cho cuộn ngang, đừng đẩy vỡ cả trang. */
.place-desc table{width:100%;display:block;overflow-x:auto}
/* Thư viện ảnh + video của địa điểm */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gallery-item{display:block;position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in}
.gallery-item img{width:100%;height:140px;object-fit:cover;transition:transform .25s}
.gallery-item:hover img{transform:scale(1.06)}
.media-source-badge{position:absolute;left:7px;bottom:7px;padding:4px 7px;border:1.5px solid var(--ink);border-radius:999px;background:#b8e8cb;color:var(--ink);font:700 .68rem/1 var(--font-body);box-shadow:2px 2px 0 var(--ink)}
.media-source-badge.community{background:#fff3bf}
.video-list{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.video-embed{width:100%;max-width:600px;aspect-ratio:16/9;height:auto;border:none;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#000;display:block}
.video-embed iframe{width:100%;height:100%;border:0;display:block}
/* YouTube Shorts / video dọc: khung dọc 9:16, không viền đen 2 bên */
.video-embed.short{max-width:300px;aspect-ratio:9/16}
/* TikTok dán trực tiếp trong thân bài: giữ khung dọc và căn giữa bài. */
.place-desc .video-embed.tiktok-inline{margin:18px auto}

/* ===== Thẻ video "bấm mới tải" (dùng cho TikTok) =====
 * Trước khi bấm, đây chỉ là một tấm ảnh bìa do máy chủ mình giữ. Player thật
 * của TikTok nặng 1,34 MB và 65 lượt gọi mạng — hoãn tới lúc khách thật sự
 * muốn xem thì trang nhẹ đi hàng chục lần, mà khách vẫn xem ngay tại chỗ. */
.video-facade{
  position:relative;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:0;padding:0;cursor:pointer;color:#fff;font:inherit;
  background-color:#111;background-size:cover;background-position:center;
}
/* Lớp phủ tối cho nút và chữ nổi lên trên ảnh bìa sáng */
.video-facade::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));transition:background .2s}
.video-facade:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.video-facade > *{position:relative}
.vf-play{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.94);
  box-shadow:0 4px 16px rgba(0,0,0,.4);transition:transform .18s}
/* Tam giác play vẽ bằng CSS, khỏi tải thêm ảnh hay icon font nào */
.vf-play::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #111}
.video-facade:hover .vf-play{transform:scale(1.08)}
.vf-nhan{font-size:.82rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6);padding:0 10px;text-align:center}
.video-facade:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.lightbox{position:fixed;inset:0;background:rgba(8,31,29,.94);display:none;align-items:center;justify-content:center;z-index:10000;padding:20px;touch-action:none}
.lightbox.on{display:flex}
.lightbox-open{overflow:hidden}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));width:46px;height:46px;border:2px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:1.4rem;cursor:pointer;z-index:2;transition:background .15s}
.lb-close:hover{background:rgba(255,255,255,.34)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;z-index:2;transition:background .15s}
.lb-nav:hover{background:rgba(255,255,255,.34)}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:.9rem;background:rgba(0,0,0,.45);padding:4px 14px;border-radius:999px;z-index:2}
@media(max-width:600px){.lb-nav{width:44px;height:44px;font-size:1.8rem}.lb-prev{left:6px}.lb-next{right:6px}}
.badge.hot{background:#fef3c7;color:#92400e}
.detail-actions{display:flex;flex-wrap:wrap;gap:8px}
.detail-actions .btn{font-size:.9rem}
.reviews{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.review-item{background:#FAF7F0;border:1px solid var(--line);border-radius:12px;padding:14px}
.review-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.review-stars{color:#f59e0b;letter-spacing:1px}
.review-form{background:#F7F2E4;border-radius:14px;padding:18px;margin-top:14px}
/* chọn sao: hiển thị phải→trái để hover tô sáng */
.stars-input{display:inline-flex;flex-direction:row-reverse;gap:2px;font-size:1.8rem}
.stars-input input{display:none}
.stars-input label{color:#d1d5db;cursor:pointer;transition:color .1s}
.stars-input input:checked ~ label,.stars-input label:hover,.stars-input label:hover ~ label{color:#f59e0b}

/* ===== Form đăng địa điểm / auth công khai ===== */
.pub-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;max-width:640px;margin:30px auto}
.pub-card.narrow{max-width:440px}
.pub-card h1{color:var(--blue-d);font-size:1.5rem;margin-bottom:6px;text-align:center}
.pub-card .sub{color:var(--muted);text-align:center;margin-bottom:20px;font-size:.92rem}
.pub-field{margin-bottom:15px}
.pub-field label{display:block;font-weight:700;font-size:.85rem;color:var(--blue-d);margin-bottom:6px}
.pub-field input,.pub-field select,.pub-field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;font-family:inherit;background:#fff;color:var(--ink)}
.pub-field input:focus,.pub-field select:focus,.pub-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,92,86,.15)}
.pub-field textarea{min-height:120px;resize:vertical}
.pub-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.pub-grid2{grid-template-columns:1fr}}
.pub-links{text-align:center;margin-top:16px;font-size:.9rem}
.social-login{margin-top:16px}
.social-sep{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:.82rem}
.social-sep::before,.social-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-fb{width:100%;background:#1877f2;color:#fff;border:none;border-radius:12px;padding:11px 16px;font-weight:700;font-size:.95rem;cursor:not-allowed;opacity:.55}
.review-gate{background:#F7F2E4;border:1px dashed var(--blue);border-radius:14px;padding:18px;text-align:center;margin-top:16px}
.review-gate a.btn{margin-top:8px}
.review-private-hint{font-size:.78rem;color:var(--muted);margin-top:4px}
.adm-flash{padding:12px 15px;border-radius:12px;margin-bottom:16px;font-weight:600;font-size:.92rem}
.adm-flash.ok{background:#dcfce7;color:#166534}
.adm-flash.err{background:#fee2e2;color:#991b1b}
.hero-cta{background:linear-gradient(135deg,#0F5C56,#C9A227);color:#fff;border-radius:var(--radius);padding:26px;text-align:center;max-width:860px;margin:0 auto 26px}
.hero-cta .btn{background:#fff;color:var(--blue-d)}

/* ===== Gamification: huy hiệu, thanh điểm, bảng xếp hạng ===== */
.rank-card{display:flex;align-items:center;gap:16px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;flex-wrap:wrap}
.rank-badge{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#DCEAE7,#F3ECD9);display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0}
.rank-bar{height:9px;background:#E7E1D2;border-radius:999px;overflow:hidden}
.rank-bar span{display:block;height:100%;background:linear-gradient(90deg,#0F5C56,#C9A227);border-radius:999px}
.lb-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.lb-rank{width:34px;height:34px;border-radius:50%;background:#f1f5f9;color:#475569;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lb-rank.g1{background:#fbbf24;color:#78350f}.lb-rank.g2{background:#cbd5e1;color:#334155}.lb-rank.g3{background:#fdba74;color:#7c2d12}
.lb-name{flex:1;font-weight:700}
.lb-pts{font-weight:800;color:var(--blue-d)}
.badge-rank{display:inline-block;background:linear-gradient(135deg,#0F5C56,#C9A227);color:#fff;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:999px}
/* Bản tin Fanpage: vẫn là timeline Facebook thật. Phần đầu được thu gọn và
   iframe chỉ tải khi người dùng cuộn gần tới đây để trang Cộng đồng nhẹ hơn. */
.fb-feed{padding:0;border:var(--bd);border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.fb-feed-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 14px;background:#eef4ff;border-bottom:2px solid var(--ink)}
.fb-feed-head h2{color:var(--blue-d);font-size:1.08rem;line-height:1.2;margin:0}
.fb-feed-head p{color:var(--muted);font-size:.76rem;margin:3px 0 0}
.fb-feed-head>a{flex:none;font-size:.78rem;font-weight:800;color:#1877F2;text-decoration:none}
.fb-feed-head>a:hover{text-decoration:underline}
.fb-wrap{display:flex;justify-content:center;min-height:640px;background:#f5f6f7}
.fb-wrap iframe{display:block;width:100%;max-width:360px;height:640px;border:0;overflow:hidden}

/* Cột trái rất dài. Cho aside cao theo cả hàng lưới, rồi ghim riêng Fanpage:
   Top thổ địa cuộn đi, timeline Facebook bám dưới header và lấp cột phải. */
.cong-sidebar{align-self:stretch;min-width:0}
@media(min-width:861px){
  .cong-sidebar .fb-feed{position:sticky;top:84px}
}

/* Cộng đồng + Top 10 gộp thành một bảng gọn. Các chi tiết phụ là chip tự co,
   tránh hai banner và những ô trắng lớn đẩy tin cộng đồng xuống dưới nếp gấp. */
.community-game{margin:0 0 22px;padding:clamp(16px,2vw,22px);border:var(--bd);
  border-radius:var(--radius);background:linear-gradient(135deg,#fff7d6 0%,#e6f8ee 100%);
  box-shadow:var(--shadow)}
.community-game-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.top10-free{display:inline-flex;padding:5px 11px;border:2px solid var(--ink);border-radius:999px;
  background:#fff;color:var(--blue-d);font-size:.76rem;font-weight:800}
.community-game h1{font-size:clamp(1.28rem,2.2vw,1.72rem);color:var(--blue-d);margin:8px 0 4px;line-height:1.2}
.community-game h1 span{font-size:.72em;color:var(--ink);white-space:nowrap}
.community-game-copy>p{font-size:.9rem;line-height:1.55;max-width:780px;margin:0}
.community-game-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:390px}
.community-game-actions .btn{white-space:nowrap;padding:10px 14px;font-size:.86rem}
.community-game-strip{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;
  flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:2px dashed rgba(22,35,31,.22)}
.community-game-rules,.community-game-leaders{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.community-game-rules span,.community-game-leaders span{padding:5px 9px;border:1.5px solid var(--ink);
  border-radius:999px;background:#fff;font-size:.75rem;line-height:1.25;white-space:nowrap}
.community-game-rules b,.community-game-leaders b{color:var(--blue-d)}
.community-game-leaders strong{font-size:.78rem;color:var(--blue-d);white-space:nowrap}
.community-game-leaders .is-empty{border-style:dashed;color:var(--muted);white-space:normal}
@media(max-width:860px){
  .community-game-main{grid-template-columns:1fr;gap:12px}
  .community-game-actions{justify-content:flex-start;max-width:none}
  .community-game-strip{align-items:flex-start}
  .cong-sidebar .fb-feed{position:static}
  .fb-wrap,.fb-wrap iframe{min-height:520px;height:520px}
}
@media(max-width:520px){
  .community-game h1 span{display:block;margin-top:3px;white-space:normal}
  .community-game-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .community-game-actions .btn{padding:9px 8px;font-size:.78rem;text-align:center}
  .community-game-rules,.community-game-leaders{gap:6px}
  .community-game-rules span,.community-game-leaders span{font-size:.7rem;padding:4px 7px}
}
.top10-page{max-width:1040px}
.top10-page .hero-cta{max-width:none}
.top10-policy{margin:18px 0;padding:22px;border:2px solid var(--ink);border-radius:18px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.top10-policy h2{font-size:1.25rem;color:var(--blue-d);margin:8px 0}
.top10-policy p,.top10-policy li{font-size:.91rem;line-height:1.7}
.top10-policy ol{padding-left:22px}.top10-policy ol li+li{margin-top:5px}
.top10-policy ul{list-style:none;padding:0}
.top10-policy ul li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.top10-policy ul li b{text-align:right;white-space:nowrap;color:var(--blue-d)}
.top10-policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.top10-policy-grid .top10-policy{margin:0}
.top10-small{font-size:.8rem!important;color:var(--muted);margin-top:10px}
.top10-first-month{margin-top:12px;padding:10px 12px;border-radius:11px;background:#eef4ff;color:#1e3a5f;font-size:.82rem!important}
.top10-board-month{margin:20px 0;border:var(--bd);border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.top10-board-head{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--sand);border-bottom:2px solid var(--ink)}
.top10-board-head span{font-size:.76rem;font-weight:800;color:var(--muted)}
.top10-board-head h2{font-size:1.2rem;color:var(--blue-d);margin:0}
.top10-board-head>a{font-size:.8rem;font-weight:800;text-decoration:none}
.top10-empty{padding:28px;text-align:center;color:var(--muted);font-size:.9rem}
.top10-renew-win{margin-bottom:18px;padding:16px 18px;border:2px solid #166534;border-radius:15px;background:#dcfce7;color:#14532d}
.top10-renew-win> b{font-family:var(--font-head);font-size:1.05rem}.top10-renew-win p{font-size:.88rem;line-height:1.55;margin:4px 0 0}
.top10-rank-callout{max-width:860px;margin:0 auto 18px;padding:13px 16px;border:2px solid var(--ink);border-radius:14px;background:#fff7d6;font-size:.86rem;line-height:1.55}
.top10-rank-callout>a{font-weight:800;white-space:nowrap}
@media(max-width:720px){
  .top10-policy-grid{grid-template-columns:1fr}
  .top10-policy{padding:17px}
  .top10-policy ul li{display:block}.top10-policy ul li b{display:block;text-align:left;margin-top:2px}
  .top10-board-head{align-items:flex-start;flex-direction:column}
}

/* ═══════════════════════════════════════════════════════════════════
   THEME "TRẺ TRUNG" — lớp phủ neo-brutalist
   Toàn bộ nằm dưới đây; xoá nguyên khối này là quay về theme cũ.
   Không đổi tên class nào → mọi trang HTML/PHP tự áp dụng.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --blue:#0E7C74;        /* teal chủ đạo */
  --blue-d:#0A5F59;      /* teal đậm */
  --teal:#FF6B57;        /* coral — màu nhấn */
  --mint:#B8E8CB;
  --sand:#FFE3A3;
  --sun:#FFD166;
  --ink:#16231F;
  --muted:#4A5551;
  --bg:#FFFBF3;
  --card:#ffffff;
  --line:#E6DDCA;
  --radius:24px;
  --shadow:5px 5px 0 var(--ink);
  --shadow-lg:8px 8px 0 var(--ink);
  --bd:2.5px solid var(--ink);
  --font-head:'Baloo 2','Segoe UI',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink)}
h1,h2,h3,h4,.logo,.foot-logo b{font-family:var(--font-head);letter-spacing:-.01em}
::selection{background:var(--sun);color:var(--ink)}
a{color:var(--blue)}
a:hover{color:var(--blue-d)}

/* ── Header ───────────────────────────────────────────────── */
header{background:rgba(255,251,243,.93);backdrop-filter:blur(10px);border-bottom:3px solid var(--ink)}
.nav{height:70px}
.logo{color:var(--ink);font-weight:800}
.logo span{color:inherit}
.logo .brand-tho-dia{color:var(--brand-navy)}
.logo .brand-review{color:#FFFFFF;text-shadow:-.6px -.6px 0 #465568,.6px -.6px 0 #465568,-.6px .6px 0 #465568,.6px .6px 0 #465568}
.logo .brand-phu-yen{color:var(--brand-ocean);text-shadow:0 1px 0 #075985}
.logo-img{border:2.5px solid #F3EFE3;box-shadow:none;object-fit:cover}
nav a{border-radius:999px;font-weight:700;padding:9px 16px}
nav a:hover{background:var(--sand);color:var(--ink)}
nav a.active{background:var(--sand);color:var(--ink)}
/* Nút nổi bật (Đăng địa điểm / Đăng nhập) — dùng CLASS riêng thay vì :last-child.
   Trước đây dựa vào :last-child nên khi đăng nhập, mục cuối cùng đổi thành link
   tài khoản (tên người dùng) lại vô tình bị áp kiểu nút to màu cam này, tên dài
   là tràn hẳn ra ngoài khung. */
nav .nav-cta{background:var(--teal)!important;color:#fff!important;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:800}
nav .nav-cta:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
/* Link tài khoản khi đã đăng nhập — chữ dài (tên, hoặc lỡ ai gõ nhầm email vào
   ô tên) không được phép làm vỡ thanh menu, luôn cắt gọn kèm dấu ba chấm. */
nav .nav-account{display:inline-flex;align-items:center;max-width:200px}
nav .nav-account .nav-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;display:inline-block;vertical-align:middle}
@media(max-width:1120px){nav .nav-account,nav .nav-account .nav-account-name{max-width:none;white-space:normal}}
.menu-btn{border:2.5px solid var(--ink);border-radius:12px;width:44px;height:44px;background:#fff;font-size:1.3rem;color:var(--ink)}
@media(max-width:1120px){nav ul{top:70px;border:none;border-bottom:3px solid var(--ink);gap:8px;padding:14px 20px;max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px)}}
/* Leaflet tự tạo stacking layer cho nút zoom và control tùy biến. Khi menu
   mobile mở, ẩn tương tác bản đồ để các control không thể nổi đè lên menu. */
@media(max-width:1120px){
  body.nav-open{overflow:hidden}
  body.nav-open .map-app .leaflet-control-container,
  body.nav-open .map-app .vn-overview-btn,
  body.nav-open .map-app .map-ad,
  body.nav-open .map-app .map-detail{visibility:hidden!important;pointer-events:none!important}
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{background:var(--bg);color:var(--ink);padding:60px 0 56px}
.hero::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--mint);top:-150px;left:-110px;filter:blur(2px);animation:blobFloat 9s ease-in-out infinite;z-index:0}
.hero::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--sun);top:30px;right:-95px;opacity:.85;animation:blobFloat 11s ease-in-out infinite reverse;z-index:0}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14px,-18px) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}}
.hero-slides,.hero-overlay{display:none}
.hero h1{font-size:clamp(2rem,5.5vw,3.4rem);font-weight:800;line-height:1.08;color:var(--ink);margin-bottom:16px}
.hero h1 span,.hero h1 em{color:var(--teal);font-style:normal}
.hero p{color:var(--muted);max-width:580px;font-size:1.06rem;opacity:1}
.hero-tag{display:inline-block;background:var(--ink);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.05em;padding:6px 16px;border-radius:999px;transform:rotate(-3deg);margin-bottom:20px}
.searchbar{border:2.5px solid var(--ink);box-shadow:var(--shadow);max-width:580px}
.searchbar input::placeholder{color:#8C948F}
.searchbar .btn{background:var(--ink);box-shadow:none;border:none}
.searchbar .btn:hover{background:var(--blue-d);transform:none;box-shadow:none}
.hero-stat{color:var(--muted);font-weight:600;opacity:1;font-size:.93rem}
.hero-stat a{color:var(--blue)!important;text-decoration:underline}
/* Băng ảnh Phú Yên dưới hero */
.hero-strip{position:relative;height:260px;border-radius:28px;border:var(--bd);overflow:hidden;box-shadow:6px 6px 0 var(--ink);max-width:1140px;margin:26px auto 0;background:#DCEAE7}
.hero-strip .hero-slides{display:block;position:absolute;inset:0}
.hero-strip .hero-slide{display:block}
.hero-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,35,31,0) 50%,rgba(22,35,31,.6));pointer-events:none}
.hero-strip-tag{position:absolute;left:20px;bottom:16px;z-index:3;background:#fff;color:var(--ink);font-weight:800;font-size:.82rem;padding:7px 16px;border-radius:999px;border:2px solid var(--ink)}

/* Trang chủ trên điện thoại: một hàng gợi ý vuốt ngang thay vì tám thẻ xếp dọc
   chiếm gần hết trang. Việc cover/contain của ảnh do initSmartMedia() tự chọn. */
@media(max-width:700px){
  .hero-strip{height:clamp(180px,46vw,220px);margin-top:18px;border-radius:20px;box-shadow:4px 4px 0 var(--ink)}
  .hero-strip-tag{left:12px;bottom:10px;max-width:calc(100% - 24px);padding:5px 11px;font-size:.76rem}
  .home-suggestions{padding-top:34px!important}
  #home-combos.combo-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
    margin-left:-20px;margin-right:-20px;padding:2px 20px 9px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #home-combos.combo-grid::-webkit-scrollbar{display:none}
  #home-combos .combo-card{flex:0 0 min(78vw,300px);min-height:86px;padding:12px;gap:10px;
    align-items:center;scroll-snap-align:start}
  #home-combos .combo-card-ico{width:42px;height:42px;font-size:1.35rem}
  #home-combos .combo-card h3{font-size:.9rem;line-height:1.25;margin:0}
  #home-combos .combo-card p{font-size:.75rem;line-height:1.35;margin-top:3px;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .spotlight-grid{grid-template-columns:1fr;gap:16px}
  .spotlight-img{height:170px}
  .spotlight-body{padding:13px 16px}
  .spotlight-body h3{margin:3px 0 2px}
  section{padding:38px 0}
  .sec-head{margin-bottom:22px}
}

/* ── Nút ──────────────────────────────────────────────────── */
.btn{background:var(--teal);color:#fff;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:999px;font-weight:800;padding:11px 22px;transition:transform .12s,box-shadow .12s}
.btn:hover{background:var(--teal);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-outline{background:#fff;color:var(--ink);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn-outline:hover{background:var(--sand);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-green{background:#0E9F6E}
.btn-green:hover{background:#0E9F6E}

/* ── Tiêu đề mục ──────────────────────────────────────────── */
.sec-head h2{font-size:1.75rem;font-weight:700;color:var(--ink)}
.sec-head p{color:var(--muted)}

/* ── Thẻ ──────────────────────────────────────────────────── */
.card,.tile,.combo-card,.spotlight-card,.community-box,.rank-card,.pub-card,.place-detail,article.post{
  border:var(--bd);box-shadow:var(--shadow);border-radius:var(--radius);background:#fff}
.card:hover,.spotlight-card:hover,a.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.tile:hover,.combo-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);border-color:var(--ink)}
.combo-card{border:var(--bd)}
.tile .icon,.combo-card-ico,.rank-badge{background:var(--sand);border:2px solid var(--ink)}
.tile h3,.combo-card h3,.spotlight-body h3,.card h3{color:var(--ink)}
.badge{background:var(--sand);color:var(--ink);font-weight:800;border-radius:999px}
.badge.cat{background:var(--mint);color:var(--ink)}
.badge.hot,.badge.hotx{background:#FFD9D2;color:#B3341F}
.badge.vip{background:var(--sun);color:var(--ink);border:1.5px solid var(--ink)}
.badge-rank{background:var(--ink);color:#fff;font-weight:800}
.card .thumb,.spotlight-img,.post-card .thumb{border-bottom:2.5px solid var(--ink)}

/* ── Cộng đồng ────────────────────────────────────────────── */
.community-stats b{color:var(--ink);font-family:var(--font-head)}
.community-cols h4{color:var(--ink)}
.mini-lb-pts{color:var(--blue-d)}

/* ── Bộ lọc & form ────────────────────────────────────────── */
.filters select,.filters input,.pub-field input,.pub-field select,.pub-field textarea,.map-q{
  border:2px solid var(--ink);border-radius:14px;background:#fff}
.pub-field input:focus,.pub-field select:focus,.pub-field textarea:focus,.map-q:focus{
  outline:none;border-color:var(--blue);box-shadow:3px 3px 0 var(--blue)}
.pub-field label{color:var(--ink)}
.pub-card h1{color:var(--ink)}
.review-form,.review-gate,.hero-cta{border:var(--bd);border-radius:20px}
.review-form{background:var(--sand)}
.review-gate{background:#fff;border-style:dashed}
.review-item,.map-rv{background:#FFFBF3;border:2px solid var(--ink);border-radius:14px}
.adm-flash{border:2.5px solid var(--ink);border-radius:14px}
.dup-warn{background:var(--sand);border:2.5px solid var(--ink);border-radius:14px;color:var(--ink)}
.dup-warn a{color:var(--blue-d)}

/* ── Bản đồ ───────────────────────────────────────────────── */
.map-combos-row,.map-combos{background:var(--sand);border-bottom:2.5px solid var(--ink)}
.map-tabs{border-bottom:2.5px solid var(--ink)}
.map-tabs button{border:2px solid var(--ink);font-weight:800}
.map-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.map-combos button{border:2px solid var(--ink);color:var(--ink);font-weight:700}
.map-combos button:hover{background:var(--sun)}
.map-combos button.on{background:var(--teal);color:#fff;border-color:var(--ink)}
.combo-hint{background:var(--sand);border-left:4px solid var(--teal);border-radius:12px;color:var(--ink)}
.map-list{border-right:2.5px solid var(--ink)}
.map-list-head{border-bottom:2.5px solid var(--ink)}
.map-list-head h3{color:var(--ink)}
.rank-item{border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:16px}
.rank-item:hover{border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.rank-item.sel{border-color:var(--teal);box-shadow:3px 3px 0 var(--teal)}
.rank-no{border:2px solid var(--ink);background:#fff;color:var(--ink)}
.rank-no.gold{background:var(--sun)}.rank-no.silver{background:#E3E8E6}.rank-no.bronze{background:#FFC59B}
.rank-thumb{border:2px solid var(--ink)}
.map-detail{border-left:3px solid var(--ink)}
.detail-close{background:var(--ink);border:2px solid var(--ink)}
.detail-pad h2,.detail-h3{color:var(--ink)}
.map-ad{border:2.5px solid var(--ink);border-left:5px solid var(--teal);border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
.map-ad-txt b{color:var(--ink)}
.map-ad-thumb{border:2px solid var(--ink)}

/* ── Blog ─────────────────────────────────────────────────── */
article.post h1,article.post h2{color:var(--ink)}
article.post .info-box{background:var(--sand);border-left:5px solid var(--teal);border-radius:12px}
article.post figure img{border:2.5px solid var(--ink);border-radius:16px}
.dir-divider{color:var(--ink)}
.dir-divider::before,.dir-divider::after{background:var(--ink);height:2px}

/* ── CTA ──────────────────────────────────────────────────── */
.cta{background:var(--sun);color:var(--ink);border:var(--bd);box-shadow:var(--shadow-lg);border-radius:24px;position:relative;
  padding:23px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;text-align:left}
.cta::before{content:"MIỄN PHÍ 100%";position:absolute;top:-17px;left:50%;transform:translateX(-50%) rotate(-4deg);background:var(--teal);color:#fff;font-weight:800;font-size:.78rem;padding:6px 18px;border-radius:999px;border:2px solid var(--ink)}
.cta h2{font-weight:800;margin:0 0 3px;font-size:1.45rem;line-height:1.25}
.cta p{opacity:.85;color:var(--ink);margin:0;line-height:1.45;font-size:.92rem}
.cta-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.cta-actions .btn{padding:9px 17px;white-space:nowrap;font-size:.88rem}
.cta .btn{background:var(--ink);border-color:var(--ink)}
.cta .btn:hover{background:var(--blue-d)}
.home-cta-section{padding-bottom:18px}
.hero-cta{background:var(--ink);color:#fff}
.hero-cta .btn{background:var(--teal);color:#fff;border-color:#fff}

/* ── Bảng giá ─────────────────────────────────────────────── */
.price-table-wrap{border:2.5px solid var(--ink);border-radius:16px}
.price-table th{background:var(--sand);color:var(--ink);font-weight:800}
.price-table .price-cell{color:var(--teal)}

/* ── Gamification ─────────────────────────────────────────── */
.rank-bar{border:2px solid var(--ink);height:12px}
.rank-bar span{background:var(--teal)}
.lb-rank{border:2px solid var(--ink);background:#fff;color:var(--ink)}
.lb-rank.g1{background:var(--sun)}.lb-rank.g2{background:#E3E8E6}.lb-rank.g3{background:#FFC59B}
.lb-pts{color:var(--ink)}

/* ── Footer ───────────────────────────────────────────────── */
footer{background:var(--ink);color:#F3EFE3;border-top:3px solid var(--ink);margin-top:22px;padding:22px 0 13px}
footer .grid-4{gap:18px 28px;grid-template-columns:1.2fr .8fr .9fr 1.15fr;align-items:start}
footer h4{margin-bottom:6px;font-size:.92rem;line-height:1.25}
footer li{margin-bottom:3px;font-size:.82rem;line-height:1.35}
footer .grid-4>div:first-child>p{font-size:.82rem!important;line-height:1.45;margin:0;max-width:270px}
.footer-slogan{text-wrap:pretty}
footer h4{font-family:var(--font-head);color:#fff}
footer a{color:#F3EFE3;opacity:.82}
footer a:hover{color:var(--sun);opacity:1}
.foot-logo,.footer-brand-center{opacity:1}
.foot-logo{gap:8px;margin-bottom:7px}
.foot-logo img{width:36px;height:36px}
.foot-logo b{font-size:1.1rem}
.foot-logo img,.footer-brand img,.footer-brand-center img{border:2px solid #F3EFE3;border-radius:50%}
.foot-logo span,.footer-brand b span{white-space:nowrap}
footer .foot-logo .brand-tho-dia,footer .footer-brand-center .brand-tho-dia{color:#082F64;text-shadow:-.6px -.6px 0 #DCE3EA,.6px -.6px 0 #DCE3EA,-.6px .6px 0 #DCE3EA,.6px .6px 0 #DCE3EA}
footer .foot-logo .brand-review,footer .footer-brand-center .brand-review{color:#FFFFFF}
footer .foot-logo .brand-phu-yen,footer .footer-brand-center .brand-phu-yen{color:#0EA5E9;text-shadow:0 1px 0 #082F64}
.social-links{margin-top:7px;gap:8px}
.social-btn{width:34px;height:34px}
.social-btn.fb svg{width:18px;height:18px}
.social-btn.zalo{font-size:.68rem}
.copy{border-top:1px solid rgba(255,255,255,.15);color:#F3EFE3;opacity:.7;margin-top:13px;padding-top:9px;font-size:.78rem}

@media(max-width:760px){
  .cta{grid-template-columns:1fr;text-align:center;padding:24px 16px 18px;gap:12px;border-radius:20px}
  .cta h2{font-size:1.25rem}
  .cta p{font-size:.84rem}
  .cta-actions{justify-content:center}
  .cta-actions .btn{padding:8px 14px;font-size:.82rem}
  footer{margin-top:24px;padding:18px 0 10px}
  footer .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
  footer .grid-4>div:first-child{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
  footer .grid-4>div:first-child .foot-logo{margin:0}
  footer .grid-4>div:first-child>p{max-width:none}
  footer .grid-4>div:last-child{grid-column:1/-1}
  footer .grid-4>div:last-child ul{display:flex;flex-wrap:wrap;gap:0 14px}
  footer .grid-4>div:last-child li{margin:0}
  footer a{padding:4px 0}
  .social-links{margin-top:5px}
}
.notif-dot{border:2px solid var(--ink)}
/* Đăng nhập bằng Facebook */
.btn-fb{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:#1877F2;color:#fff!important;border:2.5px solid var(--ink);border-radius:999px;
  padding:11px 18px;font-weight:800;font-size:.95rem;font-family:inherit;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);opacity:1;transition:transform .12s,box-shadow .12s}
.btn-fb:hover{background:#166FE5;color:#fff!important;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-fb svg{width:20px;height:20px;fill:#fff;flex:none}
.btn-fb[disabled]{cursor:not-allowed;opacity:.5;box-shadow:none;transform:none}
/* Google Identity: giữ nền trắng và logo bốn màu theo nhận diện của Google. */
.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:#fff;color:var(--ink)!important;border:2.5px solid var(--ink);border-radius:999px;
  padding:11px 18px;font-weight:800;font-size:.95rem;font-family:inherit;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);opacity:1;transition:transform .12s,box-shadow .12s;background-image:none}
.btn-google:hover{background:#F8FAFC;color:var(--ink)!important;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-google svg{width:20px;height:20px;flex:none}

/* Zalo: xanh #0068FF theo nhận diện của Zalo. Giữ nguyên kiểu viền dày và
   bóng đổ của web để nút không trông như dán từ nơi khác vào. */
.btn-zalo{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:#0068FF;color:#fff!important;border:2.5px solid var(--ink);border-radius:999px;
  padding:11px 18px;font-weight:800;font-size:.95rem;font-family:inherit;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);opacity:1;transition:transform .12s,box-shadow .12s;background-image:none}
.btn-zalo:hover{background:#0058DB;color:#fff!important;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-zalo svg{width:20px;height:20px;fill:#fff;flex:none}

.social-login .btn+.btn{margin-top:9px}
.social-sep{color:var(--muted);font-weight:700}
.social-sep::before,.social-sep::after{background:var(--ink);height:2px;opacity:.15}
/* Ảnh đại diện trên thanh điều hướng */
.nav-avatar{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;
  display:inline-block;vertical-align:-8px;margin-right:6px}
.rv-avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;flex:none}
.badge-fb{display:inline-flex;align-items:center;gap:4px;background:#1877F2;color:#fff;font-size:.66rem;
  font-weight:800;padding:2px 8px;border-radius:999px;border:1.5px solid var(--ink);vertical-align:middle}

/* Nhãn quần đảo Hoàng Sa / Trường Sa trên bản đồ */
.vn-archipelago{background:none!important;border:none!important;text-align:center;white-space:nowrap;pointer-events:none;line-height:1.25}
.vn-archipelago b{display:block;font-family:var(--font-head);font-size:.84rem;font-weight:800;color:#0A5F59;
  text-shadow:0 0 3px #fff,0 0 5px #fff,0 0 8px #fff,1px 1px 0 #fff,-1px -1px 0 #fff}
.vn-archipelago span{display:block;font-size:.68rem;font-weight:600;color:#3E4A46;
  text-shadow:0 0 3px #fff,0 0 5px #fff,0 0 8px #fff}
.vn-overview-btn{font-family:var(--font-body);font-weight:800;font-size:.82rem;color:var(--ink);background:#fff;
  border:2.5px solid var(--ink);border-radius:999px;padding:8px 15px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);
  margin:10px 10px 0 0;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.vn-overview-btn:hover{background:var(--sand);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* Nút mạng xã hội ở chân trang */
.social-links{display:flex;gap:10px;align-items:center;margin-top:14px}
.social-btn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:2px solid #F3EFE3;flex:none;opacity:1;transition:transform .12s,box-shadow .12s}
.social-btn:hover{transform:translateY(-3px);box-shadow:0 4px 0 rgba(255,255,255,.25);opacity:1}
.social-btn.fb{background:#1877F2}
.social-btn.fb svg{width:22px;height:22px;fill:#fff;display:block}
.social-btn.zalo{background:#0068FF;color:#fff!important;font-family:var(--font-head);font-weight:800;font-size:.8rem;letter-spacing:.02em}
.social-btn.zalo:hover{color:#fff!important}
.social-btn.mail{background:#EA4335;color:#fff!important}
.social-btn.mail svg{width:20px;height:20px;fill:#fff;display:block}

/* Liên hệ nhanh ở cuối góc phải. Kích thước clamp() tự co giữa điện thoại và
 * desktop; env(safe-area-inset-bottom) tránh thanh Home trên iPhone. */
.quick-actions{--qa-size:clamp(42px,3.6vw,50px);position:fixed;
  right:clamp(8px,1.5vw,18px);bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));
  z-index:9000;display:flex;flex-direction:column;gap:9px;align-items:center}
.quick-action{width:var(--qa-size);height:var(--qa-size);border:2px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);font-family:var(--font-head);font-weight:800;
  text-decoration:none;transition:transform .16s,box-shadow .16s,opacity .16s}
.quick-action:hover{transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
.quick-zalo{background:#0068FF;color:#fff!important;font-size:.68rem}
.quick-top{background:var(--sun);color:var(--ink);font-size:1.45rem;opacity:0;visibility:hidden;transform:translateY(8px)}
.quick-top.is-visible{opacity:1;visibility:visible;transform:none}
.quick-top.is-visible:hover{transform:translate(-1px,-2px)}
/* ═════════════════ hết khối theme "Trẻ Trung" ═════════════════ */

/* ═════════════════ Nút mở Google Maps dưới bản đồ ═════════════════
   Bản đồ Leaflet trên trang chỉ để xem. Muốn đi thật phải sang Google Maps,
   nên gom nút ngay dưới bản đồ cho khách khỏi phải tự chép địa chỉ. */
.gmap-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.gmap-actions .btn{display:inline-flex;align-items:center;gap:6px}
.gmap-note{color:var(--muted);font-size:.85rem;margin:6px 0 0}
@media(max-width:520px){
  /* Điện thoại: nút tràn ngang cho dễ bấm bằng ngón cái */
  .gmap-actions{flex-direction:column;align-items:stretch}
  .gmap-actions .btn{justify-content:center}
}

/* Số điểm trong thẻ gợi ý cung đường ở trang chủ */
.combo-count{font-size:.72rem;font-weight:700;color:var(--muted);
  background:var(--sand);border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px;
  vertical-align:middle;margin-left:6px;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════
   ĐIỆN THOẠI — TRANG BẢN ĐỒ LÀ CHÍNH
   ───────────────────────────────────────────────────────────────────
   Vấn đề thật đo được trên iPhone 390px: khối gợi ý vàng chiếm hơn một
   phần ba màn hình, bản đồ chỉ còn một dải mỏng ở đáy.

   Nguyên nhân không nằm ở CSS mà ở hàm vuaKhung() trong app.js: nó thu
   nhỏ dần chip cho vừa MỘT hàng, không vừa thì cho xuống dòng. Trên máy
   tính là đúng. Trên điện thoại rộng 390px, riêng ô tra cứu đã ăn 150px
   nên 8 chip gợi ý bị đẩy thành 8 hàng.

   Cách chữa: trên điện thoại KHÔNG co chip, KHÔNG xuống dòng — cho cuộn
   ngang một hàng, đúng kiểu mọi ứng dụng di động vẫn làm với hàng bộ lọc.
   Chip giữ nguyên cỡ chữ đọc được, ai cần chip khuất thì vuốt sang.
   Phần chặn xuống dòng phía JS nằm ở dongBoKhungMobile() trong app.js —
   sửa một bên mà quên bên kia là hỏng, hai chỗ có ghi chú trỏ về nhau.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){

  /* 100dvh chứ không phải 100vh: trên iOS/Android thanh địa chỉ trình duyệt
     tự thu vào khi cuộn, 100vh tính theo lúc thanh đã thu nên trang luôn
     cao hơn màn hình thật, sinh ra khoảng trắng và bản đồ bị đẩy lệch.
     Dòng 100vh giữ lại làm dự phòng cho trình duyệt cũ chưa biết dvh. */
  .map-app{height:calc(100vh - 64px);height:calc(100dvh - 64px)}

  /* --- Hai hàng bộ lọc: một hàng, cuộn ngang, không bao giờ xuống dòng --- */
  .map-tabs,.map-combos{
    flex-wrap:nowrap!important;      /* thắng cả class co-xuong-dong do JS gắn */
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;            /* thanh cuộn ngang trên mobile chỉ tổ chật */
    scroll-snap-type:x proximity;
    padding:8px 14px;
  }
  .map-tabs::-webkit-scrollbar,.map-combos::-webkit-scrollbar{display:none}
  .map-tabs button,.map-combos button{scroll-snap-align:start;flex:0 0 auto}
  /* Riêng hàng danh mục vẫn một dòng: "Tất cả (447)", "Cafe (86)" vốn đã ngắn,
     ngắt dòng chỉ làm hàng cao gấp đôi mà không hẹp lại được bao nhiêu. */
  .map-tabs button{white-space:nowrap!important}
  /* Ép lại cỡ chữ vì JS có thể đã hạ xuống .66rem lúc còn ở máy tính.
     Dưới 0.8rem là bắt đầu khó đọc ngoài nắng — mà web này để dùng lúc
     đang đi chơi, phần lớn là ngoài trời. */
  .map-tabs{--co-fs:.82rem;--co-px:13px;--co-py:7px;--co-gap:7px}
  .map-combos{--co-fs:.8rem;--co-px:12px;--co-py:6px;--co-gap:7px}

  /* --- Gợi ý nhanh: ẨN HẲN trên điện thoại, chỉ để lại ô tra cứu ---
     Tám chip gợi ý là thứ ăn nhiều chiều cao nhất trên màn hình nhỏ. Dù đã
     cho ngắt dòng và cuộn ngang, chúng vẫn chiếm ~55px, đủ để bản đồ không
     đạt mức 80% màn hình.
     Ẩn hẳn chứ không giấu sau nút bấm: thêm một nút là thêm một thứ phải
     nhìn, phải hiểu, phải bấm — trong khi ô tra cứu ngay bên cạnh đã làm
     được việc tương tự và ai cũng biết dùng.
     Người dùng máy tính KHÔNG mất gì: luật này nằm trong @media nên bản máy
     tính giữ nguyên đủ tám chip như cũ. */
  .map-combos-row{display:flex;align-items:center;padding:7px 14px;overflow:visible}
  .map-combos-row .map-q{
    flex:1 1 auto;width:auto;min-width:0;margin:0;padding:8px 12px;
    font-size:16px;   /* BẮT BUỘC 16px — xem khối "Ô nhập trên iOS" bên dưới */
  }
  .map-combos-row .map-combos{display:none}

  /* Dấu hiệu "còn nữa, vuốt sang trái": vệt mờ ở mép phải. Không có nó thì
     người dùng tưởng hàng chip chỉ có bấy nhiêu — lỗi hay gặp của hàng cuộn
     ngang, vì trên điện thoại không có thanh cuộn để nhìn thấy. */
  .map-tabs,.map-combos-row .map-combos{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  }

  /* --- Bản đồ chiếm hết, danh sách thành thẻ trượt từ đáy --- */
  .map-body{display:block;position:relative}
  #map{height:100%;width:100%}

  .map-list{
    position:absolute;left:0;right:0;bottom:0;
    height:78%;                       /* chiều cao lúc mở hết */
    background:#fff;border:none;border-top:1px solid var(--line);
    border-radius:18px 18px 0 0;
    box-shadow:0 -6px 24px rgba(11,61,57,.18);
    z-index:620;                      /* trên bản đồ, dưới bảng chi tiết (650) */
    overflow-y:auto;overscroll-behavior:contain;
    transition:transform .26s cubic-bezier(.32,.72,0,1);
    touch-action:pan-y;
  }
  /* Ba nấc. Mặc định thu gọn: chỉ ló tay nắm, bản đồ gần như trọn màn hình. */
  .map-list[data-nac="thu"]{transform:translateY(calc(100% - 54px))}
  .map-list[data-nac="nua"]{transform:translateY(45%)}
  .map-list[data-nac="het"]{transform:translateY(0)}
  /* Khi chưa mở hết, vuốt ở bất kỳ chỗ nào phải kéo CẢ bảng chứ không cuộn
     nội dung nằm khuất bên trong. Mở hết rồi mới cho danh sách cuộn. */
  .map-list[data-nac="thu"],.map-list[data-nac="nua"]{overflow-y:hidden}
  .map-list.dang-keo{transition:none}   /* đang kéo thì bám ngón tay, không trễ */

  /* Tay nắm: vạch xám nhỏ ở trên, rồi tới tiêu đề + số lượng */
  .map-list-head{
    position:sticky;top:0;z-index:5;cursor:grab;
    padding:14px 16px 10px;border-radius:18px 18px 0 0;
    user-select:none;-webkit-user-select:none;
  }
  .map-list-head::before{
    content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:999px;background:#CFC7B4;
  }
  .map-list-head h3{font-size:.95rem}
  .map-list-toggle{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    min-height:34px;padding:6px 10px;border:2px solid var(--ink);border-radius:999px;
    background:var(--sand);color:var(--ink);font:700 .76rem/1 var(--font-body);cursor:pointer;
  }

  /* --- Thẻ "Nổi bật" nổi trên bản đồ: còn ~30% diện tích cũ ---
     Bản cũ 290×97px ≈ 28.100px², chiếm gần trọn bề ngang và che đúng vùng
     bản đồ dễ nhìn nhất. Đích nhắm là 30% diện tích ≈ 8.400px².
     Diện tích giảm theo TÍCH hai chiều, nên muốn còn 30% thì mỗi chiều chỉ
     cần còn khoảng 55% (0,55 × 0,55 ≈ 0,30) — không phải cắt mỗi chiều xuống
     30%, làm vậy diện tích chỉ còn 9% và chữ không đọc nổi.
     Giữ lại đúng thứ cần: ảnh nhỏ, tên địa điểm, khu vực + lượt xem. Bỏ nhãn
     "Nổi bật" và dòng "Đề xuất cho bạn" — hai thứ đó chỉ để trang trí, mà lại
     ăn nguyên một dòng mỗi thứ.
     Phải nằm TRÊN tay nắm thẻ trượt, không thì bị che mất. */
  .map-ad{
    bottom:62px;right:auto;left:10px;width:auto;max-width:52%;
    padding:5px 20px 5px 6px;border-radius:9px;border-left-width:3px;
  }
  .map-ad-in{gap:7px}
  .map-ad-thumb{width:30px;height:30px;font-size:.85rem;border-radius:6px}
  .map-ad-txt b{font-size:.74rem;max-width:105px}
  .map-ad-txt>span{font-size:.62rem;line-height:1.2}
  .map-ad-x{top:2px;right:5px;font-size:.78rem}
  .map-ad-tag{display:none}
  /* Nhãn "⭐ Nổi bật" nằm trong phần chữ, ẩn đi cho gọn */
  .map-ad-txt .badge{display:none}

  /* Bảng chi tiết địa điểm phủ lên trên cùng */
  .map-detail{z-index:650}
}

@media(min-width:901px){.map-list-toggle{display:none}}

/* Máy rất hẹp (≤380px): hạ thêm một nấc cho chip khỏi chiếm hai phần ba
   bề ngang chỉ vì một cái tên dài. */
@media(max-width:380px){
  .map-tabs{--co-fs:.78rem;--co-px:11px}
  .map-combos{--co-fs:.76rem;--co-px:10px}
}

/* ═══════════════════════════════════════════════════════════════════
   Ô NHẬP TRÊN iOS — ÉP 16px ĐỂ SAFARI KHÔNG TỰ PHÓNG TO TRANG
   ───────────────────────────────────────────────────────────────────
   Safari trên iPhone có một hành vi ít ai để ý: bấm vào ô nhập nào có
   cỡ chữ NHỎ HƠN 16px thì nó tự phóng to cả trang để chữ đủ lớn mà gõ.
   Phóng xong KHÔNG tự thu lại. Người dùng đang xem trang vừa vặn, bấm ô
   tìm kiếm một cái là trang nhảy to đùng, phải tự chụm hai ngón thu lại.

   Đo trên place.php: toàn bộ ô nhập của form đánh giá đang ở 13.33px —
   nghĩa là mỗi lần khách viết nhận xét là một lần trang bị nhảy.

   16px không phải con số làm đẹp, nó là ngưỡng Safari dùng để quyết định.
   Đúng 16px thì không phóng, 15.9px thì phóng. Chỉ áp trên màn hình nhỏ
   nên giao diện máy tính giữ nguyên.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  input:not([type=checkbox]):not([type=radio]),
  select,textarea{font-size:16px}
}

/* ═══════════════════════════════════════════════════════════════════
   VÙNG BẤM CHO NGÓN TAY
   ───────────────────────────────────────────────────────────────────
   Link ở chân trang đang cao 17–18px. Đầu ngón tay người lớn chạm vào
   khoảng 45px, nên ở cỡ đó bấm "Bản đồ tương tác" rất dễ trúng nhầm
   "Danh bạ địa điểm" ngay trên nó.
   Nới bằng padding dọc chứ không tăng cỡ chữ: vùng bấm rộng ra mà bố cục
   chữ nghĩa không đổi.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  footer a{display:inline-block;padding:5px 0}
  /* Cột chân trang: link xếp dọc nên cần khoảng cách giữa các dòng */
  footer ul li{margin-bottom:2px}
  .quick-actions{gap:7px}
  .quick-action{box-shadow:2px 2px 0 var(--ink)}
}
/* Thông tin thực tế và bài liên quan trên trang địa điểm */
.place-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:12px 0}
.place-facts>div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fffdf8}
.place-facts span{display:block;color:var(--muted);font-size:.75rem;margin-bottom:3px}
.place-facts b{font-size:.9rem;line-height:1.35}
.verified-note{margin:8px 0 14px;padding:9px 12px;border-radius:10px;background:#ecfdf5;color:#065f46;font-size:.88rem}
.related-posts{margin-top:22px}.related-posts h2{color:var(--blue-d);font-size:1.15rem;margin-bottom:10px}
.related-post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.related-post-card{display:flex;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:#fff}
.related-post-card img{width:92px;height:68px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.related-post-card small{display:block;color:var(--muted);font-weight:400;margin-top:4px;line-height:1.35}
@media(max-width:760px){.place-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.related-post-grid{grid-template-columns:1fr}}
.article-facts{margin:14px 0 20px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fffdf8}
.article-facts h2,.article-related-places h2{color:var(--blue-d);font-size:1.15rem;margin:0 0 10px}
.article-facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.article-facts-grid>div{padding:9px 10px;border-radius:10px;background:#f7f3e8}.article-facts-grid span{display:block;color:var(--muted);font-size:.74rem}.article-facts-grid b{font-size:.88rem}
.article-note{margin-top:11px}.article-note ul{margin:6px 0 0 20px}.article-related-places{margin:24px 0}
@media(max-width:760px){.article-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Landing SEO — dùng đúng ngôn ngữ thị giác của trang chủ: nền kem, xanh
   ngọc, vàng đồng, viền đậm và bóng lệch. Các URL này là thư mục nên mọi
   khoảng cách đều co giãn, không dựa vào kích thước desktop cố định. */
.seo-landing{padding:16px 20px 52px}
.seo-landing .breadcrumb{padding:10px 2px 14px}
.seo-landing-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.7fr);gap:20px;align-items:center;padding:clamp(22px,3vw,34px);border:2.5px solid var(--ink);border-radius:28px;background:var(--ink);color:#fff;box-shadow:7px 7px 0 var(--teal);overflow:hidden}
.seo-landing-hero::after{content:"";position:absolute;width:260px;height:260px;border:42px solid rgba(201,162,39,.13);border-radius:50%;right:-100px;top:-125px;pointer-events:none}
.seo-landing-copy{position:relative;z-index:1;align-self:center}
.seo-landing-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 12px!important;padding:6px 14px;border-radius:999px;background:var(--sun);color:var(--ink);font-size:.77rem;font-weight:800;letter-spacing:.025em;transform:rotate(-1deg)}
.seo-landing-kicker span{font-size:1rem}
.seo-landing-hero h1{max-width:720px;margin:0 0 10px;font-family:var(--font-head);font-size:clamp(1.85rem,4vw,2.85rem);line-height:1.08;color:#fff}
.seo-landing-intro{max-width:720px;margin:0!important;color:rgba(255,255,255,.86);font-size:clamp(.92rem,1.5vw,1.02rem);line-height:1.58}
.seo-landing-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.seo-landing-actions .btn{background:var(--teal);border-color:#fff;box-shadow:3px 3px 0 #fff}
.seo-landing-actions .btn-outline{background:#fff;color:var(--ink);border-color:#fff}
.seo-landing-guide{position:relative;z-index:1;align-self:center;padding:17px 18px;border:2px solid var(--ink);border-radius:18px;background:var(--bg);color:var(--ink);box-shadow:4px 4px 0 var(--teal)}
.seo-guide-label{display:inline-block;margin-bottom:5px;color:var(--blue);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.seo-landing-guide h2{font-family:var(--font-head);font-size:1.17rem;line-height:1.25;color:var(--blue-d)}
.seo-landing-guide ol{display:grid;gap:8px;margin-top:10px;list-style:none}
.seo-landing-guide li{display:grid;grid-template-columns:23px 1fr;gap:8px;align-items:start;padding-top:8px;border-top:1px dashed var(--line)}
.seo-landing-guide li:first-child{padding-top:0;border-top:0}
.seo-landing-guide li>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mint);border:1.5px solid var(--ink);font-size:.68rem;font-weight:900}
.seo-landing-guide li p{margin:0;font-size:.78rem;line-height:1.42;color:var(--ink)}
.landing-topic-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:22px 0 4px;padding:4px 2px 8px;overflow:visible}
.landing-topic-links a{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;min-height:76px;height:auto;padding:10px 11px;border:2px solid var(--ink);border-radius:18px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:.72rem;font-weight:800;line-height:1.27;text-align:center;white-space:normal;overflow:visible;overflow-wrap:break-word;word-break:normal;hyphens:auto}
.landing-topic-links a:hover,.landing-topic-links a.active{background:var(--sun);transform:translateY(-1px)}
.landing-topic-links a span{flex:0 0 auto;font-size:1rem}
.landing-topic-links a strong{min-width:0;font:inherit;font-weight:800}
.seo-landing-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:30px 0 16px;scroll-margin-top:88px}
.seo-landing-head>div>span,.seo-landing-cta>div>span{display:block;color:var(--blue);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.seo-landing-head h2{font-family:var(--font-head);font-size:clamp(1.35rem,2.5vw,1.8rem);line-height:1.2;color:var(--blue-d)}
.seo-landing-head .btn{flex:none;padding:8px 16px;font-size:.82rem}
.seo-place-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.seo-place-card{display:flex;min-width:0;flex-direction:column;border:2.5px solid var(--ink);border-radius:22px;background:#fff;overflow:hidden;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.seo-place-card:hover{transform:translateY(-4px);box-shadow:7px 8px 0 var(--ink)}
.seo-place-media{position:relative;display:block;overflow:hidden;background:#DCEAE7;border-bottom:2.5px solid var(--ink)}
.seo-place-media img,.seo-place-empty{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .25s}
.seo-place-card:hover .seo-place-media img{transform:scale(1.025)}
.seo-place-empty{display:grid;place-items:center;background:linear-gradient(135deg,#DCEAE7,#F3ECD9);font-size:3rem}
.seo-place-verified{position:absolute;right:10px;bottom:10px;padding:5px 9px;border:1.5px solid var(--ink);border-radius:999px;background:var(--mint);color:var(--ink);box-shadow:2px 2px 0 var(--ink);font-size:.68rem;font-weight:900}
.seo-place-body{display:flex;flex:1;flex-direction:column;padding:15px 16px 17px}
.seo-place-badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.seo-place-badges .badge{margin:0;padding:3px 8px;font-size:.68rem;border:1px solid rgba(34,48,46,.2)}
.seo-place-card h3{margin:0 0 7px;font-family:var(--font-head);font-size:1.08rem;line-height:1.3}
.seo-place-card h3 a{color:var(--ink)}
.seo-place-card h3 a:hover{color:var(--teal)}
.seo-place-address{display:-webkit-box;min-height:2.8em;margin:0;color:var(--muted);font-size:.84rem;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.seo-place-more{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:13px;color:var(--blue);font-size:.82rem;font-weight:800}
.seo-place-more span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--sun);border:1.5px solid var(--ink);color:var(--ink);transition:transform .15s}
.seo-place-more:hover span{transform:translateX(2px)}
.seo-empty{padding:20px;border:2px solid var(--ink);border-radius:16px;background:#fff3cd;box-shadow:3px 3px 0 var(--ink)}
.seo-pagination{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin:28px 0 8px}.seo-pagination a,.seo-pagination span{display:grid;min-width:38px;min-height:38px;place-items:center;padding:7px 10px;border:2px solid var(--ink);border-radius:11px;background:#fff;color:var(--ink);font-size:.8rem;font-weight:800}.seo-pagination a:hover,.seo-pagination a.on{background:var(--sun);box-shadow:2px 2px 0 var(--ink)}.seo-pagination span{border-color:transparent;background:transparent}
.seo-landing-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 18px;padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:#fff}
.seo-landing-filter label{font-weight:800;color:var(--blue-d)}.seo-landing-filter select{min-width:min(100%,280px);padding:8px 10px;border:1.5px solid var(--ink);border-radius:10px;background:#fff}.seo-landing-filter a{font-size:.84rem;font-weight:700}
.seo-landing-faq{display:grid;grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr);gap:24px;margin-top:40px;padding:22px;border:2.5px solid var(--ink);border-radius:22px;background:#fff;box-shadow:5px 5px 0 var(--teal)}
.seo-landing-faq>div:first-child>span{color:var(--blue);font-size:.74rem;font-weight:800;text-transform:uppercase}.seo-landing-faq h2{font-family:var(--font-head);color:var(--blue-d);font-size:1.45rem}.seo-landing-faq details{padding:12px 2px;border-bottom:1px dashed var(--line)}.seo-landing-faq details:first-child{padding-top:0}.seo-landing-faq details:last-child{border-bottom:0}.seo-landing-faq summary{cursor:pointer;font-weight:800}.seo-landing-faq p{margin-top:7px;color:var(--muted);font-size:.9rem;line-height:1.55}
.seo-landing-cta{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-top:42px;padding:26px 28px;border:2.5px solid var(--ink);border-radius:24px;background:var(--sun);box-shadow:6px 6px 0 var(--ink)}
.seo-landing-cta h2{margin:2px 0 3px;font-family:var(--font-head);font-size:clamp(1.25rem,2.4vw,1.65rem);color:var(--ink)}
.seo-landing-cta p{max-width:650px;color:var(--ink);font-size:.9rem}
.seo-landing-cta>div:last-child{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.seo-landing-cta .btn{padding:9px 15px;font-size:.8rem}
.seo-landing-cta .btn-outline{background:#fff;color:var(--ink);border-color:var(--ink)}
@media(max-width:900px){
  .seo-landing-hero{grid-template-columns:1fr;padding:24px}.seo-landing-guide{display:block;width:100%;padding:14px 16px}.seo-guide-label{margin-bottom:2px}.seo-landing-guide ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:8px}.seo-landing-guide li,.seo-landing-guide li:first-child{padding:0 10px;border-top:0;border-left:1px dashed var(--line)}.seo-landing-guide li:first-child{padding-left:0;border-left:0}.landing-topic-links{grid-template-columns:repeat(3,minmax(0,1fr))}.seo-place-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-landing-faq{grid-template-columns:1fr}.seo-landing-cta{grid-template-columns:1fr}.seo-landing-cta>div:last-child{justify-content:flex-start}
}
@media(max-width:600px){
  .seo-landing{padding:8px 14px 38px}.seo-landing .breadcrumb{font-size:.75rem}.seo-landing-hero{gap:14px;padding:20px 16px;border-radius:22px;box-shadow:4px 5px 0 var(--teal)}.seo-landing-hero h1{font-size:clamp(1.65rem,9vw,2.2rem)}.seo-landing-intro{font-size:.88rem}.seo-landing-actions{margin-top:15px}.seo-landing-actions .btn{flex:1 1 135px;padding:9px 12px;text-align:center}.seo-landing-guide{display:block;padding:13px 14px}.seo-landing-guide h2{font-size:1rem}.seo-landing-guide ol{grid-template-columns:1fr;margin-top:8px}.seo-landing-guide li,.seo-landing-guide li:first-child{padding:7px 0 0;border-left:0;border-top:1px dashed var(--line)}.seo-landing-guide li:first-child{padding-top:0;border-top:0}.landing-topic-links{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}.landing-topic-links a{min-height:64px;padding:8px;font-size:.72rem}.seo-landing-head{align-items:flex-start;flex-direction:column;margin-top:24px}.seo-landing-head .btn{width:100%;text-align:center}.seo-place-grid{grid-template-columns:1fr;gap:17px}.seo-place-card{display:grid;grid-template-columns:120px minmax(0,1fr);border-radius:18px;box-shadow:4px 4px 0 var(--ink)}.seo-place-media{height:100%;border-right:2.5px solid var(--ink);border-bottom:0}.seo-place-media img,.seo-place-empty{height:100%;min-height:174px;aspect-ratio:auto}.seo-place-body{padding:12px}.seo-place-badges .badge{font-size:.62rem}.seo-place-card h3{font-size:.98rem}.seo-place-address{font-size:.76rem}.seo-place-more{font-size:.73rem}.seo-place-more span{display:none}.seo-place-verified{right:6px;bottom:6px;font-size:0;padding:5px}.seo-place-verified::after{content:"✓";font-size:.7rem}.seo-pagination{justify-content:flex-start}.seo-pagination a,.seo-pagination span{min-width:34px;min-height:34px;padding:5px 8px}.seo-landing-cta{margin-top:32px;padding:21px 18px;border-radius:20px}.seo-landing-cta>div:last-child{display:grid;grid-template-columns:1fr}.seo-landing-cta .btn{text-align:center}
}
@media(max-width:390px){.landing-topic-links{grid-template-columns:1fr}.landing-topic-links a{min-height:50px}}
.directory-seo-links{margin:14px 0 24px}
.copy-review-panel{padding:34px 20px 46px;background:#f6efe0;border-top:3px solid var(--ink);color:var(--ink)}
.copy-review-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:18px}.copy-review-head>div>span{display:block;color:var(--blue);font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.copy-review-head h2,.copy-review-footer-title{margin:3px 0 0;font-family:var(--font-head);color:var(--blue-d)}.copy-review-head p{max-width:520px;margin:0;color:var(--muted);font-size:.86rem;line-height:1.5}
.copy-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.copy-review-card{display:flex;min-width:0;flex-direction:column;padding:17px 18px;border:2px solid var(--ink);border-radius:18px;background:#fff;box-shadow:4px 4px 0 var(--ink)}.copy-review-card.active{border-color:#9a6a00;background:#fff9df;box-shadow:4px 4px 0 var(--sun)}.copy-review-label{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}.copy-review-label b{color:var(--blue-d)}.copy-review-label span{padding:3px 8px;border-radius:999px;background:var(--mint);font-size:.7rem;font-weight:800}.copy-review-card h3{font-family:var(--font-head);font-size:1.02rem;line-height:1.35}.copy-review-card p{margin:7px 0 13px;color:var(--muted);font-size:.84rem;line-height:1.55}.copy-review-card a{margin-top:auto;color:var(--blue);font-size:.78rem;font-weight:900}.copy-review-footer-title{margin:30px 0 14px;font-size:1.25rem}.copy-review-footer-grid .copy-review-card{min-height:150px}
@media(max-width:800px){.copy-review-head{align-items:flex-start;flex-direction:column;gap:8px}.copy-review-grid{grid-template-columns:1fr}.copy-review-footer-grid .copy-review-card{min-height:0}}