/* RESET CODE CƠ BẢN */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Arial, sans-serif;
}

body {
    background-color: #f5f5f5;
    color: #333;
    padding-bottom: 50px;
}

/* 1. SLIDESHOW BANNER */
.banner-container {
    width: 100%;
    height: 350px;
    overflow: hidden;
    position: relative;
}
.slides {
    display: flex;
    width: 300%;
    height: 100%;
    animation: slideAnimation 12s infinite;
}
.slide {
    width: 33.333%;
    height: 100%;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    background: rgba(0,0,0,0.4);
    padding: 20px 40px;
    border-radius: 8px;
}
@keyframes slideAnimation {
    0% { margin-left: 0%; }
    30% { margin-left: 0%; }
    33% { margin-left: -100%; }
    63% { margin-left: -100%; }
    66% { margin-left: -200%; }
    96% { margin-left: -200%; }
    100% { margin-left: 0%; }
}

/* 2. KHUNG ĐẶT PHÒNG GIỐNG HÌNH 1 */
.booking-section {
    max-width: 900px;
    margin: -40px auto 30px auto;
    position: relative;
    z-index: 10;
    padding: 0 15px;
}
.search-box-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.time-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 15px;
}
.input-group {
    flex: 1;
    min-width: 200px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 12px;
    position: relative;
}
.input-group label {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: bold;
    margin-bottom: 4px;
}
.input-group input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 500;
}
.btn-search {
    background-color: #e50914;
    color: white;
    border: none;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.2s;
}
.btn-search:hover {
    background-color: #b8070f;
}

/* Hàng nút chọn nhanh giờ */
.quick-hours-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}
.hour-tag {
    background: white;
    border: 1px solid #e50914;
    color: #e50914;
    padding: 6px 16px;
    border-radius: 15px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s;
}
.hour-tag:hover, .hour-tag.active {
    background: #e50914;
    color: white;
}

/* Hàng hiển thị tổng giờ và xem bảng giá */
.price-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 12px;
}
.duration-text {
    font-size: 14px;
    color: #444;
}
.btn-open-price {
    background: none;
    border: 1px solid #666;
    color: #e50914;
    padding: 6px 14px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
}
.btn-open-price:hover {
    background-color: #fff5f5;
    border-color: #e50914;
}

