/* ============================================================
   NUPAKACHI · CÔNG CỤ TỰ LẮP GÓI
   Dùng chung cho nupakachi.com và booking.nupakachi.com
   Nhúng: <div id="nupa-combo" data-uu-dai="0"></div>
   ============================================================ */

/* Bộ màu đặt ở :root vì thanh dưới nằm ngoài khối công cụ,
   để trong #nupa-combo thì thanh dưới mất nền và chữ chồng lên trang. */
:root{
  --nb-card:#fff; --nb-warm:#faf7f2; --nb-panel:#f8f5f0;
  --nb-ink:#1c1a17; --nb-ink2:#3d3830; --nb-muted:#8a8377;
  --nb-line:#e9e3d9; --nb-line2:#f0ece4;
  --nb-gold:#b08d57; --nb-gold-soft:#b08d5712; --nb-gold-line:#dcc8a6;
  --nb-btn:#8E3A48; --nb-on-btn:#f7f2ea; --nb-sale:#a8543f;
}
#nupa-combo{
  font-family:var(--sans),'Be Vietnam Pro',system-ui,sans-serif;
  font-weight:300; font-size:15px; line-height:1.65; color:var(--nb-ink);
  display:block;
}
#nupa-combo *{box-sizing:border-box}
#nupa-combo img{display:block; max-width:100%}
#nupa-combo button{font-family:inherit}

/* ── khung hai cột ── */
.nb-main{display:grid; grid-template-columns:1fr 356px; gap:44px; align-items:start}
@media(max-width:980px){ .nb-main{grid-template-columns:1fr; gap:0} .nb-side{display:none} }

/* ── chọn nhanh ── */
.nb-quick{
  background:var(--nb-warm); border:1px solid var(--nb-line); border-radius:6px;
  padding:18px 20px 16px; margin-bottom:30px;
}
.nb-qlab{font-size:9.5px; font-weight:600; letter-spacing:.21em; text-transform:uppercase;
  color:var(--nb-muted); margin-bottom:11px}
.nb-qrow{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media(max-width:640px){ .nb-qrow{grid-template-columns:1fr} }
.nb-q{
  cursor:pointer; color:var(--nb-ink); background:var(--nb-card);
  border:1px solid var(--nb-line); border-radius:4px; padding:13px 15px;
  font-size:13.5px; font-weight:500; text-align:left; line-height:1.4; transition:.18s;
}
.nb-q i{display:block; font-style:normal; font-size:10px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--nb-gold); margin-top:3px}
.nb-q:hover{border-color:var(--nb-gold-line)}
.nb-q:focus-visible{outline:2px solid var(--nb-gold); outline-offset:2px}
.nb-q.on{border-color:var(--nb-gold); background:var(--nb-gold-soft);
  box-shadow:0 2px 12px rgba(176,141,87,.11)}
.nb-qnote{margin:12px 0 0; font-size:11.5px; color:var(--nb-muted); line-height:1.5}

/* ── bước ── */
.nb-step{padding:28px 0 30px; border-bottom:1px solid var(--nb-line2)}
.nb-shead{display:flex; align-items:baseline; gap:14px; margin-bottom:20px}
.nb-num{font-family:var(--serif),'Cormorant Garamond',Georgia,serif; font-size:30px;
  font-weight:500; color:var(--nb-gold-line); line-height:1}
.nb-shead h3{font-family:var(--serif),'Cormorant Garamond',Georgia,serif; font-weight:500;
  font-size:23px; margin:0; flex:1; color:var(--nb-ink)}
.nb-shead h3 em{font-style:normal; font-size:12.5px; color:var(--nb-muted);
  font-family:inherit; font-weight:300}
.nb-link{
  font-size:11px; font-weight:500; letter-spacing:.09em; color:var(--nb-muted);
  background:none; border:0; cursor:pointer; padding:0; transition:color .18s;
}
.nb-link:hover{color:var(--nb-gold)}
.nb-link:focus-visible{outline:2px solid var(--nb-gold); outline-offset:3px}

/* ── hàng chọn ── */
.nb-rows{display:flex; flex-direction:column; gap:9px}
.nb-row{
  display:grid; grid-template-columns:22px 74px 1fr auto; gap:16px; align-items:center;
  width:100%; text-align:left; cursor:pointer; color:var(--nb-ink);
  background:var(--nb-card); border:1px solid var(--nb-line); border-radius:5px;
  padding:11px 16px 11px 13px; transition:border-color .18s, background .18s, box-shadow .18s;
}
.nb-row:hover{border-color:var(--nb-gold-line)}
.nb-row:focus-visible{outline:2px solid var(--nb-gold); outline-offset:2px}
.nb-row[aria-pressed="true"]{border-color:var(--nb-gold); background:var(--nb-gold-soft);
  box-shadow:0 2px 14px rgba(176,141,87,.10)}
.nb-dot{width:19px; height:19px; border-radius:50%; border:1.5px solid var(--nb-line);
  display:grid; place-items:center; transition:.18s}
.nb-dot i{width:8px; height:8px; border-radius:50%; background:transparent; transition:.18s}
.nb-row[aria-pressed="true"] .nb-dot{border-color:var(--nb-gold)}
.nb-row[aria-pressed="true"] .nb-dot i{background:var(--nb-gold)}
.nb-ph{width:74px; height:56px; border-radius:3px; overflow:hidden; background:var(--nb-panel)}
.nb-ph img{width:100%; height:100%; object-fit:cover}
.nb-n{font-size:14.5px; font-weight:400; line-height:1.4}
.nb-m{display:block; font-size:12px; color:var(--nb-muted); font-weight:300;
  margin-top:3px; line-height:1.5}
.nb-p{font-weight:600; font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums}
.nb-was{display:block; font-size:11px; font-weight:400; color:var(--nb-muted);
  text-decoration:line-through; margin-top:2px}
.nb-hide{display:none; flex-direction:column; gap:9px; margin-top:9px}
.nb-hide.open{display:flex}
.nb-morewrap{text-align:center; margin-top:14px}

/* ── thẻ sản phẩm ── */
.nb-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:760px){ .nb-cards{grid-template-columns:1fr 1fr} }
.nb-card{
  cursor:pointer; text-align:left; color:var(--nb-ink); background:var(--nb-card);
  border:1px solid var(--nb-line); border-radius:5px; padding:12px;
  transition:.18s; position:relative;
}
.nb-card:hover{border-color:var(--nb-gold-line)}
.nb-card:focus-visible{outline:2px solid var(--nb-gold); outline-offset:2px}
.nb-card[aria-pressed="true"]{border-color:var(--nb-gold); background:var(--nb-gold-soft)}
.nb-card .nb-ph{width:100%; height:96px; margin-bottom:11px}
.nb-card .nb-dot{position:absolute; top:19px; left:19px; background:rgba(255,255,255,.94); z-index:2}
.nb-card b{display:block; font-size:13.5px; font-weight:500}
.nb-card span{display:block; font-size:11.5px; color:var(--nb-muted); line-height:1.5; margin-top:2px}
.nb-cp{display:block; margin-top:7px; font-size:14px; font-weight:600; color:var(--nb-gold)}
.nb-pop{
  position:absolute; top:12px; right:12px; z-index:2; background:var(--nb-gold); color:#fff;
  font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:2px;
}

/* ── nâng cấp ── */
.nb-ups{display:grid; grid-template-columns:repeat(4,1fr); gap:11px}
@media(max-width:900px){ .nb-ups{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .nb-ups{grid-template-columns:1fr} }
.nb-up{
  cursor:pointer; text-align:left; color:var(--nb-ink); background:var(--nb-card);
  border:1px solid var(--nb-line); border-radius:5px; padding:13px 14px;
  transition:.18s; display:flex; flex-direction:column; gap:3px;
}
.nb-up:hover{border-color:var(--nb-gold-line)}
.nb-up:focus-visible{outline:2px solid var(--nb-gold); outline-offset:2px}
.nb-up[aria-pressed="true"]{border-color:var(--nb-gold); background:var(--nb-gold-soft)}
.nb-utop{display:flex; align-items:center; gap:9px}
.nb-box{width:16px; height:16px; border:1.5px solid var(--nb-line); border-radius:3px;
  flex:none; display:grid; place-items:center; transition:.18s}
.nb-box svg{width:9px; height:9px; opacity:0; transition:.18s; stroke:#fff; stroke-width:2.6;
  fill:none; stroke-linecap:round; stroke-linejoin:round}
.nb-up[aria-pressed="true"] .nb-box{background:var(--nb-gold); border-color:var(--nb-gold)}
.nb-up[aria-pressed="true"] .nb-box svg{opacity:1}
.nb-up b{font-size:13px; font-weight:500}
.nb-up > span{font-size:11.5px; color:var(--nb-muted); padding-left:25px}
.nb-upp{font-size:13.5px; font-weight:600; margin-top:auto; padding-left:25px; padding-top:5px}

/* ── giỏ bên phải ── */
.nb-side{position:sticky; top:22px}
.nb-panel{background:var(--nb-panel); border:1px solid var(--nb-line);
  border-radius:6px; padding:24px 22px}
.nb-phead{display:flex; align-items:baseline; gap:10px; margin-bottom:20px}
.nb-phead h3{font-family:var(--serif),'Cormorant Garamond',Georgia,serif; font-weight:500;
  font-size:22px; margin:0; flex:1; color:var(--nb-ink)}
.nb-clear{background:none; border:0; cursor:pointer; font-size:11px;
  color:var(--nb-muted); padding:0; transition:color .18s}
.nb-clear:hover{color:var(--nb-sale)}
.nb-clear:focus-visible{outline:2px solid var(--nb-gold); outline-offset:3px}
.nb-grp{font-size:9.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--nb-muted); margin:16px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--nb-line)}
.nb-pick{display:grid; grid-template-columns:52px 1fr; gap:11px; align-items:start; padding:5px 0}
.nb-pick .nb-ph{width:52px; height:44px}
.nb-pick b{display:block; font-size:13px; font-weight:500; line-height:1.35}
.nb-pick span{display:block; font-size:11px; color:var(--nb-muted); line-height:1.5; margin-top:2px}
.nb-pp{display:block; font-size:13.5px; font-weight:600; margin-top:4px}
.nb-inc{font-size:11px; color:var(--nb-muted); line-height:1.55; padding:7px 0 3px 63px; margin-top:-2px}
.nb-mini{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:4px 0}
.nb-mini span{color:var(--nb-ink2)}
.nb-mini u{text-decoration:none; color:var(--nb-muted); font-size:11.5px}
.nb-mini b{font-weight:500; font-variant-numeric:tabular-nums}
.nb-tot{margin-top:18px; padding-top:14px; border-top:1px solid var(--nb-line)}
.nb-l{display:flex; justify-content:space-between; font-size:12.5px; color:var(--nb-ink2); padding:3px 0}
.nb-l b{font-weight:500; font-variant-numeric:tabular-nums}
.nb-l.off, .nb-l.off b{color:var(--nb-sale)}
.nb-big{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--nb-line)}
.nb-big span{font-family:var(--serif),'Cormorant Garamond',Georgia,serif; font-size:17px}
.nb-big b{font-family:var(--serif),'Cormorant Garamond',Georgia,serif; font-size:30px;
  font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.015em}
.nb-vat{text-align:right; font-size:10.5px; color:var(--nb-muted); margin-top:2px}
.nb-go{
  width:100%; margin-top:18px; cursor:pointer; border:0; border-radius:4px;
  background:var(--nb-btn); color:var(--nb-on-btn); padding:15px 18px;
  font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:10px; transition:.18s;
}
.nb-go:hover{background:#6E2C38}
.nb-go:disabled{opacity:.32; cursor:default}
.nb-go:focus-visible{outline:2px solid var(--nb-gold); outline-offset:2px}
.nb-note{display:flex; gap:9px; margin-top:14px; font-size:11.5px;
  color:var(--nb-muted); line-height:1.55}
.nb-note svg{width:15px; height:15px; flex:none; stroke:var(--nb-gold); fill:none;
  stroke-width:1.3; margin-top:2px}
.nb-blank{font-size:12.5px; color:var(--nb-muted); padding:6px 0 2px}

/* ── thanh dưới trên điện thoại ── */
.nb-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--nb-panel, #f8f5f0); color:var(--nb-ink, #1c1a17);
  font-family:var(--sans),'Be Vietnam Pro',system-ui,sans-serif;
  font-weight:300; font-size:15px; line-height:1.65;
  border-top:1px solid var(--nb-line, #e9e3d9);
  box-shadow:0 -6px 26px rgba(0,0,0,.10); display:none;
}
.nb-dock *{box-sizing:border-box}
.nb-dock img{display:block; max-width:100%}
.nb-dock button{font-family:inherit}
.nb-dock.show{display:block}
@media(min-width:981px){ .nb-dock{display:none!important} }
.nb-dockin{max-width:1180px; margin:0 auto; padding:11px 20px;
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center}
.nb-dock .lab{font-size:9.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--nb-muted)}
.nb-dock .sum{font-size:11.5px; color:var(--nb-ink2); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nb-dock .t{font-family:var(--serif),'Cormorant Garamond',Georgia,serif; font-size:23px;
  font-weight:600; font-variant-numeric:tabular-nums; text-align:right; line-height:1.15}
.nb-dock .nb-go{margin-top:0; padding:12px 16px; font-size:10px; width:auto}
@media(max-width:560px){
  .nb-dockin{grid-template-columns:1fr auto}
  .nb-dock .nb-go{grid-column:1/-1; width:100%}
}

/* ── nhãn "gói đã có sẵn" trên thẻ sản phẩm ── */
.nb-have{
  position:absolute; top:12px; right:12px; z-index:2;
  background:var(--nb-ink2); color:#fff; font-size:9px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:2px;
  max-width:calc(100% - 24px); line-height:1.35;
}
.nb-card.nb-hascore .nb-cp{color:var(--nb-muted)}

/* ── bảng kê bung ra từ thanh dưới ── */
.nb-open{
  display:flex; align-items:center; gap:8px; text-align:left; cursor:pointer;
  background:none; border:0; padding:0; min-width:0; color:inherit;
}
.nb-open:focus-visible{outline:2px solid var(--nb-gold); outline-offset:3px}
.nb-open .lab{font-size:9.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--nb-muted); display:block}
.nb-open .sum{font-size:11.5px; color:var(--nb-ink2); display:block; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nb-caret{font-size:13px; color:var(--nb-muted); flex:none; transition:transform .2s}
.nb-dock.open .nb-caret{transform:rotate(180deg)}
.nb-sheet{
  max-height:56vh; overflow-y:auto; padding:18px 20px 6px;
  border-bottom:1px solid var(--nb-line, #e9e3d9);
  background:var(--nb-panel, #f8f5f0);
}
.nb-sheet-head{display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.nb-sheet-head b{font-family:var(--serif),'Cormorant Garamond',Georgia,serif;
  font-size:19px; font-weight:500; flex:1}
.nb-sheet .nb-tot{margin-bottom:14px}

/* ── màn hẹp: hàng chọn bỏ ảnh, giá xuống dòng ── */
@media(max-width:600px){
  .nb-row{grid-template-columns:20px 1fr; gap:11px; padding:13px 14px; row-gap:6px}
  .nb-row .nb-ph{display:none}
  .nb-row .nb-p{grid-column:2; text-align:left; font-size:15.5px}
  .nb-n{font-size:14px}
  .nb-num{font-size:25px}
  .nb-shead h3{font-size:20px}
  .nb-shead{flex-wrap:wrap; gap:8px 12px}
}

/* gợi ý mở khoá ưu đãi combo */
.nb-hint{
  margin-top:10px; padding:9px 11px; border-radius:4px;
  background:var(--nb-gold-soft, #b08d5712);
  border:1px solid var(--nb-gold-line, #dcc8a6);
  font-size:11.5px; color:var(--nb-ink2, #3d3830); line-height:1.5;
}

@media(prefers-reduced-motion:reduce){ #nupa-combo *, .nb-dock *{transition:none!important} }

/* dai diem den (dung chung voi web chinh) */
.dd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.dd-card{position:relative;display:block;overflow:hidden;background:#241f1a;text-decoration:none}
/* KHONG dat transition/transform thuong truc tren img */
.dd-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.dd-card:hover img{opacity:.86;transition:opacity .3s ease}
.dd-card .dd-nm{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 15px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);
  font-family:'Cormorant Garamond',serif;font-size:16px;letter-spacing:.02em;text-align:center;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.28) 70%,rgba(0,0,0,0) 100%)}
.dd-card .dd-pr{font-size:11px;letter-spacing:.14em;color:#eed9c4;display:block;margin-top:4px;
  font-family:'Be Vietnam Pro',sans-serif}
@media(max-width:920px){.dd-grid{grid-template-columns:1fr 1fr;gap:10px}.dd-card .dd-nm{font-size:14px}}