/* =========================================================================
   Trang đặt lịch — khoác hệ thiết kế "noir & 24K gold" của trang chủ.

   VÌ SAO CÓ FILE NÀY: dự án có HAI hệ thiết kế. luxury.css (đen + vàng) cho ba trang khách xem,
   app.css (kem + nâu đất #b06a4f) cho phần quản trị. Trang đặt lịch là trang KHÁCH xem nhưng lại
   dùng class của app.css, nên nó hiện ra dưới dạng thẻ TRẮNG nằm trên nền TỐI, nút bấm màu nâu đất
   không có ở đâu khác trên site. Đó không phải "thiếu chăm chút" mà là hai hệ màu chọi nhau trên
   cùng một trang.

   CÁCH LÀM: mọi thứ dưới đây bọc trong .luxe-booking. Không sửa một dòng nào của app.css, nên các
   trang quản trị giữ nguyên diện mạo cũ. Đây là phép cộng, không phải phép thay thế.

   Ba thứ bị khoá cứng cho toàn trang:
     - MỘT chủ đề: tối. Không có mảng sáng nào chen vào giữa.
     - MỘT màu nhấn: vàng. Không nâu đất, không xanh lá, không xanh dương.
     - MỘT hệ bo góc: thẻ và ô nhập 1rem, nút bấm bo tròn hoàn toàn — y như trang chủ.
   ========================================================================= */

.luxe-booking {
    font-family: var(--font-sans);
    color: var(--luxe-body);
    max-width: 760px;
    padding-bottom: 7rem;   /* chừa chỗ cho thanh nút dính đáy trên điện thoại */
}

/* ============================ Thanh đầu trang ============================ */
/*
   Trước đây trang đặt lịch trần trụi: mở ra là thấy ngay chữ "Book an appointment", không logo,
   không đường quay lại, không số điện thoại. Khách đi từ trang chủ sang có cảm giác rơi sang một
   website khác. Thanh này mỏng (56px) nên không ăn tranh chỗ của nội dung.
*/
.booking-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 56px;
    padding: 0 1rem;
    background: rgba(9, 8, 12, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.booking-topbar a {
    text-decoration: none;
    white-space: nowrap;
}

.booking-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--luxe-pearl);
}

.booking-brand-name {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--luxe-gold-light);
}

.booking-topbar-call {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--luxe-gold-light);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 9999px;
    padding: 0.4rem 0.85rem;
    min-height: 36px;
}

/* Rê chuột chỉ trên máy có chuột (2026-10-22): điện thoại chạm xong :hover DÍNH lại, ô vừa bỏ chọn vẫn sáng như đang chọn. */
@media (hover: hover) and (pointer: fine) {
    .booking-topbar-call:hover {
        background: rgba(212, 175, 55, 0.15);
        color: var(--luxe-pearl);
    }
}

/* ============================ Tiêu đề & tiến độ ============================ */

.luxe-booking h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--luxe-pearl);
    margin: 0 0 1.25rem;
}

.luxe-booking h3 {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--luxe-gold-light);
    margin: 1.75rem 0 0.65rem;
}

