/* =========================================================
   NADO · landing page F&B — style dùng chung (vanilla)
   Chuyển từ bản "v2 mobile", giữ nguyên bố cục và thiết kế.
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

img { max-width: 100%; }

/* ===== Sách menu lật =====
   Điện thoại: lật từng trang. Máy tính: mở đôi 2 trang. */
.grabwp__nf-stage { width: 100%; max-width: 880px; margin-inline: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.grabwp__nf-stage.grabwp__is-single { max-width: 460px; overflow: hidden; padding: 6px 6px 14px; }
.grabwp__nf-book { position: relative; width: 100%; max-width: 100%; perspective: 2400px; transition: transform .8s cubic-bezier(.5, .1, .2, 1); }
.grabwp__nf-d { aspect-ratio: 1.414 / 1; }
.grabwp__nf-s { aspect-ratio: 1 / 1.414; }
.grabwp__nf-d[data-state="start"] { transform: translateX(-25%); }
.grabwp__nf-d[data-state="end"] { transform: translateX(25%); }
.grabwp__nf-instant,
.grabwp__nf-instant .grabwp__nf-sheet { transition: none; }
.grabwp__nf-sheet { position: absolute; top: 0; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.62, .04, .26, 1), opacity .95s; cursor: pointer; }
.grabwp__nf-d .grabwp__nf-sheet { left: 50%; width: 50%; }
.grabwp__nf-s .grabwp__nf-sheet { left: 0; width: 100%; }
.grabwp__nf-sheet.grabwp__is-flipped { transform: rotateY(-180deg); }
.grabwp__nf-s .grabwp__nf-sheet.grabwp__is-flipped { transform: rotateY(-160deg); opacity: 0; }
.grabwp__nf-sheet.grabwp__is-hidden { visibility: hidden; }
.grabwp__nf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; container-type: inline-size; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.grabwp__nf-back { transform: rotateY(180deg); }
.grabwp__nf-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.grabwp__nf-d .grabwp__nf-front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 7%); }
.grabwp__nf-d .grabwp__nf-back::after { background: linear-gradient(270deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 7%); }
.grabwp__nf-paper { position: absolute; inset: 0; background: #f4f1ea; }
.grabwp__nf-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 16px; }
.grabwp__nf-btn { appearance: none; border: 0; cursor: pointer; font: inherit; display: inline-grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.grabwp__nf-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.grabwp__nf-btn:disabled { opacity: .3; cursor: default; }
.grabwp__nf-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.grabwp__nf-count { font-variant-numeric: tabular-nums; min-width: 7ch; text-align: center; }
.grabwp__nf-hint { text-align: center; font-size: 12px; opacity: .7; margin-top: 8px; }
.grabwp__pg { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.grabwp__pg img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Trang là ảnh/PDF xuất ảnh (data-flip-images) */
.grabwp__pg.grabwp__pg--image { padding: 0; }
.grabwp__pg--image img { object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .grabwp__nf-sheet,
  .grabwp__nf-book { transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Nado Bakery Hà Nội
   Layout (mobile trước): biển hiệu ổ bánh trên nền vàng bơ, menu chữ dạng thẻ bo tròn,
   sách menu ô bento kiểu tiệm bánh Seoul
   ========================================================= */
body {
  --butter: #FBE6A2; --bun: #FFF7E3; --cocoa: #4B2E20; --cocoa-soft: #7A5A48; --berry: #F5A3B5; --crust: #DE9F52; --white: #FFFFFF;
  --f-display: "Baloo 2", "Nunito", system-ui, sans-serif; --f-body: "Nunito", system-ui, sans-serif;
  color-scheme: light;
  margin: 0;
  background: var(--bun);
  color: var(--cocoa);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
body .grabwp__wrap { max-width: 560px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body header { background: var(--butter); padding-block: 18px 26px; border-radius: 0 0 34px 34px; }
body .grabwp__tb { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; }
body .grabwp__tb .grabwp__pin { background: var(--cocoa); color: var(--butter); border-radius: 99px; padding: 4px 12px; }
body .grabwp__brand { display: flex; flex-direction: column; align-items: center; margin-top: 18px; text-align: center; }
body .grabwp__loaf { position: relative; background: var(--crust); color: var(--bun); border-radius: 110px 110px 30px 30px; padding: 20px 40px 12px; box-shadow: inset 0 -8px 0 rgba(75, 46, 32, .18); }
body .grabwp__loaf::before { content: ""; position: absolute; inset: 9px 20px auto; height: 10px; border-radius: 10px; background: rgba(255, 247, 227, .35); }
body .grabwp__loaf h1 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 64px; line-height: .9; letter-spacing: -.02em; }
body .grabwp__loaf .grabwp__bk { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; }
body .grabwp__brand .grabwp__tl { font-weight: 700; margin-top: 12px; font-size: 15px; }
body .grabwp__hero { margin-top: 16px; border-radius: 26px; overflow: hidden; border: 4px solid var(--white); box-shadow: 0 6px 0 rgba(75, 46, 32, .12); }
body .grabwp__hero img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
body .grabwp__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
body .grabwp__btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 99px; font: 800 15px/1 var(--f-display); text-decoration: none; color: var(--cocoa); background: var(--white); border: 2px solid var(--cocoa); }
body .grabwp__btn.grabwp__fill { background: var(--cocoa); color: var(--butter); }
body .grabwp__sec { padding-block: 34px 6px; }
body .grabwp__h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body .grabwp__h2 h2 { font-family: var(--f-display); font-weight: 800; font-size: 32px; margin: 0; line-height: 1; }
body .grabwp__h2 .grabwp__kr { font-family: var(--f-display); font-weight: 700; background: var(--berry); padding: 2px 12px; border-radius: 99px; font-size: 13px; }
body .grabwp__sub { margin: 6px 0 0; font-size: 13px; color: var(--cocoa-soft); font-weight: 600; }
body .grabwp__sub.grabwp__sub--book { margin-bottom: 18px; }
body .grabwp__chips { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding-block: 12px; background: var(--bun); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); scrollbar-width: none; }
body .grabwp__chips::-webkit-scrollbar { display: none; }
body .grabwp__chips a { flex: none; font: 800 14px/1 var(--f-display); color: var(--cocoa); text-decoration: none; background: var(--white); border: 2px solid var(--cocoa); border-radius: 99px; padding: 9px 14px; }
body .grabwp__chips a:first-child { background: var(--butter); }
body .grabwp__cat { margin-top: 16px; background: var(--white); border-radius: 24px; padding: 16px 16px 8px; box-shadow: 0 5px 0 var(--butter); scroll-margin-top: 70px; }
body .grabwp__cat h3 { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-display); font-weight: 800; font-size: 21px; margin: 0 0 4px; }
body .grabwp__cat h3 small { font-weight: 700; font-size: 12px; background: var(--bun); border-radius: 99px; padding: 2px 10px; color: var(--cocoa-soft); }
body .grabwp__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding-block: 11px; border-top: 2px dashed #F1E4C4; }
body .grabwp__row:first-of-type { border-top: 0; }
body .grabwp__row h4 { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.3; }
body .grabwp__row .grabwp__pr { font-family: var(--f-display); font-weight: 800; font-size: 18px; background: var(--butter); border-radius: 12px; padding: 0 10px; align-self: start; font-variant-numeric: tabular-nums; }
body .grabwp__row .grabwp__s { font-size: 12.5px; color: var(--cocoa-soft); grid-column: 1 / -1; }
body .grabwp__row .grabwp__hot { display: inline-block; font: 800 10px/1 var(--f-display); background: var(--berry); border-radius: 99px; padding: 4px 7px 3px; margin-left: 6px; vertical-align: 2px; }
body .grabwp__flipsec { background: var(--butter); margin-top: 36px; padding-block: 32px 24px; padding-inline: 16px; border-radius: 34px; }
body .grabwp__nf .grabwp__nf-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--cocoa); color: var(--butter); }
body .grabwp__nf .grabwp__nf-count { font: 800 17px/1 var(--f-display); }
body .grabwp__nf-paper { background: var(--bun); }
body .grabwp__info { margin-top: 26px; background: var(--white); border-radius: 24px; padding: 16px; display: grid; gap: 10px; font-weight: 600; font-size: 14px; }
body .grabwp__info div { display: flex; justify-content: space-between; gap: 12px; }
body .grabwp__info dt { color: var(--cocoa-soft); }
body .grabwp__info dd { margin: 0; text-align: right; }
body footer { text-align: center; padding-block: 22px 8px; font-size: 12px; color: var(--cocoa-soft); font-weight: 700; }
body .grabwp__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px max(12px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; background: linear-gradient(rgba(255, 247, 227, 0), var(--bun) 30%); }
body .grabwp__bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border-radius: 99px; text-decoration: none; font: 800 15px/1.15 var(--f-display); background: var(--cocoa); color: var(--butter); box-shadow: 0 4px 0 rgba(75, 46, 32, .25); }
body .grabwp__bar a small { font: 700 11px/1.2 var(--f-body); opacity: .85; }
body .grabwp__bar a + a { background: var(--berry); color: var(--cocoa); }

