/* =====================================================================
   chi-tiet.css — chỉ dùng cho trang chi tiết chỗ ở.
   Token, header, footer, .card, .cal, .track… lấy từ styles.css (nạp trước).
   Tách file để trang chủ không phải tải phần style chỉ trang này mới cần.
   ===================================================================== */

.header--simple .header__bar{padding-bottom:0;}
.minisearch--static{
  position:static;transform:none;opacity:1;visibility:visible;
}

.detail{padding:24px 40px 64px;max-width:1360px;}
@media (min-width:1440px){ .detail{padding-left:80px;padding-right:80px;} }
@media (max-width:743px){ .detail{padding:8px 24px 96px;} }

/* ---------- tiêu đề + hành động ---------- */
.detail__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:16px;
}
.detail__title{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.25;}
.detail__acts{display:flex;gap:4px;flex:none;}
.linkact{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 12px;border-radius:8px;
  font-size:14px;font-weight:500;text-decoration:underline;
  transition:background .15s ease;
}
.linkact:hover{background:var(--hover);}
.linkact svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#dSave[aria-pressed="true"] svg{fill:var(--brand);stroke:var(--brand);}
@media (max-width:743px){
  .detail__head{flex-direction:column;align-items:stretch;gap:4px;}
  .detail__title{font-size:22px;order:2;}
  .detail__acts{order:1;justify-content:flex-end;}
}

/* ---------- thư viện ảnh ---------- */
.gallery{
  position:relative;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:8px;
  border-radius:16px;overflow:hidden;
  margin-bottom:32px;
  aspect-ratio:2/1;
}
.gallery__item{position:relative;overflow:hidden;background:var(--hover-2);}
.gallery__item:first-child{grid-row:span 2;}
.gallery__item img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery__all{
  position:absolute;right:16px;bottom:16px;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 16px;
  background:#fff;border:1px solid var(--text);border-radius:10px;
  font-size:14px;font-weight:600;
  transition:background .15s ease;
}
.gallery__all:hover{background:var(--hover);}
.gallery__all svg{width:14px;height:14px;}
@media (max-width:950px){
  /* Khổ hẹp: 1 ảnh lớn cuộn ngang, không xếp lưới 5 ô nữa */
  .gallery{
    display:flex;gap:0;aspect-ratio:4/3;border-radius:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .gallery::-webkit-scrollbar{display:none;}
  .gallery__item{flex:0 0 100%;scroll-snap-align:center;}
  .gallery__item:first-child{grid-row:auto;}
}

/* ---------- bố cục 2 cột ---------- */
.detail__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 372px;
  gap:0 88px;
  align-items:start;
}
@media (max-width:1128px){ .detail__grid{grid-template-columns:minmax(0,1fr) 340px;gap:0 48px;} }
@media (max-width:950px){  .detail__grid{grid-template-columns:1fr;} }

.sect{padding:32px 0;border-bottom:1px solid var(--line-2);}
.sect--first{padding-top:0;border-bottom:0;padding-bottom:0;}
.sect--line{padding:32px 0;border-top:1px solid var(--line-2);border-bottom:0;}
.sect__title{font-size:22px;font-weight:600;letter-spacing:-.01em;}
.sect__h{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-bottom:16px;}
.sect__sub{font-size:15px;color:var(--text-2);margin-top:4px;}

/* ---------- hộp "được khách yêu thích" ---------- */
.favbox{
  display:grid;grid-template-columns:1fr auto auto;
  align-items:center;gap:12px 20px;
  border:1px solid var(--line);border-radius:16px;
  padding:16px 20px;margin-top:24px;
}
.favbox__main{display:flex;align-items:center;gap:14px;min-width:0;}
.favbox__badge{font-size:26px;flex:none;}
.favbox__lead{font-size:14px;font-weight:600;}
.favbox__desc{font-size:13px;color:var(--text-2);line-height:1.35;}
.favbox__stat{text-align:center;padding:0 8px;}
.favbox__stat + .favbox__stat{border-left:1px solid var(--line-2);}
.favbox__big{font-size:20px;font-weight:600;display:block;}
.favbox__cap{font-size:12px;color:var(--text-2);display:block;margin-top:2px;}
.favbox__stars{color:var(--text);font-size:11px;letter-spacing:1px;}
@media (max-width:743px){
  .favbox{grid-template-columns:1fr 1fr;padding:14px;}
  .favbox__main{grid-column:1/-1;}
}

