:root{
  --brand:#a85c32;
  --brand-dark:#8a4a27;
  --brand-light:#f3e4d8;
  --ink:#221a15;
  --ink-soft:#5a4f47;
  --paper:#fffaf6;
  --paper-alt:#f7efe8;
  --line:#e7dcd2;
  --green:#3f6b4f;
  --amber:#b8862b;
  --red:#a8433a;
  --radius:14px;
  --shadow:0 8px 24px rgba(34,26,21,0.08);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1160px;margin:0 auto;padding:0 24px;}

/* ---------- top nav ---------- */
.topnav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,250,246,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topnav .container{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding-top:12px;padding-bottom:12px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;letter-spacing:-0.02em;}
.brand .mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem;
}
.brand-logo{
  width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
/* Header brand mark (topnav only): 1.5x logo, 2x wordmark + slogan line,
   per explicit request (26/8). Admin sidebar and login card keep the
   original compact .brand size above — they weren't part of the ask. */
.topnav .brand{gap:16px;}
.topnav .brand-logo{width:51px;height:51px;}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.topnav .brand-title{display:block;font-weight:700;font-size:2.3rem;letter-spacing:-0.02em;}
.brand-slogan{
  display:block;margin-top:2px;font-style:italic;font-weight:400;
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.95rem;color:var(--ink-soft);letter-spacing:0;
}
@media(max-width:480px){
  /* Full 1.5x/2x size is tight on very small phones alongside the hamburger
     button — scale the header brand down a step there so nothing wraps or
     overlaps; tablet/desktop keep the full requested sizing. */
  .topnav .brand-logo{width:42px;height:42px;}
  .topnav .brand-title{font-size:1.7rem;}
  .brand-slogan{font-size:0.78rem;}
}
.navlinks{display:flex;gap:28px;align-items:center;}
.navlinks a{font-size:0.95rem;color:var(--ink-soft);font-weight:500;}
.navlinks a:hover{color:var(--brand-dark);}
.navlinks a.cta{
  background:var(--brand);color:#fff;padding:9px 18px;border-radius:999px;font-weight:600;
}
.navlinks a.cta:hover{background:var(--brand-dark);}

/* Nút chọn ngôn ngữ VI/EN trên thanh menu công khai (26/8) — 2 link nhỏ,
   ngôn ngữ đang chọn tô đậm màu thương hiệu, chữ còn lại mờ hơn. */
.lang-switch{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;}
.lang-switch a{color:var(--ink-soft);font-weight:600;}
.lang-switch a.active{color:var(--brand-dark);}
.lang-switch-sep{color:var(--line);}
@media(max-width:820px){
  .lang-switch{padding:14px 24px;border-bottom:1px solid var(--line);gap:8px;}
}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;border:none;background:none;cursor:pointer;padding:0;flex-shrink:0;
}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;}

/* Below ~820px the full link row no longer fits next to the brand mark,
   so it collapses behind a hamburger toggle instead of overflowing. */
@media(max-width:820px){
  .nav-toggle{display:flex;}
  .topnav .container{position:relative;}
  /* Bảng chọn thả xuống: nép về bên phải dưới nút 3 gạch và hẹp lại, thay vì
     kéo hết chiều ngang màn hình như trước — nhìn ra ngay là một bảng riêng,
     không lẫn vào nền trang. */
  .navlinks{
    position:absolute;top:calc(100% + 8px);left:auto;right:16px;
    width:min(260px,calc(100vw - 32px));
    background:#fff;border:1px solid var(--line);border-radius:14px;
    flex-direction:column;align-items:stretch;gap:0;padding:0;
    max-height:0;overflow:hidden;transition:max-height .22s ease;
  }
  .navlinks.open{max-height:400px;padding:10px;box-shadow:0 12px 32px rgba(34,26,21,0.18);}
  /* Mỗi mục là một khung riêng có nền và viền -> tách hẳn khỏi nền trang. */
  .navlinks a{
    padding:12px 16px;border:1px solid var(--line);border-radius:10px;
    background:var(--paper-alt);font-size:1rem;font-weight:600;color:var(--ink);
    margin-bottom:8px;text-align:center;
  }
  .navlinks a.cta{margin:0 0 8px;text-align:center;justify-content:center;border-color:transparent;}
  /* Mục quản trị: nhạt hơn hẳn và tách xuống dưới cùng bằng một đường kẻ,
     để khách thuê không nhầm đó là chỗ dành cho mình. */
  .navlinks a.nav-quantri{
    margin-bottom:0;background:transparent;border-color:transparent;
    color:var(--ink-soft);font-weight:500;font-size:0.9rem;
    border-top:1px solid var(--line);border-radius:0;padding-top:14px;margin-top:2px;
  }
}
/* Trên máy tính, mục quản trị chỉ là chữ nhỏ mờ nằm cuối hàng menu. */
.navlinks a.nav-quantri{color:var(--ink-soft);font-size:0.88rem;}
.navlinks a.nav-quantri:hover{color:var(--brand-dark);}