.luxe-booking .wizard-steps {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.luxe-booking .wizard-step {
    flex: 1;
    height: 3px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    transition: background-color 250ms var(--ease-out);
}

/* Bước đã qua: vàng đặc. Bước đang làm: vàng mờ. Hai trạng thái khác nhau rõ ràng, không cần chú thích. */
.luxe-booking .wizard-step.done { background: var(--luxe-gold-bright); opacity: 1; }
.luxe-booking .wizard-step.current { background: var(--luxe-gold); opacity: 0.55; }

.luxe-booking .wizard-caption {
    font-size: 0.8rem;
    color: var(--luxe-muted);
    margin-bottom: 1.25rem;
}

/* ============================ Ô "Cách hoạt động" ============================ */

.luxe-booking .help {
    background: var(--luxe-surface);
    border: 1px solid var(--luxe-border);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.luxe-booking .help > summary {
    color: var(--luxe-gold-light);
    background: transparent;
    border: 0;
    font-weight: 600;
    min-height: 44px;
}

@media (hover: hover) and (pointer: fine) { .luxe-booking .help > summary:hover { background: rgba(212, 175, 55, 0.08); } }
.luxe-booking .help[open] > summary { border-bottom: 1px solid var(--luxe-border); }

.luxe-booking .help-icon {
    background: rgba(212, 175, 55, 0.18);
    color: var(--luxe-gold-bright);
    border: 1px solid rgba(212, 175, 55, 0.4);
}

.luxe-booking .help[open] .help-icon {
    background: var(--luxe-gold);
    color: #0c0a10;
}

.luxe-booking .help-body { color: var(--luxe-body); }
.luxe-booking .help-body strong { color: var(--luxe-pearl); }
.luxe-booking .help-body em { color: var(--luxe-gold-light); font-style: normal; font-weight: 600; }

/* ============================ Danh sách chọn ============================ */

.luxe-booking .pick-list {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.luxe-booking .pick {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    padding: 1rem 1.15rem;
    min-height: 64px;
    background: var(--luxe-surface-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    color: var(--luxe-body);
    font: inherit;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .luxe-booking .pick:hover {
        border-color: rgba(212, 175, 55, 0.45);
        background: var(--luxe-surface-hover);
    }
}

/* Phản hồi chạm: co nhẹ (thẻ to → 0.98). Là thứ làm nút "có cảm giác bấm được". */
.luxe-booking .pick:active { transform: scale(0.98); transition-duration: 100ms; }

.luxe-booking .pick.selected {
    border-color: var(--luxe-gold-bright);
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.04) 100%);
}

.luxe-booking .pick-name {
    font-weight: 600;
    color: var(--luxe-pearl);
}

.luxe-booking .pick.selected .pick-name { color: var(--luxe-gold-light); }
.luxe-booking .pick-meta { font-size: 0.8rem; color: var(--luxe-muted); }

.luxe-booking .pick-price {
    font-weight: 800;
    color: var(--luxe-gold-bright);
    white-space: nowrap;
}

/*
   Giá combo kiểu trang bán hàng (chủ shop chốt 2026-10-04): GIÁ COMBO vàng đậm đứng trước, giá lẻ nhỏ gạch mảnh để
   đối chiếu, và nhãn ĐỎ "−37%" là thứ bắt mắt — thay cho giá gạch đỏ to (trông rối).
*/
.luxe-booking .combo-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
}

.luxe-booking .combo-price .now { font-weight: 800; color: var(--luxe-gold-bright); }

.luxe-booking .combo-price .was {
    font-size: 0.78em;
    font-weight: 400;
    color: var(--luxe-body);   /* màu chữ mô tả: đọc rõ, không chìm như xám */
    text-decoration-thickness: 1px;
}

.luxe-booking .combo-price .off {
    align-self: center;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1;
    padding: 0.28em 0.55em;
    border-radius: 999px;
    background: #e5484d;   /* đỏ nhãn giảm giá, chữ trắng đọc rõ trên nền tối */
    color: #fff;
}

/* Thẻ combo: chữ chiếm hết chiều ngang, giá xuống dòng riêng bên dưới, nút chọn vẫn ở phải. */
.luxe-booking .pick-combo .pick-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.luxe-booking .pick-combo .pick-price {
    margin-top: 0.35rem;
    font-size: 1.1rem;
}

.luxe-booking .pick-check {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.luxe-booking .pick.selected .pick-check {
    border-color: var(--luxe-gold-bright);
    background: var(--luxe-gold-bright);
    color: #0c0a10;
}

/* ============================ Đồng hồ đếm ngược hạn trả cọc ============================ */

.luxe-booking .hold-clock,
.auth-card .hold-clock {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.6rem 0;
    font-size: 0.9rem;
}

.hold-clock { color: var(--luxe-body, #d1cdd8); }
.hold-clock-label { color: var(--luxe-muted, #9e99a8); }

.hold-clock strong {
    font-variant-numeric: tabular-nums;   /* số không nhảy ngang khi đổi từ 9:59 sang 10:00 */
    font-size: 1.15rem;
    color: var(--luxe-gold-light, #ecd7bf);
}

.hold-clock-note { color: var(--luxe-muted, #9e99a8); font-size: 0.8rem; }

/* Hai phút cuối: đỏ. Hết giờ: xám và bỏ chữ to. */
.hold-clock.hold-soon strong { color: #fca5a5; }
.hold-clock.hold-over strong { color: var(--luxe-muted, #9e99a8); font-size: 0.95rem; font-weight: 600; }
.hold-clock.hold-over .hold-clock-label, .hold-clock.hold-over .hold-clock-note { display: none; }
.hold-clock .hold-again { display: none; }
.hold-clock.hold-over .hold-again { display: inline-block; margin-left: .5rem; color: var(--luxe-gold-bright, #d4af37); font-weight: 700; text-decoration: underline; }

/* ============================ Khối email sau khi đặt ============================ */
/*
   Thứ quan trọng nhất trên màn hình "đã đặt xong" KHÔNG phải lời chúc mừng, mà là địa chỉ email: mã lịch chỉ
   đi qua đó. Gõ sai một chữ là khách mất mã. Nên nó nằm ngay dưới tiêu đề, có viền vàng, và sửa được tại chỗ.
*/
.luxe-booking .mail-box {
    background: var(--luxe-surface-card);
    border: 1px solid var(--luxe-border-bright);
    border-left: 3px solid var(--luxe-gold-bright);
    border-radius: 0.9rem;
    padding: 0.9rem 1.05rem;
    margin-bottom: 1.1rem;
}

.luxe-booking .mail-label { font-size: 0.8rem; color: var(--luxe-muted); }

.luxe-booking .mail-addr {
    margin: 0.2rem 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--luxe-gold-light);
    overflow-wrap: anywhere;      /* email dài không được tràn khỏi khung */
}

.luxe-booking .mail-ok { color: var(--luxe-gold-light); }

/* Còn nợ cọc: nhấn mạnh hơn nữa, vì lúc này khách CHƯA có mã ở bất cứ đâu khác. */
.luxe-booking .mail-box-wait { background: rgba(212, 175, 55, 0.08); }

/* ============================ Ô nhập sai ============================ */
/*
   Lỗi phải nằm cạnh thứ gây ra lỗi. Viền đỏ để tìm thấy ô trong một trang dài, dòng chữ ngay dưới để biết
   phải sửa gì — chỉ một dòng đỏ ở đầu trang thì khách bấm mãi không được mà không hiểu vì sao.
*/
.luxe-booking .input.bad,
.luxe-booking .input.bad:focus {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

.luxe-booking .field-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #fca5a5;
}

/* ============================ Chọn dịch vụ: gọn cho bảng giá dài ============================ */
/*
   Bảng giá có thể dài hàng chục món. Danh sách phẳng thì khách cuộn mãi, và cuộn xong lại không nhớ mình
   đã chọn gì (người dùng phàn nàn 2026-09-18). Bố cục này cắt độ dài bằng ba việc: chỉ vẽ MỘT nhóm mỗi lần,
   cho tìm theo tên, và xếp hai cột khi màn hình đủ rộng. Thứ đã chọn nổi lên thành chip ở trên cùng.
*/

.luxe-booking .svc-tools { margin-bottom: 0.75rem; }

.luxe-booking .svc-search { width: 100%; margin-bottom: 0.6rem; }

.luxe-booking .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.5rem 0.85rem;
    min-height: 44px;                 /* đủ to để bấm bằng ngón tay */
    background: var(--luxe-surface-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: var(--luxe-body);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    max-width: 100%;
    overflow-wrap: anywhere;   /* tên nhóm dài bất thường thì xuống dòng, không tràn khỏi khung */
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) { .luxe-booking .chip:hover { border-color: rgba(212, 175, 55, 0.45); } }

.luxe-booking .chip.on {
    border-color: var(--luxe-gold-bright);
    background: rgba(212, 175, 55, 0.14);
    color: var(--luxe-gold-light);
    font-weight: 600;
}

/* Thứ đã chọn: chip bấm được để bỏ, ngay trên danh sách. */
.luxe-booking .sel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.luxe-booking .sel-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    min-height: 40px;
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid var(--luxe-gold-bright);
    border-radius: 999px;
    color: var(--luxe-gold-light);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) { .luxe-booking .sel-chip:hover { background: rgba(212, 175, 55, 0.24); } }

/* Lưới dịch vụ: một cột trên điện thoại, hai cột từ 640px — cắt một nửa độ dài trang. */
.luxe-booking .svc-grid {
    display: grid;
    grid-template-columns: 1fr;   /* PHẢI ghi rõ: app.css có .svc-grid auto-fill 11rem của portal, ép hai cột cả trên điện thoại */
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* ---- Bảng giá dài (2026-10-09): nhóm + mỗi hàng một món + ô tìm và dải nhóm dính trên đầu ---- */

.luxe-booking .svc-tools {
    position: sticky;
    top: 56px;                    /* ngay dưới .booking-topbar */
    z-index: 6;
    margin: 0 -1rem 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(9, 8, 12, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--luxe-border);
}

/*
   MỘT HÀNG (chủ shop 2026-10-09): dải nhiều hàng ăn nửa màn điện thoại. Nút 🔍 bên trái, dải nhóm vuốt ngang chiếm
   phần còn lại; chạm 🔍 thì cả hàng thành ô tìm (+ nút ✕ đóng).
*/
.luxe-booking .svc-navrow,
.luxe-booking .svc-searchrow { display: flex; align-items: center; gap: 0.5rem; }

.luxe-booking .svc-searchrow .svc-search { flex: 1; min-width: 0; }

.luxe-booking .svc-icon {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.6);
    background: rgba(212, 175, 55, 0.12);
    color: var(--luxe-gold-light);
    font: inherit;
    cursor: pointer;
}

/*
   Báo "CÒN NHÓM, VUỐT SANG" bằng ba thứ (chủ shop dặn): mép mờ dần + mũi tên vàng ở phía còn nhóm (bấm được),
   và dải tự nhích một nhịp lúc mở trang. booking-nav.js gắn can-l / can-r theo vị trí cuộn.
*/
.luxe-booking .svc-jump-wrap { position: relative; flex: 1; min-width: 0; }

.luxe-booking .svc-jump {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.luxe-booking .svc-jump::-webkit-scrollbar { display: none; }

.luxe-booking .svc-more {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    display: none;
    align-items: center;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Mũi tên trong vòng tròn vàng đặc: phải nhìn thấy ngay là "còn nữa, vuốt sang" — một dấu › mảnh thì không ai để ý. */
.luxe-booking .svc-more span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--luxe-gold-bright);
    color: #0c0a10;
    font: 800 1.15rem/1 var(--font-sans);
    padding-bottom: 2px;
    box-shadow: 0 0 0 4px rgba(9, 8, 12, 0.9);
}

.luxe-booking .svc-more-r {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(to right, rgba(9, 8, 12, 0), rgba(9, 8, 12, 0.97) 60%);
}

.luxe-booking .svc-more-l {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(to left, rgba(9, 8, 12, 0), rgba(9, 8, 12, 0.97) 60%);
}

.luxe-booking .svc-jump-wrap.can-r .svc-more-r,
.luxe-booking .svc-jump-wrap.can-l .svc-more-l { display: flex; }

/* Nổi bật (chủ shop 2026-10-09: "làm chìm quá"): viền + chữ vàng kim, nền ánh vàng; chạm vào thì đổ vàng đặc. */
.luxe-booking .svc-jump .chip {
    white-space: nowrap;
    min-height: 36px;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--luxe-gold-light);
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.6);
}

/* Rê chuột chỉ sáng nhẹ: trên điện thoại :hover DÍNH sau khi chạm, đổ vàng đặc là thành hai nút cùng "đang xem". */
@media (hover: hover) and (pointer: fine) { .luxe-booking .svc-jump .chip:hover { background: rgba(212, 175, 55, 0.24); border-color: var(--luxe-gold-bright); } }

.luxe-booking .svc-jump .chip.on {   /* nhóm đang xem — booking-nav.js gắn */
    background: var(--luxe-gold-bright);
    border-color: var(--luxe-gold-bright);
    color: #0c0a10;
}

.luxe-booking .svc-sec-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.4rem 0 0.55rem;
    font-size: 1.05rem;
    color: var(--luxe-gold-light);
}

.luxe-booking .svc-sec-head span { font-size: 0.78rem; font-weight: 400; color: var(--luxe-muted); }

.luxe-booking .svc-list { display: grid; gap: 0.45rem; margin-bottom: 0.5rem; }

/* Hàng dịch vụ: tên chiếm hết phần còn lại, giá + nút chọn cố định bên phải. */
.luxe-booking .pick-row {
    padding: 0.75rem 0.9rem;
    min-height: 56px;
    gap: 0.75rem;
    border-radius: 0.8rem;
}

.luxe-booking .pick-row .pick-main { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.luxe-booking .pick-row .pick-name { font-size: 0.95rem; line-height: 1.3; overflow-wrap: normal; }
.luxe-booking .pick-row .pick-meta { font-size: 0.75rem; }
.luxe-booking .pick-row .pick-price { font-size: 1rem; }

@media (min-width: 640px) {
    .luxe-booking .svc-grid { grid-template-columns: 1fr 1fr; }
}

/* Hàng gọn: thấp hơn hàng thường 12px và chữ phụ nhỏ hơn, nhưng vùng bấm vẫn 56px. */
.luxe-booking .pick-sm {
    padding: 0.7rem 0.9rem;
    min-height: 56px;
    gap: 0.6rem;
    border-radius: 0.8rem;
}

.luxe-booking .pick-main { min-width: 0; }
.luxe-booking .pick-name { overflow-wrap: anywhere; }
.luxe-booking .pick-sm .pick-name { font-size: 0.95rem; }
.luxe-booking .pick-sm .pick-meta { font-size: 0.75rem; }
.luxe-booking .pick-cat { color: var(--luxe-gold-light); opacity: 0.85; }
.luxe-booking .pick-cat::after { content: " · "; color: var(--luxe-muted); }

.luxe-booking .pick-bar-sum { display: grid; gap: 0.1rem; line-height: 1.2; min-width: 0; }
.luxe-booking .pick-bar-sum strong { color: var(--luxe-pearl); font-size: 0.95rem; }
.luxe-booking .pick-bar-sum .muted { color: rgba(236, 215, 191, 0.62); font-size: 0.8rem; }   /* màn rất hẹp: xuống dòng, không cắt "…" */
.luxe-booking .pick-bar-sum .pick-bar-total {
    font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; color: var(--luxe-gold-light);
    font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

/* ============================ Dải ngày & khung giờ ============================ */

.luxe-booking .day-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    /* Cuộn dừng đúng từng thẻ ngày, không dừng lưng chừng giữa hai ngày. */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /* Thanh cuộn mặc định của Windows dày và xám, cắt ngang giữa giao diện đen-vàng trông như lỗi. */
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.4) transparent;
}

.luxe-booking .day-strip::-webkit-scrollbar { height: 4px; }
.luxe-booking .day-strip::-webkit-scrollbar-track { background: transparent; }

.luxe-booking .day-strip::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.35);
    border-radius: 9999px;
}

.luxe-booking .day-chip {
    scroll-snap-align: start;
    flex: none;
    min-width: 58px;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.5rem 0.35rem;
    background: var(--luxe-surface-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.85rem;
    color: var(--luxe-body);
    font: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) { .luxe-booking .day-chip:hover { border-color: rgba(212, 175, 55, 0.45); } }
.luxe-booking .day-chip .dow { font-size: 0.68rem; text-transform: uppercase; color: var(--luxe-muted); letter-spacing: 0.06em; }
.luxe-booking .day-chip .dom { font-size: 1.2rem; font-weight: 700; color: var(--luxe-pearl); }

.luxe-booking .day-chip.selected {
    background: var(--luxe-gold);
    border-color: var(--luxe-gold-bright);
}

.luxe-booking .day-chip.selected .dow { color: rgba(12, 10, 16, 0.75); }
.luxe-booking .day-chip.selected .dom { color: #0c0a10; }

.luxe-booking .slot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.luxe-booking .slot {
    min-height: 48px;
    background: var(--luxe-surface-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.75rem;
    color: var(--luxe-pearl);
    font: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;   /* giờ giấc thẳng cột, không nhảy chữ số */
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) { .luxe-booking .slot:hover { border-color: rgba(212, 175, 55, 0.5); background: var(--luxe-surface-hover); } }
.luxe-booking .slot:active:not(:disabled), .luxe-booking .day-chip:active:not(:disabled) { transform: scale(0.97); transition-duration: 100ms; }

.luxe-booking .slot.selected {
    background: var(--luxe-gold);
    border-color: var(--luxe-gold-bright);
    color: #0c0a10;
    font-weight: 800;
}

/* Trạng thái rỗng: nói rõ phải làm gì tiếp, không để một khoảng trắng khó hiểu. */
.luxe-booking .slot-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--luxe-muted);
    background: var(--luxe-surface);
    border: 1px dashed var(--luxe-border);
    border-radius: 1rem;
    margin-bottom: 1.25rem;
}

.luxe-booking .slot-empty em { color: var(--luxe-gold-light); font-style: normal; font-weight: 600; }

/* ============================ Bảng tóm tắt ============================ */

.luxe-booking .summary-card {
    background: var(--luxe-surface-card);
    border: 1px solid var(--luxe-border);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.luxe-booking .summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--luxe-pearl);
}

.luxe-booking .summary-row:last-child { border-bottom: 0; }

/* Danh sách dịch vụ trong thẻ tóm tắt (2026-10-14): mỗi dịch vụ một dòng thay vì một chuỗi nối dấu phẩy. */
.luxe-booking .summary-treatments { padding: 0.85rem 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.luxe-booking .summary-treatments .label { color: var(--luxe-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.luxe-booking .summary-treatments ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.luxe-booking .summary-treatments li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--luxe-pearl); line-height: 1.35; }
.luxe-booking .summary-treatments li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--luxe-gold-bright); align-self: center; margin-right: -0.5rem; }
.luxe-booking .summary-treatments .tr-name { flex: 1; min-width: 0; }
.luxe-booking .summary-treatments .tr-qty { color: var(--luxe-gold-bright); font-weight: 700; white-space: nowrap; }
.luxe-booking .summary-treatments .tr-min { flex: none; color: var(--luxe-muted); font-size: 0.85rem; white-space: nowrap; }
.luxe-booking .summary-row .label { color: var(--luxe-muted); font-size: 0.85rem; }

.luxe-booking .summary-total {
    background: rgba(212, 175, 55, 0.1);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    font-weight: 800;
    color: var(--luxe-gold-bright);
    font-size: 1.05rem;
}

/* ============================ Mã đặt chỗ ============================ */

.luxe-booking .code-box {
    text-align: center;
    padding: 1.75rem 1.25rem;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.14) 0%, rgba(212, 175, 55, 0.03) 100%);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 1rem;
    margin-bottom: 1.25rem;
}

.luxe-booking .code-box .muted { color: var(--luxe-muted); font-size: 0.85rem; }

.luxe-booking .code-box .code {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--luxe-gold-bright);
    margin-top: 0.35rem;
}

/* ============================ Ô nhập ============================ */

.luxe-booking .field { margin-bottom: 1.15rem; }

.luxe-booking .field > span {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--luxe-pearl);
    margin-bottom: 0.4rem;
}

.luxe-booking .input {
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1.1rem;
    background: rgba(10, 8, 15, 0.6);
    border: 1px solid var(--luxe-border);
    border-radius: 0.85rem;
    color: var(--luxe-pearl);
    /* 16px là mức tối thiểu: nhỏ hơn thì iOS TỰ PHÓNG TO trang khi chạm vào ô nhập. */
    font-size: 1rem;
    font-family: inherit;
}

/* Chữ gợi ý phải đủ tương phản để đọc được, nhưng vẫn nhạt hơn chữ thật để không gây nhầm. */
.luxe-booking .input::placeholder { color: rgba(158, 153, 168, 0.85); }

.luxe-booking .input:focus {
    outline: 2px solid var(--luxe-gold-bright);
    outline-offset: 1px;
    border-color: var(--luxe-gold-bright);
    background: rgba(10, 8, 15, 0.85);
}

.luxe-booking .hint { color: var(--luxe-muted); font-size: 0.8rem; margin: 0.4rem 0 0; }

/* ============================ Nút ============================ */

.luxe-booking .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.6rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}

.luxe-booking .btn:active:not(:disabled) { transform: scale(0.97); transition-duration: 100ms; }

/* Chữ đen trên nền vàng: tương phản khoảng 9:1, vượt xa ngưỡng AA. */
.luxe-booking .btn-primary {
    background: var(--luxe-gold-gradient);
    border-color: var(--luxe-gold-bright);
    color: #0c0a10;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
}

@media (hover: hover) and (pointer: fine) {
    .luxe-booking .btn-primary:hover:not(:disabled) {
        box-shadow: 0 8px 26px rgba(212, 175, 55, 0.4);
    }
}

.luxe-booking .btn-outline {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--luxe-gold-light);
}

@media (hover: hover) and (pointer: fine) { .luxe-booking .btn-outline:hover { background: rgba(212, 175, 55, 0.14); color: var(--luxe-pearl); } }

.luxe-booking .btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--luxe-muted);
}

@media (hover: hover) and (pointer: fine) { .luxe-booking .btn-ghost:hover { color: var(--luxe-pearl); border-color: rgba(255, 255, 255, 0.3); } }

.luxe-booking .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.luxe-booking .btn-block { display: flex; width: 100%; margin-bottom: 0.65rem; }

/* ============================ Thanh điều hướng bước ============================ */

.luxe-booking .wizard-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Nút "Lùi" đứng trái, nút đi tiếp đứng phải — tay phải cầm điện thoại với tới nút chính dễ nhất. */
.luxe-booking .wizard-nav .btn-back { margin-right: auto; }
.luxe-booking .wizard-nav .btn-primary { margin-left: auto; }

/* ============================ Thông báo ============================ */

.luxe-booking .alert {
    padding: 0.9rem 1.15rem;
    border-radius: 0.85rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.luxe-booking .alert-info {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: var(--luxe-gold-light);
}

.luxe-booking .alert-info strong { color: var(--luxe-gold-bright); }

.luxe-booking .alert-warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

.luxe-booking .alert-error {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

/* ============================ Chân trang ============================ */

.booking-foot {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--luxe-muted);
}

.booking-foot a { color: var(--luxe-gold-light); text-decoration: none; }
.booking-foot a:hover { color: var(--luxe-gold-bright); text-decoration: underline; }

/* ============================ Điện thoại ============================ */

@media (max-width: 639px) {
    /*
       Thanh nút dính đáy màn hình. Bước chọn dịch vụ dài tới 17 món; không có thanh này thì khách
       phải cuộn hết xuống cuối mới thấy nút đi tiếp, và nhiều người sẽ tưởng trang bị kẹt.
    */
    .luxe-booking .wizard-nav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 25;
        margin: 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: var(--bk-dock-bg);   /* đặc, khác SẮC với thẻ dịch vụ (đồng ấm vs tím than) — xem khối "Dock" (2026-10-22) */
        border-top: 1px solid rgba(212, 175, 55, 0.55);
        box-shadow: var(--bk-dock-shadow);
    }

    .luxe-booking .wizard-nav .btn { flex: 1; padding: 0 1rem; }
    .luxe-booking .slot-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) {
    .luxe-booking .slot-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1024px) {
    .luxe-booking .slot-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================ Giảm chuyển động ============================ */
/*
   Người bật "giảm chuyển động" trong hệ điều hành thường làm vậy vì chuyển động gây chóng mặt
   hoặc buồn nôn. Tắt hết, giữ lại đổi màu để phản hồi thao tác vẫn còn.
*/
@media (prefers-reduced-motion: reduce) {
    .luxe-booking * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .luxe-booking .pick:active,
    .luxe-booking .btn:active,
    .luxe-booking .slot:active,
    .luxe-booking .day-chip:active { transform: none; }

    .luxe-booking .day-strip { scroll-behavior: auto; }
}

/* Khối combo: ở trang chủ nằm ngoài .luxe-booking của trang đặt lịch, nên bỏ giới hạn bề rộng và khoảng đệm đáy. */
/* Khối "Combo deals" / "Packages" trang chủ — cùng kiểu thẻ luxe-card của khối ưu đãi phía trên (2026-10-11). */
.home-deals { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.home-deals-head { text-align: center; max-width: 680px; margin: 0 auto 2.5rem; }
.home-deals-eyebrow {
    display: block; margin-bottom: 0.5rem;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--luxe-gold-bright);
}
.home-deals-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; margin: 0; }
.home-deals-grid {
    display: grid; gap: 1.5rem; justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
}
.home-deal { text-decoration: none; color: inherit; justify-content: space-between; }
.home-deal, .home-deal * { text-decoration: none; }
.home-deal-img { height: 170px; margin-bottom: 1.25rem; }
.home-deal-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.home-deal-badge {
    padding: 0.25rem 0.7rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
    background: rgba(216, 155, 145, 0.18); border: 1px solid rgba(216, 155, 145, 0.4); color: var(--luxe-rose);
}
.home-deal-meta { font-size: 0.75rem; color: var(--luxe-muted); white-space: nowrap; }
.home-deal-name { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.75rem; }
.home-deal-items { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; }
.home-deal-items li {
    position: relative; padding-left: 1.1rem;
    font-size: 0.85rem; line-height: 1.45; color: var(--luxe-body);
}
.home-deal-items li::before {
    content: ""; position: absolute; left: 0; top: 0.55em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--luxe-gold);
}
.home-deal-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.home-deal-price { display: flex; align-items: baseline; gap: 0.45rem; }
.home-deal-price s { font-size: 0.85rem; color: var(--luxe-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.home-deal-price strong { font-size: 1.45rem; font-weight: 700; color: var(--luxe-gold-bright); }
.home-deal-cta { padding: 0.5rem 1.05rem; font-size: 0.78rem; }
.home-deal:hover .home-deal-cta { border-color: var(--luxe-gold-bright); }

/* "The Treatment Menu" trang chủ — kiểu B (chủ shop chọn 2026-10-11): MỘT cột giữa trang, tiêu đề nhóm chữ nghiêng vàng nhạt
   giữa hai đường kẻ, mỗi dịch vụ một dòng (tên đậm + dòng phụ nhạt, giá vàng bên phải, giá gốc gạch ngang dưới). */
.home-menu { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
.home-menu-group { display: flex; flex-direction: column; }
.home-menu-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 0.4rem; }
.home-menu-head::before, .home-menu-head::after {
    content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
}
.home-menu-head h3 {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1.25;
    margin: 0; color: var(--luxe-gold-light); text-align: center; max-width: 75%; text-transform: none; letter-spacing: 0;
}
.home-menu-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 0.25rem;
    border-bottom: 1px solid rgba(197, 168, 128, 0.16); text-decoration: none; color: var(--luxe-pearl); transition: background 0.2s;
}
.home-menu-row:hover { background: rgba(212, 175, 55, 0.05); }
.home-menu-row .name { font-size: 0.98rem; font-weight: 600; line-height: 1.35; min-width: 0; }
.home-menu-row .name small { display: block; margin-top: 0.2rem; font-size: 0.8rem; font-weight: 400; color: var(--luxe-muted); }
.home-menu-row .price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.home-menu-row .price strong { font-size: 1.05rem; font-weight: 700; color: var(--luxe-gold-bright); }
.home-menu-row .price s { font-size: 0.75rem; color: var(--luxe-muted); text-decoration: line-through; }
/* Extra dưới dịch vụ (migration 086): chữ nhỏ, nhạt, thụt vào — bảng giá vẫn gọn. */
.home-menu-extra {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.35rem 0.25rem 0.35rem 1rem; border-bottom: 1px solid rgba(197, 168, 128, 0.08);
    font-size: 0.78rem; color: var(--luxe-muted); text-decoration: none;
}
.home-menu-extra:hover { color: var(--luxe-gold-bright); }
/* Extra trên thẻ ưu đãi trang chủ. */
.home-offer-extras { margin: -0.75rem 0 1.25rem; font-size: 0.75rem; color: var(--luxe-gold-light); line-height: 1.5; }
.home-menu-more { display: block; }
.home-menu-more > summary {
    list-style: none; cursor: pointer; width: fit-content; margin-inline: auto; margin-top: 0.75rem; padding: 0.4rem 0.8rem; min-height: 40px;
    display: flex; align-items: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--luxe-gold-bright);
}
.home-menu-more > summary::-webkit-details-marker { display: none; }
.home-menu-more > summary:hover { border-color: var(--luxe-gold-bright); color: var(--luxe-gold-bright); }
.home-menu-more .less, .home-menu-more[open] .more { display: none; }
.home-menu-more[open] .less { display: inline; }
.luxe-booking .combo-head { margin: 1.25rem 0 0.5rem; }

