/* lp-nhieu-be.css — Đặt lịch nhiều bé trên web khách (NB, FE 18/10/2026; thẻ bé chung FORMBE 21/10/2026). Đi cùng lp-nhieu-be.js.
   Mỗi bé = 1 thẻ 1 lớp (nền giấy + viền mảnh; PD 21/10 bỏ vỏ kem). Bên trong KHÔNG lồng thêm hộp viền: các nhóm (loài, gói, dịch vụ thêm, ghi chú) chỉ cách nhau bằng khoảng trắng + vạch mảnh.
   Màu / chữ theo lp.css + forms.css. Không font / thư viện mới. */
:root{--nb-ease:cubic-bezier(.32,.72,0,1);--nb-ink:#542819;--nb-accent:#a95127;--nb-accent-d:#8a3b1b;--nb-line:#ecdcc0;--nb-shell:#f6ead6;--nb-core:#fffdf8;--nb-muted:#88664f;--nb-pick:#fff0dc}

/* ---------- danh sách bé ---------- */
.nb-pets{display:grid;gap:12px;margin:0;min-width:0}
.nb-pets-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 0}
.nb-eyebrow{margin:0;color:#68351f;font:800 11px/1.3 'Be Vietnam Pro',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.nb-count{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:#fff0dc;color:var(--nb-accent-d);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.nb-promo{margin:0;padding:9px 12px;border-radius:12px;background:#fff4dc;color:#7a3d1e;font-size:12.5px;font-weight:600;line-height:1.45}
.nb-promo b{font-weight:800}
.nb-promo.is-off{background:#f3ece2;color:#6b5546}
.nb-promo[hidden]{display:none}
.nb-list{display:grid;gap:14px;min-width:0}
/* PD 21/10 (Darius: "ô bé 1 lồng 2 lớp khung"): thẻ bé chỉ còn 1 lớp — nền giấy + viền mảnh, không vỏ kem bọc ngoài (dialog đã là 1 lớp khung). */
.nb-pet{min-width:0;padding:0;border:1px solid #e6d0ac;border-radius:18px;background:var(--nb-core);box-shadow:0 1px 2px rgba(84,40,25,.05);scroll-margin:104px 0 96px;transition:border-color .2s var(--nb-ease),box-shadow .2s var(--nb-ease)}
.nb-pet.is-extra{animation:nb-in .45s var(--nb-ease) backwards}
@keyframes nb-in{from{opacity:0;transform:translateY(14px)}}
.nb-pet.has-error{border-color:#c4614b;box-shadow:0 0 0 3px rgba(180,68,47,.14)}
.nb-pet-core{display:grid;gap:16px;min-width:0;padding:14px 16px 16px;border-radius:inherit;background:none}
.nb-pet-head{display:flex;align-items:center;gap:10px;min-height:34px;margin:0 0 -2px;padding:0 0 12px;border-bottom:1px solid var(--nb-line)}
.nb-badge{display:inline-flex;flex:none;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--nb-accent);color:#fffaf2;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.nb-pet-title{flex:1;min-width:0;overflow:hidden;color:var(--nb-ink);font-size:15px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.nb-remove{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;margin:-6px -8px -6px 0;padding:0;border:0;border-radius:999px;background:transparent;color:#8a6a4c;cursor:pointer;transition:background .25s var(--nb-ease),color .25s var(--nb-ease),transform .2s var(--nb-ease)}
.nb-remove svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nb-remove:hover{background:#fbe6d4;color:#9c3417}.nb-remove:active{transform:scale(.94)}
.nb-remove:focus-visible{outline:3px solid rgba(217,155,61,.45);outline-offset:1px}

/* ô nhập trong thẻ: cùng 1 kiểu (forms.css) */
.nb-f{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
fieldset.nb-f{display:block}
fieldset.nb-f>legend{float:left;width:100%;margin:0 0 6px;padding:0}
fieldset.nb-f>legend+*{clear:both}
.nb-label{display:block;color:var(--ink,#252019);font-size:13px;font-weight:700;line-height:1.35}
.nb-label small{margin-left:2px;color:var(--nb-muted);font-size:12px;font-weight:600}
.nb-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;min-width:0}
.nb-hint{margin:-8px 0 0;padding:8px 11px;border-radius:10px;background:#fff4dc;color:#7a3d1e;font-size:12px;font-weight:600;line-height:1.4}
.nb-hint[hidden]{display:none}
:is(#spa-form,#hotel-form) .nb-note textarea{min-height:68px!important;padding:11px 14px!important;line-height:1.45;resize:vertical}

/* nút chọn (loài, gói, dịch vụ thêm): input trong suốt phủ kín thẻ → cú bấm luôn rơi vào input (không vào chữ giá vẽ lại bên dưới) */
.pickup-option.nb-opt{position:relative;isolation:isolate}
.pickup-option.nb-opt>input{position:absolute;inset:0;z-index:2;width:100%!important;height:100%!important;margin:0;border-radius:inherit;opacity:0;cursor:pointer}
.pickup-option.nb-opt>:not(input){pointer-events:none}
.pickup-option.nb-opt:has(>input:focus-visible){outline:3px solid rgba(217,155,61,.5);outline-offset:2px}
.nb-tick-ui{position:relative;flex:none;width:20px;height:20px;border:1.5px solid #b9946a;border-radius:999px;background:#fff;transition:border-color .2s var(--nb-ease),background .2s var(--nb-ease)}
.nb-tick-ui.is-box{border-radius:6px}
.nb-tick-ui::after{content:'';position:absolute;inset:4px;border-radius:inherit;background:var(--nb-accent);transform:scale(0);transition:transform .25s var(--nb-ease)}
.nb-tick-ui.is-box::after{inset:auto;left:5.5px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;border-radius:0;background:none;transform:rotate(45deg) scale(0)}
.nb-opt:has(>input:checked) .nb-tick-ui{border-color:var(--nb-accent)}
.nb-opt:has(>input:checked) .nb-tick-ui::after{transform:scale(1)}
.nb-opt:has(>input:checked) .nb-tick-ui.is-box{background:var(--nb-accent)}
.nb-opt:has(>input:checked) .nb-tick-ui.is-box::after{transform:rotate(45deg) scale(1)}

/* loài: 2 nút ngang */
.nb-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pickup-option.nb-seg-opt{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 8px;border-radius:12px}
.pickup-option.nb-seg-opt:has(>input:checked){padding:0 7px}
.nb-seg-in{display:inline-flex!important;align-items:center;gap:6px;font-size:14px;font-weight:800}
.nb-ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* gói + dịch vụ thêm: hàng [ô tick | tên + mô tả | giá] */
.nb-pkg-options,.nb-addon-options{display:grid;gap:8px}
.pickup-option.nb-pkg-opt,.pickup-option.nb-addon-opt{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:58px;padding:10px 12px}
.pickup-option.nb-pkg-opt:has(>input:checked),.pickup-option.nb-addon-opt:has(>input:checked){padding:9px 11px}
.pickup-option.nb-addon-opt{min-height:52px}
.nb-opt-main{display:grid!important;gap:2px;min-width:0}
.nb-opt-main b{color:var(--nb-ink);font-size:14px;font-weight:800;line-height:1.3}
.nb-addon-opt .nb-opt-main b{font-size:13.5px}
.nb-opt-main small{color:var(--nb-muted);font-size:11.5px;font-weight:600;line-height:1.35}
.nb-opt-price{display:grid!important;justify-items:end;gap:1px;text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.nb-opt-price b{color:var(--nb-accent);font-size:15px;font-weight:800;line-height:1.2}
.nb-addon-opt .nb-opt-price b{font-size:13px}
.nb-opt-price b.is-quote{font-size:12.5px}
.nb-opt-price s{color:#a08671;font-size:12px;font-weight:500;text-decoration-thickness:1px}
.nb-opt-price small{color:var(--nb-muted);font-size:11px;font-weight:700;line-height:1.1}
.nb-opt-price b small{margin-right:1px;font-size:11.5px;font-weight:700}
.nb-addon-opt .nb-opt-price small{font-size:11.5px;white-space:normal;max-width:84px}
.nb-pkg>legend small{color:var(--nb-muted);font-size:12px;font-weight:600}

/* dịch vụ thêm: gọn trong 1 dòng, mở ra khi cần */
.nb-addons{min-width:0;border-top:1px solid var(--nb-line);border-bottom:1px solid var(--nb-line)}
.nb-addons summary{display:flex;align-items:center;gap:8px;min-height:48px;color:var(--ink,#252019);font-size:13px;font-weight:700;cursor:pointer;list-style:none}
.nb-addons summary::-webkit-details-marker{display:none}
.nb-addons summary small{padding:2px 8px;border-radius:999px;background:#f6ead6;color:var(--nb-accent-d);font-size:11.5px;font-weight:700}
.nb-addons summary::after{content:'';width:8px;height:8px;margin:0 4px 0 auto;border-right:2px solid #a1785b;border-bottom:2px solid #a1785b;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--nb-ease)}
.nb-addons[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.nb-addons[open]{padding-bottom:12px}
.nb-addons summary:focus-visible{outline:3px solid rgba(217,155,61,.45);outline-offset:2px;border-radius:8px}

.nb-pet-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0;padding:12px 0 0;border-top:1px dashed #e6cfa8;color:#79573f;font-size:12.5px;font-weight:700}
.nb-pet-price[hidden]{display:none}
.nb-amt{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:2px 8px;margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.nb-amt b{color:var(--nb-accent);font-size:15px;font-weight:800}
.nb-amt s{color:#a08671;font-size:12px;font-weight:500}
.nb-amt.is-empty{color:#a08671;font-size:12px;font-weight:600;white-space:normal}

/* ---------- nút "+ Thêm bé" (nút trong nút) ---------- */
.nb-add{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 16px 8px 8px;border:1.5px dashed #c99c6c;border-radius:999px;background:#fffaf2;color:var(--nb-ink);text-align:left;cursor:pointer;transition:background .3s var(--nb-ease),border-color .3s var(--nb-ease),transform .2s var(--nb-ease)}
.nb-add:hover{border-color:var(--nb-accent);background:#fff0dc}
.nb-add:active{transform:scale(.985)}
.nb-add:focus-visible{outline:3px solid rgba(217,155,61,.45);outline-offset:2px}
.nb-add-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:999px;background:var(--nb-accent);color:#fff;transition:transform .35s var(--nb-ease)}
.nb-add-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nb-add:hover .nb-add-ic{transform:rotate(90deg) scale(1.04)}
.nb-add-text{display:grid;gap:1px}
.nb-add-text b{font-size:15px;font-weight:800}
.nb-add-text small{color:var(--nb-muted);font-size:12px;font-weight:600}
.nb-add[hidden]{display:none}

/* ---------- BUG-QA-08 (P3 21/10): bỏ bé đã nhập → thanh "Hoàn tác" 10 giây ---------- */
.nb-undo{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 6px 6px 14px;border-radius:14px;background:#542819;color:#fff6ea;font-size:13px;font-weight:600;line-height:1.35;animation:nb-in .35s var(--nb-ease) backwards}
.nb-undo-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-undo-text b{font-weight:800}
.nb-undo-btn{flex:none;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:#fff0dc;color:#8a3b1b;font:800 13px/1 'Be Vietnam Pro',sans-serif;cursor:pointer;transition:background .2s var(--nb-ease),transform .2s var(--nb-ease)}
.nb-undo-btn:hover{background:#ffe2bd}.nb-undo-btn:active{transform:scale(.96)}
.nb-undo-btn:focus-visible{outline:3px solid rgba(217,155,61,.6);outline-offset:2px}

/* ---------- ở chung phòng (hotel) ---------- */
.nb-share{display:grid!important;grid-template-columns:20px minmax(0,1fr);gap:10px!important;align-items:start;padding:12px 14px;border:1px solid #dfc39b;border-radius:14px;background:#fffdf8;cursor:pointer}
.nb-share:has(input:checked){border:2px solid var(--nb-accent);padding:11px 13px;background:#fff0dc}
.nb-share input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--nb-accent)}
.nb-share span{display:grid;gap:2px}
.nb-share b{color:var(--nb-ink);font-size:14px}
.nb-share small{color:var(--nb-muted);font-size:12px;font-weight:600;line-height:1.4}
.nb-share[hidden]{display:none!important}

/* ---------- spa: chỗ trống cho cả nhóm ---------- */
.nb-slot-hint{display:block;margin-top:6px;color:#79573f;font-size:12px;font-weight:600}
.nb-slot-hint:empty{display:none}
.nb-fit{display:grid;gap:10px;margin:-4px 0 0;padding:12px 14px;border-radius:14px;background:#fff4e6;box-shadow:inset 0 0 0 1px #efc99a}
.nb-fit[hidden]{display:none}
.nb-fit[data-state="ok"]{padding:0;background:none;box-shadow:none}
.nb-fit[data-state="seq"]{background:#f2f6ec;box-shadow:inset 0 0 0 1px #c9d8b5}
.nb-fit-ok{display:flex;align-items:center;gap:8px;margin:0;color:#2f5a2a;font-size:13px;font-weight:700}
.nb-tick{flex:none;width:18px;height:18px;border-radius:999px;background:#dcebd6;position:relative}
.nb-tick::after{content:'';position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #2f7a45;border-width:0 2px 2px 0;transform:rotate(45deg)}
.nb-fit-title{margin:0;color:#8a3b1b;font-size:14px;font-weight:800}
.nb-fit-none{margin:0;color:#79573f;font-size:12.5px;font-weight:600}
.nb-fit-sug{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.nb-fit-sug>span{width:100%;color:#79573f;font-size:12px;font-weight:700}
.nb-chip{display:inline-flex;align-items:baseline;gap:6px;min-height:40px;padding:0 14px;border:1px solid #d7b58a;border-radius:999px;background:#fffdf8;color:var(--nb-ink);font:800 14px/1 'Be Vietnam Pro',sans-serif;cursor:pointer;transition:background .25s var(--nb-ease),border-color .25s var(--nb-ease),transform .2s var(--nb-ease)}
.nb-chip>*{pointer-events:none}
.nb-chip small{color:var(--nb-muted);font-size:11px;font-weight:600}
.nb-chip:hover{border-color:var(--nb-accent);background:#fff0dc}.nb-chip:active{transform:scale(.97)}
.nb-seq{display:grid!important;grid-template-columns:20px minmax(0,1fr);gap:10px!important;align-items:start;padding:11px 13px;border:1px solid #dfc39b;border-radius:12px;background:#fffdf8;cursor:pointer}
.nb-seq:has(input:checked){border:2px solid #6f8a55;padding:10px 12px;background:#fbfdf7}
.nb-seq input{width:18px;height:18px;margin:1px 0 0;accent-color:#5f7d45}
.nb-seq span{display:grid;gap:2px}
.nb-seq b{color:var(--nb-ink);font-size:14px}
.nb-seq small{color:#5b685f;font-size:12.5px;font-weight:700;line-height:1.4}

/* ---------- tổng nhóm ---------- */
.nb-sum{padding:0;border:1px solid #dfc08f;border-radius:18px;background:#fffaf1}
.nb-sum[hidden]{display:none}
.nb-sum-core{display:grid;gap:10px;padding:14px 16px;border-radius:inherit}
.nb-sum-list,.nb-success-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.nb-sum-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #efe1c8}
.nb-sum-list li:first-child{border-top:0}
.nb-sum-pet{display:flex;align-items:center;gap:10px;min-width:0}
/* giá từng bé trong ô tổng: giá sau KM trên, giá gốc gạch dưới — mọi dòng cùng 1 kiểu, không lúc ngang lúc bẻ dòng */
.nb-sum-list .nb-amt{flex:none;flex-direction:column;align-items:flex-end;gap:0}
.nb-sum-pet>span{display:grid;gap:1px;min-width:0}
.nb-sum-pet b{overflow:hidden;color:var(--nb-ink);font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.nb-sum-pet small{overflow:hidden;color:var(--nb-muted);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.nb-dot{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:999px;background:#f6ead6;color:var(--nb-accent-d);font-size:12px;font-style:normal;font-weight:800}
.nb-sum-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:10px;border-top:2px solid #dfbd8b;color:var(--nb-ink);font-size:14px;font-weight:800}
.nb-sum-total small{color:var(--nb-muted);font-size:11px;font-weight:600}
.nb-sum-total .nb-amt b{font-size:18px}
.nb-sum-total>span:first-child{flex:1 1 auto;min-width:0;line-height:1.35}
.nb-sum-total>.nb-amt{flex:none;flex-direction:column;align-items:flex-end;gap:1px}
.nb-sum-note{margin:0;color:#79573f;font-size:12px;font-weight:500;line-height:1.5}

/* ---------- hộp thành công ---------- */
.booking-code.is-group{letter-spacing:.02em}
.nb-success{display:grid;gap:10px;margin:12px 0 4px}
.nb-success[hidden]{display:none}
.nb-success-list li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-top:1px solid #efe1c8}
.nb-success-list li:first-child{border-top:0}
.nb-success-pet{display:grid;gap:2px;min-width:0}
.nb-success-pet b{color:var(--nb-ink);font-size:14px}
.nb-success-pet em{margin-left:4px;padding:1px 7px;border-radius:999px;background:#f6ead6;color:var(--nb-accent-d);font-size:11px;font-style:normal;font-weight:800}
.nb-success-pet small{color:var(--nb-muted);font-size:12px;font-weight:600}
.nb-success-pet .nb-ok{color:#2f5a2a}
.nb-success-pet .nb-warn{color:#9c3417}
.nb-success-side{display:grid;justify-items:end;gap:3px}
.nb-success-side code{padding:2px 7px;border-radius:7px;background:#f6ead6;color:#5b3424;font:700 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.nb-success-note{margin:0;color:#79573f;font-size:12.5px;line-height:1.5}
.nb-success-note a{color:#91401f;font-weight:800}

/* ---------- đưa đón trong form đặt lịch: 1 cột ở mọi khổ (hộp đặt lịch chỉ rộng ~520px → 2 cột thì 4 lựa chọn bị bẻ 2 dòng, chật) ---------- */
:is(#spa-form,#hotel-form) .pickup-modes{grid-template-columns:1fr;gap:6px}
:is(#spa-form,#hotel-form) .pickup-modes .pickup-option{min-height:44px}
@media(max-width:520px){
  .nb-pet-core{padding:12px 12px 14px;gap:14px}
  .nb-sum-core{padding:12px}
  .nb-success-list li{grid-template-columns:24px minmax(0,1fr)}
  .nb-success-side{grid-column:2;justify-items:start;grid-auto-flow:column;align-items:baseline;gap:10px}
}
/* khổ ≤420 (360–414): lề hộp 16px thay 20px, ô chọn gọn hơn → mô tả gói / dịch vụ thêm không bẻ 3 dòng */
@media(max-width:420px){
  #spa-dialog,#hotel-dialog{--dlg-pad:16px}
  .pickup-option.nb-pkg-opt,.pickup-option.nb-addon-opt{gap:8px;padding:10px}
  .pickup-option.nb-pkg-opt:has(>input:checked),.pickup-option.nb-addon-opt:has(>input:checked){padding:9px}
  .nb-opt-price b{font-size:14px}
  .nb-pet-price{font-size:12px}
}
@media(max-width:379px){
  .nb-row2{grid-template-columns:1fr}
  .pickup-option.nb-pkg-opt,.pickup-option.nb-addon-opt{gap:8px;padding:10px}
  .pickup-option.nb-pkg-opt:has(>input:checked),.pickup-option.nb-addon-opt:has(>input:checked){padding:9px}
}
@media (prefers-reduced-motion:reduce){.nb-pet,.nb-add,.nb-add-ic,.nb-chip,.nb-remove,.nb-tick-ui,.nb-tick-ui::after,.nb-undo-btn{transition:none}.nb-pet.is-extra,.nb-undo{animation:none}}