/* Làng Sen — booking.css : UI đặt bàn 3 bước (ngày/giờ → chọn bàn → xác nhận)
   Dùng chung biến brand từ main.css (green/gold/cream/ink...). */
.bk{max-width:940px;margin:0 auto;padding:6.5rem 1.25rem 4rem}
.bk-head{text-align:center;margin-bottom:.5rem}
.bk-head .eyebrow{letter-spacing:.25em;text-transform:uppercase;font-size:.72rem;font-weight:600;color:var(--gold-dk)}
.bk-head h1{font-family:var(--font-head);font-size:clamp(2.2rem,6vw,3.2rem);margin:.2em 0 0}

/* Step indicator */
.bk-steps{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:1.8rem 0 2.4rem;flex-wrap:wrap}
.bk-step{display:flex;align-items:center;gap:.55rem;color:var(--muted)}
.bk-step .num{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;font-weight:700;font-family:var(--font-head);background:#fff;transition:.25s}
.bk-step .lbl{font-size:.9rem;font-weight:500}
.bk-step.active{color:var(--ink)}
.bk-step.active .num{background:var(--gold);border-color:var(--gold);color:var(--green-dk)}
.bk-step.done .num{background:var(--green);border-color:var(--green);color:#fff}
.bk-step-sep{width:34px;height:2px;background:var(--line)}

/* Panels */
.bk-panel{display:none;animation:bkfade .35s ease}
.bk-panel.active{display:block}
@keyframes bkfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bk-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.6rem}
.bk-card h3{font-family:var(--font-head);font-size:1.35rem;margin:0 0 1rem}
.bk-sub{color:var(--muted);font-size:.9rem;margin:-.6rem 0 1rem}
.bk-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media(min-width:780px){.bk-grid{grid-template-columns:1.08fr .92fr}}

/* Calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal-title{font-family:var(--font-head);font-size:1.2rem;font-weight:600}
.cal-nav{display:flex;gap:.4rem}
.cal-nav button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;
  cursor:pointer;font-size:1rem;color:var(--ink);line-height:1}
.cal-nav button:hover{background:var(--green-soft)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.cal-dow{text-align:center;font-size:.7rem;color:var(--muted);text-transform:uppercase;padding:.4rem 0;font-weight:600}
.cal-day{aspect-ratio:1;border:0;background:transparent;border-radius:10px;cursor:pointer;font:inherit;
  font-size:.92rem;color:var(--ink);transition:.15s}
.cal-day:hover:not(.is-muted){background:var(--green-soft)}
.cal-day.is-muted{color:#cdc6b8;cursor:default}
.cal-day.is-today{box-shadow:inset 0 0 0 1.5px var(--gold)}
.cal-day.is-selected{background:var(--gold);color:var(--green-dk);font-weight:700}

/* Chips: time slots + party size + zones */
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.5rem .95rem;
  cursor:pointer;font:inherit;font-size:.9rem;color:var(--ink);transition:.15s;white-space:nowrap}
.chip:hover{border-color:var(--gold)}
.chip.active{background:var(--green);color:#fff;border-color:var(--green)}
.bk-field{margin-bottom:1.3rem}
.bk-field > label{display:block;font-weight:600;margin-bottom:.55rem;font-size:.95rem}

/* Zones (scroll ngang) */
.zones{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:1.3rem;scrollbar-width:none}
.zones::-webkit-scrollbar{display:none}
.zone{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:.5rem 1rem;cursor:pointer;font:inherit;font-size:.9rem;white-space:nowrap;transition:.15s}
.zone.active{background:var(--green);color:#fff;border-color:var(--green)}
.zone .ls-ic{width:16px;height:16px;vertical-align:-0.18em;margin-right:.15rem}
.bk-done .ok .ls-ic{width:34px;height:34px}

/* Floor plan — bàn + ghế cân xứng (ghế là thanh bo tròn quanh bàn) */
.floor{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;background:var(--green-soft);
  border-radius:16px;padding:1.4rem}
@media(min-width:560px){.floor{grid-template-columns:repeat(3,1fr)}}
.tbl{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;padding:.4rem;
  border-radius:14px;transition:.18s}
.tbl:hover:not(.is-taken){transform:translateY(-3px)}
.tbl .row{display:flex;gap:12px;justify-content:center}
.tbl .row i{width:34px;height:13px;border-radius:6px;background:#d4e0d4;transition:.18s}
.tbl .mid{display:flex;align-items:center;gap:9px;width:100%;justify-content:center}
.tbl .side{display:flex;flex-direction:column;justify-content:center;gap:12px}
.tbl .side i{width:13px;height:34px;border-radius:6px;background:#d4e0d4;transition:.18s}
.tbl .surface{flex:0 1 140px;min-height:82px;border:2px solid #cfddd0;border-radius:13px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;transition:.18s}
.tbl .surface .tn{font-family:var(--font-head);font-size:1.75rem;font-weight:700;line-height:1}
.tbl .surface .ts{font-size:.78rem;color:var(--muted)}
.tbl:hover:not(.is-taken) .surface{border-color:var(--gold)}
.tbl.is-selected .surface{border-color:var(--gold);background:#fff8e9;box-shadow:0 0 0 3px var(--gold-soft)}
.tbl.is-selected .row i,.tbl.is-selected .side i{background:var(--gold)}
.tbl.is-taken{cursor:not-allowed}
.tbl.is-taken .surface{background:#ece6da;border-color:transparent}
.tbl.is-taken .surface .tn,.tbl.is-taken .surface .ts{color:#b0a692}
.tbl.is-taken .row i,.tbl.is-taken .side i{background:#dcd4c6}

/* Time picker tự do (free time, trong giờ mở cửa) */
.time-input{width:100%;max-width:220px;padding:.7rem 1rem;border:1px solid var(--line);border-radius:12px;
  font-family:var(--font-head);font-size:1.7rem;font-weight:600;color:var(--ink);background:#fff;text-align:center}
.time-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.floor-legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1rem;font-size:.82rem;color:var(--muted)}
.floor-legend span{display:flex;align-items:center;gap:.4rem}
.dot{width:12px;height:12px;border-radius:4px;display:inline-block}
.dot.free{background:#fff;border:2px solid #cfddd0}
.dot.sel{background:var(--gold)}
.dot.taken{background:#ece6da}

/* Summary + form (step 3) */
.sum{list-style:none;padding:0;margin:0 0 1.4rem}
.sum li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.sum li span:first-child{color:var(--muted)}
.sum li span:last-child{font-weight:600}
.bk-form{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:600px){.bk-form .span2{grid-column:1/-1}.bk-form{grid-template-columns:1fr 1fr}}
.bk-form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.bk-form input,.bk-form textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:#fff}

/* Nav buttons */
.bk-actions{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem}
.bk-actions .btn{min-width:140px}
.btn.link{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn.link:hover{background:var(--green-soft);color:var(--ink);box-shadow:none;transform:none}
.btn[disabled]{opacity:.45;pointer-events:none}

/* Success */
.bk-done{text-align:center;padding:2.5rem 1rem}
.bk-done .ok{width:72px;height:72px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:2rem;margin:0 auto 1.2rem}
.bk-done h2{font-family:var(--font-head)}