/* Gói của khách: nhãn "📦 Package · N left" trên thẻ dịch vụ, và ô bật/tắt dùng gói dưới các món đã chọn. */
.luxe-booking .pick-pkg { display: block; margin-top: 0.15rem; font-weight: 600; color: var(--luxe-gold-light); }

.luxe-booking .pkg-use {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--luxe-pearl);
    cursor: pointer;
}

.luxe-booking .pkg-use input { accent-color: var(--luxe-gold-bright); width: 1rem; height: 1rem; }

/* Extra của dịch vụ đã chọn (migration 086): khung nhỏ, ô tick dùng lại kiểu .pkg-use. */
.luxe-booking .extra-pick {
    margin: 0.25rem 0 0.75rem;
    padding: 0.6rem 0.8rem 0.1rem;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
}
.luxe-booking .pick-extra-tag { color: var(--luxe-gold-bright); font-weight: 600; }
/* Chip món đã chọn có − / + (cùng dịch vụ nhiều lần). */
/* Nút 2.5rem (40px) cách nhau 0.6rem: 1.6rem cũ sát nhau, bấm − nhầm trên điện thoại là mất món (rà soát giao diện 2026-10-12). */
.luxe-booking .sel-chip-qty { display: inline-flex; align-items: center; gap: 0.6rem; cursor: default; }
.luxe-booking .sel-chip-qty .qty-btn {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.45);
    background: transparent; color: var(--luxe-pearl); font-weight: 700; line-height: 1; cursor: pointer;
    touch-action: manipulation; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.luxe-booking .sel-chip-qty .qty-btn:not(:disabled):active { background: rgba(212, 175, 55, 0.18); }
