/* Trang "Xem thử trong app": khung điện thoại mô phỏng mini app + bảng thông tin tích hợp. */
.pv { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 28px; align-items: start; }
.pv-phone-col { position: sticky; top: calc(var(--topbar-h) + 24px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pv-phone { position: relative; width: 390px; height: min(780px, calc(100vh - var(--topbar-h) - 90px)); min-height: 560px; padding: 12px;
            border-radius: 44px; background: #111827; box-shadow: var(--shadow-lg); }
.pv-notch { position: absolute; top: 18px; left: 50%; width: 92px; height: 22px; margin-left: -46px; border-radius: 12px; background: #000; z-index: 5; }
.pv-screen { position: relative; height: 100%; overflow: hidden; border-radius: 34px; background: #eef1fb; }
.pv-hint { font-size: 13px; text-align: center; max-width: 360px; }

/* --- mini app giả lập --- */
.pv-app { display: flex; flex-direction: column; height: 100%; }
.pv-appbar, .pv-trackbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 44px 14px 10px; background: #fff; border-bottom: 1px solid var(--line); }
.pv-app-logo { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
               background: #3b5bdb; color: #fff; font-weight: 700; }
.pv-app-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pv-app-title b { font-size: 15px; }
.pv-app-title span { font-size: 12px; color: var(--ok); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-capsule { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--text-2); }
.pv-capsule span { padding: 4px 10px; }
.pv-capsule span + span { border-left: 1px solid var(--line); }
.pv-chat { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pv-msg { max-width: 82%; display: flex; flex-direction: column; gap: 2px; }
.pv-msg div { padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.pv-msg span { font-size: 11px; color: var(--muted); padding: 0 4px; }
.pv-msg.me { align-self: flex-end; align-items: flex-end; }
.pv-msg.me div { background: #3b5bdb; color: #fff; border-bottom-right-radius: 4px; }
.pv-msg.bot div { background: #fff; border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.pv-empty { margin: auto; text-align: center; color: var(--text-2); font-size: 14px; padding: 0 24px; }
.pv-order { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; width: 88%; padding: 12px 14px; border-radius: 14px;
            background: #fff; box-shadow: var(--shadow); cursor: pointer; font-size: 13px; }
.pv-order:hover { box-shadow: 0 0 0 2px #c5d0fa, var(--shadow); }
.pv-order:focus-visible { outline: 2px solid #3b5bdb; outline-offset: 2px; }
.pv-order[disabled] { opacity: .6; cursor: progress; }
.pv-order-top { display: flex; align-items: center; gap: 8px; }
.pv-order-top b { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-st { margin-left: auto; flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--info-50); color: var(--info); }
.pv-st.tone-ok { background: var(--ok-50); color: var(--ok); }
.pv-st.tone-bad { background: var(--danger-50); color: var(--danger); }
.pv-st.tone-warn { background: var(--warn-50); color: var(--warn); }
.pv-order-addr { color: var(--text-2); }
.pv-order-foot { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.pv-order-cta { color: #3b5bdb; font-weight: 600; }
.pv-chips { flex: none; display: flex; gap: 8px; padding: 0 12px 8px; overflow-x: auto; }
.pv-chip { flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm);
           font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.pv-chip:hover { box-shadow: 0 0 0 2px #c5d0fa; }
.pv-input { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 12px 18px; padding: 6px 6px 6px 16px; border-radius: 999px;
            background: #fff; box-shadow: var(--shadow-sm); }
.pv-input input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 14px; background: none; }
.pv-input button { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: #3b5bdb; color: #fff; font-size: 16px; cursor: pointer; }

/* món, giỏ hàng trong chat */
.pv-dishes { display: flex; flex-direction: column; gap: 8px; width: 92%; }
.pv-dish { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.pv-dish-ico { width: 46px; height: 46px; flex: none; border-radius: 12px; background: #fff4e6; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.pv-dish-info { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.3; }
.pv-dish-info span { color: var(--muted); font-size: 12px; }
.pv-dish-info .pv-dish-tag { align-self: flex-start; padding: 1px 6px; border-radius: 4px; background: #fff1e8; color: var(--aha); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.pv-price { color: var(--text); }
.pv-add { margin-left: auto; flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: #3b5bdb; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pv-cart { width: 94%; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.pv-cart-head { display: flex; flex-direction: column; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.pv-cart-head b { font-size: 15px; }
.pv-cart-head span { color: var(--muted); font-size: 12px; }
.pv-cart-sec { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pv-line { display: flex; align-items: center; gap: 10px; }
.pv-line > span:first-child { font-size: 22px; }
.pv-line > div:nth-child(2) { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pv-line > div:nth-child(2) span { color: var(--muted); font-size: 12px; }
.pv-qty { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; }
.pv-qty button { width: 28px; height: 28px; border: 0; background: none; font-size: 16px; cursor: pointer; color: #3b5bdb; }
.pv-qty span { min-width: 16px; text-align: center; font-weight: 600; }
.pv-qty-ro { margin-left: auto; font-weight: 600; }
.pv-cart-addr { display: flex; flex-direction: column; line-height: 1.35; }
.pv-cart-addr span { color: var(--text-2); font-size: 12px; }
.pv-pay { padding: 8px 10px; border-radius: 10px; border: 1.5px solid #3b5bdb; background: #eef2ff; font-weight: 500; }
.pv-sum { display: flex; justify-content: space-between; color: var(--text-2); }
.pv-sum:first-of-type { margin-top: 6px; }
.pv-sum.total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 15px; }
.pv-sum.total span:last-child { color: #e8590c; }
.pv-warn { padding: 6px 8px; border-radius: 8px; background: var(--warn-50); color: var(--warn); font-size: 12px; }
.pv-paybtn { margin-top: 6px; height: 44px; border: 0; border-radius: 12px; background: #3b5bdb; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.pv-paybtn[disabled] { background: #a5b4fc; cursor: progress; }
.pv-paid { margin-top: 6px; text-align: center; color: var(--ok); font-weight: 600; }
.pv-cart.locked { opacity: .85; }

/* --- màn theo dõi (trang nhúng) --- */
.pv-track { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: #fff; animation: pv-in .2s ease-out; }
@keyframes pv-in { from { transform: translateX(30px); opacity: 0; } }
.pv-back { all: unset; cursor: pointer; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
           border-radius: 8px; font-size: 26px; line-height: 1; color: var(--text); }
.pv-back:hover { background: var(--grey-50); }
.pv-trackbar b { font-size: 15px; }
.pv-track iframe { flex: 1; width: 100%; border: 0; }

/* --- bảng bên phải --- */
.pv-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pv-card { padding: 16px 18px; }
.pv-card h2 { font-size: 15px; font-weight: 600; }
.pv-card-head { display: flex; align-items: center; justify-content: space-between; }
.pv-select { width: 100%; margin-top: 10px; height: 40px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
             font: inherit; background: var(--surface); }
.pv-link { margin-top: 14px; }
.pv-label { font-size: 12px; color: var(--muted); }
.pv-url { margin-top: 4px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line);
          overflow-wrap: anywhere; font-size: 12px; }
.pv-url code { font-family: var(--mono); }
.pv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pv-log { margin-top: 10px; max-height: 340px; overflow-y: auto; font-size: 13px; }
.pv-log-row { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); align-items: baseline; }
.pv-log-row:first-child { border-top: 0; }
.pv-log-row code { font-family: var(--mono); font-size: 12px; color: var(--brand-600); }
.pv-log-row.k-app code { color: #3b5bdb; }
.pv-log-row.k-msg code { color: var(--text-2); }
.pv-log-row.k-err code, .pv-log-row.k-err span:last-child { color: var(--danger); }
.pv-note { margin: 4px 0 0; font-size: 13px; }
.pv-head-actions { display: flex; gap: 6px; }
.pv-log-row span:last-child { overflow-wrap: anywhere; color: var(--text-2); }
.pv-log-empty { padding: 6px 0; font-size: 13px; }
.pv-code summary { cursor: pointer; list-style: none; }
.pv-code summary::-webkit-details-marker { display: none; }
.pv-code summary h2::after { content: " ▾"; color: var(--muted); }
.pv-code pre { margin: 12px 0 0; padding: 12px; border-radius: var(--radius-sm); background: var(--ink); color: #dbe4f0; overflow-x: auto;
               font: 12px/1.55 var(--mono); }

@media (max-width: 1100px) { .pv { grid-template-columns: 1fr; } .pv-phone-col { position: static; } }
@media (max-width: 860px) {
  .pv-phone { width: 100%; max-width: 390px; height: 720px; padding: 8px; border-radius: 36px; }
  .pv-screen { border-radius: 30px; }
}

/* --- chọn đơn vị giao --- */
.pv-cart-sec { display: flex; align-items: center; }
.pv-link-btn { margin-left: auto; padding: 0; border: 0; background: none; color: #3b5bdb; font: inherit; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
.pv-addr-note { color: var(--text) !important; }
.pv-carriers { display: flex; flex-direction: column; gap: 6px; }
.pv-carrier { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; }
.pv-carrier input { margin: 3px 0 0; accent-color: #3b5bdb; }
.pv-carrier div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pv-carrier span { color: var(--muted); font-size: 12px; }
.pv-carrier.on { border-color: #3b5bdb; background: #eef2ff; }
.pv-carrier.off { opacity: .55; }
.pv-carrier.off input { pointer-events: none; }

/* --- bảng chọn nơi nhận --- */
.pv-sheet-wrap { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: flex-end; }
.pv-sheet-bg { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.pv-sheet { position: relative; max-height: 88%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 18px;
            border-radius: 20px 20px 0 0; background: #fff; animation: pv-up .2s ease-out; font-size: 13px; }
@keyframes pv-up { from { transform: translateY(40px); opacity: 0; } }
.pv-sheet-head { display: flex; align-items: center; gap: 8px; }
.pv-sheet-head b { font-size: 16px; }
.pv-x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--grey-50); cursor: pointer; }
.pv-search input, .pv-note-field input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; font: inherit; font-size: 14px; }
.pv-places { display: flex; flex-direction: column; gap: 4px; }
.pv-place { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; cursor: pointer; }
.pv-place:hover { background: var(--grey-50); }
.pv-place.on { background: #eef2ff; box-shadow: inset 0 0 0 1.5px #3b5bdb; }
.pv-place > span { font-size: 18px; line-height: 1.2; }
.pv-place div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pv-place div span { color: var(--text-2); font-size: 12px; }
.pv-none { padding: 6px 8px; font-size: 12px; }
.pv-note-field { display: flex; flex-direction: column; gap: 4px; }
.pv-note-field span { font-size: 12px; color: var(--muted); }
.pv-pick-addr { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.pv-pick-addr span { color: var(--text-2); font-size: 12px; }
.pv-pickmap { position: relative; flex: none; height: 230px; border-radius: 12px; overflow: hidden; isolation: isolate; }
.pv-pickmap-map { position: absolute; inset: 0; }
.pv-pickmap-pin { position: absolute; left: 50%; top: 50%; z-index: 500; transform: translate(-50%, -100%); font-size: 30px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.pv-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.pv-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--grey-50); color: var(--text-2) !important; font-size: 11px !important; font-weight: 600; }
.pv-badge.rec { background: #3b5bdb; color: #fff !important; }
.pv-carrier.rec:not(.on) { border-color: #c5d0fa; }
.pv-log-row.k-hook code { color: #9c36b5; }

/* Ô nhập địa chỉ + gợi ý thả xuống phủ lên bản đồ */
.pv-search { position: relative; z-index: 700; }
.pv-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  padding: 4px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }
.pv-sugg[hidden] { display: none; }
.pv-pickmap-hint { position: absolute; left: 50%; bottom: 8px; z-index: 500; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, .7); color: #fff; font-size: 11px; white-space: nowrap; pointer-events: none; }
.pv-saved { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.pv-saved-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface, #fff); font: inherit; font-size: 12px; cursor: pointer; }
.pv-saved-chip.on { background: #eef2ff; border-color: #3b5bdb; color: #3b5bdb; }