/* =========================================================
   Nado Milk Tea Đà Nẵng — chuyển từ bản v2 mobile, giữ nguyên bố cục và thiết kế.
   Dữ liệu thực đơn và sách lật lấy từ plugin Nado Menu Kit (xem script.js).
   ========================================================= */
body{margin:0}
*,*::before,*::after{box-sizing:border-box}img{max-width:100%}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* ===== 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-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-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: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}
@media (prefers-reduced-motion:reduce){.grabwp__nf-sheet,.grabwp__nf-book{transition:none}}


/* Layout (mobile trước): chữ NADO khổng lồ kiểu poster K-pop, thẻ viền đen bóng đổ cứng, bảng giá có cột M/L, sách menu nhiều màu kẹo */
:root{
  --lilac:#E9E2FF; --ink:#16113A; --cobalt:#3A2BFF; --candy:#FF6FB1; --lemon:#F4FF6B; --white:#FFFFFF; --pinky:#FFE0EF;
  --f-display:"Bricolage Grotesque",system-ui,sans-serif; --f-hand:"Pangolin","Comic Sans MS",cursive;
  color-scheme:light;
}
body{margin:0;background:var(--lilac);color:var(--ink);font-family:var(--f-display);font-size:15px;line-height:1.5;padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));
  background-image:radial-gradient(rgba(58,43,255,.13) 1.4px,transparent 1.5px);background-size:20px 20px}
