/* ═══════════════════════════════════════════════════════════════
   Nón Lá — bản web cho máy tính

   KHÔNG phải một hệ thiết kế thứ hai. Bảng màu, chữ và bán kính bo lấy
   nguyên từ app.css (sơn mài: then, son, vàng lá, giấy dó) — hai bản
   dùng chung một kho ảnh, nên lệch tông một chút là nhìn ra ngay ở chỗ
   ảnh app đứng cạnh khung web.

   Khác biệt duy nhất là DÀN TRANG: app khoá 520px một cột cho ngón tay,
   bản này trải 1440px nhiều cột cho con trỏ chuột — nên chỗ nào app xếp
   dọc thì đây xếp ngang, và chỗ nào app giấu sau một cú chạm thì đây bày
   ra luôn vì màn hình đủ rộng để bày.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ngoc:#1F8A70; --ngoc-sau:#0E4A3C;
  --son:#B0201A; --son-dam:#8E1C17; --dong:#D9A227; --vang-la:#C9A227;
  --dong-chu:#7D5F0E; --ho-phach:#C8791F;
  --vien:rgba(201,162,39,.52); --vien-in:rgba(201,162,39,.26); --vien-dam:#C9A227;
  --giay:#FBF7EC; --diep:#F5F0E4; --kem:#F3EEDF; --tam:#FFFDF7;
  --then:#0E2B24; --muc:#1D2A24; --muc-nhat:#5F6E64; --xam:#6E6A62;
  --line:#E2D9C4; --hong:#FBEDE9;
  --disp:"Playfair Display",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --r:18px; --r-lg:24px; --pill:999px;
  --shadow:0 1px 2px rgba(31,26,10,.04), 0 8px 28px rgba(31,26,10,.05);
  --shadow-lift:0 2px 6px rgba(31,26,10,.06), 0 18px 44px rgba(31,26,10,.10);
  --wrap:1440px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);background:var(--giay);color:var(--muc);
  font-size:16px;line-height:1.55;
  /* Hoa văn mandala mờ ở góc trên — cùng mô-típ với màn mở đầu của app,
     nhưng chỉ 5% để không cạnh tranh với tranh. */
  background-image:radial-gradient(1200px 600px at 88% -10%, rgba(201,162,39,.10), transparent 60%),
                   radial-gradient(900px 500px at -5% 8%, rgba(201,162,39,.07), transparent 55%);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.015em;line-height:1.12}
.tnum{font-variant-numeric:tabular-nums}

/* Vòng focus KHÔNG được gỡ — bàn phím là đường đi chính của một phần
   người dùng, và trên nền giấy dó thì viền vàng đậm nhìn rõ hơn viền lam
   mặc định của trình duyệt. */
