/* Module MENU QUÁN (0.9, theo yêu cầu anh Vũ 28/09) — kiểu riêng (tiền tố .mq-), CHỈ dùng biến của web/giao_dien.css (đúng cả chế độ sáng / tối).
   Ảnh menu (SVG) là "tờ giấy" màu cố định của quán → nền giấy không đổi theo chế độ tối.
   In: trang có TÊN theo khổ + hướng (mqA3doc, mqA3ngang, mqA4doc, mqA4ngang, mqA5doc, mqA5ngang, mq2A5doc, mq2A5ngang) — không đụng trang in của module khác.
   0.9.1: A3 + in 2 mặt (.mq-to-in.mat2: mỗi mặt một trang), bia tươi ghi giá theo đơn vị (.mq-dv*), duyệt số bản in (.mq-duyet-nut). */

/* ---- khối trên màn điểm bán */
.mq-khoi{margin:0 0 4px}
.mq-khoi .hc-ds{margin-bottom:10px}
.mq-nut-khoi{margin:0 0 12px}

/* ---- thanh 5 bước (riêng của module — hc-buoc là của app bán hàng) */
.mq-dau-quan{display:flex;align-items:center;gap:6px;margin:2px 2px 6px;font-size:13px}
.mq-dau-quan svg{flex:none}
.mq-buoc{display:flex;list-style:none;margin:6px 0 14px;padding:0;gap:4px;counter-reset:mqb}
.mq-buoc li{flex:1;min-width:0;position:relative;text-align:center;padding-top:32px;min-height:44px;cursor:pointer;font:600 12px/1.25 var(--noi-dung);color:var(--mo)}
.mq-buoc li::before{counter-increment:mqb;content:counter(mqb);position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;box-sizing:border-box;
  background:var(--the);border:2px solid var(--vien);display:grid;place-items:center;font:800 12.5px/22px var(--tieu-de);color:var(--mo);z-index:1}