/* ---------- hero ---------- */
.hero{
  padding:64px 0 40px;
  background:radial-gradient(1100px 420px at 15% -10%, var(--brand-light), transparent),
             linear-gradient(180deg,var(--paper),var(--paper-alt));
  border-bottom:1px solid var(--line);
}
.hero h1{
  font-size:clamp(2rem,4vw,2.8rem);
  line-height:1.12;letter-spacing:-0.03em;margin:0 0 14px;
}
.hero p.lead{font-size:1.08rem;color:var(--ink-soft);max-width:560px;margin:0 0 28px;}
.hero-stats{display:flex;gap:34px;margin-top:36px;flex-wrap:wrap;}
.hero-stat b{display:block;font-size:1.6rem;letter-spacing:-0.02em;}
.hero-stat span{font-size:0.85rem;color:var(--ink-soft);}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:0.95rem;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease;
  white-space:nowrap;   /* chữ trong nút không bao giờ xuống dòng làm méo nút */
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--brand);color:var(--brand-dark);}
.btn-sm{padding:8px 16px;font-size:0.85rem;}

/* ---------- search bar ---------- */
/* Lưới thay cho flex: cột không bao giờ rộng hơn khung, nên các ô không thể
   tràn ra ngoài và đè lên nhau như bản cũ (min-width:150px của flex làm ô
   không chịu co lại trên màn hình hẹp). */