/* 3. GRID 5 PHÒNG */
.rooms-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}
.section-title {
    margin-bottom: 20px;
    font-size: 22px;
}
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 20px;
}
@media (max-width: 500px) {
    .rooms-grid { grid-template-columns: 1fr; }
}
.room-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}
.room-image {
    width: 100%;
    height: 240px;
    position: relative;
}
.room-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.room-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
}
.room-info {
    padding: 15px;
}
.room-info h3 {
    font-size: 18px;
    margin-bottom: 15px;
}
.room-price-box {
    border-top: 1px dashed #ddd;
    padding-top: 15px;
    margin-bottom: 15px;
}
.price-value {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
.room-actions {
    display: flex;
    gap: 10px;
}
.btn-detail {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
}
.btn-book {
    flex: 1;
    background: #e50914;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
}
.btn-book:hover { background: #b8070f; }

/* 4. CẤU TRÚC MODAL/POPUP CHUNG */
.modal {
    display: none; 
    position: fixed; 
    z-index: 100; 
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: white;
    padding: 25px;
    border-radius: 12px;
    position: relative;
    width: 90%;
    max-width: 650px;
    animation: popUp 0.3s ease;
}
@keyframes popUp {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.close-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
}
.close-btn:hover { color: #333; }

/* 5. PHẦN BẢNG GIÁ GIỐNG HÌNH 2 */
.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.price-table th, .price-table td {
    border: 1px solid #e0e0e0;
    padding: 12px 8px;
    text-align: center;
    font-size: 13px;
}
.price-table th {
    background-color: #fafafa;
    color: #444;
}
/* Thiết kế ô chia chéo góc */
.diagonal-th {
    position: relative;
    background: linear-gradient(to top right, #fff 49%, #e0e0e0 50%, #fff 51%);
    min-width: 100px;
    height: 50px;
}
.diagonal-text-left {
    position: absolute;
    bottom: 5px; left: 5px;
    font-size: 11px; color: red;
}
.diagonal-text-right {
    position: absolute;
    top: 5px; right: 5px;
    font-size: 11px; color: red;
}
.time-col {
    color: #e50914;
    font-weight: 500;
}
.table-rules {
    margin-top: 15px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}
.table-rules ul { margin-left: 15px; }

/* 6. MODAL CHI TIẾT PHÒNG CÓ SLIDE */
.room-slider {
    position: relative;
    width: 100%;
    height: 300px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    overflow: hidden;
}
.room-slider img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 20px;
    padding: 10px 15px;
    cursor: pointer;
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* 7. FORM ĐẶT PHÒNG MẪU */
.form-group-item {
    margin-bottom: 15px;
}
.form-group-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
}
.form-group-item input, .form-group-item textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
}
.btn-submit-form {
    width: 100%;
    background: #e50914;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
/* GIAO DIỆN CHỌN NGÀY GIỜ MỚI CÓ DROP DOWN PHÚT CỐ ĐỊNH */
.datetime-custom-group {
    flex: 1;
    min-width: 280px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 12px;
    background: white;
}
.group-title {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: bold;
    margin-bottom: 6px;
}
.inputs-inline {
    display: flex;
    align-items: center;
    gap: 5px;
}
.inputs-inline input[type="date"] {
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 500;
    flex: 2;
    cursor: pointer;
}
.inputs-inline select {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 4px;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    background: #f9f9f9;
}
.inputs-inline span {
    font-weight: bold;
    color: #666;
}
/* V1.2: giờ trả do Pricing API tự tính */
.inputs-inline input:disabled,
.inputs-inline select:disabled {
    background-color: #f3f3f3;
    color: #555;
    cursor: not-allowed;
    opacity: 1;
}
.hour-tag:disabled {
    cursor: wait;
    opacity: 0.65;
}

/* Website booking flow - bổ sung chức năng, giữ nguyên phong cách gốc */
.form-group-item select {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px;
    outline: none; background: #fff; font-size: 15px;
}
.booking-summary-mini, .confirm-booking-content {
    background: #f8f8f8; border: 1px solid #ececec; border-radius: 10px;
    padding: 14px; margin: 12px 0 18px; line-height: 1.65;
}
.summary-row { display:flex; justify-content:space-between; gap:16px; border-bottom:1px dashed #ddd; padding:7px 0; }
.summary-row:last-child { border-bottom:none; }
.summary-row span { color:#666; }
.summary-row strong { text-align:right; color:#222; }
.guest-warning, .form-error { margin-top:8px; padding:10px; border-radius:6px; background:#fff3f3; color:#a40000; font-size:14px; }
.confirm-actions, .success-actions { display:flex; gap:12px; margin-top:16px; }
.confirm-actions > *, .success-actions > * { flex:1; }
.confirm-actions .btn-submit-form, .success-actions .btn-submit-form { width:auto; }
.payment-box { max-width:520px; text-align:center; }
.payment-hold-text { margin:8px 0 0; color:#666; }
.payment-countdown { font-size:38px; font-weight:800; color:#e50914; margin:4px 0; letter-spacing:1px; }
.payment-status-message { font-weight:600; margin-bottom:12px; }
.payment-qr { width:min(280px,80vw); height:auto; border:1px solid #eee; border-radius:10px; background:#fff; padding:6px; }
.payment-details { margin:14px 0; text-align:left; border:1px solid #eee; border-radius:10px; overflow:hidden; }
.payment-details > div { display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #eee; }
.payment-details > div:last-child { border-bottom:none; }
.payment-details span { color:#666; font-size:14px; }
.payment-details strong { overflow-wrap:anywhere; }
.copy-btn { border:1px solid #e50914; color:#e50914; background:white; border-radius:5px; padding:5px 8px; cursor:pointer; }
.payment-note { color:#666; font-size:13px; line-height:1.5; }
.success-box { max-width:560px; text-align:center; }
.success-icon { width:64px; height:64px; margin:0 auto 10px; border-radius:50%; background:#1a9b43; color:white; display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:bold; }
.site-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:#222; color:#fff; padding:11px 18px; border-radius:8px; opacity:0; pointer-events:none; transition:.2s; z-index:9999; max-width:90vw; text-align:center; }
.site-toast.show { opacity:1; transform:translate(-50%,0); }
.btn-submit-form:disabled, .btn-book:disabled, .btn-search:disabled { opacity:.65; cursor:not-allowed; }
@media (max-width:600px) {
    .confirm-actions, .success-actions { flex-direction:column; }
    .payment-details > div { grid-template-columns:95px 1fr; }
    .payment-details .copy-btn { grid-column:2; justify-self:start; }
}
@media print {
    body > * { display:none !important; }
    #success-modal { display:block !important; position:static; background:white; }
    #success-modal .modal-content { box-shadow:none; max-width:none; }
    #success-modal .close-btn, #success-modal .success-actions { display:none !important; }
}

/* =========================================================
   COMPACT MODALS V1.0
   Thu gọn popup đặt phòng và thanh toán trên laptop,
   không thay đổi bố cục/trang chủ của website.
   ========================================================= */

/* Popup luôn nằm gọn trong màn hình; nếu màn hình quá thấp thì chỉ popup cuộn */
.modal {
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
}
.modal-content {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-gutter: stable;
}

/* Thu gọn riêng popup đặt phòng và xác nhận */
#booking-modal .modal-content,
#confirm-modal .modal-content {
    width: min(94vw, 760px);
    max-width: 760px;
    padding: 18px 22px;
}
#booking-modal h2,
#confirm-modal h2,
#payment-modal h2 {
    margin: 0 36px 10px 0;
    font-size: 21px;
    line-height: 1.25;
}
#booking-modal .booking-summary-mini,
#confirm-modal .confirm-booking-content {
    padding: 10px 14px;
    margin: 8px 0 12px;
    line-height: 1.35;
}
#booking-modal .summary-row,
#confirm-modal .summary-row {
    padding: 5px 0;
}
#booking-modal .form-group-item {
    margin-bottom: 9px;
}
#booking-modal .form-group-item label {
    margin-bottom: 4px;
    font-size: 13px;
}
#booking-modal .form-group-item input,
#booking-modal .form-group-item select,
#booking-modal .form-group-item textarea {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
    box-sizing: border-box;
}
#booking-modal .form-group-item textarea {
    min-height: 62px;
    max-height: 90px;
    resize: vertical;
}
#booking-modal .guest-warning,
#booking-modal .form-error,
#confirm-modal .form-error {
    margin-top: 6px;
    padding: 7px 9px;
    font-size: 13px;
}
#booking-modal .btn-submit-form,
#confirm-modal .btn-submit-form,
#confirm-modal .btn-detail {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 14px;
}
#confirm-modal .confirm-actions {
    margin-top: 10px;
}

/* Thu gọn popup thanh toán để thấy trọn QR, thông tin và nút bên dưới */
#payment-modal .payment-box {
    width: min(94vw, 500px);
    max-width: 500px;
    padding: 15px 18px 16px;
}
#payment-modal .payment-hold-text {
    margin: 2px 0 0;
    font-size: 13px;
}
#payment-modal .payment-countdown {
    font-size: 28px;
    line-height: 1.05;
    margin: 2px 0;
}
#payment-modal .payment-status-message {
    margin-bottom: 7px;
    font-size: 14px;
}
#payment-modal .payment-qr {
    width: min(190px, 58vw);
    padding: 3px;
    border-radius: 7px;
}
#payment-modal .payment-details {
    margin: 9px 0 7px;
    border-radius: 8px;
}
#payment-modal .payment-details > div {
    grid-template-columns: 105px 1fr auto;
    gap: 7px;
    padding: 6px 9px;
    min-height: 33px;
}
#payment-modal .payment-details span {
    font-size: 12px;
}
#payment-modal .payment-details strong {
    font-size: 13px;
    line-height: 1.2;
}
#payment-modal .copy-btn {
    padding: 4px 7px;
    font-size: 12px;
}
#payment-modal .payment-note {
    margin: 5px 0 8px;
    font-size: 11.5px;
    line-height: 1.35;
}
#payment-modal #btn-check-payment {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 14px;
}

/* Nút đóng gọn, không che tiêu đề */
#booking-modal .close-btn,
#confirm-modal .close-btn,
#payment-modal .close-btn {
    top: 8px;
    right: 13px;
    font-size: 25px;
    line-height: 1;
}

/* Laptop có chiều cao thấp hoặc Windows scale 125% */
@media (max-height: 820px) and (min-width: 701px) {
    #booking-modal .modal-content,
    #confirm-modal .modal-content {
        padding-top: 14px;
        padding-bottom: 14px;
    }
    #payment-modal .payment-box {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    #payment-modal .payment-qr {
        width: min(172px, 52vw);
    }
    #payment-modal .payment-details > div {
        padding-top: 5px;
        padding-bottom: 5px;
        min-height: 30px;
    }
}

/* Điện thoại: popup cuộn độc lập, nội dung vẫn dễ bấm */
@media (max-width: 700px) {
    .modal {
        padding: 7px;
        align-items: center;
    }
    #booking-modal .modal-content,
    #confirm-modal .modal-content,
    #payment-modal .payment-box {
        width: 100%;
        max-height: calc(100vh - 14px);
        padding: 15px 14px;
    }
    #booking-modal h2,
    #confirm-modal h2,
    #payment-modal h2 {
        font-size: 18px;
    }
    #payment-modal .payment-qr {
        width: min(180px, 56vw);
    }
    #payment-modal .payment-details > div {
        grid-template-columns: 88px 1fr;
        padding: 7px 8px;
    }
    #payment-modal .payment-details .copy-btn {
        grid-column: 2;
        justify-self: start;
    }
}


