/* =====================================================================
   Hillside Phú Quốc — giao diện trang "Nơi lưu trú"
   Đổi tên thương hiệu: js/data.js (TEN_THUONG_HIEU) + .brand__word trong 3 trang khách
   ===================================================================== */

:root{
  /* Màu thương hiệu Hillside Phú Quốc — navy lấy từ chính logo.
     ⚠️ Logo vẽ bằng SVG inline và ăn theo `currentColor`, nên đổi ba dòng này
     là logo, wordmark, nút và mọi điểm nhấn đổi theo cùng lúc. Đừng viết cứng
     mã màu ở nơi khác — sót một chỗ là trang có hai tông xanh lệch nhau. */
  --brand:#1E3A63;
  --brand-2:#152A49;
  --brand-grad:linear-gradient(135deg,#2B4E80 0%,#1E3A63 45%,#152A49 100%);

  --text:#222222;
  --text-2:#6A6A6A;
  --text-3:#717171;

  --line:#DDDDDD;
  --line-2:#EBEBEB;
  --hover:#F7F7F7;
  --hover-2:#EBEBEB;

  /* Màu thương hiệu của các dịch vụ chia sẻ. Đây là màu CỐ ĐỊNH của bên thứ ba,
     không phải màu của mình — sửa là logo sai màu, nhận không ra. Vì thế vẫn
     khai ở :root theo quy ước "không hardcode màu", nhưng đừng đổi giá trị. */
  --mau-email:#EA4335;
  --mau-sms:#34C759;
  --mau-whatsapp:#25D366;
  --mau-messenger:#0084FF;
  --mau-facebook:#1877F2;
  --mau-x:#000000;
  --mau-zalo:#0068FF;
  --mau-telegram:#26A5E4;
  --mau-linkedin:#0A66C2;
  --mau-pinterest:#E60023;
  --mau-instagram:#E4405F;
  --mau-wechat:#07C160;

  --shadow-sm:0 1px 2px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.05);
  --shadow-md:0 2px 4px rgba(0,0,0,.18);
  --shadow-lg:0 3px 12px rgba(0,0,0,.15),0 6px 16px rgba(0,0,0,.12);
  --shadow-pop:0 6px 20px rgba(0,0,0,.2);

  --r-card:12px;
  --header-h:80px;
  --search-h:88px;

  --gap:16px;
  --cols:7;

  /* Vùng chạm tối thiểu. Cả hai khu chạy ở 100% nên đây là px thật, không phải
     nhân chia gì. Để ở đây vì thành phần dùng chung (.msg, .thread, .composer,
     .pill, .iconbtn…) đều cần tới. */
  --tap:44px;
}

*,*::before,*::after{box-sizing:border-box;}
/* `hidden` phải thắng mọi `display` của component.
   Bất kỳ class nào đặt display (`.pill`, `.iconbtn`, `.chip`…) đều đè `[hidden]` của
   trình duyệt, nên `el.hidden = true` vẫn để lại một ô rỗng chiếm chỗ trên bố cục. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Airbnb Cereal VN","Circular",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:14px;
  line-height:1.4;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,p{margin:0;}
svg{display:block;fill:currentColor;}
:focus-visible{outline:2px solid #222;outline-offset:2px;border-radius:4px;}

.container{
  width:100%;
  max-width:1760px;
  margin:0 auto;
  padding:0 40px;
}
@media (min-width:1440px){ .container{padding:0 80px;} }
@media (max-width:743px){ .container{padding:0 24px;} }

/* =====================================================================
   HEADER
   ===================================================================== */
.header{
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
}
.header__bar{
  background:#fff;
  border-bottom:1px solid var(--line-2);
  padding-bottom:16px;
  transition:padding-bottom .2s ease;
}
.header__grid{
  height:var(--header-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}
/* Ở khổ hẹp, hai cột 1fr bằng nhau ép nhóm nút bên phải tràn ra ngoài.
   Cho cột biên co theo nội dung và cột giữa nhận phần còn lại. */
@media (max-width:743px){
  .header__grid{grid-template-columns:auto 1fr auto;gap:8px;}
  .tabs{gap:0;}
}

/* --- logo --- */
.brand{display:flex;align-items:center;gap:2px;color:var(--brand);}
.brand__mark{width:32px;height:32px;flex:none;}
/* Chữ hoa, giãn dương — đúng cách wordmark trong logo Hillside Phú Quốc được đặt.
   Bản cũ là `dulich` chữ thường giãn âm, áp lên tên ba chữ thì dính vào nhau. */
.brand__word{
  font-size:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;padding-bottom:2px;
}
@media (max-width:1127px){ .brand__word{display:none;} }

/* --- tabs --- */
.header__center{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
}
.tabs{display:flex;align-items:center;gap:8px;transition:opacity .2s ease,transform .2s ease;}
/* ⚠️ `.tab` nay là <button>, không phải <a href="#"> — bấm một link rỗng là
   nhảy lên đầu trang rồi mới lọc, màn hình giật một cái không ai hiểu vì sao.
   Nút thì phải tự gỡ nền, viền và font mặc định của trình duyệt; `border:0`
   đặt TRƯỚC `border-bottom` để dòng gạch chân dưới vẫn thắng. */
.tab{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 10px;
  color:var(--text-3);
  font-size:14px;font-weight:500;
  background:none;border:0;font-family:inherit;cursor:pointer;
  border-bottom:2px solid transparent;
  border-radius:8px 8px 0 0;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
  white-space:nowrap;
}
.tab:hover{color:var(--text);background:var(--hover);}
.tab.is-active{color:var(--text);font-weight:600;border-bottom-color:var(--text);}
.tab__icon{font-size:22px;line-height:1;filter:saturate(1.1);}
@media (max-width:743px){ .tab__label{display:none;} }

/* --- mini search (hiện khi cuộn) --- */
.minisearch{
  position:absolute;left:50%;
  display:flex;align-items:center;gap:0;
  height:48px;padding:0 8px 0 20px;
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  background:#fff;
  font-size:14px;font-weight:600;
  opacity:0;visibility:hidden;transform:translate(-50%,6px) scale(.96);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  white-space:nowrap;
}
.minisearch:hover{box-shadow:var(--shadow-lg);}
.minisearch__item{padding:0 12px;}
.minisearch__item--muted{color:var(--text-3);font-weight:400;padding-right:16px;}
.minisearch__dot{width:1px;height:24px;background:var(--line);}
.minisearch__btn{
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--brand);color:#fff;
}
.minisearch__btn svg{width:12px;height:12px;}

/* --- right actions ---
   `min-width:0` là chốt an toàn: cột `1fr` của grid KHÔNG tự co dưới bề rộng
   nội dung, nên thêm một link vào nhóm này là cả header đẩy tràn ra ngoài màn
   hình — đúng chuyện đã xảy ra khi thêm link "Chuyến đi". */
.header__right{
  display:flex;align-items:center;justify-content:flex-end;gap:4px;
  min-width:0;flex-wrap:nowrap;
}
.ghost-link{
  padding:12px 14px;border-radius:999px;
  font-size:14px;font-weight:500;
  transition:background .15s ease;
  white-space:nowrap;
}
.ghost-link:hover{background:var(--hover);}
@media (max-width:950px){ .ghost-link{display:none;} }
.icon-btn{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  transition:background .15s ease;
}
.icon-btn:hover{background:var(--hover);}
.icon-btn svg{width:16px;height:16px;}
@media (max-width:743px){ .icon-btn{display:none;} }

.usermenu{
  position:relative;
  display:flex;align-items:center;gap:12px;
  height:42px;padding:0 8px 0 14px;
  border:1px solid var(--line);border-radius:999px;
  transition:box-shadow .2s ease;
}
.usermenu:hover{box-shadow:var(--shadow-sm);}
.usermenu__burger{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;}
.usermenu__avatar{display:block;width:30px;height:30px;border-radius:50%;overflow:hidden;color:#717171;background:#717171;}
.usermenu__avatar svg{width:100%;height:100%;fill:#fff;}
.usermenu__badge{
  position:absolute;top:-1px;right:-1px;
  width:10px;height:10px;border-radius:50%;
  background:var(--brand);border:2px solid #fff;
}

/* =====================================================================
   SEARCH BAR
   ===================================================================== */
.searchwrap{
  display:flex;justify-content:center;
  padding:0 40px;
  transition:opacity .18s ease,transform .22s ease,max-height .22s ease,margin .22s ease;
  transform-origin:top center;
  max-height:80px;
}
.searchbar{
  position:relative;
  display:flex;align-items:center;
  width:100%;max-width:850px;height:66px;
  border:1px solid var(--line);border-radius:999px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:background .2s ease,box-shadow .2s ease;
}
.searchbar.is-open{background:var(--hover-2);box-shadow:var(--shadow-lg);}
@media (max-width:743px){ .searchwrap{padding:0 24px;} }

.seg{
  position:relative;
  display:flex;align-items:center;
  flex:1 1 0;min-width:0;
  height:100%;
  padding:0 8px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease;
}
.seg__body{padding:14px 16px;min-width:0;flex:1;}
.searchbar.is-open .seg:hover{background:var(--line);}
.seg.is-active,.searchbar.is-open .seg.is-active:hover{
  background:#fff;box-shadow:var(--shadow-lg);
}
.searchbar:not(.is-open) .seg:hover{background:var(--hover);}

/* Thứ tự ô = thứ tự chọn: Khu vực (lớp 1) → Số phòng ngủ (lớp 2) → Thời gian.
   Ô cuối chứa nút tìm kiếm nên cần nhiều chỗ nhất. */
.seg--where{flex:1.2 1 0;padding-left:8px;}
.seg--type{flex:0.95 1 0;}
.seg--when{flex:1.5 1 0;padding-right:8px;}

.seg__label{font-size:12px;font-weight:600;line-height:16px;margin-bottom:2px;}
.seg__value,.seg__input{
  font-size:14px;line-height:18px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.seg__value.is-placeholder{color:var(--text-3);}
/* Safari iOS chỉ phóng to trang khi focus FORM FIELD nhỏ hơn 16px.
   .seg__value là <div>, không focus được, nên giữ 14px để đỡ chật chỗ ở khổ hẹp. */
@media (max-width:743px){
  .seg__input{font-size:16px;}
  /* thanh chỉ rộng 342px: cắt padding tối đa rồi chia lại theo độ dài chữ thật.
     Ô Khách phải rộng nhất vì còn phải chứa nút tìm kiếm 48px. */
  .seg{padding:0 2px;}
  .seg__body{padding:14px 4px;}
  .seg--where{flex:1 1 0;}
  .seg--type{flex:0.85 1 0;}
  .seg--when{flex:1.5 1 0;}
}
.seg__input{
  display:block;width:100%;
  border:0;padding:0;background:transparent;
  font-family:inherit;
}
.seg__input::placeholder{color:var(--text-3);}
.seg__input:focus{outline:none;}

.seg-div{width:1px;height:32px;background:var(--line);flex:none;transition:opacity .15s ease;}
.searchbar.is-open .seg-div{opacity:1;}
.seg-div.is-hidden{opacity:0;}

.searchbtn{
  display:flex;align-items:center;gap:8px;
  height:48px;width:48px;flex:none;
  margin-left:auto;
  padding:0;
  border-radius:999px;
  background:var(--brand-grad);
  color:#fff;font-size:16px;font-weight:600;
  overflow:hidden;
  transition:width .25s ease,padding .25s ease,filter .15s ease;
}
.searchbtn:hover{filter:brightness(1.06);}
.searchbtn svg{width:16px;height:16px;flex:none;margin:0 16px;}
.searchbtn__label{opacity:0;white-space:nowrap;transition:opacity .2s ease;padding-right:16px;}
.searchbar.is-open .searchbtn{width:auto;}
.searchbar.is-open .searchbtn__label{opacity:1;}

/* --- popovers --- */
.popover{
  position:absolute;top:calc(100% + 12px);
  background:#fff;border-radius:32px;
  box-shadow:var(--shadow-pop);
  padding:24px 8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:5;
}
.popover.is-open{opacity:1;visibility:visible;transform:none;}
.popover--where{left:0;width:420px;padding:24px 8px;}
.popover--when{left:50%;transform:translate(-50%,-6px);width:min(860px,92vw);padding:24px 16px 16px;}
.popover--when.is-open{transform:translate(-50%,0);}
/* Ô "Số phòng ngủ" giờ nằm giữa thanh nên popover canh giữa, không canh phải */
.popover--type{left:50%;transform:translate(-50%,-6px);width:420px;padding:24px 8px;}
.popover--type.is-open{transform:translate(-50%,0);}

/* Điện thoại: 420px cố định sẽ tràn khỏi màn 390px — phải co theo viewport.
   Khối này BẮT BUỘC nằm sau .popover--type, nếu không sẽ bị rule trên ghi đè. */
@media (max-width:743px){
  .popover--where,.popover--type{
    width:min(420px,calc(100vw - 32px));
    max-height:calc(100vh - 210px);
    max-height:calc(100dvh - 210px);
    overflow-y:auto;overscroll-behavior:contain;
  }
}
/* 10 mục + tiêu đề vượt chiều cao màn hình vừa; cho cuộn trong popover */
.popover--type{
  max-height:calc(100vh - 210px);
  max-height:calc(100dvh - 210px);
  overflow-y:auto;overscroll-behavior:contain;
}

.popover__title{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text);padding:0 24px 12px;
}
.popover__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px 4px;border-top:1px solid var(--line-2);margin-top:8px;
}
.popover__footleft{display:flex;align-items:center;gap:12px;min-width:0;}
.cal__nights{font-size:14px;color:var(--text-3);white-space:nowrap;}
.linkbtn{text-decoration:underline;font-weight:600;font-size:14px;padding:10px;border-radius:8px;}
.linkbtn:hover{background:var(--hover);}
.flexchips{display:flex;gap:8px;flex-wrap:wrap;}

/* Nút xác nhận trong popover: chốt lựa chọn, đóng popover và tìm luôn.
   Trước đây muốn tìm phải với ra nút Tìm kiếm trên thanh — mà chính popover
   đang che một phần nút đó. */
.btn-search{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;flex:none;
  border-radius:999px;background:var(--brand-grad);
  color:#fff;font-size:16px;font-weight:600;
  transition:filter .15s ease;
}
.btn-search:hover{filter:brightness(1.06);}
.btn-search svg{width:14px;height:14px;flex:none;}

/* Chân popover chỉ có mỗi nút thì đẩy sang phải */
.popover__foot--phai{justify-content:flex-end;}

/* Khổ hẹp: chân popover xếp dọc, nút tìm kiếm chiếm trọn hàng cuối.
   Để nguyên một hàng là 4 chip + nút đẩy nhau tràn ra ngoài. */
@media (max-width:743px){
  .popover__foot{flex-wrap:wrap;}
  .popover__foot .btn-search{width:100%;margin-top:4px;}
}
.chip{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:500;color:var(--text-2);
  transition:border-color .15s ease,color .15s ease;
}
.chip:hover{border-color:var(--text);color:var(--text);}
.chip.is-on{border-color:var(--text);background:var(--text);color:#fff;}

/* danh sách điểm đến */
.arealist{max-height:380px;overflow:auto;}
.arealist li>button{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:10px 24px;border-radius:12px;text-align:left;
  transition:background .15s ease;
}
.arealist li>button:hover{background:var(--hover);}
.area__thumb{
  display:grid;place-items:center;flex:none;
  width:48px;height:48px;border-radius:10px;
  font-size:22px;background:var(--hover-2);
}
.area__name{font-size:15px;font-weight:500;}
.area__desc{font-size:13px;color:var(--text-3);}

/* nhắc chọn lớp 1 trước khi chọn lớp 2 */
.prompt{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:4px 24px 12px;
}
.prompt__text{font-size:15px;color:var(--text-2);line-height:1.45;}

/* danh sách số phòng ngủ trong khu vực đang chọn (lớp 2) */
.types li>button{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:10px 24px;border-radius:12px;text-align:left;
  transition:background .15s ease;
}
.types li>button:hover{background:var(--hover);}
.type__icon{
  display:grid;place-items:center;flex:none;
  width:48px;height:48px;border-radius:10px;
  font-size:22px;background:var(--hover-2);
  transition:background .15s ease,box-shadow .15s ease;
}
.type__body{flex:1;min-width:0;}
.type__name{display:block;font-size:15px;font-weight:500;}
.type__desc{display:block;font-size:13px;color:var(--text-3);}
.type__check{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--text);color:#fff;font-size:12px;
  opacity:0;transform:scale(.6);
  transition:opacity .15s ease,transform .15s ease;
}
.types li>button.is-on{background:var(--hover);}
.types li>button.is-on .type__icon{box-shadow:inset 0 0 0 2px var(--text);}
.types li>button.is-on .type__check{opacity:1;transform:none;}

/* hai ô Nhận phòng / Trả phòng — luôn hiện cả hai ngày, và cho biết
   cú bấm tiếp theo sẽ đặt ngày nào (.is-active) */
.calfields{display:flex;align-items:center;gap:8px;padding:0 8px 16px;}
.calfield{
  flex:1 1 0;min-width:0;
  display:block;text-align:left;
  padding:9px 14px;
  border:1px solid var(--line);border-radius:12px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.calfield:hover{border-color:var(--text-2);}
.calfield.is-active{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text);}
.calfield__label{
  display:block;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}
.calfield__value{
  display:block;font-size:14px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.calfield__value.is-placeholder{color:var(--text-3);}
.calfields__arrow{flex:none;color:var(--text-3);font-size:15px;}

/* lịch */
/* overflow-x:auto để phần dư (nếu có) cuộn trong lịch chứ không đẩy tràn cả trang.
   Ở trạng thái bình thường 2 tháng thì không dư, nên không hiện thanh cuộn nào. */
.cal{display:flex;gap:56px;justify-content:center;position:relative;padding:0 8px;overflow-x:auto;}
/* 44×44 chứ không phải 32×32: ở popup chọn ngày trên điện thoại, đây là CÁCH
   DUY NHẤT chuyển tháng, nên nó phải đạt vùng chạm. Vòng tròn trong suốt nên
   nới ra không đổi diện mạo. */
.cal__nav{
  position:absolute;top:-10px;
  display:grid;place-items:center;
  width:var(--tap);height:var(--tap);border-radius:50%;
  color:var(--text-2);transition:background .15s ease;
}
.cal__nav:hover{background:var(--hover);}
.cal__nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.cal__nav--prev{left:8px;}
.cal__nav--next{right:8px;}
/* min-width:0 là chốt an toàn: mặc định flex item không co dưới bề rộng nội dung,
   nên nếu JS lỡ render nhiều tháng hơn bố cục hàng ngang chứa nổi thì cả trang bị
   tràn ngang. Có dòng này thì xấu nhất là ô ngày co lại, không tràn. */
.cal__month{flex:1;min-width:0;max-width:340px;}
.cal__title{text-align:center;font-size:15px;font-weight:600;margin-bottom:16px;text-transform:capitalize;}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);}
.cal__dow{
  text-align:center;font-size:12px;font-weight:600;color:var(--text-3);
  padding-bottom:10px;
}
.cal__day{
  position:relative;isolation:isolate;
  aspect-ratio:1;display:grid;place-items:center;
  font-size:14px;font-weight:500;
  transition:color .12s ease;
}
.cal__day>span{position:relative;z-index:2;}
.cal__day::before{
  content:"";position:absolute;inset:1px;border-radius:50%;z-index:1;
  transition:background .12s ease,box-shadow .12s ease;
}
.cal__day:not(:disabled):hover::before{box-shadow:inset 0 0 0 1px var(--text);}
.cal__day:disabled{color:#C2C2C2;text-decoration:line-through;cursor:not-allowed;}

/* dải ngày ở giữa khoảng chọn */
.cal__day.is-in{background:var(--hover-2);}
.cal__day.is-start.is-range{background:linear-gradient(to right,transparent 50%,var(--hover-2) 50%);}
.cal__day.is-end.is-range{background:linear-gradient(to left,transparent 50%,var(--hover-2) 50%);}

/* hai đầu mút */
.cal__day.is-edge{color:#fff;}
.cal__day.is-edge::before{background:var(--text);}
.cal__day.is-edge:hover::before{box-shadow:none;}

/* Điện thoại: 1 cột cuộn dọc thay vì 2 tháng cạnh nhau.
   Ở 390px cách này cho ô ngày ~46px — vừa đủ ngưỡng chạm 44px. */
@media (max-width:743px){
  .popover--when{width:min(860px,calc(100vw - 32px));padding:16px 12px 8px;}
  /* trừ hao: popover top 151 + hai ô ngày ~69 + chân popover ~112 + padding */
  .cal{
    flex-direction:column;gap:20px;padding:0 4px;
    min-height:180px;
    max-height:calc(100vh - 380px);
    max-height:calc(100dvh - 380px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  /* .calfields nằm ngoài .cal nên luôn thấy được khi cuộn lịch */
  .calfields{padding:0 4px 12px;}
  .cal__month{max-width:none;}
  .cal__title{
    position:sticky;top:0;z-index:4;
    background:#fff;padding:4px 0 10px;margin-bottom:4px;
  }

  /* ⚠️ HÀNG THỨ PHẢI DÍNH THEO. Trước đây chỉ `.cal__title` sticky, còn
     `T2 T3 … CN` cuộn mất theo nội dung — cuộn tới giữa tháng là khách nhìn
     một lưới số trần, không biết cột nào là thứ mấy nên không dám bấm. Đo
     được trên máy thật: tháng đang xem không có hàng thứ, tháng kế dưới thì
     có.

     `top` phải khớp CHIỀU CAO THẬT của `.cal__title` (34px = 4 trên + chữ 20
     + 10 dưới). Lệch thì hoặc hở một khe trắng, hoặc hàng thứ chui xuống dưới
     tiêu đề. Đổi padding của title thì đổi luôn số này. */
  .cal__dow{
    position:sticky;top:34px;z-index:3;
    background:#fff;padding-top:2px;padding-bottom:8px;
  }

  /* THANH CUỘN PHẢI NHÌN THẤY ĐƯỢC.
     Mặc định điện thoại dùng thanh cuộn NỔI: vô hình cho tới khi bắt đầu vuốt.
     Với một vùng cuộn LỒNG trong trang cũng cuộn thì khách không hề biết còn
     nội dung phía dưới — họ vuốt, trang cuộn, và kết luận là lịch bị hỏng.

     `overflow-y:scroll` (không phải `auto`) + `::-webkit-scrollbar` có bề rộng
     thật khiến trình duyệt vẽ thanh cuộn cổ điển CHIẾM CHỖ, luôn hiện. Tốn 8px
     bề ngang nhưng đổi lại khách nhìn là biết cuộn được. */
  .cal{
    overflow-y:scroll;
    scrollbar-width:thin;
    scrollbar-color:var(--text-3) var(--hover);
  }
  .cal::-webkit-scrollbar{width:8px;}
  .cal::-webkit-scrollbar-track{background:var(--hover);border-radius:4px;}
  .cal::-webkit-scrollbar-thumb{
    background:var(--text-3);border-radius:4px;
    border:2px solid var(--hover);
  }

  /* ⚠️ ĐỪNG chỉ trông vào thanh cuộn. Nhiều máy Android và mọi máy iOS dùng
     thanh cuộn NỔI — `::-webkit-scrollbar` không ép được, đo tại chỗ thấy nó
     chiếm 0px. Nên thêm một tín hiệu KHÔNG phụ thuộc nền tảng: bóng mờ ở mép
     trên/dưới, chỉ hiện khi còn nội dung ngoài tầm nhìn.

     Mẹo `background-attachment: local` + `scroll`: hai lớp trắng cuộn THEO nội
     dung nên che bóng khi đã ở đầu/cuối; hai lớp bóng đứng yên theo khung.
     Không cần JS, không cần thẻ bọc thêm. */
  .cal{
    background:
      linear-gradient(#fff 30%, rgba(255,255,255,0)) top    / 100% 26px no-repeat local,
      linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 26px no-repeat local,
      radial-gradient(farthest-side at 50% 0,
        rgba(0,0,0,.14), rgba(0,0,0,0)) top    / 100% 11px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%,
        rgba(0,0,0,.14), rgba(0,0,0,0)) bottom / 100% 11px no-repeat scroll;
  }
  .popover__foot{flex-direction:column;align-items:stretch;gap:4px;}
  .flexchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
  .flexchips::-webkit-scrollbar{display:none;}
}

/* nền mờ khi mở search */
.header__scrim{
  position:fixed;inset:0;top:0;
  background:rgba(0,0,0,.35);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s;
  z-index:-1;
}
.header__scrim.is-on{opacity:1;visibility:visible;}

/* ---- trạng thái thu gọn khi cuộn ---- */
.header.is-compact .header__bar{padding-bottom:0;}
.header.is-compact .searchwrap{
  opacity:0;visibility:hidden;
  transform:scale(.72) translateY(-32px);
  max-height:0;pointer-events:none;
}
.header.is-compact .tabs{opacity:0;visibility:hidden;transform:scale(.9);pointer-events:none;}
.header.is-compact .minisearch{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);}
@media (max-width:743px){
  .minisearch__item:not(:first-child),.minisearch__dot{display:none;}
}

/* =====================================================================
   NỘI DUNG — CÁC HÀNG CAROUSEL
   ===================================================================== */
main{padding:24px 40px 48px;}
@media (min-width:1440px){ main{padding-left:80px;padding-right:80px;} }
@media (max-width:743px){ main{padding-left:24px;padding-right:24px;} }

.row{margin-bottom:36px;}
.row__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:14px;
}
/* <h2> chỉ để đúng bậc tiêu đề; mọi kiểu chữ vẫn ở .row__title. */
.row__h{margin:0;font:inherit;min-width:0;}
.row__title{
  display:flex;align-items:center;gap:6px;
  font-size:22px;font-weight:600;letter-spacing:-.01em;
}
.row__title svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:3px;}
.row__title:hover{text-decoration:underline;}

.row__nav{display:flex;gap:8px;flex:none;}
.row__nav button{
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--text);
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.row__nav button:hover:not(:disabled){transform:scale(1.08);box-shadow:var(--shadow-sm);}
.row__nav button:disabled{opacity:.28;cursor:default;}
.row__nav svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:743px){ .row__nav{display:none;} }

.track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:4px;
  overscroll-behavior-x:contain;
}
.track::-webkit-scrollbar{display:none;}

@media (max-width:1600px){ :root{--cols:6;} }
@media (max-width:1400px){ :root{--cols:5;} }
@media (max-width:1128px){ :root{--cols:4;} }
@media (max-width:950px){  :root{--cols:3;} }
/* 2.2 chứ không phải 2: ở đúng 2, thẻ thứ ba nằm TRỌN sau khe hở (đo được
   mép trái của nó ở -12px) nên không có mẩu nào ló ra, và khách không biết
   hàng này vuốt được. Khổ này là điện thoại nằm ngang và tablet nhỏ — vẫn là
   màn hình chạm, vẫn cần gợi ý vuốt. */
@media (max-width:743px){  :root{--cols:2.2;--gap:12px;} }
/* Hai thẻ đầy + một mẩu thẻ thứ ba ló ra. Mẩu ló đó là thứ NÓI CHO KHÁCH
   BIẾT hàng này kéo ngang được — trước đây `1.6` làm thẻ thứ hai chiếm gần hết
   phần còn lại, trông như một thẻ bị cắt cụt chứ không như băng chuyền.

   ⚠️ 2.15 chứ không phải 2.1, và đây là chỗ dễ hiểu nhầm: công thức chia cả
   KHE HỞ vào phần lẻ. Đặt 2.1 thì mẩu ló chỉ còn 5px (3% bề rộng thẻ) — mắt
   thường không thấy. Đo được:

       cols 2.10 → thẻ 157px, ló  5px  (3%)
       cols 2.15 → thẻ 153px, ló 13px  (9%)   ← đúng "2,1 ô" như mắt nhìn
       cols 2.20 → thẻ 149px, ló 20px (13%)

   ⚠️ Đổi số này thì ĐO LẠI bề rộng thẻ. Dưới ~145px là dòng giá
   "2.900.000 ₫ cho 2 đêm" bị xuống hàng và thẻ cao thêm một dòng. */
@media (max-width:479px){  :root{--cols:2.15;} }

/* --- thẻ nơi lưu trú --- */
.card{scroll-snap-align:start;min-width:0;}
.card__link{display:block;color:inherit;}
.card__link:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:14px;}
.card__media{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--hover-2);
}
.card__img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
.card:hover .card__img{transform:scale(1.05);}

.badge{
  position:absolute;top:12px;left:12px;
  max-width:calc(100% - 60px);
  padding:6px 10px;border-radius:999px;
  background:#fff;color:var(--text);
  font-size:11px;font-weight:600;line-height:1.2;
  box-shadow:var(--shadow-md);
}

.heart{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;display:grid;place-items:center;
  transition:transform .15s ease;
}
.heart:hover{transform:scale(1.1);}
.heart svg{
  width:24px;height:24px;
  fill:rgba(0,0,0,.5);stroke:#fff;stroke-width:2;
  transition:fill .18s ease,stroke .18s ease;
}
.heart.is-on svg{fill:var(--brand);stroke:var(--brand);}

.card__body{padding:10px 2px 0;}
.card__title{
  font-size:15px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card__area{
  font-size:14px;color:var(--text-2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card__meta{
  display:flex;align-items:center;gap:5px;
  margin-top:3px;
  font-size:14px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;
}
.card__price{color:var(--text);}
.card__price b{font-weight:600;}
.card__sep{color:var(--text-2);}
.card__rating{display:inline-flex;align-items:center;gap:3px;color:var(--text-2);}
.card__rating svg{width:11px;height:11px;margin-top:-1px;}

/* =====================================================================
   KẾT QUẢ LỌC — hiện thay cho các hàng carousel khi có bộ lọc
   Lưới này dùng auto-fill chứ không dùng --cols: --cols có giá trị LẺ (2,15 ·
   2,2) để lộ mép thẻ kế tiếp trong carousel, còn lưới thì cần số cột nguyên.
   ===================================================================== */
.results__head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  margin-bottom:20px;
}
.results__title{font-size:22px;font-weight:600;letter-spacing:-.01em;}
.results__sub{font-size:14px;color:var(--text-2);margin-top:4px;}
.results__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:28px var(--gap);
}
.results__empty{
  padding:48px 0 64px;text-align:center;
}
.results__empty p{font-size:16px;color:var(--text-2);margin-top:8px;}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;
  border:1px solid var(--text);border-radius:999px;
  font-size:14px;font-weight:600;
  transition:background .15s ease,color .15s ease;
}
.btn-outline:hover{background:var(--text);color:#fff;}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{
  background:var(--hover);
  border-top:1px solid var(--line-2);
  padding:48px 0 32px;
  font-size:14px;
}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px 32px;
  padding-bottom:32px;
}
@media (max-width:743px){ .footer__cols{grid-template-columns:1fr;} }
.footer__col h3{font-size:14px;font-weight:600;margin-bottom:14px;}
.footer__col li{margin-bottom:12px;}
.footer__col a{color:var(--text-2);}
.footer__col a:hover{text-decoration:underline;color:var(--text);}

.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  border-top:1px solid var(--line);
  padding-top:24px;
  color:var(--text-2);
}
.footer__legal{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.footer__legal a:hover{text-decoration:underline;}
.footer__dot{width:2px;height:2px;border-radius:50%;background:currentColor;opacity:.6;}
.footer__meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-weight:600;color:var(--text);}
.footer__meta button{display:flex;align-items:center;gap:8px;}
.footer__meta button:hover{text-decoration:underline;}
.footer__meta svg{width:16px;height:16px;}
.footer__meta button[aria-label] svg{width:18px;height:18px;}

/* =====================================================================
   MOBILE + VÙNG CHẠM — gom cuối file vì đây là mối lo cắt ngang mọi khối,
   và vì các rule này phải thắng mọi rule đứng trước.
   ===================================================================== */

/* Khổ điện thoại: nới chỗ cho nhóm nút bên phải (nếu không .header__right
   sẽ tràn ra ngoài container), và không cho nút tìm kiếm bung chữ
   "Tìm kiếm" vì thanh 342px không đủ chứa. */
@media (max-width:743px){
  .tabs{gap:0;}
  .tab{padding-left:8px;padding-right:8px;}
  .searchbar.is-open .searchbtn{width:48px;}
  .searchbar.is-open .searchbtn__label{display:none;}
}

/* Ngưỡng chạm 44×44px theo Apple HIG.
   Hai điều kiện, chỉ cần thoả một:
   - ≤1024px: phủ trọn điện thoại và tablet (768 / 810 / 834 / 1024) bằng bề
     ngang, không phụ thuộc trình duyệt có khai báo kiểu con trỏ hay không.
   - any-pointer:coarse: phủ nốt tablet nằm ngang (1194/1366) và laptop cảm ứng.
     Dùng any-pointer chứ không phải pointer, vì iPad gắn bàn di sẽ báo
     pointer:fine trong khi người dùng vẫn chạm tay lên màn hình. */
@media (max-width:1024px),(any-pointer:coarse){
  .brand{min-height:44px;min-width:44px;}
  .tab{padding-top:11px;padding-bottom:13px;min-width:44px;justify-content:center;}
  .usermenu{height:44px;}

  /* hộp bấm to lên nhưng icon tim vẫn 24px, tâm icon không đổi chỗ */
  .heart{width:44px;height:44px;top:4px;right:4px;}

  /* <h2> chỉ để đúng bậc tiêu đề; mọi kiểu chữ vẫn ở .row__title. */
.row__h{margin:0;font:inherit;min-width:0;}
.row__title{min-height:44px;}

  .linkbtn{display:inline-flex;align-items:center;min-height:44px;}
  .chip{min-height:44px;}

  .icon-btn{width:44px;height:44px;}

  /* Giữ nguyên vòng tròn nhỏ theo thiết kế, chỉ nới vùng bấm bằng lớp phủ
     trong suốt. Pseudo-element position:absolute nằm ngoài luồng nên không
     làm xê dịch icon bên trong.
     .cal__nav vốn đã position:absolute nên tự làm containing block. */
  .row__nav{gap:16px;}
  .row__nav button{position:relative;}
  .row__nav button::after,
  .cal__nav::after{
    content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px;
  }

  .footer__col li{margin-bottom:0;}
  .footer__col a{display:flex;align-items:center;min-height:44px;}
  .footer__legal a{display:inline-flex;align-items:center;min-height:44px;}
  /* nút social chỉ có icon 18px — phải nới cả bề ngang.
     Gồm cả <a> vì trang album dùng link thay cho button ở chỗ này. */
  .footer__meta button,.footer__meta a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;
  }
}

/* =====================================================================
   BẢN ĐỒ — dùng ở CẢ khu khách lẫn khu quản trị, nên để ở đây chứ không
   ở chi-tiet.css. Đã có lần khối này chỉ nằm trong chi-tiet.css: trang quản trị
   không nạp file đó nên ghim bản đồ mất hết style, phình to bằng cả khung.
   ===================================================================== */
.mapbox{
  position:relative;border-radius:16px;overflow:hidden;
  aspect-ratio:16/7;background:#EAE6E1;
}
@media (max-width:743px){ .mapbox{aspect-ratio:4/3;} }

/* Bản vẽ tay nằm dưới cùng, làm nền chờ và làm phương án dự phòng khi
   iframe Google Maps không tải được (ngoại tuyến, bị chặn). */