:focus-visible{outline:2px solid var(--vien-dam);outline-offset:2px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── thanh trên ─────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:rgba(251,247,236,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:26px;height:76px}
/* ── khối thương hiệu: tên sản phẩm trên, nút đổi vùng dưới ────
   Tên vùng dài ngắn chênh gấp đôi giữa sáu vùng, nên nó KHÔNG được nằm
   ở dòng tên sản phẩm: đổi vùng mà cả thanh trên xê dịch thì mỗi lần đổi
   là một lần giao diện nhảy. Ở tầng dưới, nó có trần bề rộng riêng và
   cắt bằng dấu ba chấm khi quá dài. */
.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.brand .mark{display:block;border-radius:13px;overflow:hidden;line-height:0;
  box-shadow:0 1px 2px rgba(31,26,10,.10);transition:transform .18s ease}
.brand .mark:hover{transform:translateY(-1px)}
.brand img{width:42px;height:42px}
.lock{display:grid;gap:2px;position:relative}
.lock .name{font-family:var(--disp);font-size:21px;font-weight:600;letter-spacing:.01em;
  line-height:1.05;color:var(--muc)}
.zonebtn{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;
  border-radius:var(--pill);border:1px solid transparent;
  font-size:12px;font-weight:600;color:var(--dong-chu);letter-spacing:.02em;
  max-width:230px;transition:background .16s ease,border-color .16s ease}
.zonebtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zonebtn svg{width:14px;height:14px;flex:0 0 auto}
.zonebtn svg:last-child{width:12px;height:12px;transform:rotate(90deg);opacity:.75}
.zonebtn:hover{background:rgba(201,162,39,.14);border-color:var(--vien-in)}
.zonebtn[aria-expanded="true"]{background:var(--tam);border-color:var(--vien)}
.zonebtn[aria-expanded="true"] svg:last-child{transform:rotate(-90deg)}

.zonemenu{position:absolute;top:calc(100% + 10px);left:-6px;z-index:60;width:330px;
  background:var(--tam);border:1px solid var(--vien);border-radius:18px;padding:6px;
  box-shadow:var(--shadow-lift)}
.zonemenu button{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;
  width:100%;text-align:left;padding:10px 12px;border-radius:13px;
  transition:background .14s ease}
.zonemenu button:hover{background:rgba(201,162,39,.12)}
.zonemenu button[aria-selected="true"]{background:rgba(14,74,60,.07)}
.zonemenu .tick{color:var(--ngoc-sau);display:flex}
.zonemenu .tick svg{width:17px;height:17px}
.zonemenu b{display:block;font-family:var(--disp);font-size:15px;font-weight:600}
.zonemenu i{font-style:normal;font-size:12px;color:var(--muc-nhat)}
.zonemenu .n{font-size:11.5px;color:var(--dong-chu);font-weight:600;white-space:nowrap}
/* ── thanh điều hướng: chỉ ICON, chữ nở ra khi rê chuột ───────
   Năm mục có chữ đủ dài để "Scan Menu" gãy làm hai dòng ở màn 1440px, và
   một thanh nav cao hai dòng kéo lệch cả hàng. Nên mặc định chỉ hiện
   icon; chữ nở ra khi rê chuột hoặc khi bàn phím nhảy tới.

   Chữ KHÔNG bị display:none mà chỉ bị bóp về bề rộng 0: trình đọc màn
   hình vẫn đọc được nhãn, nên nút icon vẫn có tên. Bóp bằng max-width vì
   width:auto không chuyển động được — 0 → 160px chạy mượt, còn 0 → auto
   thì nhảy giật một nhịp.  */
.nav{display:flex;align-items:center;gap:6px;margin:0 auto;
  padding:5px;border-radius:var(--pill);background:rgba(201,162,39,.07);
  border:1px solid var(--vien-in)}
.nav a{display:flex;align-items:center;gap:0;padding:11px 13px;border-radius:var(--pill);
  font-size:14.5px;font-weight:500;color:var(--muc);position:relative;white-space:nowrap;
  transition:background .18s ease,color .18s ease,gap .2s ease,padding .2s ease}
.nav a span{display:inline-block;max-width:0;overflow:hidden;opacity:0;
  transition:max-width .22s ease,opacity .16s ease}
.nav a:hover span,.nav a:focus-visible span,.nav a:focus span{max-width:160px;opacity:1}
.nav a:hover,.nav a:focus-visible,.nav a:focus{background:rgba(201,162,39,.16);gap:9px;
  padding-right:16px}
.nav a[aria-current]{color:var(--ngoc-sau);background:var(--tam);
  box-shadow:0 1px 2px rgba(31,26,10,.06);border:1px solid var(--vien-in)}
/* Mục đang mở giữ nguyên nhãn: nếu cả năm mục đều trơ icon thì không có
   gì nói cho người ta biết họ đang đứng ở trang nào. */
.nav a[aria-current] span{max-width:160px;opacity:1}
.nav a[aria-current]{gap:9px;padding-right:16px}
.nav svg{width:19px;height:19px;flex:0 0 auto}
.top-cta{display:flex;gap:10px;flex:0 0 auto}

/* ── nút ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:var(--pill);font-size:14.5px;font-weight:600;
  border:1px solid transparent;transition:transform .16s ease,box-shadow .18s ease,
  background .18s ease,border-color .18s ease;min-height:44px}
.btn svg{width:18px;height:18px}
.btn.pri{background:var(--ngoc-sau);color:#FBF7EC;box-shadow:var(--shadow)}
.btn.pri:hover{background:#0B3B30;box-shadow:var(--shadow-lift)}
.btn.sec{background:var(--tam);border-color:var(--vien);color:var(--muc)}
.btn.sec:hover{border-color:var(--vien-dam);background:#fff}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:rgba(201,162,39,.08)}
.btn.wide{width:100%}
.btn:active{transform:translateY(1px)}

/* ── thẻ nền ────────────────────────────────────────────────── */
.panel{background:var(--tam);border:1px solid var(--vien-in);border-radius:var(--r-lg);
  box-shadow:var(--shadow);position:relative}
.panel.pad{padding:22px}
.sect-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sect-head h2{font-size:21px}
.sect-head .spark{color:var(--vang-la);display:flex}
.sect-head .more{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--dong-chu);
  display:inline-flex;align-items:center;gap:5px}
