/* =====================================================================
   Thien Vi Travel — 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{
  --brand:#FF385C;
  --brand-2:#E00B41;
  --brand-grad:linear-gradient(135deg,#FF385C 0%,#E61E4D 40%,#D70466 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 Thien Vi Travel đượ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{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 10px;
  color:var(--text-3);
  font-size:14px;font-weight:500;
  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:3;
    background:#fff;padding:4px 0 10px;margin-bottom:4px;
  }
  .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;
}
.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;} }
@media (max-width:743px){  :root{--cols:2;--gap:12px;} }
@media (max-width:479px){  :root{--cols:1.6;} }

/* --- 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ẻ (1,6)
   để 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;}

  .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: khách chưa đặt phòng chỉ thấy vòng tròn này, không thấy ghim.
   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(255,56,92,.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;}
.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;
}

/* 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);}
.tkncc__ic{
  display:grid;place-items:center;flex:none;
  width:24px;height:24px;border-radius:50%;
  color:#fff;font-weight:700;font-size:14px;
}

/* 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;}

.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" */
.ytrang{padding:32px 0 80px;}
.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:24px;
}
.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:24px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.ybo{display:block;color:inherit;min-width:0;}
/* Khối ảnh vuông: 4 ô ghép, 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. */
.ybo__anh{
  display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:var(--hover-2);box-shadow:var(--shadow-sm);
}
.ybo:hover .ybo__anh{box-shadow:var(--shadow-lg);}
.ybo__ghep{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:2px;width:100%;height:100%;
}
.ybo__ghep img{width:100%;height:100%;object-fit:cover;display:block;}
.ybo__ghep span{background:var(--hover-2);}
/* 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:12px;font-size:15px;font-weight:600;
  overflow-wrap:anywhere;
}
.ybo__so{display:block;font-size:14px;color:var(--text-2);margin-top:2px;}

/* =====================================================================
   TRANG CHUYẾN ĐI
   ===================================================================== */
.cdnhom{margin-bottom:36px;}
.cdnhom__h{font-size:20px;font-weight:600;margin-bottom:14px;}
.cdnhom__so{
  display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;
  border-radius:999px;background:var(--hover-2);color:var(--text-2);
  font-size:13px;font-weight:600;vertical-align:2px;
}

.cd{
  display:grid;grid-template-columns:132px minmax(0,1fr) auto;
  align-items:center;gap:20px;
  border:1px solid var(--line-2);border-radius:16px;
  padding:16px;margin-bottom:12px;
}
.cd:hover{box-shadow:var(--shadow-sm);}
.cd__anh{display:block;border-radius:12px;overflow:hidden;background:var(--hover-2);}
.cd__anh img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.cd__than{min-width:0;}
.cd__tt{
  display:inline-block;border-radius:999px;padding:3px 10px;margin-bottom:6px;
  background:var(--hover-2);color:var(--text-2);font-size:12px;font-weight:600;
}
.cd--ok{background:#DDF3EE;color:#0F7B6C;}
.cd--cho{background:#FFF3D6;color:#8A5B00;}
.cd__ten{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
.cd__noi{font-size:14px;color:var(--text-2);margin-top:2px;}
.cd__ngay{font-size:14px;margin-top:6px;}
.cd__gia{font-size:14px;font-weight:600;margin-top:2px;}
.cd__nut{display:flex;flex-direction:column;gap:8px;flex:none;}
.cd__nut .btn-outline,.cd__nut .btn-dark{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;text-decoration:none;white-space:nowrap;
}
.cd__xong{font-size:13px;color:#0F7B6C;font-weight:600;text-align:center;}

/* Khổ hẹp: ảnh và chữ trên một hàng, nút xuống hàng dưới chiếm hết bề ngang —
   để nguyên 3 cột thì cột nút ép cột chữ còn hơn trăm px. */
@media (max-width:743px){
  .cd{grid-template-columns:96px minmax(0,1fr);gap:14px;}
  .cd__nut{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;}
  .cd__nut .btn-outline,.cd__nut .btn-dark{flex:1;min-width:120px;}
}

/* =====================================================================
   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);
}

.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;}
.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;}
}