/* Phiếu đặt phòng thành công đồng bộ với card trong WinForms */
#success-modal .success-box { max-width: 760px; padding: 18px; background:#f9f6ef; }
#success-modal .success-icon, #success-modal .success-box > h2 { display:none; }
.booking-card-web { background:#fffdf8; border:1px solid #eadfce; padding:34px 42px; color:#292929; text-align:left; font-family:Arial,sans-serif; }
.booking-card-brand { text-align:center; font-size:24px; font-weight:800; letter-spacing:1px; }
.booking-card-label { width:max-content; max-width:90%; margin:22px auto; padding:10px 46px; background:#fff0df; color:#dd7925; font-weight:800; text-align:center; }
.booking-card-title { text-align:center; color:#df7a25; font-size:34px; font-weight:800; margin:16px 0 22px; }
.booking-card-code { display:flex; justify-content:center; gap:16px; padding-bottom:22px; border-bottom:1px solid #ddd6cc; font-size:18px; }
.booking-card-section-title { color:#df7a25; font-size:18px; font-weight:800; margin:26px 0 18px; }
.booking-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px 56px; padding-bottom:24px; border-bottom:1px solid #ddd6cc; }
.booking-card-field span, .booking-card-address span { display:block; color:#777; font-size:14px; margin-bottom:7px; }
.booking-card-field strong, .booking-card-address strong { font-size:17px; line-height:1.35; overflow-wrap:anywhere; }
.booking-card-address { margin-bottom:22px; }
.support-grid { padding-bottom:24px; }
.booking-card-maps { display:grid; grid-template-columns:170px 1fr; gap:28px; align-items:center; padding-bottom:24px; border-bottom:1px solid #ddd6cc; }
.booking-card-maps img { width:165px; height:165px; border:1px solid #888; padding:6px; background:#fff; }
.booking-card-maps p { color:#666; margin-top:0; }
.maps-placeholder { height:150px; display:flex; align-items:center; justify-content:center; border:1px dashed #aaa; color:#777; text-align:center; }
.booking-card-thanks { margin-top:24px; background:#fff2e3; color:#d87420; text-align:center; font-weight:700; line-height:1.45; padding:14px; }
@media (max-width:650px) {
  #success-modal .success-box { padding:8px; }
  .booking-card-web { padding:24px 18px; }
  .booking-card-title { font-size:27px; }
  .booking-card-label { padding:9px 20px; }
  .booking-card-grid { grid-template-columns:1fr; gap:16px; }
  .booking-card-maps { grid-template-columns:1fr; text-align:center; }
  .booking-card-maps img { margin:auto; }
}
@media print {
  .booking-card-web { border:none; padding:20px; }
}


/* ===== V2.3: Phiếu xác nhận thành công nhỏ gọn ===== */
#success-modal .success-box {
  width: min(620px, calc(100vw - 24px));
  max-width: 620px;
  max-height: 92vh;
  padding: 14px;
  overflow-y: auto;
  background: #f8f6f1;
}
#success-modal .success-icon,
#success-modal .success-box > h2 { display: none !important; }
#success-modal .modal-content { align-items: center; }
.success-confirmation-card {
  background: #fffdfa;
  border: 1px solid #eadfce;
  border-radius: 14px;
  padding: 24px 26px;
  color: #292929;
  text-align: left;
  box-shadow: 0 8px 28px rgba(70, 55, 35, .08);
}
.success-checkmark {
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #21a44a;
  color: white;
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
}
.success-confirmation-title {
  text-align: center;
  color: #df7a25;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
}
.success-confirmation-subtitle {
  text-align: center;
  color: #777;
  margin: 6px 0 18px;
  font-size: 14px;
}
.success-booking-code {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #fff1e2;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.success-booking-code span { color: #8a6a50; font-size: 14px; }
.success-booking-code strong { color: #d66e1c; font-size: 21px; letter-spacing: .5px; }
.success-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 0;
  border-top: 1px solid #eee6dc;
}
.success-info-grid .booking-card-field {
  padding: 12px 0;
  border-bottom: 1px solid #eee6dc;
  min-width: 0;
}
.success-info-grid .booking-card-field span {
  display: block;
  color: #8a8a8a;
  font-size: 12px;
  margin-bottom: 4px;
}
.success-info-grid .booking-card-field strong {
  display: block;
  color: #2c2c2c;
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.success-auto-checkin-note {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 18px;
  padding: 14px 16px;
  background: #fff4e8;
  border-left: 4px solid #df7a25;
  border-radius: 10px;
}
.success-auto-checkin-icon { font-size: 26px; line-height: 1; }
.success-auto-checkin-note strong,
.success-auto-checkin-note span { display: block; line-height: 1.45; }
.success-auto-checkin-note strong { color: #a95616; font-size: 14px; }
.success-auto-checkin-note span { color: #6e6259; font-size: 13px; margin-top: 3px; }
#success-modal .success-actions { margin-top: 12px; }
#success-modal .success-actions button { min-height: 42px; }
@media (max-width: 620px) {
  #success-modal .success-box { padding: 8px; max-height: 94vh; }
  .success-confirmation-card { padding: 20px 16px; }
  .success-confirmation-title { font-size: 24px; }
  .success-info-grid { grid-template-columns: 1fr; }
  .success-info-grid .booking-card-field { padding: 9px 0; }
}
#site-info{
    margin-top:10px;
    color:#fff;
    font-size:16px;
    line-height:1.8;
}

#site-address,
#site-hotline{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

#site-hotline a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

#site-hotline a:hover{
    text-decoration:underline;
}

/* ===== CẬP NHẬT TABI HOUSE: CCCD, ẢNH PHÒNG, FORM THÀNH CÔNG ===== */
.optional-label {
    color: #777;
    font-size: 12px;
    font-weight: 400;
}

.id-card-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.id-card-upload-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    border: 1px dashed #d6a777;
    border-radius: 10px;
    background: #fffaf5;
    cursor: pointer;
}

.id-card-upload-box:hover {
    border-color: #df7419;
    background: #fff4e8;
}

.id-card-upload-box input[type="file"] {
    width: 100%;
    padding: 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 12px;
}

.id-card-upload-title {
    color: #3f3027;
    font-size: 14px;
    font-weight: 700;
}

.id-card-upload-hint,
.id-card-file-name,
.id-card-privacy-note {
    color: #756b64;
    font-size: 12px;
    line-height: 1.35;
}

.id-card-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.id-card-file-name.has-file {
    color: #247a3c;
    font-weight: 700;
}

.id-card-privacy-note {
    margin-top: 7px;
    font-style: italic;
}

.room-image-clickable {
    cursor: pointer;
}

.room-card-slider-btn {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 38px;
    height: 46px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 9px;
    background: rgba(0,0,0,.48);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: .82;
}

.room-card-slider-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,.68);
}

.room-card-prev { left: 10px; }
.room-card-next { right: 10px; }

.room-card-image-counter {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 4;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

#success-modal .success-confirmation-card {
    font-size: 17px;
}

#success-modal .success-confirmation-title {
    font-size: 31px;
}

#success-modal .success-confirmation-subtitle {
    font-size: 16px;
}

#success-modal .success-booking-code span {
    font-size: 16px;
}

#success-modal .success-booking-code strong {
    font-size: 24px;
}

#success-modal .success-info-grid .booking-card-field span {
    font-size: 15px;
}

#success-modal .success-info-grid .booking-card-field strong {
    font-size: 18px;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .id-card-upload-grid {
        grid-template-columns: 1fr;
    }

    .room-card-slider-btn {
        width: 34px;
        height: 42px;
        font-size: 21px;
    }

    #success-modal .success-confirmation-title {
        font-size: 27px;
    }

    #success-modal .success-info-grid .booking-card-field strong {
        font-size: 17px;
    }
}