/* Giao diện bản 2 (phong cách app: header gradient, thẻ bo tròn lớn, thanh điều hướng nổi, nút đen).
   Chỉ có tác dụng khi <body class="v2">, nên bản 1 ở "/" không bị ảnh hưởng. Đè lên base.css + app.css. */
.v2{--cr:#c8301f;--cr-d:#a3200f;--cr-l:#fdecea;--cream:#faf7f5;--line:#eee6e2;--ink:#16110f;--mute:#8a7f7a;
  --gold:#ffb92e;--gold-d:#f59a00;--gold-l:#fff3d6;--green:#18a957;--pink:#fdecea;--pink2:#fff5f3;
  --sh:0 14px 30px -14px rgba(120,40,20,.38);--sh2:0 2px 10px -4px rgba(60,20,10,.16);
  background:var(--cream);color:var(--ink)}
.v2 .page{max-width:1180px;padding-bottom:40px}

/* ---------- nút, thẻ, form (đè bản 1) ---------- */
.v2 .btn{border-radius:999px;padding:11px 20px;font-size:13.5px}
.v2 .btn.p{background:#0f0b0a;color:#fff;box-shadow:none}
.v2 .btn.gold{background:var(--gold);color:#2b1a00;box-shadow:0 8px 16px -8px rgba(245,154,0,.8)}
.v2 .btn.o{border:1.5px solid var(--line);background:#fff}
.v2 .btn.r{border-color:#f0b9b0}
.v2 .btn.sm{padding:8px 14px;font-size:12.5px}
.v2 .card{border-radius:22px;border:1px solid var(--line);box-shadow:none}
.v2 .in{border-radius:14px;border-color:#efdad5;min-height:46px;font-size:14px}
.v2 .in:focus{border-color:var(--cr);box-shadow:0 0 0 4px rgba(200,48,31,.12)}
.v2 .seg{border-radius:16px;background:#f3eeec}
.v2 .seg label.on{color:var(--ink)}
.v2 .opt{border-radius:16px}
.v2 .opt.on{border-color:var(--cr);background:var(--pink2)}
.v2 .fld label.opt{display:flex;margin-bottom:8px;font-weight:600;color:var(--ink)}
.v2 .stp{background:#f3eeec}
.v2 .stp s.p{background:var(--cr)}
.v2 .notice{border-radius:16px;display:block;line-height:1.55}
.v2 .tag{font-weight:800}
.v2 .chk input{accent-color:var(--cr)}
.v2 .back{color:var(--cr)}
.v2 .foot{padding:28px 20px 110px;margin-top:28px;color:#fff;text-align:center;font-size:13px;
  background:radial-gradient(300px 170px at 8% 100%,rgba(255,255,255,.18),transparent 70%),linear-gradient(165deg,var(--g1,#ef5a45),var(--cr,#c8301f) 60%,var(--cr-d,#a3200f))}
.v2 .foot .v2hours .open,.v2 .foot .v2hours .shut{color:#fff;background:rgba(255,255,255,.2);border-radius:999px;padding:3px 12px}
.v2 .foot .v2hours .open{background:rgba(24,169,87,.9)}

/* khung hero cũ (còn dùng ở đặt nhóm, sửa đơn): gọn lại theo kiểu header app */
.v2 .hero{border-radius:26px;background:radial-gradient(240px 140px at 92% 0,rgba(255,255,255,.2),transparent 70%),linear-gradient(165deg,var(--g1,#ef5a45),var(--cr,#c8301f) 60%,var(--cr-d,#a3200f))}
.v2 .hero .logo u{background:var(--gold)}
.v2 .cart{border-radius:22px;border:1px solid var(--line)}
.v2 .cart .hd{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.v2 .cart .hd a,.v2 .cart .hd .lnk{color:var(--cr)}
.v2 .go{border-radius:999px;background:#0f0b0a;box-shadow:none}
.v2 .go.dis{background:#d9d0c8}
.v2 .ship{background:var(--gold-l)}
.v2 .ship .bar2 i{background:linear-gradient(90deg,var(--gold),var(--cr))}

/* ---------- modal: bottom sheet bo tròn ---------- */
.v2 .ov{background:rgba(0,0,0,.55)}
.v2 .mod{border-radius:28px}
.v2 .ov.bot .mod{border-radius:28px 28px 0 0}
.v2 .mod .x{background:rgba(255,255,255,.92)}
.v2 .mod .ft .btn.p{height:48px}

/* ---------- ảnh/ô món ---------- */
.v2 .i1{background:radial-gradient(circle at 50% 40%,#fff,#fbe3b6)}
.v2 .i2{background:radial-gradient(circle at 50% 40%,#fff,#d9f3e0)}
.v2 .i3{background:radial-gradient(circle at 50% 40%,#fff,#ffd5cd)}
.v2 .i4{background:radial-gradient(circle at 50% 40%,#fff,#dde5ff)}
.v2 .i5{background:radial-gradient(circle at 50% 40%,#fff,#eddcff)}
.v2 .pc{border-radius:22px;border:1px solid var(--line);box-shadow:none}
.v2 .pc:hover{box-shadow:var(--sh)}
.v2 .pc .im{height:132px;font-size:60px}
.v2 .pc b.n{font-size:14.5px;font-weight:800}
.v2 .pc .pr{color:var(--cr);font-size:17px;font-weight:900}
.v2 .add{width:40px;height:40px;border-radius:14px;background:var(--gold);color:#2b1a00;box-shadow:0 8px 16px -8px rgba(245,154,0,.9)}
.v2 .pc .inc{background:var(--cr);color:#fff}
.v2 .gh{font-size:19px;font-weight:900}
.v2 .grid{gap:14px}

/* ---------- thanh trên cùng ---------- */
.v2top{position:sticky;top:0;z-index:40;background:rgba(250,247,245,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.v2top .in{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:12px;height:60px}
.v2brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--cr);text-decoration:none;font-size:16px;letter-spacing:.02em}
.v2brand i{font-style:normal;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--g1,#ef5a45),var(--cr,#c8301f));display:grid;place-items:center;font-size:19px;box-shadow:var(--sh)}
.v2brand small{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--mute);font-weight:700}
.v2links{display:flex;gap:4px;margin-left:10px}
.v2links a{padding:8px 14px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--mute);text-decoration:none;white-space:nowrap}
.v2links a:hover,.v2links a.on{background:#fff;color:var(--cr);box-shadow:var(--sh2)}
.v2top .sp{flex:1}
.v2state{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:6px;white-space:nowrap}
.v2state.open{color:var(--green)}.v2state.shut{color:var(--mute)}
.v2state b{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 20%,transparent)}
.v2cartbtn{position:relative;white-space:nowrap}
.v2cartbtn em{position:absolute;top:-6px;right:-4px;background:var(--gold);color:#2b1a00;font-style:normal;font-size:11px;font-weight:900;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;border:2px solid var(--cream)}
.v2cartbtn em[hidden]{display:none}

/* ---------- danh mục dạng icon ---------- */
.v2cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px 8px;margin:26px 16px 0}
.v2ic{text-align:center;font-size:12.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.v2ic i{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 7px;border-radius:22px;font-style:normal;font-size:32px;background:var(--pink)}
.v2ic:nth-child(4n+2) i{background:#fff1d3}.v2ic:nth-child(4n+3) i{background:#e2f6e9}.v2ic:nth-child(4n+4) i{background:#e9e6ff}

/* ---------- tiêu đề mục ---------- */
.v2sec{margin:34px 16px 0}
.v2sh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.v2sh h2{font-size:25px;font-weight:900;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.v2sh h2 em{font-style:normal;font-size:11.5px;font-weight:800;background:var(--cr);color:#fff;padding:4px 10px;border-radius:999px;letter-spacing:.06em}
.v2sh p{color:var(--mute);font-size:13.5px;margin-top:2px}

/* ---------- 2. KHUYẾN MÃI ---------- */
.v2deal{border-radius:24px;padding:22px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--cr,#c8301f) 25%,#000),color-mix(in srgb,var(--cr,#c8301f) 55%,#000) 60%,var(--cr,#c8301f));box-shadow:var(--sh)}
/* Cấu hình giao diện (fnb-admin → Cấu hình Web): thông báo nổi + banner + logo ảnh */
.v2notice{background:var(--gold-l,#fff3d6);color:#7a5b00;font-size:13px;font-weight:600;text-align:center;padding:8px 14px}
.v2banner{height:140px;border-radius:18px;margin-bottom:14px;background:#0002 center/cover no-repeat}
.v2brand i{overflow:hidden}
.v2deal::after{content:"🚚";position:absolute;right:-8px;bottom:-28px;font-size:140px;opacity:.16}
.v2deal small{font-weight:800;letter-spacing:.08em;font-size:11.5px;color:var(--gold)}
.v2deal h3{font-size:24px;font-weight:900;line-height:1.15;margin:6px 0 6px;font-style:italic}
.v2deal p{opacity:.88;font-size:13.5px;max-width:340px}
.v2deal .bar{height:9px;border-radius:5px;background:rgba(255,255,255,.2);margin-top:16px;overflow:hidden;position:relative;z-index:1}
.v2deal .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ff8a3d);border-radius:5px}
.v2deal .lft{margin-top:8px;font-size:12.5px;position:relative;z-index:1}
.v2deal .lft b{color:var(--gold)}
.v2tix{display:grid;gap:12px;align-content:start}
.v2tk{display:flex;background:#fff;border-radius:18px;overflow:hidden;position:relative;border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(120,40,20,.5)}
.v2tk .a{width:84px;flex:none;display:grid;place-items:center;text-align:center;color:#fff;font-weight:900;padding:12px 6px;font-size:28px;background:linear-gradient(160deg,#ef5a45,#a3200f);position:relative}
.v2tk:nth-child(2n) .a{background:linear-gradient(160deg,#ffc94d,#f59a00)}
.v2tk:nth-child(3n) .a{background:linear-gradient(160deg,#35c27a,#0f8a4a)}
.v2tk .a::after{content:"";position:absolute;right:-7px;top:0;bottom:0;width:14px;background:radial-gradient(circle,var(--cream) 5px,transparent 5.5px) 0 0/14px 18px repeat-y}
.v2tk .c{flex:1;padding:13px 14px 13px 20px;min-width:0}
.v2tk h4{font-size:14.5px;line-height:1.3}
.v2tk p{font-size:12.5px;color:var(--mute);margin-top:2px}
.v2combos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.v2cb{display:flex;gap:12px;align-items:center;border-radius:22px;padding:14px;background:linear-gradient(135deg,#ffeec6,#ffd77a);position:relative;cursor:pointer;min-width:0}
.v2cb:nth-child(2n){background:linear-gradient(135deg,#ffe0d9,#ffb7a9)}
.v2cb:nth-child(3n){background:linear-gradient(135deg,#dcf4e3,#abe4bd)}
.v2cb .im{width:84px;height:84px;border-radius:20px;flex:none;font-size:42px}
.v2cb .m{flex:1;min-width:0}
.v2cb small{font-weight:800;font-size:10.5px;letter-spacing:.08em;color:var(--cr-d)}
.v2cb b{display:block;font-size:15.5px;line-height:1.25;margin:2px 0}
.v2cb .p{font-weight:900;color:var(--cr-d);font-size:16px}
.v2cb .add{position:static;flex:none}

/* ---------- 3. ĐẶT HÀNG ---------- */
.v2find{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.v2search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #f1d7d2;border-radius:999px;padding:0 18px;min-height:46px;min-width:240px;flex:1;cursor:text}
.v2search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--ink)}
.v2 .chips{position:sticky;top:60px;z-index:20;margin:8px 0 0;padding:12px 0 8px;background:linear-gradient(var(--cream) 82%,rgba(250,247,245,0))}
.v2 .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:12px;font-size:14px;font-weight:500;color:#2a2220;border:1px solid #e3d8d2;background:#fff}
.v2 .chip i{font-style:normal;font-size:18px;line-height:1}
.v2 .chip em{font-style:normal;font-size:12px;background:#f1e8e3;color:#6b5a52;border-radius:999px;padding:1px 8px}
.v2 .chip.on{background:#fdebe8;border-color:var(--cr);color:#7a1914;box-shadow:none}
.v2 .chip.on em{background:var(--cr);color:#fff}
.v2cols{display:flex;gap:22px;align-items:flex-start;margin-top:6px}
.v2cols>.l{flex:1;min-width:0}
.v2side{width:350px;flex:none;position:sticky;top:132px;display:grid;gap:12px}

/* giỏ hàng (cột phải + bottom sheet) */
.v2cart{background:#fff;border-radius:24px;border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh)}
.v2ch{display:flex;align-items:center;gap:8px;padding:16px 18px;font-weight:900;font-size:16px;border-bottom:1px solid var(--line)}
.v2ch b{flex:1}.v2ch a{font-size:12.5px;font-weight:700;color:var(--cr)}
.v2x{width:32px;height:32px;border-radius:50%;background:#f3eeec;font-size:13px}
.v2empty{padding:34px 16px;text-align:center;color:var(--mute);font-size:13px;display:grid;gap:6px;justify-items:center}
.v2empty div{font-size:46px}.v2empty b{color:var(--ink);font-size:15px}
.v2cart .ship{margin:12px 16px 0;border-radius:14px;border:0}
.v2cart .cl-line{padding:12px 18px}
.v2cart .tot{padding:12px 18px 4px}
.v2go{display:flex;margin:6px 16px 16px;height:54px;border-radius:999px;background:#0f0b0a;color:#fff;align-items:center;justify-content:center;font-weight:800;font-size:16px;text-decoration:none;border:0;cursor:pointer;width:calc(100% - 32px)}
.v2go.dis{background:#d9d0c8;cursor:not-allowed}
.v2link{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px 16px;text-decoration:none;color:inherit;font-size:13px}
.v2link i{font-style:normal;font-size:24px}.v2link b{display:block}.v2link span{color:var(--cr);font-weight:700;font-size:12px}

/* ---------- thanh điều hướng nổi (mobile) ---------- */
.v2nav{display:none;position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;gap:10px;align-items:center;max-width:560px;margin:0 auto}
.v2pill{flex:1;display:flex;justify-content:space-around;background:rgba(255,250,247,.94);backdrop-filter:blur(14px);border-radius:999px;padding:9px 4px;box-shadow:0 14px 30px -10px rgba(60,20,10,.45);border:1px solid #fff}
.v2nt{text-align:center;font-size:10.5px;font-weight:700;color:var(--mute);min-width:58px;text-decoration:none}
.v2nt i{display:block;font-style:normal;font-size:22px;margin-bottom:1px;filter:grayscale(1) opacity(.55)}
.v2nt.on{color:var(--ink);font-weight:800}.v2nt.on i{filter:none}
.v2fab{width:60px;height:60px;border-radius:50%;background:rgba(255,250,247,.96);display:grid;place-items:center;font-size:25px;box-shadow:0 14px 30px -10px rgba(60,20,10,.45);border:1px solid #fff;position:relative;text-decoration:none;flex:none}
.v2fab em{position:absolute;top:2px;right:2px;min-width:20px;height:20px;border-radius:10px;background:var(--cr);color:#fff;font-style:normal;font-size:11px;font-weight:900;display:grid;place-items:center;border:2px solid #fff}
.v2fab em[hidden]{display:none}

/* ---------- các trang con: header gradient ---------- */
.v2sub{margin:0;padding:18px 18px 64px;color:#fff;position:relative;background:radial-gradient(260px 160px at 92% 0,rgba(255,255,255,.2),transparent 70%),linear-gradient(170deg,var(--g1,#ef5a45),var(--cr,#c8301f) 60%,var(--cr-d,#a3200f))}
.v2sub{border-radius:0 0 28px 28px}
@media (min-width:900px){
  /* Tiêu đề thẳng hàng với cột thẻ bên dưới (trang rộng 1040px) */
  .v2sub:has(+ .v2narrow.wide){padding-left:max(18px,calc(50% - 506px));padding-right:max(18px,calc(50% - 506px))}
  .v2sub:has(+ .v2narrow:not(.wide)){padding-left:max(18px,calc(50% - 366px));padding-right:max(18px,calc(50% - 366px))}
}
.tot .g{gap:12px}
.v2sub-top{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:900}
.v2back{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;text-decoration:none;font-size:22px;font-weight:700;flex:none}
.v2sub p{margin:8px 0 0;font-size:13.5px;opacity:.9}
.v2narrow{max-width:760px;margin:-44px auto 0;padding:0 14px;position:relative;z-index:2}
.v2narrow.wide{max-width:1040px}
.v2card{background:#fff;border-radius:24px;border:1px solid var(--line);padding:18px;margin-bottom:14px}
.v2card h3{font-size:16px;font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.v2card h3 u{width:28px;height:28px;border-radius:10px;background:var(--pink);display:grid;place-items:center;text-decoration:none;font-size:15px}
.v2card h3 .lnk{margin-left:auto;font-size:13px;white-space:nowrap}
.v2steps{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#a99f9a;margin-bottom:14px}
.v2steps b{width:26px;height:26px;border-radius:50%;background:#e9e2df;color:#fff;display:inline-grid;place-items:center;font-size:12px;margin-right:6px}
.v2steps span{display:flex;align-items:center}
.v2steps{color:rgba(255,255,255,.75)}
.v2steps b{background:rgba(255,255,255,.28)}
.v2steps .ok,.v2steps .cur{color:#fff}
.v2steps .ok b{background:var(--green)}
.v2steps .cur b{background:#fff;color:var(--cr)}
.v2steps hr{width:30px;border:0;height:2px;background:rgba(255,255,255,.35)}.v2steps hr.on{background:#fff}
.v2two{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.v2sticky{position:sticky;top:76px}
.v2bar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;box-shadow:0 -10px 24px -16px rgba(0,0,0,.3);padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));display:none;gap:12px;align-items:center}
.v2bar .t{font-size:12px;color:var(--mute)}.v2bar .t b{display:block;font-size:20px;color:var(--ink)}
.v2bar button{flex:1;height:54px;border-radius:999px;background:#0f0b0a;color:#fff;font-weight:800;font-size:16px}
.v2bar button[disabled]{opacity:.6}

/* theo dõi đơn */
.v2eta{margin-top:14px}.v2eta small{opacity:.88;font-size:13px}
.v2eta b{display:block;font-size:28px;font-weight:900;margin-top:2px}
.v2eta span{display:inline-block;margin-top:8px;background:rgba(255,255,255,.2);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:800}
.v2tl{list-style:none;padding:2px 2px 0}
.v2tl li{display:flex;gap:14px;position:relative;padding-bottom:18px}
.v2tl li:last-child{padding-bottom:0}
.v2tl li::before{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:#eadfda}
.v2tl li:last-child::before{display:none}
.v2tl i{width:32px;height:32px;flex:none;border-radius:50%;background:#f1ebe8;display:grid;place-items:center;font-style:normal;font-size:14px;color:#bbb;z-index:1}
.v2tl li.ok i{background:var(--green);color:#fff}.v2tl li.ok::before{background:var(--green)}
.v2tl li.now i{background:var(--cr);color:#fff;box-shadow:0 0 0 6px rgba(200,48,31,.18)}
.v2tl li.bad i{background:var(--cr);color:#fff}
.v2tl h6{font-size:14.5px;font-weight:800}.v2tl p{font-size:12.5px;color:var(--mute);margin-top:1px}
.v2tl li:not(.ok):not(.now):not(.bad) h6{color:#aaa}
.v2kv{display:grid;grid-template-columns:104px 1fr;gap:8px 12px;font-size:13.5px}
.v2kv span{color:var(--mute)}
.v2btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.v2btns .btn{flex:1;min-width:130px;height:46px}

/* tra cứu */
.v2find-box{background:#fff;border-radius:24px;padding:14px;box-shadow:var(--sh);border:1px solid var(--line)}
.v2find-box .seg{margin-bottom:12px}
.v2find-box .btn{width:100%;height:50px;font-size:15px;margin-top:6px}
.v2od{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:22px;padding:15px;margin-bottom:10px;cursor:pointer;transition:border-color .15s}
.v2od:hover{border-color:var(--cr)}
.v2od .h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.v2od .h b{font-size:15px}.v2od .h small{display:block;color:var(--mute);font-size:12px;font-weight:500}
.v2od .f{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mute);margin-top:10px}
.v2od .f b{font-size:17px;color:var(--ink)}
.v2od .go2{margin-top:10px;display:block;text-align:center;height:42px;line-height:42px;border-radius:999px;background:#0f0b0a;color:#fff;font-weight:800;font-size:13.5px}
.v2od.alt .go2{background:#fff;color:var(--ink);border:1.5px solid var(--line);line-height:39px}

/* hoàn tất */
.v2ty{text-align:center;padding:26px 20px 20px;position:relative;overflow:hidden}
.v2ty .ok{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#18a957,#46cf86);color:#fff;display:grid;place-items:center;font-size:42px;margin:0 auto 12px;box-shadow:0 0 0 10px rgba(24,169,87,.15),0 10px 24px rgba(24,169,87,.35)}
.v2ty h1{font-size:23px;font-weight:900}
.v2ty .code{display:inline-block;margin:12px 0 4px;background:#0f0b0a;color:var(--gold);font-weight:900;letter-spacing:2px;border-radius:14px;padding:7px 20px;font-size:20px}
.v2ty .msg{margin:14px auto 0}

/* ---------- responsive ---------- */
@media(max-width:1000px){.v2side{width:310px}}
@media(max-width:900px){
  .v2links,.v2top .v2state,.v2top .v2cartbtn{display:none}
  .v2nav{display:flex}
  .v2cols{display:block}.v2side{display:none}
  .v2two{grid-template-columns:1fr}.v2sticky{position:static}
  .v2bar{display:flex}
  .v2 .page{padding-bottom:120px}
  .v2 .chips{top:60px}
  .v2 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:520px){
  .v2sec,.v2cats{margin-left:0;margin-right:0}
  .v2sec{margin-top:28px}
  .v2sh h2{font-size:22px}
  .v2 .pc .im{height:108px;font-size:48px}
  .v2 .pc .d{display:none}
  .v2cb .im{width:70px;height:70px;font-size:36px}
}
body.v2.noscroll .v2nav{display:none}

/* ================= Bố cục theo mockup ① (trang chủ) ================= */
.v2head{margin:16px 16px 0;border-radius:30px;padding:26px 26px 68px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(300px 170px at 92% 0,rgba(255,255,255,.2),transparent 70%),linear-gradient(165deg,var(--g1,#ef5a45),var(--cr,#c8301f) 60%,var(--cr-d,#a3200f))}
.v2head::before{content:"";position:absolute;right:18px;top:20px;width:150px;height:74px;opacity:.14;background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 14px);-webkit-mask:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);mask:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent)}
.v2head .brand{display:flex;align-items:center;gap:12px;position:relative}
.v2head .brand b{font-size:22px;letter-spacing:.22em;font-weight:800}
.v2head .st{font-size:12px;font-weight:800;background:rgba(255,255,255,.2);border-radius:999px;padding:4px 11px}
.v2head .st.open{background:rgba(24,169,87,.9)}
.v2head h1{font-size:24px;line-height:1.2;font-weight:900;margin-top:16px;position:relative;max-width:640px}
.v2head .slogan{margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.28);font-size:13.5px;opacity:.95;position:relative}
.v2head .chips2{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative}
.v2head .chips2 a,.v2head .chips2 span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:5px 12px;font-size:12.5px;color:#fff;text-decoration:none}
.v2body{background:#fff;border-radius:28px 28px 0 0;margin:-36px 16px 0;position:relative;padding:18px 16px 4px;border:1px solid var(--line);border-bottom:0}
.v2body .v2search{width:100%;border-radius:16px;min-height:50px}
.v2tabs{display:flex;gap:26px;margin:16px 6px 4px;font-weight:800;font-size:15px;overflow:hidden;white-space:nowrap}
.v2tabs a{color:var(--mute);text-decoration:none;position:relative;padding-bottom:8px}
.v2tabs a.on{color:var(--ink)}
.v2tabs a.on::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:4px;border-radius:3px;background:var(--cr)}
.v2body .v2cats{margin:14px 0 0}
.v2body .v2sec{margin:30px 0 0}

/* khối ưu đãi nền hồng, viền răng cưa */
.v2flash{margin:22px -16px 0;padding:36px 16px 26px;background:linear-gradient(var(--pink),var(--pink2));position:relative}
.v2flash::before{content:"";position:absolute;left:0;right:0;top:-1px;height:14px;background:radial-gradient(circle at 10px -1px,#fff 10px,transparent 10.5px) 0 0/20px 14px repeat-x}
.v2fh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.v2fh h3{font-size:25px;font-style:italic;font-weight:900;line-height:1.1}
.v2fh h3 span{display:block}
.v2fh .em{font-size:78px;filter:drop-shadow(0 10px 8px rgba(0,0,0,.2));margin-right:6px;flex:none}
.v2timer{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;background:rgba(255,255,255,.75);border-radius:999px;padding:5px 14px 5px 5px}
.v2timer i{width:24px;height:24px;border-radius:50%;background:var(--cr);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;flex:none}
.v2timer b{color:var(--cr)}
.v2hs{display:flex;gap:12px;margin-top:16px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.v2hs::-webkit-scrollbar{display:none}
.v2fc{flex:0 0 176px;background:#fff;border-radius:22px;border:1px solid #f4dcd7;overflow:hidden;cursor:pointer}
.v2fc .pic{height:116px;position:relative}
.v2fc .pic .im{width:100%;height:100%;font-size:56px}
.v2fc .pill{position:absolute;left:8px;top:8px;background:#fff;border-radius:10px;font-size:11.5px;font-weight:800;padding:4px 9px;box-shadow:0 3px 8px rgba(0,0,0,.12);z-index:2}
.v2fc .tx{padding:10px 12px 12px}
.v2fc h4{font-size:14px;line-height:1.25;min-height:35px}
.v2fc .pr{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.v2fc .pr b{font-size:15.5px;color:var(--cr)}
.v2flash .v2tix{margin-top:16px}

/* ================= Chi tiết món (modal) theo mockup ② ================= */
.v2 .ov.bot .mod{height:94vh;background:var(--cream)}
.v2 .mod .im.big{height:290px;font-size:120px}
.v2 .mod .x{left:14px;right:auto;top:14px;width:42px;height:42px;background:rgba(0,0,0,.4);color:#fff;font-size:16px;box-shadow:none}
.v2 .mod .mt{background:var(--cream);border-radius:26px 26px 0 0;margin-top:-26px;position:relative;padding:18px 18px 6px}
/* Hộp xác nhận / hộp không có ảnh đầu: không kéo đè lên phía trên (tránh cắt mất tiêu đề) */
.v2 .mod>.mt:first-child{margin-top:0;border-radius:28px 28px 0 0;padding:24px 22px 14px}
.v2 .mod>.mt:first-child .d{font-size:14px;line-height:1.5}
.v2 .mod .mt b{font-size:21px;line-height:1.25;font-weight:900}
.v2 .mod .mt .pr{color:var(--cr);font-size:24px;font-weight:900;margin:4px 0}
.v2 .mod .sc{background:var(--cream);padding:6px 18px 12px}
.v2 .mod .fld>label:first-child{font-size:15px;font-weight:900;color:var(--ink)}
.v2 .mod .ft{background:#fff;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 24px -16px rgba(0,0,0,.25)}
.v2 .mod .ft .stp{background:none;gap:10px;padding:0}
.v2 .mod .ft .stp s,.v2 .mod .ft .stp s.p{width:44px;height:44px;background:#fff;border:1.5px solid #ddd;color:var(--ink);box-shadow:none;font-size:22px}
.v2 .mod .ft .stp b{font-size:18px}
.v2 .mod .ft .btn.p{height:54px;font-size:16px;background:#0f0b0a}

/* Cuộn tới mục thì chừa chỗ cho header + dãy tab cố định, để thấy món từ đầu mục */
.v2 #list>section,.v2 #v2-order,.v2 #v2-promo{scroll-margin-top:136px}

/* ---------- mobile ---------- */
@media(max-width:900px){
  .v2 #list>section,.v2 #v2-order,.v2 #v2-promo{scroll-margin-top:76px}
  .v2top{display:none}
  .v2head{margin:0;border-radius:0 0 30px 30px;padding:22px 20px 70px}
  .v2body{margin:-40px 0 0;border-radius:28px 28px 0 0;border-left:0;border-right:0}
  .v2 .chips{top:0}
}
@media(max-width:520px){
  .v2head h1{font-size:21px}
  .v2fh h3{font-size:22px}
  .v2fh .em{font-size:64px}
}
.v2 .mod .mt .pr small{display:inline-block;margin-left:8px;font-size:12px;color:var(--mute);font-weight:600}

/* Cấu hình Web: logo, banner, chip liên hệ */
.v2brand i{overflow:hidden}.v2brand i img{width:100%;height:100%;object-fit:cover}
.v2head .bn{height:130px;border-radius:16px;background:#0002 center/cover no-repeat;margin-bottom:12px}
.v2head .chips2 a.ct{text-decoration:none}
.v2head .chips2 a.zl{display:inline-flex;align-items:center;gap:7px;padding-left:7px}
.v2hours{margin-bottom:4px;font-size:14px}
.v2hours .open{color:#1f9d4c;font-weight:700}.v2hours .shut{color:#b3261e;font-weight:700}
.v2hotline{font-weight:700;font-size:15px;color:var(--cr);text-decoration:none;white-space:nowrap;margin-right:4px}
@media(min-width:901px){.v2head .chips2 a.hl{display:none}} /* desktop: hotline đã ở thanh trên cùng */


/* ===== Ưu đãi tự động (offers.js): chỉ hiển thị, giá do máy chủ tính ===== */
.v2ofs{display:grid;gap:6px;margin:10px 0}
.v2of{display:flex;gap:9px;align-items:center;border:1.5px solid #2a9d57;background:#f1fbf4;border-radius:12px;padding:8px 11px;font-size:12.5px}
.v2of i{font-style:normal;font-size:18px}.v2of b{display:block;font-size:13px}.v2of small{display:block;color:#5b6b60}
.v2of.x{border-color:#ddd;background:#fafafa;color:#999}.v2of.x small{color:#aaa}
.v2of.hint{border:1px dashed #e8c564;background:#fff8e6;color:#7a5a00}.v2of.hint small{color:#9a7b20}
.tot .v2sv{color:#12803f}.tot .v2sv2{margin-top:6px;font-size:12.5px;color:#12803f;font-weight:700;text-align:right}
.v2saved{background:#e5f6ea;border:1px solid #bfe7cc;color:#12603a;border-radius:12px;padding:9px 12px;font-size:13px;margin:0 0 10px}
.v2ofchips{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.v2ofchips span{font-size:12px;font-weight:700;border-radius:999px;padding:5px 11px;background:#fdecea;color:#c8301f}
.v2ofchips span.soon{opacity:.6}
[data-item]{position:relative}
.v2bd{position:absolute;left:0;top:6px;z-index:2;background:#c8301f;color:#fff;font-size:10.5px;font-weight:800;border-radius:8px 0 8px 0;padding:2px 7px}
/* giá ưu đãi: giá cũ gạch ngang + dòng ưu đãi trong hộp chọn món */
.v2 .was{color:var(--mute);font-size:.72em;font-weight:600;text-decoration:line-through;margin-left:6px}
.v2 .saleline{margin-top:10px;padding:8px 12px;border-radius:12px;background:#eefaf1;border:1px solid #bfe3c8;color:#1f7a45;font-size:13px;font-weight:700}
/* logo tròn, không viền / nền / bóng; ảnh phủ kín không méo */
.v2brand i{width:44px;height:44px;border-radius:50%;background:none;box-shadow:none;border:0;overflow:hidden;flex:none}
.v2brand i img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* 3 thẻ "Hôm nay" nổi trên khung đỏ */
.v2today{margin:-54px 16px 0;position:relative;z-index:3;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
.v2today:empty{display:none}
.v2today:not(:empty)+.v2body{margin-top:16px}
.v2tc{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px 16px;box-shadow:0 8px 22px rgba(120,50,20,.12);text-decoration:none;color:inherit;min-width:0}
.v2tc small{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--mute)}
.v2tc>b{font-size:16.5px;line-height:1.25;font-weight:900;color:var(--ink,#241a14)}
.v2tc>span{font-size:12.5px;color:var(--mute)}
.v2tc>span b{color:var(--ink,#241a14)}
.v2tc .tr{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.v2tc .tg{font-size:11.5px;font-weight:800;border-radius:8px;padding:2px 8px;background:#fdf0ec;color:var(--cr)}
.v2tc .tg.ok{background:#e6f6ec;color:var(--green)}
.v2tc .pg{height:8px;border-radius:999px;background:#f1e6dc;overflow:hidden;margin:6px 0 2px}
.v2tc .pg i{display:block;height:100%;background:linear-gradient(90deg,#f4a300,#e8602c);border-radius:999px;transition:width .3s}
@media(max-width:760px){
  .v2today{margin:-52px 0 0;padding:0 16px 4px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .v2today::-webkit-scrollbar{display:none}
  .v2tc{scroll-snap-align:start}
}
/* tên danh mục luôn 1 dòng: ô rộng theo chữ, tự xuống hàng theo ô (không xuống dòng trong chữ) */
.v2cats{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px 14px}
.v2ic{white-space:nowrap;min-width:88px}

/* ============================================================
   v3 — menu dọc bên trái + thẻ món dạng hàng ngang + chi tiết món 2 cột.
   Chỉ đổi giao diện; mọi logic (giỏ, giá, đặt hàng) dùng chung với v2.
   ============================================================ */
.v3cols{display:grid;grid-template-columns:190px minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:6px}
.v3cols>.l{min-width:0}
.v3cols>.v2side{width:auto;top:76px}
.v3rail{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:3px;padding:2px 0 8px}
.v3rail::-webkit-scrollbar{display:none}
.v3rl{display:flex;align-items:center;gap:10px;position:relative;text-align:left;padding:10px 12px;border-radius:14px;font-size:14px;font-weight:700;line-height:1.25;color:#5b4d43;background:none;border:0;cursor:pointer}
.v3rl i{font-style:normal;font-size:20px;width:26px;text-align:center;flex:none}
.v3rl:hover{background:#f6efea}
.v3rl.on{background:var(--cr);color:#fff;box-shadow:0 6px 14px -6px rgba(200,48,31,.6)}
.v3rl em{font-style:normal;margin-left:auto;background:var(--gold);color:#2b1a00;font-size:11px;font-weight:900;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px;flex:none}

/* thẻ món: hàng ngang (ảnh trái, chữ phải) */
.v3 .v3cols .grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.v3 .v3cols .pc{flex-direction:row;align-items:stretch;border-radius:18px;padding:10px;gap:12px}
.v3 .v3cols .pc .im{width:96px;height:96px;flex:none;border-radius:14px;font-size:42px;overflow:hidden}
.v3 .v3cols .pc .im img{width:100%;height:100%;object-fit:cover}
.v3 .v3cols .pc .bd{padding:0;gap:2px;min-width:0}
.v3 .v3cols .pc b.n{font-size:14px;line-height:1.3}
.v3 .v3cols .pc .d{min-height:0;-webkit-line-clamp:1;font-size:11.5px}
.v3 .v3cols .pc .ft{margin-top:auto;align-items:center}
.v3 .v3cols .pc .pr{font-size:15px;white-space:nowrap}
.v3 .v3cols .pc .inc{top:8px;right:8px}
.v3 .v3cols .v2bd{top:10px;left:10px;border-radius:8px}
.v3 .v3cols .gh{scroll-margin-top:84px}

/* chi tiết món: desktop 2 cột (ảnh lớn trái, tuỳ chọn phải) */
@media(min-width:761px){
  .v3 .ov:not(.bot) .mod:has(.im.big){display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:min(860px,94vw);max-height:88vh;border-radius:26px}
  .v3 .mod:has(.im.big)>.im.big{grid-column:1;grid-row:1/4;height:auto;min-height:100%;font-size:150px;border-radius:0}
  .v3 .mod:has(.im.big)>.mt{grid-column:2;grid-row:1;margin-top:0;border-radius:0;padding:24px 24px 6px}
  .v3 .mod:has(.im.big)>.sc{grid-column:2;grid-row:2;padding:6px 24px 12px}
  .v3 .mod:has(.im.big)>.ft{grid-column:2;grid-row:3}
  .v3 .mod:has(.im.big)>.x{left:auto;right:14px;background:rgba(0,0,0,.45)}
}

/* điện thoại: danh mục dọc hẹp, danh sách 1 cột */
@media(max-width:900px){
  .v3cols{grid-template-columns:86px minmax(0,1fr);gap:10px}
  .v3cols>.v2side{display:none}
  .v3rail{top:68px;max-height:calc(100vh - 150px);gap:2px;margin-left:-6px}
  .v3rl{flex-direction:column;gap:3px;text-align:center;padding:10px 4px;font-size:11.5px;border-radius:12px}
  .v3rl i{font-size:24px;width:auto}
  .v3rl em{position:absolute;top:4px;right:6px;margin:0;min-width:17px;height:17px;font-size:10px}
  .v3rl.on{box-shadow:none}
  .v3 .v3cols .grid{grid-template-columns:1fr;gap:10px}
  .v3 .v3cols .pc .im{width:84px;height:84px;font-size:38px}
  .v3 .v3cols .pc .d{display:none}
  .v3 .v3cols .gh{scroll-margin-top:70px;font-size:16px}
  .v3 .v2sec{margin-left:0;margin-right:0}
}


/* ============ v3 · bố cục 2: Thực đơn lên đầu, tìm kiếm thu gọn, tab Menu ============ */
.v3 .v2body .v2sec{margin-top:0}
.v3sh{display:flex;align-items:flex-start;gap:10px}
.v3sh>div{flex:1;min-width:0}
.v3sbtn{width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--line);font-size:18px;cursor:pointer;flex:none}
.v3sbtn[aria-expanded="true"]{background:var(--cr);border-color:var(--cr)}
.v3sq{margin:4px 0 8px}
.v3sq[hidden]{display:none}
.v3find{margin:34px 0 0}
.v3find h3{font-size:16px;font-weight:800;margin-bottom:8px}
.v3find .v2search{width:100%;border-radius:16px;min-height:50px}
.v3 .v2flash{margin-top:30px}
.v3look{margin-top:22px}
.v3 .v2sec{scroll-margin-top:70px}
@media(min-width:901px){.v3look{display:none}}
/* thanh điều hướng dưới: 5 mục, Menu là nút tròn nổi giữa */
.v3 .v2nt{min-width:48px}
.v3 .v2nt.v3menu{position:relative;color:var(--cr);font-weight:800}
.v3 .v2nt.v3menu i{width:42px;height:42px;margin:-24px auto 1px;border-radius:50%;background:var(--cr);color:#fff;display:grid;place-items:center;font-size:20px;filter:none;border:3px solid #fff;box-shadow:0 8px 16px -4px rgba(200,48,31,.6)}
.v3 .v2nt.v3menu.on{color:var(--cr)}

.v3 .v2nt{font-size:10px;min-width:44px;white-space:nowrap}
.v3 .v2pill{padding:9px 2px}

/* nút đóng (X) ở chi tiết món: luôn nằm bên phải */
.v3 .mod .x{left:auto;right:14px}

/* ============ v3 · giỏ hàng dạng bottom sheet (mobile): cân đối, nút đặt hàng ghim đáy ============ */
.v3 .ov.bot .mod:has(>.v2cart){height:auto;max-height:88vh;background:#fff;border-radius:26px 26px 0 0}
.v3 .mod>.v2cart{border:0;border-radius:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;min-height:0;position:relative}
.v3 .mod>.v2cart .v2ch{position:sticky;top:0;z-index:2;background:#fff;padding:20px 18px 12px;border-bottom:1px solid var(--line)}
.v3 .mod>.v2cart .v2ch::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:3px;background:#ddd2ca}
.v3 .mod>.v2cart .v2ch a{font-weight:600;color:var(--mute);text-decoration:none;font-size:13px;padding:6px 4px}
.v3 .mod>.v2cart .v2x{width:34px;height:34px}
.v3 .mod>.v2cart .ship,.v3 .mod>.v2cart .v2ofs{margin:12px 18px 0}
.v3 .mod>.v2cart .v2ofs:empty{display:none}
.v3 .mod>.v2cart .v2of{border-radius:14px;padding:10px 12px}
.v3 .mod>.v2cart .cl-line{padding:14px 18px;gap:12px;align-items:flex-start;border-bottom:1px dashed var(--line)}
.v3 .mod>.v2cart .cl-line .th{width:58px;height:58px;border-radius:14px}
.v3 .mod>.v2cart .cl-line .n b{font-size:14px}
.v3 .mod>.v2cart .cl-line .a{font-size:14px;font-weight:800;padding-top:1px}
.v3 .mod>.v2cart .cl-line .stp{margin-top:8px!important;padding:2px;background:#f3eeec}
.v3 .mod>.v2cart .cl-line .stp s{width:28px;height:28px}
.v3 .mod>.v2cart .cl-line .stp b{min-width:30px}
.v3 .mod>.v2cart .cl-line .rm{margin:0 8px 0 4px;font-size:12px;font-weight:700;color:var(--mute);background:none;border:0;cursor:pointer}
.v3 .mod>.v2cart .tot{padding:14px 18px 8px;font-size:13.5px}
.v3 .mod>.v2cart .tot .g{font-size:16px;padding-top:12px;margin-top:10px}
.v3 .mod>.v2cart .v2go{position:sticky;bottom:0;margin:8px 18px calc(16px + env(safe-area-inset-bottom,0px));width:calc(100% - 36px);height:52px;flex:none;box-shadow:0 -10px 14px -6px #fff}
.v3 .mod>.v2cart .v2empty{padding:44px 18px 56px}

/* ---- v3: nhãn bao bì + nhãn "n trong giỏ" không đè chữ ---- */
.v3 .v3cols .pc .pr .bb-tag.v3pk{white-space:normal;font-size:10.5px;line-height:1.3;font-weight:600;margin-top:1px}
/* "n trong giỏ": đặt đè lên góc dưới của ảnh (ảnh 96px / 84px trên mobile), không còn chồng lên tên món */
.v3 .v3cols .pc .inc{top:82px;left:16px;right:auto;bottom:auto;font-size:10px;padding:1px 8px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
@media(max-width:900px){.v3 .v3cols .pc .inc{top:70px}}

/* ============ v3 · hộp chi tiết món mới ============ */
.v3 .mod:has(>.dm){background:var(--cream);overflow:hidden}
.v3 .mod:has(>.dm)>.x{z-index:5;right:14px;left:auto;top:14px;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.dm{display:grid;grid-template-columns:300px minmax(0,1fr);flex:1;min-height:0}
.dm-l{background:#fff;padding:20px;display:flex;flex-direction:column;border-right:1px solid var(--line);overflow:auto}
.dm-l .dm-pic{width:100%;aspect-ratio:1/1;height:auto;border-radius:18px;overflow:hidden;position:relative;display:grid;place-items:center;font-size:90px;flex:none;box-shadow:0 10px 24px -12px rgba(120,60,10,.5)}
.dm-l .dm-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dm-info h2{font-size:21px;line-height:1.25;font-weight:900;margin:14px 0 2px}
.dm-pr{color:var(--cr);font-weight:900;font-size:20px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.dm-pr small{font-size:12px;color:var(--mute);font-weight:500}
.dm-pr .was{color:var(--mute);font-size:13px;font-weight:500}
.dm-d{font-size:12.5px;color:var(--mute);margin-top:6px;line-height:1.45}
.dm-pk{margin-top:12px;background:var(--gold-l,#fff6dd);border-radius:10px;padding:6px 10px;font-size:11.5px;color:#7a5a00;font-weight:600}
.dm-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.dm-body{flex:1;min-height:0;overflow-y:auto;padding:20px 22px 8px}
.dm-g{margin-bottom:16px}
.dm-g h3{font-size:14px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dm-g h3 small{font-size:11px;font-weight:700;border-radius:999px;padding:1px 9px;background:#f0e8df;color:var(--mute)}
.dm-g h3 small.req{background:#fdeceA;background:var(--cr-l);color:var(--cr)}
.dm-opts,.dm-tp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dmo{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600;cursor:pointer}
.dmo b{font-size:12.5px;color:var(--mute);font-weight:700;white-space:nowrap}
.dmo b .was{font-weight:500;font-size:11px;margin-left:3px}
.dmo.on{border-color:var(--cr);background:var(--cr-l)}.dmo.on b{color:var(--cr)}
.dmt{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px;cursor:pointer}
.dmt .nm{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.25}
.dmt .nm small{display:block;color:var(--mute);font-weight:500;font-size:11.5px}
.dmt.on{border-color:var(--cr);background:var(--cr-l)}
.dm-add{flex:none;width:28px;height:28px;border-radius:50%;background:var(--cr);color:#fff;font-size:18px;font-weight:700;line-height:1;display:grid;place-items:center;border:0;cursor:pointer;padding:0}
.dm-stp{flex:none;display:inline-flex;align-items:center;gap:6px}
.dm-stp s{width:26px;height:26px;border-radius:50%;background:#fff;border:1.5px solid #ddd0c5;display:grid;place-items:center;text-decoration:none;font-weight:800;color:var(--ink);font-size:15px;cursor:pointer}
.dm-stp s.p{background:var(--cr);border-color:var(--cr);color:#fff}
.dm-stp b{min-width:14px;text-align:center;font-size:13px}
.dm-rd,.dm-ck{flex:none;width:20px;height:20px;border:2px solid #d7cbbf;background:#fff}
.dm-rd{border-radius:50%}.dm-ck{border-radius:6px}
.dmt.on .dm-rd{border:6px solid var(--cr)}.dmt.on .dm-ck{background:var(--cr);border-color:var(--cr)}
.dm-foot{background:#fff;border-top:1px solid var(--line);padding:10px 22px 14px}
.dm-sm{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--mute);margin-bottom:8px}
.dm-sm span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-sm b{color:var(--ink)}.dm-sm b.ed{color:#14803f}
.dm-row{display:flex;gap:12px;align-items:center}
.dm-row .stp{background:#f3eeec;padding:3px}
.dm-row .stp s{width:34px;height:34px;background:#fff;border:0;color:var(--ink);box-shadow:none}
.dm-row .stp s.p{background:#fff;color:var(--ink)}
.dm-row .stp b{min-width:28px;font-size:15px}
.dm-go{display:flex!important;justify-content:space-between;gap:14px;padding:0 18px;height:46px;border-radius:14px!important}
.dm-rm{display:block;margin:8px auto 0;background:none;border:0;color:var(--cr);font-weight:700;font-size:12.5px;cursor:pointer}

@media(min-width:761px){
  .v3 .ov:not(.bot) .mod:has(>.dm){width:min(840px,94vw);height:min(580px,90vh);border-radius:24px}
}
/* điện thoại: ảnh làm đầu trang, nội dung cuộn một cột, thanh chân dính đáy */
@media(max-width:760px){
  .v3 .ov.bot .mod:has(>.dm){height:92vh}
  .dm{display:block;overflow-y:auto;overscroll-behavior:contain;position:relative}
  .dm-l{padding:0;border:0;background:var(--cream);overflow:visible}
  .dm-l .dm-pic{aspect-ratio:auto;height:210px;border-radius:0;box-shadow:none;font-size:90px}
  .dm-info{margin-top:-22px;background:var(--cream);border-radius:22px 22px 0 0;position:relative;padding:14px 16px 4px}
  .dm-info h2{margin-top:0}
  .dm-main{display:block}
  .dm-body{overflow:visible;padding:8px 16px}
  .dm-foot{position:sticky;bottom:0;z-index:4;padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px))}
  .dm-opts{gap:8px}
}

/* ============ v3 · thư viện ảnh trong chi tiết món ============ */
.dm-gal{position:relative;width:100%;aspect-ratio:1/1;border-radius:18px;overflow:hidden;flex:none;background:linear-gradient(135deg,#fdeacf,#f7c873);box-shadow:0 10px 24px -12px rgba(120,60,10,.5)}
.gal-emo{position:absolute;inset:0;display:grid;place-items:center;font-size:90px}
.gal-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gal-track::-webkit-scrollbar{display:none}
.gal-s{flex:0 0 100%;height:100%;scroll-snap-align:center;cursor:zoom-in;background:#fff}
.gal-s img{width:100%;height:100%;object-fit:cover;display:block}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:0;box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px;opacity:0;transition:opacity .15s;z-index:2}
.gal-nav.prev{left:8px}.gal-nav.next{right:8px}
.dm-gal:hover .gal-nav{opacity:1}
.gal-count{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 9px;z-index:2}
.gal-dots{position:absolute;left:0;right:0;bottom:10px;display:none;justify-content:center;gap:5px;z-index:2}
.gal-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.65);box-shadow:0 0 2px rgba(0,0,0,.4)}
.gal-dots i.on{width:18px;background:#fff}
.gal-zoom{position:absolute;right:10px;bottom:10px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:14px;z-index:2;pointer-events:none}
.gal-th{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;flex:none}
.gal-th::-webkit-scrollbar{display:none}
.gal-th button{flex:none;width:54px;height:54px;border-radius:12px;overflow:hidden;border:2px solid transparent;background:#f3eeec;padding:0;cursor:pointer;opacity:.7}
.gal-th button.on{border-color:var(--cr);opacity:1}
.gal-th img{width:100%;height:100%;object-fit:cover;display:block}
/* xem toàn màn hình */
.dm-lb{position:fixed;inset:0;z-index:300;background:rgba(10,6,4,.92);display:flex;align-items:center;justify-content:center}
.dm-lb img{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:10px}
.lb-x{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;border:0;font-size:16px;cursor:pointer}
.lb-n{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;border:0;font-size:26px;cursor:pointer;padding:0 0 4px}
.lb-n.prev{left:14px}.lb-n.next{right:14px}
.lb-c{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-size:13px;font-weight:700}
@media(max-width:760px){
  .dm-gal{aspect-ratio:auto;height:230px;border-radius:0;box-shadow:none}
  .gal-nav{display:none}
  .gal-dots{display:flex;bottom:34px}
  .gal-zoom{bottom:34px}
  .gal-th{display:none}
  .gal-count{top:14px;left:14px}
}

/* ============ v3 · trang chi tiết món riêng (web-mobile): ảnh VUÔNG hiển thị đầy đủ ============ */
.v2 .page.dpage{padding-bottom:0;background:var(--cream);min-height:100vh;max-width:640px;margin:0 auto}
.dpage .dm{display:block;overflow:visible}
.dpage .dm-l{position:relative;padding:0;border:0;background:#fff;overflow:visible}
.dpage .dm-gal{aspect-ratio:1/1;height:auto;border-radius:0;box-shadow:none;background:#fff}
.dpage .gal-s{background:#fff}
.dpage .gal-s img{object-fit:contain;background:#fff}   /* contain: thấy trọn món, không bị cắt */
.dpage .gal-emo{font-size:120px}
.dpage .gal-nav{display:none}
.dpage .gal-dots{display:flex;bottom:12px}
.dpage .gal-zoom{bottom:12px}
.dpage .gal-th{display:flex;padding:10px 16px 0;margin:0;background:#fff}
.dpage .dm-info{margin:0;border-radius:0;background:#fff;padding:14px 16px 16px;border-bottom:1px solid var(--line)}
.dpage .dm-info h2{margin:0 0 2px}
.dpage .dm-main{display:block}
.dpage .dm-body{overflow:visible;padding:14px 16px 8px}
.dpage .dm-foot{position:sticky;bottom:0;z-index:6;padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 16px -8px rgba(0,0,0,.18)}
.dp-back{position:absolute;top:12px;left:12px;z-index:4;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);border:0;box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:26px;line-height:1;padding:0 0 4px;cursor:pointer;display:grid;place-items:center}
.dpage .gal-count{left:auto;right:12px;top:16px}

/* nút quay lại luôn nằm cố định góc trái trên cùng khi cuộn trang chi tiết */
.dpage .dp-back{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,calc(50% - 308px));z-index:50}

/* ============ v3 · hiệu ứng ném món vào giỏ / rung nút ============ */
.fx-fly{position:fixed;z-index:9999;border-radius:50%;pointer-events:none;display:grid;place-items:center;overflow:hidden;font-size:24px;background:#fff center/cover no-repeat;border:2px solid var(--cr);box-shadow:0 8px 18px rgba(200,48,31,.45);will-change:transform,opacity}
.fx-bump{animation:fxBump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes fxBump{0%{transform:scale(1)}35%{transform:scale(1.3) rotate(-8deg)}70%{transform:scale(.93) rotate(4deg)}100%{transform:scale(1)}}
.fx-pop{animation:fxPop .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes fxPop{0%{transform:scale(1)}40%{transform:scale(1.6)}100%{transform:scale(1)}}
.fx-shake{animation:fxShake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes fxShake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-7px) rotate(-1.2deg)}30%{transform:translateX(6px) rotate(1deg)}45%{transform:translateX(-5px) rotate(-.8deg)}60%{transform:translateX(4px) rotate(.6deg)}75%{transform:translateX(-2px)}}
@media(prefers-reduced-motion:reduce){.fx-bump,.fx-pop,.fx-shake{animation:none}}
/* nút giỏ trên trang chi tiết (đích bay của ảnh, góc phải) */
.dpage .dp-cart{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,calc(50% - 308px));z-index:50;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);border:0;box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:19px;display:grid;place-items:center;cursor:pointer;padding:0}
.dp-cart em{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px;background:var(--cr);color:#fff;font-style:normal;font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;padding:0 3px}
.dp-cart em[hidden]{display:none}
.dpage .gal-count{right:64px}

/* ============ v3 · icon danh mục = ảnh thật của món (cấu hình ở fnb-admin) ============ */
.v3pic{position:relative;flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#fdeacf,#f7c873);box-shadow:0 0 0 1px var(--line);transition:box-shadow .15s}
.v3pic i{font-style:normal;font-size:19px;width:auto}
.v3pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v3rl.on .v3pic{box-shadow:0 0 0 2.5px #fff}
@media(max-width:900px){
  .v3pic{width:46px;height:46px}
  .v3pic i{font-size:22px}
}


/* ============ v3 · trang giỏ hàng riêng (/cart) ============ */
.v2 .page.cartpage{padding-bottom:24px;max-width:640px;margin:0 auto;min-height:100vh;background:var(--cream)}
.cp-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(250,247,245,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);font-size:17px}
.cp-back{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:26px;line-height:1;padding:0 0 4px;cursor:pointer;display:grid;place-items:center}
.cp-body{padding:14px 14px 0}
.cartpage .v2cart{box-shadow:var(--sh2)}
.cartpage .v2ch{padding:14px 18px}
.cartpage .ship,.cartpage .v2ofs{margin:12px 16px 0}
.cartpage .v2ofs:empty{display:none}
.cartpage .cl-line{padding:14px 18px;gap:12px;align-items:flex-start;border-bottom:1px dashed var(--line)}
.cartpage .cl-line .th{width:60px;height:60px;border-radius:14px}
.cartpage .cl-line .n b{font-size:14.5px}
.cartpage .cl-line .a{font-size:14px;font-weight:800}
.cartpage .cl-line .stp{margin-top:8px!important}
.cartpage .cl-line .rm{margin:0 8px 0 4px;font-size:12px;font-weight:700;color:var(--mute);background:none;border:0;cursor:pointer}
.cartpage .tot{padding:14px 18px 8px;font-size:13.5px}
.cartpage .v2go{position:sticky;bottom:12px;margin:8px 16px 16px;width:calc(100% - 32px);box-shadow:0 10px 22px -8px rgba(0,0,0,.45)}
.cartpage .v2empty{padding:56px 18px 40px}
.cartpage .v2go.cp-empty{position:static;width:auto;padding:0 28px;margin:14px 0 0;display:inline-flex}

/* ---- giỏ hàng: gọn hơn, tiết kiệm diện tích ---- */
.cp-top{padding:8px 12px;font-size:16px}
.cp-back{width:36px;height:36px;font-size:24px}
.cp-top b{flex:1}
.cp-clear{background:none;border:0;color:var(--cr);font-weight:700;font-size:13px;cursor:pointer;padding:8px 4px}
.cp-clear[hidden]{display:none}
.cp-body{padding:10px 12px 0}
.cartpage .ship,.cartpage .v2ofs{margin:10px 14px 0}
.cartpage .v2of,.cartpage .ship{padding:8px 12px;font-size:12.5px}
.cartpage .cl-line{padding:10px 14px;gap:10px}
.cartpage .cl-line .th{width:48px;height:48px;border-radius:12px}
.cartpage .cl-line .n b{font-size:14px}
.cartpage .cl-line .stp{margin-top:6px!important}
.cartpage .tot{padding:10px 14px 4px;font-size:13px}
.cartpage .tot .g{font-size:16px;margin-top:6px;padding-top:8px}
.cartpage .v2go{height:50px;margin:6px 14px 14px;width:calc(100% - 28px)}

/* ---- giỏ hàng: nhóm món theo danh mục ---- */
.cp-grp{display:flex;align-items:baseline;gap:8px;padding:8px 14px 6px;background:#faf3ee;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cp-grp b{flex:1;font-size:12.5px;font-weight:800;color:var(--cr-d,#a3200f);text-transform:uppercase;letter-spacing:.03em}
.cp-grp small{font-size:11.5px;color:var(--mute);font-weight:600;white-space:nowrap}
.cartpage .cp-grp:first-of-type{border-top:0}

/* ---- giỏ hàng: ghi chú cho toàn đơn ---- */
.cp-note{padding:10px 14px 4px;border-top:1px solid var(--line)}
.cp-note label{display:block;font-size:12.5px;font-weight:800;margin-bottom:6px}
.cp-note .in{width:100%;resize:vertical;min-height:56px;font-size:14px;border-radius:12px}

/* ================================================================
   v3 · THU GỌN banner + ưu đãi (theo docs/order-ui-v3-home3.html)
   ================================================================ */
/* --- banner: thẻ ngang ~96px --- */
.v3head{margin:8px 12px 0;border-radius:20px;padding:12px 14px;color:#fff;position:relative;overflow:hidden;display:flex;gap:12px;align-items:center;
  background:linear-gradient(135deg,var(--g1,#ef5a45),var(--cr) 55%,var(--cr-d))}
.v3head.hasbn{background:linear-gradient(135deg,rgba(0,0,0,.45),rgba(0,0,0,.15)),var(--bn) center/cover no-repeat,linear-gradient(135deg,var(--g1,#ef5a45),var(--cr))}
.v3head::after{content:"";position:absolute;right:-20px;top:-30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,122,.35),transparent 70%);pointer-events:none}
.v3head .t{flex:1;min-width:0;position:relative;z-index:1}
.v3head .nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v3head .nm b{font-size:16px;font-weight:900;letter-spacing:.08em}
.v3head .st{font-size:10.5px;font-weight:800;border-radius:999px;padding:0 9px;background:rgba(255,255,255,.22)}
.v3head .st.open{background:rgba(24,169,87,.95)}
.v3head p{font-size:12px;opacity:.95;margin:2px 0 8px;line-height:1.35}
.v3head .chips2{display:flex;gap:6px;flex-wrap:wrap}
.v3head .chips2 a{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:600;color:#fff;text-decoration:none}
.v3head .chips2 a.zl{padding-left:4px}.v3head .chips2 .zalo-ic{width:16px;height:16px}
.v3head .pic{position:relative;z-index:1;font-size:44px;line-height:1;transform:rotate(-8deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));flex:none;width:54px;height:54px;display:grid;place-items:center}
.v3head .pic img{width:100%;height:100%;object-fit:cover;border-radius:14px;transform:rotate(0)}
@media(min-width:901px){.v3head{margin:16px 16px 0;max-width:none;padding:16px 20px}.v3head .pic{font-size:54px;width:68px;height:68px}.v3head .nm b{font-size:19px}}

/* --- 3 thẻ "Hôm nay" → một hàng chip --- */
.v2today{margin:8px 12px 0;padding:0 0 2px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;grid-auto-flow:unset;grid-template-columns:none;scroll-snap-type:none}
.v2today::-webkit-scrollbar{display:none}
.v2today:not(:empty)+.v2body{margin-top:10px}
/* Dải "Hôm nay" trống (display:none) thì khung Menu không được kéo lên đè banner (margin âm cũ -36/-40px chỉ dành cho kiểu banner cũ). */
.v3 .v2body{margin-top:12px}
.v3 .v2today:not(:empty)+.v2body{margin-top:10px}
.v2tc{flex:none;min-width:150px;max-width:260px;padding:6px 11px;border-radius:14px;gap:1px;box-shadow:none;border:1px solid var(--line)}
.v2tc small,.v2tc .tr{display:none}
.v2tc>b{font-size:12px;font-weight:800;line-height:1.3}
.v2tc>span{font-size:10.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.v2tc .pg{height:5px;margin:3px 0 1px}
@media(min-width:901px){.v2today{margin:10px 16px 0;overflow:visible}.v2tc{flex:1;max-width:none}}
@media(max-width:900px){.v2today{padding:0 0 2px;grid-auto-columns:unset}}

/* --- Thực đơn: tiêu đề gọn + nhãn miễn ship --- */
.v3sh{align-items:center}
.v3sh .v3tt{flex:1;min-width:0}
.v3sh h2{font-size:21px}
.v3sh p{font-size:12px;margin-top:0}
@media(max-width:900px){.v3sh p{display:none}}
.v3pill{flex:none;background:#fff3d9;color:#8a5a00;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:800;white-space:nowrap;line-height:1.2}
.v3pill.ok{background:#e4f6ea;color:#14693a}
.v3pill[hidden]{display:none}
@media(max-width:380px){.v3pill{padding:5px 9px;font-size:11.5px}}

/* --- Khối "Ưu đãi hôm nay" (cuối trang): một dải ngang + gợi ý nhỏ --- */
.v2flash{margin:18px -16px 0;padding:14px 16px 16px}
.v2flash::before{display:none}
.v3ph h3{font-size:16px;font-weight:900;font-style:normal;margin-bottom:8px}
.v2flash .v2ofchips{margin:0 0 8px}
.v3strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.v3strip::-webkit-scrollbar{display:none}
.v3pm{flex:none;display:flex;gap:9px;align-items:center;background:#fff;border-radius:14px;padding:8px 10px;width:230px;box-shadow:0 3px 8px -5px rgba(0,0,0,.35)}
.v3pm i{width:36px;height:36px;border-radius:10px;background:linear-gradient(160deg,#e0604a,var(--cr-d));color:#fff;display:grid;place-items:center;font-size:18px;font-style:normal;flex:none}
.v3pm.g i{background:linear-gradient(160deg,#35b36c,#14693a)}
.v3pm b{display:block;font-size:12.5px;line-height:1.3;font-weight:800}
.v3pm span{display:block;font-size:11px;color:var(--mute);line-height:1.3}
.v3pm b b,.v3ship b{color:var(--cr)}
.v3sug{font-size:12px;font-weight:700;color:var(--mute);margin:10px 0 6px}
.v2flash .v2hs{margin-top:0;gap:8px}
.v2fc{flex:0 0 136px;border-radius:14px;box-shadow:0 3px 8px -5px rgba(0,0,0,.35);border:0}
.v2fc .pic{height:66px}
.v2fc .pic .im{font-size:30px}
.v2fc .pill{display:none}
.v2fc .tx{padding:5px 8px 8px}
.v2fc h4{font-size:11.5px;min-height:29px;overflow:hidden}
.v2fc .pr{margin-top:3px}.v2fc .pr b{font-size:12.5px}
.v2fc .add{width:24px;height:24px;font-size:15px}
.v3look{margin-top:14px}

.v3pm b b,.v3ship b{display:inline}
.v3pm .v3ship{font-size:12.5px}

/* ============ v3 · popup chi tiết ưu đãi ============ */
[data-offer],[data-promo]{cursor:pointer}
.v3pm .go{margin-left:auto;font-style:normal;color:var(--mute);font-size:20px;line-height:1}
.v3flash{animation:v3flash 1.4s ease-out}
@keyframes v3flash{0%,60%{box-shadow:0 0 0 3px var(--gold),0 8px 20px -8px rgba(245,176,46,.8)}100%{box-shadow:none}}
.v3 .mod:has(>.pp){background:#fff;overflow:hidden}
.pp{display:flex;flex-direction:column;min-height:0;max-height:inherit;position:relative}
.pp-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:#f3eeec;font-size:14px;z-index:3;border:0;cursor:pointer}
.pp-scroll{overflow-y:auto;overscroll-behavior:contain;padding:0 18px 8px;min-height:0;flex:1}
.pp-top{display:flex;gap:12px;align-items:center;padding:20px 38px 12px 0}
.pp-ic{width:52px;height:52px;border-radius:16px;background:linear-gradient(160deg,#e0604a,var(--cr-d,#a3200f));display:grid;place-items:center;font-size:26px;flex:none;color:#fff}
.pp-ic.g{background:linear-gradient(160deg,#35b36c,#14693a)}.pp-ic.y{background:linear-gradient(160deg,#ffc94d,#f59a00)}
.pp-top h2{font-size:18px;font-weight:900;line-height:1.25}
.pp-st{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:1px 10px;margin-top:3px}
.pp-st.on{background:#e4f6ea;color:#14693a}.pp-st.soon{background:#fff3d9;color:#8a5a00}
.pp-lead{font-size:13.5px;color:#4a3f3a;margin-bottom:12px;line-height:1.5}
.pp-box{border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:10px;background:#fff}
.pp-box h4{font-size:11.5px;font-weight:800;color:var(--mute);letter-spacing:.04em;margin-bottom:6px;text-transform:uppercase}
.pp-kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0}.pp-kv span{color:var(--mute)}.pp-kv b{font-weight:700;text-align:right}
.pp-prog{height:8px;background:#eee;border-radius:5px;overflow:hidden;margin:6px 0 4px}.pp-prog i{display:block;height:100%;background:linear-gradient(90deg,#f4a300,#e8602c);border-radius:5px;transition:width .3s}
.pp-msg{font-size:12.5px;color:#14693a;font-weight:700}
.pp-tier{display:flex;gap:8px;align-items:center;font-size:13px;padding:4px 0}
.pp-tier i{width:20px;height:20px;border-radius:50%;background:#e8dfd5;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;flex:none}
.pp-tier.ok i{background:#18a957}
.pp-items{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pp-items::-webkit-scrollbar{display:none}
.pp-it{flex:none;width:104px;background:var(--cream);border-radius:12px;overflow:hidden;font-size:11.5px;line-height:1.25;cursor:pointer}
.pp-it .p{height:62px;position:relative;display:grid;place-items:center;font-size:26px;background:#fdeacf}
.pp-it .p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-it>div:last-child{padding:4px 7px 7px;font-weight:600}
.pp-it small{display:block;color:var(--cr);font-weight:800}
.pp-it s{color:var(--mute);font-weight:400;font-size:10.5px;margin-right:4px}
.pp-more{font-size:11.5px;color:var(--mute);margin-top:6px}
.pp-notes{font-size:12px;color:var(--mute);line-height:1.45;margin:2px 0 6px 16px}
.pp-foot{display:flex;gap:10px;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff;flex:none}
.pp-btn{flex:1;height:46px;border-radius:14px;font-weight:800;font-size:14.5px;cursor:pointer;border:0}
.pp-btn.p{background:#0f0b0a;color:#fff}.pp-btn.o{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
@media(min-width:761px){
  .v3 .ov:not(.bot) .mod:has(>.pp){width:min(520px,94vw);max-height:86vh;border-radius:22px}
  .pp-scroll{padding:0 22px 8px}.pp-foot{padding:12px 22px 18px}
}
@media(max-width:760px){
  .v3 .ov.bot .mod:has(>.pp){height:auto;max-height:86vh;border-radius:24px 24px 0 0}
}

.v3pill{max-width:62vw;overflow:hidden;text-overflow:ellipsis}
.v3pm .v3shipname{display:block;font-size:11px;color:var(--mute);font-weight:600}

/* ============ v3 · trang Đặt nhóm (/group/new) ============ */
.v2 .page.gnpage{padding-bottom:24px;max-width:640px;margin:0 auto;min-height:100vh;background:var(--cream)}
.gn-intro{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 18px 14px;box-shadow:var(--sh2)}
.gn-ic{width:52px;height:52px;border-radius:16px;background:linear-gradient(160deg,#ef5a45,var(--cr));display:grid;place-items:center;font-size:26px;margin-bottom:8px}
.gn-intro h1{font-size:19px;font-weight:900;line-height:1.25}
.gn-intro p{font-size:13px;color:var(--mute);margin-top:4px}
.gn-steps{list-style:none;margin-top:12px;display:grid;gap:8px}
.gn-steps li{display:flex;gap:10px;align-items:center;font-size:13.5px;font-weight:600}
.gn-steps b{width:24px;height:24px;border-radius:50%;background:var(--cr-l);color:var(--cr);display:grid;place-items:center;font-size:12px;flex:none}
.gn-form{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px 18px;box-shadow:var(--sh2)}
.gn-form .in{width:100%}
.gn-form .er{min-height:0;color:#c0392b;font-size:12.5px;margin-top:6px}
.gn-go{width:100%;margin:14px 0 0;height:50px}

/* ---- Đặt nhóm: tạo xong → mã QR ---- */
.gn-done{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 18px 18px;box-shadow:var(--sh2);text-align:center}
.gn-ok{width:56px;height:56px;border-radius:50%;background:#e4f6ea;color:#14803f;display:grid;place-items:center;font-size:28px;font-weight:900;margin:0 auto 8px}
.gn-done h1{font-size:19px;font-weight:900;line-height:1.25}
.gn-done p{font-size:13px;color:var(--mute);margin-top:4px}
.gn-qr{width:228px;height:228px;margin:14px auto 12px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:16px;display:grid;place-items:center}
.gn-qr canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.gn-qrwait{font-size:12px;color:var(--mute);padding:10px}
.gn-link{display:flex;gap:8px;margin-top:4px}
.gn-link .in{flex:1;min-width:0;font-size:12.5px}
.gn-copy{flex:none;background:var(--cr);color:#fff;border-radius:12px;padding:0 14px;font-weight:800;font-size:13px;border:0;cursor:pointer}
.gn-acts{display:flex;gap:8px;margin-top:8px}
.gn-sec{flex:1;height:42px;border-radius:12px;background:#fff;border:1.5px solid var(--line);font-weight:700;font-size:13px;cursor:pointer}
.gn-sec[hidden]{display:none}
.gn-done .gn-go{width:100%;margin:14px 0 0}

/* ---- nút chia sẻ (icon) ---- */
.dpage .dp-share{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(max(12px,calc(50% - 308px)) + 48px);z-index:50;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);border:0;box-shadow:0 2px 8px rgba(0,0,0,.25);display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ink)}
.dm-share{position:absolute;top:14px;right:64px;z-index:5;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);border:0;box-shadow:0 2px 8px rgba(0,0,0,.15);display:grid;place-items:center;cursor:pointer;padding:0}
@media(min-width:761px){.v3 .mod:has(>.dm)>.x{right:14px}}
.gn-shareic{flex:none;width:42px;border-radius:12px;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink);cursor:pointer;padding:0}

/* ============ v3 · ghim hàng Menu khi cuộn + nhãn dài xuống hàng ============ */
.v3{--v3pin:0px}
@media(min-width:901px){.v3{--v3pin:60px}}
.v3pin{position:sticky;top:var(--v3pin,0px);z-index:26;background:#fff;margin:0 -16px;padding:0 16px 6px;border-bottom:1px solid var(--line)}
.v3pin .v3sq{margin:0 0 6px}
.v3rail{top:calc(var(--v3pin,0px) + var(--v3pinh,58px) + 8px);max-height:calc(100vh - var(--v3pin,0px) - var(--v3pinh,58px) - 96px)}
.v3cols>.v2side{top:calc(var(--v3pin,0px) + var(--v3pinh,58px) + 10px)}
.v3 section[id^="menu-"]{scroll-margin-top:calc(var(--v3pin,0px) + var(--v3pinh,58px) + 10px)}
@media(max-width:900px){.v3rail{top:calc(var(--v3pin,0px) + var(--v3pinh,58px) + 8px);max-height:calc(100vh - var(--v3pin,0px) - var(--v3pinh,58px) - 150px)}}
/* nhãn miễn ship: chữ dài thì xuống hàng 2 (không cắt bằng ...) */
.v3pill{white-space:normal;overflow:visible;text-overflow:clip;max-width:58%;line-height:1.25;text-align:left;border-radius:16px;padding:6px 12px}
@media(max-width:380px){.v3pill{padding:5px 10px}}
/* chip "Hôm nay" + thẻ ưu đãi: tối đa 2 dòng thay vì 1 */
.v2tc>span{-webkit-line-clamp:2}

/* ============ v3 · giỏ hàng gộp: ① khách → ② món → ③ thanh toán (theo docs/order-ui-v3-cart-checkout3.html) ============ */
.v2 .page.cartpage,.v2 .page.cipage{padding-bottom:84px;max-width:640px;margin:0 auto;min-height:100vh;background:var(--cream)}
.cp-body{padding:8px 10px 0;display:grid;gap:8px}
.cp-blk{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 12px 12px;box-shadow:0 2px 6px -4px rgba(0,0,0,.25);overflow:hidden}
.cp-blk.flat{padding:0}
.cp-blk>h3{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:900;margin-bottom:8px;line-height:1.2}
.cp-blk.flat>h3{padding:10px 12px 0;margin-bottom:6px}
.cp-blk>h3 u{text-decoration:none;width:22px;height:22px;border-radius:7px;background:var(--cr-l);display:grid;place-items:center;font-size:12px}
.cp-blk>h3 small{margin-left:auto;font-size:11px;font-weight:700;color:var(--mute)}
.cp-edit{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--cr);text-decoration:none}
.cp-empty-info{font-size:12.5px;color:var(--mute);margin-bottom:8px}
.cp-addinfo{display:flex;align-items:center;justify-content:center;height:46px;border:1.5px dashed var(--cr);border-radius:12px;background:var(--cr-l);color:var(--cr);font-weight:800;font-size:13.5px;text-decoration:none}
.cp-sum{display:grid;gap:4px}
.cp-tag{display:inline-flex;align-self:flex-start;font-size:11px;font-weight:800;color:var(--cr);background:var(--cr-l);border-radius:999px;padding:1px 9px;width:max-content}
.cp-sum .r{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35}
.cp-sum .r i{font-style:normal;width:18px;text-align:center;flex:none}
.cp-sum .tm{font-size:11.5px;color:var(--mute);margin-left:26px}
.bn{display:flex;gap:6px;align-items:center;border-radius:10px;padding:6px 9px;font-size:11.5px;font-weight:600;margin-top:6px;background:#e4f6ea;color:#14693a;line-height:1.3}
.bn.y{background:#fff3d9;color:#8a5a00}.bn.plain{background:#f3eeec;color:#5a4a40}
/* món */
.cartpage .cp-blk .ship,.cartpage .cp-blk .v2ofs{margin:0 12px 6px}
.cartpage .cp-blk .v2ofs:empty{display:none}
.cp-lines .cl-line{padding:8px 12px;gap:8px;align-items:center;border-bottom:1px dashed var(--line)}
.cp-lines .cl-line .th{width:40px;height:40px;border-radius:10px}
.cp-lines .cl-line .n b{font-size:13px}
.cp-lines .cl-line .a{font-size:12.5px}
.cp-lines .cl-line .stp{margin-top:4px!important}
.cp-lines .cl-line .stp s{width:22px;height:22px}
.cp-lines .cl-line .rm{font-size:11px}
.cp-grp{display:flex;justify-content:space-between;align-items:center;height:26px;padding:0 12px;background:#faf3ee;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cp-grp b{font-size:11.5px;font-weight:800;color:var(--cr-d,#a3200f);text-transform:uppercase}
.cp-grp small{font-size:10.5px;color:var(--mute);font-weight:600}
.cp-note{padding:8px 12px 10px;border-top:1px solid var(--line)}
.cp-note label{display:block;font-size:11.5px;font-weight:700;margin-bottom:3px}
.cp-note .in{width:100%;resize:vertical;min-height:44px;font-size:13.5px;border-radius:10px}
/* thanh toán */
.pay{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pay button{height:44px;border:1.5px solid var(--line);border-radius:12px;padding:0 10px;display:flex;gap:7px;align-items:center;font-weight:800;font-size:12.5px;line-height:1.15;background:#fff;text-align:left;cursor:pointer}
.pay button small{display:block;font-weight:500;font-size:10.5px;color:var(--mute)}
.pay button i{font-style:normal;font-size:18px}
.pay button.on{border-color:var(--cr);background:var(--cr-l)}
.pay .rd{width:16px;height:16px;border-radius:50%;border:2px solid #d7cbbf;margin-left:auto;flex:none}.pay .on .rd{border:5px solid var(--cr)}
.cp-bank{margin-top:8px;border:1.5px dashed #e2d6cd;border-radius:12px;padding:8px;display:flex;gap:10px;background:#fffdfb;align-items:flex-start}
.cp-bank .qr{width:112px;flex:none;border:1px solid var(--line);border-radius:10px;padding:4px;background:#fff}
.cp-bank .qr img{width:100%;display:block}
.cp-bank .bi{flex:1;min-width:0}
.cp-bank .kv{display:flex;justify-content:space-between;gap:6px;font-size:12px;padding:2px 0;line-height:1.3}
.cp-bank .kv span{color:var(--mute);flex:none}.cp-bank .kv b{font-weight:700;text-align:right;word-break:break-word}
.cp-copy{font-size:10px;font-weight:800;color:var(--cr);border:1px solid #f0b2a8;border-radius:6px;padding:0 5px;margin-left:4px;background:#fff;cursor:pointer}
.cp-tot .tot{padding:8px 2px 0;font-size:12.5px}
.cp-tot .tot .g{font-size:15px}
/* thanh đáy */
.cp-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:640px;margin:0 auto;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center}
.cp-bar[hidden]{display:none}
.cp-bar .t small{display:block;font-size:10.5px;color:var(--mute);line-height:1.15}
.cp-bar .t b{color:var(--cr);font-size:16px;line-height:1.2}
.cp-bar .go{margin:0;padding:0 12px;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;height:44px;border-radius:12px;background:#0f0b0a;color:#fff;font-weight:800;font-size:14.5px;border:0;cursor:pointer}
.cp-bar .go.dis{background:#d9d0c8}
.cp-bar .go:disabled{opacity:.7;cursor:default}
.cp-cap{margin:0 10px;min-height:0}
/* trang nhập thông tin /customer */
.ci-form{gap:8px}
.ci-seg{display:flex;gap:6px;margin-bottom:8px}
.ci-seg button{flex:1;height:36px;border:1.5px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:700;background:#fff;cursor:pointer;white-space:nowrap}
.ci-seg button.on{border-color:var(--cr);background:var(--cr-l);color:var(--cr)}
.cipage .fld{margin-bottom:8px}.cipage .fld:last-child{margin-bottom:0}
.cipage .fld label{display:block;font-size:11.5px;font-weight:700;margin-bottom:3px}
.cipage .fld .opt{font-weight:500;color:var(--mute)}
.cipage .in{width:100%;height:40px;font-size:14px}
.ci-two{display:grid;grid-template-columns:1.1fr 1fr;gap:8px}
.cipage .hint{font-size:11px;color:var(--mute);margin-top:3px}
.cipage .er{color:#c0392b;font-size:11.5px;margin-top:3px;min-height:0}
.ci-rem{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:600;margin-top:8px}
.ci-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:640px;margin:0 auto;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(12px + env(safe-area-inset-bottom,0px))}
.ci-bar .go{width:100%;height:46px;border-radius:12px;margin:0}

.cp-blk .bn.plain{display:block;line-height:1.4}
.cp-blk .bn.y{display:block}

/* ghi chú freeship Timecity: danh sách */
.cipage .bn.fsn{display:block;align-items:initial;font-weight:600}
.bn.fsn ul{margin:3px 0 0 16px}
.bn.fsn li{margin:1px 0}
.cp-blk .bn{display:block}

.cp-cap[hidden]{display:none}

/* thẻ thông tin khách trong giỏ: gọn 2 dòng */
.cp-sum2{display:grid;gap:3px;font-size:13px;line-height:1.35}
.cp-sum2 .l1,.cp-sum2 .l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-sum2 .l1{display:flex;align-items:center;gap:6px;min-width:0}
.cp-sum2 .l1 .cp-tag{flex:none}
.cp-sum2 .l1 b{font-weight:800;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cp-sum2 .l1>span:last-child{flex:none;font-weight:600}
.cp-sum2 .l2{color:#4a3f3a}
.cp-sum2 .dot{margin:0 5px;color:var(--mute)}

/* ---- xóa giỏ: hộp xác nhận + nút khôi phục ---- */
.v3 .mod:has(>.cc){background:#fff;overflow:hidden}
.cc{padding:22px 20px 18px;text-align:center}
.cc-ic{width:52px;height:52px;border-radius:50%;background:var(--cr-l);display:grid;place-items:center;font-size:26px;margin:0 auto 8px}
.cc h3{font-size:17px;font-weight:900}
.cc p{font-size:13px;color:var(--mute);margin:6px 0 14px;line-height:1.45}
.cc-btns{display:flex;gap:10px}
.cc-b{flex:1;height:46px;border-radius:12px;font-weight:800;font-size:14.5px;border:0;cursor:pointer}
.cc-b.o{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.cc-b.d{background:var(--cr);color:#fff}
@media(min-width:761px){.v3 .ov:not(.bot) .mod:has(>.cc){width:min(380px,92vw);border-radius:22px}}
@media(max-width:760px){.v3 .ov.bot .mod:has(>.cc){height:auto;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}}
.cp-restore{margin-top:12px;height:44px;padding:0 20px;border-radius:12px;background:var(--cr-l);border:1.5px solid #f0b2a8;color:var(--cr);font-weight:800;font-size:13.5px;cursor:pointer}
.v2empty .v2go.cp-empty{margin-top:10px}

/* ---- thanh toán: dòng hiển thị ở giỏ + trang chọn /pay ---- */
.v2 .page.paypage{padding-bottom:84px;max-width:640px;margin:0 auto;min-height:100vh;background:var(--cream)}
.cp-payrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid var(--line);border-radius:12px;background:#fdfbf9;text-decoration:none;color:inherit}
.cp-payrow .ic,.pm-opt .ic{width:36px;height:36px;border-radius:10px;background:var(--cr-l);display:grid;place-items:center;font-size:19px;flex:none}
.cp-payrow .tx,.pm-opt .tx{flex:1;min-width:0}
.cp-payrow .tx b,.pm-opt .tx b{display:block;font-size:13.5px;line-height:1.25}
.cp-payrow .tx small,.pm-opt .tx small{display:block;font-size:11px;color:var(--mute);line-height:1.3}
.cp-payrow .go{color:var(--mute);font-size:22px;line-height:1}
.pm-list{display:grid;gap:8px}
.pm-opt{display:flex;align-items:center;gap:10px;padding:10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;text-align:left;cursor:pointer;width:100%}
.pm-opt.on{border-color:var(--cr);background:var(--cr-l)}
.pm-opt .rd{width:18px;height:18px;border-radius:50%;border:2px solid #d7cbbf;flex:none}
.pm-opt.on .rd{border:6px solid var(--cr)}
.paypage .cp-bank{margin-top:10px}
.paypage .cp-bank .qr{width:140px}
.paypage .cp-tot{margin-top:6px}

.cp-payrow .arr{color:var(--mute);font-size:22px;line-height:1;flex:none}

/* bỏ nút Xóa từng món trong giỏ (bấm − về 0 để bỏ món) */
.v3 .cl-line .rm{display:none!important}

/* nút tăng / giảm số lượng nằm bên phải (dưới giá), tên + tuỳ chọn món ở giữa */
.cp-lines .cl-line,.v2cart .cl-line{display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:10px;row-gap:1px;align-items:start}
.cp-lines .cl-line .n,.v2cart .cl-line .n{display:contents}
.cp-lines .cl-line .th,.v2cart .cl-line .th{grid-column:1;grid-row:1 / span 5}
.cp-lines .cl-line .n>b,.cp-lines .cl-line .n>small,.v2cart .cl-line .n>b,.v2cart .cl-line .n>small{grid-column:2}
.cp-lines .cl-line .a,.v2cart .cl-line .a{grid-column:3;grid-row:1;text-align:right;align-self:start}
.cp-lines .cl-line .stp,.v2cart .cl-line .stp{grid-column:3;grid-row:2 / span 4;justify-self:end;align-self:start;margin:4px 0 0!important}

/* giỏ hàng: giá nằm ngay dưới tên món; nút tăng giảm to hơn, đặt bên phải giữa dòng */
.cp-lines .cl-line,.v2cart .cl-line{grid-template-columns:44px minmax(0,1fr) auto;align-items:center;padding:10px 12px}
.cp-lines .cl-line .th,.v2cart .cl-line .th{width:44px;height:44px;grid-column:1;grid-row:1 / span 6;align-self:center}
.cp-lines .cl-line .n>b,.v2cart .cl-line .n>b{grid-column:2;grid-row:1;font-size:13.5px;line-height:1.3}
.cp-lines .cl-line .a,.v2cart .cl-line .a{grid-column:2;grid-row:2;text-align:left;align-self:start;font-size:14px;font-weight:800;color:var(--cr);padding:0}
.cp-lines .cl-line .n>small,.v2cart .cl-line .n>small{grid-column:2;grid-row:auto}
.cp-lines .cl-line .stp,.v2cart .cl-line .stp{grid-column:3;grid-row:1 / span 6;justify-self:end;align-self:center;margin:0!important;padding:3px;gap:4px;background:#f3eeec}
.cp-lines .cl-line .stp s,.v2cart .cl-line .stp s{width:34px;height:34px;font-size:19px;font-weight:800}
.cp-lines .cl-line .stp b,.v2cart .cl-line .stp b{min-width:28px;font-size:15.5px;text-align:center}

/* giỏ hàng: giá nằm DƯỚI cùng — sau tên, loại / topping và ghi chú của món */
.cp-lines .cl-line,.v2cart .cl-line{row-gap:0}
.cp-lines .cl-line .th,.v2cart .cl-line .th{grid-row:1 / span 5}
.cp-lines .cl-line .stp,.v2cart .cl-line .stp{grid-row:1 / span 5}
.cp-lines .cl-line .n>b,.v2cart .cl-line .n>b{grid-row:auto}
.cp-lines .cl-line .a,.v2cart .cl-line .a{grid-row:auto;order:99;margin-top:2px}
.cp-lines .cl-line .n>small,.v2cart .cl-line .n>small{grid-row:auto}

.cp-cust{cursor:pointer;transition:background .15s,border-color .15s}
.cp-cust:hover,.cp-cust:focus-visible{border-color:#f0b2a8;background:#fffaf9;outline:none}
.cp-cust:active{background:var(--cr-l)}

/* Nút chính (Thêm vào giỏ / Cập nhật giỏ / Đặt hàng): đỏ gạch của thương hiệu thay cho nền đen */
.v3 .dm-go,.v3 .btn.p.dm-go,.v3 .cp-bar .go,.v3 .v2go{background:#c0321f;color:#fff;box-shadow:0 8px 18px rgba(192,50,31,.3)}
.v3 .dm-go:active,.v3 .cp-bar .go:active,.v3 .v2go:active{background:#a82a1a}
.v3 .dm-go:disabled,.v3 .cp-bar .go.dis,.v3 .v2go.dis{background:#d9d0c8;box-shadow:none}

/* ============ Nút gọn + căn phải: thanh dưới cùng, Đặt hàng / Tiếp tục / Thêm vào giỏ ============ */
.cp-bar,.v2bar{justify-content:space-between}
.cp-bar .t,.v2bar .t{margin-right:auto}
.cp-bar .go,.v2bar button{flex:none;width:auto;min-width:0;height:34px;padding:0 16px;border-radius:999px;font-size:13px;margin-left:auto}
.v3 .cp-bar .go,.v3 .v2bar button,.v3 .v2go,.v3 .dm-go{box-shadow:none}
.v2go,.cartpage .v2go,.v3 .mod>.v2cart .v2go{display:flex;width:auto;min-width:0;height:34px;padding:0 16px;font-size:13px;margin:8px 16px 12px auto;border-radius:999px}
.dm-row{justify-content:space-between;gap:10px}
.dm-row .dm-go{margin-left:auto}
.dm-row .stp s{width:26px;height:26px;font-size:15px}
.dm-row .stp b{min-width:20px;font-size:13px}
.dm-go,.btn.p.grow.dm-go{flex:none!important;width:auto!important;min-width:0;height:34px!important;padding:0 14px!important;gap:10px;font-size:13px;border-radius:999px!important}
.cp-lines .cl-line .stp s,.v2cart .cl-line .stp s{width:26px;height:26px;font-size:15px}
.cp-lines .cl-line .stp b,.v2cart .cl-line .stp b{min-width:20px;font-size:13px}
/* ============ Giỏ hàng ở trang chủ (cột bên): chỉ cuộn khi dài, tiêu đề và nút đặt hàng ghim lại ============ */
.v2side .v2cart{max-height:calc(100vh - var(--v3pinh,58px) - 110px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;min-height:0}
.v2side .v2cart>*{flex:none}
.v2side .v2cart .v2ch{position:sticky;top:0;z-index:2;background:#fff}
.v2side .v2cart .v2go{position:sticky;bottom:0;box-shadow:0 -10px 14px -6px #fff}

/* ---- Nút ở trang theo dõi đơn: gọn, không xuống dòng, căn phải ---- */
.v2btns{justify-content:flex-end;gap:8px}
.v2btns .btn{flex:none;min-width:0;height:36px;padding:0 16px;font-size:13px;white-space:nowrap;border-radius:999px;box-shadow:none}

/* ============ Quà tặng tách riêng + khung tổng tiền ============ */
.gift-head{margin:6px 0 0;padding:9px 14px;background:#fff7e0;color:#8a5a00;font-size:12.5px;font-weight:800;border-top:1px dashed #f0d79a;border-bottom:1px solid #f6e7b8}
.cl-line.gift{background:#fffcf2}
.cl-line.gift .th{position:relative}
.giftbadge{display:inline-block;white-space:nowrap;background:#fde9a8;color:#7a4b00;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px}
.cl-line.gift .a{color:#7a4b00}

.v2cart .tot,.v2card .tot,.cartpage .tot,.cp-tot .tot,.tot{margin:12px 14px 14px;padding:14px 16px;background:#faf6f3;border:1px solid #efe6df;border-radius:16px;font-size:13.5px}
.tot>div{margin-bottom:8px;align-items:baseline;gap:12px}
.tot>div>span:first-child{color:#6b5a50}
.tot>div>span:last-child{font-weight:700;color:var(--ink);white-space:nowrap}
.tot .mute{font-weight:600!important;color:#8a7a70!important;font-size:12.5px}
.tot .v2sv span:last-child{color:#12803f}
.tot .g{margin:10px -16px -14px;padding:13px 16px;border-top:1px dashed #e0d3ca;background:#fff1ee;border-radius:0 0 15px 15px;align-items:center;flex-wrap:nowrap}
.tot .g span:first-child{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.25}
.tot .g span:last-child{font-size:21px;font-weight:900;color:var(--cr);white-space:nowrap}
.tot .g:has(+.v2sv2){margin-bottom:0;border-radius:0}
.tot .v2sv2{margin:0 -16px -14px;padding:0 16px 12px;background:#fff1ee;border-radius:0 0 15px 15px}

/* ============ Sửa đơn: thêm món ============ */
.addrow{display:flex;align-items:center;justify-content:center;width:100%;height:42px;margin-top:10px;border:1.5px dashed #d9a79f;border-radius:14px;background:#fff8f6;color:var(--cr);font-weight:800;font-size:13.5px;cursor:pointer}
.addrow:hover{background:#fff0ec}
.newtag{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;background:#12803f;color:#fff;font-size:10.5px;font-weight:800;vertical-align:middle}
.pcats{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.pcats::-webkit-scrollbar{display:none}
.pcat{flex:none;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.pcat.on{background:var(--cr);border-color:var(--cr);color:#fff}
.plist .prow{display:flex;align-items:center;gap:10px;width:100%;padding:8px 2px;border-bottom:1px solid var(--line);text-align:left}
.plist .prow>span{flex:1;min-width:0}
.plist .prow b{display:block;font-size:13.5px}
.plist .prow small{color:var(--cr);font-weight:800}
.plist .prow .th,.plist .prow>:first-child:not(span){width:44px;height:44px;border-radius:10px;flex:none;overflow:hidden}
.padd{flex:none;height:32px;padding:0 12px;border-radius:999px;background:var(--cr);color:#fff;font-weight:800;font-size:12.5px;border:0;cursor:pointer}
.mod .sc:has(#pl){max-height:70vh}

/* ---- Popup thêm món: giao diện giống thực đơn (menu dọc ảnh tròn + thẻ món dạng hàng) ---- */
.mod:has(>.pk){width:min(1000px,94vw)!important;max-width:94vw!important;height:min(780px,92vh);max-height:92vh;border-radius:24px;overflow:hidden}
.pk{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--cream,#f7f3f0)}
.pk .ph{display:flex;align-items:center;gap:14px;padding:18px 24px 10px;flex:none}
.pk .ph .tt{flex:1;min-width:0}.pk .ph h2{font-size:20px;font-weight:800}.pk .ph p{font-size:12.5px;color:var(--mute);margin-top:1px}
.pk .px{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:15px;flex:none;cursor:pointer}
.pk .sr{display:flex;align-items:center;gap:10px;height:46px;margin:0 24px;padding:0 16px;background:#fff;border:1.5px solid var(--line);border-radius:999px;flex:none}
.pk .sr input{flex:1;border:0;outline:0;font:inherit;background:none;min-width:0}
.pk .sr:focus-within{border-color:var(--cr)}
.pk .pkcols{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;flex:1;min-height:0;padding:14px 24px 0;margin:0;align-items:stretch}
.pk .pkcols .v3rail{position:static;max-height:none;height:100%}
.pk .pkcols .l{overflow-y:auto;min-height:0;padding-bottom:16px;scrollbar-width:thin}
.pk .pkcols .gh{scroll-margin-top:4px}
.v3 .pk .pkcols .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.pk .pkcols .pc{min-width:0}
.pk .pkbar{flex:none;display:flex;align-items:center;gap:14px;padding:12px 24px 14px;background:#fff;border-top:1px solid var(--line)}
.pk .pkbar .sum{flex:1;min-width:0}.pk .pkbar small{display:block;font-size:11.5px;color:var(--mute)}
.pk .pkbar b{font-size:17px;color:var(--cr);font-weight:900}
.pk .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:4px}
.pk .chip{flex:none;font-size:11.5px;font-weight:700;background:var(--cr-l,#fdeeea);color:var(--cr);padding:3px 9px;border-radius:999px;white-space:nowrap}
.pk .pkdone{height:40px;padding:0 24px;border-radius:999px;background:var(--cr);color:#fff;font-weight:800;font-size:14px;white-space:nowrap;border:0;cursor:pointer}
.pk .pkdone[disabled]{background:#d9d0c8;cursor:not-allowed}
@media(max-width:700px){
  .v3 .ov .mod:has(>.pk){width:100%!important;max-width:100%!important;height:92vh;max-height:92vh;border-radius:26px 26px 0 0}
  .pk .ph{padding:16px 16px 8px}.pk .ph h2{font-size:18px}
  .pk .sr{margin:0 14px;height:42px}
  .pk .pkcols{grid-template-columns:86px minmax(0,1fr);gap:10px;padding:12px 12px 0 8px}
  .pk .v3rl{flex-direction:column;gap:3px;text-align:center;padding:10px 4px;font-size:11.5px;border-radius:12px}
  .pk .v3rl em{position:absolute;top:4px;right:6px;margin:0;min-width:17px;height:17px;font-size:10px}
  .pk .v3rl.on{box-shadow:none}
  .v3 .pk .pkcols .grid{grid-template-columns:1fr;gap:10px}
  .pk .pc .im{width:84px!important;height:84px!important}
  .pk .pc .d{display:none}
  .pk .pkbar{padding:10px 14px 16px}.pk .pkdone{padding:0 18px}
}
/* ============ Trang thanh toán: thẻ, chip giờ, ô nhập giờ, bố cục desktop ============ */
.pg{display:grid;gap:14px}
.pgc,.pg .cp-blk{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:0 6px 18px -12px rgba(0,0,0,.25)}
.pgc h3,.pg .cp-blk>h3{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:800;margin-bottom:14px}
.pgc h3 u{text-decoration:none;width:32px;height:32px;border-radius:10px;background:var(--cr-l,#fdeeea);display:grid;place-items:center;font-size:16px;flex:none}
.pgc textarea.in{width:100%;min-height:82px;resize:vertical}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink)}
.slot:hover{border-color:#e0b2a9}
.slot.on{border-color:var(--cr);background:var(--cr-l,#fdeeea);color:var(--cr)}
.slot.fast{border-color:#f1c75a;background:#fff8e1}
.slot.fast.on{border-color:var(--cr);background:var(--cr-l,#fdeeea)}
.custom{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.custom label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.crow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tin{width:118px!important;min-height:0!important;height:38px;padding:0 10px!important;font-size:14px;font-weight:700;border-radius:12px!important}
.custom.on .tin{border-color:var(--cr);background:#fff8f6}
.custom.bad .tin{border-color:#d33}
.custom .hint{font-size:12.5px;color:var(--mute)}
.custom.on .hint{color:#14693a}
.custom .hint.er{color:#c0321f;font-weight:600}
.pg-pm{display:flex;gap:12px;align-items:center;border:1.5px solid var(--cr);border-radius:16px;padding:14px;background:#fff8f6}
.pg-pm .rd{width:18px;height:18px;border-radius:50%;border:5px solid var(--cr);flex:none}
.pg-pm small{display:block;color:var(--mute);font-size:12px;margin-top:1px}
.pg-pm .ic{margin-left:auto;font-size:22px}
@media(min-width:1000px){
  .pg [data-edone]{display:none}
  .pg .cp-cust .ci-two{grid-template-columns:1fr 1fr;gap:14px}
  .v2narrow.wide:has(.pg){max-width:1120px}
  .v2two:has(.pg){grid-template-columns:minmax(0,1fr) 400px;gap:20px}
}

.crow>b{font-size:16px;color:var(--mute)}
.crow select.tin{width:82px!important;padding:0 8px!important;cursor:pointer}

/* ===== Order tại quán (?source=order-tai-quan): popup Tên + SĐT, ghi chú đơn tại quán, trang 404 ===== */
.v2 .ov.bot .mod:has(>.dq),.v3 .ov.bot .mod:has(>.dq){height:auto;max-height:92vh;background:#fff;border-radius:24px 24px 0 0;overflow:auto;padding-bottom:env(safe-area-inset-bottom,0px)}
.dq{padding:8px 16px 18px}
.dq-grab{width:38px;height:4px;border-radius:4px;background:#ddd2cb;margin:0 auto 12px}
.dq-t{font-size:18px;font-weight:900;line-height:1.25}
.dq-s{font-size:12.5px;color:var(--mute);margin:2px 0 12px}
.dq-saved{display:flex;gap:8px;align-items:center;background:#e4f6ea;color:#14693a;border-radius:10px;padding:7px 10px;font-size:12px;font-weight:600;margin-bottom:10px;line-height:1.3}
.dq-saved button{margin-left:auto;color:var(--cr);font-weight:800;white-space:nowrap}
.dq-f{margin-bottom:10px}
.dq-f label{display:block;font-size:12px;font-weight:700;margin-bottom:4px;color:#4a3f3a}
.dq-f label i{color:var(--cr);font-style:normal}
.dq-f .in{width:100%;height:46px;font-size:15px;border-radius:12px}
.dq-e{font-size:11.5px;color:var(--cr);font-weight:600;margin-top:3px;min-height:0}
.dq-e:empty{display:none}
.dq-err{margin:0 0 8px;text-align:center}
.dq-chk{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;margin:4px 0 14px;cursor:pointer}
.dq-chk input{width:18px;height:18px;accent-color:var(--cr)}
.dq-go{width:100%;height:48px;border-radius:14px;background:var(--cr);color:#fff;font-weight:800;font-size:15px}
.dq-go.dis{background:#d9d0c8;pointer-events:auto}
.dq-cancel{display:block;width:100%;text-align:center;font-size:13.5px;font-weight:700;color:var(--mute);margin-top:12px;padding:6px}
.cp-dine{margin:8px 10px 0;border-radius:10px;padding:7px 10px;font-size:12px;font-weight:700;background:#fff3d9;color:#8a5a00;line-height:1.3}
.nf404{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 28px 60px;max-width:420px;margin:0 auto}
.nf404 .pl{width:132px;height:132px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:62px;box-shadow:0 10px 24px -12px var(--cr);position:relative}
.nf404 .pl em{position:absolute;right:-6px;bottom:6px;font-style:normal;background:var(--cr);color:#fff;font-weight:900;font-size:12px;border-radius:999px;padding:2px 9px}
.nf404 h1{font-size:20px;font-weight:900;margin:20px 0 6px;line-height:1.25}
.nf404 p{font-size:13.5px;color:var(--mute);line-height:1.55;margin-bottom:22px}
.nf404 .nf-go{width:100%;height:48px;border-radius:14px;background:var(--cr);color:#fff;font-weight:800;font-size:15px}
.nf404 .nf-alt{margin-top:14px;font-size:14px;font-weight:800;color:var(--cr);padding:6px}
/* ===== Trang nhóm (giao diện mới): /g/:token, chốt đơn nhóm ===== */
.gppage .gp-body{padding-bottom:84px}
.gp-mode{display:flex;align-items:center;gap:6px;margin:8px 10px 0;font-size:12px;font-weight:800;color:var(--cr);background:var(--cr-l);border-radius:999px;padding:3px 12px;width:fit-content;max-width:calc(100% - 20px)}
.gp-mode.dine{color:#8a5a00;background:#fff3d9}
.gp-mode span{opacity:.5}
.gp-sub{font-size:12.5px;color:var(--mute);margin:0 0 10px;line-height:1.4}
.gp-share{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--cr);background:#fff}
.gp-empty{font-size:12px;color:var(--mute);padding:2px 0 6px}
.gp-menu>h3{padding:10px 12px 0}
.gp-q{margin:0 10px 8px;display:flex}
/* --- Mời bạn bè --- */
.gp-inv .inv{display:flex;gap:12px;align-items:center}
.qrb{position:relative;width:92px;height:92px;flex:none;border:1px solid var(--line);border-radius:12px;padding:5px;background:#fff;display:block}
.qrb canvas{width:100%;height:100%;display:block}
.qrb i{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:var(--cr);color:#fff;font-style:normal;font-size:12px;display:grid;place-items:center;border:2px solid #fff}
.qrb .gn-qrwait{font-size:11px}
.gp-inv .tx{flex:1;min-width:0}.gp-inv .tx b{display:block;font-size:14px;line-height:1.25}.gp-inv .tx small{display:block;font-size:11.5px;color:var(--mute);line-height:1.3;margin:2px 0 8px}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.gppage .pill,.gq .pill{height:34px;border-radius:999px;padding:0 12px;font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);background:#fff;white-space:nowrap}
.gppage .pill.p,.gq .pill.p{background:var(--cr);border-color:var(--cr);color:#fff}
.linkrow{display:flex;gap:6px;margin-top:10px;align-items:center;background:#f6f1ee;border-radius:10px;padding:4px 4px 4px 10px;font-size:11.5px;color:#5a4a40}
.linkrow span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Consolas,monospace}
.linkrow button{height:28px;border-radius:8px;background:#fff;border:1px solid var(--line);padding:0 10px;font-size:11.5px;font-weight:800;color:var(--cr)}
.invm{display:flex;align-items:center;gap:8px;margin:8px 10px 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 8px;font-size:12.5px;font-weight:800}
.invm .qrb{width:36px;height:36px;border-radius:8px;padding:2px}.invm .qrb i{display:none}
.invm .t{flex:1;line-height:1.25}.invm .t small{display:block;font-weight:500;font-size:11px;color:var(--mute)}
.invm .pill{height:30px;font-size:12px;padding:0 10px}
/* --- Thành viên --- */
.gp-mem{padding:0}
.gp-mem .mh{display:flex;align-items:center;gap:8px;padding:10px 12px 8px}
.gp-mem .mh h3{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:900;flex:1;margin:0}
.gp-mem .mh h3 u{text-decoration:none;width:22px;height:22px;border-radius:7px;background:var(--cr-l);display:grid;place-items:center;font-size:12px}
.stack{display:flex}.stack i{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-7px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;color:#fff}
.stack i:first-child{margin-left:0}.stack i.more{background:#d9d0c8;color:#5a4a40}
.prog{margin:0 12px 8px;font-size:11.5px;color:var(--mute);display:flex;align-items:center;gap:8px}
.prog .pbar{flex:1;height:6px;border-radius:3px;background:#f0e9e4;overflow:hidden}.prog .pbar i{display:block;height:100%;background:#18a957;border-radius:3px}
.prog b{color:#14693a}
.gp-mem .mm{border-top:1px solid var(--line)}
.gp-mem .mr{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:default}
.gp-mem .mr[data-toggle]{cursor:pointer}
.gp-mem .mr.me-row{background:#fffaf8}.gp-mem .mr.kb{background:#fff7f6}
.gp-mem .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex:none;position:relative}
.gp-mem .av em{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:#f5b02e;border:2px solid #fff;font-style:normal;font-size:8px;display:grid;place-items:center}
.gp-mem .nm{flex:1;min-width:0}.gp-mem .nm b{font-size:13px;display:flex;gap:5px;align-items:center;line-height:1.25;flex-wrap:wrap}
.gp-mem .nm small{display:block;font-size:11.5px;color:var(--mute)}.gp-mem .nm small.ok{color:#14693a;font-weight:600}
.gp-mem .tg{font-size:9.5px;font-weight:800;border-radius:999px;padding:0 7px;line-height:16px;background:#fff3d9;color:#8a5a00}.gp-mem .tg.me{background:var(--cr-l);color:var(--cr)}
.gp-mem .sm{font-weight:800;font-size:13px;color:var(--cr);text-align:right}.gp-mem .sm.no{color:#b3a8a2;font-weight:600}
.gp-mem .chev{color:var(--mute);font-size:12px;width:14px;text-align:center}
.gp-mem .more{width:26px;height:26px;border-radius:50%;background:#f3eeec;display:grid;place-items:center;font-size:14px;color:var(--mute);flex:none}
.gp-mem .mr.kb .more{background:var(--cr-l);color:var(--cr)}
.gp-mem .ml{padding:0 12px 10px 58px}
.gp-mem .ln{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;color:#4a3f3a;line-height:1.3}.gp-mem .ln span:first-child{flex:1}
.addm{margin-top:2px;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--cr)}
.gp-pop{margin:0 12px 10px 58px;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 20px -10px #0005;overflow:hidden;font-size:13px;font-weight:700;background:#fff}
.gp-pop button{display:block;width:100%;text-align:left;padding:9px 12px;color:var(--mute)}.gp-pop button+button{border-top:1px solid var(--line)}.gp-pop .d{color:var(--cr)}
.wait{margin:6px 12px 10px;border-radius:10px;padding:7px 10px;font-size:12px;font-weight:600;background:#f3f0ff;color:#4b3aa0;line-height:1.3}
.sumrow{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-top:1px dashed #e5d6c4;background:#fffdfb;font-size:12.5px}
.sumrow b{font-size:15px;color:var(--cr);font-weight:900}
/* --- bảng QR lớn --- */
.v2 .ov.bot .mod:has(>.gq),.v3 .ov.bot .mod:has(>.gq){height:auto;max-height:92vh;background:#fff;border-radius:24px 24px 0 0;overflow:auto;padding-bottom:env(safe-area-inset-bottom,0px)}
.gq{padding:8px 16px 18px;text-align:center}
.gq h4{font-size:17px;font-weight:900}.gq p{font-size:12px;color:var(--mute);margin:2px 0 12px}
.gq .bigqr{width:210px;height:210px;margin:0 auto 10px;border:1px solid var(--line);border-radius:16px;padding:10px;display:grid;place-items:center}
.gq .bigqr canvas{width:100%;height:100%;display:block}
.gq .acts{justify-content:center;margin-top:10px}
.gq .linkrow{text-align:left}

.gp-cnt{font-size:12px;font-weight:700;color:var(--mute)}
.gp-mem .tot{margin:8px 12px 12px}

.gp-sumcard{display:flex;align-items:center;gap:10px;margin:8px 10px 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 12px;color:inherit;text-decoration:none}
.gp-sumcard .tx{flex:1;min-width:0}.gp-sumcard .tx b{display:block;font-size:13px;line-height:1.25}.gp-sumcard .tx small{display:block;font-size:11.5px;color:var(--mute)}
.gp-sumcard .ar{font-size:12px;font-weight:800;color:var(--cr);white-space:nowrap}
.gppage .cp-bar .go{border:0;cursor:pointer}
/* ===== Trang nhóm gọn: một thẻ nhóm + menu ghim khi vuốt ===== */
.gc{margin:8px 10px 0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.gc .r1{display:flex;align-items:center;gap:8px}.gc .r1 b{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-tag{font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 9px;color:var(--cr);background:var(--cr-l);white-space:nowrap;flex:none}
.gc-tag.dine{color:#8a5a00;background:#fff3d9}
.gc .r2{display:flex;align-items:center;gap:10px;margin-top:8px}
.gc .gstat{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.gc .gstat .tx{min-width:0;line-height:1.25}.gc .gstat .tx b{display:block;font-size:12.5px;white-space:nowrap}.gc .gstat .tx small{display:block;font-size:11px;color:var(--mute);white-space:nowrap}
.gc .qrb{width:36px;height:36px;border-radius:9px;padding:3px}.gc .qrb canvas{width:100%;height:100%;display:block}
.gc .hint{margin-top:8px;font-size:11.5px;color:var(--mute);line-height:1.3}
.gppage .cp-top .stack{margin-right:2px}
.gppage .gp-menu{margin:8px 0 0;background:#fff;border-radius:20px 20px 0 0;border-top:1px solid var(--line)}
.gppage .gp-pin{margin:0;padding:0 14px 6px;border-radius:20px 20px 0 0;top:var(--v3pin,0px);box-shadow:0 6px 12px -10px #0006}
.gp-pin .mh{display:flex;align-items:center;gap:8px;padding:10px 0 8px}
.gp-pin .tt{flex:1;min-width:0}.gp-pin .tt b{display:block;font-size:16px;font-weight:900;line-height:1.2}.gp-pin .tt small{display:block;font-size:11px;color:var(--mute)}
.gp-pin .chip{font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 10px;background:#e4f6ea;color:#14693a;white-space:nowrap}
.gp-pin .gp-sb{width:36px;height:36px;font-size:15px}
.gppage section[id^="gm-"]{scroll-margin-top:calc(var(--v3pin,0px) + var(--v3pinh,58px) + 10px)}

/* --- Slide banner (fnb-admin → Cấu hình Web → Slide banner): ảnh cuộn ngang có snap, tự chạy, chấm + mũi tên --- */
.v3slide{position:relative;margin:8px 12px 0;border-radius:20px;overflow:hidden;aspect-ratio:2/1;background:#efe7e1}
.v3slide .trk{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.v3slide .trk::-webkit-scrollbar{display:none}
.v3slide .sd{flex:0 0 100%;height:100%;scroll-snap-align:center}
.v3slide .sd img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.v3slide .dts{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center;pointer-events:none}
.v3slide .dts i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transition:width .2s,background .2s}
.v3slide .dts i.on{width:18px;border-radius:5px;background:#fff}
.v3slide .ar{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#222;font-size:22px;line-height:1;cursor:pointer;display:none;place-items:center;padding:0 0 3px}
.v3slide .ar.l{left:10px}.v3slide .ar.r{right:10px}
@media(hover:hover){.v3slide .ar{display:grid}}
@media(min-width:901px){.v3slide{margin:16px 16px 0;aspect-ratio:3/1}}
@media(prefers-reduced-motion:reduce){.v3slide .trk{scroll-behavior:auto}}