.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))}
header{padding-block:14px 20px}
.grabwp__tb{display:flex;justify-content:space-between;align-items:center;gap:8px}
.grabwp__chip{display:inline-block;border:2px solid var(--ink);background:var(--white);border-radius:99px;padding:4px 12px;font-weight:800;font-size:13px;box-shadow:2px 2px 0 var(--ink);color:var(--ink);text-decoration:none;white-space:nowrap}
.grabwp__logo{margin-top:18px}
.grabwp__logo h1{margin:0;font-weight:800;font-size:31vw;max-width:100%;line-height:.8;letter-spacing:-.06em;color:var(--cobalt);-webkit-text-stroke:2.5px var(--ink);text-shadow:6px 6px 0 var(--candy)}
@media (min-width:560px){.grabwp__logo h1{font-size:170px}}
.grabwp__logo .grabwp__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.grabwp__logo .grabwp__tag{font-size:24px;font-weight:800;background:var(--lemon);border:2px solid var(--ink);padding:0 12px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
.grabwp__logo .grabwp__hand{font-family:var(--f-hand);font-size:19px;color:var(--cobalt)}
.grabwp__hero{position:relative;margin-top:18px;border:2.5px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:6px 6px 0 var(--ink)}
.grabwp__hero img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.grabwp__stk{position:absolute;right:12px;top:12px;width:86px;height:86px;border-radius:50%;background:var(--candy);border:2.5px solid var(--ink);display:grid;place-items:center;text-align:center;font-weight:800;font-size:14px;line-height:1.05;transform:rotate(10deg)}
.grabwp__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.grabwp__btn{display:flex;align-items:center;justify-content:center;min-height:50px;border:2.5px solid var(--ink);border-radius:16px;font-weight:800;font-size:16px;text-decoration:none;color:var(--ink);background:var(--white);box-shadow:4px 4px 0 var(--ink)}
.grabwp__btn.grabwp__fill{background:var(--cobalt);color:var(--white)}
.grabwp__btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.grabwp__marq{background:var(--ink);color:var(--lemon);overflow:hidden;white-space:nowrap;padding-block:9px;font-weight:800;font-size:17px;margin-top:8px}
.grabwp__marq span{display:inline-block;padding-right:28px;animation:mq 20s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.grabwp__marq span{animation:none}}
.grabwp__sec{padding-block:34px 6px}
.grabwp__sh{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.grabwp__sh h2{margin:0;font-weight:800;font-size:40px;line-height:.92;letter-spacing:-.04em}
.grabwp__sh .grabwp__hand{font-family:var(--f-hand);color:var(--cobalt);font-size:16px;transform:rotate(-3deg);text-align:right}
.grabwp__chips{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;gap:8px;overflow-x:auto;padding-block:14px;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));background:var(--lilac);scrollbar-width:none}
.grabwp__chips::-webkit-scrollbar{display:none}
.grabwp__chips .grabwp__chip{font-size:14px;padding:7px 14px}
.grabwp__chips .grabwp__chip:first-child{background:var(--lemon)}
.grabwp__card{background:var(--white);border:2.5px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:14px 14px 6px;margin-top:16px;scroll-margin-top:72px}
.grabwp__card:nth-of-type(2){background:#F7FFD6}.grabwp__card:nth-of-type(3){background:var(--pinky)}
.grabwp__ch{display:grid;grid-template-columns:1fr 46px 46px;align-items:end;gap:6px;border-bottom:2.5px solid var(--ink);padding-bottom:8px}
.grabwp__ch h3{margin:0;font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1}
.grabwp__ch h3 small{display:block;font-family:var(--f-hand);font-weight:400;font-size:14px;color:var(--cobalt);margin-top:3px}
.grabwp__ch b{text-align:center;background:var(--ink);color:var(--lemon);border-radius:99px;font-size:13px;padding:2px 0}
.grabwp__r{display:grid;grid-template-columns:1fr 46px 46px;gap:6px;align-items:center;padding-block:10px;border-bottom:2px dashed rgba(22,17,58,.18)}
.grabwp__r:last-child{border-bottom:0}
.grabwp__r h4{margin:0;font-weight:700;font-size:16px;line-height:1.25}
.grabwp__r small{display:block;font-family:var(--f-hand);color:var(--cobalt);font-size:14px}
.grabwp__r .grabwp__p{text-align:center;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.grabwp__r .grabwp__hot{display:inline-block;background:var(--candy);border:2px solid var(--ink);border-radius:99px;font-size:10px;font-weight:800;padding:0 6px;margin-left:6px;vertical-align:2px}
.grabwp__tp{background:var(--lemon)}
.grabwp__tp .grabwp__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding-block:10px}
.grabwp__tp .grabwp__grid div{display:flex;justify-content:space-between;font-weight:700;font-size:14px;border-bottom:2px dashed rgba(22,17,58,.2);padding-block:4px}
.grabwp__tp .grabwp__opt{font-size:13px;padding-bottom:8px}
.grabwp__tp .grabwp__opt b{font-weight:800}
.grabwp__unit{font-family:var(--f-hand);color:var(--cobalt);font-size:15px;margin-top:12px;text-align:center}
.grabwp__flipsec{margin-top:34px;background:var(--cobalt);color:var(--white);padding-block:30px 24px;border-block:2.5px solid var(--ink)}
.grabwp__flipsec .grabwp__sh h2{color:var(--white)}
.grabwp__flipsec .grabwp__sh .grabwp__hand{color:var(--lemon)}
.grabwp__nf .grabwp__nf-btn{width:52px;height:52px;border-radius:50%;background:var(--candy);color:var(--ink);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.grabwp__nf .grabwp__nf-count{font-weight:800;font-size:17px}
.grabwp__nf-hint{color:var(--lemon)}
.grabwp__nf-face{border:2.5px solid var(--ink);box-shadow:none}
.grabwp__nf-paper{background:var(--lilac)}
.grabwp__info{margin-top:26px;background:var(--white);border:2.5px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:6px 16px}
.grabwp__info div{display:flex;justify-content:space-between;gap:12px;padding-block:10px;border-bottom:2px dashed rgba(22,17,58,.18);font-weight:700;font-size:14px}
.grabwp__info div:last-child{border-bottom:0}
.grabwp__info dt{color:var(--cobalt)}
.grabwp__info dd{margin:0;text-align:right}
footer{text-align:center;padding-block:22px 6px;font-weight:800;font-size:28px;letter-spacing:-.05em;color:var(--cobalt)}
.grabwp__bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:1.3fr 1fr;gap:10px;padding:10px max(12px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(233,226,255,0),var(--lilac) 35%)}
.grabwp__bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;border:2.5px solid var(--ink);border-radius:16px;box-shadow:3px 3px 0 var(--ink);font-weight:800;font-size:15px;line-height:1.15;text-decoration:none;color:var(--white);background:var(--cobalt)}
.grabwp__bar a small{font-weight:500;font-size:12px;opacity:.9}
.grabwp__bar a+a{background:var(--candy);color:var(--ink)}