.sect-head .more:hover{text-decoration:underline}
.kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dong-chu)}
.muted{color:var(--muc-nhat)}
.small{font-size:13px}

/* ── nhãn phán quyết ────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--pill);
  font-size:12.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.pill svg{width:14px;height:14px}
.pill.ok{background:#0E4A3C;color:#EAF6F1}
.pill.ok.soft{background:#E9F3EE;color:#0E4A3C;border-color:#BCDCCF}
.pill.bad{background:#FBEDE9;color:var(--son-dam);border-color:#EEC9C1}
.pill.unknown{background:var(--kem);color:var(--xam);border-color:var(--line)}
.pill.tag{background:var(--kem);color:var(--dong-chu);border-color:var(--vien-in)}
.pill.seed{background:#FFF6DF;color:var(--dong-chu);border-color:rgba(201,162,39,.45)}

/* ── trang chủ ──────────────────────────────────────────────── */
/* Tranh bìa TRÀN RA MÉP PHẢI của cửa sổ, không đóng khung trong lề.
   Đây là điểm khác duy nhất đáng kể so với dàn trang đóng hộp: bức tranh
   là thứ nói "chỗ này là Việt Nam" trước khi ai kịp đọc dòng nào, nên nó
   được quyền chạm mép màn hình. calc() bù đúng phần lề của .wrap. */
.hero{display:grid;grid-template-columns:minmax(420px,1fr) 1.15fr;gap:36px;
  align-items:center;padding:56px 0 26px}
.hero .bleed{margin-right:calc((100vw - min(100vw, var(--wrap)))/-2 - 28px);
  border-radius:var(--r-lg) 0 0 var(--r-lg);border-right:0}
@media (max-width:1180px){ .hero .bleed{margin-right:0;border-radius:var(--r-lg)} }
.hero h1{font-size:clamp(40px,4.2vw,60px);line-height:1.04}
.hero p.lede{font-size:17px;color:var(--muc-nhat);margin-top:18px;max-width:46ch}
.hero-art{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--vien);
  box-shadow:var(--shadow-lift);aspect-ratio:3/2;background:var(--kem)}
.hero-art img{width:100%;height:100%;object-fit:cover}
.hero-tools{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.select{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:14px;
  border:1px solid var(--vien);background:var(--tam);font-size:14.5px;font-weight:500;
  min-height:44px;cursor:pointer}
.select:hover{border-color:var(--vien-dam)}
.chiprow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--tam);font-size:13.5px;font-weight:500;
  min-height:42px;transition:border-color .16s ease,background .16s ease,color .16s ease}
.chip:hover{border-color:var(--vien-dam);background:#fff}
.chip[aria-pressed="true"]{background:var(--ngoc-sau);border-color:var(--ngoc-sau);color:#FBF7EC}
.chip svg{width:17px;height:17px}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:22px 0}
.acard{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:22px}
.acard .art{border-radius:16px;overflow:hidden;border:1px solid var(--vien-in);
  aspect-ratio:1;background:var(--kem)}
.acard .art img{width:100%;height:100%;object-fit:cover}
.acard h3{font-size:22px}
.acard p{font-size:14px;color:var(--muc-nhat);margin:8px 0 14px}

.home-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start;
  margin-bottom:26px}