/* ===== TRANG MENU A4 · ô bento ===== */
body .grabwp__pg { background: var(--bun); color: var(--cocoa); font-family: var(--f-body); padding: 6cqw; }
body .grabwp__pg-h { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3.4cqw; }
body .grabwp__pg-h b { font-family: var(--f-display); font-weight: 800; font-size: 9cqw; line-height: .9; }
body .grabwp__pg-h span { font-family: var(--f-display); font-weight: 700; font-size: 3cqw; background: var(--berry); border-radius: 99px; padding: .6cqw 2.6cqw; }
body .grabwp__bento { flex: 1; display: grid; gap: 2.6cqw; min-height: 0; }
body .grabwp__t { position: relative; border-radius: 4.5cqw; overflow: hidden; background: var(--white); min-height: 0; }
body .grabwp__t img { position: absolute; inset: 0; }
body .grabwp__t .grabwp__lab { position: absolute; left: 3cqw; top: 3cqw; right: 3cqw; font-family: var(--f-display); font-weight: 800; font-size: 4cqw; line-height: 1; color: var(--cocoa); text-shadow: 0 0 2cqw rgba(255, 255, 255, .9); }
body .grabwp__t .grabwp__lab small { display: block; font-family: var(--f-body); font-weight: 700; font-size: 2.3cqw; margin-top: .8cqw; letter-spacing: .04em; }
body .grabwp__t .grabwp__lab span { background: rgba(255, 247, 227, .92); border-radius: 2cqw; padding: .8cqw 1.8cqw .4cqw; display: inline-block; text-shadow: none; }
body .grabwp__t .grabwp__pr { position: absolute; right: 2.6cqw; bottom: 2.6cqw; width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--berry); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 4.2cqw; transform: rotate(-10deg); box-shadow: 0 .8cqw 0 var(--cocoa); }
body .grabwp__t.grabwp__txt { background: var(--cocoa); color: var(--butter); padding: 4cqw; display: flex; flex-direction: column; justify-content: center; }
body .grabwp__t.grabwp__txt.grabwp__txt--row { flex-direction: row; align-items: center; justify-content: space-between; }
body .grabwp__t.grabwp__txt b { font-family: var(--f-display); font-weight: 800; font-size: 6cqw; line-height: 1; }
body .grabwp__t.grabwp__txt div { display: flex; flex-direction: column; }
body .grabwp__t.grabwp__txt span { font-size: 2.8cqw; margin-top: 1.4cqw; font-weight: 600; }
body .grabwp__t.grabwp__txt .grabwp__pr { position: static; transform: rotate(-6deg); margin-top: 2.4cqw; color: var(--cocoa); }
body .grabwp__b5 { grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr 1fr 1fr; grid-template-areas: "a b" "a c" "d e"; }
body .grabwp__b4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr .8fr; grid-template-areas: "a a" "b c" "d d"; }
body .grabwp__b5s { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr .9fr; grid-template-areas: "a b" "c d" "e e"; }
body .grabwp__ga-a { grid-area: a; }
body .grabwp__ga-b { grid-area: b; }
body .grabwp__ga-c { grid-area: c; }
body .grabwp__ga-d { grid-area: d; }
body .grabwp__ga-e { grid-area: e; }
body .grabwp__pg-cover { background: var(--butter); align-items: center; text-align: center; padding: 8cqw 6cqw; }
body .grabwp__pg-cover .grabwp__loaf { padding: 5cqw 9cqw 3cqw; border-radius: 26cqw 26cqw 7cqw 7cqw; }
body .grabwp__pg-cover .grabwp__loaf h1 { font-size: 17cqw; }
body .grabwp__pg-cover .grabwp__loaf .grabwp__bk { font-size: 3.2cqw; }
body .grabwp__pg-cover .grabwp__loc { margin-top: 3cqw; font-family: var(--f-display); font-weight: 800; font-size: 4cqw; background: var(--cocoa); color: var(--butter); border-radius: 99px; padding: .8cqw 4cqw; }
body .grabwp__pg-cover .grabwp__dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; margin-top: auto; width: 100%; }
body .grabwp__pg-cover .grabwp__dots div { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1.2cqw solid var(--white); }
body .grabwp__pg-cover .grabwp__mn { font-family: var(--f-display); font-weight: 800; font-size: 12cqw; line-height: 1; margin-top: 5cqw; }
body .grabwp__pg-cover .grabwp__mn small { display: block; font-size: 4cqw; font-weight: 700; }
body .grabwp__cake { display: grid; grid-template-rows: 1.3fr auto; gap: 3cqw; flex: 1; min-height: 0; }
body .grabwp__cake .grabwp__t .grabwp__pr { width: 16cqw; height: 16cqw; font-size: 5cqw; }
body .grabwp__sz { background: var(--white); border-radius: 4.5cqw; padding: 3.4cqw 4cqw; }
body .grabwp__sz div { display: flex; justify-content: space-between; font-weight: 700; font-size: 3.2cqw; padding-block: 1.3cqw; border-bottom: .3cqw dashed #F1E4C4; }
body .grabwp__sz div b { font-family: var(--f-display); font-weight: 800; font-size: 4cqw; background: var(--butter); border-radius: 2cqw; padding: 0 2cqw; }
body .grabwp__sz p { margin: 2cqw 0 0; font-size: 2.7cqw; font-weight: 600; color: var(--cocoa-soft); line-height: 1.6; }
body .grabwp__pg-back { background: var(--cocoa); color: var(--butter); align-items: center; justify-content: center; text-align: center; gap: 2.4cqw; font-weight: 700; font-size: 3.4cqw; }
body .grabwp__pg-back b { font-family: var(--f-display); font-weight: 800; font-size: 15cqw; line-height: 1; }
body .grabwp__pg-back .grabwp__dim { opacity: .75; }
body .grabwp__pg.grabwp__pg--image { padding: 0; }
@media (min-width: 900px) { body .grabwp__wrap { max-width: 720px; } }

/* Ảnh đầu trang chọn trong admin có sẵn width/height */
body .grabwp__hero img { height: auto; }

/* ===== Plugin Nado Menu Kit v2: chi nhánh, ưu đãi, giá khuyến mãi, link liên hệ ===== */
[hidden] { display: none !important; }
body .grabwp__cn { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 4px; scrollbar-width: none; }
body .grabwp__cn::-webkit-scrollbar { display: none; }
body .grabwp__cn button { flex: none; appearance: none; cursor: pointer; font: 800 14px/1 var(--f-display); color: var(--cocoa); background: var(--white); border: 2px solid var(--cocoa); border-radius: 99px; padding: 9px 14px 7px; }
body .grabwp__cn button[aria-current="true"] { background: var(--cocoa); color: var(--butter); }
body .grabwp__cn button:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 2px; }
body .grabwp__promos { display: grid; gap: 14px; margin-top: 16px; }
body .grabwp__promo { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; background: var(--butter); border-radius: 24px; padding: 14px; box-shadow: 0 5px 0 var(--crust); }
body .grabwp__promo:not(:has(.grabwp__promo-ph)) { grid-template-columns: 1fr; }
body .grabwp__promo-ph { border-radius: 18px; overflow: hidden; aspect-ratio: 1; border: 3px solid var(--white); }
body .grabwp__promo-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .grabwp__promo-b { min-width: 0; }
body .grabwp__promo h3 { margin: 6px 0 2px; font-family: var(--f-display); font-weight: 800; font-size: 20px; line-height: 1.15; }
body .grabwp__promo p { margin: 0 0 6px; font-size: 14px; }
body .grabwp__promo .grabwp__hot { display: inline-block; font: 800 11px/1 var(--f-display); background: var(--berry); border-radius: 99px; padding: 4px 9px 3px; }
body .grabwp__promo-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-weight: 700; }
body .grabwp__promo-m code { font: 800 14px/1 var(--f-display); background: var(--white); border: 2px dashed var(--cocoa); border-radius: 10px; padding: 4px 8px 2px; }
body .grabwp__promo-m small { color: var(--cocoa-soft); font-size: 13px; }
body .grabwp__promo .grabwp__btn { display: inline-flex; min-height: 42px; padding: 0 18px; margin-top: 4px; }
body .grabwp__row .grabwp__hot--sale { background: var(--butter); border: 1.5px solid var(--cocoa); }
body .grabwp__row .grabwp__pr s { display: block; font-size: 11px; font-weight: 700; line-height: 1.2; opacity: .6; text-align: right; }
body .grabwp__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body .grabwp__links a { font: 800 14px/1 var(--f-display); color: var(--cocoa); text-decoration: none; background: var(--white); border: 2px solid var(--cocoa); border-radius: 99px; padding: 9px 14px 7px; }
body .grabwp__bl { display: grid; gap: 14px; margin-top: 16px; }
body .grabwp__bc { background: var(--white); border-radius: 24px; padding: 16px; box-shadow: 0 5px 0 var(--butter); }
body .grabwp__bc[aria-current="true"] { background: var(--butter); box-shadow: 0 5px 0 var(--crust); }
body .grabwp__bc h3 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 800; font-size: 20px; }
body .grabwp__bc p { margin: 0; font-size: 14px; }
body .grabwp__bc .grabwp__bc-h { color: var(--cocoa-soft); font-weight: 700; }
body .grabwp__bar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
body .grabwp__bar a + a + a { background: var(--butter); }