/* ===== TRANG MENU A4 · thẻ kẹo viền đen ===== */
.grabwp__pg{color:var(--ink);font-family:var(--f-display);padding:6cqw;background:var(--white)}
.grabwp__pg.grabwp__c1{background:var(--lemon)}.grabwp__pg.grabwp__c2{background:var(--pinky)}.grabwp__pg.grabwp__c3{background:#DDF6FF}
.grabwp__pg-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4cqw}
.grabwp__pg-h b{font-weight:800;font-size:11cqw;line-height:.85;letter-spacing:-.05em}
.grabwp__pg-h span{font-family:var(--f-hand);font-size:3.6cqw;color:var(--cobalt);text-align:right;line-height:1.1}
.grabwp__tg{display:grid;gap:3.4cqw;flex:1;min-height:0}
.grabwp__tg.grabwp__g6{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
.grabwp__tg.grabwp__g4{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,1fr)}
.grabwp__tc{background:var(--white);border:.6cqw solid var(--ink);border-radius:4.4cqw;box-shadow:1cqw 1cqw 0 var(--ink);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.grabwp__tc .grabwp__ph{flex:1;min-height:0;border-bottom:.6cqw solid var(--ink);position:relative}
.grabwp__tc .grabwp__ph img{position:absolute;inset:0}
.grabwp__tc .grabwp__lb{padding:1.8cqw 2.4cqw 2.2cqw;display:flex;flex-direction:column;align-items:flex-start;gap:1.2cqw}
.grabwp__tc .grabwp__n{font-weight:800;font-size:3.3cqw;line-height:1.05;letter-spacing:-.02em}
.grabwp__tc .grabwp__n small{display:block;font-family:var(--f-hand);font-weight:400;color:var(--cobalt);font-size:2.6cqw;margin-top:.6cqw}
.grabwp__tc .grabwp__p{flex:none;background:var(--cobalt);color:var(--white);border:.4cqw solid var(--ink);border-radius:99px;font-weight:800;font-size:2.9cqw;padding:.6cqw 2cqw;white-space:nowrap}
.grabwp__tc .grabwp__h{position:absolute;left:2cqw;top:2cqw;background:var(--candy);border:.4cqw solid var(--ink);border-radius:99px;font-weight:800;font-size:2.4cqw;padding:.3cqw 1.8cqw}
.grabwp__g4 .grabwp__tc .grabwp__n{font-size:4.2cqw}.grabwp__g4 .grabwp__tc .grabwp__p{font-size:3.6cqw}
.grabwp__g6 .grabwp__tc .grabwp__n{font-size:3cqw}.grabwp__g6 .grabwp__tc .grabwp__n small{display:none}
.grabwp__pg-note{font-family:var(--f-hand);font-size:3cqw;color:var(--cobalt);margin-top:3cqw;text-align:center}
.grabwp__tbox{background:var(--white);border:.6cqw solid var(--ink);border-radius:4.4cqw;box-shadow:1cqw 1cqw 0 var(--ink);padding:3.4cqw 4cqw;margin-top:3.4cqw}
.grabwp__tbox h4{margin:0 0 1.6cqw;font-weight:800;font-size:5.4cqw;letter-spacing:-.03em}
.grabwp__tbox .grabwp__tl{display:grid;grid-template-columns:1fr 1fr;gap:1cqw 4cqw}
.grabwp__tbox .grabwp__tl div,.grabwp__tbox .grabwp__ol div{display:flex;justify-content:space-between;font-weight:700;font-size:3cqw;padding-block:1cqw;border-bottom:.3cqw dashed rgba(22,17,58,.2)}
.grabwp__tbox .grabwp__ol div{gap:3cqw}
.grabwp__tbox .grabwp__ol div span:last-child{font-weight:500;text-align:right}
.grabwp__combo{background:var(--candy)}
.grabwp__combo .grabwp__row{display:flex;justify-content:space-between;align-items:center;gap:3cqw}
.grabwp__combo .grabwp__row span{font-family:var(--f-hand);font-size:3.2cqw}
.grabwp__combo .grabwp__row b{font-weight:800;font-size:9cqw;letter-spacing:-.04em;line-height:1}
.grabwp__botl{display:grid;grid-template-columns:34cqw 1fr;gap:4cqw;margin-top:3.4cqw;align-items:stretch}
.grabwp__botl .grabwp__tc .grabwp__ph{height:40cqw;flex:none}
.grabwp__pg-cover{background:var(--cobalt);color:var(--white);justify-content:space-between;padding:7cqw}
.grabwp__pg-cover .grabwp__s{align-self:flex-start;font-weight:800;font-size:5cqw;background:var(--lemon);color:var(--ink);padding:.4cqw 3cqw;border:.5cqw solid var(--ink);transform:rotate(-3deg)}
.grabwp__pg-cover .grabwp__big{font-weight:800;font-size:29cqw;line-height:.8;letter-spacing:-.06em;-webkit-text-stroke:.5cqw var(--ink);text-shadow:1.6cqw 1.6cqw 0 var(--candy)}
.grabwp__pg-cover .grabwp__ph{height:44cqw;border:.6cqw solid var(--ink);border-radius:5cqw;overflow:hidden}
.grabwp__pg-cover .grabwp__h{font-family:var(--f-hand);font-size:5cqw;color:var(--lemon)}
.grabwp__pg-back{background:var(--ink);color:var(--lemon);justify-content:center;gap:2.6cqw;font-size:3.6cqw;padding:9cqw;font-weight:500}
.grabwp__pg-back b{font-weight:800;font-size:14cqw;line-height:.88;color:var(--candy);letter-spacing:-.05em}
@media (min-width:900px){.grabwp__wrap{max-width:720px}}

/* ===== Thay cho inline style của bản v2 ===== */
.grabwp__chip.grabwp__chip--lemon{background:var(--lemon)}
.grabwp__ch.grabwp__ch--single{grid-template-columns:1fr}
.grabwp__flipwrap{margin-top:20px}
.grabwp__tbox h4.grabwp__flush{margin:0}

/* ===== Sách lật: class do script.js tạo thêm ===== */
.grabwp__nf-instant,.grabwp__nf-instant .grabwp__nf-sheet{transition:none}
.grabwp__nf-sheet.grabwp__is-hidden{visibility:hidden}
.grabwp__nf-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
/* Trang là ảnh tải lên ở "Sách menu lật" */
.grabwp__pg.grabwp__pg--image{padding:0;background:var(--white)}
.grabwp__pg--image img{object-fit:contain}

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

/* ===== Plugin Nado Menu Kit v2: chi nhánh, khuyến mãi, link liên hệ ===== */
[hidden]{display:none!important}
.grabwp__cn{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding:2px 2px 6px;scrollbar-width:none}
.grabwp__cn::-webkit-scrollbar{display:none}
.grabwp__cn button{font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.grabwp__cn button[aria-current="true"]{background:var(--cobalt);color:var(--white)}
.grabwp__cn button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.grabwp__promos{display:grid;gap:14px;margin-top:16px}
.grabwp__promo{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start;background:var(--lemon);border:2.5px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:12px}
.grabwp__promo-ph{border:2px solid var(--ink);border-radius:14px;overflow:hidden;aspect-ratio:1/1}
.grabwp__promo-ph img{display:block;width:100%;height:100%;object-fit:cover}
.grabwp__promo-b{grid-column:2;min-width:0}
.grabwp__promo:not(:has(.grabwp__promo-ph)){grid-template-columns:1fr}
.grabwp__promo:not(:has(.grabwp__promo-ph)) .grabwp__promo-b{grid-column:1}
.grabwp__promo h3{margin:4px 0 2px;font-size:19px;line-height:1.15}
.grabwp__promo p{margin:0 0 6px;font-size:14px}
.grabwp__promo .grabwp__hot{display:inline-block;background:var(--candy);border:2px solid var(--ink);border-radius:99px;font-size:11px;font-weight:800;padding:0 8px}
.grabwp__promo-m{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.grabwp__promo-m code{font:inherit;font-weight:800;background:var(--white);border:2px dashed var(--ink);border-radius:8px;padding:0 6px}
.grabwp__promo-m small{font-family:var(--f-hand);color:var(--cobalt);font-size:14px}
.grabwp__promo .grabwp__btn{display:inline-flex;min-height:42px;padding:0 16px;margin-top:4px;font-size:15px}
.grabwp__r .grabwp__hot--sale{background:var(--lemon)}
.grabwp__r .grabwp__p s{display:block;font-size:11px;font-weight:500;opacity:.6;line-height:1}
.grabwp__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.grabwp__bl{display:grid;gap:14px;margin-top:16px}
.grabwp__bc{background:var(--white);border:2.5px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:14px 16px}
.grabwp__bc[aria-current="true"]{background:var(--pinky)}
.grabwp__bc h3{margin:0 0 4px;font-size:20px}
.grabwp__bc p{margin:0;font-size:14px}
.grabwp__bc .grabwp__bc-h{font-family:var(--f-hand);color:var(--cobalt)}
.grabwp__bar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.grabwp__bar a+a+a{background:var(--lemon);color:var(--ink)}

/* Icon SVG thay cho emoji (mỗi hệ điều hành vẽ emoji một kiểu) */
.grabwp__ico{display:inline-block;width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}