.spots3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.spot{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:14px;
  border:1px solid var(--vien-in);border-radius:16px;background:var(--tam);text-align:left;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.spot:hover{border-color:var(--vien-dam);box-shadow:var(--shadow);transform:translateY(-2px)}
.spot .ph{width:96px;height:96px;border-radius:50%;overflow:hidden;border:2px solid var(--vien-dam);
  background:var(--kem);flex:0 0 auto}
.spot .ph img{width:100%;height:100%;object-fit:cover}
.spot h4{font-size:16.5px;font-family:var(--disp)}
.spot .meta{font-size:12.5px;color:var(--muc-nhat);display:flex;align-items:center;gap:5px;
  margin-top:4px}
.spot .meta svg{width:13px;height:13px;color:var(--son)}
.spot .row2{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.scans{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:var(--pill);
  background:var(--kem);color:var(--dong-chu)}

/* ── dải giá trị dưới chân ──────────────────────────────────── */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:20px 8px;margin:26px 0 40px}
.value{display:flex;gap:12px;align-items:flex-start;padding:6px 20px;
  border-left:1px solid var(--line)}
.value:first-child{border-left:0}
.value svg{width:26px;height:26px;color:var(--ngoc-sau);flex:0 0 auto;margin-top:2px}
.value b{display:block;font-size:14.5px;font-family:var(--disp);font-weight:600}
.value span{font-size:12.5px;color:var(--muc-nhat)}

/* ── feed cộng đồng ─────────────────────────────────────────── */
.feed{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.post{display:grid;grid-template-columns:190px 1fr;gap:0;overflow:hidden;
  border:1px solid var(--vien-in);border-radius:var(--r);background:var(--tam);
  transition:box-shadow .18s ease,border-color .18s ease}
.post:hover{box-shadow:var(--shadow);border-color:var(--vien)}
.post .ph{position:relative;background:var(--kem)}
.post .ph img{width:100%;height:100%;object-fit:cover;min-height:190px}
.post .ph .tagpos{position:absolute;left:10px;bottom:10px}
.post .body{padding:16px 18px}
.post h3{font-size:18px;margin:8px 0 6px}
.post p{font-size:13.5px;color:var(--muc-nhat)}
.byline{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muc-nhat)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--ngoc-sau);color:#FBF7EC;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:0 0 auto;
  font-family:var(--disp)}
.post .foot{display:flex;align-items:center;gap:18px;margin-top:12px;font-size:12.5px;
  color:var(--dong-chu);font-weight:600}
.post .foot svg{width:15px;height:15px}

.rail{display:flex;flex-direction:column;gap:18px}
.tagcloud{display:flex;flex-wrap:wrap;gap:9px}
.rowlist{display:flex;flex-direction:column}
.rowlist a,.rowlist .r{display:flex;align-items:center;gap:12px;padding:12px 4px;
  border-top:1px solid var(--line);font-size:14px}
.rowlist :first-child{border-top:0}
.rowlist .amt{margin-left:auto;font-weight:600;font-size:13px;white-space:nowrap}

/* ── bản đồ ─────────────────────────────────────────────────── */
.maplayout{display:grid;grid-template-columns:1fr 400px;gap:22px;align-items:start;
  margin-bottom:30px}
.mapstage{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--vien);background:var(--kem);box-shadow:var(--shadow)}
.mapstage img.art{width:100%;display:block}
.mappin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;
  align-items:center;gap:3px;cursor:pointer;filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}
.mappin svg{width:34px;height:44px}
.mappin .lbl{background:var(--tam);border:1px solid var(--vien);border-radius:9px;
  padding:3px 9px;font-size:11.5px;font-weight:600;white-space:nowrap;opacity:0;
  transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;position:absolute;top:100%}
.mappin:hover .lbl,.mappin:focus-visible .lbl,.mappin[aria-current] .lbl{opacity:1;transform:none}
.maplegend{position:absolute;right:16px;top:16px;background:rgba(251,247,236,.95);
  border:1px solid var(--vien);border-radius:14px;padding:14px 16px;backdrop-filter:blur(6px);
  font-size:12.5px;max-width:210px}
.maplegend b{display:block;font-family:var(--disp);font-size:14px;margin-bottom:8px}
.maplegend .lg{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start;
  margin-top:10px;line-height:1.35}
.maplegend .lg svg{width:16px;height:16px;margin-top:2px}
.maplegend .lg b{display:block;font-family:var(--disp);font-size:13.5px}
.maplegend .lg i{font-style:normal;color:var(--muc-nhat);font-size:12px}
.spotlist{max-height:760px;overflow:auto;padding-right:4px}
/* Hai cột, không ba: nhồi thêm cột nhãn vào một khay rộng 400px thì cột
   giữa bị bóp còn 90px và tên quán vỡ thành bốn dòng. */
