/* Bếp Việt Today — design system
   Ground: night green #0E1712 · Cream #F6EFE3 · Saffron #F5B53F · Chili #C9472F · Herb #7FC28A
   Type: Be Vietnam Pro (UI) + Playfair Display italic (accent words) */
:root{
  --night:#0E1712; --night-2:#121D17; --ink:#16201A; --cream:#F6EFE3; --cream-2:#E9E0CF;
  --gold:#F5B53F; --gold-soft:#F5C668; --chili:#C9472F; --brown:#9A3B24; --herb:#7FC28A; --herb-soft:#A9DDB2;
  --muted-d:#B9B2A3; --faint-d:#8F887A; --muted-l:#5A5346; --line-d:rgba(246,239,227,.1); --line-l:#E4DCCB;
  --r-sm:12px; --r:20px; --r-lg:24px; --r-xl:32px;
  --ease:cubic-bezier(.16,.84,.3,1);
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--night);color:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.03em;font-weight:700}
em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--gold)}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:var(--night);padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.narrow{max-width:760px}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-lg{display:flex;flex-direction:column;gap:36px}
.stack-xl{display:flex;flex-direction:column;gap:64px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:16px}
.row-end{display:flex;justify-content:flex-end;gap:10px}
.wrap-gap{flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn svg{flex:none}
.btn-gold{background:var(--gold);color:var(--night)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(245,181,63,.65)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(14,23,18,.6)}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--line-l)}
.btn-outline[aria-pressed="true"]{background:#E1EFE3;border-color:#1F4D3A;color:#1F4D3A}
.btn-dashed{background:transparent;color:#1F4D3A;border:1.5px dashed #1F4D3A;width:100%}
.btn-sm{min-height:44px;padding:0 20px}
.btn-lg{min-height:58px;padding:0 32px;font-size:16px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:15px}
.link-arrow svg{color:var(--gold);transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Header / footer / tabbar ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(14,23,18,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:76px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--gold);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.brand-mark.big{width:72px;height:72px;border-radius:22px}
.brand-mark{overflow:hidden}
.brand-mark img{width:38px;height:38px;display:block}
.install-icon{overflow:hidden}
.install-icon img{width:52px;height:52px;display:block}
.qr-mascot{width:200px;height:200px;animation:float 5s ease-in-out infinite}
.brand-name{font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.brand-name em{font-weight:600}
.top-nav{display:flex;gap:36px;font-size:15px;font-weight:500;color:#CFC7B8}
.top-nav a{padding:12px 0;position:relative}
.top-nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.top-nav a:hover{color:var(--cream)}
.top-nav a:hover::after,.top-nav a[aria-current="page"]::after{transform:scaleX(1)}

.site-footer{border-top:1px solid var(--line-d);padding:64px 0 40px;background:var(--night)}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.footer-brand{max-width:340px;display:flex;flex-direction:column;gap:16px}
.footer-brand p{font-size:14px;color:var(--faint-d);line-height:1.7}
.footer-cols{display:flex;flex-wrap:wrap;gap:64px}
.footer-cols div{display:flex;flex-direction:column;gap:2px;font-size:14px}
.footer-cols h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint-d);margin-bottom:10px}
.footer-cols a{color:#CFC7B8;padding:6px 0}
.footer-cols a:hover{color:var(--gold)}
.footer-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-d);font-size:13px;color:var(--faint-d)}

.tabbar{display:none}

/* ---------- Atmosphere & motion ---------- */
.glow{position:absolute;border-radius:50%;pointer-events:none;animation:glow 6s ease-in-out infinite}
.glow-hero{width:760px;height:760px;right:-200px;top:-180px;background:radial-gradient(closest-side,rgba(245,181,63,.24),rgba(226,85,58,.10) 55%,rgba(14,23,18,0))}
.glow-center{width:640px;height:640px;left:50%;top:0;margin-left:-320px;background:radial-gradient(closest-side,rgba(226,85,58,.14),rgba(14,23,18,0))}
@keyframes glow{0%,100%{opacity:.6}50%{opacity:1}}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.steam{animation:steam 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes steam{0%{opacity:0;transform:translateY(10px) scaleX(.9)}35%{opacity:.8}100%{opacity:0;transform:translateY(-30px) scaleX(1.15)}}
.spin{animation:spin 60s linear infinite;transform-box:fill-box;transform-origin:center}
.spin-rev{animation:spin 90s linear infinite reverse;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.reveal{animation:rise 1s var(--ease) both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .reveal-on-scroll{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal-on-scroll.is-in{opacity:1;transform:none}

/* ---------- Hero (home) ---------- */
.hero{position:relative;padding:72px 0 112px;overflow:hidden}
.hero-grid{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column}
.chip-live{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;border:1px solid rgba(246,239,227,.14);font-size:13px;font-weight:600;letter-spacing:.04em;color:#CFC7B8}
.dot{width:7px;height:7px;border-radius:4px;background:var(--herb);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,194,138,.6)}100%{box-shadow:0 0 0 9px rgba(127,194,138,0)}}
.hero h1{margin-top:28px;max-width:620px;font-size:clamp(44px,5.4vw,78px);line-height:1.04;letter-spacing:-.035em}
.lead{margin-top:20px;max-width:520px;font-size:18px;line-height:1.7;color:var(--muted-d)}
.hero .lead{margin-top:24px}
.hero .search{margin-top:40px}
.popular{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:14px}
.popular span{color:var(--faint-d)}
.popular a{color:#CFC7B8;padding:8px 0;border-bottom:1px solid rgba(246,239,227,.2)}
.popular a:hover{color:var(--gold);border-color:var(--gold)}
.trust{margin-top:56px;padding-top:28px;border-top:1px solid var(--line-d);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:580px}
.trust div{display:flex;flex-direction:column;gap:6px}
.trust strong{font-size:15px;font-weight:600}
.trust span{font-size:13px;line-height:1.5;color:var(--faint-d)}
.hero-stage{flex:1 1 440px;min-width:0;position:relative;max-width:500px;aspect-ratio:1/1;margin:0 auto}
.stage-rings{position:absolute;inset:0;width:100%;height:100%}
.stage-mascot{position:absolute;left:6%;top:6%;width:88%}
.stage-mascot img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.float-card{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;background:rgba(18,29,23,.82);border:1px solid rgba(246,239,227,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.float-card strong{display:block;font-size:14px;font-weight:600}
.float-card small{display:block;font-size:12px;color:var(--muted-d)}
.fc-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fc-1{right:-6%;top:0;animation-delay:1s}
.fc-2{left:-8%;bottom:2%;animation-delay:3s}

/* ---------- Search ---------- */
.search{position:relative;display:flex;flex-wrap:wrap;gap:8px;padding:8px;border-radius:var(--r);background:rgba(246,239,227,.05);border:1px solid rgba(246,239,227,.12);max-width:580px}
.search input{flex:1 1 220px;min-width:0;height:56px;border:0;background:transparent;padding:0 16px 0 50px;font-size:16px;color:var(--cream);border-radius:14px}
.search input::placeholder{color:#9D9688}
.search input:focus{outline:none}
.search:focus-within{border-color:rgba(245,181,63,.6);box-shadow:0 0 0 4px rgba(245,181,63,.12)}
.search-icon{position:absolute;left:26px;top:26px;color:var(--muted-d)}
.search .btn{min-height:56px;border-radius:14px}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:#16231B;border:1px solid rgba(246,239,227,.14);border-radius:18px;padding:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);max-height:360px;overflow:auto}
.search-results a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:var(--cream)}
.search-results a:hover,.search-results a[aria-selected="true"]{background:rgba(246,239,227,.07)}
.search-results small{color:var(--faint-d);font-size:12px}
.search-results .tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.section-cream .search{background:#fff;border-color:var(--line-l)}
.section-cream .search input{color:var(--ink)}
.section-cream .search-icon{color:var(--muted-l)}

/* ---------- Ticker ---------- */
.ticker{background:var(--gold);color:var(--night);padding:16px 0;overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:32px;padding-right:32px;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{position:relative;padding:128px 0;overflow:hidden}
.section-tight{padding:56px 0 96px}
.section-cream{background:var(--cream);color:var(--ink)}
.section-cream em{color:var(--brown)}
.section-deep{background:var(--night-2)}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-bottom:56px}
.section-head > div{max-width:680px}
.section-head h2{margin-top:16px;font-size:clamp(34px,3.6vw,52px)}
.section-cream .lead{color:var(--muted-l);font-size:17px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.eyebrow-gold{color:var(--gold)}.eyebrow-red{color:var(--brown)}.eyebrow-green{color:var(--herb-soft)}.eyebrow-brown{color:#6B3E0A}
.section-deep em{color:var(--herb-soft)}
.h-sub{font-size:22px;letter-spacing:-.02em;margin-bottom:16px}
.h-small{font-size:17px;letter-spacing:-.01em;margin-bottom:12px}
.body-lg{font-size:17px;line-height:1.75;color:#3F3B35}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}

.segmented{display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--cream-2)}
.segmented button{min-height:44px;padding:0 24px;border:0;border-radius:999px;background:transparent;color:#4A4438;font-size:15px;font-weight:500;cursor:pointer;transition:background .25s,color .25s}
.segmented button[aria-selected="true"]{background:var(--ink);color:var(--cream);font-weight:600}
.segmented-sm button{min-height:40px;padding:0 16px;font-size:14px}

/* ---------- Cards ---------- */
.card{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-8px)}
.card .art{transition:transform .7s var(--ease)}
.card:hover .art{transform:scale(1.06) rotate(-3deg)}

.province-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(14,23,18,.06),0 16px 40px -28px rgba(14,23,18,.35)}
.province-card:hover{box-shadow:0 32px 64px -32px rgba(14,23,18,.45)}
.province-card[hidden]{display:none}
.province-art{position:relative;height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.province-art .art{position:relative;width:220px;margin-top:12px}
.art-halo{position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.18)}
.pill{position:absolute;left:20px;top:20px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em}
.pill-light{background:rgba(255,255,255,.9);color:var(--ink)}
.province-body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:12px}
.province-body h3{font-size:24px;letter-spacing:-.02em}
.province-body p{font-size:15px;line-height:1.6;color:var(--muted-l)}
.circle-arrow{width:40px;height:40px;flex:0 0 40px;border-radius:20px;border:1px solid var(--line-l);display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.province-card:hover .circle-arrow{background:var(--ink);color:var(--cream)}

.dish-tile{display:flex;flex-direction:column;gap:20px;padding:24px;border-radius:var(--r-lg);background:var(--tile);color:var(--cream);overflow:hidden}
.dish-tile:hover{box-shadow:0 32px 64px -32px rgba(0,0,0,.6)}
.rank{font-family:var(--serif);font-style:italic;font-size:30px;font-weight:500;color:var(--gold-soft)}
.tile-place{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,239,227,.72)}
.tile-art{height:150px;display:flex;align-items:center;justify-content:center}
.tile-art .art{width:170px}
.tile-foot{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid rgba(246,239,227,.14)}
.tile-foot strong{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.tile-foot span{font-size:14px;color:rgba(246,239,227,.75)}

.shop-card{display:flex;flex-direction:column;gap:24px;padding:28px;border-radius:var(--r-lg);background:rgba(246,239,227,.03);border:1px solid var(--line-d)}
.shop-card:hover{border-color:rgba(246,239,227,.2);box-shadow:0 32px 64px -32px rgba(0,0,0,.6)}
.shop-top{display:flex;gap:16px;align-items:center}
.shop-icon{width:56px;height:56px;flex:0 0 56px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.shop-title{display:flex;flex-direction:column;gap:4px;min-width:0}
.shop-title strong{font-size:18px;font-weight:600}
.shop-title span{font-size:14px;color:var(--muted-d)}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600}
.badge-green{background:rgba(127,194,138,.12);color:var(--herb-soft)}
.badge-gold{background:rgba(245,181,63,.12);color:var(--gold-soft)}
.badge-verify{background:#E1EFE3;color:#1F4D3A}
.badge-amber{background:#FBEBC8;color:#6B4A12}
.badge-muted{background:#EFEBE2;color:#5F5B53}
.shop-foot{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid rgba(246,239,227,.08);font-size:14px;color:var(--muted-d)}
.rating{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:700;color:var(--cream)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--gold);color:var(--ink);padding:72px 64px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px}
.cta-rings{position:absolute;right:-110px;top:-110px;width:440px;height:440px}
.cta-copy{position:relative;max-width:600px;display:flex;flex-direction:column;gap:16px}
.cta-copy h2{font-size:clamp(30px,3.2vw,46px)}
.cta-copy p{font-size:17px;line-height:1.7;color:#3A3428}
.cta-band .btn{position:relative}
.cta-band .btn svg{color:var(--gold)}

/* ---------- Inner pages ---------- */
.page-hero{position:relative;overflow:hidden;padding:56px 0 64px;border-radius:0 0 40px 40px;background:var(--night)}
.page-hero-inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.page-hero-text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px}
.page-hero h1{font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-.035em}
.page-hero .lead{margin-top:2px}
.back{width:44px;height:44px;border-radius:22px;background:rgba(246,239,227,.08);border:1px solid rgba(246,239,227,.14);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;transition:background .2s}
.back:hover{background:rgba(246,239,227,.16)}
.page-hero-art{position:relative;width:280px;height:280px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.page-hero-art .ring{position:absolute;inset:0;width:100%;height:100%}
.page-hero-art .float{width:230px}

.list-row,.rank-row{display:flex;align-items:center;gap:16px;padding:12px;border-radius:var(--r);background:#fff;box-shadow:0 1px 0 rgba(14,23,18,.05),0 10px 24px -20px rgba(14,23,18,.4);transition:transform .35s var(--ease),box-shadow .35s}
.list-row:hover,.rank-row:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(14,23,18,.45)}
.list-thumb{width:96px;height:96px;flex:0 0 96px;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.list-thumb .art{width:84px}
.list-text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.list-text strong{font-size:17px;font-weight:600;letter-spacing:-.01em}
.list-text span{font-size:14px;line-height:1.5;color:var(--muted-l);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list-text em{font-family:var(--font);font-style:normal;font-size:12px;font-weight:600;letter-spacing:.02em;color:#1F4D3A}
.list-chevron{color:var(--muted-l);flex:0 0 auto}
.rank-num{width:40px;height:40px;flex:0 0 40px;border-radius:20px;background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;font-weight:700}
.rating-line{display:inline-flex !important;align-items:center;gap:4px}
.rating-line b{color:var(--ink)}
.count{font-size:14px;color:var(--muted-l)}
.empty{font-size:15px;color:var(--muted-l)}
.empty a{color:#1F4D3A;font-weight:600;text-decoration:underline}

.panel{background:#fff;border-radius:var(--r);padding:24px;box-shadow:0 1px 0 rgba(14,23,18,.05),0 12px 30px -24px rgba(14,23,18,.4)}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px}
.steps li{counter-increment:s;position:relative;padding-left:38px;min-height:26px;font-size:15px;line-height:1.6}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:13px;background:var(--gold);color:var(--night);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps li svg{display:inline-block;vertical-align:-4px}
.steps-big li{font-size:16px}

.score-line{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted-l)}
.score-line strong{font-size:28px;color:var(--ink);letter-spacing:-.02em}
.actions-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.actions-3 .btn{padding:0 12px}
.info{margin:0;background:#fff;border-radius:var(--r);padding:4px 20px}
.info div{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid #EFEBE2;font-size:15px}
.info div:last-child{border-bottom:0}
.info dt{flex:0 0 110px;color:var(--muted-l)}
.info dd{margin:0}
.menu{margin:0;padding:0;list-style:none}
.menu li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-l);font-size:16px}
.menu li:last-child{border-bottom:0}
.scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.scores div{background:#fff;border-radius:16px;padding:16px;text-align:center}
.scores strong{display:block;font-size:24px;letter-spacing:-.02em}
.scores span{font-size:13px;color:var(--muted-l)}
.review{background:#fff;border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px}
.review-head{display:flex;align-items:center;gap:12px}
.avatar{width:38px;height:38px;border-radius:19px;background:#DCE6D9;color:#1F4D3A;font-weight:700;display:flex;align-items:center;justify-content:center}
.review-head strong{font-size:15px}
.review-head small{display:block;font-size:12px;color:var(--muted-l)}
.review p{font-size:15px;line-height:1.6;color:#3F3B35}

.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.field input,.field textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-l);background:#FBF8F2;font-weight:400;font-size:16px;color:var(--ink)}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(245,181,63,.18)}
.hint{font-size:14px;color:var(--muted-l)}

.review-dialog{border:0;border-radius:var(--r-lg);padding:28px;width:min(520px,calc(100% - 32px));background:var(--cream);color:var(--ink)}
.review-dialog::backdrop{background:rgba(14,23,18,.6);backdrop-filter:blur(4px)}
.stars{border:0;padding:0;margin:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:2px}
.stars legend{float:left;width:100%;font-size:14px;font-weight:600;margin-bottom:4px}
.stars input{position:absolute;opacity:0}
.stars label{font-size:30px;line-height:1;color:#D9D2C3;cursor:pointer;padding:4px}
.stars input:checked ~ label,.stars label:hover,.stars label:hover ~ label{color:#D9952A}
.stars input:focus-visible + label{outline:2px solid var(--gold);border-radius:6px}

/* ---------- Install sheet ---------- */
.install-sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:16px;padding-bottom:calc(16px + var(--safe-b));pointer-events:none}
.install-card{pointer-events:auto;position:relative;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:16px 48px 16px 16px;border-radius:22px;background:#16231B;border:1px solid rgba(246,239,227,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);animation:rise .6s var(--ease) both}
.install-icon{width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:var(--gold);display:flex;align-items:center;justify-content:center}
.install-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.install-text strong{font-size:15px}
.install-text span{font-size:13px;line-height:1.45;color:var(--muted-d)}
.install-text svg{display:inline-block;vertical-align:-4px;color:var(--gold)}
.install-close{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;background:transparent;color:var(--muted-d);font-size:24px;cursor:pointer;border-radius:22px}

/* ---------- QR splash ---------- */
.qr-splash{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:14px;animation:rise .8s var(--ease) both}
.qr-box .brand-name{font-size:26px}
.qr-msg{color:var(--muted-d)}

/* ---------- Ảnh thật + hiệu ứng ---------- */
.photo{position:absolute;inset:0;display:block;overflow:hidden;background:#2A2F26}
.photo img{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%;animation:kenburns 20s ease-in-out infinite alternate;transition:filter .6s var(--ease)}
@keyframes kenburns{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-2%,0)}}
.photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,23,18,0) 50%,rgba(14,23,18,.45));pointer-events:none}
.steam-overlay{position:absolute;left:50%;bottom:30%;width:56%;max-width:240px;transform:translateX(-50%);opacity:.7;pointer-events:none;mix-blend-mode:screen;filter:blur(2px)}
.steam-soft{animation-duration:4.4s}
.card:hover .photo img{filter:saturate(1.15) brightness(1.06)}
.photo img[src=""]{display:none}

.province-art.has-photo .photo{position:absolute;inset:0}
.province-art .pill{z-index:2}

.dish-tile.has-photo{position:relative;min-height:360px;background:var(--night)}
.tile-photo{position:absolute;inset:0;border-radius:inherit}
.tile-photo .photo-shade{background:linear-gradient(180deg,rgba(14,23,18,.35) 0%,rgba(14,23,18,0) 30%,rgba(14,23,18,.15) 55%,rgba(14,23,18,.88) 100%)}
.tile-photo .steam-overlay{bottom:42%}
.dish-tile.has-photo .tile-top,.dish-tile.has-photo .tile-foot{position:relative;z-index:1}
.tile-spacer{flex:1 1 auto;min-height:140px}

.shop-photo{position:relative;height:190px;margin:-28px -28px 0;border-radius:24px 24px 0 0;overflow:hidden}
.shop-photo .steam-overlay{bottom:20%;width:40%}

.list-thumb.has-photo{position:relative}

.page-hero--photo{min-height:460px;display:flex;align-items:flex-end;padding-top:96px}
.hero-photo{position:absolute;inset:0}
.hero-photo .photo{background:var(--night)}
.hero-photo .photo-shade{background:linear-gradient(180deg,rgba(14,23,18,.35) 0%,rgba(14,23,18,.15) 35%,rgba(14,23,18,.92) 92%)}
.hero-photo .steam-overlay{bottom:42%;width:34%;max-width:300px;opacity:.6}
.page-hero--photo .page-hero-inner{z-index:1;width:100%}
.page-hero--photo .back{background:rgba(14,23,18,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.page-hero--photo h1,.page-hero--photo .lead{text-shadow:0 2px 24px rgba(0,0,0,.45)}

.gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -4px;padding:2px 4px 8px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery-item{position:relative;flex:0 0 220px;height:160px;border-radius:16px;overflow:hidden;scroll-snap-align:start}
.gallery-item .photo img{animation:none}

/* ---------- Trang chủ: phần đầu & rail ---------- */
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-mini{display:none}
.show-m{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-nav{gap:24px}
}
@media (max-width:860px){
  .top-nav{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .header-row{min-height:64px}
  .header-cta{display:none}
  .hero{padding:40px 0 72px}
  .hero-grid{gap:24px}
  .hero-stage{order:-1;max-width:320px;width:100%}
  .fc-1{right:-2%;top:-2%}.fc-2{left:-2%;bottom:0}
  .float-card{padding:8px 12px 8px 8px;border-radius:14px}
  .fc-icon{width:32px;height:32px;border-radius:10px}
  .float-card small{display:none}
  .lead{font-size:16px}
  .trust{grid-template-columns:1fr;gap:14px;margin-top:40px}
  .section{padding:80px 0}
  .section-tight{padding:32px 0 64px}
  .section-head{margin-bottom:32px}
  .grid-3,.grid-4{grid-template-columns:1fr;gap:16px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dish-tile{padding:16px;gap:12px}
  .tile-art{height:96px}.tile-art .art{width:110px}
  .rank{font-size:22px}
  .tile-foot strong{font-size:16px}.tile-foot span{font-size:12px}
  .tile-place{display:none}
  .province-art{height:200px}.province-art .art{width:170px}
  .segmented{width:100%}.segmented button{flex:1 1 0;padding:0 8px}
  .cta-band{padding:44px 28px;border-radius:24px}
  .page-hero{padding:24px 0 36px;border-radius:0 0 32px 32px}
  .page-hero-inner{flex-direction:column;align-items:stretch;gap:8px}
  .page-hero-text{flex:0 0 auto}
  .search .btn{flex:1 1 100%}
  .page-hero-art{width:180px;height:180px;align-self:center;order:-1}
  .page-hero-art .float{width:150px}
  .list-thumb{width:76px;height:76px;flex-basis:76px}.list-thumb .art{width:66px}
  .info dt{flex-basis:90px}
  .footer-cols{gap:32px}
  body{padding-bottom:calc(64px + var(--safe-b))}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:40;padding:6px 8px calc(6px + var(--safe-b));background:rgba(14,23,18,.92);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid rgba(246,239,227,.08)}
  .tabbar a{position:relative;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:500;color:#A39B8C;transition:color .2s}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a::before{content:"";position:absolute;top:-6px;left:50%;width:28px;height:3px;margin-left:-14px;border-radius:0 0 3px 3px;background:var(--gold);transform:scaleX(0);transition:transform .3s var(--ease)}
  .tabbar a[aria-current="page"]{color:var(--gold);font-weight:600}
  .tabbar a[aria-current="page"]::before{transform:scaleX(1)}
  .tabbar a:active{transform:scale(.94)}
  .install-sheet{bottom:calc(64px + var(--safe-b))}
  .page-hero--photo{min-height:380px;padding-top:72px}
  .dish-tile.has-photo{min-height:240px}
  .tile-spacer{min-height:80px}
  .gallery-item{flex-basis:170px;height:128px}
}
@media (display-mode:standalone){
  .header-cta,[data-install-hide-standalone]{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal-on-scroll{opacity:1;transform:none}
}

/* ---------- Điện thoại: thấy món ăn ngay màn hình đầu ---------- */
@media (max-width:640px){
  .hero{padding:14px 0 22px}
  .hero .glow-hero{width:420px;height:420px;right:-160px;top:-140px}
  .hero-grid{gap:0}
  .hero-stage{display:none}
  .hero-mini{display:block;width:92px;height:92px;margin:-6px -4px -14px 0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
  .hero h1{margin-top:4px;font-size:34px;line-height:1.08}
  .hero .lead,.popular,.trust{display:none}
  .hero .search{margin-top:16px;flex-wrap:nowrap;padding:6px;gap:6px}
  .search input{flex:1 1 auto;height:48px;font-size:15px;padding-left:40px}
  .search-icon{left:18px;top:20px}
  .search .btn{flex:0 0 auto;min-height:48px;padding:0 18px}
  .hide-m{display:none}
  .show-m{display:inline}

  .section{padding:44px 0}
  .section-top{padding:4px 0 36px}
  .section-top .glow{display:none}
  .section-head{margin-bottom:16px;gap:6px 16px;align-items:center}
  .section-head h2{margin-top:8px;font-size:26px}
  .section-head .lead{font-size:14px;margin-top:6px}
  .section-head .eyebrow{font-size:11px}
  .link-arrow{min-height:36px;font-size:14px}
  .ticker{padding:12px 0}
  .ticker-track span{font-size:12px;gap:22px;padding-right:22px}

  .rail{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;gap:12px;margin:0 -20px;padding:4px 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail::-webkit-scrollbar{display:none}
  .rail > *{flex:0 0 76%;scroll-snap-align:start;min-width:0}
  .rail > [hidden]{display:none}
  .grid-4.rail > .dish-tile{flex-basis:64%;min-height:280px;padding:18px;gap:10px}
  .grid-4.rail .tile-art{height:136px}
  .grid-4.rail .tile-art .art{width:156px}
  .grid-4.rail .tile-place{display:block;font-size:11px}
  .grid-4.rail .rank{font-size:26px}
  .grid-4.rail .tile-foot strong{font-size:19px}
  .grid-4.rail .tile-foot span{font-size:13px}
  .grid-4.rail .tile-spacer{min-height:120px}
  .rail .province-card{flex-basis:78%}
  .rail .province-art{height:190px}
  .rail .province-body{padding:16px 18px 18px}
  .rail .province-body h3{font-size:20px}
  .rail .shop-card{flex-basis:84%;padding:20px;gap:16px}
  .rail .shop-photo{margin:-20px -20px 0;height:160px}
}


/* ---------- Món nhất định phải thử (trang vùng, điểm đến) ---------- */
.must-head{max-width:680px;margin-bottom:36px}
.must-head h2{margin-top:14px;font-size:clamp(32px,3.4vw,48px)}
.must-head .lead{margin-top:12px}
.must-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.must-item:first-child{grid-column:1/-1}
.must-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);height:100%;border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(14,23,18,.06),0 16px 40px -28px rgba(14,23,18,.35);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.must-card:hover{transform:translateY(-6px);box-shadow:0 32px 64px -32px rgba(14,23,18,.45)}
.must-item:first-child .must-card{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.must-media{position:relative;min-height:230px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.must-item:first-child .must-media{min-height:340px}
.must-media .art{position:relative;width:180px;transition:transform .7s var(--ease)}
.must-item:first-child .must-media .art{width:240px}
.must-card:hover .must-media .art{transform:scale(1.06) rotate(-3deg)}
.must-card:hover .photo img{filter:saturate(1.15) brightness(1.06)}
.must-num{position:absolute;left:18px;top:10px;z-index:2;font-family:var(--serif);font-style:italic;font-weight:600;font-size:46px;line-height:1;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.35)}
.must-body{display:flex;flex-direction:column;gap:8px;padding:26px 28px 22px;min-width:0}
.must-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brown)}
.must-from{padding:3px 9px;border-radius:999px;background:#F3ECDD;color:var(--muted-l);font-size:11px;letter-spacing:.04em;text-transform:none;font-weight:600}
.must-name{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.must-item:first-child .must-name{font-size:34px}
.must-story{font-size:15px;line-height:1.65;color:var(--muted-l);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.must-shop{margin-top:auto;padding-top:14px;border-top:1px solid #EFEBE2;display:flex;align-items:center;gap:8px;font-size:14px;color:#1F4D3A}
.must-shop > span{min-width:0;flex:1 1 auto}
.must-shop b{color:var(--ink)}
.must-shop > svg:last-child{flex:0 0 auto;color:var(--brown);transition:transform .3s var(--ease)}
.must-card:hover .must-shop > svg:last-child{transform:translateX(4px)}
.section-flush{padding-top:0}

/* Dải "Đang ở đây? Xem quán gần bạn" */
.near-strip{margin-top:28px;display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r);background:var(--ink);color:var(--cream);transition:transform .35s var(--ease),box-shadow .35s}
.near-strip:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(14,23,18,.6)}
.near-strip-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.near-strip-text strong{font-size:17px}
.near-strip-text span{font-size:14px;color:var(--muted-d)}
.near-strip .circle-arrow{border-color:rgba(246,239,227,.2)}
.near-pulse{position:relative;width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--gold);color:var(--night);display:flex;align-items:center;justify-content:center}
.near-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ring 2s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(245,181,63,.55)}100%{box-shadow:0 0 0 14px rgba(245,181,63,0)}}
.near-pulse-lg{width:56px;height:56px;flex-basis:56px}
.near-pulse-lg svg{width:22px;height:22px}

/* ---------- Gần bạn ---------- */
.near-chip{display:inline-flex !important;align-items:center;gap:6px;padding:7px 14px !important;border-radius:999px;border:1px solid rgba(245,181,63,.4) !important;background:rgba(245,181,63,.12);color:var(--gold) !important;font-weight:600}
.near-chip:hover{background:rgba(245,181,63,.22)}
.section-near{background:var(--cream);color:var(--ink);padding:44px 0 52px}
.section-near em{color:var(--brown)}
.near-ask{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;padding:24px;border-radius:var(--r-lg);background:#fff;box-shadow:0 1px 0 rgba(14,23,18,.05),0 16px 36px -28px rgba(14,23,18,.4)}
.near-ask-text{display:flex;flex-direction:column;gap:4px;flex:1 1 280px;min-width:0}
.near-ask-text strong{font-size:19px;letter-spacing:-.01em}
.near-ask-text span{font-size:14px;line-height:1.55;color:var(--muted-l)}
.near-ask .btn{flex:0 0 auto}
.near-ask .btn:disabled{opacity:.6;cursor:progress}
.near-status{flex:1 1 100%;font-size:14px;color:#6B3E0A}
.near-status:empty{display:none}
.is-loading .near-status::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--gold);vertical-align:0;animation:ring 1.2s ease-out infinite}
.near-ask.is-done{padding:14px 16px}
.near-ask.is-done .near-ask-text span,.near-ask.is-done .near-pulse-lg{display:none}
.near-ask.is-done .near-ask-text strong{font-size:15px}
.near-ask.is-done .btn{min-height:42px;padding:0 18px;font-size:14px;background:#fff;color:var(--ink);border:1px solid var(--line-l)}
.near-out:not(:empty){margin-top:28px}
.section-near .near-out{margin-top:0}
.near-here-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin-bottom:18px}
.near-here-head h2{margin-top:10px;font-size:clamp(28px,3vw,40px)}
.near-here-head .link-arrow svg{color:var(--brown)}
.near-note{margin:-6px 0 16px;font-size:14px;color:var(--muted-l)}
.near-dishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.near-dish{display:flex;flex-direction:column;gap:4px;min-width:0}
.near-dish-media{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:6px;transition:transform .4s var(--ease)}
.near-dish:hover .near-dish-media{transform:translateY(-4px)}
.near-dish-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.near-dish-media svg{width:40px;height:40px;opacity:.9}
.near-dish-num{position:absolute;left:10px;top:6px;font-family:var(--serif);font-style:italic;font-weight:600;font-size:24px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.near-dish strong{font-size:16px;line-height:1.25;letter-spacing:-.01em}
.near-dish small{font-size:12px;color:var(--muted-l)}
.near-shops{margin-top:32px;display:flex;flex-direction:column;gap:10px}
.near-shops-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.near-shops-head h3{font-size:22px;letter-spacing:-.02em}
.near-shops-head span{font-size:14px;color:var(--muted-l)}
.near-shop{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);background:#fff;box-shadow:0 1px 0 rgba(14,23,18,.05),0 10px 24px -20px rgba(14,23,18,.4)}
.near-shop-main{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0}
.near-shop-thumb{position:relative;width:72px;height:72px;flex:0 0 72px;border-radius:14px;overflow:hidden;background:var(--chili);display:flex;align-items:center;justify-content:center}
.near-shop-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.near-shop-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.near-shop-text strong{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.near-shop-text > span{font-size:13px;color:var(--muted-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.near-shop-text em{display:flex;align-items:center;gap:10px;font-family:var(--font);font-style:normal;font-size:13px}
.near-dist{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 6px;border-radius:999px;background:#E1EFE3;color:#1F4D3A;font-weight:700}
.near-dist svg{width:13px;height:13px}
.near-rt{font-weight:700;color:#B5781A}
.near-route{flex:0 0 auto;width:56px;height:56px;border-radius:16px;background:var(--ink);color:var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:700;color:var(--cream)}
.near-route svg{color:var(--gold)}
.near-more{margin-top:6px;width:100%}
.near-places{margin-top:36px}
.near-places-label{font-size:14px;font-weight:600;color:var(--muted-l);margin-bottom:12px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-link{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line-l);font-size:14px;font-weight:600;transition:background .2s,color .2s}
.chip-link:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.province-body p b{color:var(--brown);font-weight:600}

@media (max-width:860px){
  .must-list{grid-template-columns:1fr}
  .must-card,.must-item:first-child .must-card{grid-template-columns:1fr}
  .must-media,.must-item:first-child .must-media{min-height:0;aspect-ratio:16/10}
}
@media (max-width:640px){
  .popular{display:flex;margin-top:12px}
  .popular > span,.popular > a:not(.near-chip){display:none}
  .near-chip{font-size:13px}
  .must-head{margin-bottom:20px}
  .must-head h2{font-size:28px;margin-top:8px}
  .must-head .lead{font-size:14px}
  .must-list{gap:14px}
  .must-num{font-size:36px;left:14px}
  .must-body{padding:16px 18px 16px;gap:6px}
  .must-name,.must-item:first-child .must-name{font-size:22px}
  .must-story{font-size:14px;-webkit-line-clamp:2}
  .must-media .art{width:150px}.must-item:first-child .must-media .art{width:170px}
  .near-strip{padding:14px 16px;gap:12px}
  .near-strip-text strong{font-size:15px}.near-strip-text span{font-size:13px}
  .near-strip .circle-arrow{display:none}
  .section-near{padding:28px 0 36px}
  .near-ask{padding:18px}
  .near-ask .btn{flex:1 1 100%}
  .near-ask.is-done .btn{flex:0 0 auto}
  .near-here-head h2{font-size:26px}
  .near-dishes.rail > *{flex-basis:40%}
  .near-shop-thumb{width:60px;height:60px;flex-basis:60px}
  .near-route{width:48px;height:48px;border-radius:14px}
  .tabbar a{font-size:10.5px}
}

/* ---------- Dải món tự trượt: chấm chỉ vị trí ---------- */
.rail-dots{display:none}
@media (max-width:640px){
  .rail-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
  .rail-dots button{width:7px;height:7px;padding:0;border:0;border-radius:4px;background:rgba(246,239,227,.25);cursor:pointer;transition:width .35s var(--ease),background .35s}
  .rail-dots button.on{width:22px;background:var(--gold)}
  .rail-dots button::after{content:"";display:block;margin:-10px}
}

/* ---------- Gói hiển thị: nhãn Tài trợ, Đối tác ---------- */
.sponsor-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:#FBEBC8;color:#6B4A12;font-size:11px;font-weight:700;letter-spacing:.04em;font-style:normal}
.sponsor-tag--card{position:absolute;right:16px;top:16px;z-index:3;background:rgba(14,23,18,.72);color:var(--gold-soft);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sponsor-tag--inline{margin-right:8px;vertical-align:2px}
.shop-card{position:relative}
.shop-card.is-sponsored{border-color:rgba(245,181,63,.35)}
.badge-partner{background:rgba(245,181,63,.16);color:var(--gold)}
.badge-partner-l{background:var(--ink);color:var(--gold-soft)}
.badge-order{background:rgba(246,239,227,.08);color:var(--cream)}
.partner-dot{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--ink);color:var(--gold-soft);font-size:10.5px;font-weight:700;font-style:normal;vertical-align:2px}
.sponsored-block{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.rank-row--sponsored{border:1px solid #F1D79A;background:#FFFBF1}
.rank-row--sponsored .sponsor-tag{flex:0 0 auto}
.sponsor-note{font-size:12.5px;color:var(--muted-l)}

/* ---------- Nút đặt trước trên trang quán ---------- */
.order-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:20px 22px;border-radius:var(--r-lg);background:var(--ink);color:var(--cream);box-shadow:0 20px 44px -28px rgba(14,23,18,.7)}
.order-cta-text{display:flex;flex-direction:column;gap:4px;flex:1 1 260px;min-width:0}
.order-cta-text strong{font-size:18px;letter-spacing:-.01em}
.order-cta-text span{font-size:14px;line-height:1.5;color:var(--muted-d)}
.order-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.order-cta .btn-dark{background:rgba(246,239,227,.1);border:1px solid rgba(246,239,227,.18)}
.order-cta--off{background:#fff;color:var(--muted-l);box-shadow:none;border:1px dashed var(--line-l);font-size:14px}

/* ---------- Hộp đặt trước ---------- */
.order-dialog{border:0;padding:0;width:min(560px,calc(100% - 32px));max-height:min(92vh,860px);border-radius:var(--r-lg);background:var(--cream);color:var(--ink);overflow:hidden}
.order-dialog[open]{display:flex;flex-direction:column;animation:rise .45s var(--ease) both}
.order-dialog::backdrop{background:rgba(14,23,18,.62);backdrop-filter:blur(4px)}
.order-form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.order-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 14px;border-bottom:1px solid var(--line-l)}
.order-head h2{margin-top:6px;font-size:24px}
.order-x{width:44px;height:44px;flex:0 0 44px;border:0;border-radius:22px;background:#fff;font-size:26px;line-height:1;cursor:pointer;color:var(--ink)}
.order-scroll{flex:1 1 auto;overflow:auto;padding:18px 24px;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.order-type{display:grid;grid-template-columns:1fr 1fr;width:100%;background:#fff}
.order-type label{position:relative}
.order-type input{position:absolute;opacity:0}
.order-type span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;font-weight:600;font-size:15px;color:#4A4438;cursor:pointer;transition:background .25s,color .25s}
.order-type input:checked + span{background:var(--ink);color:var(--cream)}
.order-type input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.order-when{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.order-when [hidden]{display:none}
.order-when .field input{background:#fff;min-height:48px;padding:10px 12px}
.order-hours{margin-top:-6px;font-size:13px;color:var(--muted-l)}
.stepper{display:flex;align-items:center;border:1px solid var(--line-l);border-radius:14px;background:#fff;overflow:hidden;min-height:48px}
.stepper button{width:44px;align-self:stretch;border:0;background:transparent;font-size:20px;font-weight:600;cursor:pointer;color:var(--ink)}
.stepper button:active{background:#F3ECDD}
.stepper input{width:100%;min-width:0;border:0 !important;background:transparent !important;text-align:center;font-weight:700;padding:0 !important;min-height:46px !important;box-shadow:none !important;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{display:none}
.stepper-sm{min-height:38px;border-radius:12px}
.stepper-sm button{width:38px;font-size:18px}
.stepper-sm output{min-width:24px;text-align:center;font-weight:700}
.order-menu{background:#fff;border-radius:var(--r);padding:14px 16px}
.order-menu-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.order-menu-head strong{font-size:16px}
.order-menu-head small{font-size:13px;color:var(--muted-l)}
.order-menu ul{list-style:none;margin:0;padding:0}
.order-menu li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #F0EBE0}
.order-menu li.on .om-name{color:#1F4D3A;font-weight:600}
.om-name{display:flex;flex-direction:column;font-size:15px;min-width:0}
.om-name small{font-size:13px;color:var(--muted-l);font-weight:400}
.order-foot{padding:14px 24px calc(18px + var(--safe-b));border-top:1px solid var(--line-l);background:#FBF8F2;display:flex;flex-direction:column;gap:10px}
.order-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted-l)}
.order-sum > span{display:flex;flex-direction:column}
.order-sum small{color:#8A4A10;font-size:12.5px}
.order-sum strong{font-size:22px;color:var(--ink);letter-spacing:-.02em}
.order-foot .btn{width:100%}
.order-foot .btn:disabled{opacity:.65;cursor:progress}
.order-err{font-size:14px;font-weight:600;color:#B3261E}
.order-err:empty{display:none}
.order-legal{font-size:12px;color:var(--muted-l);text-align:center}

/* ---------- Trang theo dõi đơn ---------- */
.order-status{display:flex;align-items:flex-start;gap:16px;padding:22px;border-radius:var(--r-lg);background:#fff;box-shadow:0 16px 36px -28px rgba(14,23,18,.45)}
.order-status strong{display:block;font-size:20px;letter-spacing:-.01em}
.order-status p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--muted-l)}
.os-icon{width:48px;height:48px;flex:0 0 48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff;background:var(--gold)}
.tone-ok .os-icon,.tone-done .os-icon{background:#1F7A4D}
.tone-no .os-icon{background:#B3261E}
.tone-ok{border:1.5px solid #9FD3B4}
.os-spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin 1s linear infinite}
.os-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:st}
.os-steps li{counter-increment:st;position:relative;padding-top:14px;font-size:13px;font-weight:600;color:var(--muted-l);border-top:4px solid #E4DCCB;border-radius:2px}
.os-steps li.on{color:#1F4D3A;border-top-color:#1F7A4D}
.deposit-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-radius:var(--r-lg);background:#FFF6E0;border:1.5px solid #F1D79A}
.deposit-box > div{flex:1 1 220px;display:flex;flex-direction:column;gap:6px}
.deposit-box strong{font-size:18px}
.deposit-box span{font-size:14px;line-height:1.55;color:#5A4A2A}
.deposit-box img{width:220px;height:auto;border-radius:16px;background:#fff;margin:0 auto}
.deposit-box.paid{background:#E9F5EC;border-color:#9FD3B4;flex-direction:column;align-items:flex-start;gap:4px}
.order-card{background:#fff;border-radius:var(--r-lg);overflow:hidden}
.oc-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:var(--ink);color:var(--cream);font-size:14px}
.oc-head strong{font-size:20px;letter-spacing:.06em;color:var(--gold)}
.order-card .info{border-radius:0}
.oc-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.oc-items li{display:flex;justify-content:space-between;gap:12px}
.oc-total{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-l);text-align:right}
.order-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.order-actions .btn-dashed{color:#B3261E;border-color:#E3A29C}
.near-order{padding:1px 8px;border-radius:999px;background:var(--ink);color:var(--gold-soft);font-size:11.5px;font-weight:700}

@media (max-width:640px){
  .order-cta{padding:18px}
  .order-cta-btns{width:100%}
  .order-cta-btns .btn{flex:1 1 0;padding:0 12px}
  .order-dialog{width:100%;max-width:100%;max-height:94vh;margin:auto 0 0;border-radius:24px 24px 0 0}
  .order-dialog[open]{animation:sheet .45s var(--ease) both}
  .order-head{padding:18px 18px 12px}
  .order-head h2{font-size:21px}
  .order-scroll{padding:14px 18px}
  .order-when{grid-template-columns:1fr 1fr}
  .order-when [data-guests-wrap]{grid-column:1/-1}
  .order-foot{padding:12px 18px calc(14px + var(--safe-b))}
  .order-status{padding:18px}
  .deposit-box img{width:100%;max-width:260px}
}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}