/* Mi Pate v15-20261109 — MOBILE-FIRST, dark "THE FOOD TRUCK" template
   look with the poster's yellow. v14 changes vs v13:
   (1) header subtitle "BÁNH MÌ VIỆT NAM" is EXACTLY as long as the big
   "MI PATE FOOD TRUCK" line above it — each letter is a flex item
   spread edge to edge (justify-content: space-between), so both lines
   line up at both ends, desktop and mobile. Logo still ONE colour
   (poster yellow #F6C101), sub white.
   (2) hero is FULL SCREEN: 100svh (100vh fallback), mobile + desktop.
   (3) hero holds ONLY the tagline — the Order Online button is GONE
   from the hero (Order Online stays in the header nav + sticky bar).
   (4) THE FOOD is now a TIDY POSTER-STYLE MENU LIST (like Hai's
   printed poster menu): numbered lines, bold name, small description
   below, bold price right-aligned — no photo cards on the homepage.
   Photos live in the Gallery only. Menu lines are view-only.
   (5) ORDER FLOW: tap a dish row in the drawer -> a CUSTOMIZE screen
   for that dish (required Bread style A/B for banh mi, then Extra,
   Leave out, free-text note, quantity, Add to cart — Add stays
   disabled until the required pick is made).
   Everything else is v13: Hai picked the ThemeForest "THE FOOD TRUCK"
   template (12995476) — dark slate/charcoal-navy background, white
   type, hand-lettered condensed uppercase headings, lemon-yellow
   accents. Tone from Hai's REAL printed poster menu (image-6.png):
   the poster's bright yellow ~#F6C101 is THE accent on the dark
   background (logo, headings, dates, prices, buttons), red/orange
   only in small touches. NOT the v11 full-page loud yellow (Hai:
   "gớm quá"), NOT the v12 cream draft. THE COVER PHOTO
   (images/cover.jpg — hand holding a banh mi, the old site's
   background) STAYS as the one and only hero background — never the
   template's taco/nachos photos, never stock, never a rotating
   slider. The food-truck illustration is NOT used anywhere on the
   site anymore (v17: Hai said it fits nowhere — footer About is
   text only now). Header is ONE row: logo text left, nav right
   (Location, Menu, Contact Us, Order Online — exactly those 4).
   No logo.png anywhere. Sections stack 1 column on mobile, no
   horizontal scroll. */
:root{
  --bg:#171E28; --bg2:#1C2430; --panel:#232D3B; --deep:#10151D;
  --ink:#F5F1E8; --muted:#A8B0BC; --line:rgba(255,255,255,.12);
  --yellow:#F6C101; --yellow-l:#FFD84D; --orange:#E8491D; --brick:#C0392B;
  --radius:14px; --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:"Anton","Oswald",sans-serif;font-weight:400;line-height:1.15;margin:0}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--yellow);color:#141A23;border:0;border-radius:10px;padding:12px 22px;font:800 15px "Manrope",sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:44px;box-shadow:0 6px 18px rgba(246,193,1,.22)}