.spotrow{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center;
  padding:14px 6px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.spotrow .r2{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.spotrow:hover{background:rgba(201,162,39,.06)}
.spotrow .ph{width:74px;height:74px;border-radius:14px;overflow:hidden;background:var(--kem);
  border:1px solid var(--vien-in)}
.spotrow .ph img{width:100%;height:100%;object-fit:cover}
.spotrow h4{font-size:15.5px}
/* block, không inline: hai dòng phụ (phố · hạng · lượt quét) và (các món)
   nếu nằm chung một dòng thì "31 scans Cao lầu" đọc ra như một cụm. */
.spotrow .meta{display:block;font-size:12px;color:var(--muc-nhat);margin-top:3px}

/* ── trang cơ sở ────────────────────────────────────────────── */
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muc-nhat);
  padding:18px 0}
.crumb a:hover{color:var(--dong-chu)}
.detail{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.dhero{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--vien);
  background:var(--kem);min-height:280px}
.dhero img.bg{width:100%;height:340px;object-fit:cover}
.dhero .inner{padding:22px 26px}
.dhero h1{font-size:38px}
.meter{margin-top:10px}
.meter .bar{height:12px;border-radius:var(--pill);background:linear-gradient(90deg,
  #DFF0E7 0%,#F4EAD2 55%,#F6DCD5 100%);position:relative;border:1px solid var(--line)}
.meter .dot{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;
  background:var(--ngoc-sau);border:3px solid #fff;transform:translate(-50%,-50%);
  box-shadow:0 2px 6px rgba(0,0,0,.18)}
.meter .ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muc-nhat);
  margin-top:8px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.fact{padding:16px;border:1px solid var(--vien-in);border-radius:16px;background:var(--tam)}
.fact b{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:15px}
.fact b svg{width:18px;height:18px;color:var(--dong-chu)}
.fact p{font-size:13px;color:var(--muc-nhat);margin-top:8px}
.dishes3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dish{border:1px solid var(--vien-in);border-radius:16px;overflow:hidden;background:var(--tam);
  display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;padding:12px}
.dish .ph{width:88px;height:88px;border-radius:12px;overflow:hidden;background:var(--kem)}
.dish .ph img{width:100%;height:100%;object-fit:cover}
.dish h4{font-size:15px}
.dish .amt{font-size:15px;font-weight:700;color:var(--ngoc-sau);margin-top:2px}
.dish p{font-size:12px;color:var(--muc-nhat);margin-top:4px}

/* ── quét thực đơn ──────────────────────────────────────────── */
.scanlayout{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.dropzone{border:2px dashed var(--vien);border-radius:var(--r-lg);background:var(--tam);
  min-height:320px;display:grid;place-items:center;text-align:center;padding:30px;
  transition:border-color .18s ease,background .18s ease}
.dropzone.hot{border-color:var(--ngoc);background:#F3FAF6}
.dropzone img.shot{max-height:420px;border-radius:14px;border:1px solid var(--vien)}
.uploads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.upl{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--vien-in);
  border-radius:16px;background:var(--tam);text-align:left}
.upl:hover{border-color:var(--vien-dam)}
.upl svg{width:22px;height:22px;color:var(--dong-chu);flex:0 0 auto}
.upl b{display:block;font-size:14px}
.upl span{font-size:12px;color:var(--muc-nhat)}
.verdict{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.verdict .v{padding:14px;border:1px solid var(--vien-in);border-radius:14px;background:var(--kem)}
.verdict .v b{display:block;font-size:12px;color:var(--muc-nhat);font-weight:600}
/* Số tiền KHÔNG được gãy dòng: "40.000₫ –" đứng một dòng rồi "60.000₫"
   xuống dòng dưới đọc ra như hai con số rời nhau. Cỡ chữ nhỏ hơn một
   bậc và tabular-nums giữ ba ô thẳng cột. */
.verdict .v span{display:block;font-family:var(--disp);font-size:19px;font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:1320px){ .verdict .v span{font-size:16.5px} }

/* ── nhật ký ────────────────────────────────────────────────── */
.jgrid{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:22px;align-items:start}
.jspots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.jspot{border:1px solid var(--vien-in);border-radius:16px;overflow:hidden;background:var(--tam)}
.jspot .ph{aspect-ratio:16/10;background:var(--kem)}
.jspot .ph img{width:100%;height:100%;object-fit:cover}
.jspot .b{padding:12px 14px}
.jspot h4{font-size:15px}
.timeline{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:64px 64px 1fr;gap:12px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line)}
.tl:first-child{border-top:0}
.tl .when{font-size:11.5px;color:var(--muc-nhat);text-align:right}
.tl .ph{width:64px;height:52px;border-radius:10px;overflow:hidden;background:var(--kem)}
.tl .ph img{width:100%;height:100%;object-fit:cover}
.tl h4{font-size:14px}
.note{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:14px 0;
  border-top:1px solid var(--line)}
.note:first-child{border-top:0}
.note .ph{width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--kem)}
.note .ph img{width:100%;height:100%;object-fit:cover}
.note h4{font-size:14.5px}
.note p{font-size:12.5px;color:var(--muc-nhat);margin-top:3px}

/* ── người đóng góp ─────────────────────────────────────────── */
.podium{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:end}
.helper{padding:18px 14px;border:1px solid var(--vien-in);border-radius:18px;background:var(--tam);
  text-align:center;position:relative}
.helper.first{border-color:var(--vien-dam);box-shadow:var(--shadow-lift);padding-top:30px}
.helper .rank{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:30px;
  height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;
  background:var(--kem);border:1px solid var(--vien);color:var(--dong-chu)}
.helper.first .rank{background:var(--dong);color:#3B2C05;border-color:var(--dong)}
.helper .av{width:78px;height:78px;border-radius:50%;margin:0 auto 10px;display:grid;
  place-items:center;background:var(--diep);border:2px solid var(--vien-dam);
  font-family:var(--disp);font-size:26px;font-weight:600;color:var(--ngoc-sau)}
.helper h4{font-size:17px}
.helper .role{font-size:12px;color:var(--muc-nhat);margin-top:2px}
.helper .count{display:inline-block;margin-top:9px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:var(--pill);background:var(--kem);color:var(--dong-chu)}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.badge{padding:14px 10px;border:1px solid var(--vien-in);border-radius:16px;background:var(--tam);
  text-align:center}
.badge img{width:72px;height:72px;margin:0 auto 8px;object-fit:contain}
.badge b{display:block;font-size:13px;font-family:var(--disp)}
.badge span{font-size:11.5px;color:var(--muc-nhat)}
/* Chưa mở khoá thì làm nhạt, KHÔNG xám hẳn: huy hiệu xám trắng trông như
   ảnh hỏng, mà mục đích của hàng này là cho thấy có gì đáng lấy. */
.badge.locked{opacity:.72;filter:grayscale(.55)}
.badge.locked b{color:var(--muc-nhat)}
.progress{height:9px;border-radius:var(--pill);background:var(--kem);overflow:hidden;
  border:1px solid var(--line)}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--ngoc),var(--ngoc-sau))}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:14px}
