/* Booking Đà Lạt — bảng màu thông xanh & sương mù */

:root {
  --pine:      #1f6f5c;
  --pine-dark: #175546;
  --pine-soft: #e8f3f0;
  --ink:       #17232b;
  --body:      #4a5a66;
  --muted:     #7b8b97;
  --line:      #e2e8ec;
  --bg:        #f5f7f8;
  --card:      #ffffff;
  --ok:        #17795e;
  --ok-bg:     #e2f4ee;
  --warn:      #96650a;
  --warn-bg:   #fdf2dc;
  --bad:       #a92f38;
  --bad-bg:    #fdeaec;
  --info:      #1f5f95;
  --info-bg:   #e7f0f9;
  --radius:    10px;
  --shadow:    0 1px 2px rgba(23, 35, 43, .06), 0 4px 14px rgba(23, 35, 43, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.wrap { width: min(1180px, 100% - 2rem); margin-inline: auto; }

a { color: var(--pine); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--ink); line-height: 1.25; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0; }
small { font-size: .8rem; }
.muted { color: var(--muted); }

/* ---------- Thanh trên cùng ---------- */

.topbar {
  background: var(--pine);
  color: #fff;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 58px;
  flex-wrap: wrap;
}
.brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .2px;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; opacity: .9; }

.mainnav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.mainnav a {
  color: rgba(255, 255, 255, .82);
  padding: .4rem .7rem;
  border-radius: 7px;
  font-size: .9rem;
  white-space: nowrap;
}
.mainnav a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.mainnav a.on { background: rgba(255, 255, 255, .2); color: #fff; font-weight: 600; }

.userbox { display: flex; align-items: center; gap: .75rem; }
/* Góc tài khoản là LỐI VÀO trang Hồ sơ. Trước đây chỉ in tên dạng chữ thường
   nên không ai bấm được vào Hồ sơ, Phiên đăng nhập hay Dữ liệu của tôi. */
.userbox .who {
  display: flex; align-items: center; gap: .5rem; color: #fff;
  padding: .2rem .45rem; border-radius: 999px; line-height: 1.2;
}
.userbox .who:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.userbox .who > span { display: flex; flex-direction: column; }
.miniavt {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  flex: 0 0 30px; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(255, 255, 255, .22);
  color: #fff; font-weight: 700; font-size: .85rem;
}
.userbox .who strong { font-size: .85rem; }
.userbox .who small { color: rgba(255, 255, 255, .7); font-size: .72rem; }
.bell { position: relative; color: #fff; font-size: 1.1rem; }
.bell:hover { text-decoration: none; }
.dot {
  position: absolute; top: -6px; right: -10px;
  background: #e5484d; color: #fff;
  border-radius: 999px; font-size: .65rem; font-weight: 700;
  min-width: 17px; height: 17px; line-height: 17px; text-align: center;
  padding: 0 4px;
}
button.link {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: rgba(255, 255, 255, .8); font-size: .85rem; font-family: inherit;
}
button.link:hover { color: #fff; text-decoration: underline; }
.userbox form { margin: 0; }

/* ---------- Bố cục trang ---------- */

main.wrap { padding: 1.5rem 0 3rem; }
.pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.pageactions { display: flex; gap: .5rem; flex-wrap: wrap; }
.foot {
  color: var(--muted); font-size: .8rem;
  padding: 1.5rem 0; border-top: 1px solid var(--line);
}

/* ---------- Thẻ ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.cardhead {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: #fbfcfc;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.cardbody { padding: 1.1rem; }
.cardfoot {
  padding: .8rem 1.1rem; border-top: 1px solid var(--line); background: #fbfcfc;
}
.card > .tablewrap { margin: 0; }
.cardbody > .tablewrap:only-child { margin: -1.1rem; width: auto; }

.grid { display: grid; gap: 1.25rem; }
.grid.cols2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Số liệu ---------- */

.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .15rem;
}
.stat span { color: var(--muted); font-size: .78rem; text-transform: uppercase;
             letter-spacing: .4px; }
.stat strong { font-size: 1.45rem; color: var(--ink); font-weight: 700; }
.stat small { color: var(--muted); }

/* ---------- Bảng ---------- */

.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td {
  padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
th {
  background: #fbfcfc; color: var(--muted); font-weight: 600;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcfb; }
td .sub { display: block; color: var(--muted); font-size: .8rem; }

/* ---------- Nhãn trạng thái ---------- */

.badge {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.badge.ok   { background: var(--ok-bg);   color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad  { background: var(--bad-bg);  color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); }

/* ---------- Nút ---------- */

.btn, button.btn, a.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--pine); color: #fff; border: 1px solid var(--pine);
  padding: .5rem .9rem; border-radius: 8px; font-size: .88rem; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn:hover { background: #1a5f50; text-decoration: none; }
.btn.ghost { background: #fff; color: var(--pine); }
.btn.ghost:hover { background: var(--pine-soft); }
.btn.danger { background: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: #922932; }
.btn.small { padding: .3rem .6rem; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btnrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; margin: 0; }

/* ---------- Biểu mẫu ---------- */

.field { display: block; margin-bottom: .9rem; }
.field > span {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--body); margin-bottom: .3rem;
}
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=month], input[type=file],
select, textarea {
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: .9rem; background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(31, 111, 92, .25); border-color: var(--pine);
}
textarea { resize: vertical; }
.hint { display: block; color: var(--muted); margin-top: .25rem; }
.formgrid { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.checkline { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.checkline input { width: auto; }

/* ---------- Thanh lọc ---------- */

.filters {
  display: grid; gap: .75rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.filters .field { margin-bottom: 0; }

/* ---------- Thông báo & trạng thái rỗng ---------- */

.flash {
  background: var(--ok-bg); border: 1px solid #b9e2d5; color: var(--ok);
  padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem;
}
.alert {
  background: var(--bad-bg); border: 1px solid #f3c6ca; color: var(--bad);
  padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem;
}
.notice {
  background: var(--info-bg); border: 1px solid #c9dcef; color: var(--info);
  padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem;
}
.empty { text-align: center; padding: 2.25rem 1rem; color: var(--muted); }
.empty p { margin: 0 0 .3rem; }

/* ---------- Ảnh phòng ---------- */

.thumb {
  width: 64px; height: 48px; object-fit: cover; border-radius: 6px;
  background: var(--pine-soft); display: flex; align-items: center;
  justify-content: center; font-size: 1.2rem; flex: none;
}
.thumb.big { width: 100%; height: 150px; }

/* ---------- Lịch trống ---------- */

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar .dow {
  text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; padding-bottom: .25rem;
}
.day {
  border: 1px solid var(--line); border-radius: 7px; padding: .35rem .4rem;
  min-height: 62px; display: flex; flex-direction: column; gap: .1rem;
  background: #fff; font-size: .78rem;
}
.day.blank { border: 0; background: none; }
.day .num { font-weight: 700; color: var(--body); }
.day .price { color: var(--muted); font-size: .7rem; }
.day.free    { background: #fff; }
.day.booked  { background: var(--info-bg);  border-color: #c9dcef; }
.day.blocked { background: var(--bad-bg);   border-color: #f3c6ca; }
.day.past    { opacity: .45; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem;
          color: var(--muted); margin-top: .9rem; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
            border: 1px solid var(--line); margin-right: .3rem; vertical-align: -1px; }

/* ---------- Kết quả tìm phòng ---------- */

.roomcard {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  overflow: hidden; display: flex; flex-direction: column;
}
.roomcard .body { padding: .85rem 1rem; flex: 1; }
.roomcard h3 { margin: 0 0 .2rem; font-size: .98rem; }
.roomcard .meta { color: var(--muted); font-size: .82rem; margin: 0 0 .5rem; }
.roomcard .price { font-size: 1.15rem; font-weight: 700; color: var(--pine); }
.roomcard .foot { padding: .7rem 1rem; border-top: 1px solid var(--line);
                  background: #fbfcfc; }
.tag {
  display: inline-block; background: var(--pine-soft); color: var(--pine);
  padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
}

/* ---------- Nhắc gia hạn thuê bao ---------- */

.subbar {
  padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1.25rem;
  font-size: .9rem; display: flex; gap: .6rem; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.subbar a { font-weight: 600; white-space: nowrap; }
.subbar.warnbar {
  background: var(--warn-bg); border: 1px solid #f0dcae; color: var(--warn);
}
.subbar.warnbar a { color: var(--warn); }
.subbar.badbar {
  background: var(--bad-bg); border: 1px solid #f3c6ca; color: var(--bad);
}
.subbar.badbar a { color: var(--bad); }

.planlist { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--body);
            font-size: .85rem; }
.planlist li { margin-bottom: .2rem; }

/* ---------- Tin nhắn ---------- */

.navdot {
  display: inline-block; background: #e5484d; color: #fff;
  border-radius: 999px; font-size: .68rem; font-weight: 700;
  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  padding: 0 4px; margin-left: .35rem; vertical-align: 1px;
}
.chat {
  display: flex; flex-direction: column; gap: .55rem;
  max-height: 380px; overflow-y: auto; padding: .25rem;
  margin-bottom: 1rem;
}
.bubble { max-width: 76%; display: flex; flex-direction: column; gap: .2rem; }
.bubble .text {
  padding: .55rem .8rem; border-radius: 12px; font-size: .9rem;
  word-wrap: break-word; white-space: normal;
}
.bubble small { font-size: .7rem; color: var(--muted); }
.bubble.mine { align-self: flex-end; align-items: flex-end; }
.bubble.mine .text {
  background: var(--pine); color: #fff; border-bottom-right-radius: 3px;
}
.bubble.mine .text .tag { background: rgba(255,255,255,.22); color: #fff; }
.bubble.theirs { align-self: flex-start; }
.bubble.theirs .text {
  background: var(--pine-soft); color: var(--ink); border-bottom-left-radius: 3px;
}

/* ---------- Trang đăng nhập ---------- */

.authpage {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 2rem 1rem;
  background: linear-gradient(160deg, #1f6f5c 0%, #14413a 100%);
}
.authcard {
  background: #fff; border-radius: 14px; padding: 2rem;
  width: min(430px, 100%); box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.authbrand {
  font-size: 1.3rem; font-weight: 700; color: var(--pine);
  text-align: center; margin-bottom: .35rem;
}
.authcard h1 { font-size: 1.15rem; text-align: center; margin: 0 0 1.4rem;
               color: var(--body); font-weight: 500; }
.authcard .btn { width: 100%; justify-content: center; margin-top: .35rem; }
.authalt { text-align: center; margin-top: 1.1rem; font-size: .88rem;
           color: var(--muted); }
.demo {
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.7;
}
.demo code { background: var(--bg); padding: .1rem .35rem; border-radius: 4px;
             color: var(--body); }

/* ---------- Màn hình nhỏ ---------- */

@media (max-width: 760px) {
  .topbar .wrap { padding-block: .6rem; }
  .mainnav { order: 3; width: 100%; }
  .userbox .who { display: none; }
  .calendar { gap: 2px; }
  .day { min-height: 52px; font-size: .72rem; padding: .25rem; }
  h1 { font-size: 1.25rem; }
}

/* ---------- Album ảnh & video ---------- */

.mediagrid {
  display: grid; gap: .75rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.mediacard {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff;
}
.mediatile {
  width: 100%; height: 130px; object-fit: cover; display: block;
  background: var(--pine-soft);
}
.mediafoot {
  padding: .5rem .6rem; border-top: 1px solid var(--line);
  font-size: .78rem; display: flex; flex-direction: column; gap: .35rem;
}
.mediafoot .btnrow { gap: .3rem; }

/* ---------- Thanh tìm phòng (bố cục ngang) ---------- */
.searchbar {
  display: grid; gap: .6rem .8rem; align-items: end;
  grid-template-columns: 1.6fr 1.4fr 1fr 1fr .7fr auto;
}
.searchbar .field { margin-bottom: 0; min-width: 0; }
.sbgo .btn { width: 100%; padding: .62rem 1.4rem; white-space: nowrap; }

/* Khối nâng cao thu gọn — dùng <details>, không cần JavaScript */
.advanced { margin-top: .9rem; border-top: 1px solid var(--line); }
.advanced summary {
  cursor: pointer; list-style: none; padding: .7rem 0 .2rem;
  font-size: .86rem; font-weight: 600; color: var(--pine);
  display: flex; align-items: center; gap: .4rem;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before {
  content: "▸"; display: inline-block; transition: transform .15s;
  font-size: .8rem;
}
.advanced[open] summary::before { transform: rotate(90deg); }
.advbody { padding-top: .5rem; }
.filterrow {
  display: grid; gap: .6rem .8rem; align-items: end; margin-bottom: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.filterrow .field { margin-bottom: 0; }
.filterblock { margin-bottom: .9rem; }
.flabel {
  display: block; font-size: .78rem; font-weight: 600; color: var(--body);
  margin-bottom: .45rem;
}
.filterfoot {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  justify-content: space-between; border-top: 1px solid var(--line);
  margin-top: .5rem; padding-top: .8rem; font-size: .84rem;
}
.pill {
  display: inline-block; background: var(--pine); color: #fff;
  font-size: .72rem; font-weight: 700; min-width: 1.15rem; text-align: center;
  padding: .05rem .4rem; border-radius: 999px;
}

/* Ô tick dạng thẻ bấm — không cần JavaScript */
.chipset { display: flex; flex-wrap: wrap; gap: .4rem; }
.chipbox { cursor: pointer; }
.chipbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.chipbox span {
  display: inline-block; padding: .34rem .72rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--body);
  font-size: .82rem; line-height: 1.35; transition: .12s; user-select: none;
}
.chipbox:hover span { border-color: var(--pine); color: var(--pine); }
.chipbox input:checked + span {
  background: var(--pine); border-color: var(--pine); color: #fff;
  font-weight: 600;
}
.chipbox input:focus-visible + span {
  outline: 2px solid var(--pine); outline-offset: 2px;
}

/* ---------- Kết quả: thẻ cơ sở ---------- */
.reshead {
  padding: 0 0 .8rem; color: var(--body); font-size: .9rem;
  border-bottom: 1px solid var(--line); margin-bottom: .9rem;
}
.pcard {
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: .8rem; overflow: hidden; background: #fff;
  transition: box-shadow .15s;
}
.pcard:hover { box-shadow: var(--shadow); }
.phead { display: flex; gap: .9rem; padding: .8rem; align-items: flex-start; }
.phead .thumb.big {
  width: 118px; height: 88px; flex: 0 0 118px; object-fit: cover;
  border-radius: 8px; font-size: 1.8rem;
}
.pinfo { flex: 1 1 auto; min-width: 0; }
.pname { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.pname:hover { color: var(--pine); text-decoration: underline; }
.pmeta { color: var(--muted); font-size: .84rem; margin: .2rem 0 .45rem; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  background: var(--pine-soft); color: var(--pine-dark); font-size: .74rem;
  padding: .14rem .55rem; border-radius: 999px;
}
.chip.more { background: var(--line); color: var(--body); }
.pprice { text-align: right; flex: 0 0 auto; padding-left: .5rem; }
.pprice small { display: block; color: var(--muted); font-size: .75rem; }
.pprice strong {
  display: block; font-size: 1.3rem; color: var(--ok); line-height: 1.25;
}
.mline {
  display: inline-block; margin-top: .4rem; font-size: .75rem;
  color: var(--warn); background: var(--warn-bg); border-radius: 6px;
  padding: .15rem .45rem; white-space: nowrap;
}

/* Các phòng khớp điều kiện, lồng dưới cơ sở */
.rlist { border-top: 1px solid var(--line); background: #fafbfc; }
.rline {
  display: flex; align-items: center; gap: .75rem; padding: .48rem .8rem;
  border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--body);
}
.rline:last-child { border-bottom: 0; }
.rline:hover { background: var(--pine-soft); }
.rname { flex: 1 1 auto; font-weight: 600; color: var(--ink); }
.rcap { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.rprice { font-weight: 700; color: var(--ok); min-width: 96px; text-align: right; }
.rmargin {
  color: var(--warn); font-size: .78rem; min-width: 82px; text-align: right;
}

@media (max-width: 900px) {
  .searchbar { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .sbgo { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .phead { flex-wrap: wrap; }
  .phead .thumb.big { width: 100%; flex-basis: 100%; height: 150px; }
  .pprice { text-align: left; width: 100%; padding-left: 0; }
  .rline { flex-wrap: wrap; gap: .4rem; }
  .rprice, .rmargin { min-width: auto; text-align: left; }
}
.warnpill {
  display: inline-block; background: var(--warn-bg); color: var(--warn);
  font-size: .72rem; padding: .08rem .42rem; border-radius: 999px;
  margin-left: .3rem; white-space: nowrap;
}
.pprice .none { color: var(--muted); font-weight: 600; }
.rline.addroom { color: var(--pine); font-weight: 600; justify-content: center; }
.rbook { color: var(--pine); font-weight: 700; font-size: .82rem; min-width: 52px;
         text-align: right; }

/* ---------- Lịch lưới tháng (theo đúng file Excel đội bán đang dùng) ---------- */
.gnav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .7rem;
}
.gnav strong { font-size: 1.05rem; }
.glegend {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--body); margin-bottom: .8rem;
}
.gk {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--line); margin-left: .8rem;
}
.gk:first-child { margin-left: 0; }

.gwrap { overflow: auto; max-height: 78vh; border: 1px solid var(--line);
         border-radius: var(--radius); }
.gtable { border-collapse: separate; border-spacing: 0; font-size: .82rem;
          min-width: 100%; }
.gtable th, .gtable td { border-right: 1px solid var(--line);
                         border-bottom: 1px solid var(--line); }

/* Hàng tiêu đề dính trên, cột ngày dính trái — cuộn kiểu bảng tính */
.gtable thead th {
  position: sticky; top: 0; z-index: 3; background: var(--pine-soft);
  padding: .45rem .55rem; text-align: center; vertical-align: bottom;
}
.gcol { min-width: 128px; }
.gname { display: block; font-weight: 700; color: var(--ink); }
.gsub { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
.gday {
  position: sticky; left: 0; z-index: 2; background: #fff;
  min-width: 74px; padding: .3rem .5rem; text-align: left; white-space: nowrap;
}
.gtable thead .gday { z-index: 4; background: var(--pine-soft); }
.gday b { font-size: 1rem; margin-right: .3rem; }
.gday span { color: var(--muted); font-size: .74rem; }

.gcell { padding: 0; text-align: center; }
.gcell a { display: block; padding: .38rem .3rem; color: inherit; }
.gcell a:hover { text-decoration: underline; }
.gcost { display: block; font-size: .68rem; color: var(--warn); }

/* Quy ước màu giữ nguyên thói quen cũ trong file Excel */
.gfree             { background: #fff; color: var(--ink); }
.ghold, .gk.ghold  { background: #fdf2dc; color: var(--warn); font-weight: 600; }
.gbooked, .gk.gbooked { background: #fdeaec; color: var(--bad); font-weight: 600; }
.gblocked, .gk.gblocked { background: #eef1f3; color: var(--muted); }
.gk.gfree          { background: #fff; }
.gk.gcostk         { background: var(--warn-bg); }

.gweekend .gday, .gweekend .gcell.gfree { background: #f7faf9; }
.gtoday .gday { box-shadow: inset 3px 0 0 var(--pine); font-weight: 700; }

/* ---------- Link gửi khách + trang công khai ---------- */
.sharelink {
  width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: .86rem;
  background: var(--pine-soft); border-color: var(--pine);
}
.pshare { max-width: 780px; margin: 0 auto; }
.pshare h1 { font-size: 1.5rem; margin-bottom: .3rem; }
.pwhere { color: var(--muted); margin-bottom: 1rem; }
/* Thông tin cơ sở đọc theo chiều DỌC: mỗi dòng một mục, nhãn bên trái, nội
   dung bên phải. Trước đây xếp ngang thành lưới nên các mục dính sát nhau,
   mắt phải nhảy ngang mới đọc được — dọc thì lướt một mạch từ trên xuống. */
.pfacts { border-top: 1px solid var(--line); }
.pfact {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .55rem .1rem; border-bottom: 1px solid var(--line);
}
.pfact span {
  flex: 0 0 9.5rem; font-size: .84rem; color: var(--muted);
}
.pfact strong {
  flex: 1; font-size: .94rem; color: var(--ink); font-weight: 600;
}
@media (max-width: 520px) {
  .pfact { display: block; padding: .5rem .1rem; }
  .pfact span { font-size: .74rem; }
}
/* Mô tả thường được dán từ Zalo và xuống dòng sẵn. Giữ nguyên các dòng đó,
   không thì cả đoạn dồn thành một khối chữ liền không đọc nổi. */
.pdesc { white-space: pre-line; margin: .9rem 0; line-height: 1.6; }
/* Tổng tiền · đã cọc · còn lại. Ba con số phải đọc được trong một cái liếc. */
.paybox { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.paybox > div {
  flex: 1 1 10rem; background: var(--pine-soft); border-radius: 8px;
  padding: .6rem .8rem;
}
.paybox span { display: block; font-size: .78rem; color: var(--muted); }
.paybox strong { font-size: 1.15rem; }
.paybox .paid { color: var(--pine); }
.paybox .due { color: var(--warn); }
.paybox .ri-bad { flex: 1 1 100%; }
.policybox {
  width: 100%; white-space: pre-line; font-family: inherit; line-height: 1.6;
}

/* Nhãn cho biết căn này là nguồn riêng của saler nào. */
.chip.owner {
  background: var(--warn-bg); color: var(--warn); border-color: transparent;
  font-weight: 600;
}
.prules {
  background: var(--warn-bg); color: var(--warn); border-radius: 8px;
  padding: .6rem .8rem; margin: .8rem 0; font-size: .88rem;
}
.ptiles {
  display: grid; gap: .5rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.ptile img, .ptile video {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;
  display: block; background: var(--line);
}
.pnote {
  margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .86rem;
}
.copyrow { display: flex; gap: .5rem; align-items: stretch; }
.copyrow .sharelink { flex: 1 1 auto; min-width: 0; }
.copyrow .btn { white-space: nowrap; }
@media (max-width: 520px) { .copyrow { flex-wrap: wrap; } }

/* Khung thông tin căn trong màn hình tạo booking */
.roominfo:empty { display: none; }
.roominfo { margin-top: .5rem; }
.ri-row {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .84rem;
  color: var(--body); background: var(--pine-soft); border-radius: 8px;
  padding: .5rem .7rem;
}
.ri-warn, .ri-bad {
  margin-top: .4rem; padding: .4rem .7rem; border-radius: 8px;
  font-size: .84rem;
}
.ri-warn { background: var(--warn-bg); color: var(--warn); }
.ri-bad  { background: var(--bad-bg);  color: var(--bad); font-weight: 600; }
.wholebox {
  border: 1px solid var(--pine); border-radius: var(--radius);
  padding: .8rem 1rem; margin: 1rem 0; background: var(--pine-soft);
}
.wholebox h3 { margin-top: 0; }
.tiertable { width: 100%; font-size: .86rem; }
.tiertable th { text-align: left; font-size: .78rem; color: var(--body); }
.tiertable td { padding: .15rem .3rem .15rem 0; }
.tiertable input { margin: 0; }

/* Hai ô tích phụ thu giờ giấc trong biểu mẫu booking. */
.hourbox { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .4rem 0; }
.hourbox .checkline { margin: 0; }

/* Ô nhập tiền: chữ số dễ đối chiếu hơn khi các cột thẳng hàng nhau. */
.moneyinput { font-variant-numeric: tabular-nums; }

/* Nút con mắt hiện/ẩn mật khẩu.
   Gõ nhầm mật khẩu là lỗi hay gặp nhất lúc đăng ký — nhất là trên điện thoại,
   bàn phím ảo dễ chạm nhầm mà ô lại che hết ký tự. */
.pwwrap { position: relative; display: block; }
.pwwrap > input { padding-right: 2.8rem; }
.pweye {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: .3rem .4rem;
  font-size: 1rem; line-height: 1; border-radius: 6px; color: var(--muted);
}
.pweye:hover { background: var(--soft); }
.pweye:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }