/* ============================================================ pos.css — POS full-screen (port từ Prototype/pos-ui.css + brand tokens §0.4) ============================================================ */ :root { --primary: #D94F1E; --accent: #F5A623; --primary-grad: linear-gradient(135deg, #D94F1E 0%, #FF6C3A 100%); --sidebar-bg: #1A0F0A; --ink: #1E293B; --ink-2: #64748B; --ink-3: #94A3B8; --line: #E2E8F0; --surface-dark: #14100C; --surface-darker: #0D0A07; --surface-panel: #211A14; --ok: #10B981; --ok-bg: #ECFDF5; --warn: #F59E0B; --warn-bg: #FEF3C7; --crit: #EF4444; --crit-bg: #FEF2F2; --info: #3B82F6; --info-bg: #EFF6FF; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --sh-sm: 0 2px 4px rgba(0,0,0,.05); --sh-md: 0 10px 20px -6px rgba(0,0,0,.12); --sh-lg: 0 24px 40px -10px rgba(0,0,0,.28); --tr: all .2s cubic-bezier(.4,0,.2,1); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body.pos { font-family: 'Be Vietnam Pro', system-ui, sans-serif; background: var(--surface-dark); color: var(--ink); overflow: hidden; user-select: none; } [x-cloak] { display: none !important; } .money { font-weight: 700; font-variant-numeric: tabular-nums; } /* ---- Shell grid ---- */ /* Cột rail 168px: ngón tay cần ô bấm ≥ 60px mỗi chiều, 92px cũ chỉ vừa con trỏ chuột. */ /* minmax(0,1fr) chứ không phải 1fr: '1fr' = minmax(AUTO,1fr), nên hàng thứ hai vẫn phình theo nội dung cột cao nhất. Giỏ nhiều món là đủ để đẩy nút "Thanh toán" và "Gợi ý Combo" xuống dưới đáy màn — body overflow:hidden nên không có cách nào cuộn tới. Hàng 'banner' cao auto: không có băng cảnh báo thì cao 0, có thì đẩy ba vùng bán xuống. */ .pos-shell { display: grid; grid-template-columns: 168px 1fr 380px; grid-template-rows: 56px auto minmax(0, 1fr); height: 100vh; grid-template-areas: "top top top" "banner banner banner" "rail grid cart"; overflow: hidden; } .pos-top { grid-area: top; background: var(--surface-darker); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; } .pos-top .brand { font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: .3px; } .pos-top .brand b { background: var(--primary-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pos-top .meta { display: flex; align-items: center; gap: 14px; font-size: .82rem; color: #d8cfc8; } .online-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 5px; } .online-dot.off { background: var(--crit); } /* ---- Category rail ---- Máy quầy dùng màn cảm ứng: mỗi nút là một mục tiêu chạm, không phải một dòng menu. Danh mục cuộn riêng trong .rail-scroll để nút "Gợi ý Combo" luôn đứng yên dưới đáy — để chung một vùng cuộn thì shop nhiều danh mục sẽ đẩy nó ra khỏi màn hình. */ .pos-rail { grid-area: rail; background: var(--sidebar-bg); display: flex; flex-direction: column; align-items: stretch; padding: 10px 8px; overflow: hidden; min-height: 0; } .rail-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; } .rail-scroll::-webkit-scrollbar { width: 6px; } .rail-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; } .rail-btn { background: rgba(255,255,255,.04); border: none; color: #e0d2c8; border-radius: 14px; padding: 12px 8px; font-size: .88rem; font-weight: 700; cursor: pointer; transition: var(--tr); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; line-height: 1.2; min-height: 64px; flex: none; text-align: center; overflow-wrap: anywhere; } .rail-btn i { font-size: 1.5rem; } /* Chấm màu nhóm — cùng màu với mặt thẻ món bên lưới, để rail là chỗ học bảng màu. Viền trắng mờ để chấm tối (nhóm màu đá/tím đậm) không chìm vào nền rail cũng tối. */ .rail-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px rgba(255,255,255,.35); } .rail-btn.active { background: var(--primary-grad); color: #fff; box-shadow: var(--sh-sm); } /* Nút đang chọn đã đổi hẳn nền sang gradient thương hiệu; giữ chấm ở đó là hai màu chỏi nhau. */ .rail-btn.active .rail-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); } .rail-btn:hover:not(.active) { background: rgba(255,255,255,.1); color: #fff; } .rail-btn:active { transform: scale(.96); } /* Vạch ngăn: dưới nó không còn là "lọc thực đơn" mà là công cụ trên giỏ hàng. */ .rail-sep { flex: none; height: 1px; background: rgba(255,255,255,.16); margin: 8px 4px; } .rail-tool { flex: none; min-height: 74px; border-radius: 14px; cursor: pointer; position: relative; border: 1.5px dashed rgba(245,166,35,.55); background: rgba(245,166,35,.12); color: var(--accent); font-family: inherit; font-weight: 800; font-size: .86rem; line-height: 1.2; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: var(--tr); } .rail-tool i { font-size: 1.5rem; } .rail-tool:hover { background: rgba(245,166,35,.2); } .rail-tool:active { transform: scale(.96); } .rail-tool .cnt { position: absolute; top: 6px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 20px; background: var(--ok); color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } /* ---- Product grid ---- */ .pos-grid { grid-area: grid; background: #F6F1EC; padding: 14px; overflow-y: auto; min-height: 0; } .grid-search { display: flex; gap: 10px; margin-bottom: 12px; } .grid-search input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; font-size: .95rem; font-family: inherit; background: #fff; } .prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .prod-card { background: #fff; border-radius: var(--r-md); padding: 12px; cursor: pointer; box-shadow: var(--sh-sm); transition: var(--tr); border: 2px solid transparent; position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 108px; } .prod-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--primary); } .prod-card .name { font-weight: 600; font-size: .86rem; line-height: 1.2; } /* ---- Mặt thẻ món: ảnh → emoji → chữ viết tắt (V0045) ---- aspect-ratio CỐ ĐỊNH cho cả ba tầng. Đây là điều kiện sống còn của lưới trộn: cho khung cao theo nội dung thì thẻ có ảnh cao hơn thẻ không ảnh, hàng so le, và mắt mất luôn cái lưới đều đặn vốn là thứ giúp nhớ vị trí món. 4:3 chứ không 1:1 — vuông ăn thêm ~25% chiều cao mỗi thẻ, đổi lại mỗi màn hình mất gần một hàng món. Nền .face luôn là màu nhóm, kể cả khi vẽ ảnh đè lên: ảnh nền trong suốt (PNG cắt viền) rơi xuống đúng màu nhóm thay vì lọt xuống nền trắng của thẻ. */ .prod-card .face { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .prod-card .face-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Chữ viết tắt in TRẮNG trên nền màu đậm — bảng màu trong CatalogVisual chọn theo đúng ràng buộc này. Bóng chữ mảnh để nét không tan vào ảnh nền ở những tông sáng hơn. */ .prod-card .face-glyph { color: #fff; font-weight: 800; font-size: 1.5rem; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.25); } /* Emoji thì bỏ giãn cách và bóng chữ: hai thứ đó làm biến dạng glyph màu. */ .prod-card .face-glyph.is-emoji { font-size: 2rem; letter-spacing: 0; text-shadow: none; } /* Chế độ 'text': không mặt thẻ, chỉ vạch màu nhóm bám mép trái. Thẻ thấp hơn nên một màn chứa thêm được khoảng một hàng rưỡi món — dành cho thực đơn dài mà thu ngân đã thuộc mặt chữ. */ .prod-card.lean { padding-left: 16px; } .prod-card .cat-bar { position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 0 4px 4px 0; } .prod-card .price { color: var(--primary); font-weight: 700; margin-top: auto; } .prod-card .combo-tag { position: absolute; top: 8px; right: 8px; font-size: .6rem; font-weight: 700; background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 20px; } /* Thẻ có hai lối đi (Lẻ / Combo): thân thẻ không còn bấm được nên bỏ luôn con trỏ tay, tránh mời gọi một cú chạm không có tác dụng gì. */ .prod-card.has-pick { cursor: default; } .prod-card .pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; } .prod-card .pick-btn { padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-family: inherit; font-weight: 700; font-size: .8rem; cursor: pointer; transition: var(--tr); } .prod-card .pick-btn:hover { border-color: var(--primary); color: var(--primary); } .prod-card .pick-btn.combo { background: var(--accent); border-color: var(--accent); color: #fff; } .prod-card .pick-btn.combo:hover { filter: brightness(1.08); color: #fff; } /* Thẻ hết món: nút vẫn hiện nhưng lớp phủ "HẾT" nằm trên, nên chặn luôn con trỏ để không bấm xuyên. */ .prod-card.out .pick-row { pointer-events: none; } .prod-card.out { opacity: .45; cursor: not-allowed; filter: grayscale(.6); } .prod-card.out::after { content: "HẾT"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--crit); font-size: 1.1rem; letter-spacing: 2px; background: rgba(255,255,255,.35); border-radius: var(--r-md); } /* ---- Cart panel ---- */ /* min-height:0 ở CẢ hai tầng (grid item và flex item): thiếu một tầng là danh sách món cứ dài ra thay vì cuộn, kéo theo phần tổng tiền + nút thanh toán rơi khỏi màn hình. */ .pos-cart { grid-area: cart; background: #fff; display: flex; flex-direction: column; border-left: 1px solid var(--line); min-height: 0; overflow: hidden; } /* ---- Loại đơn (hàng nút đầu giỏ) ---- Màu từng loại khớp nhãn loại đơn trên makeline (.type-take / .type-dine / .type-del) để thu ngân và bếp đọc cùng một bảng màu. Mang về — mặc định — giữ tông trung tính: nút ĐANG chọn chỉ "kêu" khi đơn khác mặc định, đúng lúc cần thu ngân để ý. */ .cart-type { flex: none; display: flex; gap: 6px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); } .ot-btn { --ot: var(--ink-2); --ot-bg: #EEF2F6; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 4px; cursor: pointer; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink-2); font-family: inherit; font-weight: 700; font-size: .8rem; transition: var(--tr); } .ot-btn i { font-size: 1.05rem; line-height: 1; } .ot-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ot-btn:active { transform: scale(.96); } /* Từ 3 nút trở lên: icon trên, chữ dưới (như .cart-tool). Xếp ngang thì 4 nút trong 380px cắt chữ thành "Mang …" / "Giao …" — thu ngân phải nhận nút bằng icon, đúng thứ ta không muốn. */ .cart-type.stacked .ot-btn { flex-direction: column; gap: 3px; min-height: 50px; font-size: .74rem; } .ot-btn.on { border-color: var(--ot); background: var(--ot-bg); color: var(--ot); box-shadow: inset 0 0 0 1px var(--ot); } .ot-dine_in { --ot: #16A34A; --ot-bg: #ECFDF5; } .ot-delivery { --ot: var(--info); --ot-bg: var(--info-bg); } .ot-platform { --ot: #7C3AED; --ot-bg: #F5F3FF; } /* Mang về đang chọn: viền đậm thôi, không tô màu — đây là trạng thái của đa số đơn. */ .ot-take_away.on { --ot: var(--ink); --ot-bg: #F8FAFC; } /* Chip loại đơn trên tiêu đề màn Thanh toán — cùng màu với nút trong giỏ. */ /* Không khai --ot ở đây: .pay-type đứng SAU .ot-dine_in… nên khai ở đây sẽ đè mất màu từng loại. */ .pay-type { display: inline-flex; align-items: center; gap: 5px; margin: 0 4px; padding: 3px 10px; border: 1.5px solid var(--ot, var(--ink-2)); border-radius: 999px; background: var(--ot-bg, #F1F5F9); color: var(--ot, var(--ink-2)); font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; vertical-align: middle; } .pay-type.ot-take_away { --ot: var(--ink-2); --ot-bg: #F1F5F9; } .cart-cust { flex: none; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; cursor: pointer; transition: var(--tr); } .cart-cust:hover { background: #F8FAFC; } .cart-cust > .bi:first-child { font-size: 1.6rem; color: var(--ink-3); } .cart-cust > .bi-search { color: var(--ink-3); } .cart-cust .who { flex: 1; min-width: 0; } .cart-cust .who .nm { font-weight: 700; font-size: .9rem; } .cart-cust .who .pts { font-size: .74rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Có món mà chưa ai hỏi SĐT: dải đổi màu cảnh báo — nhắc, chưa phải lỗi. */ .cart-cust.pending { background: var(--warn-bg); box-shadow: inset 4px 0 0 var(--warn); } .cart-cust.pending > .bi:first-child, .cart-cust.pending .who .nm { color: #B45309; } /* ---- Tra / tạo khách theo SĐT (_CustomerLookup) ---- */ .cust-lookup-row { display: flex; gap: 8px; align-items: stretch; } .cust-lookup-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; font-size: 1rem; font-family: inherit; user-select: text; } .cust-lookup-row input[type=tel] { font-size: 1.08rem; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .cust-lookup-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(217,79,30,.15); } .cust-lookup-row .ui-btn { padding: 0 14px; white-space: nowrap; } .cust-lookup-new { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); } .cust-lookup-hint { font-size: .8rem; color: var(--ink-2); margin-bottom: 6px; } .cust-lookup-hint.crit { color: var(--crit); margin: 6px 0 0; } .cust-name-search { margin-top: 8px; } .cust-name-search .cust-lookup-hint { margin: 6px 0 0; } .cust-suggest { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .cust-suggest-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; } .cust-suggest-item:last-child { border-bottom: 0; } .cust-suggest-item:hover, .cust-suggest-item:focus { background: rgba(217,79,30,.07); outline: none; } .cust-suggest-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cust-suggest-phone { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; } /* ---- Khung khách đầu màn thanh toán ---- */ .pay-cust { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 14px; } .pay-cust.pending { border-color: var(--warn); background: var(--warn-bg); } .pay-cust.required { border-color: var(--crit); background: var(--crit-bg); } .pay-cust-title { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; color: #B45309; margin-bottom: 8px; } .pay-cust.required .pay-cust-title { color: var(--crit); } .pay-cust-row { display: flex; align-items: center; gap: 10px; } .pay-cust-row > .bi { font-size: 1.3rem; color: var(--ok); } .pay-cust-row > .bi-person { color: var(--ink-3); } .pay-cust-row .who { flex: 1; min-width: 0; } .pay-cust-row .nm { font-weight: 700; font-size: .92rem; } .pay-cust-row .sub { font-size: .76rem; color: var(--ink-2); } .pay-cust-row .ui-btn { padding: 6px 12px; } /* ---- Khung thành viên (pos.loyalty_panel_mode — _LoyaltyCard + dòng tóm tắt ở dải khách) ---- */ .loy-tier { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: #92400E; background: linear-gradient(135deg, #FDE68A, #FCD34D); white-space: nowrap; } .loy-tier.sm { padding: 1px 8px; font-size: .68rem; } .cust-loy { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0; } .cust-loy .loy-line { font-size: .72rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .loy-gift-dot { flex: none; font-size: .72rem; font-weight: 800; color: var(--primary); } .loy-line.k-warn, .loy-hl.k-warn { color: #B45309; } .loy-line.k-ok, .loy-hl.k-ok { color: #047857; } .loy-line.k-gift { color: var(--primary); font-weight: 700; } .loy-card { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: #FFFBEB; border: 1px solid #FDE68A; } .ui-modal-bd > .loy-card:first-child { margin-top: 0; } .loy-head { display: flex; align-items: center; gap: 8px; } .loy-mult { font-size: .72rem; font-weight: 700; color: #047857; } .loy-pts { margin-left: auto; font-size: .82rem; color: var(--ink-2); } .loy-pts b { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; } .loy-progress { margin-top: 8px; } .loy-bar { height: 6px; border-radius: 999px; background: #FEF3C7; overflow: hidden; } .loy-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F59E0B, #D94F1E); } .loy-sub { font-size: .74rem; color: var(--ink-2); margin-top: 3px; } .loy-hl { display: flex; gap: 6px; align-items: baseline; font-size: .8rem; color: var(--ink-2); margin-top: 6px; } .loy-gifts { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #FCD34D; } .loy-gifts-ttl { font-size: .78rem; font-weight: 800; color: var(--primary); margin-bottom: 4px; } .loy-gift { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .loy-gift + .loy-gift { border-top: 1px solid #FEF3C7; } .loy-gift .who { flex: 1; min-width: 0; } .loy-gift .nm { font-weight: 700; font-size: .86rem; } .loy-gift .loy-apply { padding: 4px 12px; font-size: .8rem; border-width: 1.5px; } .loy-tag { font-size: .72rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; } .loy-tag.ok { color: #047857; } .cart-lines { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px; } .cart-empty { text-align: center; color: var(--ink-3); padding: 40px 10px; font-size: .9rem; } .cart-line { padding: 10px 8px; border-bottom: 1px dashed var(--line); } .cart-line .top { display: flex; justify-content: space-between; gap: 8px; } /* Dòng mở lại được màn tùy chọn. Vùng bấm nới rộng bằng padding âm bù lại: ngón tay trên màn cảm ứng không nhắm trúng một dòng chữ cao 16px. */ .cart-line .top.editable { cursor: pointer; margin: -4px -6px 0; padding: 4px 6px 0; border-radius: 8px; } .cart-line .top.editable:active { background: var(--info-bg, #EFF6FF); } .cart-line .nm { font-weight: 600; font-size: .88rem; } .cart-line .nm .edit-hint { margin-left: 6px; font-size: .78rem; color: var(--ink-3); } /* Nhãn "Chỉnh" trên đầu modal — thu ngân phải phân biệt được đang sửa dòng cũ hay thêm dòng mới, vì nút cuối modal làm hai việc khác hẳn nhau. */ .opt-edit-tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #1D4ED8; background: var(--info-bg, #EFF6FF); vertical-align: middle; } .cart-line .mods { font-size: .74rem; color: var(--ink-2); margin-top: 2px; } .cart-line .qtyrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .qbtn { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 700; color: var(--ink); } /* Dòng "đổi điểm" không giới hạn số lượng — cho khối tổng tiền tự cuộn thay vì đẩy nút thanh toán đi. */ .cart-totals { flex: none; max-height: 38%; overflow-y: auto; padding: 12px 16px; border-top: 1px solid var(--line); font-size: .88rem; } .cart-totals .row { display: flex; justify-content: space-between; padding: 3px 0; color: var(--ink-2); } .cart-totals .row.grand { font-size: 1.25rem; font-weight: 800; color: var(--ink); padding-top: 8px; } .cart-totals .row.disc { color: var(--ok); } .cart-actions { flex: none; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); } /* Một dòng, chia đều — flex chứ không grid cột cố định: nút "Giảm giá" ẩn theo quyền, grid sẽ để lại một ô trống còn flex thì bốn nút còn lại tự giãn ra lấp chỗ. */ .cart-tools { display: flex; gap: 6px; } .cart-tool { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px; min-height: 54px; cursor: pointer; border: none; border-radius: var(--r-md); background: #F1F5F9; color: var(--ink-2); font-family: inherit; font-weight: 600; transition: var(--tr); } .cart-tool i { font-size: 1.15rem; line-height: 1; } /* Nhãn vẫn giữ chữ: icon trần bắt thu ngân mới phải đoán, mà đoán sai ở đây là mất tiền (bấm "Giữ đơn" khi định mở "Đơn giữ" là xoá sạch giỏ đang gọi dở). */ .cart-tool span { font-size: .66rem; line-height: 1.1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .cart-tool:hover { background: #E2E8F0; color: var(--ink); } .cart-tool:active { transform: scale(.96); } /* ---- Guided selling footer ---- */ .guided { grid-column: 2 / 3; } /* left phải bám theo bề rộng rail (168px) — lệch là chip đè lên cột danh mục. */ .guided-bar { position: absolute; left: 176px; right: 392px; bottom: 12px; display: flex; gap: 10px; z-index: 40; } /* Cả chip là vùng bấm đồng ý — xem chú thích ở Index.cshtml. */ .guided-chip { background: #fff; border: 2px solid var(--accent); border-radius: 30px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; box-shadow: var(--sh-md); font-size: .82rem; font-weight: 600; cursor: pointer; user-select: none; transition: var(--tr); } .guided-chip:hover { box-shadow: var(--sh-lg); } .guided-chip:active { transform: scale(.98); } .guided-chip .yn { display: flex; gap: 4px; } .guided-chip .yn button { border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-weight: 700; } .guided-chip .yn .y { background: var(--ok); color: #fff; } .guided-chip .yn .n { background: #EEF2F6; color: var(--ink-2); } /* Mời lại sau khi món bị bỏ ra: cố tình nhạt hơn lời mời đầu — nó chỉ để cứu cú bấm nhầm, không được tranh chỗ với gợi ý mới. */ .guided-chip.reoffer { border-color: #E2E8F0; color: var(--ink-2); font-weight: 500; box-shadow: var(--sh-sm); } .guided-chip.reoffer .yn .y { background: #E2E8F0; color: var(--ink-2); } /* Khay chọn nhanh của kịch bản gợi ý */ /* Nhóm nước có thể tới vài chục món — lưới tự giãn cột và để .ui-modal-bd cuộn, không cắt bớt. */ .up-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .up-pick.lines { grid-template-columns: 1fr; } .up-hint { grid-column: 1 / -1; margin: 0 0 2px; font-size: .82rem; color: var(--ink-2); } .up-tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 2px solid #EEF2F6; border-radius: var(--r-md); padding: 14px 16px; font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; transition: var(--tr); } .up-tile:hover { border-color: var(--accent); } .up-tile:active { transform: scale(.97); } .up-tile .pr { font-weight: 700; color: var(--ink-2); white-space: nowrap; } /* ---- Buttons ---- */ .ui-btn { font-family: inherit; font-weight: 600; border: none; border-radius: var(--r-md); cursor: pointer; transition: var(--tr); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; font-size: .92rem; } .ui-btn:active { transform: scale(.97); } .ui-btn:disabled { opacity: .45; cursor: not-allowed; } .ui-btn-primary { background: var(--primary-grad); color: #fff; box-shadow: 0 4px 12px rgba(217,79,30,.25); } .ui-btn-outline { background: #fff; color: var(--primary); border: 2px solid var(--primary); } .ui-btn-ghost { background: #F1F5F9; color: var(--ink-2); } .ui-btn-ok { background: var(--ok); color: #fff; } .ui-btn-crit { background: var(--crit); color: #fff; } .ui-btn-lg { padding: 15px 26px; font-size: 1.05rem; } .ui-btn-block { width: 100%; } /* ---- Idle overlay + T0 ---- */ .idle { position: fixed; inset: 0; background: var(--primary-grad); color: #fff; z-index: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; } .idle h1 { font-family: 'Outfit', sans-serif; font-size: 2.6rem; font-weight: 800; margin: 0; } .idle p { font-size: 1.05rem; opacity: .92; margin: 0; } .idle .actions { display: flex; gap: 14px; } /* Vừa dùng cho