.step{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:flex-start}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--kem);border:1px solid var(--vien);
  display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--dong-chu)}
.step b{font-size:14.5px;font-family:var(--disp)}
.step p{font-size:12.5px;color:var(--muc-nhat)}

/* ── đăng nhập / đăng ký ────────────────────────────────────── */
.authwrap{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1180px;margin:34px auto 60px;
  border:1px solid var(--vien);border-radius:var(--r-lg);overflow:hidden;background:var(--tam);
  box-shadow:var(--shadow-lift)}
.authwrap.flip{grid-template-columns:1fr 1fr}
.authart{background:var(--kem);position:relative;min-height:560px}
.authart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.authform{padding:52px 56px}
.authform h1{font-size:44px;line-height:1.02}
.authform p.lede{color:var(--muc-nhat);margin-top:14px;font-size:15px}
.field{display:flex;align-items:center;gap:12px;border:1px solid var(--vien-in);
  border-radius:14px;background:var(--giay);padding:0 16px;margin-top:14px;min-height:56px;
  transition:border-color .16s ease,box-shadow .16s ease}
.field:focus-within{border-color:var(--vien-dam);box-shadow:0 0 0 3px rgba(201,162,39,.14)}
.field svg{width:20px;height:20px;color:var(--muc-nhat);flex:0 0 auto}
.field input{flex:1;border:0;background:none;outline:none;padding:16px 0;font-size:15px}
.field label{position:absolute;margin-top:-34px;font-size:11.5px;font-weight:600;
  color:var(--muc-nhat)}