.mapbox__svg{position:absolute;inset:0;width:100%;height:100%;display:block;}

.mapbox__frame{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;
}

/* Vùng gần đúng: vòng tròn phủ lên khu vực. Khách chưa đặt phòng thấy vòng
   tròn NÀY CỘNG một ghim nét đứt ở tâm — ghim trỏ vào giữa khu vực, không trỏ
   vào căn nhà. pointer-events:none để vẫn kéo/zoom được bản đồ bên dưới. */
.mapbox__vung{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(46%,240px);aspect-ratio:1;border-radius:50%;
  background:rgba(30,58,99,.18);border:2px solid var(--brand);
  pointer-events:none;
}
.mapbox__pin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;background:var(--brand);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  pointer-events:none;
}
.mapbox__pin svg{width:24px;height:24px;fill:#fff;}

/* Ghim GẦN ĐÚNG — khách chưa đặt phòng. Nét đứt và nhạt hơn ghim thật, để
   nhìn là biết đây chưa phải địa chỉ chính xác. Cùng một hình đặc như ghim
   sau khi xác nhận thì khách tưởng đó là số nhà và đi tới tận nơi. */
.mapbox__pin--gan{
  width:38px;height:38px;
  background:rgba(255,255,255,.94);
  border:2px dashed var(--brand);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.mapbox__pin--gan svg{width:19px;height:19px;fill:var(--brand);}
.mapbox__note{
  position:absolute;left:12px;bottom:12px;right:12px;
  background:rgba(255,255,255,.92);border-radius:8px;
  padding:6px 10px;font-size:12px;color:var(--text-2);
  pointer-events:none;
}

/* Ảnh bản đồ TĨNH cho khách Trung Quốc (Google Maps bị chặn ở đó) — dùng ở cả
   `.mapbox` (trang chỗ ở) lẫn `.bdo` (trang kết quả), nên nằm ở đây.
   ⚠️⚠️ CĂN TÂM, KHÔNG CO GIÃN. Ảnh vẽ đúng tâm khu vực ở z=14, 1 điểm CSS = 1
   điểm bản đồ — y như iframe Google. `object-fit:cover` hay `width:100%` là
   phóng/thu ảnh theo khung: tâm vẫn đúng nhưng tỉ lệ sai, và vòng tròn "vị trí
   gần đúng" 240px lúc đó phủ một vùng khác hẳn điều nó nói. Thẻ <img> mang sẵn
   width/height bằng cỡ ảnh; khung `overflow:hidden` cắt phần thừa. */
.bdtinh{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:none;max-height:none;display:block;
  pointer-events:none;user-select:none;
}
/* Ghi nguồn cho ảnh tĩnh — BẮT BUỘC theo ODbL; ảnh vẽ không kèm chữ nguồn. */
.bdnguon{
  position:absolute;top:8px;right:8px;margin:0;z-index:1;
  padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.88);
  font-size:11px;line-height:1.5;color:var(--text-2);
}
.bdnguon a{color:inherit;}

/* Hộp giải thích vì sao chưa thấy địa chỉ chính xác */
.diachi{
  display:flex;align-items:flex-start;gap:12px;
  border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-top:16px;
}
.diachi__ic{font-size:18px;flex:none;line-height:1.4;}
.diachi__ten{font-weight:600;}
.diachi__mo{color:var(--text-2);margin-top:2px;}
.diachi__link{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;text-decoration:underline;
}

/* =====================================================================
   TÀI KHOẢN KHÁCH — nút trên header và lớp phủ đăng nhập
   ===================================================================== */
.tknut{
  display:flex;align-items:center;gap:8px;
  min-height:44px;padding:0 8px 0 14px;
  border:1px solid var(--line);border-radius:999px;
  font-size:14px;font-weight:500;
  transition:box-shadow .2s ease;
}
.tknut:hover{box-shadow:var(--shadow-sm);}
.tknut__avatar{width:30px;height:30px;font-size:13px;}
.tknut__ten{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Khổ hẹp: bỏ tên, chỉ còn avatar. Nút có tên rộng 138px, mà header 390px chỉ
   còn ~120px cho cột phải — để nguyên là tràn ngang cả trang. */
@media (max-width:743px){
  .tknut{padding:0;width:44px;justify-content:center;}
  .tknut__ten{display:none;}
  /* Chưa đăng nhập thì không có avatar, phải có gì đó để bấm */
  .tknut:not(:has(.tknut__avatar))::after{
    content:"👤";font-size:18px;
  }
}

.tkbox{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:20px;}
.tkbox__box{
  width:min(440px,100%);max-height:88dvh;overflow-y:auto;
  background:#fff;border-radius:16px;padding:20px;
}
.tkbox__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.tkbox__h{font-size:20px;font-weight:600;}
.tkbox__mo{font-size:14px;color:var(--text-2);line-height:1.5;margin-bottom:16px;}
.tkbox__nut{width:100%;margin-top:8px;}

.tkncc{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:52px;margin-bottom:10px;
  border:1px solid var(--text);border-radius:10px;
  font-size:15px;font-weight:600;
  transition:background .15s ease;
}
.tkncc:hover{background:var(--hover);}
/* Ô chứa logo chính thức của Google/Facebook. Không tô nền, không bo tròn:
   logo của họ đã có màu và hình riêng, bọc thêm là sai nhận diện. */
.tkncc__ic{display:grid;place-items:center;flex:none;width:20px;height:20px;}
.tkncc__svg{width:100%;height:100%;display:block;}

/* Hộp nói rõ đây là bản mô phỏng. Đừng bỏ đi khi chưa nối được đăng nhập thật —
   để người dùng tưởng đã đăng nhập thật là chuyện khác hẳn. */
.tkbox__canh{
  border-radius:10px;padding:12px 14px;margin-top:8px;
  background:#FFF7E6;color:#7A5A16;
  font-size:13px;line-height:1.55;
}

.tkme{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.tkme__ten{display:block;font-size:17px;font-weight:600;}
.tkme__mail{display:block;font-size:14px;color:var(--text-2);word-break:break-all;}
.tkme__ncc{display:block;font-size:13px;color:var(--text-2);margin-top:4px;}

/* =====================================================================
   THÀNH PHẦN DÙNG CHUNG HAI KHU
   Trước đây nằm trong host.css, nhưng khu khách nay cũng có trang tin nhắn
   dùng đúng những class này. Style nào hai khu cùng dùng thì để ở đây —
   nhân đôi sang file riêng của từng khu là sớm muộn hai bên lệch nhau.
   ===================================================================== */

/* Chữ chỉ dành cho trình đọc màn hình — vẫn đọc được, không chiếm chỗ */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.hh2{font-size:22px;font-weight:600;letter-spacing:-.01em;}
@media (max-width:743px){ .hh2{font-size:19px;} }

.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);min-width:var(--tap);padding:0 18px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  font-size:14px;font-weight:500;
  transition:border-color .15s ease,background .15s ease;
}
.pill:hover{border-color:var(--text);}
.pill.is-on{background:var(--text);color:#fff;border-color:var(--text);}
.pills{display:flex;gap:8px;flex-wrap:wrap;}

.iconbtn{
  display:grid;place-items:center;
  width:var(--tap);height:var(--tap);border-radius:50%;
  border:1px solid var(--line);background:#fff;
  transition:border-color .15s ease;
}
.iconbtn:hover{border-color:var(--text);}
.iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.btn-dark{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:max(48px,var(--tap));padding:0 24px;border-radius:10px;
  background:var(--text);color:#fff;font-size:15px;font-weight:600;
}

/* min-height để chính ô nhập là vùng chạm — khung bao ngoài không focus hộ được */
.lsttim{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:999px;
  padding:0 16px;min-height:max(48px,var(--tap));margin-bottom:16px;max-width:420px;
}
.lsttim svg{width:15px;height:15px;flex:none;color:var(--text-2);}
.lsttim input{
  flex:1;min-width:0;min-height:var(--tap);
  border:0;background:none;font:inherit;font-size:16px;
}
.lsttim input:focus{outline:none;}

/* Khung 'chưa có gì' chiếm trọn trang chủ khi không còn chỗ ở nào đăng */
.emptybox--trang{margin:64px auto;max-width:520px;text-align:center;font-size:16px;}
.emptybox{
  text-align:center;padding:40px 16px;color:var(--text-2);font-size:15px;
}

/* Chữ cái đầu tên người, thay cho ảnh đại diện */
.avatar{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--text);color:#fff;font-weight:600;font-size:16px;
}
.avatar--lg{width:64px;height:64px;font-size:24px;}
/* Có ảnh đại diện thì ảnh phủ kín vòng tròn, thay cho chữ cái đầu.
   `overflow:hidden` ở trên là thứ cắt ảnh thành hình tròn. */
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* =====================================================================
   TIN NHẮN — bố cục 3 cột, dùng ở CẢ khu khách (tin-nhan.html) lẫn khu
   quản trị (host/tin-nhan.html). Phần vỏ riêng của mỗi khu để ở file khu
   đó; các thành phần bên trong dùng chung nên nằm ở đây.
   ===================================================================== */
.msg{
  position:relative;
  display:grid;
  grid-template-columns:360px minmax(0,1fr) 360px;
  flex:1;min-height:0;overflow:hidden;
}
@media (max-width:1280px){ .msg{grid-template-columns:320px minmax(0,1fr) 320px;} }
/* Không đủ chỗ cho 3 cột: cột lượt đặt thành lớp phủ, bật/tắt bằng nút › */
@media (max-width:1128px){ .msg{grid-template-columns:320px minmax(0,1fr);} }

.msg > *{min-height:0;}

/* --- cột 1: danh sách --- */
.msg__list{
  display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--line-2);
}
.msg__listhead{padding:16px 16px 8px;border-bottom:1px solid var(--line-2);}
.msg__listtop{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.msg__tools{display:flex;gap:8px;}
.msg__pills{margin-top:12px;}
/* Chip nhỏ lại cho gọn cột, nhưng CHỈ ở khổ dùng chuột — từ 1024px xuống là
   chế độ chạm, phải giữ đủ 44px. */
@media (min-width:1025px){
  .msg__pills .pill{min-height:36px;padding:0 14px;font-size:13px;}
}
.msg__threads{flex:1;min-height:0;overflow-y:auto;padding:8px;}

.thread{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:12px;padding:12px;border-radius:14px;
  color:inherit;text-align:left;width:100%;
  transition:background .15s ease;
}
.thread:hover{background:var(--hover);}
.thread.is-on{background:var(--hover-2);}
.thread__pics{position:relative;flex:none;width:48px;height:48px;}
.thread__pics img{
  position:absolute;right:0;bottom:0;
  width:34px;height:34px;border-radius:9px;object-fit:cover;
  border:2px solid #fff;background:var(--hover-2);
}
.thread__pics .avatar{position:absolute;left:0;top:0;width:34px;height:34px;font-size:14px;}
.thread__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.thread__name{
  font-size:15px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.thread__time{font-size:13px;color:var(--text-2);flex:none;}
/* một dòng thôi — hai dòng làm danh sách dài gấp rưỡi mà không thêm thông tin */
.thread__prev{
  font-size:14px;color:var(--text-2);margin:2px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.thread.is-unread .thread__prev{color:var(--text);font-weight:500;}
/* Trạng thái đặt là chấm màu chứ không phải chữ — cột chỉ rộng 320px, để cả
   "Đã xác nhận · 2 – 16 thg 9 · TD 6BR" là bị cắt. Chữ đầy đủ vẫn có cho trình
   đọc màn hình và hiện ở đầu cột 2. */
.thread__meta{
  font-size:12px;color:var(--text-2);
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.thread__dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-3);}
.thread__dot.is-ok{background:#00A650;}
.thread__dot.is-now{background:#0F7B6C;}
.thread__dot.is-req{background:#C7902F;}
.thread__dot.is-rev{background:#9A9A9A;}
.thread__badge{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none;}
.thread.is-unread .thread__name{font-weight:700;}

/* --- cột 2: cuộc trò chuyện --- */
.msg__pane{display:flex;flex-direction:column;min-width:0;min-height:0;}
.msg__panehead{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--line-2);
}
.msg__who .avatar{width:40px;height:40px;font-size:16px;}
.msg__whotext{min-width:0;flex:1;}
.msg__name{
  display:block;font-size:18px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msg__sub{
  display:block;font-size:13px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msg__open{flex:none;}
@media (min-width:1129px){ .msg__open{display:none;} }

.chat{flex:1;min-height:0;overflow-y:auto;padding:20px 24px;}
.chat__day,.chat__moc{text-align:center;font-size:13px;color:var(--text-2);}
.chat__day{margin:20px 0 10px;}
.chat__moc{margin:18px 0;padding-top:12px;border-top:1px solid var(--line-2);}

.bubble{max-width:min(560px,80%);margin:10px 0;}
.bubble__who{font-size:13px;color:var(--text-2);margin-bottom:4px;}
.bubble__body{
  border-radius:16px;padding:12px 16px;
  font-size:15px;line-height:1.5;white-space:pre-line;
  overflow-wrap:anywhere;
}
.bubble--khach .bubble__body{background:var(--hover-2);}
.bubble--toi{margin-left:auto;}
.bubble--toi .bubble__who{text-align:right;}
.bubble--toi .bubble__body{background:var(--text);color:#fff;}

.inqcard{
  max-width:320px;border:1px solid var(--line-2);border-radius:16px;
  padding:16px;margin:12px 0;box-shadow:var(--shadow-sm);
}
.inqcard__lead{font-size:14px;font-weight:600;}
.inqcard__price{font-size:20px;font-weight:600;margin:4px 0;}
.inqcard__meta{font-size:13px;color:var(--text-2);}
.inqcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin:12px 0;background:var(--hover-2);}
.inqcard__note{font-size:13px;color:var(--text-2);margin-bottom:12px;}
.btn-brand{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:var(--tap);border-radius:10px;
  background:var(--brand-grad);color:#fff;font-size:15px;font-weight:600;
}

.tepbox{
  display:flex;align-items:center;gap:12px;
  max-width:340px;border:1px dashed var(--line);border-radius:14px;
  padding:16px;background:var(--hover);
}
.tepbox__icon{font-size:22px;}
.tepbox__text{font-size:14px;color:var(--text-2);line-height:1.4;}

/* --- ô soạn tin --- */
.composer{
  flex:none;margin:0 24px 20px;
  border:1px solid var(--line);border-radius:16px;
  padding:12px 14px;background:#fff;
}
.composer:focus-within{border-color:var(--text);}
/* min-height 44px vì chính ô này là vùng chạm — khung .composer bao ngoài
   không có <label> nên không focus hộ được. JS sẽ nới thêm khi gõ nhiều dòng. */
.composer textarea{
  display:block;width:100%;border:0;resize:none;background:none;
  font:inherit;font-size:16px;line-height:1.5;
  min-height:var(--tap);max-height:120px;overflow-y:auto;
}
.composer textarea:focus{outline:none;}
.composer__row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.composer__acts{display:flex;gap:4px;}
.iconbtn--sm{width:var(--tap);height:var(--tap);border:0;}
.iconbtn--sm:hover{background:var(--hover);border:0;}
.composer__send{
  display:grid;place-items:center;flex:none;
  width:var(--tap);height:var(--tap);border-radius:50%;
  background:var(--hover-2);color:var(--text-2);
  transition:background .15s ease,color .15s ease;
}
.composer__send.is-on{background:var(--brand);color:#fff;}
.composer__send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* --- cột 3: lượt đặt --- */
.msg__dat{
  display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--line-2);background:#fff;
}
.msg__dathead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line-2);
}
.msg__datbody{flex:1;min-height:0;overflow-y:auto;padding:20px;}

/* --- thẻ lượt đặt (cột 3) ---
   Gom thành từng khối có viền thay vì rải chữ giữa nền trắng: ai · ở đâu ·
   ngày · tiền là một khối, lời nhắn là một khối, hành động là một khối. */
.datcard{
  border:1px solid var(--line-2);border-radius:16px;
  padding:16px;margin-bottom:12px;
}
.datcard__dau{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.datcard__ai{min-width:0;}
.datcard__ten{display:block;font-size:17px;font-weight:600;line-height:1.25;}
.datcard__nha{
  display:block;font-size:13px;color:var(--text-2);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.datcard__h{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:8px;}

.dattag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  font-size:13px;font-weight:600;
  background:var(--hover-2);color:var(--text-2);
}
.dattag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.dattag.is-ok{background:#DCF0E4;color:#0F5132;}
.dattag.is-now{background:#DCEFEC;color:#0F5B52;}
.dattag.is-req{background:#FBF0DA;color:#7A5A16;}
.dattag.is-rev{background:var(--hover-2);color:var(--text-2);}

.datdates{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  border:1px solid var(--line-2);border-radius:12px;
  padding:12px;margin-top:14px;
}
.datdates__h{font-size:13px;color:var(--text-2);}
.datdates__v{font-size:15px;font-weight:600;margin-top:2px;}
.datdates__g{font-size:13px;color:var(--text-2);}
.datdates__mui{color:var(--text-2);font-size:16px;}

.datso{margin-top:14px;}
.datso li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:14px;color:var(--text-2);
}
.datso li b{color:var(--text);font-weight:600;}
.datso .is-tong{
  border-top:1px solid var(--line-2);margin-top:6px;padding-top:12px;
  color:var(--text);font-weight:600;
}
.datso .is-tong b{font-size:17px;}

/* Khối hành động: nút chính nổi hẳn, câu giải thích ĐỨNG TRƯỚC nút chứ không
   kẹp giữa hai nút như bản đầu — đọc xong mới bấm. */
.datxn{
  border:1px solid var(--line);border-radius:16px;
  padding:16px;margin-bottom:12px;background:var(--hover);
}
.datxn--xong{background:#F2F9F4;border-color:#B7DDC3;}
.datxn--tuchoi{background:#FDF3F2;border-color:#F0C7C3;}
.datxn__nho{
  font-size:13px;color:var(--text-2);
  line-height:1.55;margin-bottom:12px;
}
.datxn__chinh{width:100%;}
.datxn__phu{width:100%;margin-top:8px;}
.datid{display:flex;justify-content:center;align-items:flex-start;gap:8px;margin-bottom:20px;}
.datid .avatar{width:96px;height:96px;font-size:36px;background:#CFE9D8;color:#0F5132;}
.datid__them{
  display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;
  background:var(--hover-2);font-size:13px;color:var(--text-2);
}
.dat__tt{font-size:24px;font-weight:600;text-align:center;letter-spacing:-.01em;}
.dat__ngay{font-size:15px;text-align:center;margin-top:8px;}
.dat__nha{font-size:15px;color:var(--text-2);text-align:center;margin-top:4px;}
.datbox{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  border:1px solid var(--line-2);border-radius:14px;
  padding:16px;margin-top:24px;
}
.datbox__h{font-size:14px;font-weight:600;}
.datbox__v{font-size:14px;color:var(--text-2);line-height:1.4;margin-top:4px;}
.datact{margin-top:20px;}
.datact .btn-outline{width:100%;}

/* Dưới 1129px: cột lượt đặt thành lớp phủ bên phải.
   Neo theo .msg (position:relative) chứ không theo viewport — khỏi phải biết
   header cao bao nhiêu. */
@media (max-width:1128px){
  .msg__dat{
    position:absolute;top:0;right:0;bottom:0;width:min(360px,100%);
    z-index:65;box-shadow:-2px 0 16px rgba(0,0,0,.14);
    transform:translateX(100%);transition:transform .2s ease;
  }
  .msg.is-dat .msg__dat{transform:none;}
}

/* Khổ hẹp: một cột — danh sách HOẶC cuộc trò chuyện */
.msg__back{display:none;}
@media (max-width:950px){
  /* chừa chỗ cho thanh nav dính đáy (cao 61px) */
  .msg{grid-template-columns:1fr;}
  .msg__list{border-right:0;}
  .msg__pane{display:none;}
  .msg.is-open .msg__list{display:none;}
  .msg.is-open .msg__pane{display:flex;}
  .msg__back{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;flex:none;}
  .msg__back:hover{background:var(--hover);}
  .msg__back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
  .msg__dat{width:100%;}
  .chat{padding:16px;}
  .composer{margin:0 16px 16px;}
}

/* Số nhỏ cạnh link "Đã lưu" trên header */
.ghost-link__so{
  display:inline-grid;place-items:center;
  min-width:20px;height:20px;padding:0 6px;margin-left:6px;
  border-radius:999px;background:var(--brand);color:#fff;
  font-size:12px;font-weight:700;
}

/* Trang "Nhà đã lưu" */
/* ⚠️ `padding-block`, ĐỪNG viết tắt `padding:32px 0 80px`. Class này nằm CÙNG
   phần tử với `.container` (`<main class="container ytrang">`), nên dạng viết
   tắt ghi đè luôn `padding-inline:40px` của container về 0 — đo được: cả tiêu
   đề lẫn lưới thẻ dính sát mép trái màn hình ở mọi khổ. */
.ytrang{padding-block:32px 80px;max-width:1180px;}
.ytrang__h{font-size:32px;font-weight:600;letter-spacing:-.02em;}
@media (max-width:743px){ .ytrang__h{font-size:24px;} }
.ytrang__sub{font-size:15px;color:var(--text-2);margin:6px 0 24px;}
.ytrong__h{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px;}
.emptybox .btn-dark{margin-top:16px;text-decoration:none;}

/* =====================================================================
   TRANG YÊU THÍCH — lưới bộ sưu tập
   ===================================================================== */
.ytrang__dau{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:28px;
}
.ytrang__nut{display:flex;gap:8px;flex-wrap:wrap;}
.ytback{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;font-weight:600;text-decoration:underline;
}

.ybolist{
  display:grid;gap:28px 24px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
.ybo{display:block;color:inherit;min-width:0;}

/* Ô ghép 4 ảnh. Thiếu ảnh thì để ô trống chứ KHÔNG kéo giãn ảnh còn lại —
   giãn ra là méo hình.

   ⚠️ Khe giữa 4 ô là 2px và cùng màu nền ô trống, nên một bộ có 1–3 ảnh nhìn
   như ảnh vỡ. Nay ô trống nhạt hơn hẳn ảnh và khe rộng 3px: nó đọc ra là "chỗ
   còn trống", không phải "ảnh hỏng". */
.ybo__anh{
  display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:var(--hover-2);box-shadow:var(--shadow-sm);
  transition:box-shadow .18s ease,transform .18s ease;
}
.ybo:hover .ybo__anh{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.ybo__ghep{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:3px;width:100%;height:100%;background:var(--line);
}
.ybo__ghep img{width:100%;height:100%;object-fit:cover;display:block;}
.ybo__ghep span{background:var(--hover);}
/* Một ảnh duy nhất thì trải kín ô thay vì nằm lọt thỏm một góc. */
.ybo__ghep--1{grid-template-columns:1fr;grid-template-rows:1fr;gap:0;}

/* Bộ rỗng: trái tim viền trắng trên nền xám, giống ô chưa có ảnh nào */
.ybo__trong{
  display:grid;place-items:center;width:100%;height:100%;background:#B0B0B0;
}
.ybo__trong svg{
  width:38%;height:38%;fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linejoin:round;
}
.ybo__ten{
  display:block;margin-top:14px;font-size:16px;font-weight:600;
  line-height:1.35;overflow-wrap:anywhere;
}
.ybo__so{display:block;font-size:14px;color:var(--text-2);margin-top:2px;}
/* =====================================================================
   TRANG CHUYẾN ĐI

   ⚠️ Tiền tố `.cd` là của TRANG NÀY. Trang cài đặt tài khoản dùng `.cdtk` —
   xem chú thích ở khối đó; hai bên từng trùng tên và trang này thua vì khối
   kia nằm sau trong cùng file.
   ===================================================================== */
.cdnhom{margin-bottom:40px;}
.cdnhom__h{
  display:flex;align-items:center;gap:10px;
  font-size:19px;font-weight:600;letter-spacing:-.01em;
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.cdnhom__so{
  display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;
  border-radius:999px;background:var(--hover-2);color:var(--text-2);
  font-size:12px;font-weight:700;
}

/* Thẻ một chuyến: ảnh · nội dung · nút. Cột nút có bề rộng CỐ ĐỊNH để mọi thẻ
   thẳng hàng nhau — `auto` thì thẻ có nút "Viết đánh giá" rộng hơn thẻ bên
   cạnh và cả cột chữ so le. */
.cd{
  display:grid;grid-template-columns:168px minmax(0,1fr) 190px;
  align-items:center;gap:20px;
  border:1px solid var(--line-2);border-radius:16px;
  padding:16px;margin-bottom:14px;background:#fff;
  transition:box-shadow .18s ease,border-color .18s ease;
}
.cd:hover{box-shadow:var(--shadow-lg);border-color:var(--line);}
.cd__anh{
  display:block;border-radius:12px;overflow:hidden;background:var(--hover-2);
  align-self:stretch;
}
.cd__anh img{width:100%;height:100%;min-height:124px;object-fit:cover;display:block;}
.cd__than{min-width:0;display:flex;flex-direction:column;gap:2px;}
.cd__tt{
  display:inline-flex;align-items:center;align-self:flex-start;
  border-radius:999px;padding:4px 11px;margin-bottom:6px;
  background:var(--hover-2);color:var(--text-2);
  font-size:12px;font-weight:700;letter-spacing:.01em;
}
.cd--ok{background:#DDF3EE;color:#0F7B6C;}
.cd--cho{background:#FFF3D6;color:#8A5B00;}
.cd--huy{background:#FCE8E6;color:#C13515;}
.cd__ten{font-size:17px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;}
.cd__noi{font-size:14px;color:var(--text-2);}
.cd__ngay{font-size:14px;margin-top:8px;}
.cd__gia{font-size:15px;font-weight:700;margin-top:2px;}

/* Mã lượt đặt: khách đọc nó cho chủ nhà, nên font đều nét và giãn ký tự. */
.cd__ma{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12px;color:var(--text-2);
}
.cd__ma b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--text);
}

.cd__nut{display:flex;flex-direction:column;gap:8px;}
.cd__nut .btn-outline,.cd__nut .btn-dark{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap,44px);padding:0 16px;text-decoration:none;white-space:nowrap;
}
.cd__xong{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--tap,44px);
  font-size:13px;color:#0F7B6C;font-weight:600;text-align:center;
}

/* Tablet: bỏ cột nút xuống hàng dưới. Giữ 3 cột tới tận 743px thì cột chữ chỉ
   còn hơn trăm px và tiêu đề vỡ ra từng chữ một. */
@media (max-width:900px){
  .cd{grid-template-columns:140px minmax(0,1fr);}
  .cd__nut{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;}
  .cd__nut .btn-outline,.cd__nut .btn-dark,.cd__xong{flex:1;min-width:150px;}
}
/* Điện thoại: ảnh chiếm trọn bề ngang. Ảnh 96px cạnh ba dòng chữ thì vừa
   không nhìn ra chỗ ở, vừa bóp cột chữ. */
@media (max-width:560px){
  .cd{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px;}
  .cd__anh img{aspect-ratio:16/10;height:auto;}
  .cd__nut .btn-outline,.cd__nut .btn-dark,.cd__xong{min-width:0;}
}
/* =====================================================================
   MENU TÀI KHOẢN (khu khách) — thả xuống từ nút ba gạch + ảnh đại diện

   Mọi lối đi của khách nằm ở đây thay vì rải thành link trên thanh header:
   bốn link Yêu thích/Chuyến đi/Tin nhắn/Hồ sơ từng đẩy `.header__right` rộng
   738px và tràn ra ngoài màn 1440.
   ===================================================================== */
.umwrap{position:relative;display:inline-block;}

.umenu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:80;
  width:min(320px,calc(100vw - 32px));
  background:#fff;border-radius:14px;
  box-shadow:var(--shadow-pop);
  padding:8px 0;
  max-height:min(80vh,560px);overflow-y:auto;
}
.umenu__muc{
  display:flex;align-items:center;gap:14px;width:100%;
  min-height:var(--tap);padding:0 20px;
  font-size:15px;text-align:left;color:inherit;
  transition:background .12s ease;
}
.umenu__muc:hover{background:var(--hover);}
.umenu__muc--manh{font-weight:600;}
.umenu__ic{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.umenu__vach{display:block;height:1px;background:var(--line-2);margin:8px 0;}
.umenu__cham{
  width:8px;height:8px;border-radius:50%;background:var(--brand);
  margin-left:auto;flex:none;
}
.umenu__toi{display:flex;align-items:center;gap:12px;padding:10px 20px 14px;}
.umenu__ten{font-size:15px;}
.umenu__mail{font-size:13px;color:var(--text-2);overflow-wrap:anywhere;}

/* Chữ cái đầu trong nút header — `.usermenu__avatar` vốn để chứa <svg> nên
   không có canh giữa cho chữ. */
.umavatar{
  display:grid;place-items:center;width:100%;height:100%;
  background:var(--text);color:#fff;font-size:13px;font-weight:600;
}

/* =====================================================================
   BỘ CHỌN THÁNG / NĂM của lịch — do taoLich() vẽ vào `cfg.elChon`.

   Nằm NGOÀI `.cal` vì `.cal` là một hàng flex chứa các tháng; nhét thêm khối
   vào trong đó là vỡ bố cục.
   ===================================================================== */
.calchon{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.calchon__o{display:block;}
.calchon__sl{
  appearance:none;
  min-height:var(--tap);padding:0 34px 0 14px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font:inherit;font-size:15px;font-weight:600;color:var(--text);
  cursor:pointer;
  /* Mũi tên vẽ bằng nền, không dùng ảnh ngoài — dự án không thêm file phụ thuộc */
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),
                   linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.calchon__sl:hover{border-color:var(--text);}
.calchon__sl:focus-visible{outline:2px solid var(--text);outline-offset:2px;}

/* =====================================================================
   KHUNG NGÔN NGỮ VÀ TIỀN TỆ (khu khách)
   ===================================================================== */
.qtbox{position:fixed;inset:0;z-index:96;background:rgba(0,0,0,.4);display:flex;}
.qtbox__box{
  margin:auto;display:flex;flex-direction:column;
  width:min(1100px,calc(100vw - 32px));max-height:min(90vh,820px);
  background:#fff;border-radius:20px;box-shadow:var(--shadow-pop);
}
.qtbox__top{padding:12px 20px 0;border-bottom:1px solid var(--line-2);}
.qttab{display:flex;gap:24px;margin-top:6px;}
.qttab__b{
  padding:10px 0 12px;min-height:var(--tap);
  font-size:15px;color:var(--text-2);
  border-bottom:2px solid transparent;
}
.qttab__b.is-on{color:var(--text);font-weight:600;border-bottom-color:var(--text);}
/* min-height:0 để phần danh sách cuộn được — thiếu nó thì hộp phình quá màn hình */
.qtbox__than{flex:1;min-height:0;overflow-y:auto;padding:20px;}

.qt__h{font-size:20px;font-weight:600;margin:8px 0 6px;}
.qt__mo{display:block;font-size:14px;color:var(--text-2);line-height:1.5;}
.qt__nut{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 20px;}
.qt__bao{font-size:14px;color:var(--text-2);}
.qt__luuy{
  background:#FFF3D6;border-radius:12px;padding:12px 14px;margin:14px 0 4px;
  font-size:14px;line-height:1.5;
}
.qtdich{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--hover);border-radius:14px;padding:16px;
}

.qtlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:14px;}
.qtmuc{
  display:block;text-align:left;
  border:1px solid transparent;border-radius:12px;padding:12px 14px;
  min-height:var(--tap);
  transition:background .12s ease,border-color .12s ease;
}
.qtmuc:hover{background:var(--hover);}
.qtmuc.is-on{border-color:var(--text);}
.qtmuc__ten{display:block;font-size:15px;}
.qtmuc__phu{display:block;font-size:14px;color:var(--text-2);margin-top:2px;}

/* Dòng phụ trong menu tài khoản (ngôn ngữ · tiền tệ đang dùng) */
.umenu__phu{margin-left:auto;font-size:13px;color:var(--text-2);text-align:right;}

@media (max-width:743px){
  .qtbox__box{width:100%;max-width:none;height:100dvh;max-height:none;border-radius:0;margin:0;}
  .qtbox__top{padding:8px 16px 0;}
  .qttab{gap:16px;}
  .qtbox__than{padding:16px;}
  .qtlist{grid-template-columns:1fr;}
}

/* Công tắc bật/tắt dịch tự động trong khung ngôn ngữ */
.qtcong{position:relative;display:inline-block;flex:none;cursor:pointer;}
.qtcong input{position:absolute;opacity:0;width:1px;height:1px;}
.qtcong__o{
  display:block;width:52px;height:32px;border-radius:999px;
  background:var(--line);transition:background .15s ease;
}
.qtcong__o::after{
  content:"";position:absolute;top:3px;left:3px;
  width:26px;height:26px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s ease;
}
.qtcong input:checked + .qtcong__o{background:var(--text);}
.qtcong input:checked + .qtcong__o::after{transform:translateX(20px);}
.qtcong input:focus-visible + .qtcong__o{outline:2px solid var(--text);outline-offset:2px;}
.qtdich{justify-content:space-between;}

/* Chữ do máy dịch — gạch chân chấm để phân biệt với bản chủ nhà tự viết */
.is-dichmay{text-decoration:underline dotted var(--line);text-underline-offset:3px;}

/* =====================================================================
   KHUNG CHIA SẺ (js/chia-se.js)

   Để ở styles.css vì dùng chung khu khách, không riêng trang chi tiết.
   Đã hai lần phải dựng lại vì chép nhầm sang file riêng của một trang.
   ===================================================================== */
.csbox{
  position:fixed;inset:0;z-index:97;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.csbox__box{
  position:relative;background:#fff;border-radius:16px;
  width:100%;max-width:520px;max-height:calc(100dvh - 40px);
  overflow-y:auto;padding:24px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.csbox__dong{position:absolute;top:14px;right:14px;}
.csbox__h{
  font-size:22px;font-weight:700;letter-spacing:-.02em;
  margin:4px 40px 20px 0;line-height:1.25;
}

/* Ảnh + tóm tắt chỗ ở */
.cshead{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.cshead__anh{
  width:64px;height:64px;flex:none;object-fit:cover;border-radius:10px;background:var(--hover);
}
.cshead__chu{margin:0;font-size:15px;line-height:1.45;color:var(--text);}

/* Cảnh báo địa chỉ nội bộ — người nhận không mở được */
.csluu{
  margin:0 0 18px;padding:12px 14px;border-radius:10px;
  background:var(--hover);border:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--text-2);
}

/* Lưới 2 cột. Mục lẻ cuối cùng nằm một mình bên trái — đúng như bản mẫu. */
.csluoi{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.csm{
  display:flex;align-items:center;gap:14px;
  min-height:var(--tap,56px);padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;
  background:#fff;color:inherit;font:inherit;font-size:15px;font-weight:500;
  cursor:pointer;text-align:left;
}
.csm:hover{background:var(--hover);border-color:var(--text);}
.csm:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.csm__ico{width:22px;height:22px;flex:none;}
.csm__ten{min-width:0;}

/* Màu thương hiệu. Bắt theo `data-lam` mà JS đã phát ra — không cần thêm class
   nào bên JS, và thêm dịch vụ mới thì chỉ viết một dòng ở đây.
   Nhãn chữ vẫn giữ --text: tô cả chữ theo màu thương hiệu là chỗ nào cũng có
   một màu, đọc mệt và mất tương phản. */
.csm[data-lam="email"]     .csm__ico{color:var(--mau-email);}
.csm[data-lam="sms"]       .csm__ico{color:var(--mau-sms);}
.csm[data-lam="whatsapp"]  .csm__ico{color:var(--mau-whatsapp);}
.csm[data-lam="messenger"] .csm__ico{color:var(--mau-messenger);}
.csm[data-lam="facebook"]  .csm__ico{color:var(--mau-facebook);}
.csm[data-lam="x"]         .csm__ico{color:var(--mau-x);}

/* Chấm màu cho hàng dịch vụ phụ (chỉ có chữ, không có logo) */
.csm--nho::before{
  content:"";width:10px;height:10px;flex:none;border-radius:50%;
  background:var(--text-3);
}
.csm[data-lam="zalo"]::before     {background:var(--mau-zalo);}
.csm[data-lam="telegram"]::before {background:var(--mau-telegram);}
.csm[data-lam="linkedin"]::before {background:var(--mau-linkedin);}
.csm[data-lam="pinterest"]::before{background:var(--mau-pinterest);}

/* Ô mã nhúng */
.csnhung{margin-top:18px;}
.csnhung__lab{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.csnhung__ma{
  width:100%;font:inherit;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  line-height:1.5;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--hover);color:inherit;resize:vertical;
}
.csnhung__nut{margin-top:10px;}

.csbao{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--text-2);min-height:1.2em;}

/* Hàng dịch vụ phụ, hiện khi bấm "Tùy chọn khác".
   ⚠️ Phải khai TRƯỚC khối @media dưới đây: hai selector `.csthem` cùng độ ưu
   tiên nên cái viết SAU thắng — để dưới là bản 2 cột đè mất bản 1 cột ở khổ hẹp. */
.csthem{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
}
.csm--nho{min-height:var(--tap,48px);padding:12px 16px;font-size:14px;}

@media (max-width:743px){
  .csbox{padding:0;align-items:flex-end;}
  .csbox__box{
    max-width:none;border-radius:16px 16px 0 0;
    max-height:92dvh;padding:20px 18px 28px;
  }
  .csbox__h{font-size:20px;}
  /* Một cột: hai cột ở 390px làm chữ "Sao chép liên kết" phải xuống dòng */
  .csluoi{grid-template-columns:1fr;}
  .csthem{grid-template-columns:1fr;}
}

/* =====================================================================
   NÚT CHÍNH — dùng chung.

   ⚠️ Trước đây khối này nằm trong `css/chi-tiet.css`. Trang đăng nhập quản trị
   chỉ nạp `styles.css` + `host.css` nên nút "Vào khu quản trị" hiện ra thành
   CHỮ TRƠN, không nền không viền — người dùng không nhận ra đó là nút bấm.
   Lần thứ ba trong dự án này vấp cùng một lỗi: để style dùng chung vào file
   riêng của một trang. Trước khi dùng một class ở khu khác, kiểm xem CSS của nó
   có được nạp tới không.
   ===================================================================== */
.btn-primary{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:48px;margin-top:16px;
  border-radius:10px;background:var(--brand-grad);color:#fff;
  font-size:16px;font-weight:600;
  border:0;font-family:inherit;cursor:pointer;
  transition:filter .15s ease;
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary:disabled{opacity:.6;cursor:default;filter:none;}
.btn-primary--sm{width:auto;min-height:44px;padding:0 20px;margin:0;font-size:14px;}

/* =====================================================================
   KHUNG LIÊN HỆ CHỦ NHÀ (js/lien-he.js) — thay cho chat trực tuyến
   ===================================================================== */
.lhbox{
  position:fixed;inset:0;z-index:97;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.lhbox__box{
  position:relative;background:#fff;border-radius:16px;
  width:100%;max-width:560px;max-height:calc(100dvh - 40px);
  overflow-y:auto;padding:24px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.lhbox__dong{position:absolute;top:14px;right:14px;}
.lhbox__h{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:4px 44px 6px 0;}
.lhbox__mo{font-size:14px;color:var(--text-2);line-height:1.5;margin:0 0 18px;}
.lhbox__nhan{font-size:13px;font-weight:600;color:var(--text-2);margin:0 0 10px;}

/* Tóm tắt lượt đặt — chỉ hiện khi khung mở từ nút "Nhắn tin với host" */
.lhdat{
  border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin:0 0 18px;background:var(--hover);
}
.lhdat__ngay{font-size:15px;font-weight:600;margin:0;}
.lhdat__meta{font-size:13px;color:var(--text-2);margin:2px 0 0;}

/* Nút kênh — mỗi kênh một màu thương hiệu, giống khung Chia sẻ */
.lhluoi{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lhnut{
  display:flex;align-items:center;gap:12px;
  min-height:var(--tap);padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;
  background:#fff;color:inherit;font:inherit;font-size:14px;
  text-align:left;cursor:pointer;text-decoration:none;
}
.lhnut:hover{background:var(--hover);border-color:var(--text);}
.lhnut:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.lhnut b{display:block;font-weight:600;}
.lhnut__ico{width:24px;height:24px;flex:none;}
.lhnut__gt{display:block;font-size:12px;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lhnut span{min-width:0;}

.lhnut--goi       .lhnut__ico{color:var(--text);}
.lhnut--zalo      .lhnut__ico{color:var(--mau-zalo);}
.lhnut--whatsapp  .lhnut__ico{color:var(--mau-whatsapp);}
.lhnut--facebook  .lhnut__ico{color:var(--mau-facebook);}
.lhnut--instagram .lhnut__ico{color:var(--mau-instagram,#E4405F);}
.lhnut--wechat    .lhnut__ico{color:var(--mau-wechat,#07C160);}

/* Vạch ngăn "hoặc để lại thông tin" */
.lhbox__hoac{
  display:flex;align-items:center;gap:12px;
  margin:22px 0 16px;font-size:13px;color:var(--text-2);
}
.lhbox__hoac::before,.lhbox__hoac::after{
  content:"";flex:1;height:1px;background:var(--line);
}

/* Mã QR WeChat trong khung liên hệ. Người Trung Quốc quét mã chứ không gõ ID.
   ⚠️ Cỡ CỐ ĐỊNH 150px và nền trắng có đệm: mã QR co nhỏ theo khung hẹp là điện
   thoại quét mãi không ra, mà khách không hiểu vì sao. */
.lhqr{
  margin:16px 0 0;display:flex;align-items:center;gap:14px;
  padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.lhqr__anh{width:150px;height:150px;flex:none;display:block;border-radius:8px;object-fit:contain;background:#fff;}
.lhqr__chu{font-size:13px;color:var(--text-2);display:flex;flex-direction:column;gap:2px;}
.lhqr__chu span{color:var(--text);font-weight:600;}
@media (max-width:479px){
  .lhqr{flex-direction:column;text-align:center;gap:8px;}
}

.lhform{display:flex;flex-direction:column;}
.lhform__lab{font-size:13px;font-weight:600;margin-bottom:6px;}
.lhform__ip{
  font:inherit;font-size:16px;   /* 16px: iOS không tự phóng khi chạm vào ô */
  padding:0 14px;height:var(--tap);width:100%;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  color:inherit;margin-bottom:14px;
}
.lhform__oto{height:auto;padding:12px 14px;resize:vertical;line-height:1.5;}
.lhform__ip:focus{outline:2px solid var(--text);outline-offset:-1px;border-color:transparent;}
.lhform__doi{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
/* Dòng thay ba ô nhập khi khách ĐÃ đăng nhập: "Gửi với tên Bùi Vĩ · vi@…".
   Chữ liên hệ xuống dòng riêng — nối đuôi tên thì email dài tràn ngang ở 390px. */
.lhform__toi{font-size:15px;color:var(--text);margin:0 0 14px;}
.lhform__toi-lh{display:block;font-size:14px;color:var(--text-2);margin-top:2px;
  overflow-wrap:anywhere;}
/* Ô số điện thoại = [mã quốc gia][số]. Mã co lại vừa nội dung, số ăn hết
   phần còn lại — cột này đã hẹp sẵn vì nằm cạnh ô Email. */
.lhsdt{display:flex;gap:6px;}
.lhsdt__ma{flex:0 0 auto;width:auto;min-width:96px;padding-right:6px;}
.lhsdt__so{flex:1 1 auto;min-width:0;}
@media (max-width:520px){
  /* Dưới 520px hai cột SĐT/Email đã xếp chồng, mã vùng vẫn đứng cạnh số */
  .lhsdt__ma{min-width:88px;}
}
.lhform__goi{font-size:12px;color:var(--text-2);margin:-8px 0 14px;}
.lhform__loi{font-size:14px;color:var(--text-2);margin:0 0 12px;line-height:1.4;}
.lhform__loi.is-xau{color:#C13515;}

.lhbox__bao{margin:12px 0 0;font-size:14px;color:var(--text-2);min-height:1.2em;}
.lhxong{font-size:16px;font-weight:600;margin:0 0 6px;}
.lhxong__mo{font-size:14px;color:var(--text-2);line-height:1.5;margin:0;}

@media (max-width:743px){
  .lhbox{padding:0;align-items:flex-end;}
  .lhbox__box{max-width:none;border-radius:16px 16px 0 0;max-height:92dvh;padding:20px 18px 28px;}
  .lhbox__h{font-size:20px;}
  .lhluoi{grid-template-columns:1fr;}
  .lhform__doi{grid-template-columns:1fr;}
}

/* =====================================================================
   BĂNG MỜI CÀI APP (js/pwa.js)
   ===================================================================== */
.pwabang{
  position:fixed;left:12px;right:12px;z-index:98;
  /* `env(safe-area-inset-bottom)` để không nằm dưới thanh vuốt của iPhone */
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:12px;
  padding:12px 12px 12px 16px;border-radius:14px;
  background:var(--text);color:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.3);
  font-size:14px;line-height:1.45;
  animation:pwaLen .22s ease-out;
}
@keyframes pwaLen{from{transform:translateY(120%)}to{transform:none}}

.pwabang__chu{flex:1;min-width:0;}
.pwabang__nut{
  flex:none;font:inherit;font-weight:600;cursor:pointer;
  padding:0 16px;min-height:var(--tap);border:0;border-radius:10px;
  background:#fff;color:var(--text);
}
.pwabang__dong{
  flex:none;width:var(--tap);min-height:var(--tap);
  display:grid;place-items:center;
  background:none;border:0;color:#fff;cursor:pointer;border-radius:10px;
}
.pwabang__dong svg{width:18px;height:18px;}
.pwabang__dong:hover{background:rgba(255,255,255,.16);}

/* Chạy dạng app rồi thì đừng mời cài nữa — băng này chỉ có nghĩa trên trình duyệt */
@media (display-mode: standalone){ .pwabang{display:none;} }

@media (min-width:744px){
  .pwabang{left:auto;right:24px;bottom:24px;max-width:420px;}
}

/* =====================================================================
   KHỐI DỰNG SẴN Ở MÁY CHỦ (trang.php → #seoTruoc)

   Danh sách chỗ ở dạng văn bản, có mặt trong HTML trước khi JS chạy — để
   Bing, Cốc Cốc và bot đọc thẻ Open Graph của Zalo/Facebook (những thứ KHÔNG
   chạy JS) vẫn thấy nội dung.

   ⚠️ KHÔNG ẩn khối này. Nó hiện thật trong khoảnh khắc trước khi `app.js` vẽ
   xong lưới thẻ, rồi biến mất vì `$('#main').innerHTML` ghi đè cả `#main`.
   Cho bot đọc một đằng còn người dùng thấy một nẻo là "cloaking" — Google
   phạt cả tên miền, không riêng trang đó.
   ===================================================================== */
.seotruoc{padding:24px 0 8px;}
.seotruoc__h1{font-size:26px;line-height:1.25;margin:0 0 8px;}
.seotruoc__mo{color:var(--text-2);margin:0 0 16px;}
.seotruoc__ds{list-style:none;padding:0;margin:0 0 16px;
  display:grid;gap:6px 24px;grid-template-columns:1fr;}
.seotruoc__ds li{font-size:14px;color:var(--text-2);}
.seotruoc__ds a{color:var(--text);font-weight:600;}
.seotruoc__kv{font-size:14px;color:var(--text-2);}
.seotruoc__kv a{color:var(--text);}
@media (min-width:744px){ .seotruoc__ds{grid-template-columns:1fr 1fr;} }
@media (min-width:1128px){ .seotruoc__ds{grid-template-columns:1fr 1fr 1fr;} }

/* =====================================================================
   ICON TIỆN NGHI — dùng chung khu khách và khu quản trị
   (js/icon-tien-nghi.js). Để ở đây, KHÔNG ở chi-tiet.css hay host.css:
   cả hai khu đều vẽ danh sách tiện nghi.
   ===================================================================== */
.tnico{width:24px;height:24px;flex:none;display:block;
  color:currentColor;stroke:currentColor;fill:none;}

/* =====================================================================
   GIỮ KHỐI NÀY Ở CUỐI FILE.

   Nó dùng `!important` nên thắng dù đứng ở đâu, nhưng thêm style mới xuống
   DƯỚI nó thì lần sau ai đó viết một quy tắc không `!important` sẽ bị nó che
   mà không hiểu vì sao. Có gì thêm thì chèn TRƯỚC khối này.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* Thẻ chỗ ở hiện trên bản đồ khi bấm một viên giá ---------------------- */
/* Khung hẹp: thẻ neo vào đáy bản đồ, rộng gần hết khung — xem bdMoThe(). */
.bdo__the--duoi{left:8px;right:8px;bottom:8px;top:auto;width:auto;}
.bdo__the--duoi .card__media{aspect-ratio:16/7;}
.bdo__the{
  position:absolute;z-index:6;
  background:#fff;border-radius:14px;padding:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
/* Thẻ dùng lại `theNhaHTML()` nên phải gỡ phần lưới/độ rộng của thẻ trong danh sách. */
.bdo__the .card{width:100%;}
.bdo__the .card__media{aspect-ratio:16/10;}
.bdo__the-dong{
  position:absolute;top:14px;right:14px;z-index:2;
  width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--text);
  font-size:18px;line-height:1;cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
/* Popup của MapLibre: bỏ đuôi nhọn và nền mặc định, để thẻ tự nói. */
.bdo .maplibregl-popup-content{padding:8px;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.28);}
.bdo .maplibregl-popup-tip{display:none;}
/* Viên giá của thẻ đang rê chuột — nổi hẳn lên, không chỉ đổi màu nhạt. */
.bdo__gia.is-noi{background:var(--text);color:#fff;border-color:var(--text);
  transform:translate(-50%,-100%) scale(1.12);z-index:5;}
.bdo .maplibregl-marker .bdo__gia.is-noi{transform:scale(1.12);}

/* Ô báo lỗi của khung soạn tin. Gửi hỏng phải nói ra — nuốt lỗi là khách mất
   nguyên đoạn vừa gõ mà tưởng đã gửi xong. */
.composer__loi{margin:0 16px 8px;font-size:13px;color:#C13515;}
.composer__loi[hidden]{display:none;}

/* Trang văn bản dài: chính sách, điều khoản ---------------------------- */
.vanban{max-width:760px;margin:0 auto;padding:40px 0 72px;line-height:1.7;}
.vanban h1{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px;}
.vanban h2{font-size:20px;font-weight:600;margin:34px 0 10px;}
.vanban h3{font-size:16px;font-weight:600;margin:20px 0 6px;}
.vanban p{margin:10px 0;}
.vanban ul{margin:10px 0 10px 22px;list-style:disc;}
.vanban li{margin:6px 0;}
.vanban a{text-decoration:underline;}
.vanban__ngay{color:var(--text-2);font-size:14px;margin-bottom:24px;}
.vanban__ve{margin:24px 0;font-size:15px;}
.vanban__lienhe{font-size:17px;font-weight:600;}
/* Ô nhắc: đây không phải tư vấn pháp lý. Đừng bỏ đi — người đọc cần biết. */
.vanban__nhac{margin-top:32px;padding:14px 16px;border-radius:10px;
  background:var(--hover);color:var(--text-2);font-size:14px;}
.vanban__bang{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px;
  display:block;overflow-x:auto;}
.vanban__bang th,.vanban__bang td{border:1px solid var(--line);padding:8px 10px;text-align:left;}
.vanban__bang th{background:var(--hover);font-weight:600;}
@media (max-width:743px){ .vanban h1{font-size:24px;} .vanban{padding:24px 0 56px;} }

/* Số tiền cần trả trong khung lượt đặt (js/tin-nhan.js → khoiGia) ------- */
.datgia{margin-top:20px;padding:16px;border:1px solid var(--line);border-radius:12px;}
.datgia__nhan{font-size:13px;color:var(--text-2);}
/* Con số là thứ khách tìm khi mở khung này — cho nó to hẳn, đừng để lẫn vào
   giữa mấy dòng chữ cùng cỡ. */
.datgia__tong{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:2px 0 4px;}
.datgia__phu{font-size:13px;color:var(--text-2);}
.datgia__cach{margin-top:12px;font-size:13px;color:var(--text-2);line-height:1.55;}
/* Cảnh báo lừa đảo: nền vàng nhạt, không phải màu lỗi. Nó là lời nhắc chứ
   không phải báo hỏng. */
/* ⚠️ Khối cách trả tiền nằm ở KHU KHÁCH (tin-nhan.html) nên phải ở styles.css,
   không phải host.css — trang khách không nạp host.css. Đã ba lần dựng lại vì
   chép nhầm chỗ, xem CLAUDE.md. */
.ttcoc{
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0;
  background:var(--hover);
}
.ttcoc__nhan{font-size:13px;color:var(--text-2);margin:0;}
.ttcoc__so{font-size:22px;font-weight:600;margin:2px 0 0;}
.ttcoc__phu{font-size:13px;color:var(--text-2);margin:4px 0 0;line-height:1.45;}

.ttcachs{display:grid;gap:12px;margin:14px 0;}
.ttcach{border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.ttcach__h{font-size:15px;font-weight:600;margin:0 0 8px;}
.ttcach__ds{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px;}
.ttcach__ds dt{color:var(--text-2);}
.ttcach__ds dd{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* Số tài khoản: chữ đều bề ngang để đọc từng chữ số, và cho phép bôi đen chép tay */
.ttcach__stk{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;
  letter-spacing:.5px;user-select:all;}
.ttcach__chep{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:4px 12px;font-size:13px;cursor:pointer;min-height:32px;
}
.ttcach__chep:hover{background:var(--hover);}
.ttcach__qr{display:block;width:180px;max-width:100%;height:auto;margin:12px 0 0;
  border:1px solid var(--line);border-radius:8px;}
.ttcach__mo{font-size:13px;color:var(--text-2);margin:10px 0 0;line-height:1.45;}
.ttcach__nut{display:inline-flex;margin-top:10px;}
/* Tên miền đích in ngay dưới nút — khách sắp trả tiền phải thấy mình đi đâu */
.ttcach__mien{font-size:12px;color:var(--text-2);margin:8px 0 0;overflow-wrap:anywhere;}
.datgia__canh{margin-top:10px;padding:10px 12px;border-radius:8px;
  background:#FFF7E6;color:#7A5A16;font-size:12px;line-height:1.55;}

/* Số đánh giá và xếp hạng trên thẻ chủ nhà — bấm được, nhảy tới mục đánh giá.
   Gỡ gạch chân mặc định của link vì đây là con số, không phải câu chữ. */
.hostcard__link{display:block;color:inherit;text-decoration:none;}
.hostcard__link:hover .hostcard__big{text-decoration:underline;}
.hostcard__link:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px;}

/* Trang giới thiệu chủ nhà (chu-nha.html · js/chu-nha.js) --------------- */
/* Bọc ngoài — khai để bộ soát class không báo thiếu, và để có chỗ chỉnh sau. */
.cn{display:block;}
.cn__ben{min-width:0;}
/* `.review--that` là dấu hiệu "đánh giá của khách thật" — trang chi tiết đã
   dùng, khai ở đây để mọi trang cùng hiểu như nhau. */
.review--that{}
/* Cỡ lớn của avatar — thẻ hồ sơ chủ nhà dùng, ở trang chi tiết lẫn trang
   giới thiệu. Để riêng trong chi-tiet.css thì trang kia ra vòng tròn 44px. */
.avatar--xl{width:104px;height:104px;font-size:34px;}

.cn__h1{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:32px 0 24px;}
.cn__h2{font-size:22px;font-weight:600;margin:40px 0 16px;
  padding-top:28px;border-top:1px solid var(--line-2);}
.cn__dem{color:var(--text-2);font-weight:400;font-size:16px;}
/* Thẻ hồ sơ bên trái (dính theo cuộn), tiêu đề + đôi nét + tiểu sử bên phải. */
.cn__top{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:56px;align-items:start;padding:32px 0 8px;}
/* ⚠️ `sticky` cần một MỐC: thiếu `top` thì nó không làm gì cả và thẻ cuộn mất
   ngay khi khách lướt xuống mục đánh giá. */
.cn__cot{position:sticky;top:24px;}
.hostcard--to{box-shadow:0 6px 20px rgba(0,0,0,.10);border-radius:20px;padding:28px 24px;}
@media (max-width:950px){ .cn__top{grid-template-columns:1fr;gap:24px;padding-top:20px;}
  .cn__cot{position:static;} .cn__h1{font-size:24px;margin:4px 0 18px;} .cn__h2{font-size:19px;} }
.cn__nut{margin-top:20px;}
/* Mỗi bài đánh giá ghi rõ nó nói về CĂN NÀO — trang này gộp đánh giá của mọi
   chỗ ở, thiếu dòng đó thì khách không biết bài khen đang khen căn nào. */
/* Tên căn của một đánh giá thuộc bài đang ẩn — chữ thường, không phải link */
.cn__vecan-tat{color:var(--text-2);}
.cn__vecan{margin-top:10px;font-size:13px;}
.cn__vecan a{color:var(--text-2);text-decoration:underline;}
/* Hàng cuộn ngang — giống trang mẫu: ba bài đánh giá một lượt, vuốt để xem
   tiếp. Lưới dọc với 250 bài thì trang dài vô tận. */
.cn__hang{display:flex;gap:20px;overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;}
.cn__hang > *{flex:0 0 clamp(260px,30%,360px);scroll-snap-align:start;}
/* Thẻ chỗ ở hẹp hơn thẻ đánh giá — cùng một hàng cuộn nhưng khác bề rộng. */
.cn__hang--the > *{flex:0 0 clamp(220px,24%,280px);}
.cn__hang .review{border:1px solid var(--line);border-radius:14px;padding:18px;}
.cn__mucdg,.cn__mucbd{padding-bottom:8px;}

/* Hàng chip lọc nhanh (js/app.js → chipHTML) --------------------------- */
.chiploc{
  display:flex;gap:10px;align-items:center;
  overflow-x:auto;scrollbar-width:none;
  padding:4px 0 14px;margin-bottom:4px;
  border-bottom:1px solid var(--line-2);
}
.chiploc::-webkit-scrollbar{display:none;}
.chiploc__n{
  flex:none;min-height:var(--tap,44px);padding:0 16px;
  border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--text);
  font:inherit;font-size:14px;white-space:nowrap;cursor:pointer;
  transition:border-color .12s ease,background .12s ease;
}
.chiploc__n:hover{border-color:var(--text);background:var(--hover);}
/* Chip đang bật phải khác hẳn, không chỉ đậm hơn một chút — khách cần liếc
   một cái là biết mình đang lọc theo cái gì. */
.chiploc__n.is-chon{background:var(--text);color:#fff;border-color:var(--text);font-weight:600;}

/* =====================================================================
   TRANG KẾT QUẢ — danh sách bên TRÁI, bản đồ bên PHẢI (js/app.js)

   Bố cục này chỉ có ở trang kết quả / trang khu vực. Trang chủ không có bản
   đồ: khách chưa chọn khu vực thì mười cái ghim chưa trả lời được gì.
   ===================================================================== */
.kq{display:block;}
.kq__bd{display:none;}
.kq__nut{display:none;}

/* ---- Khổ rộng: bản đồ CỐ ĐỊNH bên phải, danh sách tự cuộn bên trái ----

   Cả khối cao đúng một màn hình trừ header, nên bản đồ không nhúc nhích còn
   danh sách cuộn trong lòng nó — giống trang kết quả của Airbnb.

   ⚠️ `--hdr` do `doHeader()` trong app.js ĐO rồi ghi vào; đừng viết cứng. Header
   là sticky và cao 163px ở khổ rộng, nhưng đổi theo khổ màn hình. */
@media (min-width:1024px){
  .kq{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(380px,38vw,620px);
    gap:24px;
    height:calc(100dvh - var(--hdr,163px) - 24px);
  }
  /* Danh sách có thanh cuộn riêng. `padding-right` chừa chỗ cho thanh cuộn,
     không thì nó đè lên mép thẻ ngoài cùng. */
  .kq__ds{height:100%;overflow-y:auto;padding-right:12px;overscroll-behavior:contain;}
  .kq__bd{display:block;height:100%;}
  .kq__bd .bdo{height:100%;}

  /* ⚠️ ĐÚNG 2 thẻ mỗi hàng. Cột trái hẹp hơn cả trang nên `auto-fill` cho ra
     3–4 thẻ tí xíu, chữ trong thẻ xuống dòng vỡ vụn. */
  .kq__ds .results__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gap);}

  /* Trang kết quả không cuộn cả trang nữa — phần cuộn nằm trong cột trái. */
  body.co-kq main{padding-bottom:12px;}
  body.co-kq footer{display:none;}
}
/* ---- Khổ hẹp: bản đồ ở trên, danh sách là tấm trượt BA NẤC ----

     thap  — kéo xuống hết: chỉ còn bản đồ
     vua   — mặc định: nửa bản đồ, nửa danh sách
     rong  — lướt/kéo lên: danh sách phủ kín bản đồ

   Một biến duy nhất `--tam` giữ mép trên của tấm; bản đồ cao đúng tới đó. Hai
   khối vì thế không bao giờ lệch nhau — trước đây mỗi khối tự tính chiều cao
   và chúng chồng nhau 81px. */
@media (max-width:1023px){
  .kq{--tam:58dvh;}
  .kq[data-tam="thap"]{--tam:calc(100dvh - 72px);}
  /* Nấc rộng áp SÁT hàng chip. Khe 12px cũ để lộ một dải bản đồ vụn giữa chip và
     danh sách — trông như lỗi vẽ, và ăn mất 12px của thẻ nhà. */
  .kq[data-tam="rong"]{--tam:var(--hdr,160px);}
  .kq[data-tam="rong"] .kq__ds{border-radius:0;box-shadow:0 1px 0 var(--line) inset;}
  .kq[data-tam="rong"] .kq__tay{border-radius:0;}
  /* Lướt danh sách thì thu hàng logo, giữ ô tìm kiếm + chip — như Airbnb. Xem
     `dongBoNac()` trong app.js. Chỉ khi trang đang có tấm trượt (`co-kq`). */
  body.co-kq.kq-gon .header__grid{display:none;}

  /* ⚠️ Hàng chip nằm TRÊN cả bản đồ lẫn tấm trượt. Nếu `--hdr` lệch vài px —
     phông chữ tải muộn, thanh tìm kiếm xuống dòng — thì tấm trượt cắt ngang
     hàng chip và khách không đọc được nút nào. Cho chip đứng trên cùng thì
     tệ nhất cũng chỉ là tấm chạm mép chip, không bao giờ nuốt mất nó.
     Nền trắng là bắt buộc: thiếu nó thì bản đồ lộ ra sau chữ. */
  .chiploc{position:relative;z-index:90;background:#fff;}

  /* Trang không cuộn; phần cuộn nằm trong tấm. Không khoá thì trang nền trôi
     theo ngón tay và bản đồ cố định trượt khỏi màn hình. */
  body.co-kq{overflow:hidden;}
  body.co-kq footer{display:none;}

  /* ⚠️⚠️ Khung bản đồ KHÔNG co theo nấc "rộng". Bản trước cao đúng tới mép tấm, nên
     mỗi lần lướt danh sách lên/xuống khung co về 0 rồi giãn lại 264px — MapLibre
     `resize()` và bản tĩnh tải lại cả iframe Google mỗi lượt: chủ nhà thấy "bản
     đồ bị làm lại liên tục". Nay ở nấc rộng khung giữ cỡ của nấc vừa và nằm yên
     DƯỚI tấm (tấm z-index 85 che nó); bám `--hdr-mo` (header mở đủ) nên header
     thu gọn cũng không xê dịch nó. */
  .kq{--tam-bd:var(--tam);}
  .kq[data-tam="rong"]{--tam-bd:58dvh;}
  .kq__bd{
    display:block;
    position:fixed;left:0;right:0;top:var(--hdr-mo,var(--hdr,160px));
    height:calc(var(--tam-bd) - var(--hdr-mo,var(--hdr,160px)));
    z-index:80;
  }
  .kq__bd .bdo{height:100%;border-radius:0;}

  .kq__ds{
    position:fixed;left:0;right:0;bottom:0;top:var(--tam);
    z-index:85;background:#fff;
    border-radius:16px 16px 0 0;
    box-shadow:0 -6px 24px rgba(0,0,0,.18);
    overflow-y:auto;overscroll-behavior:contain;
    padding:0 24px calc(120px + env(safe-area-inset-bottom, 0px));
    /* ⚠️ KHÔNG đặt `transition` cho `top`. Đo được: đổi nấc xong 700ms mà giá
       trị tính ra vẫn đứng ở nấc cũ — hiệu ứng kẹt giữa hai giá trị khác đơn
       vị (58dvh ↔ calc(px)). Nhảy thẳng thì nấc nào ra nấc đó. */
  }
  /* Đang kéo: tắt mọi hiệu ứng để tấm bám sát ngón tay. */
  .kq.dang-keo .kq__ds,.kq.dang-keo .kq__bd{transition:none;}

  .kq__tay{
    display:block;position:sticky;top:0;z-index:2;
    width:100%;height:28px;border:0;background:#fff;
    border-radius:16px 16px 0 0;cursor:grab;
    touch-action:none;                 /* để pointermove không bị cuộn nuốt mất */
  }
  .kq.dang-keo .kq__tay{cursor:grabbing;}
  .kq__tay::before{
    content:"";display:block;width:40px;height:4px;border-radius:2px;
    background:var(--line);margin:10px auto 0;
  }
  /* ⚠️ Vùng chạm phải đủ 44px kể cả khi vạch chỉ cao 4px. */
  .kq__tay::after{content:"";position:absolute;left:0;right:0;top:-8px;height:44px;}

  /* Nút "Bản đồ" chỉ hiện khi bản đồ đang bị che. Hiện sẵn lúc bản đồ đang
     nhìn thấy là một cái nút bấm vào không đổi gì. */
  .kq__nut{display:none;}
  .kq[data-tam="rong"] .kq__nut{
    display:inline-flex;align-items:center;gap:8px;
    position:fixed;left:50%;transform:translateX(-50%);z-index:95;
    /* ⚠️ Thanh địa chỉ dưới đáy của Safari/Chrome trên điện thoại đè lên phần
       tử `position:fixed`. Cách đáy 24px là nút chui xuống dưới thanh đó — có
       nút mà khách không bao giờ thấy. 34px là để nó nhô lên.
       ⚠️ `env(safe-area-inset-bottom)` ở đây bằng 0 vì trang chưa khai
       `viewport-fit=cover`; phần đỡ thật sự là 34px. Đừng bỏ nó đi. */
    bottom:calc(34px + env(safe-area-inset-bottom, 0px));
    min-height:var(--tap,44px);padding:0 20px;
    border:0;border-radius:999px;
    background:var(--text);color:#fff;
    font:inherit;font-size:14px;font-weight:600;
    box-shadow:0 4px 16px rgba(0,0,0,.28);cursor:pointer;
  }
  .kq__nut svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;}
}
/* Bản đồ có gắn giá (js/ban-do.js) ------------------------------------- */
.bdo-khoi{padding:8px 0 4px;}
.bdo-khoi__dau{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px;}
.bdo-khoi__h{font-size:22px;font-weight:600;}
@media (max-width:743px){ .bdo-khoi__h{font-size:18px;} }

.bdo{
  position:relative;border-radius:16px;overflow:hidden;
  background:#EAE6E1;height:min(56vh,460px);
}
@media (max-width:743px){ .bdo{height:min(52vh,340px);} }

/* ⚠️ `pointer-events:none` là cố ý. Ghim của ta đặt bằng phép chiếu từ tâm và
   mức phóng ĐÃ BIẾT của iframe; để khách kéo/phóng bản đồ thì nền dịch đi mà
   ghim đứng yên — mọi ghim lệch khỏi chỗ nó đang chỉ, và ta không có cách nào
   đọc được trạng thái mới (iframe khác nguồn gốc). Thà là ảnh nền tĩnh còn
   hơn một bản đồ kéo được nhưng chỉ sai chỗ. */
.bdo__nen{position:absolute;inset:0;width:100%;height:100%;border:0;
  display:block;pointer-events:none;}
/* Thuộc tính width/height trên thẻ <iframe> là số đo dự phòng; hai dòng trên
   vẫn thắng và kéo nó phủ kín khung. Giữ cả hai. */
.bdo__ghim{position:absolute;inset:0;}

/* Khung MapLibre (bản kéo/phóng được). Nằm chồng lên chỗ bản tĩnh vừa vẽ. */
/* ⚠️⚠️ Phải viết `.bdo .bdo__gl`, KHÔNG viết `.bdo__gl` trơn. maplibre-gl.css
   khai `.maplibregl-map{position:relative}` và nó được chèn vào <head> SAU
   styles.css, nên cùng độ ưu tiên thì nó thắng — `position` quay về relative,
   `inset:0` mất tác dụng, khung co lại đúng bằng nội dung (44px = dòng ghi
   nguồn). Đo được: khung 547×713 mà lớp bản đồ chỉ 547×44. Dòng ghi nguồn vẫn
   hiện nên nhìn qua tưởng bản đồ đã chạy, chỉ là bị "mảng xám che phủ". */
.bdo .bdo__gl{position:absolute;inset:0;z-index:2;}
/* Lớp chờ: ĐÚNG kích thước nhưng trong suốt, để bản tĩnh bên dưới lộ ra.
   ⚠️ Không dùng `hidden`/`display:none` — phần tử ẩn có kích thước 0 và
   MapLibre đo đúng lúc đó, canvas ra ~30px rồi giữ nguyên. */
.bdo__gl--cho{opacity:0;pointer-events:none;}
/* ⚠️ ĐỪNG ẩn dòng ghi nguồn. Dữ liệu bản đồ là của OpenStreetMap, giấy phép
   ODbL bắt buộc ghi nguồn — bỏ đi là vi phạm bản quyền chứ không phải dọn
   giao diện. Chỉ chỉnh cho nó đỡ chói. */
.bdo .maplibregl-ctrl-attrib{font-size:11px;background:rgba(255,255,255,.86);}
/* Ghim là <button> của ta nên phải gỡ nền mặc định của marker MapLibre. */
.bdo .maplibregl-marker{cursor:pointer;}
/* Bản đồ động: viên giá đặt bằng transform của MapLibre, không dùng
   toạ độ tuyệt đối như bản tĩnh — nên phải bỏ `position:absolute`. */
.bdo .maplibregl-marker .bdo__gia,
.bdo .maplibregl-marker.bdo__gia{position:static;transform:none;}
.bdo .maplibregl-marker .bdo__gia:hover,
.bdo .maplibregl-marker.bdo__gia:hover{transform:scale(1.06);}

/* Chấm = VỊ TRÍ THẬT của khu vực. Viên giá có thể bị đẩy đi chỗ khác cho
   khỏi chồng nhau, nhưng chấm thì không bao giờ dịch — xem ban-do.js. */
.bdo__cham{
  position:absolute;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;
  background:var(--brand);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
/* Sợi chỉ nối viên giá về chấm của nó. Nhạt thôi — nó là chú giải, không
   phải nội dung. */
.bdo__chi{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.bdo__chi line{stroke:rgba(0,0,0,.42);stroke-width:1.25;stroke-dasharray:3 3;}

/* Viên giá. Neo ở đáy-giữa để đầu nhọn chỉ đúng vào toạ độ. */
.bdo__gia{
  position:absolute;transform:translate(-50%,-100%);
  background:#fff;color:var(--text);
  border:1px solid var(--line);border-radius:999px;
  padding:7px 12px;min-height:var(--tap,44px);
  font-size:13px;font-weight:600;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  cursor:pointer;transition:transform .12s ease,background .12s ease;
}
.bdo__gia:hover,.bdo__gia:focus-visible{
  background:var(--text);color:#fff;border-color:var(--text);
  transform:translate(-50%,-100%) scale(1.06);z-index:2;
}
.bdo__note{
  position:absolute;left:12px;right:12px;bottom:12px;
  background:rgba(255,255,255,.93);border-radius:8px;
  padding:6px 10px;font-size:12px;color:var(--text-2);
  pointer-events:none;
}
.bdo__trong{padding:24px;color:var(--text-2);font-size:14px;}
/* Hàng "Đã xem gần đây" (js/app.js → hangDaXem) ------------------------- */
/* Tiêu đề ở đây KHÔNG phải link: hàng này gom nhiều khu vực khác nhau nên
   không có trang nào để dẫn tới. Dùng thẻ <a> giả rồi bấm không đi đâu thì tệ
   hơn là để chữ thường. */
.row__title--tinh{cursor:default;}
.row__title--tinh:hover{text-decoration:none;}
.row--daxem{border-bottom:1px solid var(--line-2);padding-bottom:8px;margin-bottom:8px;}
.row__ghichu{
  font-size:12px;color:var(--text-3);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:4px 0 0;
}
.row__ghichu .linkonly{font-size:12px;color:var(--text-2);min-height:0;}
/* =====================================================================
   ĐĂNG NHẬP KHÁCH — form email trong khung tài khoản (js/tai-khoan.js)
   ===================================================================== */
.tkchia{display:flex;align-items:center;gap:12px;margin:18px 0 14px;
  color:var(--text-2);font-size:13px;}
.tkchia::before,.tkchia::after{content:"";flex:1;height:1px;background:var(--line);}
.tkmail label{display:block;margin:10px 0 4px;font-size:13px;font-weight:600;}
/* 16px là ngưỡng iOS: nhỏ hơn thì Safari tự phóng to trang khi bấm vào ô. */
.tkmail input{width:100%;padding:12px;font-size:16px;border:1px solid var(--line);
  border-radius:8px;box-sizing:border-box;}
.tkmail input:focus{outline:2px solid var(--text);outline-offset:-2px;}
.tkmail__gui{width:100%;margin-top:16px;min-height:48px;}
.tkmail__loi{margin:10px 0 0;font-size:13px;color:#C13515;min-height:0;}
.tkmail__loi.is-nhac{color:#0a7d33;}
.tkmail__loi:empty{display:none;}
.tkmail__doi-che{margin:12px 0 0;text-align:center;}
.linkonly{background:none;border:0;padding:0;font:inherit;font-size:13px;
  color:var(--text);text-decoration:underline;cursor:pointer;min-height:var(--tap,44px);}

/* Hai tab Email · Số điện thoại. Tab số điện thoại chỉ hiện khi máy chủ báo
   `cong.sdt` — xem js/tai-khoan.js. */
.tktab{display:flex;gap:6px;padding:4px;margin:0 0 14px;
  background:var(--hover);border-radius:10px;}
.tktab__n{flex:1;min-height:var(--tap,44px);border:0;border-radius:8px;
  background:none;font:inherit;font-size:14px;font-weight:600;
  color:var(--text-2);cursor:pointer;}
.tktab__n.is-chon{background:#fff;color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.12);}

/* Mã vùng + số. Ô mã vùng co theo nội dung, ô số ăn hết phần còn lại. */
.tksdt{display:flex;gap:8px;}
.tksdt__ma{flex:0 0 auto;max-width:44%;padding:12px 8px;font-size:16px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--text);font-family:inherit;}
.tksdt + .tkmail__goi,.tkmail__goi{margin:6px 0 0;font-size:12px;color:var(--text-3);}
.tksdt input{flex:1 1 auto;min-width:0;}
.tkmail__phu{font-weight:400;color:var(--text-3);}

/* Ô mã: giãn chữ để 6 số đọc thành từng con số, không thành một số lớn. */
.tkma{text-align:center;letter-spacing:.42em;text-indent:.42em;
  font-size:22px;font-weight:600;}

.tkmail__duoi{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:12px 0 0;flex-wrap:wrap;}
.tkmail__duoi .linkonly[disabled]{color:var(--text-3);text-decoration:none;cursor:default;}
/* =====================================================================
   CHỌN NGÔN NGỮ LẦN ĐẦU (js/chon-ngon-ngu.js)
   ===================================================================== */
.cnn{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s ease;}
.cnn.is-mo{opacity:1;}
.cnn__hop{position:relative;width:100%;max-width:560px;background:#fff;
  border-radius:24px;padding:36px 32px 32px;text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
  transform:translateY(10px);transition:transform .2s ease;}
.cnn.is-mo .cnn__hop{transform:none;}
.cnn__x{position:absolute;top:16px;right:16px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:var(--hover);cursor:pointer;color:var(--text-2);}
.cnn__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;}
.cnn__x:hover{background:var(--hover-2);}
.cnn__h{margin:0 0 10px;font-size:22px;line-height:1.3;color:var(--brand);}
.cnn__mo{margin:0 0 26px;font-size:15px;line-height:1.6;color:var(--text-2);}
.cnn__luoi{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cnn__nut{display:flex;align-items:center;gap:12px;
  padding:16px 18px;min-height:60px;
  border:2px solid var(--line);border-radius:14px;background:#fff;
  font-size:16px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s;}
.cnn__nut:hover{border-color:var(--text-3);background:var(--hover);}
/* Ngôn ngữ đoán từ trình duyệt — chỉ gợi ý, chưa áp dụng cho tới khi bấm. */
.cnn__nut.is-goi{border-color:var(--brand);background:#fff5f7;}
.cnn__nut:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.cnn__co{width:30px;height:20px;flex:none;border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);}

/* Một cột ở màn hẹp: hai cột thì nhãn "简体中文" và "Tiếng Việt" bị bó sát
   mép và nút tụt xuống dưới 44px chiều cao chạm. */
@media (max-width:479px){
  .cnn__hop{padding:30px 20px 24px;border-radius:20px;}
  .cnn__h{font-size:19px;}
  .cnn__luoi{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .cnn,.cnn__hop{transition:none;}
}

/* =====================================================================
   XEM ẢNH TOÀN MÀN HÌNH — js/xem-anh.js. Dùng chung album và trang chi tiết.
   ===================================================================== */
/* Khoá cuộn nền. `position:fixed` chứ không chỉ `overflow:hidden`: trên iOS
   Safari, `overflow:hidden` trên body KHÔNG chặn được cuộn. */
body.xa-khoa{position:fixed;width:100%;overflow:hidden;}

.xa{
  position:fixed;inset:0;z-index:200;background:#000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s ease;
}
.xa.is-mo{opacity:1;}

.xa__thanh{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;color:#fff;
}
.xa__dem{font-size:15px;font-weight:600;color:#fff;}
.xa__phai{display:flex;gap:4px;}
.xa__nut{
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--tap,44px);padding:8px 12px;
  background:none;border:0;border-radius:10px;
  color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.xa__nut:hover{background:rgba(255,255,255,.14);}
.xa__nut:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.xa__nut svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.xa__nut[data-tim].is-on svg{fill:#fff;}

.xa__mui{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.5);
  color:#fff;
}
.xa__mui:hover{background:rgba(255,255,255,.24);}
.xa__mui:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.xa__mui[hidden]{display:none;}
.xa__mui svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}
.xa__mui--truoc{left:20px;}
.xa__mui--sau{right:20px;}

.xa__khung{
  margin:0;padding:76px 92px;
  width:100%;height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
/* `object-fit:contain` + giới hạn cả hai chiều: ảnh dọc (ban công, cầu thang)
   không được tràn quá màn hình rồi bị cắt mất đầu. */
.xa__anh{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;display:block;
}
.xa__mo{color:rgba(255,255,255,.82);font-size:13px;text-align:center;max-width:60ch;}
.xa__mo[hidden]{display:none;}

@media (max-width:743px){
  /* Mũi tên xuống dưới, không chồng lên ảnh — ở màn hẹp chúng che mất phần
     giữa của ảnh dọc. Vuốt ngang vẫn là cách chính. */
  .xa__khung{padding:64px 12px 84px;}
  .xa__mui{top:auto;bottom:16px;transform:none;width:48px;height:48px;}
  .xa__mui--truoc{left:calc(50% - 58px);}
  .xa__mui--sau{right:calc(50% - 58px);}
  .xa__nut span:not(.sr-only){display:none;}   /* chỉ còn icon, đỡ chật */
  .xa__dong span{display:inline !important;}   /* trừ chữ "Đóng" */
}
@media (prefers-reduced-motion:reduce){ .xa{transition:none;} }

/* =====================================================================
   THÀNH PHẦN DÙNG CHUNG NHIỀU TRANG — chuyển về đây từ chi-tiet.css và anh.css

   `.abar*` (thanh trên cùng)  · `.hostcard*` · `.hostfacts*` · `.hostbio`
   `.review*` · `.rmuc` · `.dgtrong` · `.linkact`

   ⚠️⚠️ ĐÂY LÀ LẦN THỨ BA dự án vấp cùng một lỗi. Trước đó `.mapbox*` chỉ nằm
   ở chi-tiet.css nên ghim bản đồ phình to trong khu quản trị, và `.msg*` chỉ
   nằm ở host.css nên khu khách không dùng lại được. Lần này là trang giới
   thiệu chủ nhà: nó chỉ nạp styles.css, nên `.hostfacts__ic` không có kích
   thước và mỗi icon SVG phình ra kín màn hình.

   ⚠️ TRƯỚC KHI dùng một class ở trang mới, kiểm xem CSS của nó có được nạp
   tới không. Class dùng ở HAI trang trở lên thì chỗ của nó là ĐÂY.
   ===================================================================== */
.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;}
.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;
}
.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;}
.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;}
/* Đ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);}
/* 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;
}
/* =====================================================================
   anh.css — trang album ảnh (anh.html), chia theo phòng và tiện ích.
   Token, footer, .linkact… lấy từ styles.css (nạp trước).
   ===================================================================== */

.album-page{background:#fff;}
/* ---------- thanh trên cùng ---------- */
.abar{
  position:sticky;top:0;z-index:60;
  background:#fff;border-bottom:1px solid var(--line-2);
}
.abar__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:64px;
}
.abar__back{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;margin-left:-10px;
  transition:background .15s ease;
}
.abar__back:hover{background:var(--hover);}
.abar__back svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.abar__acts{display:flex;gap:4px;}
/* .linkact dùng chung với trang chi tiết nhưng chi-tiet.css không được nạp ở đây */
.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;}

/* =====================================================================
   TRANG CÁ NHÂN CỦA KHÁCH — ho-so-khach.html
   ⚠️ Để ở styles.css chứ không phải host.css: đây là trang KHU KHÁCH và nó
   không nạp host.css. Lỗi chép nhầm chỗ đã xảy ra ba lần, xem CLAUDE.md.
   ===================================================================== */
.hk{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px;
  align-items:start;padding:28px 0 64px;}
.hk__cot{position:sticky;top:96px;}
.hk__chinh{min-width:0;}
.hk__h1{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:0 0 20px;}
.hk__h2{font-size:22px;font-weight:600;margin:32px 0 12px;}
.hk__mo{font-size:15px;color:var(--text-2);line-height:1.5;margin:0 0 20px;}
.hk__moi{max-width:520px;margin:64px auto;text-align:center;}
.hk__anhnut{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.hk__lienhe{font-size:13px;color:var(--text-2);margin:16px 0 0;line-height:1.5;}
.hk__luu{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;}
.hk__tt{font-size:14px;color:var(--text-2);margin:0;}
.hkden__ds{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.hkden__ds li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;}
.hkden__ds span{display:block;font-size:13px;color:var(--text-2);margin-top:2px;}

/* Khối xác minh danh tính */
.hkxm{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 24px;}
.hkxm--is-dat{border-color:#0F7B6C;background:#F2FAF8;}
.hkxm--is-tuchoi{border-color:#E8C4C6;background:#FDF6F6;}
.hkxm__tt{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;margin:0;}
.hkxm__ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.hkxm__mo{font-size:14px;color:var(--text-2);line-height:1.55;margin:10px 0 14px;}
.hkxm__loi{font-size:14px;color:#C13515;line-height:1.5;margin:10px 0;}
.hkxm__form{display:grid;gap:4px;}
.hkxm__anh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 4px;}
.hkxm__xem{font-size:14px;color:var(--text-3);}
.hkxm__xem.is-co{color:#0F7B6C;font-weight:600;}
/* Câu nhắc về việc ảnh sẽ bị xoá — đọc TRƯỚC khi gửi, không phải sau */
.hkxm__nhac{font-size:13px;color:var(--text-2);line-height:1.5;margin:6px 0 12px;}

@media (max-width:900px){
  .hk{grid-template-columns:1fr;gap:24px;padding-top:16px;}
  .hk__cot{position:static;}
  .hk__h1{font-size:26px;}
}

/* Ô nhập của trang cá nhân khách. ⚠️ KHÔNG mượn `.edfield` — nó nằm ở
   host.css và chi-tiet.css, mà trang này chỉ nạp styles.css. Máy soát
   `tools/soat-css.php` bắt được đúng lỗi đó ngay lần đầu. */
.hkfield{display:block;margin:0 0 14px;}
.hkfield label{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px;}
.hkfield input,.hkfield textarea,.hkfield select{
  width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  min-height:var(--tap,48px);
}
.hkfield textarea{min-height:0;resize:vertical;line-height:1.5;}
.hkfield input:focus,.hkfield textarea:focus,.hkfield select:focus{
  outline:2px solid var(--text);outline-offset:-1px;border-color:transparent;}
.hk__dem{font-size:12px;color:var(--text-2);margin:-8px 0 14px;}
.hk__bo{color:#C13515;}
.hk__anh img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

/* Chọn ngôn ngữ: các ô tick xếp thành lưới. Dùng checkbox thật chứ không phải
   nút giả — bàn phím và trình đọc màn hình hiểu ngay, không phải viết thêm gì. */
.hkfield__nhan{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px;}
.hknn{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;}
.hknn__o{display:flex;align-items:center;gap:8px;font-size:15px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:var(--tap,48px);
  box-sizing:border-box;}
.hknn__o:hover{background:var(--hover);}
.hknn__o input{width:18px;height:18px;flex:none;accent-color:var(--text);}
.hknn__o:focus-within{outline:2px solid var(--text);outline-offset:2px;}

/* Số điện thoại khẩn cấp = [mã quốc gia][số], cùng kiểu với khung liên hệ */
.hksdt{display:flex;gap:6px;}
/* ⚠️ Phải thắng luật `.hkfield select{width:100%}` ở trên — không thì ô mã
   vùng chiếm trọn hàng và ô số bị đẩy ra ngoài màn hình. Đo được ở 375px:
   ô mã rộng 327px, đúng bằng cả khung. */
.hkfield .hksdt__ma{flex:0 0 auto;width:auto;min-width:96px;}
.hkfield .hksdt__so{flex:1 1 auto;width:auto;min-width:0;}
.hksdt select,.hksdt input{
  font:inherit;font-size:15px;color:var(--text);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  min-height:var(--tap,48px);box-sizing:border-box;}
.hksdt select:focus,.hksdt input:focus{
  outline:2px solid var(--text);outline-offset:-1px;border-color:transparent;}
/* Dòng giải thích nằm NGAY DƯỚI ô, không phải cuối khối */
.hk__dem--o{margin:6px 0 0;}

/* Logo trong thanh trên của các trang phụ (trang cá nhân, trang chủ nhà).
   ⚠️ `.abar__inner` là flex có `justify-content:space-between`; logo phải chen
   vào SAU nút quay lại và trước nhóm nút phải, nên cho nó `margin-right:auto`
   để nó đẩy phần còn lại ra mép. */
.abar__brand{margin-right:auto;margin-left:4px;}
@media (max-width:743px){
  /* Ở khổ hẹp giữ lại hình logo, bỏ chữ — hai thứ cạnh nút quay lại là chật */
  .abar__brand .brand__word{display:none;}
}
/* Tên người viết đánh giá là link sang trang cá nhân của họ. Giữ nguyên bố cục
   của `.review__head` (nó là flex), chỉ thêm phần bấm được. */
.review__head--link{text-decoration:none;color:inherit;border-radius:10px;}
.review__head--link:hover .review__name{text-decoration:underline;}
.review__head--link:focus-visible{outline:2px solid var(--text);outline-offset:3px;}
.review__head .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

/* Khối "đôi nét" ở trang cá nhân công khai */
.hkdn{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px;}
.hkdn li{display:flex;align-items:center;gap:12px;font-size:15px;}
.hkdn__ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--text-2);}
.hkdg{display:grid;gap:16px;}
/* Điểm trung bình nhỏ cạnh tiêu đề "Chủ nhà nói gì về …" */
.hk__tb{font-size:14px;font-weight:400;color:var(--text-2);margin-left:8px;}
/* =====================================================================
   Ảnh đại diện ở trang cá nhân: bấm thẳng vào ảnh
   ===================================================================== */
.hkanh{
  position:relative;display:inline-block;background:none;border:0;padding:0;
  cursor:pointer;border-radius:50%;line-height:0;
}
.hkanh:focus-visible{outline:2px solid var(--text);outline-offset:4px;}
/* Huy hiệu máy ảnh ở góc — thứ nói cho người ta biết tấm ảnh bấm được.
   Không có nó thì ảnh trông như một bức hình trang trí. */
.hkanh__may{
  position:absolute;right:2px;bottom:2px;
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.14);
}
.hkanh__may svg{width:19px;height:19px;fill:none;stroke:var(--text);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.hkanh:hover .hkanh__may{background:var(--hover);}
/* Lớp phủ mờ khi rê chuột, để thấy rõ là bấm được */
.hkanh::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(0,0,0,.28);opacity:0;transition:opacity .15s ease;
}
.hkanh:hover::after,.hkanh:focus-visible::after{opacity:1;}
.hkanh__tt{font-size:13px;color:var(--text-2);margin:10px 0 0;min-height:1.2em;}
.hkanh__bo{
  background:none;border:0;padding:6px 8px;font:inherit;font-size:13px;
  color:#C13515;cursor:pointer;text-decoration:underline;margin-top:2px;
}

/* =====================================================================
   Thanh Lưu DÍNH ĐÁY — chỉ hiện khi có thay đổi chưa lưu
   ⚠️ Trước đây nút Lưu nằm cuối một trang dài: sửa một ô ở giữa rồi cuộn tiếp
   là không còn thấy nó, và người ta rời trang mà tưởng đã lưu.
   ===================================================================== */
/* ⚠️ `position:fixed`, KHÔNG phải `sticky`. Đo được: bản sticky nằm cuối một
   cột lưới `align-items:start` nên nó không có chỗ để dính — cuộn xuống cuối
   trang mà thanh vẫn ở ngoài màn hình 561px. Fixed thì luôn thấy, đổi lại
   phải chừa chỗ ở đáy trang (xem `.hk--dangsua`). */
.hkluu{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:0;padding:14px 20px;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(0,0,0,.10);
}
.hkluu__nut{display:flex;gap:10px;margin-left:auto;}
.hkluu[hidden]{display:none;}
/* Chừa chỗ cho thanh cố định, không thì nó che mất ô nhập cuối cùng */
.hk--dangsua{padding-bottom:96px;}
@media (max-width:743px){
  .hkluu{gap:10px;padding:12px 16px;}
  .hkluu__nut{width:100%;margin-left:0;}
  .hkluu__nut button{flex:1;min-height:var(--tap,48px);}
  .hk--dangsua{padding-bottom:132px;}
}

/* =====================================================================
   CÀI ĐẶT TÀI KHOẢN — cai-dat.html
   Cột trái là các mục, cột phải là nội dung mục đang chọn.

   ⚠️ Tiền tố là `cdtk`, KHÔNG phải `cd`. Trang "Chuyến đi" đã dùng `.cd`
   từ trước, và khối này nằm SAU trong cùng một file nên nó thắng: đo được
   trên trang thật, thẻ chuyến đi nhận `grid-template-columns` của trang cài
   đặt (280px + 1fr thay vì 3 cột), cao 448px, nút rơi xuống dưới ảnh. Không
   lỗi console, không sai cú pháp — chỉ nhìn mới thấy.
   ===================================================================== */
.cdtk{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:48px;
  align-items:start;padding:28px 0 64px;}
/* ⚠️ `min-width:0` là bắt buộc. Ô lưới mặc định có `min-width:auto`, nên hàng
   mục cuộn ngang bên trong ĐẨY cả cột rộng ra và kéo theo cả lưới — đo được ở
   375px và 834px: `.cdtk__cot`, `.cdtk__h1`, `.cdtk__chinh` đều tràn khỏi màn hình. */
.cdtk__cot{position:sticky;top:96px;min-width:0;}
.cdtk__chinh{min-width:0;max-width:720px;}
.cdtk__h1{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0 0 20px;}
.cdtk__h2{font-size:24px;font-weight:600;margin:0 0 20px;}
.cdtk__h3{font-size:17px;font-weight:600;margin:32px 0 10px;
  padding-top:24px;border-top:1px solid var(--line-2);}

.cdnav{display:grid;gap:2px;}
.cdnav__muc{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  font:inherit;font-size:15px;color:var(--text);background:none;border:0;
  padding:12px 14px;border-radius:12px;cursor:pointer;min-height:var(--tap,48px);
}
.cdnav__muc svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.cdnav__muc:hover{background:var(--hover);}
.cdnav__muc.is-on{background:var(--hover);font-weight:600;}
.cdnav__muc:focus-visible{outline:2px solid var(--text);outline-offset:-2px;}
.cdnav__xem{display:inline-block;margin-top:20px;font-size:14px;color:var(--text-2);}

/* Ảnh đại diện trong Cài đặt: ảnh bên trái, tên và trạng thái bên phải */
.cdanh{display:flex;align-items:center;gap:20px;margin:0 0 24px;flex-wrap:wrap;}
.cdanh__ten{font-size:18px;font-weight:600;margin:0;}

/* Một dòng thông tin không sửa được (Đăng nhập và bảo mật, Ngôn ngữ…) */
.cdhang{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:18px 0;border-bottom:1px solid var(--line-2);}
.cdhang > div{flex:1;min-width:0;}
.cdhang__ten{font-size:15px;font-weight:600;margin:0;}
.cdhang__gt{font-size:14px;color:var(--text-2);line-height:1.55;margin:4px 0 0;
  overflow-wrap:anywhere;}
.cdhang button{flex:none;}

/* Công tắc bật/tắt ở Quyền riêng tư.
   ⚠️ Dùng checkbox THẬT rồi vẽ đè, không phải một cái nút giả: bàn phím và
   trình đọc màn hình hiểu ngay, không phải viết thêm gì. */
.cdct{display:flex;align-items:flex-start;gap:16px;cursor:pointer;
  padding:18px 0;border-bottom:1px solid var(--line-2);}
.cdct > span:first-child{flex:1;min-width:0;font-size:15px;}
.cdct__mo{display:block;font-size:14px;color:var(--text-2);line-height:1.55;
  margin-top:4px;font-weight:400;}
.cdct input{position:absolute;opacity:0;width:0;height:0;}
.cdct__nut{flex:none;width:52px;height:32px;border-radius:999px;background:var(--line);
  position:relative;transition:background .15s ease;margin-top:2px;}
.cdct__nut::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .15s ease;}
.cdct input:checked + .cdct__nut{background:var(--text);}
.cdct input:checked + .cdct__nut::after{transform:translateX(20px);}
.cdct input:focus-visible + .cdct__nut{outline:2px solid var(--text);outline-offset:3px;}

/* Đầu trang hồ sơ: tiêu đề bên trái, nút Chỉnh sửa bên phải */
.hk__dau{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.hk__dau .hk__h1{margin:0;flex:1;min-width:0;}
.hk__sua{flex:none;}
.hk__nhac{font-size:14px;color:var(--text-2);line-height:1.55;margin:0 0 20px;}

@media (max-width:900px){
  .cdtk{grid-template-columns:1fr;gap:20px;padding-top:16px;}
  .cdtk__cot{position:static;}
  .cdtk__h1{font-size:24px;}
  /* Ở khổ hẹp các mục xếp ngang thành hàng cuộn, giống hàng chip */
  .cdnav{grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin;}
  .cdnav__muc{white-space:nowrap;border:1px solid var(--line);}
}

/* ---------- Mã lượt đặt --------------------------------------------------
   10 ký tự ngẫu nhiên. Khách đọc nó cho chủ nhà qua Zalo và ghi vào nội dung
   chuyển khoản, nên chữ phải to, giãn ký tự và dùng font đều nét — chữ
   thường co cụm thì "MN" với "MM" nhìn y hệt nhau.                        */
.madon{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--hover);
}
.madon__nhan{ font-size:13px; color:var(--text-2); }
.madon__ma{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:17px; font-weight:700; letter-spacing:.12em;
  word-break:break-all; margin-inline-end:auto;
}
.madon__chep{
  min-height:var(--tap,44px); padding:0 14px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.madon__chep:hover{ background:var(--hover-2); }

/* ---------- Header gọn ---------------------------------------------------
   Thanh trên không có ô tìm kiếm, dùng ở tin-nhan · chuyen-di · yeu-thich.

   ⚠️ Khối này TỪNG chỉ nằm ở `css/tin-nhan.css`, mà `chuyen-di.html` và
   `yeu-thich.html` chỉ nạp `styles.css` — nên hai trang đó khai `header--gon`
   mà không có luật nào áp vào, header cao chồm lên và khoảng trắng đầu trang
   vênh hẳn so với trang tin nhắn. Đây là lỗi "CSS nhầm file" lần thứ năm;
   soát bằng `tools/soat-css.php`.                                         */
.header--gon .header__bar{padding-bottom:0;}
.header--gon .header__grid{height:72px;}
@media (max-width:743px){ .header--gon .header__grid{height:64px;} }
/* Ô "Tạo bộ sưu tập" — ô cuối lưới bộ sưu tập ở trang Yêu thích. Viền đứt để
   phân biệt ngay với một bộ có thật; nó là chỗ để thêm, không phải chỗ để mở. */
.ybotao{
  border:0;background:none;padding:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer;
}
.ybotao__o{
  display:grid;place-items:center;aspect-ratio:1;border-radius:16px;
  border:2px dashed var(--line);background:var(--hover);
  transition:border-color .18s ease,background .18s ease;
}
.ybotao:hover .ybotao__o{border-color:var(--text-3);background:var(--hover-2);}
.ybotao__o svg{
  width:34px;height:34px;fill:none;stroke:var(--text-2);
  stroke-width:1.8;stroke-linecap:round;
}

/* Ô rỗng cỡ lớn — trang Chuyến đi và Yêu thích khi chưa có gì.

   ⚠️ Là MODIFIER riêng, không sửa thẳng `.emptybox`: khu quản trị dùng chung
   class đó cho những dòng báo rỗng bé xíu trong bảng, đóng khung chúng lại là
   mỗi bảng trống mọc ra một cái hộp to giữa trang. */
.emptybox--to{
  max-width:520px;margin:8px auto 0;padding:44px 28px;text-align:center;
  border:1px solid var(--line);border-radius:16px;background:var(--hover);
}
.emptybox--to p{color:var(--text-2);font-size:15px;line-height:1.5;}
.emptybox--to .ytrong__h{font-size:19px;color:var(--text);}


/* Khối mời viết đánh giá ở trang chi tiết. Chỉ hiện khi khách ĐỦ ĐIỀU KIỆN
   viết; bấm là sang `viet-danh-gia.html`. */
.dgmoi{
  border:1px solid var(--line);border-radius:16px;
  padding:24px;margin-top:24px;background:var(--hover);
}
.dgmoi__nut{
  display:inline-flex;align-items:center;min-height:var(--tap,48px);
  padding:0 22px;margin-top:16px;text-decoration:none;
}

/* "Điểm nổi bật" khách chọn khi viết đánh giá — hiện dưới bảng 6 tiêu chí.
   Là NHÃN, không phải nút: không có hover, không bấm được. */
.rnb{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;}
.rnb__chip{
  padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--hover);font-size:13px;color:var(--text-2);
}

/* =====================================================================
   HẠNG THÀNH VIÊN — hang-thanh-vien.html, và dòng giảm giá ở trang chi tiết
   ===================================================================== */

/* Dòng ưu đãi trong bảng tính tiền. Màu xanh để tách khỏi các dòng cộng thêm —
   đây là dòng DUY NHẤT trừ đi. */
.bill .is-giam{color:#0F7B6C;font-weight:600;}

.ht__the{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  background:var(--hover);
}
.ht__huy{width:34px;height:34px;flex:none;}
.ht__thechu{min-width:0;margin-inline-end:auto;}
.ht__ten{font-size:22px;font-weight:700;letter-spacing:-.01em;}
.ht__pt{font-size:15px;color:var(--text-2);margin-top:2px;}
.ht__so{display:flex;gap:28px;flex-wrap:wrap;}
.ht__so li{display:flex;flex-direction:column;gap:2px;}
.ht__so b{font-size:18px;font-weight:700;}
.ht__so span{font-size:13px;color:var(--text-2);}

.ht__tien{
  border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-top:16px;
}
.ht__tienh{font-size:16px;font-weight:600;margin-bottom:10px;}
.ht__con{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--text-2);}
.ht__dinh{margin-top:16px;font-size:15px;color:var(--text-2);}

.ht__moi{
  border:1px solid var(--line);border-radius:16px;padding:28px 24px;
  background:var(--hover);max-width:560px;
}
.ht__moih{font-size:19px;font-weight:600;margin-bottom:8px;}
.ht__moi p{font-size:15px;color:var(--text-2);line-height:1.55;}
.ht__moi .btn-dark{
  display:inline-flex;align-items:center;min-height:var(--tap,48px);
  padding:0 22px;margin-top:18px;
}

.ht__h2{font-size:22px;font-weight:600;margin:40px 0 16px;}
/* ⚠️ Bảng phải cuộn TRONG khung của nó, đừng để cả trang cuộn ngang: cột
   "Điều kiện" là câu chữ nên ở 390px bảng rộng hơn màn hình. */
.ht__bangbox{overflow-x:auto;border:1px solid var(--line);border-radius:16px;}
.ht__bang{width:100%;border-collapse:collapse;min-width:520px;}
.ht__bang th,.ht__bang td{
  padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);
  font-size:15px;vertical-align:middle;
}
.ht__bang thead th{
  font-size:13px;font-weight:600;color:var(--text-2);background:var(--hover);
}
.ht__bang tbody tr:last-child th,.ht__bang tbody tr:last-child td{border-bottom:0;}
.ht__bang tbody th{display:flex;align-items:center;gap:10px;font-weight:600;}
.ht__bang .is-toi{background:var(--hover);}
.ht__nhan{
  padding:3px 10px;border-radius:999px;background:var(--text);color:#fff;
  font-size:11px;font-weight:700;
}
.ht__luat{
  display:flex;flex-direction:column;gap:10px;margin-top:20px;
  font-size:14px;color:var(--text-2);line-height:1.55;
}
.ht__luat li{padding-inline-start:16px;position:relative;}
.ht__luat li::before{content:"·";position:absolute;left:4px;font-weight:700;}

/* ---------- Danh hiệu (hạng thành viên) --------------------------------
   Dựng bằng `danhHieuHTML()` ở data.js — dùng chung khu khách và khu quản trị,
   nên khối này phải nằm ở styles.css. Màu lấy từ biến `--dh` mà hàm đó gán
   inline theo từng hạng.                                                  */
.dhieu{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  padding:2px 9px 2px 6px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--dh) 35%, transparent);
  background:color-mix(in srgb, var(--dh) 9%, #fff);
  color:var(--dh);
  font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1.6;
  white-space:nowrap;
}
.dhieu svg{
  width:13px;height:13px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.dhieu--to{
  margin-top:8px;padding:4px 12px 4px 9px;font-size:13px;
}
.dhieu--to svg{width:15px;height:15px;}

/* Danh hiệu ngay dưới email trong menu tài khoản */
.umenu__ai{display:block;min-width:0;}
.umenu__mail{display:block;}
.umenu__hang{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;}
.umenu__giam{font-size:12px;color:var(--text-2);}

/* Popover không có mục nào để chọn (ví dụ khu vực chưa có chỗ ở nào đang đăng) */
.popover__trong{padding:14px 4px;font-size:14px;color:var(--text-2);}

/* ---------- Khối "Cài ứng dụng" ở trang cá nhân ------------------------
   Thanh mời tự hiện chỉ xuất hiện một lần rồi 30 ngày sau mới hỏi lại, và
   trên desktop nhiều trình duyệt không hiện gì cả — khối này là lối vào luôn
   có mặt cho người muốn cài.                                             */
.caiapp{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;margin-top:36px;background:var(--hover);
}
.caiapp--xong{background:#fff;}
.caiapp__ic{
  width:30px;height:30px;flex:none;margin-top:2px;
  fill:none;stroke:var(--text);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.caiapp__chu{flex:1;min-width:220px;}
.caiapp__h{font-size:18px;font-weight:600;margin-bottom:6px;}
.caiapp__chu p{font-size:15px;color:var(--text-2);line-height:1.55;}
.caiapp__loi{margin-top:8px;font-size:14px;color:var(--text-2);font-weight:600;}
.caiapp__nut{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap,48px);padding:0 22px;white-space:nowrap;
}
@media (max-width:560px){
  .caiapp{padding:18px;}
  .caiapp__nut{width:100%;}
}

/* Điểm và số đánh giá trong hộp nổi bật là NÚT — bấm là cuộn xuống mục đánh
   giá. Giữ nguyên dáng của `.favbox__stat`, chỉ bỏ nền/viền mặc định của
   <button> và thêm dấu hiệu bấm được. */
.favbox__stat--nut{
  border:0;background:none;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:center;border-radius:12px;
}
.favbox__stat--nut:hover{background:var(--hover);}
.favbox__stat--nut:focus-visible{outline:2px solid var(--text);outline-offset:2px;}

/* Ô chứa khối "Cài ứng dụng" ở trang chủ. Nằm giữa lưới thẻ và footer, nên
   cần khoảng thở hai đầu; khối rỗng (đã cài rồi) thì KHÔNG chừa chỗ. */
.pwakhoi:empty{display:none;}
.pwakhoi{margin:8px auto 48px;max-width:900px;}