.luxe-booking .sel-chip-qty .qty-btn.qty-remove { border-color: rgba(229, 115, 115, 0.6); font-size: 0.85rem; }
.luxe-booking .sel-chip-qty .qty-btn:disabled { opacity: 0.35; cursor: default; }
.luxe-booking .extra-for {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxe-gold-bright);
}

/* ============================ Video nền trang đặt lịch ============================ */
/*
   Video THẬT các dịch vụ của tiệm (Mixkit, giấy phép miễn phí, không cần ghi nguồn): dũa móng, massage tay, đèn UV,
   xông mặt, đắp mặt nạ, cận cảnh móng — 25s lặp, quay chậm 1.25x cho "nhẹ nhàng" (chủ shop 2026-10-09).
   Hai bản: dọc 540×960 (1,5 MB) cho điện thoại, ngang 1280×720 (2,3 MB) cho máy tính.

   MƯỢT là điều kiện bắt buộc, nên:
     - video nằm lớp RIÊNG cố định (position: fixed + translateZ) — cuộn trang không bắt trình duyệt vẽ lại video;
     - KHÔNG backdrop-filter nào phía trên video: làm mờ nền phải tính lại MỖI khung hình video, là thứ làm điện
       thoại tầm trung giật nhất. Các thanh dính dùng nền gần đặc thay cho làm mờ;
     - "giảm chuyển động" của hệ điều hành / chế độ tiết kiệm dữ liệu → chỉ ảnh tĩnh (booking-nav.js dừng video).
*/
.bk-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #09080c url("../images/booking-bg-land.jpg") center / cover no-repeat;
    transform: translateZ(0);
}

.bk-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Phủ tối để chữ luôn đọc rõ: trên đầu nhạt hơn cho video "thở", xuống dưới đậm dần nơi danh sách dày. */
.bk-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 8, 12, 0.55) 0%, rgba(9, 8, 12, 0.72) 45%, rgba(9, 8, 12, 0.82) 100%);
}

@media (orientation: portrait) {
    .bk-bg { background-image: url("../images/booking-bg-port.jpg"); }
}

/* Thẻ hơi trong để video lộ ra mềm phía sau — không làm mờ (xem trên). */
.luxe-booking .pick { background: rgba(20, 17, 28, 0.8); }
@media (hover: hover) and (pointer: fine) { .luxe-booking .pick:hover { background: rgba(31, 27, 43, 0.88); } }

.booking-topbar,
.luxe-booking .svc-tools,
.luxe-booking .wizard-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.luxe-booking .svc-tools { background: rgba(9, 8, 12, 0.97); }

/* ============================ Bảng giá kiểu "thực đơn" (chủ shop 2026-10-09) ============================ */
/*
   Trên máy tính, từng thanh dài tối rời nhau trông nặng và đơn điệu. Mỗi nhóm giờ là MỘT khung bo tròn, các món
   nằm trong ngăn bằng đường kẻ mảnh; từ 720px xếp hai cột cho bớt dài. Đường kẻ = khe 1px để lộ nền khung.
*/
.luxe-booking .svc-list {
    gap: 1px;
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 1.1rem;
    overflow: hidden;
}