.field .eye{padding:6px;border-radius:8px}
.check{display:flex;align-items:flex-start;gap:11px;margin-top:18px;font-size:13.5px;
  color:var(--muc-nhat)}
.check input{width:20px;height:20px;accent-color:var(--ngoc-sau);margin-top:1px}
.or{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--muc-nhat);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.warn{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:14px;
  background:#FFF6DF;border:1px solid rgba(201,162,39,.45);font-size:13px;color:#5C4708}
.warn svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;color:var(--dong-chu)}

/* ── chân trang ─────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:30px 0 46px;
  background:rgba(245,240,228,.55)}
.foot .wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.foot .small{color:var(--muc-nhat)}

/* ── trạng thái rỗng ────────────────────────────────────────── */
.empty{padding:34px;text-align:center;border:1px dashed var(--vien);border-radius:var(--r);
  background:var(--diep)}
.empty b{display:block;font-family:var(--disp);font-size:17px;margin-bottom:6px}
.empty p{font-size:13.5px;color:var(--muc-nhat);max-width:52ch;margin:0 auto}

/* ── co theo màn hình ───────────────────────────────────────
   Bản này thiết kế cho máy tính, nhưng KHÔNG được vỡ khi cửa sổ hẹp:
   người ta vẫn mở nửa màn hình để đọc song song. */
@media (max-width:1180px){
  .hero{grid-template-columns:1fr;gap:24px}
  .cards3,.spots3,.dishes3,.badges{grid-template-columns:repeat(2,1fr)}
  .home-grid,.maplayout,.detail,.scanlayout{grid-template-columns:1fr}
  .jgrid{grid-template-columns:1fr 1fr}
  .podium{grid-template-columns:repeat(3,1fr)}
  .values{grid-template-columns:repeat(2,1fr);gap:14px}
  .value{border-left:0}
  /* Ở khổ hẹp thì nav đã là icon-only sẵn; chỉ cần bỏ phần nở chữ để
     thanh không đội lên khi rê chuột. */
  .nav a:hover span,.nav a:focus span{max-width:0;opacity:0}
  .nav a:hover,.nav a:focus{gap:0;padding-right:13px}
}
@media (max-width:820px){
  .wrap{padding:0 18px}
  .cards3,.spots3,.dishes3,.badges,.feed,.jgrid,.podium,.authwrap{grid-template-columns:1fr}
  .acard{grid-template-columns:110px 1fr}
  .post{grid-template-columns:1fr}
  .authform{padding:34px 26px}
  .authart{min-height:220px}
  .top .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
  .nav{order:3;width:100%;margin:0;overflow:auto}
}

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

/* Nút "Phone app" ở thanh trên: dưới 1180px thì chỉ còn icon — ba nút chữ
   trong một hàng ngang là thứ đầu tiên đẩy thanh nav xuống dòng. */
@media (max-width:1180px){ .hide-sm{display:none} }

/* ── icon trong dòng chữ ────────────────────────────────────
   Mọi icon nay tự khai 18×18 trong thẻ svg. Vài chỗ cần cỡ khác thì
   khai ở đây, và chỉ ở đây — rải kích thước icon khắp nơi là cách chắc
   chắn nhất để mỗi trang có một cỡ ghim khác nhau. */
.crumb svg{width:14px;height:14px;color:var(--muc-nhat);vertical-align:-2px}
.fact b svg{width:17px;height:17px}
.dhero .inner p svg{width:15px;height:15px;vertical-align:-2px}
.value svg{width:26px;height:26px}
.post .foot svg{width:15px;height:15px;vertical-align:-2px}

/* ── cổng đăng nhập ─────────────────────────────────────────
   Dùng cho mọi khối sống bằng dữ liệu người dùng. Cùng một hình dạng ở
   mọi trang: người ta nhận ra "chỗ này cần đăng nhập" mà không phải đọc. */
