/* Trang đặt phòng — dùng chung biến màu với trang-khach.css */

.khung-dat {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem;
}

.chi-buoc {
  font-family: system-ui, sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chu-mo);
  margin: 0 0 .4rem;
}

.buoc h1 { margin-bottom: 1.75rem; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.buoc h2 {
  font-family: system-ui, sans-serif;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--chu-mo);
  margin: 1.75rem 0 .75rem;
}

/* ---------- Chọn loại phòng ---------- */

.chon-loai { display: grid; gap: .75rem; }

.the-chon {
  display: grid;
  gap: .3rem;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--trang);
  border: 1.5px solid var(--vien);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
}

.the-chon:hover:not(:disabled) { border-color: var(--xanh-nhat); }
.the-chon[aria-pressed="true"] { border-color: var(--xanh); background: var(--nen-nhat); }
.the-chon:disabled { opacity: .5; cursor: not-allowed; }

.the-chon .ten-loai { font-size: 1.15rem; font-weight: 700; }
.the-chon .chi-tiet { font-size: .9rem; color: var(--chu-mo); font-family: system-ui, sans-serif; }
.the-chon .con-lai { font-size: .9rem; font-weight: 600; font-family: system-ui, sans-serif; }
.the-chon .con-lai.co { color: var(--xanh-nhat); }
.the-chon .con-lai.het { color: #b91c1c; }

/* ---------- Hình thức ---------- */

.chon-hinh-thuc { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.the-hinh-thuc {
  font: inherit;
  color: inherit;
  background: var(--trang);
  border: 1.5px solid var(--vien);
  border-radius: 12px;
  padding: .85rem 1rem;
  cursor: pointer;
  display: grid;
  gap: .15rem;
  text-align: left;
}

.the-hinh-thuc[aria-pressed="true"] { border-color: var(--xanh); background: var(--nen-nhat); }
.the-hinh-thuc .nhan-ht { font-weight: 600; }
.the-hinh-thuc .gia-ht { font-size: .9rem; color: var(--chu-mo); font-family: system-ui, sans-serif; }

/* Khung giờ — chữ nhỏ dưới giá, để khách khỏi phải hỏi "mấy giờ phải trả phòng" */
.the-hinh-thuc .khung-ht {
  font-size: .8rem;
  line-height: 1.35;
  color: var(--chu-mo);
  font-family: system-ui, sans-serif;
  margin-top: .1rem;
}

/*
 * Gói được chọn nhiều nhất: chiếm trọn hàng đầu, viền đậm, giá to.
 *
 * Trước đây năm ô giống hệt nhau nên khách phải đọc hết mới quyết được. Cho một
 * ô đứng riêng là đa số bấm thẳng vào đó, không phân vân.
 */
.the-hinh-thuc.noi-bat {
  grid-column: 1 / -1;
  border-width: 2px;
  border-color: var(--xanh);
  background: linear-gradient(180deg, var(--nen-nhat), var(--trang));
  padding: 1rem 1.15rem;
}
.the-hinh-thuc.noi-bat .nhan-ht { font-size: 1.15rem; font-weight: 700; }
.the-hinh-thuc.noi-bat .gia-ht {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--xanh);
}
.the-hinh-thuc.noi-bat[aria-pressed="true"] {
  background: var(--nen-nhat);
  box-shadow: 0 0 0 3px rgb(26 61 46 / .12);
}

.the-hinh-thuc .nhan-goi-y {
  justify-self: start;
  font-family: system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--trang);
  background: var(--xanh);
  border-radius: 999px;
  padding: .15rem .5rem;
  margin-bottom: .2rem;
}

/* ---------- Bộ đếm ---------- */

.hang-so-gio {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
}

.nut-tron {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--vien);
  background: var(--trang);
  color: var(--chu);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.nut-tron:hover:not(:disabled) { border-color: var(--xanh); }
.nut-tron:disabled { opacity: .35; cursor: not-allowed; }
.hang-so-gio .mo { font-weight: 400; font-size: .95rem; }

/* ---------- Tạm tính ---------- */

.tom-tien {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--vien);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.tom-tien > div { display: grid; }
.tom-tien .mo { font-size: .85rem; font-family: system-ui, sans-serif; }
.tom-tien strong { font-size: 1.6rem; font-family: system-ui, sans-serif; }

.loi-dat {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: .95rem;
}

/* ---------- Chuyển khoản ---------- */

.the-tra-tien {
  display: grid;
  gap: 1.75rem;
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: 16px;
  padding: clamp(1.25rem, 4vw, 2rem);
}

@media (min-width: 40rem) {
  .the-tra-tien { grid-template-columns: auto 1fr; align-items: start; }
}

.cot-qr { display: grid; gap: .5rem; justify-items: center; }
.cot-qr img { border-radius: 12px; background: #fff; display: block; }
.cot-qr .mo { font-size: .85rem; font-family: system-ui, sans-serif; }

.thong-tin-ck { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.25rem; margin: 0; }
.thong-tin-ck dt { color: var(--chu-mo); font-size: .92rem; font-family: system-ui, sans-serif; }
.thong-tin-ck dd { margin: 0; font-family: system-ui, sans-serif; }
.thong-tin-ck .dam { font-weight: 700; font-size: 1.05rem; }
.thong-tin-ck .ma { letter-spacing: .08em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

.nhac {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.nhac p { margin: .3rem 0; font-size: .95rem; }
.dem-nguoc { font-family: system-ui, sans-serif; font-weight: 600; }