/* =========================================================================
   Đặt studio phía khách (/booking, /booking-detail, /booking-package, /history-booking)
   Mọi style bọc trong .bkw để không ảnh hưởng theme chung. Giao diện tối theo app DECOM.
   ========================================================================= */

   footer { 
    margin-top: 0px !important; 
}
.bkw {
    --bk-bg: #0b0d17;
    --bk-card: #151826;
    --bk-card-2: #1c2033;
    --bk-line: #2a2f45;
    --bk-text: #e8eaf2;
    --bk-muted: #9aa1b9;
    --bk-dim: #6b7290;
    --bk-green: #22c55e;
    --bk-orange: #f59e0b;
    --bk-red: #f43f5e;
    --bk-blue: #38bdf8;
    --bk-purple: #a855f7;
    --bk-yellow: #facc15;
    --bk-grad: linear-gradient(90deg, #9333ea 0%, #ec4899 55%, #f97316 100%);
    --bk-radius: 16px;
    background: var(--bk-bg);
    color: var(--bk-text);
    font-family: var(--font-family-key, 'Montserrat'), Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    padding: 24px 0 48px;
    min-height: 60vh;
}
.bkw *, .bkw *::before, .bkw *::after { box-sizing: border-box; }
.bkw a { color: inherit; text-decoration: none; }
.bkw a:hover { color: inherit; text-decoration: none; }
.bkw h1, .bkw h2, .bkw h3, .bkw h4 { color: var(--bk-text); margin: 0; font-weight: 700; }
.bkw-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.bkw-muted { color: var(--bk-muted); }
.bkw-dim { color: var(--bk-dim); }
.bkw-hide { display: none !important; }
.bkw-money { color: #ff4d7d; font-weight: 800; }
.bkw-strike { color: var(--bk-dim); text-decoration: line-through; font-weight: 500; }
.bkw-grad-text { background: var(--bk-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Khối / thẻ ---------- */
.bkw-card { background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: var(--bk-radius); padding: 18px; }
.bkw-card + .bkw-card { margin-top: 16px; }
.bkw-card-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.bkw-sep { height: 1px; background: var(--bk-line); margin: 14px 0; border: 0; }
.bkw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.bkw-row b { font-weight: 700; }
.bkw-note { border: 1px solid rgba(56, 189, 248, .35); background: rgba(56, 189, 248, .07); color: #cfe9f7; border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; }
.bkw-note i { color: var(--bk-blue); margin-top: 3px; }
.bkw-warn { border: 1px solid rgba(250, 204, 21, .45); background: rgba(250, 204, 21, .07); color: #fde68a; border-radius: 12px; padding: 10px 14px; }
.bkw-empty { text-align: center; color: var(--bk-muted); padding: 40px 16px; }
.bkw-empty i { font-size: 36px; color: var(--bk-dim); display: block; margin-bottom: 10px; }

/* ---------- Nút ---------- */
.bkw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 12px 22px; font-weight: 800; font-size: 14px; letter-spacing: .3px; cursor: pointer; transition: transform .12s, opacity .12s, box-shadow .12s; color: #fff; background: var(--bk-card-2); text-transform: none; }
.bkw-btn:hover { transform: translateY(-1px); color: #fff; }
.bkw-btn:disabled, .bkw-btn.is-loading { opacity: .55; cursor: not-allowed; transform: none; }
.bkw-btn-primary { background: var(--bk-grad); box-shadow: 0 8px 24px rgba(236, 72, 153, .25); text-transform: uppercase; }
.bkw-btn-outline { background: transparent; border: 1.5px solid var(--bk-line); color: var(--bk-text); }
.bkw-btn-danger { background: transparent; border: 1.5px solid var(--bk-red); color: var(--bk-red); text-transform: uppercase; }
.bkw-btn-danger:hover { color: var(--bk-red); background: rgba(244, 63, 94, .08); }
.bkw-btn-sm { padding: 7px 14px; border-radius: 10px; font-size: 13px; }
.bkw-btn-block { width: 100%; }
.bkw-link { color: var(--bk-blue) !important; font-weight: 600; cursor: pointer; }
.bkw-icon-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--bk-card); border: 1px solid var(--bk-line); color: var(--bk-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.bkw-icon-btn.active { border-color: var(--bk-purple); color: var(--bk-purple); }

/* ---------- Ô nhập ---------- */
.bkw-input, .bkw-select, .bkw-textarea { width: 100%; background: var(--bk-card); border: 1px solid var(--bk-line); color: var(--bk-text); border-radius: 12px; padding: 11px 14px; font-size: 14px; outline: none; transition: border-color .15s; }
.bkw-input:focus, .bkw-select:focus, .bkw-textarea:focus { border-color: var(--bk-purple); }
.bkw-input::placeholder, .bkw-textarea::placeholder { color: var(--bk-dim); }
.bkw-select option { background: var(--bk-card); color: var(--bk-text); }
.bkw-textarea { min-height: 84px; resize: vertical; }
.bkw-label { display: block; color: var(--bk-muted); font-size: 13px; margin-bottom: 6px; font-weight: 600; }
.bkw-field { margin-bottom: 12px; }
.bkw-search { position: relative; flex: 1; }
.bkw-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bk-muted); }
.bkw-search .bkw-input { padding-left: 40px; height: 44px; }
/* Theme decom_v2 ép !important cho mọi input/select/textarea (nền trắng) -> đè lại trong phạm vi .bkw */
.bkw .bkw-input, .bkw .bkw-select, .bkw .bkw-textarea {
    background-color: var(--bk-card) !important; color: var(--bk-text) !important; border: 1px solid var(--bk-line) !important;
    border-radius: 12px !important; padding: 11px 14px !important; font-family: inherit !important; font-size: 14px !important; box-shadow: none !important;
}
.bkw .bkw-input:focus, .bkw .bkw-select:focus, .bkw .bkw-textarea:focus { border-color: var(--bk-purple) !important; box-shadow: 0 0 0 3px rgba(168, 85, 247, .18) !important; }
.bkw .bkw-search .bkw-input { padding-left: 40px !important; }
.bkw input[type="date"].bkw-input { color-scheme: dark; }

/* ---------- Chip / tab ---------- */
.bkw-chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.bkw-chips::-webkit-scrollbar { display: none; }
.bkw-chip { flex: 0 0 auto; border: 1px solid var(--bk-line); background: var(--bk-card); color: var(--bk-muted); border-radius: 999px; padding: 9px 18px; font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none; }
.bkw-chip.active { background: linear-gradient(90deg, #f43f5e, #f97316); color: #fff; border-color: transparent; }
.bkw-tag { display: inline-block; background: var(--bk-card-2); color: var(--bk-muted); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.bkw-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--bk-line); border-radius: 999px; padding: 8px 14px; color: var(--bk-text); background: transparent; font-size: 13px; }
.bkw-badges { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Tiêu đề trang ---------- */
.bkw-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bkw-head h1 { font-size: 24px; }
.bkw-head .bkw-back { width: 42px; height: 42px; border-radius: 50%; background: var(--bk-card); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bk-line); }
.bkw-sub { color: var(--bk-muted); font-size: 13px; margin-top: 2px; }

/* ---------- Danh sách phòng ---------- */
.bkw-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.bkw-filters { margin-bottom: 18px; }
.bkw-filters .bkw-grid-f { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bkw-range { display: flex; gap: 8px; align-items: center; }
.bkw-result-head { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 14px; }
.bkw-result-head h2 { font-size: 20px; }
.bkw-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bkw-room { background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s; }
.bkw-room:hover { transform: translateY(-3px); border-color: #3b4262; }
.bkw-room-img { position: relative; aspect-ratio: 16 / 10; background: #10131f center / cover no-repeat; }
.bkw-room-img .bkw-tag { position: absolute; left: 14px; bottom: 14px; background: rgba(11, 13, 23, .75); color: #fff; }
.bkw-room-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bkw-room-name { font-size: 18px; font-weight: 800; }
.bkw-room-meta { display: flex; align-items: center; gap: 14px; color: var(--bk-muted); flex-wrap: wrap; }
.bkw-room-meta .fa-star { color: var(--bk-yellow); }
.bkw-room-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; }
.bkw-price-from { color: var(--bk-muted); }
.bkw-price-from b { font-size: 24px; color: #ff4d7d; font-weight: 800; }
.bkw-more { text-align: center; margin-top: 22px; }
.bkw-dist { color: var(--bk-text); }
.bkw-dist .fa-location-dot { color: var(--bk-red); }
.bkw-off { opacity: .45; }

/* ---------- Định vị + bản đồ ---------- */
.bkw-geo { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(56, 189, 248, .35); background: rgba(56, 189, 248, .07); color: #cfe9f7; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.bkw-geo > i { color: var(--bk-blue); }
.bkw-geo span { flex: 1; }
.bkw-geo-x { cursor: pointer; font-size: 20px; color: var(--bk-muted); line-height: 1; }
.bkw-map-wrap { position: relative; margin-bottom: 20px; }
.bkw-map { height: 360px; border-radius: 20px; overflow: hidden; border: 1px solid var(--bk-line); background: #1b1f2e; z-index: 0; }
.bkw-map-me { position: absolute; right: 12px; bottom: 28px; z-index: 500; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--bk-line); background: var(--bk-card); color: var(--bk-text); cursor: pointer; }
.bkw-map .leaflet-control-zoom a { background: var(--bk-card); color: var(--bk-text); border-color: var(--bk-line); }
.bkw-map .leaflet-control-attribution { background: rgba(11, 13, 23, .7); color: var(--bk-dim); font-size: 10px; }
.bkw-map .leaflet-control-attribution a { color: var(--bk-muted); }
.bkw-dark-tiles { filter: invert(1) hue-rotate(200deg) brightness(.85) contrast(.85) saturate(.6); }
.bkw-pin-wrap { background: transparent; border: 0; }
.bkw-pin { position: relative; transform: translate(-50%, calc(-100% - 8px)); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: #e11d48; color: #fff; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(225, 29, 72, .35), 0 6px 16px rgba(0, 0, 0, .45); cursor: pointer; font-family: var(--font-family-key, 'Montserrat'), Arial, sans-serif; }
.bkw-pin::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bkw-pin span { background: #fff; color: #e11d48; border-radius: 999px; min-width: 18px; height: 18px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.bkw-popup .leaflet-popup-content-wrapper, .bkw-popup .leaflet-popup-tip { background: #151826; color: #e8eaf2; border: 1px solid #2a2f45; }
.bkw-popup .leaflet-popup-content { margin: 12px; font-family: var(--font-family-key, 'Montserrat'), Arial, sans-serif; }
.bkw-popup a.leaflet-popup-close-button { color: #9aa1b9; }
.bkw-pop b { font-size: 14px; }
.bkw-pop-sub { color: #9aa1b9; font-size: 12px; margin: 2px 0 8px; }
.bkw-pop-room { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: #1c2033; margin-top: 6px; color: #e8eaf2 !important; text-decoration: none !important; }
.bkw-pop-room:hover { background: #262b42; }
.bkw-pop-room .i { width: 48px; height: 40px; border-radius: 8px; background: #10131f center / cover no-repeat; flex: 0 0 auto; }
.bkw-pop-room .t { flex: 1; min-width: 0; }
.bkw-pop-room .t b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkw-pop-room .t small { color: #9aa1b9; }
.bkw-pop-room .p { color: #ff4d7d; font-weight: 800; }
.bkw-minimap { height: 200px; border-radius: 14px; overflow: hidden; margin-top: 12px; border: 1px solid var(--bk-line); z-index: 0; }

/* ---------- Skeleton ---------- */
.bkw-skel { background: linear-gradient(90deg, #151826 25%, #1f2337 37%, #151826 63%); background-size: 400% 100%; animation: bkw-shimmer 1.3s ease infinite; border-radius: 12px; }
@keyframes bkw-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Chi tiết phòng ---------- */
.bkw-detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.bkw-detail > div, .bkw-summary { min-width: 0; }
.bkw-gallery { position: relative; border-radius: 20px; overflow: hidden; background: #10131f; aspect-ratio: 16 / 9; }
.bkw-gallery-main { position: absolute; inset: 0; background: center / cover no-repeat; transition: background-image .2s; }
.bkw-gallery-count { position: absolute; right: 14px; bottom: 14px; background: rgba(0, 0, 0, .6); color: #fff; padding: 4px 12px; border-radius: 999px; font-weight: 700; }
.bkw-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; border: 0; cursor: pointer; }
.bkw-gallery-nav.prev { left: 12px; }
.bkw-gallery-nav.next { right: 12px; }
.bkw-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.bkw-thumb { width: 84px; height: 56px; border-radius: 10px; background: center / cover no-repeat; cursor: pointer; opacity: .6; border: 2px solid transparent; flex: 0 0 auto; }
.bkw-thumb.active { opacity: 1; border-color: var(--bk-purple); }
.bkw-title { font-size: 28px; font-weight: 800; margin: 18px 0 6px; }
.bkw-rating { display: inline-flex; align-items: center; gap: 6px; color: var(--bk-muted); cursor: pointer; }
.bkw-rating .fa-star { color: var(--bk-yellow); }
.bkw-rating b { color: var(--bk-yellow); font-size: 16px; }
.bkw-address { display: flex; gap: 10px; align-items: flex-start; color: var(--bk-muted); }
.bkw-address .fa-location-dot { color: var(--bk-red); margin-top: 3px; }
.bkw-pkg-banner { display: flex; align-items: center; gap: 14px; border-radius: 16px; padding: 16px; background: linear-gradient(120deg, rgba(147, 51, 234, .28), rgba(244, 63, 94, .18)); border: 1px solid rgba(168, 85, 247, .45); cursor: pointer; }
.bkw-pkg-ico { width: 52px; height: 52px; border-radius: 14px; background: rgba(250, 204, 21, .12); color: var(--bk-yellow); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.bkw-desc { white-space: pre-line; color: var(--bk-muted); max-height: 140px; overflow: hidden; position: relative; }
.bkw-desc.open { max-height: none; }
.bkw-amen { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.bkw-amen div { background: var(--bk-card-2); border-radius: 12px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; color: var(--bk-muted); }
.bkw-amen img { width: 20px; height: 20px; object-fit: contain; }

/* Đánh giá */
.bkw-review { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bk-line); }
.bkw-review:last-child { border-bottom: 0; }
.bkw-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--bk-card-2) center / cover no-repeat; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--bk-muted); font-weight: 800; }
.bkw-stars { color: var(--bk-yellow); letter-spacing: 2px; font-size: 13px; }
.bkw-stars .off { color: #3a3f58; }
.bkw-review-imgs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.bkw-review-imgs a { width: 64px; height: 64px; border-radius: 10px; background: center / cover no-repeat; display: block; }

/* Ngày */
.bkw-days-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bkw-days { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.bkw-day { flex: 0 0 64px; height: 76px; border-radius: 16px; border: 1px solid var(--bk-line); background: var(--bk-card-2); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; scroll-snap-align: start; user-select: none; }
.bkw-day small { color: var(--bk-muted); font-weight: 600; }
.bkw-day b { font-size: 22px; font-weight: 800; }
.bkw-day.active { background: linear-gradient(160deg, #a21caf, #f43f5e); border-color: transparent; }
.bkw-day.active small { color: #fff; }

/* Khung giờ */
.bkw-legend { display: flex; gap: 18px; color: var(--bk-muted); margin: 6px 0 12px; flex-wrap: wrap; }
.bkw-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--bk-green); }
.bkw-legend .l-pending::before { background: var(--bk-orange); }
.bkw-legend .l-booked::before { background: var(--bk-red); }
.bkw-legend .l-past::before { background: #3a3f58; }
.bkw-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bkw-slot { border: 1.5px solid var(--bk-green); color: var(--bk-green); background: rgba(34, 197, 94, .06); border-radius: 12px; padding: 10px 6px; text-align: center; font-weight: 700; cursor: pointer; user-select: none; transition: transform .1s; }
.bkw-slot small { display: block; font-weight: 600; font-size: 12px; opacity: .85; }
.bkw-slot:hover { transform: translateY(-1px); }
.bkw-slot.is-pending { border-color: var(--bk-orange); color: var(--bk-orange); background: rgba(245, 158, 11, .06); cursor: not-allowed; }
.bkw-slot.is-booked { border-color: var(--bk-red); color: var(--bk-red); background: rgba(244, 63, 94, .06); cursor: not-allowed; }
.bkw-slot.is-past { border-color: #2a2f45; color: #4b5272; background: transparent; cursor: not-allowed; }
.bkw-slot.is-on { background: var(--bk-grad); border-color: transparent; color: #fff; }

/* Ưu đãi */
.bkw-promo { border: 1px solid rgba(250, 204, 21, .45); border-radius: 16px; padding: 16px; }
.bkw-promo-title { color: var(--bk-yellow); font-weight: 800; font-size: 16px; display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bkw-promo-applied { border-radius: 14px; padding: 14px; background: linear-gradient(120deg, rgba(126, 34, 206, .45), rgba(190, 18, 60, .35)); border: 1px solid rgba(34, 197, 94, .45); margin: 10px 0; }
.bkw-promo-applied h4 { font-size: 15px; font-weight: 800; text-transform: uppercase; margin: 2px 0 4px; }
.bkw-promo-item { display: flex; gap: 14px; align-items: center; border-radius: 12px; background: var(--bk-card-2); padding: 12px 14px; margin-top: 8px; border: 1px solid transparent; }
.bkw-promo-item.on { border-color: var(--bk-green); background: rgba(34, 197, 94, .07); }
.bkw-promo-item b.h { color: var(--bk-yellow); min-width: 36px; font-weight: 800; }
.bkw-promo-item.on b.h { color: var(--bk-green); }
.bkw-promo-desc { color: var(--bk-blue); font-size: 13px; }
.bkw-req { color: #fb7185; font-size: 13px; margin-top: 8px; }
.bkw-req.ok { color: var(--bk-green); }
.bkw-picked { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bkw-picked span { background: rgba(0, 0, 0, .3); border-radius: 999px; padding: 4px 10px; font-size: 12px; }

/* Dịch vụ */
.bkw-service { display: flex; gap: 14px; align-items: flex-start; }
.bkw-service-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--bk-card-2) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--bk-muted); font-size: 20px; flex: 0 0 auto; }
.bkw-stepper { display: inline-flex; align-items: center; background: var(--bk-card-2); border-radius: 999px; border: 1px solid var(--bk-line); }
.bkw-stepper button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--bk-text); font-size: 18px; cursor: pointer; }
.bkw-stepper button:disabled { color: #3a3f58; cursor: not-allowed; }
.bkw-stepper span { min-width: 34px; text-align: center; font-weight: 800; font-size: 16px; }

/* Thanh toán / tóm tắt */
.bkw-summary { position: sticky; top: 56px; }
.bkw-pay { display: flex; flex-direction: column; gap: 10px; }
.bkw-pay label { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--bk-line); border-radius: 14px; padding: 12px 14px; cursor: pointer; margin: 0; font-weight: 500; }
.bkw-pay label.on { border-color: var(--bk-purple); background: rgba(168, 85, 247, .08); }
.bkw-pay label.off { opacity: .45; cursor: not-allowed; }
.bkw-pay input { accent-color: #a855f7; width: 18px; height: 18px; margin: 0; }
.bkw-pay .t { flex: 1; }
.bkw-pay .t b { display: block; }
.bkw-pay .t small { color: var(--bk-muted); }
.bkw-sub-pay { margin: -2px 0 0 30px; display: flex; gap: 8px; flex-wrap: wrap; }
.bkw-voucher-pick { display: flex; align-items: center; gap: 12px; border: 1.5px dashed rgba(250, 204, 21, .5); border-radius: 14px; padding: 12px 14px; cursor: pointer; color: #fde68a; }
.bkw-voucher-pick i { font-size: 18px; }
.bkw-voucher-pick .t { flex: 1; }
.bkw-total { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 15px; }
.bkw-total .bkw-money { font-size: 26px; }
.bkw-err-inline { color: #fb7185; font-size: 13px; margin-top: 8px; }

/* Thanh dưới cùng (mobile) */
.bkw-bar { display: none; }

/* ---------- Gói giờ ---------- */
.bkw-hours-card { border-radius: 20px; padding: 20px; background: linear-gradient(120deg, rgba(88, 28, 135, .55), rgba(127, 29, 29, .35)); border: 1px solid rgba(168, 85, 247, .45); }
.bkw-hours-big { font-size: 46px; font-weight: 800; line-height: 1; }
.bkw-progress { height: 8px; background: #2a2f45; border-radius: 999px; overflow: hidden; margin: 14px 0 10px; }
.bkw-progress i { display: block; height: 100%; background: var(--bk-grad); border-radius: 999px; }
.bkw-pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bkw-pkg { position: relative; border: 1.5px solid var(--bk-line); border-radius: 18px; padding: 18px; background: var(--bk-card); cursor: pointer; display: flex; gap: 14px; align-items: center; transition: border-color .15s; }
.bkw-pkg.on { border-color: var(--bk-purple); background: linear-gradient(120deg, rgba(88, 28, 135, .35), rgba(21, 24, 38, 1)); }
.bkw-pkg-hours { width: 78px; height: 78px; border-radius: 16px; border: 1px solid rgba(250, 204, 21, .45); background: rgba(250, 204, 21, .06); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--bk-yellow); flex: 0 0 auto; }
.bkw-pkg-hours b { font-size: 28px; line-height: 1; }
.bkw-pkg-off { position: absolute; top: 0; right: 0; background: linear-gradient(90deg, #f43f5e, #f97316); color: #fff; font-weight: 800; padding: 4px 12px; border-radius: 0 16px 0 12px; font-size: 13px; }
.bkw-pkg-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #4b5272; flex: 0 0 auto; margin-left: auto; position: relative; }
.bkw-pkg.on .bkw-pkg-radio { border-color: #f43f5e; }
.bkw-pkg.on .bkw-pkg-radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #f43f5e; }
.bkw-purchase { border: 1px solid var(--bk-line); border-radius: 14px; padding: 14px; background: var(--bk-card-2); }
.bkw-purchase + .bkw-purchase { margin-top: 10px; }
.bkw-st { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.bkw-st.PENDING { background: rgba(245, 158, 11, .15); color: var(--bk-orange); }
.bkw-st.ACTIVE { background: rgba(34, 197, 94, .15); color: var(--bk-green); }
.bkw-st.CANCELLED { background: rgba(244, 63, 94, .15); color: var(--bk-red); }

/* ---------- Lịch sử ---------- */
.bkw-in-profile { padding: 22px; border-radius: 20px; }
.bkw-booking { background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: 20px; padding: 18px; }
.bkw-booking + .bkw-booking { margin-top: 16px; }
.bkw-booking-top { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.bkw-booking-img { width: 88px; height: 66px; border-radius: 12px; background: #10131f center / cover no-repeat; flex: 0 0 auto; }
.bkw-booking-name { font-size: 17px; font-weight: 800; }
.bkw-timebox { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--bk-line); border-bottom: 1px solid var(--bk-line); margin: 14px 0; padding: 14px 0; }
.bkw-timebox > div { display: flex; gap: 12px; }
.bkw-timebox > div + div { border-left: 1px solid var(--bk-line); padding-left: 16px; }
.bkw-timebox i { font-size: 20px; color: var(--bk-muted); margin-top: 4px; }
.bkw-timebox b { display: block; font-size: 17px; }
.bkw-status { display: flex; gap: 12px; align-items: center; }
.bkw-status-ico { width: 44px; height: 44px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.bkw-status b { display: block; font-size: 16px; }
.tone-pending { color: var(--bk-yellow); }
.tone-confirmed { color: var(--bk-blue); }
.tone-using { color: var(--bk-purple); }
.tone-done { color: var(--bk-green); }
.tone-cancelled { color: var(--bk-red); }
.bkw-status-banner { border: 1.5px solid currentColor; border-radius: 16px; padding: 16px 18px; display: flex; gap: 14px; align-items: center; background: rgba(255, 255, 255, .02); }
.bkw-status-banner .bkw-muted { color: var(--bk-text); opacity: .8; }
.bkw-booking-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.bkw-booking-actions .bkw-btn { flex: 1; }
.bkw-qr { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.bkw-qr img.qr { width: 200px; height: 200px; border-radius: 14px; background: #fff; padding: 8px; object-fit: contain; }
.bkw-copy { cursor: pointer; color: var(--bk-blue); margin-left: 6px; }
.bkw-timeline { display: flex; flex-direction: column; gap: 0; }
.bkw-tl { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.bkw-tl::before { content: ''; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--bk-line); }
.bkw-tl:last-child::before { display: none; }
.bkw-tl i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4b5272; background: var(--bk-card); flex: 0 0 auto; z-index: 1; }
.bkw-tl.passed i { border-color: var(--bk-green); background: var(--bk-green); }
.bkw-tl.current i { border-color: var(--bk-yellow); background: var(--bk-yellow); box-shadow: 0 0 0 4px rgba(250, 204, 21, .2); }
.bkw-tl.cancel i { border-color: var(--bk-red); background: var(--bk-red); }
.bkw-ktv { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bk-line); }
.bkw-ktv:last-child { border-bottom: 0; }

/* ---------- Sao chọn ---------- */
.bkw-star-pick { display: inline-flex; gap: 6px; font-size: 30px; color: #3a3f58; cursor: pointer; }
.bkw-star-pick i.on { color: var(--bk-yellow); }
.bkw-upload { display: flex; gap: 8px; flex-wrap: wrap; }
.bkw-upload .u { width: 72px; height: 72px; border-radius: 12px; background: var(--bk-card-2) center / cover no-repeat; position: relative; }
.bkw-upload .u b { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--bk-red); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bkw-upload label { width: 72px; height: 72px; border-radius: 12px; border: 1.5px dashed var(--bk-line); display: flex; align-items: center; justify-content: center; color: var(--bk-muted); cursor: pointer; margin: 0; font-size: 20px; }

/* ---------- Modal + toast (tự dựng, không phụ thuộc Bootstrap) ---------- */
.bkw-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 5, 12, .72); opacity: 0; transition: opacity .15s; color: var(--bk-text); font-family: var(--font-family-key, 'Montserrat'), Arial, sans-serif; }
.bkw-modal.bkw-on { opacity: 1; }
.bkw-modal-box { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; background: var(--bk-card, #151826); border: 1px solid var(--bk-line, #2a2f45); border-radius: 22px; padding: 22px; transform: translateY(12px); transition: transform .15s; }
.bkw-modal.bkw-on .bkw-modal-box { transform: translateY(0); }
.bkw-modal-box.lg { max-width: 760px; }
.bkw-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bkw-modal-head h3 { font-size: 18px; font-weight: 800; margin: 0; color: var(--bk-text); }
.bkw-modal-x { background: transparent; border: 0; color: var(--bk-muted); font-size: 22px; cursor: pointer; }
.bkw-modal-foot { display: flex; gap: 10px; margin-top: 18px; }
.bkw-modal-foot .bkw-btn { flex: 1; }
.bkw-confirm-ico { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; background: var(--bk-grad); display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; }
.bkw-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 100001; background: #1c2033; color: #fff; border: 1px solid #2a2f45; border-left: 4px solid #22c55e; padding: 12px 18px; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); opacity: 0; transition: all .2s; max-width: calc(100vw - 32px); font-family: var(--font-family-key, 'Montserrat'), Arial, sans-serif; }
.bkw-toast.err { border-left-color: #f43f5e; }
.bkw-toast.bkw-on { opacity: 1; transform: translate(-50%, 0); }
/* Modal chọn SP mẫu ưu đãi */
.bkw-modal-box.xl { max-width: 940px; }
.bkw-sp-head { margin-bottom: 12px; }
.bkw-sp-progress { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.bkw-sp-progress b { font-size: 15px; min-width: 42px; text-align: right; }
.bkw-sp-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--bk-muted); font-size: 20px; line-height: 1; }
.bkw-sp-filter:not(:empty) { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.bkw-sp-filter .bkw-chips { flex: 1; min-width: 0; padding-bottom: 2px; }
.bkw-sp-filter .bkw-chip { padding: 6px 12px; font-size: 13px; }
.bkw-sp-filter .bkw-chip small { opacity: .7; margin-left: 2px; }
.bkw-sp-label { color: var(--bk-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; flex: 0 0 auto; }
.bkw-sp-meta { display: flex; justify-content: space-between; align-items: center; color: var(--bk-muted); font-size: 13px; margin: 12px 0 8px; }
.bkw-sp-only { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; font-weight: 500; }
.bkw-sp-only input { accent-color: #a855f7; width: 16px; height: 16px; margin: 0; }
.bkw-sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 46vh; overflow-y: auto; padding: 2px 4px 2px 0; overscroll-behavior: contain; }
.bkw-sp-grid::-webkit-scrollbar { width: 6px; }
.bkw-sp-grid::-webkit-scrollbar-thumb { background: #2a2f45; border-radius: 6px; }
.bkw-sp-card { position: relative; display: flex; gap: 12px; padding: 10px; border-radius: 14px; border: 1.5px solid var(--bk-line); background: var(--bk-card-2); cursor: pointer; transition: border-color .12s, background .12s, transform .12s; user-select: none; }
.bkw-sp-card:hover { border-color: #3b4262; transform: translateY(-1px); }
.bkw-sp-card.on { border-color: var(--bk-green); background: rgba(34, 197, 94, .07); }
.bkw-sp-card.full { opacity: .5; }
.bkw-sp-img { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; background: #10131f; }
.bkw-sp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.bkw-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: rgba(255, 255, 255, .85); }
.bkw-ph-0 { background: linear-gradient(135deg, #7c3aed, #db2777); }
.bkw-ph-1 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.bkw-ph-2 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.bkw-ph-3 { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.bkw-ph-4 { background: linear-gradient(135deg, #ec4899, #f97316); }
.bkw-sp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bkw-sp-name { font-weight: 700; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bkw-sp-sub { color: var(--bk-dim); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkw-sp-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; gap: 8px; }
.bkw-sp-stock { font-size: 12px; font-weight: 700; color: var(--bk-green); background: rgba(34, 197, 94, .12); border-radius: 999px; padding: 2px 8px; }
.bkw-sp-stock.low { color: var(--bk-orange); background: rgba(245, 158, 11, .12); }
.bkw-sp-add { font-size: 13px; font-weight: 700; color: var(--bk-blue); }
.bkw-stepper-sm button { width: 30px; height: 30px; font-size: 16px; }
.bkw-stepper-sm span { min-width: 22px; font-size: 14px; }
.bkw-sp-check { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--bk-green); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bk-card-2); }
.bkw-sp-tray:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bk-line); }
.bkw-sp-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; background: rgba(34, 197, 94, .12); color: #bbf7d0; border: 1px solid rgba(34, 197, 94, .35); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkw-sp-pill i { cursor: pointer; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .25); flex: 0 0 auto; }
.bkw-sp-pill i:hover { background: var(--bk-red); color: #fff; }
@media (max-width: 640px) {
    .bkw-sp-grid { grid-template-columns: minmax(0, 1fr); max-height: 44vh; }
    .bkw-modal-box.xl .bkw-modal-foot .bkw-btn { padding: 12px 10px; font-size: 13px; }
    .bkw-sp-img { width: 64px; height: 64px; }
    .bkw-sp-filter:not(:empty) { flex-direction: column; align-items: stretch; gap: 6px; }
}
.bkw-sample { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--bk-line); margin-bottom: 8px; }
.bkw-sample.on { border-color: var(--bk-green); background: rgba(34, 197, 94, .06); }
.bkw-sample-img { width: 54px; height: 54px; border-radius: 10px; background: #fff center / contain no-repeat; flex: 0 0 auto; }
.bkw-sample .n { flex: 1; min-width: 0; }
.bkw-sample .n b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bkw-voucher { display: flex; gap: 12px; border: 1px solid var(--bk-line); border-radius: 14px; padding: 12px; margin-bottom: 10px; cursor: pointer; align-items: center; }
.bkw-voucher.on { border-color: var(--bk-yellow); background: rgba(250, 204, 21, .06); }
.bkw-voucher.off { opacity: .5; cursor: not-allowed; }
.bkw-voucher-ico { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(160deg, #f59e0b, #f43f5e); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex: 0 0 auto; }

/* ---------- Trong layout Quản lý thông tin (nền sáng) ---------- */
.profile .bkw { padding: 0; background: transparent; min-height: 0; }
.profile .bkw .bkw-in-profile { background: var(--bk-bg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .bkw-rooms { grid-template-columns: repeat(2, 1fr); }
    .bkw-pkgs { grid-template-columns: repeat(2, 1fr); }
    .bkw-filters .bkw-grid-f { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .bkw-detail { grid-template-columns: minmax(0, 1fr); }
    .bkw-summary { position: static; }
    .bkw-slots { grid-template-columns: repeat(3, 1fr); }
    .bkw-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; background: rgba(11, 13, 23, .96); border-top: 1px solid var(--bk-line); padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px; backdrop-filter: blur(6px); }
    .bkw-bar .bkw-money { font-size: 22px; }
    .bkw.has-bar { padding-bottom: 96px; }
}
@media (max-width: 640px) {
    .bkw { padding-top: 14px; }
    .bkw-rooms, .bkw-pkgs { grid-template-columns: 1fr; }
    .bkw-filters .bkw-grid-f { grid-template-columns: 1fr; }
    .bkw-slots { grid-template-columns: repeat(2, 1fr); }
    .bkw-title { font-size: 22px; }
    .bkw-head h1 { font-size: 20px; }
    .bkw-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .bkw-timebox b { font-size: 15px; }
    .bkw-in-profile { padding: 14px; }
    .bkw-map { height: 280px; }
    .bkw-pkg-hours { width: 64px; height: 64px; }
    .bkw-pkg-hours b { font-size: 22px; }
}