.luxe-booking .svc-list .pick-row {
    background: rgba(18, 15, 25, 0.86);
    border: 0;
    border-radius: 0;
    min-height: 62px;
    padding: 0.8rem 1.05rem;
}

@media (hover: hover) and (pointer: fine) { .luxe-booking .svc-list .pick-row:hover { background: rgba(32, 27, 44, 0.92); } }
/* Dòng liền nhau trong khung: co lại sẽ lộ khe → phản hồi bằng nền sáng thay cho co. */
.luxe-booking .svc-list .pick-row:active { transform: none; background: rgba(212, 175, 55, 0.1); transition-duration: 0ms; }

/* Đã chọn: vạch vàng bên trái + nền ánh vàng — thấy ngay trong cả khung. */
.luxe-booking .svc-list .pick-row.selected {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, rgba(30, 25, 38, 0.92) 70%);
    box-shadow: inset 3px 0 0 var(--luxe-gold-bright);
}

@media (min-width: 720px) {
    .luxe-booking .svc-list { grid-template-columns: 1fr 1fr; }
    /* Số món lẻ: món cuối trải hết hàng, không để một ô trống lộ màu nền khung. */
    .luxe-booking .svc-list .pick-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Dải nhóm trên máy tính: đúng bề rộng danh sách, bo tròn — không tràn ra mép như thanh vuông (điện thoại giữ tràn
   mép, vì ở đó khung chạm hai cạnh màn hình mới gọn). */
@media (min-width: 640px) {
    .luxe-booking .svc-tools {
        margin: 0 0 0.9rem;
        padding: 0.4rem;
        border: 1px solid rgba(212, 175, 55, 0.28);
        border-radius: 999px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }

    .luxe-booking .svc-more-r { border-radius: 0 999px 999px 0; }
    .luxe-booking .svc-more-l { border-radius: 999px 0 0 999px; }
}

/* ============================ Thanh nút + tổng (một thanh) & phản hồi chạm tức thì ============================ */

/* Thanh nút mang luôn phần tổng ở bước chọn dịch vụ: tổng bên trái, Continue bên phải. Máy tính: dính đáy. */
.luxe-booking .wizard-nav.is-sum {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 0.7rem 0.9rem;
    background: rgba(16, 14, 22, 0.98);
    border: 1px solid var(--luxe-border);
    border-radius: 1rem;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}

.luxe-booking .wizard-nav.is-sum .pick-bar-sum { flex: 1; }

/* ---------- Dock tổng + Continue (chủ shop 2026-10-22: "cả hàng cùng màu đen với dịch vụ, khó nhìn") ----------
   Thẻ dịch vụ là tím than; làm sáng thanh lên một bậc vẫn đọc như "thêm một tấm thẻ". Tách bằng SẮC: nền đồng ấm gần đen
   (cùng họ vàng thương hiệu), vạch vàng mảnh cạnh trên + vệt sáng giữa, bóng ấm. Đặc hoàn toàn — không backdrop-filter
   (video phía sau, xem khối Video nền). Máy tính: nổi như dock, cách mép; điện thoại: sát đáy. */
.luxe-booking {
    --bk-dock-bg: linear-gradient(180deg, #2a2318 0%, #1a150e 100%);
    --bk-dock-shadow: 0 -18px 40px rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(212, 175, 55, 0.08);
}
.luxe-booking .wizard-nav.is-sum {
    bottom: 0;
    padding: 0.85rem 0.9rem 0.85rem 1.25rem;
    background: var(--bk-dock-bg);
    border: 1px solid rgba(212, 175, 55, 0.42);
    border-bottom: 0;
    border-radius: 1.25rem 1.25rem 0 0;   /* sát đáy: không còn khe để chữ dịch vụ lộ bên dưới */
    box-shadow: var(--bk-dock-shadow), inset 0 1px 0 rgba(236, 215, 191, 0.10);
}
/* vệt sáng vàng ở giữa cạnh trên — "viền kim loại" thay cho viền đều */
.luxe-booking .wizard-nav.is-sum::after {
    content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(236, 215, 191, 0.85), transparent);
}
/* dải mờ phía trên: danh sách nhạt dần trước khi chạm thanh, không bị "cắt ngang" */
.luxe-booking .wizard-nav.is-sum::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: 36px; pointer-events: none;
    background: linear-gradient(180deg, rgba(9, 8, 12, 0) 0%, rgba(9, 8, 12, 0.8) 100%);
}