.gatebox{display:grid;justify-items:center;text-align:center;gap:10px;
  padding:34px 26px;border:1px dashed var(--vien);border-radius:var(--r);
  background:var(--diep)}
.gatebox .gicon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--tam);border:1px solid var(--vien);color:var(--dong-chu)}
.gatebox .gicon svg{width:22px;height:22px}
.gatebox b{font-family:var(--disp);font-size:18px}
.gatebox p{font-size:13.5px;color:var(--muc-nhat);max-width:46ch}
.gatebox .grow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* ── hộp trò chuyện ─────────────────────────────────────────
   Neo góc phải dưới và KHÔNG đẩy nội dung: nó là lớp phủ, không phải một
   cột nữa. z-index trên thanh trên (40) nhưng dưới menu đổi vùng (60) —
   mở menu vùng mà bị cái bong bóng chat đè lên thì hỏng cả hai. */
.chatfab{position:fixed;right:24px;bottom:24px;z-index:50;
  display:inline-flex;align-items:center;gap:10px;padding:14px 20px;
  border-radius:var(--pill);background:var(--ngoc-sau);color:#FBF7EC;
  font-size:14.5px;font-weight:600;box-shadow:0 8px 30px rgba(14,74,60,.32);
  transition:transform .16s ease,box-shadow .18s ease}
.chatfab:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(14,74,60,.4)}
.chatfab svg{width:20px;height:20px}
.chatfab[aria-expanded="true"]{opacity:0;pointer-events:none}

.chatbox{position:fixed;right:24px;bottom:24px;z-index:52;width:390px;max-width:calc(100vw - 32px);
  height:min(600px, calc(100vh - 120px));display:flex;flex-direction:column;
  background:var(--tam);border:1px solid var(--vien);border-radius:22px;overflow:hidden;
  box-shadow:0 20px 60px rgba(31,26,10,.22)}
/* `display:flex` ở trên ĐÈ thuộc tính hidden của trình duyệt: bấm nút thu nhỏ
   thì hidden bật mà hộp chat vẫn nằm nguyên — người dùng báo "không đóng được". */
.chatbox[hidden]{display:none}
.chatbox header{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:rgba(201,162,39,.08)}
.chatbox header .ava{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--ngoc-sau);color:var(--dong);flex:0 0 auto}
.chatbox header b{display:block;font-family:var(--disp);font-size:16px}
.chatbox header i{font-style:normal;font-size:11.5px;color:var(--muc-nhat)}
.chatbox header .x{margin-left:auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--muc-nhat)}
.chatbox header .x:hover{background:rgba(201,162,39,.16)}

.chatbox .log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.chatbox .msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.5}
.chatbox .msg.bot{background:var(--diep);border:1px solid var(--vien-in);
  border-bottom-left-radius:6px;align-self:flex-start}
.chatbox .msg.me{background:var(--ngoc-sau);color:#F4FAF7;border-bottom-right-radius:6px;
  align-self:flex-end}
.chatbox .msg .tiny{display:block;margin-top:8px;font-size:11.5px;color:var(--muc-nhat)}
.chatbox .keyin{width:100%;margin-top:8px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--vien);background:var(--giay);font-size:13px}

.chatbox .ask{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chatbox .ask input{flex:1;padding:12px 14px;border-radius:var(--pill);
  border:1px solid var(--vien-in);background:var(--giay);font-size:14px;outline:none}
.chatbox .ask input:focus{border-color:var(--vien-dam)}
.chatbox .send{width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;background:var(--ngoc-sau);color:#FBF7EC}
.chatbox .send:hover{background:#0B3B30}
.chatbox .foot{padding:0 14px 12px;font-size:11px;color:var(--muc-nhat)}

@media (max-width:520px){
  .chatbox{right:8px;left:8px;bottom:8px;width:auto;height:min(70vh, 520px)}
  .chatfab{right:12px;bottom:12px}
  .chatfab span{display:none}
}
.chatbox .think{color:var(--muc-nhat);font-style:italic}
.chatbox .think::after{content:"";animation:nlDots 1.2s steps(4,end) infinite}
@keyframes nlDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}