.searchbar{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-top:8px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;align-items:end;
}
.searchbar .field{min-width:0;}
.searchbar > button{justify-self:start;}
@media(max-width:520px){
  /* Điện thoại: ép đúng 2 cột co giãn được, gọn mà vẫn đủ rộng để bấm. */
  .searchbar{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px;gap:12px;}
  .searchbar > button{grid-column:1 / -1;justify-self:stretch;justify-content:center;}
}
.field label{display:block;font-size:0.78rem;color:var(--ink-soft);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.field select,.field input{
  width:100%;max-width:100%;min-width:0;
  padding:11px 12px;border-radius:9px;border:1px solid var(--line);
  font-size:0.92rem;background:var(--paper);color:var(--ink);font-family:inherit;
}
/* iPhone tự đặt bề rộng tối thiểu cho ô chọn ngày, bất kể mình khai width —
   đó là lý do 2 ô "Nhận phòng"/"Trả phòng" đè lên nhau. Tắt kiểu mặc định
   của hệ điều hành thì ô mới chịu co theo cột. */
.field input[type="date"]{
  -webkit-appearance:none;appearance:none;min-height:44px;
}
.field select:focus,.field input:focus{outline:2px solid var(--brand-light);border-color:var(--brand);}

/* ---------- section ---------- */
.section{padding:56px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;gap:20px;flex-wrap:wrap;}
.section-head h2{font-size:1.7rem;letter-spacing:-0.02em;margin:0 0 6px;}
.section-head p{color:var(--ink-soft);margin:0;}
.eyebrow{font-size:0.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:8px;display:block;}

/* ---------- building cards ---------- */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.grid-3{grid-template-columns:1fr;}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(34,26,21,0.12);}
.card-cover{height:150px;display:flex;align-items:flex-end;padding:16px;color:#fff;position:relative;}

.video-embed-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:#000;}
.video-embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.card-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,0.35));}
.card-cover .cover-title{position:relative;font-weight:700;font-size:1.15rem;z-index:1;}
.card-body{padding:18px 18px 20px;}
.card-body .addr{color:var(--ink-soft);font-size:0.88rem;margin:2px 0 12px;}
/* flex-wrap + nowrap: trên màn hình hẹp, các mục xuống dòng nguyên khối thay
   vì bị bóp cho chữ vỡ ra từng chữ một (nút Tải xuống trước đây méo vì vậy). */
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  font-size:0.84rem;color:var(--ink-soft);margin-bottom:14px;}
.card-meta > *{white-space:nowrap;}
.card-meta b{color:var(--ink);}
.pill{
  display:inline-block;padding:3px 11px;border-radius:999px;font-size:0.76rem;font-weight:700;
}
.pill-available{background:#e8f2ea;color:var(--green);}
.pill-occupied{background:#f4e6e4;color:var(--red);}
.pill-maintenance{background:#fbeed2;color:var(--amber);}
.pill-hold{background:#eae7f5;color:#5b4fa8;}
/* 2026-08-26: 4 trạng thái phòng tính động theo lịch booking (thay cho ô
   chọn tay available/occupied/maintenance/hold cũ — 2 class phía trên vẫn
   giữ nguyên vì được dùng lại cho pill tiện ích/trạng thái yêu cầu liên hệ,
   không liên quan đến trạng thái phòng nữa). Đỏ càng đậm là càng "bận". */
.pill-vacant{background:#e8f2ea;color:var(--green);}
.pill-arriving_soon{background:#eae7f5;color:#5b4fa8;}
.pill-leaving_soon{background:#fbeed2;color:var(--amber);}

/* ---------- room detail page ---------- */
.room-detail-grid{display:grid;grid-template-columns:1.3fr 0.9fr;gap:32px;align-items:start;}
@media(max-width:900px){.room-detail-grid{grid-template-columns:1fr;}}

/* Chính sách & dịch vụ của toà nhà — chia 3 cột cân đối (columns tự cân
   bằng theo chiều cao, không phải chia đều số dòng cho từng cột). */
.policy-cols{columns:3;column-gap:28px;margin:0;padding:0;list-style:none;}
@media(max-width:820px){.policy-cols{columns:2;}}
@media(max-width:560px){.policy-cols{columns:1;}}
.policy-cols li{
  break-inside:avoid-column;-webkit-column-break-inside:avoid;
  display:flex;gap:8px;align-items:flex-start;margin-bottom:12px;font-size:0.92rem;line-height:1.45;
}
.policy-cols li::before{
  content:"✓";color:var(--green);font-weight:700;flex:none;line-height:1.45;
}

.room-gallery{margin-bottom:22px;}
.gallery-main{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--paper-alt);
  width:100%;max-width:100%;margin-left:auto;margin-right:auto;aspect-ratio:4/3;
}
/* Dải ảnh cuộn ngang: các ảnh nằm cạnh nhau, mỗi ảnh rộng đúng bằng khung.
   scroll-snap-type:x mandatory = thả tay ra thì tự bám vào đúng một ảnh,
   không bao giờ dừng ở giữa hai ảnh. Đây là cơ chế cuộn gốc của trình duyệt
   nên có đà quán tính và mượt y như duyệt ảnh trong máy. */
.gallery-track{
  display:flex;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
}
.gallery-track::-webkit-scrollbar{display:none;}   /* giấu thanh cuộn */
.gallery-slide{
  flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
}
.gallery-main img{width:100%;height:100%;object-fit:contain;display:block;
  -webkit-user-drag:none;user-select:none;}
.gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(34,26,21,0.45);color:#fff;font-size:1.35rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.gallery-arrow:hover{background:rgba(34,26,21,0.7);}
.gallery-arrow-prev{left:12px;}
.gallery-arrow-next{right:12px;}
.gallery-counter{
  position:absolute;bottom:10px;right:12px;
  background:rgba(34,26,21,0.55);color:#fff;font-size:0.78rem;font-weight:600;
  padding:3px 10px;border-radius:999px;
}
.gallery-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.gallery-thumb{
  width:88px;height:64px;object-fit:cover;border-radius:8px;border:2px solid transparent;
  cursor:pointer;transition:border-color .15s ease,opacity .15s ease;opacity:.7;
}
.gallery-thumb:hover{opacity:1;}
.gallery-thumb.active{border-color:var(--brand);opacity:1;}

.gallery-main{-webkit-user-select:none;user-select:none;}
.gallery-arrow{opacity:.85;}
@media(hover:none){
  /* Trên điện thoại KHÔNG hiện mũi tên: thao tác duy nhất là kéo ngang bằng
     ngón tay, đúng thói quen duyệt ảnh, và ảnh không bị nút che góc. */
  .gallery-arrow{display:none;}
}
@media(max-width:600px){
  /* Ảnh nhỏ xếp thành một hàng cuộn ngang thay vì xuống nhiều dòng —
     đỡ chiếm chỗ, và cuộn cùng chiều với thao tác vuốt ảnh lớn. */
  .gallery-thumbs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .gallery-thumbs .gallery-thumb{flex:0 0 auto;scroll-snap-align:start;}
}
@media(max-width:480px){
  .gallery-thumb{width:72px;height:54px;}
}

/* ---------- room list ---------- */
.room-row{
  display:grid;grid-template-columns:96px 1.6fr 1fr 1fr auto;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;
}
@media(max-width:800px){.room-row{grid-template-columns:1fr;}}
.room-thumb{
  width:96px;height:72px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:0.85rem;
}
.room-code{font-weight:700;font-size:1.02rem;}
.room-sub{color:var(--ink-soft);font-size:0.85rem;}
.price{font-weight:700;color:var(--brand-dark);font-size:1.05rem;}
.price small{font-weight:500;color:var(--ink-soft);font-size:0.78rem;}

.empty-state{
  text-align:center;padding:60px 20px;color:var(--ink-soft);
  border:1px dashed var(--line);border-radius:var(--radius);
}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}
.form-grid .full{grid-column:1/-1;}
.form-grid label{display:block;font-size:0.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--line);
  font-family:inherit;font-size:0.94rem;background:var(--paper);color:var(--ink);
}
.form-grid textarea{min-height:96px;resize:vertical;}

/* Trang xem chi tiết (hợp đồng, hoá đơn): đề mục cố định (label) có nền màu
   gần giống nền trang, không viền — để tách biệt với phần giá trị bên dưới
   (nền trắng của form-card) — yêu cầu anh Trung 29/8/2026. */
.detail-fields label{
  background:var(--paper-alt);border:none;border-radius:6px;
  padding:5px 10px;margin-bottom:8px;
}
.detail-fields > div > div{padding:0 2px;font-size:0.98rem;font-weight:600;color:var(--ink);}

/* Chọn "Thuê ngắn hạn / dài hạn" bằng 2 thẻ tick nằm cạnh nhau (thay cho
   select cũ) trên form đặt phòng công khai, kèm dòng ưu đãi hiện theo lựa
   chọn — yêu cầu anh Trung 29/8/2026. */
.rental-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:480px){.rental-choice-grid{grid-template-columns:1fr;}}
.form-grid .choice-card{
  display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;cursor:pointer;font-weight:600;font-size:0.92rem;margin:0;
  transition:border-color .15s ease, background .15s ease;
}
.form-grid .choice-card input[type="radio"]{width:auto;flex:none;accent-color:var(--brand);}
.form-grid .choice-card:has(input:checked){border-color:var(--brand);background:var(--brand-light);}
.rental-promo{
  display:none;margin-top:10px;padding:10px 12px;border-radius:9px;background:var(--brand-light);
  color:var(--brand-dark);font-size:0.84rem;font-weight:600;line-height:1.5;
}

/* Dynamic Check-in/Check-out booking rows on the room edit/add form
   ("+ Thêm booking") — each row is its own little 2-col + remove-button
   grid, independent of the outer .form-grid's own 2-column layout. */
.booking-row{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end;margin-bottom:12px;}
.booking-row:last-child{margin-bottom:0;}
.booking-remove{
  height:44px;padding:0 14px;border-radius:9px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-soft);font-weight:700;font-size:0.9rem;cursor:pointer;
}
.booking-remove:hover{border-color:var(--red);color:var(--red);}
.booking-row-note{grid-column:1/-1;margin-top:-6px;}
@media(max-width:520px){
  .booking-row{grid-template-columns:1fr 1fr;}
  .booking-remove{grid-column:1/-1;justify-self:start;margin-top:-2px;}
}

/* 2026-08-26: booking rows now also list bookings that came from elsewhere
   (the room's own /lich page manual blocks, and Airbnb/iCal sync) so staff
   see every booking in one place. Those aren't editable here — no date
   inputs, no remove button — so they get a plain read-only strip instead of
   the 3-column input grid above. */
.booking-row-synced{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:9px;padding:12px 14px;
}
.booking-synced-dates{display:flex;align-items:center;gap:10px;font-weight:600;flex-wrap:wrap;}
.booking-row-synced .booking-row-note{margin-top:6px;}

/* Thanh "Lưu thay đổi" dính đáy màn hình trên form thêm/sửa phòng — luôn
   hiện, không phụ thuộc cuộn trang, để phòng có nhiều ảnh/video (form rất
   dài) vẫn dễ dàng lưu mà không cần cuộn xuống tận cuối trang. */
.room-form-stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(34,26,21,0.1);
  padding:12px 20px;display:flex;align-items:center;gap:12px;justify-content:center;
}

.flash{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:0.92rem;font-weight:500;}
.flash-success{background:#e8f2ea;color:var(--green);}
.flash-error{background:#f4e6e4;color:var(--red);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:36px 0;margin-top:40px;color:var(--ink-soft);font-size:0.88rem;}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}

/* ---------- admin shell ---------- */
.admin-shell{display:flex;min-height:100vh;}
.admin-sidebar{
  width:230px;background:var(--ink);color:#f2e9e0;padding:22px 16px;flex-shrink:0;
}
.admin-sidebar .brand{color:#fff;margin-bottom:28px;padding:0 8px;}
.admin-sidebar a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  font-size:0.92rem;color:#d8ccc1;font-weight:500;margin-bottom:2px;
}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,0.08);color:#fff;}
.admin-main{flex:1;padding:32px 36px;background:var(--paper-alt);min-height:100vh;}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;}
.admin-topbar h1{font-size:1.5rem;margin:0;letter-spacing:-0.02em;}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;}
.stat-card .num{font-size:1.7rem;font-weight:700;letter-spacing:-0.02em;}
.stat-card .lbl{color:var(--ink-soft);font-size:0.82rem;margin-top:2px;}

table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;}
table th,table td{padding:12px 14px;text-align:left;font-size:0.9rem;border-bottom:1px solid var(--line);}
table th{background:var(--paper-alt);font-weight:700;color:var(--ink-soft);font-size:0.78rem;text-transform:uppercase;letter-spacing:.04em;}
table tr:last-child td{border-bottom:none;}
.table-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;}
.filter-row select,.filter-row input{padding:9px 12px;border-radius:8px;border:1px solid var(--line);font-family:inherit;font-size:0.88rem;}

.status-select{padding:6px 8px;border-radius:7px;border:1px solid var(--line);font-family:inherit;font-size:0.82rem;}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper-alt);}
.login-card{width:360px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);}
.login-card .brand{justify-content:center;margin-bottom:6px;}
.login-card p.sub{text-align:center;color:var(--ink-soft);margin:0 0 24px;font-size:0.9rem;}
/* Ô "Ghi nhớ đăng nhập" ở trang đăng nhập (anh Trung 29/8/2026). */
.remember-row{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:0.86rem;font-weight:500;color:var(--ink-soft);margin:0;
}
.remember-row input[type="checkbox"]{width:auto;flex:none;margin:0;accent-color:var(--brand);}

.icon-btn{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:0.85rem;}
.icon-btn:hover{color:var(--red);}

/* ---------- Toà nhà: bấm vào tên toà nhà -> mở rộng ngay bên dưới 1 bảng
   đầy đủ các phòng của toà đó, bấm "Sửa phòng" để vào thẳng trang Sửa phòng.
   Đổi từ hover-popover (2026-08-29, theo phản hồi anh Trung: hover dễ bị
   tuột chuột, khó bắt đúng ô) sang bấm-để-mở, nằm ngay trong luồng trang
   (không phải lớp nổi) nên không còn bị mất khi rê chuột. ---------- */
.bname-toggle{
  display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  padding:4px 0;font:inherit;text-align:left;
}
.bname-toggle-arrow{color:var(--ink-soft);font-size:0.72rem;width:10px;flex:none;}
.rooms-row-inner{background:var(--paper-alt);padding:16px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.rooms-subtable{width:100%;border-collapse:collapse;background:transparent;border-radius:0;overflow:visible;}
.rooms-subtable th,.rooms-subtable td{padding:9px 10px;text-align:left;font-size:0.86rem;border-bottom:1px solid var(--line);background:transparent;}
.rooms-subtable th{color:var(--ink-soft);font-size:0.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.rooms-subtable tr:last-child td{border-bottom:none;}

/* ---------- floating Zalo / WhatsApp chat buttons (public site only) ---------- */
.chat-fab-group{
  position:fixed;right:20px;bottom:20px;z-index:200;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
}
.chat-fab{
  display:flex;align-items:center;height:52px;width:52px;border-radius:50%;
  color:#fff;box-shadow:0 6px 18px rgba(34,26,21,0.24);
  overflow:hidden;white-space:nowrap;
  transition:width .18s ease, border-radius .18s ease;
}
.chat-fab-icon{width:52px;height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.chat-fab-icon svg{width:26px;height:26px;}
.chat-fab-icon.text{font-size:0.76rem;font-weight:800;letter-spacing:-0.01em;}
.chat-fab-label{font-size:0.88rem;font-weight:600;opacity:0;padding-right:18px;transition:opacity .12s ease;}
.chat-fab:hover{width:172px;border-radius:26px;}
.chat-fab:hover .chat-fab-label{opacity:1;}
.chat-fab.whatsapp{background:#25d366;}
.chat-fab.zalo{background:#0068ff;}
@media(max-width:480px){
  .chat-fab-group{right:14px;bottom:14px;gap:10px;}
  .chat-fab,.chat-fab-icon{width:46px;height:46px;}
  .chat-fab-icon svg{width:22px;height:22px;}
  .chat-fab:hover{width:154px;}
}

/* ---------- Building availability calendar (admin, kiểu Airbnb) ---------- */
.cal-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.cal-range{font-weight:700;color:var(--ink);}
.cal-legend{display:flex;gap:18px;margin-left:auto;font-size:0.9rem;color:var(--ink-soft);flex-wrap:wrap;}
.cal-legend-item{display:inline-flex;align-items:center;gap:8px;}
/* Chú thích của bảng lịch toà nhà — cũng to gấp đôi và ô "đã có khách" mang
   dấu ✓ giống hệt ô trong bảng. */
.cal-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;flex:0 0 auto;
  font-size:0.8rem;font-weight:800;line-height:1;font-style:normal;
}
.cal-dot-free{background:#dcefe0;border:1px solid #bfe0c7;}
.cal-dot-busy{background:#f0d9d6;border:1px solid #e0b6b0;color:#b5847d;}

/* 2026-08-26: sửa lỗi anh Trung báo — "khi cuộn lịch này xuống để xem các
   phòng bên dưới thì dòng hiển thị ngày sẽ bị trôi lên và ko nhìn thấy
   ngày". Hai phần:
   1) `.cal-wrap` cuộn DỌC trong chính khung này (thay vì để cả trang cuộn),
      nhờ overflow:auto + max-height. (CSS quy định hễ overflow-x khác
      "visible" thì overflow-y tự động thành "auto" theo — nên khung này vốn
      dĩ đã luôn là vùng cuộn dọc riêng, chỉ là trước đây không giới hạn
      chiều cao nên chẳng bao giờ tự cuộn, khiến dòng ngày dính bên trong nó
      thay vì dính theo cửa sổ trình duyệt — đã kiểm chứng bằng Playwright.)
   2) Bản thân `.cal-wrap` cũng tự dính (position:sticky) ngay dưới thanh
      menu trên cùng khi cuộn TRANG xuống — nếu không, khi cuộn trang đủ xa,
      mép trên của khung lịch sẽ trôi ra sau thanh menu (menu đè lên), làm
      dòng ngày bị che mất y hệt lỗi cũ, dù nó vẫn "dính" đúng bên trong
      khung. `--topnav-h` là chiều cao thật thanh menu (đo bằng JS trong
      base.html, chỉ trang công khai mới có menu dính nên mới cần chừa chỗ;
      trang admin không có nên biến này không được set, mặc định về 0 — khi
      đó khung lịch tự dính sát đỉnh màn hình). Đã kiểm chứng cả 2 phần bằng
      Playwright: dòng ngày luôn nằm ngay dưới mép trên của khung lịch, và
      khung lịch luôn nằm ngay dưới thanh menu dù cuộn trang tới đâu. */
.cal-wrap{
  position:sticky;top:var(--topnav-h,0px);
  overflow:auto;max-height:min(620px,65vh);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  cursor:grab;scrollbar-width:auto;
}
.cal-wrap.dragging{cursor:grabbing;user-select:none;}
.cal-wrap::-webkit-scrollbar{height:12px;}
.cal-wrap::-webkit-scrollbar-track{background:var(--paper-alt);}
.cal-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2px solid var(--paper-alt);}
.cal-wrap::-webkit-scrollbar-thumb:hover{background:var(--brand-light);}
.cal-grid{
  display:grid;grid-auto-rows:minmax(46px,auto);width:max-content;min-width:100%;
}
.cal-cell{
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.cal-sticky{
  position:sticky;left:0;z-index:2;background:#fff;
}
/* Dòng hiển thị ngày + ô góc "Phòng" dính vào đỉnh của `.cal-wrap` (xem giải
   thích ở khối `.cal-wrap` phía trên) khi cuộn dọc bên trong khung lịch. */
.cal-corner{
  position:sticky;top:0;z-index:6;
  background:var(--paper-alt);font-size:0.78rem;font-weight:700;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;
}
.cal-daylabel{
  position:sticky;top:0;z-index:5;
  flex-direction:column;gap:2px;padding:6px 2px;background:var(--paper-alt);
}
.cal-dow{font-size:0.66rem;color:var(--ink-soft);text-transform:uppercase;}
.cal-daynum{font-size:0.72rem;font-weight:700;color:var(--ink);}
.cal-sun .cal-dow, .cal-sun .cal-daynum{color:var(--brand-dark);}
.cal-today{box-shadow:inset 0 0 0 2px var(--brand);}

.cal-roominfo{
  justify-content:flex-start;gap:10px;padding:8px 12px;text-align:left;
}
.cal-thumb{
  width:48px;height:40px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--paper-alt);
}
.cal-thumb-empty{border:1px dashed var(--line);}
.cal-roomtext{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cal-roomtext a{color:var(--ink);font-size:0.9rem;}
.cal-roomtext a:hover{color:var(--brand-dark);}
.cal-roomprice{font-size:0.74rem;color:var(--ink-soft);}

.cal-day{height:100%;}
.cal-day-free{background:#f3faf4;}
.cal-day-busy{background:#faf1ef;}
.cal-day-busy::after{content:"✓";display:block;font-size:0.85rem;font-weight:800;line-height:1;color:#b5847d;}
.cal-day-free::after{content:"";display:block;width:70%;height:6px;border-radius:3px;background:#bfe0c7;}
.cal-empty-msg{padding:22px;color:var(--ink-soft);justify-content:flex-start;}

/* Public building calendar: clickable date-range picking */
.cal-day-pick{cursor:pointer;}
.cal-day-pick:hover::after{background:var(--brand);}
.cal-day.selected{background:var(--brand-light) !important;box-shadow:inset 0 0 0 2px var(--brand);}
.cal-day.selected::after{background:var(--brand-dark) !important;}

.cal-selectbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(34,26,21,0.1);
  padding:14px 20px;display:none;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;
}
.cal-selectbar.open{display:flex;}
.cal-selectbar span{font-weight:600;color:var(--ink);}

/* ---------- Room detail: Airbnb-style month calendar ---------- */
.monthcal{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-top:20px;
}
.monthcal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.monthcal-title{font-weight:700;font-size:1rem;color:var(--ink);}
.monthcal-nav{display:flex;gap:8px;}
.monthcal-nav a, .monthcal-nav span{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;border:1px solid var(--line);color:var(--ink);font-weight:700;
}
.monthcal-nav a:hover{border-color:var(--brand);color:var(--brand-dark);}
.monthcal-nav span{opacity:0.35;}
.monthcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.monthcal-dow{text-align:center;font-size:0.72rem;color:var(--ink-soft);text-transform:uppercase;padding-bottom:6px;}
.monthcal-day{
  aspect-ratio:1/1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:0.86rem;color:var(--ink);background:#f3faf4;cursor:pointer;gap:1px;
}
.monthcal-day.empty{background:transparent;cursor:default;}
.monthcal-day.busy{background:#faf1ef;color:#b5847d;cursor:not-allowed;}
.monthcal-day.past{background:var(--paper-alt);color:var(--ink-soft);cursor:not-allowed;opacity:0.55;}
.monthcal-day.today{box-shadow:inset 0 0 0 2px var(--brand);}
/* Ngày đã chọn: nền hồng + viền nâu (thay cho khối nâu đặc trước đây) —
   trùng với cách bảng lịch toà nhà đánh dấu cột ngày đang chọn, và vẫn phân
   biệt rõ với ngày đã có khách vì ngày đó không có viền. */
.monthcal-day.selected{
  background:#fae3dc !important;color:var(--brand-dark);
  box-shadow:inset 0 0 0 2px var(--brand);
}
.monthcal-day.in-range{background:var(--brand-light) !important;}
.monthcal-daynum{font-weight:700;}
.monthcal-check{font-size:0.72rem;font-weight:800;color:#b5847d;line-height:1;}
/* Ô chú thích to gấp đôi (11px -> 22px) và vẽ đúng như ô ngày thật: ô "đã có
   khách" mang luôn dấu ✓, ô "ngày đã chọn" là nền hồng viền nâu. Nhìn chú
   thích là đối chiếu được ngay với lịch phía trên. */
.monthcal-legend{display:flex;gap:18px;margin-top:14px;font-size:0.88rem;color:var(--ink-soft);flex-wrap:wrap;}
.monthcal-legend span{display:inline-flex;align-items:center;gap:8px;}
.monthcal-legend i{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;flex:0 0 auto;
  font-size:0.8rem;font-weight:800;line-height:1;font-style:normal;
}
.monthcal-legend i.lg-free{background:#f3faf4;border:1px solid var(--line);}
.monthcal-legend i.lg-busy{background:#faf1ef;border:1px solid var(--line);color:#b5847d;}
.monthcal-legend i.lg-sel{background:#fae3dc;border:2px solid var(--brand);}


/* ---------- ô nhập ngày kiểu Việt Nam (dd/mm/yyyy) ---------- */
/* Ô chữ + nút lịch nằm chung một khối; ô gốc type=date đã bị giấu (xem
   static/js/ngay-vn.js) nhưng vẫn giữ name/value để gửi lên máy chủ. */
.ngay-vn-boc{position:relative;display:block;width:100%;}
.ngay-vn-boc > input{padding-right:40px;}
.ngay-vn-nut{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:none;background:transparent;cursor:pointer;
  font-size:1rem;line-height:1;border-radius:7px;padding:0;
}
.ngay-vn-nut:hover{background:var(--paper-alt);}
.ngay-vn-loi{border-color:var(--red) !important;}

.lich-vn{
  position:absolute;z-index:9999;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 10px 30px rgba(34,26,21,0.18);padding:10px;
  width:268px;font-size:0.88rem;
}
.lich-vn-dau{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.lich-vn-dau span{font-weight:700;}
.lich-vn-dau button{
  width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:8px;
  cursor:pointer;font-size:1.1rem;line-height:1;padding:0;
}
.lich-vn-dau button:hover{background:var(--paper-alt);}
.lich-vn-luoi{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.lich-vn-thu{
  text-align:center;font-size:0.72rem;font-weight:700;color:var(--ink-soft);
  padding:4px 0;text-transform:uppercase;
}
.lich-vn-ngay{
  aspect-ratio:1/1;border:none;background:transparent;border-radius:8px;
  cursor:pointer;font-size:0.85rem;color:var(--ink);font-family:inherit;padding:0;
}
.lich-vn-ngay:hover{background:var(--paper-alt);}
.lich-vn-ngay.homnay{box-shadow:inset 0 0 0 1px var(--brand);font-weight:700;}
.lich-vn-ngay.chon{background:var(--brand);color:#fff;font-weight:700;}
.lich-vn-chan{display:flex;gap:8px;margin-top:8px;}
.lich-vn-chan button{
  flex:1;padding:7px;border:1px solid var(--line);background:#fff;border-radius:8px;
  cursor:pointer;font-size:0.8rem;font-family:inherit;color:var(--ink-soft);
}
.lich-vn-chan button:hover{background:var(--paper-alt);color:var(--ink);}