@media (max-width: 639px) {
    /* Điện thoại: thanh vẫn cố định sát đáy như các bước khác — chỉ đổi cách chia chỗ. */
    .luxe-booking .wizard-nav.is-sum {
        position: fixed;
        bottom: 0;
        border-radius: 1.1rem 1.1rem 0 0;
        border-width: 1px 0 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    }

    .luxe-booking .wizard-nav.is-sum .btn { flex: none; padding: 0 1.4rem; }
    /* chỗ chật: Back thu thành nút tròn chỉ có mũi tên (aria-label vẫn đọc "Back"), nhường chỗ cho tổng tiền */
    .luxe-booking .wizard-nav.is-sum .btn-back { width: 48px; min-width: 48px; padding: 0; }
    .luxe-booking .wizard-nav.is-sum .btn-back-label { display: none; }
}

/* Bỏ độ trễ ~300ms trình duyệt điện thoại chờ xem có chạm đúp để phóng to — chạm là ăn ngay. */
.luxe-booking .pick,
.luxe-booking .chip,
.luxe-booking .slot,
.luxe-booking .day-chip,
.luxe-booking .btn,
.luxe-booking .sel-chip,
.luxe-booking .svc-icon,
.luxe-booking .svc-more { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }


/* Đã đăng nhập (2026-10-14): dải "Signed in as …" dưới thanh trên + khung thông tin liên lạc gọn thay cho ba ô phải gõ. */
.signed-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 1rem;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    color: var(--luxe-pearl);
    background: rgba(212, 175, 55, 0.08);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.signed-bar strong { color: var(--luxe-gold-light); }
.signed-bar a { color: var(--luxe-gold-light); text-decoration: underline; }

.contact-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 12px;
    background: rgba(212, 175, 55, 0.06);
}
.contact-summary-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.contact-summary-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.contact-summary-edit {
    background: none;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 9999px;
    padding: 0.35rem 0.9rem;
    color: var(--luxe-gold-light);
    font-size: 0.8rem;
    cursor: pointer;
}

/* Ô SĐT / email của tài khoản — chỉ đọc (2026-10-14). */
.input-locked, .gift-locked { opacity: 0.75; cursor: not-allowed; user-select: all; }
.gift-locked { padding: 0.7rem 0.9rem; border: 1px solid rgba(212, 175, 55, 0.25); border-radius: 10px; }

/* Hộp "Review your treatments" (2026-10-17): món đã chọn, số lần, gói, extra — trước khi sang bước sau. */
.luxe-booking .review-card { max-width: 32rem; max-height: calc(100dvh - 2rem); overflow-y: auto; }
.luxe-booking .review-line { margin: 0 0 0.6rem; }
.luxe-booking .review-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.5rem 0; border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}
.luxe-booking .review-item + .pkg-use { margin-top: 0.5rem; }
.luxe-booking .review-name { flex: 1; min-width: 0; }
.luxe-booking .review-card .extra-pick { margin-top: 0.75rem; }
.luxe-booking .review-card .extra-pick .pkg-use { font-size: 0.95rem; min-height: 40px; }
.luxe-booking .review-card .extra-pick .pkg-use input { width: 1.25rem; height: 1.25rem; }
.luxe-booking .review-sum { display: flex; justify-content: space-between; gap: 0.5rem; margin: 1rem 0 0.75rem; }
.luxe-booking .review-actions { display: flex; gap: 0.5rem; }
.luxe-booking .review-actions .btn { flex: 1; }

/* Đổi bước (2026-10-22): nội dung bước mới hiện mờ dần + nhích lên 6px, 200ms — thấy rõ đã sang bước, không "nhảy trang".
   Không trượt ngang (chóng mặt), không giữ transform sau khi xong (thanh .svc-tools dính bên trong vẫn hoạt động). */
.luxe-booking .step-body.is-anim { animation: bk-step-in 200ms var(--ease-out); }
@keyframes bk-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .luxe-booking .step-body.is-anim { animation-name: bk-fade; }   /* bỏ nhích, chỉ mờ (thời lượng đã rút ~0 ở khối giảm chuyển động) */
}