/* =====================================================================
   SOL · TRANG TÌM PHÒNG ("/dat-phong/")  ·  Agent TRANG A
   Số đo lấy theo mẫu giao_dien_tham_chieu/site/dat-phong/index.html.
   ===================================================================== */

/* ---------- thanh tìm dính dưới đầu trang ---------- */
.tk-thanh { position: sticky; top: 74px; z-index: 40; background: #fff; border-bottom: 1px solid rgba(179,145,84,.4); }
.tk-thanh__trong { max-width: var(--rong); margin: 0 auto; padding: 0 var(--le); }
.tk-thanh .tim { border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.tk-thanh .tim__o--vt { padding-left: 0; }
.tk-thanh .tim__o { padding-top: 16px; padding-bottom: 16px; }
.tk-thanh .tim__khach { border-right: 1px solid var(--vang-vien); }
.tk-thanh .tim__khach .tim__o { border-right: 0; }
.tk-thanh .tim__nut { border-radius: var(--bo-nut); margin: 12px 0 12px 18px; padding: 0 34px; }

/* ---------- bố cục hai cột ---------- */
.tk { max-width: var(--rong); margin: 0 auto; padding: 26px var(--le) 32px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
.tk__chinh { min-width: 0; }

/* ảnh bìa có tiêu đề trang */
.tk-bia { position: relative; height: 230px; overflow: hidden; margin-bottom: 26px; border-radius: var(--bo); }
.tk-bia img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.tk-bia__chu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(36,36,27,.74), rgba(36,36,27,.32)); display: flex; flex-direction: column; justify-content: center; padding: 0 46px; }
.tk-bia h1 { font-family: var(--serif); font-weight: 500; font-size: 43px; line-height: 1.1; color: #fff; }
.tk-bia p { font-size: 17px; color: #EFE7D8; margin-top: 10px; max-width: 500px; }

/* dòng đếm kết quả + sắp xếp */
.tk-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 16px; }
.tk-dem { font-size: 17px; }
.tk-dem b { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.tk-xep { display: flex; align-items: center; gap: 10px; }
.tk-xep span { font-size: 15px; color: var(--chu-3); white-space: nowrap; }
.tk-xep select { border: 1px solid rgba(179,145,84,.45); background: #fff; padding: 9px 14px; font-size: 15.5px; font-weight: 600; border-radius: 18px; min-height: 44px; cursor: pointer; }
.tk-ky { font-size: 15.5px; color: var(--chu-2); margin-bottom: 20px; }
.tk-doan { background: var(--kem-dam); border: 1px solid rgba(179,145,84,.4); padding: 18px 22px; margin-bottom: 26px; font-size: 16px; color: #3A362F; border-radius: var(--bo); }
.tk-doan b { color: var(--vang-dam); }
.tk-doan a { font-weight: 600; }
.tk-ds { display: grid; gap: 36px; }
.tk-trong { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- thẻ khách sạn ---------- */
.ks { scroll-margin-top: 176px; min-width: 0; }
.ks__the { display: grid; grid-template-columns: 300px minmax(0, 1fr) 190px; background: #fff; border: 1px solid var(--vang-vien); border-radius: var(--bo); overflow: hidden; }
.ks--chon .ks__the { border-color: var(--vang); box-shadow: 0 0 0 2px var(--vang-nen); }
.ks__anh { position: relative; min-height: 210px; border-radius: 0; }
.ks__anh img { position: absolute; inset: 0; }
.ks__khu { position: absolute; top: 0; left: 0; background: var(--vang); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .12em; padding: 8px 15px; }
.ks__giua { padding: 22px 24px; min-width: 0; }
.ks__ten { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.15; }
.ks__ten a { color: var(--muc); }
.ks__ten a:hover { color: var(--vang-dam); }
.ks__dc { display: flex; align-items: flex-start; gap: 6px; font-size: 15px; color: var(--chu-3); margin: 8px 0 14px; line-height: 1.5; }
.ks__dc .ic { width: 14px; height: 14px; margin-top: 4px; color: var(--vang); }
.ks__hop { display: grid; gap: 7px; }
.ks__hop li { display: flex; align-items: flex-start; gap: 9px; font-size: 15.5px; color: var(--chu-2); line-height: 1.45; }
.ks__hop .ic { width: 16px; height: 16px; color: var(--vang); margin-top: 3px; }
.ks__gia { border-left: 1px solid rgba(179,145,84,.28); padding: 22px 20px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; gap: 2px; }
.ks__tu { font-size: 14px; color: var(--chu-3); }
.ks__so { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.ks__don { font-size: 14px; color: var(--chu-2); line-height: 1.4; }
.ks__nut { margin-top: 12px; padding: 11px 20px; min-height: 44px; }
.ks__goi { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; margin-top: 8px; min-height: 30px; }
.ks__goi .ic { width: 14px; height: 14px; }
.ks__bd { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--chu-2); min-height: 30px; text-decoration: underline; text-decoration-color: var(--vang-mo); text-underline-offset: 3px; }
.ks__bd:hover { color: var(--vang-dam); }
.ks__bd .ic { width: 14px; height: 14px; color: var(--vang); }
.ks__the { cursor: pointer; }

/* ---------- hạng phòng của từng khách sạn ---------- */
.ks__hang { display: grid; gap: 14px; margin-top: 16px; }
.hp { border: 1px solid rgba(179,145,84,.35); padding: 20px; background: var(--kem-am); border-radius: var(--bo-nut); transition: border-color .2s; }
.hp--chon { border-color: var(--vang); box-shadow: 0 0 0 2px var(--vang-nen); }
.hp__tren { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.hp__ten { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.2; }
.hp__mo { font-size: 15px; color: var(--chu-2); margin-top: 4px; }
.hp__xn { color: var(--xanh-ok); font-weight: 600; }
.hp__gia { text-align: right; white-space: nowrap; }
.hp__gia b { display: block; font-size: 22px; font-weight: 700; }
.hp__gia span { display: block; font-size: 14px; color: var(--chu-2); }
.hp__nut { margin-top: 14px; padding: 12px 28px; min-height: 46px; }
.hp__lydo { margin-top: 12px; font-size: 15px; color: var(--do-chu); background: var(--do-nen); border-radius: 10px; padding: 9px 12px; }
.hp--mo { background: transparent; }
.hp--mo .hp__tren { opacity: .5; }

/* ---------- cột bên phải ---------- */
.tk__ben { display: grid; gap: 20px; position: sticky; top: 172px; min-width: 0; }
.bd { border: 1px solid rgba(179,145,84,.4); border-radius: 22px; background: #fff; padding: 10px; min-width: 0; }
.bd__chon { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bd__ks { flex: 1 1 0; min-width: 120px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(179,145,84,.45); border-radius: var(--bo-nut); background: #fff; font-size: 14px; font-weight: 600; color: var(--chu-2); transition: background .18s, color .18s, border-color .18s; }
.bd__ks:hover { border-color: var(--vang); color: var(--vang-dam); }
.bd__ks.la { background: var(--vang); border-color: var(--vang); color: #fff; }
.bd__khung { height: 260px; border-radius: var(--bo); overflow: hidden; background: #EFE8DA; }
.bd__khung iframe { display: block; width: 100%; height: 100%; border: 0; }
.bd__than { padding: 14px 8px 6px; display: grid; gap: 4px; }
.bd__ten { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.2; color: var(--muc); }
.bd__dc { font-size: 15px; color: var(--chu-2); line-height: 1.5; }
.bd__diem { font-size: 14px; font-weight: 600; color: var(--vang-dam); }
.bd__nut { margin-top: 10px; width: 100%; min-height: 46px; padding: 10px 14px; font-size: 15px; font-weight: 600; white-space: normal; text-align: center; }
.bd__nut .ic { width: 16px; height: 16px; }
.loc { border: 1px solid rgba(179,145,84,.4); background: #fff; padding: 22px; border-radius: var(--bo); min-width: 0; }
.loc__ten { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; padding: 0; }
legend.loc__ten { float: left; width: 100%; margin-bottom: 12px; }
legend.loc__ten + * { clear: both; }
.loc__phu { font-size: 14px; color: var(--chu-3); margin-bottom: 16px; }
.loc__keo { width: 100%; accent-color: var(--vang); min-height: 28px; cursor: pointer; }
.loc__hai { display: flex; justify-content: space-between; margin-top: 12px; gap: 10px; }
.loc__hai span { border: 1px solid rgba(179,145,84,.4); padding: 8px 12px; font-size: 15px; font-weight: 600; flex: 1; border-radius: 18px; }
.loc__hai .phai { text-align: right; }
.chon { display: flex; align-items: center; gap: 11px; font-size: 16px; cursor: pointer; padding: 8px 0; min-height: 44px; }
.chon input { width: 17px; height: 17px; accent-color: var(--vang); cursor: pointer; flex-shrink: 0; }
.chon small { color: var(--chu-3); font-size: 14px; }
.loc__bo { width: 100%; min-height: 46px; }

/* =====================================================================
   MÀN HÌNH NHỎ
   ===================================================================== */
@media (max-width: 1100px) {
  .ks__the { grid-template-columns: 240px minmax(0, 1fr) 180px; }
}
@media (max-width: 960px) {
  .tk { grid-template-columns: minmax(0, 1fr); }
  .tk__ben { position: static; }
  .tk-thanh .tim__nut { margin: 10px 0 12px 12px; padding: 12px 26px; }
  .tk-thanh .tim__khach { border-right: 0; }
  .tk-thanh .tim__o--vt { padding-left: 18px; }
}
@media (max-width: 768px) {
  /* thanh tìm xếp dọc cao gần nửa màn hình: thôi dính trên điện thoại */
  .tk-thanh { position: relative; top: auto; }
  .tk-thanh__trong { padding: 0 var(--le); }
  .tk-thanh .tim__o { padding: 10px 12px; }
  .tk-thanh .tim__o--vt { padding-left: 12px; }
  .tk-thanh .tim__gt { font-size: 16px; }
  .tk-thanh .tim__nut { padding: 12px 20px; margin: 8px 12px 10px 8px; }
  .tk { padding: 18px var(--le) 34px; gap: 28px; }
  .tk-bia { height: 200px; margin-bottom: 20px; }
  .tk-bia__chu { padding: 0 20px; }
  .tk-bia h1 { font-size: 30px; }
  .tk-bia p { font-size: 16px; }
  .tk-dau { flex-wrap: wrap; }
  .tk-ky, .ks__dc, .ks__hop li, .hp__mo, .hp__lydo { font-size: 16px; }
  .ks { scroll-margin-top: 86px; }
  .ks__the { grid-template-columns: minmax(0, 1fr); }
  .ks__anh { min-height: 0; height: 220px; }
  .ks__giua { padding: 18px 18px 6px; }
  .ks__gia { border-left: 0; padding: 10px 18px 20px; align-items: stretch; text-align: left; }
  .ks__nut { width: 100%; }
  .ks__goi { justify-content: center; min-height: 44px; }
  .ks__bd { justify-content: center; min-height: 44px; }
  .bd__khung { height: 220px; }
  .bd__dc { font-size: 16px; }
  .hp { padding: 18px 16px; }
  .hp__tren { flex-wrap: wrap; }
  .hp__gia { text-align: left; white-space: normal; }
  .hp__nut { width: 100%; }
}
/* NHỊP DỌC (QA M4): đệm dưới khối kết quả tối đa 32px trên điện thoại */
@media (max-width: 768px) { .tk { padding-bottom: 30px; } }