/* ---------- host ---------- */
.hostrow{
  display:flex;align-items:center;gap:14px;
  padding:24px 0;border-bottom:1px solid var(--line-2);margin-top:8px;
}
.hostrow__name{font-size:15px;font-weight:600;}
.hostrow__meta{font-size:13px;color:var(--text-2);}

/* ---------- điểm nhấn ---------- */
.hilite{padding:24px 0;border-bottom:1px solid var(--line-2);}
.hilite li{display:flex;gap:16px;padding:10px 0;}
.hilite__icon{font-size:22px;flex:none;width:28px;text-align:center;}
.hilite__name{font-size:15px;font-weight:600;}
.hilite__desc{font-size:13px;color:var(--text-2);line-height:1.4;}

.transnote{
  display:flex;align-items:center;gap:10px;
  background:var(--hover);border-radius:12px;
  padding:14px 16px;margin:24px 0 0;
  font-size:13px;color:var(--text-2);
}
.transnote svg{width:16px;height:16px;flex:none;}
.transnote a{
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;font-weight:600;color:var(--text);
}

.desc{font-size:15px;line-height:1.6;white-space:pre-line;}
.desc.is-clamped{
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}
.btn-underline{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:600;text-decoration:underline;margin-top:8px;
}

/* ---------- phòng ngủ ---------- */
.row__head--tight{margin-bottom:8px;min-height:28px;}
.track--bed{
  grid-auto-columns:calc((100% - 2 * var(--gap)) / 2.6);
}
@media (max-width:950px){ .track--bed{grid-auto-columns:calc((100% - var(--gap)) / 1.8);} }
@media (max-width:479px){ .track--bed{grid-auto-columns:85%;} }
/* Thẻ phòng là LINK mở đúng mục ảnh của phòng đó trong album.
   `display:block` vì <a> mặc định là inline — để inline thì ảnh 4/3 bên trong
   không kéo được chiều cao thẻ, y hệt bẫy <button> chứa ảnh đã gặp ở khu quản trị. */
.bed{display:block;position:relative;scroll-snap-align:start;min-width:0;color:inherit;}
.bed__img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:12px;background:var(--hover-2);
  transition:filter .15s ease;
}
.bed:hover .bed__img,.bed:focus-visible .bed__img{filter:brightness(.92);}
/* Nhãn "Xem ảnh" — chỉ hiện khi rê chuột, nhưng ở thiết bị chạm thì hiện luôn
   vì không có trạng thái hover để mà chờ. */
.bed__xem{
  position:absolute;top:10px;right:10px;
  padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.94);box-shadow:var(--shadow-sm);
  font-size:12px;font-weight:600;
  opacity:0;transition:opacity .15s ease;
}
.bed:hover .bed__xem,.bed:focus-visible .bed__xem{opacity:1;}
@media (hover:none){ .bed__xem{opacity:1;} }
.bed__name{font-size:15px;font-weight:600;margin-top:10px;}
.bed__meta{font-size:14px;color:var(--text-2);}

/* ---------- tiện nghi ---------- */
.amen{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;}
@media (max-width:600px){ .amen{grid-template-columns:1fr;} }
.amen li{display:flex;align-items:center;gap:16px;padding:12px 0;font-size:15px;}
.amen__icon{width:24px;height:24px;flex:none;color:var(--text);}

/* ---------- lịch trang chi tiết ---------- */
.cal-foot{display:flex;justify-content:flex-end;padding-top:8px;}

/* ---------- thẻ đặt phòng ---------- */
.booking{position:sticky;top:104px;padding-top:32px;}
.booking__card{
  border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-sm);padding:24px;background:#fff;
}
.booking__price{font-size:20px;font-weight:600;margin-bottom:20px;}
.booking__price small{font-size:14px;font-weight:400;color:var(--text-2);}
.booking__fields{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
}
.bfield{
  display:block;text-align:left;padding:10px 12px;min-height:56px;
  border:0;background:none;
  transition:box-shadow .15s ease;
}
.bfield[data-field="in"]{border-right:1px solid var(--line);}
/* Ô Khách: cho <select> phủ kín cả ô, nhãn nổi lên trên. Nếu để select cao
   theo nội dung thì vùng chạm chỉ còn 21px, bấm vào phần nhãn không mở được. */
.bfield--guest{
  grid-column:1/-1;border-top:1px solid var(--line);
  position:relative;padding:0;
}
.bfield--guest .bfield__label{
  position:absolute;top:10px;left:12px;z-index:1;pointer-events:none;
}
.bfield:hover{box-shadow:inset 0 0 0 1px var(--text);}
.bfield.is-active{box-shadow:inset 0 0 0 2px var(--text);}
.bfield__label{
  display:block;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.bfield__value{display:block;font-size:14px;margin-top:2px;}
.bfield__value.is-placeholder{color:var(--text-3);}
.bfield__select{
  display:block;width:100%;min-height:56px;
  border:0;background:none;font:inherit;font-size:14px;color:var(--text);
  padding:26px 12px 8px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.bfield__select:focus{outline:none;}

/* ⚠️ `.btn-primary` đã CHUYỂN sang css/styles.css — nó là nút dùng chung, không
   phải của riêng trang chi tiết. Để ở đây khiến trang đăng nhập quản trị (chỉ
   nạp styles.css + host.css) hiện nút thành chữ trơn, không nền không viền.

   Đã đặt riêng ở `is-huy` bên dưới vì đó mới thật sự là chuyện của trang này. */

/* Đã đặt rồi thì nút đổi vai thành "Huỷ lượt đặt" — tông trung tính, không dùng
   nền gradient thương hiệu cho một hành động thu hồi. */
.btn-primary.is-huy{
  background:none;color:var(--text);border:1px solid var(--text);
}
.btn-primary.is-huy:hover{filter:none;background:var(--hover);}

/* ---------- kết quả kiểm tra còn phòng ---------- */
.ketqua{
  border-radius:12px;padding:14px 16px;margin-top:16px;
  border:1px solid var(--line);
}
.ketqua--con{background:#F2F9F4;border-color:#B7DDC3;}
.ketqua--het{background:#FDF3F2;border-color:#F0C7C3;}
.ketqua--gui{background:var(--hover);}
.ketqua__ten{font-size:15px;font-weight:600;}
.ketqua__mo{font-size:14px;color:var(--text-2);margin-top:4px;line-height:1.5;}
.ketqua .btn-primary,.ketqua .btn-outline{margin-top:12px;}
.ketqua__nut{display:flex;flex-wrap:wrap;gap:8px;}

/* ---------- khung nhắn tin với host ---------- */
.nhantin{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:20px;}
.nhantin__box{
  width:min(520px,100%);max-height:88dvh;overflow-y:auto;
  background:#fff;border-radius:16px;padding:20px;
}
.nhantin__top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nhantin__h{font-size:20px;font-weight:600;}
.nhantin__tt{font-size:14px;color:var(--text-2);margin-top:4px;}
.nhantin__mo{font-size:13px;color:var(--text-2);margin-top:12px;line-height:1.5;}
.nhantin__loi{
  margin-top:8px;border-radius:10px;padding:10px 12px;
  background:#FDF3F2;color:#8A2B32;font-size:13px;line-height:1.5;
}
/* Mã vùng cố định bề ngang, số điện thoại ăn hết phần còn lại. minmax(0,1fr)
   để ô số co được — thiếu nó là tên nước dài đẩy cả hàng tràn ra ngoài. */
.ntphone{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px;}
.ntphone .edfield{margin:0;}
.ntphone__ma select{max-width:100%;}
@media (max-width:479px){ .ntphone{grid-template-columns:1fr;} }
.nhantin .edfield{
  display:block;border:1px solid var(--line);border-radius:12px;padding:10px 14px;
}
.nhantin .edfield>span{display:block;font-size:12px;color:var(--text-2);}
.nhantin .edfield input,.nhantin .edfield textarea,.nhantin .edfield select{
  display:block;width:100%;min-height:44px;
  border:0;background:none;font:inherit;font-size:16px;color:var(--text);resize:vertical;
}
.nhantin .edfield input:focus,.nhantin .edfield textarea:focus,
.nhantin .edfield select:focus{outline:none;}
.nhantin .edfield:focus-within{border-color:var(--text);}
.nhantin .iconbtn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;
}
.nhantin .iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;}
.nhantin .iconbtn:hover{background:var(--hover);}

.booking__bill{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-2);}
.booking__bill li{
  display:flex;justify-content:space-between;gap:16px;
  font-size:14px;padding:6px 0;color:var(--text-2);
}
.booking__bill li.is-total{
  font-weight:600;color:var(--text);font-size:15px;
  border-top:1px solid var(--line-2);margin-top:8px;padding-top:14px;
}
.booking__report{text-align:center;margin-top:8px;font-size:13px;color:var(--text-2);}
.booking__report a{
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;
}

@media (max-width:950px){
  .booking{position:static;padding-top:0;}
  .booking__card{margin-top:24px;}
}

/* thanh dính đáy cho khổ hẹp */
.bookbar{display:none;}
@media (max-width:950px){
  .bookbar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:12px 24px;background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
  }
  .bookbar__price{display:block;font-size:15px;font-weight:600;}
  .bookbar__sub{display:block;font-size:13px;color:var(--text-2);}
}

/* ---------- đánh giá ---------- */
.score{display:flex;align-items:center;justify-content:center;gap:8px;}
.score__num{font-size:60px;font-weight:600;letter-spacing:-.03em;line-height:1;}
.score__laurel{font-size:40px;}
.score__laurel--l{transform:scaleX(-1);}
.score__title{text-align:center;font-size:20px;font-weight:600;margin-top:12px;}
.score__sub{
  text-align:center;font-size:14px;color:var(--text-2);
  max-width:460px;margin:6px auto 0;line-height:1.45;
}

.rbars{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:24px;margin:32px 0;
  border-top:1px solid var(--line-2);padding-top:24px;
}
@media (max-width:950px){ .rbars{grid-template-columns:repeat(3,1fr);} }
@media (max-width:479px){ .rbars{grid-template-columns:repeat(2,1fr);} }
.rbars li{display:flex;flex-direction:column;gap:6px;}
.rbars li + li{border-left:1px solid var(--line-2);padding-left:24px;}
@media (max-width:950px){ .rbars li:nth-child(3n+1){border-left:0;padding-left:0;} }
@media (max-width:479px){ .rbars li:nth-child(odd){border-left:0;padding-left:0;} }
.rbars__name{font-size:13px;color:var(--text-2);}
.rbars__val{font-size:18px;font-weight:600;}
.rbars__icon{font-size:20px;margin-top:2px;}

.rchips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;margin-bottom:24px;}
.rchips::-webkit-scrollbar{display:none;}
.rchips li{flex:none;}
.rchips span{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 16px;
  border:1px solid var(--line);border-radius:999px;
  font-size:14px;white-space:nowrap;
}
.rchips b{font-weight:600;}

.rlist{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px;}
@media (max-width:743px){ .rlist{grid-template-columns:1fr;gap:24px;} }
.review__head{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.review__name{font-size:15px;font-weight:600;}
.review__from{font-size:13px;color:var(--text-2);}
.review__meta{font-size:13px;color:var(--text-2);margin-bottom:6px;}
.review__stars{letter-spacing:1px;font-size:10px;color:var(--text);}
.review__text{font-size:15px;line-height:1.5;}
.review__text.is-clamped{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}


/* ---------- host ---------- */
/* Cột trái hẹp hơn: nó là "danh thiếp" của host, không cần rộng bằng cột chữ. */
.hostgrid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:32px 64px;align-items:start;}
@media (max-width:1128px){ .hostgrid{gap:32px 40px;} }
@media (max-width:950px){ .hostgrid{grid-template-columns:1fr;gap:24px;} }
.hostside{min-width:0;}
/* Một cột thì cột trái ăn trọn bề ngang — thẻ giãn tới 739px, giữa avatar và
   cột số liệu hở ra một mảng trống to. Chốt trần cho cả hai. */
@media (max-width:950px){
  .hostside{max-width:560px;}
  .hostcard{max-width:460px;}
}

.hostcard{
  display:flex;align-items:center;gap:20px;
  border:1px solid var(--line-2);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:28px 24px;
}
.hostcard__id{text-align:center;flex:1;min-width:0;}

/* Ảnh đại diện + dấu tick. `inline-block` để khối bọc ôm đúng vòng tròn —
   để block thì nó rộng cả cột và tick văng ra tận mép phải. */
.hostcard__anh{position:relative;display:inline-block;}
.avatar--xl{width:104px;height:104px;font-size:34px;}
.hostcard__tick{
  position:absolute;right:2px;bottom:2px;
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--brand);border:2px solid #fff;
}
.hostcard__tick svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}

.hostcard__name{
  font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  margin-top:14px;overflow-wrap:anywhere;
}
.hostcard__role{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13px;color:var(--text-2);margin-top:6px;
}
.hostcard__medal{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;}

/* `width` cố định chứ không `min-width`: nhãn "Năm kinh nghiệm đón tiếp khách"
   dài 162px nếu để một dòng, ăn hết chỗ của tên bên trái. Chốt bề ngang thì nó
   xuống dòng, đúng như thẻ mẫu. */
.hostcard__stats{flex:none;width:118px;}
.hostcard__stats li + li{border-top:1px solid var(--line-2);margin-top:12px;padding-top:12px;}
.hostcard__big{font-size:22px;font-weight:600;display:block;line-height:1.1;}
.hostcard__sao{font-size:15px;margin-left:2px;}
.hostcard__cap{font-size:11px;line-height:1.3;display:block;margin-top:2px;}

/* Đôi nét về host — nằm DƯỚI thẻ ở cột trái, không phải trong cột chữ bên phải */
.hostfacts{margin:24px 0 0;}
.hostfacts li{display:flex;align-items:center;gap:14px;font-size:15px;padding:9px 0;}
.hostfacts__ic{
  width:22px;height:22px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.hostbio{font-size:15px;line-height:1.6;margin-top:20px;}

/* ---- cột phải ---- */
.hostinfo__h{font-size:17px;font-weight:600;margin:24px 0 8px;}
.hostinfo__h:first-child{margin-top:0;}
.hostinfo__sub{font-size:14px;line-height:1.55;color:var(--text-2);}
.hostinfo__nut{margin-top:20px;}
.cohost{display:flex;align-items:center;gap:12px;margin-top:4px;font-size:15px;}
.cohost .avatar{width:40px;height:40px;font-size:15px;}

.hostnote{
  display:flex;align-items:flex-start;gap:12px;
  border-top:1px solid var(--line-2);margin-top:24px;padding-top:20px;
  font-size:13px;line-height:1.5;color:var(--text-2);
}
.hostnote svg{
  width:20px;height:20px;flex:none;margin-top:1px;
  fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linejoin:round;
}

/* Khổ hẹp: thẻ xếp dọc, ba số liệu thành một hàng ngang chia đều.
   Để nguyên hàng ngang như desktop thì cột thống kê ép phần tên còn 110px và
   tên host phải gãy làm hai dòng trong một ô chật. */
@media (max-width:743px){
  .hostcard{flex-direction:column;gap:20px;padding:24px 16px;}
  .hostcard__stats{width:100%;display:flex;}
  .hostcard__stats li{flex:1;min-width:0;text-align:center;padding:0 6px;}
  .hostcard__stats li + li{
    border-top:0;border-left:1px solid var(--line-2);
    margin-top:0;padding-top:0;
  }
  .hostcard__name{font-size:22px;}
}

/* Liên hệ trực tiếp — số điện thoại và các kênh chat của chủ nhà.
   `min-height:44px` vì cả hàng là vùng chạm; số dài thì xuống dòng chứ không tràn. */
.lienhe{margin:8px 0 16px;}
.lienhe li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;padding:4px 0;border-bottom:1px solid var(--line-2);font-size:15px;
}
.lienhe li:last-child{border-bottom:0;}
.lienhe__ten{color:var(--text-2);flex:none;}
.lienhe a,.lienhe li>span:last-child{
  text-align:right;min-width:0;overflow-wrap:anywhere;font-weight:600;
}
/* Vùng chạm là chính cái link, không phải cái hàng — để `inline` thì chỉ cao
   bằng dòng chữ (21px) dù hàng đã 44px. */
.lienhe a{
  display:inline-flex;align-items:center;justify-content:flex-end;
  min-height:44px;text-decoration:underline;
}

/* ---------- những điều cần biết ---------- */
.know{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 48px;}
@media (max-width:743px){ .know{grid-template-columns:1fr;} }
.know h3{font-size:16px;font-weight:600;margin-bottom:12px;}
.know li{font-size:14px;color:var(--text-2);padding:5px 0;}

/* =====================================================================
   POPUP CHỌN NGÀY (bấm ô Nhận/Trả phòng trên thẻ đặt phòng)
   Một khối duy nhất cho mọi khổ: ≤743px là tấm dâng từ đáy, rộng hơn thì hộp
   giữa màn hình. Không tách hai component — lịch bên trong tự đổi số tháng.
   ===================================================================== */
.dpop{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;}
.dpop__scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);}
.dpop__box{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  width:min(840px,calc(100vw - 32px));
  max-height:min(88vh,760px);
  background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.25);
}
.dpop__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px 12px;
}
.dpop__chu{min-width:0;}
.dpop__title{font-size:20px;font-weight:600;}
.dpop__sub{font-size:14px;color:var(--text-2);margin-top:4px;}
/* min-height:0 để phần lịch cuộn được — thiếu nó thì hộp phình quá màn hình */
.dpop__than{flex:1;min-height:0;overflow-y:auto;padding:0 24px;}
.dpop__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line-2);padding:14px 24px;
}

/* Thanh trên và hàng thứ dùng chung: chỉ có ý nghĩa ở khổ hẹp toàn màn hình */
.dpop__bar,.dpop__dow{display:none;}
.dpop__gia{font-size:14px;font-weight:600;}
.dpop__nut{display:flex;align-items:center;gap:12px;}

@media (max-width:743px){
  /* TOÀN MÀN HÌNH, không phải tấm dâng từ đáy: chọn ngày là việc chiếm trọn sự
     chú ý, và có đủ chiều cao thì xếp nhiều tháng chồng dọc mới đọc được. */
  .dpop{align-items:stretch;}
  .dpop__box{
    width:100%;max-width:none;height:100dvh;max-height:none;
    border-radius:0;box-shadow:none;
  }
  .dpop__scrim{display:none;}

  .dpop__bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 8px 0 8px;
  }
  .dpop__x{display:none;}                 /* đã có mũi tên quay lại ở thanh trên */
  .dpop__head{padding:12px 16px 8px;}
  .dpop__title{font-size:26px;letter-spacing:-.02em;}

  /* Hàng thứ DÍNH trên đầu. Không có nó thì cuộn qua tháng thứ hai là mất hẳn
     tiêu đề cột, không biết ô nào là thứ mấy. */
  .dpop__dow{
    display:grid;grid-template-columns:repeat(7,1fr);
    position:sticky;top:0;z-index:4;
    background:#fff;border-bottom:1px solid var(--line-2);
    padding:0 16px 10px;
  }
  .dpop__dow span{text-align:center;font-size:12px;font-weight:600;color:var(--text-3);}

  .dpop__than{padding:0 16px;}
  .dpop__foot{padding:14px 16px;}

  /* `.cal` ở khổ hẹp tự cắt `max-height:calc(100dvh - 380px)` — con số đó tính
     riêng cho popover trang chủ (top 151 + hai ô ngày + chân popover). Trong
     khung này để nguyên thì lịch cuộn LỒNG trong khung cũng cuộn. Một chỗ cuộn
     là đủ, và nó phải là `.dpop__than` để hàng thứ ở trên dính được. */
  .dpop .cal{max-height:none;overflow-y:visible;gap:8px;}

  /* Mỗi tháng đã có hàng thứ riêng — thừa khi đã có hàng dùng chung ở trên */
  .dpop .cal__dow{display:none;}
  /* Tên tháng: chữ lớn, canh trái, KHÔNG dính (hàng thứ mới là thứ dính) */
  .dpop .cal__title{
    position:static;text-align:left;
    font-size:20px;font-weight:600;padding:20px 0 8px;margin:0;
  }
}

/* =====================================================================
   VIẾT ĐÁNH GIÁ — chỉ hiện với khách đã ở xong (xem dgDuocViet ở kho.js)
   ===================================================================== */
.dgnhac{
  background:var(--hover);border-radius:12px;
  padding:14px 16px;margin:0 0 20px;
  font-size:14px;line-height:1.5;color:var(--text-2);
}
.dgnhac--ok{background:#DDF3EE;color:#0F7B6C;font-weight:500;}

.dgform{
  border:1px solid var(--line);border-radius:16px;
  padding:20px;margin:0 0 28px;max-width:640px;
}
.dgform__h{font-size:17px;font-weight:600;}
.dgform__mo{font-size:14px;color:var(--text-2);margin-top:4px;}

/* Chấm sao: radio thật nằm dưới (bàn phím và trình đọc màn hình vẫn dùng được),
   ngôi sao là phần nhìn. Tô vàng theo lối "sao này và mọi sao TRƯỚC nó" bằng
   `:has()` — không dùng mẹo đảo chiều flex vì thứ tự đảo làm rối phím Tab. */
.dgsao{border:0;padding:0;margin:16px 0 0;display:flex;align-items:center;gap:2px;}
.dgsao__o{
  display:grid;place-items:center;
  min-width:var(--tap);min-height:var(--tap);
  font-size:28px;line-height:1;color:var(--line);cursor:pointer;
}
.dgsao__o input{position:absolute;opacity:0;width:1px;height:1px;}
.dgsao__o:has(input:checked),
.dgsao__o:has(~ .dgsao__o input:checked){color:#F5A623;}
.dgsao__o:has(input:focus-visible){outline:2px solid var(--text);outline-offset:2px;border-radius:8px;}
.dgsao__chu{margin-left:10px;font-size:14px;color:var(--text-2);}

.dgform__o{
  display:block;width:100%;margin-top:14px;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font:inherit;font-size:16px;line-height:1.5;resize:vertical;min-height:96px;
}
.dgform__o:focus{outline:none;border-color:var(--text);}
.dgform__loi{
  background:#FDEBEC;color:#C13515;border-radius:10px;
  padding:10px 12px;margin-top:10px;font-size:14px;
}
.dgform__chan{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:16px;flex-wrap:wrap;
}
.dgform__dem{font-size:13px;color:var(--text-2);}

/* Đánh giá thật của khách — phân biệt với sáu đánh giá mẫu bằng vạch bên trái */
.review--that{border-left:3px solid var(--brand);padding-left:16px;}

/* Sáu hàng sao trong form đánh giá */
.dgmuc{margin-top:16px;}
.dgsao__nhan{
  flex:1;min-width:0;font-size:14px;color:var(--text-2);
  display:flex;align-items:center;gap:8px;padding:0;
}
.dgform__tb{font-size:14px;color:var(--text-2);margin-top:12px;}
.dgform__tb b{color:var(--text);font-size:16px;}
/* Điểm từng tiêu chí hiện dưới mỗi đánh giá thật */
.rmuc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 4px;}
.rmuc li{font-size:13px;color:var(--text-2);}
.rmuc b{color:var(--text);}
@media (max-width:600px){
  .dgsao{flex-wrap:wrap;}
  .dgsao__nhan{flex:1 0 100%;margin-bottom:2px;}
}

/* Bộ chọn tháng/năm trong khung chọn ngày toàn màn hình */
.calchon--pop{display:none;}
@media (max-width:743px){
  .calchon--pop{display:flex;padding:0 16px 12px;margin:0;}
}

/* Chỗ ở chưa duyệt — chặn ngay đầu trang, trước cả header */
.chuaduyet{
  background:#FFF3D6;border-bottom:1px solid #E8D9AE;
  padding:20px 24px;text-align:center;
}
.chuaduyet__h{font-size:18px;font-weight:600;margin-bottom:6px;}
.chuaduyet p{font-size:15px;color:var(--text-2);line-height:1.5;}
.chuaduyet .btn-dark{margin-top:14px;text-decoration:none;}

/* Dòng host bấm được — cuộn xuống mục "Gặp gỡ host" */
.hostrow{padding:0;}
.hostrow__nut{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:20px 12px 20px 0;margin:8px 0 0;
  background:none;border:0;border-bottom:1px solid var(--line-2);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  border-radius:12px;
}
.hostrow__nut:hover{background:var(--hover);padding-left:12px;}
.hostrow__nut:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.hostrow__mui{width:20px;height:20px;margin-left:auto;flex:none;color:var(--text-2);}
.hostrow__nut:hover .hostrow__mui{color:var(--text);}

/* Nháy nhẹ khi vừa cuộn tới, để mắt bắt được đích */
.hostgrid.is-nhay{animation:hostNhay 1.2s ease-out;border-radius:14px;}
@keyframes hostNhay{
  0%,100%{background:transparent;}
  15%,55%{background:var(--hover);}
}

/* Chưa có đánh giá / chưa có điểm — thà trống thật còn hơn đầy giả */
.dgtrong{
  font-size:15px;color:var(--text-2);line-height:1.6;
  padding:20px;border:1px dashed var(--line);border-radius:12px;
}
.favbox__big--trong{color:var(--text-2);}
.rbars__val.is-trong{color:var(--text-2);}