.mq-buoc li::after{content:"";position:absolute;top:12px;left:calc(-50% + 15px);right:calc(50% + 15px);height:2px;background:var(--vien)}
.mq-buoc li:first-child::after{display:none}
.mq-buoc li.xong{color:var(--xanh)} .mq-buoc li.xong::before{content:"✓";background:var(--xanh);border-color:var(--xanh);color:#fff} .mq-buoc li.xong::after{background:var(--xanh)}
.mq-buoc li.dang{color:var(--cam-dam);font-weight:800} .mq-buoc li.dang::before{border-color:var(--cam);color:var(--cam-dam);background:var(--cam-nhat)}
.mq-buoc li:focus-visible{outline:2px solid var(--chinh-2);outline-offset:2px;border-radius:8px}
@media (prefers-color-scheme: dark){ .mq-buoc li.dang{color:var(--cam-sang)} }
.mq-buoc-nd>.hc-muc:first-child{margin-top:4px}
.mq-buoc-nd .hc-muc .hc-phu{text-transform:none;letter-spacing:0;font:500 12.5px var(--noi-dung)}

/* ---- trường nhập 2 cột (giờ mở · wifi; giá · đơn vị) */
.mq-hai-cot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
.mq-hai-cot>div>.hc-muc{margin-top:14px}

/* ---- ảnh menu cũ / mặt tiền: ô ảnh có nút bỏ */
.mq-anh{position:relative}
.mq-anh img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--vien-2);background:var(--nen-2);display:block}
.mq-anh-xoa{position:absolute;top:4px;right:4px;width:32px;height:32px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:color-mix(in srgb,var(--cham-dam) 72%,transparent);color:#fff}
.mq-anh-xoa::after{content:"";position:absolute;inset:-6px}   /* vùng bấm ≥ 44 px */

/* ---- bước 3: món */
.mq-nut-them{flex-wrap:wrap;margin-top:0}
.mq-nut-them>.hc-nut{flex:1 1 auto}
.mq-nhom-ten{display:flex;align-items:baseline;gap:8px;margin:16px 2px 8px;font:800 15px/1.4 var(--tieu-de);color:var(--chu)}
.mq-nhom-ten .hc-phu{font:600 12.5px var(--noi-dung)}
button.hc-dong.mq-mon{border:0;border-bottom:1px solid var(--vien-2);cursor:pointer;min-height:56px}
.mq-ds-mon>.mq-mon:last-child{border-bottom:0}
.mq-mon .hc-dong-dau{width:34px;height:34px;font-size:13px}
.mq-mon .hc-dong-cuoi b{font-size:15.5px}
.mq-rong{padding:22px 14px 14px}
.mq-rong p{max-width:420px}
.mq-noi-bat{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 0 6px;font:600 14.5px var(--noi-dung);color:var(--chu);cursor:pointer}
.mq-noi-bat input{width:20px;height:20px;accent-color:var(--cham)}
.mq-noi-bat svg{color:var(--vang-chu)}
.mq-chon-nhom{margin-bottom:6px}
.mq-chon-nhom>button{min-height:40px;padding:0 12px;font-size:14px}
#mq-m-nhom-khac{margin-top:6px}
.mq-tn-ds{max-height:52vh;overflow:auto;margin:10px 0 4px}
button.hc-dong.mq-tn{border:0;border-bottom:1px solid var(--vien-2);cursor:pointer;min-height:54px}
.mq-tn.da-co{background:var(--xanh-nhat)}
.mq-tn .hc-dong-dau{width:32px;height:32px}
.mq-tn .hc-dong-cuoi b{font-size:14.5px}
#mq-dan{width:100%;font:500 15px/1.45 var(--noi-dung)}

/* ---- bước 4: bia Hai Củ Lạc (thẻ có ô tích; chọn thì hiện giá · đơn vị) */
.mq-bia-ds{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.mq-bia{border:1.5px solid var(--vien);border-radius:var(--r-vua);background:var(--the);padding:4px 12px}
.mq-bia.chon{border-color:var(--cham);box-shadow:0 0 0 3px var(--chinh-nhat)}
.mq-bia-chon{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;font:700 15px/1.3 var(--noi-dung);color:var(--chu)}
.mq-bia-chon input{flex:none;width:22px;height:22px;accent-color:var(--cham)}
.mq-bia-chon span{flex:1;min-width:0;overflow-wrap:anywhere}
.mq-bia-chon em{flex:none;font-style:normal}
.mq-bia-gia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px;padding:2px 0 4px}
.mq-bia-gia>.hc-truong:first-child{grid-column:1/-1}
.mq-bia-gia .hc-truong{margin-bottom:8px}

/* 0.9.1 — bia tươi: giá theo đơn vị (cốc kèm ml · lít · ca · tháp) */
.mq-bia-gia.tuoi>.mq-dv-khoi{grid-column:1/-1}
.mq-dv{display:flex;flex-direction:column;gap:6px}
.mq-dv-dong{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:8px;align-items:center}
.mq-dv-ten{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font:700 14.5px/1.3 var(--noi-dung);color:var(--chu)}
.mq-dv-ml{width:64px;min-height:40px;text-align:center;padding:0 4px}
.mq-dv-gia{min-height:44px;text-align:right}
.mq-dv-xoa{width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--nen-2);color:var(--mo)}
.mq-dv-them{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mq-dv-them>.hc-nut{flex:0 1 auto;min-height:40px}

/* ---- bước 5: mẫu, khổ, số bản, xem trước */
.mq-chon-mau>button{display:inline-flex;align-items:center;gap:8px}
.mq-mau-o{display:inline-flex;align-items:flex-end;gap:2px;width:30px;height:24px;padding:3px;border-radius:5px;border:2px solid;box-sizing:border-box;flex:none}
.mq-mau-o b{flex:1;height:6px;border-radius:2px}
.mq-chon-mau>button.chon .mq-mau-o{box-shadow:0 0 0 2px #fff}
.mq-dem{max-width:360px}
.mq-xem-truoc,.mq-giay{background:var(--nen-2);border-radius:var(--r-lon);padding:12px;margin:0 0 8px;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.mq-xem-truoc>svg,.mq-giay>svg{box-shadow:var(--bong-2);border-radius:2px;background:#fff;max-width:100%}
.mq-xem-truoc .hc-tai,.mq-giay .hc-tai{width:100%}
.mq-xem-truoc .hc-rong,.mq-giay .hc-rong{width:100%}
/* không để tờ giấy to hơn màn: đứng → giới hạn bề ngang theo chiều cao màn */
.mq-xem-truoc.doc>svg,.mq-giay.doc>svg{max-width:min(100%,calc((100vh - 170px) * 0.707))}
.mq-xem-truoc.ngang>svg,.mq-giay.ngang>svg{max-width:min(100%,calc((100vh - 170px) * 1.414))}
#mq-xem-phu{margin:0 2px 12px;font-size:13px}
.mq-mat-nhan{margin:10px 2px 4px;font:800 13px var(--tieu-de);color:var(--chu);letter-spacing:.02em}   /* "Mặt trước" / "Mặt sau" trên tờ menu in 2 mặt */
.mq-goi-y-kho{margin:6px 2px 4px;font-size:13px}
#mq-xem-phu svg{vertical-align:-2px}
/* chân bước 5: 3 nút → điện thoại xếp 2 hàng (nút vàng rộng hết ở hàng dưới) */
.mq-chan-5{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.mq-chan-5>.hc-nut{min-width:0;padding:0 12px}
.mq-chan-5>.hc-nut.chinh{grid-column:1/-1}
@media (min-width:640px){ .mq-chan-5{grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr)} .mq-chan-5>.hc-nut.chinh{grid-column:auto} }

/* ---- chữ ký trong tấm */
.mq-chu-ky{display:block;width:100%;max-width:480px;margin:0 auto 10px;border:1px solid var(--vien-2);border-radius:var(--r-vua);background:#fff}

/* ---- màn chi tiết: điện thoại xếp dọc (thông tin → tờ menu → ảnh, lịch sử); web 2 cột (tờ menu | thông tin) */
.mq-ct{display:block}
.mq-ct-tt .hc-hang-ngang{margin:4px 0 6px}
.mq-ct-mo-ta{margin:0 2px 10px;font-size:13.5px;line-height:1.45}
.mq-nut-anh{flex-wrap:wrap;margin:6px 0 12px}
.mq-nut-anh>.hc-nut{flex:1 1 auto}
.mq-ct-phu .hc-anh-luoi img{cursor:default}
.mq-huy{margin-top:8px;color:var(--do)}
.mq-ct-tt .hc-bao .hc-nut.chu{min-height:32px;padding:0 6px;vertical-align:baseline}
/* chân màn chi tiết: nút phụ vừa chữ, nút chính rộng phần còn lại (chữ dài không phải xuống dòng ở 390 px) */
.mq-chan-ct{display:grid;grid-template-columns:auto minmax(0,1fr)}
.mq-chan-ct>.hc-nut{min-width:0;padding:0 14px}
.mq-chan-ct>:only-child{grid-column:1/-1}
body.hc-web main.mq-web-ct .mq-ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-rows:auto 1fr;grid-template-areas:"giay tt" "giay phu";gap:0 24px;align-items:start}
body.hc-web main.mq-web-ct .mq-ct-tt{grid-area:tt}
body.hc-web main.mq-web-ct .mq-ct-giay{grid-area:giay;position:sticky;top:76px}
body.hc-web main.mq-web-ct .mq-ct-giay.mat2{position:static}   /* 2 mặt cao hơn màn hình → không dính đầu trang */
body.hc-web main.mq-web-ct .mq-ct-phu{grid-area:phu}
body.hc-web main.mq-web-ct .mq-giay{padding:20px}
body.hc-web main.mq-web-ct .mq-giay.doc>svg{max-width:min(100%,calc((100vh - 250px) * 0.707))}
body.hc-web main.mq-web-ct .mq-giay.ngang>svg{max-width:min(100%,calc((100vh - 250px) * 1.414))}
/* bản web của trình lập menu: gọn một cột 860 px, xem trước to hơn */
body.hc-web main.mq-web-lap .mq-buoc-nd,body.hc-web main.mq-web-lap .mq-buoc,body.hc-web main.mq-web-lap .mq-dau-quan{max-width:860px}

/* ---- sales admin: sửa trước khi in */
.mq-si-mon{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto;margin:4px 0 12px;padding:2px}
.mq-si-dong{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:6px}
.mq-si-dong input{min-height:44px}

/* ---- hàng đợi in (bản web) */
.mq-bang td{vertical-align:top}
.mq-bang .hc-phu{font-size:12.5px;margin-top:2px}
.mq-bang-nut{white-space:nowrap;text-align:right}
.mq-bang-nut>.hc-nut+.hc-nut{margin-left:6px}
.mq-lien{color:var(--chinh);text-decoration:none}
.mq-lien:hover{text-decoration:underline}
.mq-hero h2{margin-bottom:4px}
.mq-duyet-nut{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mq-duyet-nut>.hc-nut{flex:1 1 auto}
.mq-the-tc{margin:0 0 12px}

/* =====================================================================================================
   IN: bấm "In A4 / A5" → app chép tờ SVG vào .mq-to-in (con trực tiếp của body) + body.mq-in + body.mq-in-<trang>.
   Trang có tên cho từng khổ (lề 0 — tờ menu đã có lề riêng). !important: module khác có thể đặt @page không tên nạp sau tệp này.
   ===================================================================================================== */
.mq-to-in{display:none}
@page mqA3doc{size:A3 portrait!important;margin:0!important}
@page mqA3ngang{size:A3 landscape!important;margin:0!important}
@page mqA4doc{size:A4 portrait!important;margin:0!important}
@page mqA4ngang{size:A4 landscape!important;margin:0!important}
@page mqA5doc{size:A5 portrait!important;margin:0!important}
@page mqA5ngang{size:A5 landscape!important;margin:0!important}
@page mq2A5doc{size:A4 landscape!important;margin:0!important}   /* 2 tờ A5 đứng cạnh nhau trên A4 ngang */
@page mq2A5ngang{size:A4 portrait!important;margin:0!important}  /* 2 tờ A5 ngang chồng nhau trên A4 đứng */
@media print{
  html:has(body.mq-in),body.mq-in{background:#fff!important;margin:0!important;padding:0!important}
  body.mq-in>*:not(.mq-to-in){display:none!important}
  body.mq-in .mq-to-in{display:flex!important;position:relative;margin:0;padding:0;overflow:hidden;break-inside:avoid;page-break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.mq-in .mq-to-in *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.mq-in .mq-to-o{flex:none;display:block;overflow:hidden}
  body.mq-in .mq-to-o>svg{display:block;width:100%!important;height:100%!important;max-width:none!important;box-shadow:none!important;border-radius:0!important}
  body.mq-in-mqA3doc,body.mq-in-mqA3doc .mq-to-in{page:mqA3doc}
  body.mq-in-mqA3ngang,body.mq-in-mqA3ngang .mq-to-in{page:mqA3ngang}
  body.mq-in-mqA4doc,body.mq-in-mqA4doc .mq-to-in{page:mqA4doc}
  body.mq-in-mqA4ngang,body.mq-in-mqA4ngang .mq-to-in{page:mqA4ngang}
  body.mq-in-mqA5doc,body.mq-in-mqA5doc .mq-to-in{page:mqA5doc}
  body.mq-in-mqA5ngang,body.mq-in-mqA5ngang .mq-to-in{page:mqA5ngang}
  body.mq-in-mq2A5doc,body.mq-in-mq2A5doc .mq-to-in{page:mq2A5doc}
  body.mq-in-mq2A5ngang,body.mq-in-mq2A5ngang .mq-to-in{page:mq2A5ngang}
  body.mq-in-mqA3doc .mq-to-in,body.mq-in-mqA3doc .mq-to-o{width:296.8mm;height:419.8mm}
  body.mq-in-mqA3ngang .mq-to-in,body.mq-in-mqA3ngang .mq-to-o{width:419.8mm;height:296.8mm}
  body.mq-in-mqA4doc .mq-to-in,body.mq-in-mqA4doc .mq-to-o{width:210mm;height:296.8mm}
  body.mq-in-mqA4ngang .mq-to-in,body.mq-in-mqA4ngang .mq-to-o{width:296.8mm;height:209.8mm}
  body.mq-in-mqA5doc .mq-to-in,body.mq-in-mqA5doc .mq-to-o{width:148mm;height:209.8mm}
  body.mq-in-mqA5ngang .mq-to-in,body.mq-in-mqA5ngang .mq-to-o{width:209.8mm;height:147.8mm}
  body.mq-in-mq2A5doc .mq-to-in{width:296.8mm;height:209.8mm;flex-direction:row;justify-content:center}
  body.mq-in-mq2A5doc .mq-to-o{width:148mm;height:209.8mm}
  body.mq-in-mq2A5ngang .mq-to-in{width:210mm;height:296.8mm;flex-direction:column;justify-content:center}
  body.mq-in-mq2A5ngang .mq-to-o{width:210mm;height:148mm}
  /* 0.9.1 — in 2 MẶT: mặt trước rồi mặt sau, mỗi mặt một trang cùng khổ (khung .mq-to-in cao tự do, mỗi .mq-to-o đúng một trang) */
  body.mq-in .mq-to-in.mat2{display:block!important;height:auto!important;overflow:visible;break-inside:auto;page-break-inside:auto}
  body.mq-in .mq-to-in.mat2 .mq-to-o{break-after:page;page-break-after:always}
  body.mq-in .mq-to-in.mat2 .mq-to-o:last-child{break-after:auto;page-break-after:auto}
  /* vạch cắt đôi mảnh giữa 2 tờ A5 */
  body.mq-in .mq-to-in.hai::after{content:"";position:absolute;border:0 dashed color-mix(in srgb,var(--cham) 45%,#fff)}
  body.mq-in-mq2A5doc .mq-to-in.hai::after{top:0;bottom:0;left:50%;border-left-width:.2mm}
  body.mq-in-mq2A5ngang .mq-to-in.hai::after{left:0;right:0;top:50%;border-top-width:.2mm}
}