.btn:hover{background:var(--yellow-l)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:1px solid rgba(255,255,255,.35)}
.btn.small{padding:10px 16px;font-size:14px;min-height:44px}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-outline{background:rgba(0,0,0,.25);color:#fff;border:2px solid #fff;box-shadow:none}
.btn-outline:hover{background:var(--yellow);border-color:var(--yellow);color:#141A23}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0}
/* ---- v14: header. ONE row only — logo text left, nav right. Dark,
   sticky. Logo is ONE colour: poster yellow #F6C101 for the whole
   "Mi Pate Food Truck" (no two-tone split), with a small white
   "BÁNH MÌ VIỆT NAM" line under it. Nav is exactly 4 items: Location,
   Menu, Contact Us, Order Online (yellow button). ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(16,21,29,.97);border-bottom:1px solid var(--line)}
.header-in{max-width:var(--max);margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.header-logo{display:flex;flex-direction:column;gap:2px;text-decoration:none;white-space:nowrap;line-height:1}
.header-logo-main{font-family:"Anton","Oswald",sans-serif;font-size:24px;letter-spacing:.02em;text-transform:uppercase;color:var(--yellow)}
.header-logo-sub{display:flex;justify-content:space-between;width:100%;font-family:"Manrope",sans-serif;font-size:10px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:rgba(255,255,255,.82)}
.header-logo-sub>span{display:block}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{color:var(--ink);font:700 13px "Manrope",sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.site-nav a:hover{color:var(--yellow)}
.nav-order{padding:10px 18px;font-size:13px;min-height:40px}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:20px;line-height:1;padding:8px 12px;border-radius:8px;cursor:pointer}
/* ---- v14: hero. THE cover photo (hand holding a banh mi) is the one
   and only hero background, full-width, static — never swapped for the
   template's taco/nachos photos, never stock, never a slider. Hero
   holds NOTHING but the tagline + one outline Order button (no big
   title, no "BÁNH MÌ VIỆT NAM" line, no address/hours line — the name
   already lives in the header logo). ---- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;display:grid;place-items:center;overflow:hidden;background:var(--deep)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(rgba(10,14,20,.55),rgba(10,14,20,.18) 45%,rgba(10,14,20,.62))}
.hero-lockup{position:relative;z-index:2;text-align:center;color:#fff;padding:0 20px;max-width:920px}
.hero-tag{font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(24px,4.2vw,38px);line-height:1.4;color:#fff;margin:0;text-shadow:0 1px 14px rgba(0,0,0,.5)}
/* ---- v12: section furniture — handwritten eyebrow, Anton title,
   diamond divider (line — diamond — line). ---- */
.section-eyebrow{font-family:"Caveat",cursive;font-weight:700;font-size:26px;color:var(--yellow);text-align:center}
.section-title{font-family:"Anton","Oswald",sans-serif;font-weight:400;font-size:clamp(34px,6vw,52px);line-height:1;text-transform:uppercase;text-align:center;color:#fff}
.section-sub{text-align:center;color:var(--muted);font-size:15px;margin-top:12px}
.divider{display:flex;align-items:center;gap:12px;max-width:220px;margin:18px auto 0}
.divider span{flex:1;height:1px;background:rgba(255,255,255,.25)}
.divider i{width:10px;height:10px;background:var(--yellow);transform:rotate(45deg)}
/* ---- v12: TRUCK SCHEDULE on dark. Yellow days, white hours. ---- */
.schedule{padding:64px 16px;background:var(--bg2)}
.sched-list{max-width:720px;margin:32px auto 0}
.sched-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:14px 4px;border-bottom:1px solid var(--line)}
.sched-day{font-family:"Anton","Oswald",sans-serif;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--yellow);min-width:150px}
.sched-time{font-weight:800;color:#fff}
.sched-place{color:var(--muted);font-size:14px;text-align:right}
.sched-row.closed{opacity:.6}
.sched-note{text-align:center;color:var(--muted);font-size:14px;margin-top:24px}
/* ---- v14: THE FOOD is a TIDY POSTER-STYLE MENU LIST (like Hai's
   printed poster menu, image-6.png): numbered lines, bold name, small
   description below, bold price right-aligned. No photo cards here —
   photos live in the Gallery only. Lines are VIEW-ONLY. ---- */
.food{padding:64px 16px;background:var(--bg)}
.food-cat{max-width:760px;margin:44px auto 0;font-family:"Anton","Oswald",sans-serif;font-weight:400;font-size:26px;text-transform:uppercase;color:#fff;border-left:4px solid var(--yellow);padding-left:12px}
.food-cat-note{max-width:760px;margin:8px auto 0;color:var(--muted);font-size:14px;padding-left:16px}
.menu-list{max-width:760px;margin:14px auto 0}
.menu-line{display:flex;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);align-items:flex-start}
.menu-line:last-child{border-bottom:0}
.menu-num{font-family:"Anton","Oswald",sans-serif;font-size:19px;color:var(--yellow);min-width:34px;padding-top:1px;flex:none}
.menu-line-main{flex:1;min-width:0}
.menu-line-name{font-weight:800;color:#fff;font-size:16px;line-height:1.35}
.menu-line-name .tag{margin-left:8px}
.menu-line-desc{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:2px}
.menu-line-price{font-family:"Anton","Oswald",sans-serif;font-size:20px;color:var(--yellow);white-space:nowrap;padding-top:1px}
.menu-line.coming{opacity:.6}
.soon-tag{display:inline-block;background:transparent;color:var(--yellow);border:1px solid var(--yellow);font:700 12px "Manrope",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:999px;white-space:nowrap}
.burst-badge{display:inline-block;background:var(--brick);color:#fff;font:700 12px "Manrope",sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;vertical-align:middle}
.burst-badge.dark{background:#000;color:#fff}
.tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);font-weight:700}
/* ---- v12: footer, 3 columns — About / Opening Hours / Connect. ---- */
.site-footer{background:var(--deep);padding:56px 16px 120px}
.footer-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.site-footer h3{font-family:"Anton","Oswald",sans-serif;font-weight:400;font-size:20px;text-transform:uppercase;color:var(--yellow);margin:0 0 12px}
.site-footer p{color:var(--muted);font-size:14px;line-height:1.7;margin-top:6px}
.hours-list{list-style:none;margin:0;padding:0}
.hours-list li{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px;padding:6px 0;border-bottom:1px solid var(--line)}
.hours-list li span:last-child{color:#fff;font-weight:700;white-space:nowrap}
.footer-bottom{text-align:center;color:var(--muted);font-size:13px;margin:40px auto 0;max-width:var(--max);border-top:1px solid var(--line);padding-top:20px}
/* v11: sticky Order bar on mobile — opens our own order drawer */
.sticky-order{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));background:rgba(16,21,29,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.sticky-order .btn{width:100%;padding:15px;font-size:17px;min-height:52px}
@media (max-width:760px){.sticky-order{display:block}}
/* cart */
.cart-fab{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:none}
.cart-fab.show{display:block}
.cart-fab .btn{width:100%;padding:15px;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.drawer{position:fixed;inset:0;z-index:80;display:none}
.drawer.open{display:block}
.drawer-bg{position:absolute;inset:0;background:rgba(10,14,20,.6)}
/* ---- v14: drawer order menu = COMPACT ROWS (Hai's call). Each dish is
   ONE small row, not a big card: number + name + price on a single
   44px-min line, small desc, "Tap to customize" — tapping a row opens
   that dish's CUSTOMIZE screen (required Bread style A/B for banh mi,
   then Extra, Leave out, note, quantity, Add to cart). NO photos in
   the order rows — photos live in the Gallery section only. ---- */
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(480px,100%);background:var(--bg2);color:var(--ink);overflow-y:auto;padding:20px 16px}
.drawer-panel h2{font-size:26px;margin-bottom:4px;color:#fff}
.drawer-sub{color:var(--muted);font-size:14px;margin-bottom:12px}
.cart-line{border-top:1px solid var(--line);padding:14px 0;display:flex;gap:12px;align-items:flex-start}
.cart-line .nm{font-weight:700}
.cart-line .pr{color:var(--muted);font-size:14px}
.cart-line .grow{flex:1}
.cart-line .amt{font-weight:700;white-space:nowrap}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px;font:400 16px "Manrope",sans-serif;background:#141A23;color:var(--ink)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.total-row{display:flex;justify-content:space-between;font-weight:700;font-size:18px;border-top:1px solid var(--line);padding-top:14px;margin:6px 0 16px}
/* v20: Buy 5 Get 1 FREE breakdown above the cart total. */
.deal-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);padding:3px 0}
.deal-line.free{color:var(--yellow);font-weight:700}
.pay-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.pay-opt{border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:12px;cursor:pointer;background:transparent;color:var(--ink);font:600 14px "Manrope",sans-serif}
.pay-opt.on{border-color:var(--yellow);background:var(--yellow);color:#141A23}
.empty{color:var(--muted);padding:24px 0;text-align:center}
.confirm{text-align:center;padding:32px 0}
.confirm .code{font-family:"Anton","Oswald",sans-serif;font-size:40px;margin:10px 0;color:var(--yellow)}
.confirm p{color:var(--muted)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:var(--yellow);color:#141A23;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:700;z-index:90;display:none}
.toast.show{display:block}
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;cursor:pointer}
.consent-row input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--yellow)}
.qty-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.2);border-radius:999px;overflow:hidden}
.stepper button{width:44px;height:44px;border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--ink)}
.stepper span{min-width:32px;text-align:center;font-weight:700}
.note-input{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 12px;min-height:44px;font:400 13px "Manrope",sans-serif;background:#141A23;color:var(--ink)}
.note-input::placeholder{color:#7A8390}
.drawer-cat{font-family:"Anton","Oswald",sans-serif;font-weight:400;font-size:19px;text-transform:uppercase;margin:14px 0 2px;color:#fff}
.drawer-cat-note{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.order-item{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);cursor:pointer}
.order-item:hover .row-go{color:var(--yellow-l)}
.row-go{font-size:26px;line-height:1;color:var(--yellow);flex:none;padding-top:6px}
.row-hint{font-size:12px;color:var(--muted);margin-top:2px}
.custom-foot{position:sticky;bottom:0;background:var(--bg2);padding:14px 0 4px;border-top:1px solid var(--line);margin-top:12px}
.custom-qty{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.order-item:first-child{border-top:0}
.order-item .grow{flex:1;min-width:0}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px}
.card-top h3{font-size:16px;color:#fff}
.card-top .price{font-weight:800;font-size:15px;color:var(--yellow);white-space:nowrap}
.order-item h3{font-size:16px;color:#fff}
.order-item .desc{font-size:13px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.custom-group{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:6px 10px;margin:6px 0}
.custom-title{font-size:13px;font-weight:700;margin-bottom:4px}
.custom-title .req{color:#FF8A7A}
.custom-hint{font-weight:500;color:var(--muted);font-size:12px}
.custom-opt{display:flex;align-items:center;gap:8px;font-size:14px;padding:10px 0;min-height:44px;cursor:pointer}
.custom-opt input{accent-color:var(--yellow);width:16px;height:16px;flex:none}
.drawer-foot{position:sticky;bottom:0;background:var(--bg2);padding:14px 0 4px;border-top:1px solid var(--line);margin-top:8px}

/* ---- v17: (1) HERO QUOTE = MẪU 1 (kept from v16): serif italic
   tagline, NO big quote mark at all, just ONE thin short GOLD rule
   above and ONE below, airy spacing, centered.
   (2) NP-STYLE BUTTON (.btn-np): pale gold solid, SHARP square corners,
   no border, no icon, white serif LOWERCASE wide-spaced text — copied
   from NP Production's "yes, please!" button (~185x58px desktop).
   Applies to the header + sticky Order Online buttons (words stay
   "Order Online") and to the CTA "yes, please!" button.
   (3) VISIT = Truck Schedule ONLY (day + hours, address once above).
   (4) CTA SECTION (before footer): SLIDESHOW IS BACK (v16 got it
   wrong — Hai wants the v15 slideshow, NOT the 6-photo grid).
   Auto-fade food slideshow (5 real photos, 4s each, fade, no
   buttons) LEFT, big serif title + thin rules + italic line + gold
   "yes, please!" button (opens OUR drawer) RIGHT. Background is
   the site's own DARK slate (var(--bg2)) — NOT the NP cream
   the NP cream colour (Hai: cream does not fit). Title white on dark, note
   light muted grey, rules light. 2 cols desktop, stacked mobile. ---- */
.hero-quote{margin:0;position:relative;z-index:2;text-align:center;padding:0 20px;max-width:920px}
.hero-quote-rule{display:block;width:64px;height:1px;background:var(--yellow);margin:26px auto}
.btn-np{background:#C0A062;color:#FFFDF6;border:0;border-radius:0;box-shadow:none;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:15px;letter-spacing:.35em;text-transform:lowercase;text-indent:.35em;padding:18px 34px;min-width:185px;min-height:58px;white-space:nowrap}
.btn-np:hover{background:#AE8F52;color:#FFFDF6}
.sticky-order .btn-np{width:100%;min-height:58px;font-size:15px;padding:18px 34px}
.visit{padding:64px 16px 72px;background:var(--bg2)}
/* v18: OUR STORY. Hai's own story, verbatim, no em dash in the section.
   Dark background like the rest of the site, serif body text, one
   centered column, easy to read on mobile. */
.story{padding:64px 16px 72px;background:var(--bg)}
.story-body{max-width:720px;margin:28px auto 0}
.story-body p{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.8;color:var(--ink);margin:0 0 18px}
.story-body p:last-child{margin-bottom:0}
@media (max-width:760px){.story-body p{font-size:17px;line-height:1.75}}
.sched-addr{text-align:center;color:var(--muted);font-size:15px;margin-top:20px}
.sched-list{max-width:560px;margin:24px auto 0}
.cta{background:var(--bg2);color:var(--ink);padding:72px 20px}
.cta-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cta-slides{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--deep)}
.cta-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.cta-slide.on{opacity:1}
.cta-copy{text-align:center;padding:8px 0}
.cta-title{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1.28;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.cta-rule{width:64px;height:1px;background:rgba(255,255,255,.7);margin:26px auto}
.cta-note{font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-size:18px;line-height:1.6;color:var(--muted);max-width:430px;margin:0 auto}
.cta-btn{margin-top:30px}
@media (max-width:760px){
  .cta-grid{grid-template-columns:1fr;gap:32px}
  .cta-slides{aspect-ratio:4/3}
}
/* ---- v9: MOBILE-FIRST. The rules above ARE the phone layout. This block
   only widens things for desktop. ---- */
@media (min-width:761px){
  .wrap{padding:0 20px}
  .header-in{height:72px}
  .header-logo-main{font-size:28px}
  .header-logo-sub{font-size:11px}
  .hero{min-height:640px;height:100vh;height:100svh}
  .site-footer{padding-bottom:90px}
}
@media (max-width:760px){
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .sched-place{text-align:left}
  /* Mobile nav: hamburger opens a dropdown panel under the one-row header.
     Still exactly the same 4 items, logo and menu never overlap. */
  .nav-toggle{display:block}
  .site-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;gap:4px;background:var(--deep);border-bottom:1px solid var(--line);padding:12px 20px 16px}
  .site-header.nav-open .site-nav{display:flex}
  .site-nav a{padding:10px 0;font-size:14px}
  .nav-order{margin-top:8px}
}
/* Very small phones (iPhone SE / old Android, ~360px). */
@media (max-width:360px){
  .header-logo-main{font-size:20px}
  .header-logo-sub{font-size:9px}
  .header-in{padding:0 14px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}