/* ====== Token / Font ====== */
@import url('https://fonts.cdnfonts.com/css/dejavu-serif');
:root{
  --brand:#c5a05f;     /* vàng nâu */
  --ink:#0c1124;       /* xanh đậm */
  --muted:#8c8f97;
}
.hv-sec{ padding:28px 0 42px; font-family:'DejaVu Serif',serif; }
.hv-wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }

/* Tiêu đề & mô tả giữa */
.hv-title{
  margin:0 0 6px; text-align:center; letter-spacing:.06em;
  color:var(--ink); font-weight:900; text-transform:uppercase;
  font-size:clamp(18px,3vw,22px);
}
.hv-sub{
  margin:0 0 14px; text-align:center; color:#6f7380;
  font-size:clamp(13px,1.6vw,14px);
}

/* Ảnh lớn giữa */
.hv-figure{ margin:0 auto 18px; max-width:880px; }
.hv-figure img{ width:100%; display:block; border-radius:4px; }

/* Heading danh sách phòng */
.hv-head{
  margin:10px auto 16px; text-align:center; color:var(--brand);
  font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  position:relative; width:max-content; font-size:clamp(16px,2.6vw,18px);
}
.hv-head:after{
  content:""; display:block; height:3px; background:var(--brand);
  margin:6px auto 0; width:180px; border-radius:2px;
}

/* Grid 2 card */
.hv-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
@media (max-width:820px){ .hv-grid{ grid-template-columns:1fr; } }

/* Card style */
.room-card{
  border:2px solid var(--brand);
  border-radius:6px; overflow:hidden; background:#fff;
  display:grid; grid-template-rows:auto auto auto auto;
}
.room-top{ padding:10px 12px 0; }
.room-name{
  margin:0 0 6px; color:#2a2d33; font-size:13px; letter-spacing:.02em;
}
.room-meta{
  display:flex; gap:10px; list-style:none; margin:0 0 8px; padding:0;
  color:#979aa3; font-size:11px; flex-wrap:wrap;
}

.room-media img{ width:100%; display:block; aspect-ratio: 16/9; object-fit:cover; }

.room-feat{
  display:grid; grid-template-columns:repeat(3,1fr); list-style:none;
  margin:0; padding:8px 10px; gap:6px; border-top:1px solid #eee;
  color:#6e7179; font-size:12px; text-align:center;
}

.room-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px; gap:10px;
}
.room-price{ font-weight:800; color:#2c2f35; font-size:13px; }
.room-btn{
  display:inline-block; padding:.45rem .75rem; border-radius:4px;
  background:var(--brand); color:#241a0e; text-decoration:none; font-weight:800;
  letter-spacing:.02em; transition:filter .18s ease, transform .18s ease;
}
.room-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }