/* WS-CHOTHUETS — một tệp kiểu dáng cho cả phần ngoài và phần quản lý.
   Đổi tệp này thì phải tăng config.assetVer, không thì trình duyệt giữ bản cũ. */
/* Màu lấy từ cây đang tươi tốt, không phải màu xanh bạc phếch.
   --chinh là màu chữ và màu nút, nên phải đủ đậm để đọc được trên nền trắng:
   #14803c cho tỉ lệ tương phản 5,0 — đạt mức AA cho cả cỡ chữ thường. */
:root {
  --nen: #eef5ec;
  --giay: #ffffff;
  --muc: #0f2318;
  --mo: #566a5c;
  --vien: #cfe2d2;
  --chinh: #14803c;
  --chinh-dam: #0c5729;
  --chinh-nhat: #d9efdd;
  --la: #2ea354;
  --nang: #e0a52e;
  --dat: #8a6a4b;
  --kem: #faf7ee;
  --nhan: #c2410c;
  --do: #b3261e;
  --vang: #8a6d1f;
  --bo-goc: 12px;
  --bong: 0 1px 2px rgba(22, 36, 29, .05), 0 8px 24px rgba(22, 36, 29, .06);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--nen); color: var(--muc);
  font: 16px/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--chinh); }
.khung { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.khung-rong { max-width: 1320px; margin: 0 auto; padding: 0 16px; }

/* ---------- Thanh trên ---------- */
.dinh { background: var(--giay); border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 20; }
.dinh .trong { display: flex; align-items: center; gap: 18px; height: 60px; }
.hieu { font-weight: 700; font-size: 18px; color: var(--muc); text-decoration: none; }
.dinh nav { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; align-items: center; }
/* :not(.nut) — nếu không loại nút ra, luật này đè lên màu chữ của nút và chữ trắng
   thành xám trên nền xanh, đọc không ra. Đã vấp 21/09/2026. */
.dinh nav a:not(.nut) { color: var(--mo); text-decoration: none; font-size: 15px; }
.dinh nav a:not(.nut):hover, .dinh nav a:not(.nut).dang { color: var(--chinh); }
.dinh nav a.nut { color: #fff; text-decoration: none; }
.dinh nav a.nut.phu, .dinh nav a.nut.nhe { color: var(--chinh); }
.dinh nav form { display: inline; }

/* ---------- Trang ngoài trên màn hình hẹp: menu thu thành cột trái ----------
   Cùng khuôn với khu quản lý (.qt-ben) và với WINSYSTEM: trượt ra từ mép trái,
   có lớp nền mờ để bấm ra ngoài là đóng. Dùng chung lớp body.ben-mo nên chỉ một
   đoạn mã trong app.js lo việc đóng mở cho cả hai khu.
   Mốc 860px chứ không phải 700px: đăng nhập rồi thì thanh có tới mười mục, xuống
   dưới 900px là đã xuống dòng trông rối. */
.ng-nut-menu {
  display: none; border: 0; background: transparent; color: var(--muc);
  cursor: pointer; padding: 6px 8px; margin-left: -8px;
  font-size: 22px; line-height: 1; border-radius: 7px;
}
.ng-nut-menu:hover { background: var(--nen); }
.ng-menu-dau, .ng-menu-nhom, .ng-nen { display: none; }

@media (max-width: 860px) {
  .ng-nut-menu { display: inline-flex; }
  .dinh .trong { gap: 10px; }

  .dinh nav {
    position: fixed; top: 0; bottom: 0; left: 0; width: 264px; max-width: 84vw; z-index: 45;
    margin: 0; padding: 8px 0 24px; display: block; overflow-y: auto;
    background: var(--giay); border-right: 1px solid var(--vien);
    box-shadow: 0 10px 30px rgba(10, 20, 15, .22);
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.ben-mo .dinh nav { transform: none; }
  /* z-index 40 tính trong thẻ header (thẻ này tự mở một tầng riêng ở mức 20),
     nên lớp mờ phủ luôn cả thanh trên, còn menu ở mức 45 thì vẫn nổi trên lớp mờ. */
  body.ben-mo .ng-nen {
    display: block; position: fixed; inset: 0; background: rgba(10, 20, 15, .4); z-index: 40;
  }

  .ng-menu-dau {
    display: block; padding: 14px 18px 12px; border-bottom: 1px solid var(--vien);
    font-weight: 700; font-size: 16px; color: var(--muc);
  }
  .ng-menu-nhom {
    display: block; padding: 16px 18px 5px; font-size: 11px;
    letter-spacing: .09em; text-transform: uppercase; color: var(--mo);
  }

  /* :not(.nut) ở cả hai luật dưới — nút "Đăng ký thuê" phải giữ nguyên dáng nút,
     luật của thẻ a ở đây đè được lên .nut vì đọc nhiều lớp hơn. */
  .dinh nav a:not(.nut) {
    display: block; padding: 11px 18px; font-size: 16px; border-left: 3px solid transparent;
  }
  .dinh nav a:not(.nut).dang {
    background: var(--chinh-nhat); border-left-color: var(--chinh); font-weight: 600;
  }
  .dinh nav a.nut { display: block; margin: 12px 18px 0; text-align: center; }
  .dinh nav form { display: block; padding: 12px 18px 0; }
  .dinh nav form .nut { width: 100%; }
}

/* ---------- Khối ---------- */
.the {
  background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo-goc);
  padding: 18px; margin-bottom: 16px;
}
.the h2, .the h3 { margin-top: 0; }
h1 { font-size: 26px; margin: 22px 0 14px; }
h2 { font-size: 20px; }
.mo { color: var(--mo); }
.nho { font-size: 13px; }
.giua { text-align: center; }
.phai { text-align: right; }

.luoi { display: grid; gap: 16px; }
.luoi-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.luoi-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.luoi-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.so-to { font-size: 24px; font-weight: 700; }
.so-to.thu { color: var(--chinh); }
.so-to.chi { color: var(--nhan); }

/* ---------- Bảng ---------- */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--vien); text-align: left; vertical-align: top; }
th { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--mo); font-weight: 600; }
td.so, th.so { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #fafbfa; }
.cuon { overflow-x: auto; }

/* ---------- Biểu mẫu ---------- */
label { display: block; font-size: 14px; color: var(--mo); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--vien); border-radius: 8px;
  font: inherit; background: var(--giay); color: var(--muc);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--chinh-nhat); border-color: var(--chinh); }
textarea { min-height: 90px; }
fieldset { border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 12px 16px; margin: 0 0 16px; }
legend { font-size: 14px; color: var(--mo); padding: 0 6px; }

.nut {
  display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--chinh);
  background: var(--chinh); color: #fff; font: inherit; cursor: pointer; text-decoration: none;
}
.nut:hover { filter: brightness(1.08); }
.nut.phu { background: var(--giay); color: var(--chinh); }
.nut.nhe { background: var(--giay); color: var(--mo); border-color: var(--vien); }
.nut.canh { background: var(--giay); color: var(--do); border-color: var(--do); }
.nut.be { padding: 5px 10px; font-size: 14px; }
.hang { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.hang > * { flex: 1 1 160px; }
.hang > .tu-nhien { flex: 0 0 auto; }

/* ---------- Nhãn trạng thái ---------- */
.nhan-tt {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  background: var(--chinh-nhat); color: var(--chinh); white-space: nowrap;
}
.nhan-tt.xam { background: #eeeff0; color: var(--mo); }
.nhan-tt.do { background: #fdecea; color: var(--do); }
.nhan-tt.vang { background: #fdf5e0; color: var(--vang); }

/* ---------- Lời báo ---------- */
.bao { padding: 11px 14px; border-radius: 8px; margin: 14px 0; border: 1px solid; }
.bao.duoc { background: var(--chinh-nhat); border-color: #bcdccb; color: #155036; }
.bao.hong { background: #fdecea; border-color: #f3c6c2; color: var(--do); }

/* ---------- Trang ngoài: nông nghiệp xanh ---------- */
.hieu-dau { display: flex; align-items: center; gap: 9px; }
.hieu-dau svg { width: 26px; height: 26px; flex: none; }

.banner {
  position: relative; overflow: hidden;
  background: radial-gradient(1100px 420px at 72% -14%, #b9e3c4 0%, rgba(185, 227, 196, 0) 64%),
              linear-gradient(180deg, #d5efd9 0%, var(--nen) 100%);
  padding: 62px 0 0;
}
.banner .khung { position: relative; z-index: 2; }
.banner h1 { font-size: 40px; line-height: 1.18; margin: 0 0 14px; letter-spacing: -.01em; }
.banner h1 em { font-style: normal; color: var(--chinh); }
.banner .dan { font-size: 18px; color: var(--mo); max-width: 620px; margin: 0 auto 22px; }
.banner .nhan-tren {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--vien); border-radius: 999px;
  padding: 5px 14px; font-size: 13px; color: var(--chinh); box-shadow: var(--bong);
}
.banner .dong-song { display: block; width: 100%; height: 74px; margin-top: 34px; }

.so-lieu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: -34px auto 34px; position: relative; z-index: 3; }
.so-lieu .o { background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 16px; text-align: center; box-shadow: var(--bong); }
.so-lieu .o b { display: block; font-size: 24px; color: var(--chinh); line-height: 1.2; }
.so-lieu .o span { font-size: 13px; color: var(--mo); }

.tieu-muc { text-align: center; max-width: 620px; margin: 46px auto 22px; }
.tieu-muc h2 { font-size: 27px; margin: 0 0 8px; }
.tieu-muc p { color: var(--mo); margin: 0; }

.the-dv { background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 22px; box-shadow: var(--bong); }
.the-dv .bieu { width: 44px; height: 44px; border-radius: 12px; background: var(--chinh-nhat); color: var(--chinh);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.the-dv .bieu svg { width: 24px; height: 24px; }
.the-dv h3 { margin: 0 0 6px; font-size: 18px; }
.the-dv h3 a { color: var(--muc); text-decoration: none; }
.the-dv h3 a:hover { color: var(--chinh); }
.the-dv .gia-chu { margin-top: 10px; font-weight: 700; color: var(--chinh); }

.the-ts {
  display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden;
  background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo-goc); box-shadow: var(--bong);
  transition: transform .15s ease, box-shadow .15s ease;
}
.the-ts:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(22,36,29,.06), 0 14px 32px rgba(22,36,29,.10); }
.the-ts .anh-ts { display: block; width: 100%; height: 132px; }
.the-ts .ruot { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.the-ts h3 { margin: 0 0 8px; font-size: 17px; }
.the-ts h3 a { color: var(--muc); text-decoration: none; }
.the-ts h3 a:hover { color: var(--chinh); }
.the-ts .gia { font-size: 20px; font-weight: 700; color: var(--chinh); margin-top: auto; padding-top: 12px; }
.the-ts .gia small { font-weight: 400; font-size: 13px; color: var(--mo); }

.buoc { counter-reset: buoc; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.buoc > div { position: relative; padding-left: 52px; }
.buoc > div::before {
  counter-increment: buoc; content: counter(buoc);
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--chinh); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.buoc h4 { margin: 4px 0 6px; font-size: 16px; }
.buoc p { margin: 0; color: var(--mo); font-size: 15px; }

.keu-goi {
  background: linear-gradient(135deg, var(--chinh-dam), var(--la)); color: #fff;
  border-radius: 16px; padding: 34px 28px; text-align: center; margin: 46px 0 10px;
}
.keu-goi h2 { margin: 0 0 8px; font-size: 26px; }
.keu-goi p { margin: 0 auto 18px; max-width: 560px; color: #d9ece0; }
.keu-goi .nut { background: #fff; color: var(--chinh-dam); border-color: #fff; }
.keu-goi .nut.phu { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

.chan { background: #10291b; color: #a8c4b1; margin-top: 48px; padding: 34px 0 26px; font-size: 14px; }
.chan a { color: #cbd8d1; }
.chan strong { color: #fff; }
.chan .cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
/* Dòng chú thích dưới mỗi cửa vào ở chân trang: mờ và nhỏ hơn tên vai, để mắt đọc
   tên vai trước rồi mới đọc giải thích, chứ không đọc thành một khối chữ đều đều. */
.chan .chan-mo { color: #7e9c8a; font-size: 12.5px; line-height: 1.5; }
.chan .cot a { line-height: 1.75; }
.chan .duoi-cung { border-top: 1px solid #235337; margin-top: 22px; padding-top: 16px; font-size: 13px; }

@media (max-width: 700px) {
  .banner { padding-top: 40px; }
  .banner h1 { font-size: 29px; }
  .so-lieu { margin-top: -20px; }
}

/* ---------- Khu quản lý: menu cột trái, điện thoại thì ẩn và mở bằng nút ba gạch ----------
   Cùng khuôn với khu điều hành của WINSYSTEM: thanh trên cố định, cột trái cố định,
   dưới 900px thì cột trái trượt ra khỏi màn hình và có lớp nền mờ để bấm ra ngoài. */
/* --le-ben là MỘT con số dùng chung cho cả nút ba gạch trên thanh và biểu tượng
   trong cột trái, nên hai thứ ấy luôn thẳng hàng nhau. Sửa một chỗ là cả hai theo. */
body.quantri {
  background: #e9f2ea; --thanh-tren: 56px; --ben: 236px; --ben-thu: 58px; --le-ben: 17px;
}

.qt-tren {
  position: fixed; inset: 0 0 auto 0; height: var(--thanh-tren); z-index: 40;
  background: #10291b; color: #e6f1e8;
  display: flex; align-items: center; gap: 12px; padding: 0 16px 0 var(--le-ben);
}
/* Tên dự án đọc từ WINSYSTEM, do quản lý bên đó đặt — có thể dài như một câu
   ("Vườn rau cho thuê luống — gọi vốn cổ phần"). Cắt bằng ba chấm thay vì để nó đẩy
   nút thoát rơi xuống dòng; tên đầy đủ nằm ở thuộc tính title. */
.qt-tren .hieu { color: #fff; font-size: 16px; min-width: 0; max-width: 300px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-tren .hieu small { display: block; font-weight: 400; font-size: 11px; color: #8ba295;
  overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .qt-tren .hieu { max-width: 160px; } }
.qt-tren .o-trong { flex: 1; }
/* Tên chức năng đang mở: ĐẬM, và đứng THẲNG CỘT với khu nội dung bên dưới —
   cùng mốc trái với tiêu đề h1 của trang. Đặt tuyệt đối theo --ben nên menu thu lại
   thì nó tự chạy theo, không phải tính lại. Ông chủ nhắc 21/09/2026. */
/* Tên chức năng KHÔNG còn trên thanh trên — nó mở đầu khung nội dung, đúng chỗ mắt bắt
   đầu đọc. Ông chủ chuyển xuống 21/09/2026. */
.qt-tieu-de { margin: 2px 0 18px; }
.qt-tieu-de .cha {
  font-size: 13px; color: var(--mo); letter-spacing: .02em; margin-bottom: 2px;
}
.qt-tieu-de h1 { margin: 0; font-size: 26px; }
.qt-tren .ai { color: #8ba295; font-size: 13px; }
.qt-tren form { display: inline; }

/* Nút ba gạch: ô nút rộng đúng bằng ô biểu tượng của menu (26px) và bắt đầu ở đúng
   --le-ben, nên ba gạch nằm thẳng cột với các biểu tượng bên dưới. */
.qt-nut-menu {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 32px; padding: 0; margin-left: 0;
  border: 0; background: transparent; color: #eaf0ec; cursor: pointer; border-radius: 7px;
}
.qt-nut-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.qt-nut-menu:hover { background: #1d4630; }

.qt-khung { padding-top: var(--thanh-tren); }
.qt-ben {
  position: fixed; top: var(--thanh-tren); bottom: 0; left: 0; width: var(--ben); z-index: 30;
  background: #143423; color: #c5dccb; overflow-y: auto; overflow-x: hidden; padding: 10px 0 24px;
  transition: width .16s ease;
}
.qt-nhom {
  padding: 14px var(--le-ben) 5px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: #7b9288;
}
.qt-ben a.muc {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--le-ben) 8px calc(var(--le-ben) - 3px);
  color: #cbd8d1; text-decoration: none; font-size: 15px; border-left: 3px solid transparent;
  white-space: nowrap;
}
.qt-ben a.muc:hover { background: #1d4630; color: #fff; }
/* Mục đang mở phải NHÌN LÀ THẤY: nền sáng hẳn lên so với cột, chữ trắng đậm, và
   một vạch sáng bên trái. Nền chỉ nhạt hơn cột một chút thì trên màn hình sáng ngoài
   vườn không ai phân biệt được mình đang ở đâu. Ông chủ nhắc 21/09/2026. */
.qt-ben a.muc.dang {
  background: #1f5c36; color: #fff; font-weight: 700;
  border-left-color: #5fd48a;
}
.qt-ben a.muc.dang .bt { color: #5fd48a; }
.qt-ben .bt { flex: none; width: 26px; display: flex; align-items: center; justify-content: center; }
.qt-ben .bt svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.qt-ben .chu { overflow: hidden; text-overflow: ellipsis; }
.qt-ben .day {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--chinh); color: #fff; font-size: 12px; text-align: center;
}
.qt-duoi { margin: 18px var(--le-ben) 0; padding-top: 14px; border-top: 1px solid #235337; }
.qt-duoi a {
  color: #8ba295; text-decoration: none; font-size: 14px;
  display: flex; align-items: center; gap: 10px; padding: 4px 0; white-space: nowrap;
}
.qt-duoi a:hover { color: #fff; }

/* ---------- Menu thu lại thành cột biểu tượng ----------
   Chữ bị giấu chứ KHÔNG bị bỏ khỏi trang: người dùng rê chuột vào vẫn đọc được tên
   mục (thuộc tính title), và máy đọc màn hình vẫn đọc ra. */
html.ben-thu body.quantri { --ben: var(--ben-thu); }
html.ben-thu .qt-ben .chu,
html.ben-thu .qt-nhom span { display: none; }
html.ben-thu .qt-ben a.muc { padding-right: 0; gap: 0; }
html.ben-thu .qt-nhom {
  padding: 0; margin: 10px var(--le-ben) 8px; height: 1px; background: #235337;
}
/* Số cần chú ý co thành một chấm nhỏ đậu ở góc biểu tượng — vẫn thấy là có việc,
   mà không làm rách cột hẹp. */
html.ben-thu .qt-ben a.muc { position: relative; }
html.ben-thu .qt-ben .day {
  position: absolute; top: 4px; left: 28px; margin: 0;
  min-width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0;
}
html.ben-thu .qt-duoi { margin: 18px 0 0; padding: 14px var(--le-ben) 0; }
html.ben-thu .qt-tren .hieu small { display: none; }

.qt-chinh { margin-left: var(--ben); padding: 18px 24px 48px; transition: margin-left .16s ease; }
.qt-chinh h1:first-child { margin-top: 6px; }
.qt-nen { display: none; }

@media (max-width: 900px) {
  /* Màn hình hẹp thì menu vốn đã ẩn, thu lại nữa là vô nghĩa — trả về bề rộng đủ đọc
     chữ, kể cả khi người dùng đã thu nó lại lúc ngồi máy tính. */
  body.quantri { --ben: 236px; }
  html.ben-thu .qt-ben .chu, html.ben-thu .qt-nhom span { display: block; }
  html.ben-thu .qt-nhom { padding: 14px var(--le-ben) 5px; margin: 0; height: auto; background: none; }
  html.ben-thu .qt-ben a.muc { padding-right: var(--le-ben); gap: 10px; }
  html.ben-thu .qt-ben .day { position: static; min-width: 20px; height: auto; padding: 0 6px; font-size: 12px; line-height: normal; margin-left: auto; }

  .qt-ben { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
  body.ben-mo .qt-ben { transform: none; }
  body.ben-mo .qt-nen { display: block; position: fixed; inset: 0; background: rgba(10, 20, 15, .4); z-index: 25; }
  .qt-chinh { margin-left: 0; padding: 16px; }
  .qt-tren .ai { display: none; }
}

/* ---------- Dải ảnh chăm sóc ---------- */
.dai-anh { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.dai-anh img {
  width: 172px; height: 128px; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--vien); background: var(--nen);
}
.dai-anh .o-anh { position: relative; }
.dai-anh .bo-anh {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: rgba(22, 36, 29, .72); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
#chon-anh { padding: 10px; background: var(--chinh-nhat); border-style: dashed; }

/* ---------- Dải tab trong một trang ----------
   Hai việc gần nhau (xem và ghi) đứng chung một mục menu, tách bằng tab. */
.tab-thanh {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--vien); margin: 0 0 18px;
}
.tab-thanh a {
  padding: 9px 16px; font-size: 15px; text-decoration: none; color: var(--mo);
  border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; margin-bottom: -1px;
}
.tab-thanh a:hover { color: var(--chinh); }
.tab-thanh a.dang {
  background: var(--giay); border-color: var(--vien); color: var(--muc); font-weight: 600;
}

/* ---------- Phân trang ---------- */
.trang-so { display: flex; gap: 6px; align-items: center; margin: 14px 0; flex-wrap: wrap; font-size: 14px; }
.trang-so a, .trang-so span {
  padding: 5px 10px; border: 1px solid var(--vien); border-radius: 7px;
  background: var(--giay); text-decoration: none; color: var(--mo);
}
.trang-so .dang { background: var(--chinh); color: #fff; border-color: var(--chinh); }

@media (max-width: 700px) {
  .banner h1 { font-size: 28px; }
  h1 { font-size: 22px; }
}

/* ---------- Ứng dụng dùng bằng điện thoại: bán hàng và chụp hình ----------
   Người dùng đang đứng, một tay cầm máy. Nút to, chạm được bằng ngón cái,
   không có menu nhiều tầng. */
body.ung-dung { background: #eef2ef; padding-bottom: env(safe-area-inset-bottom); }
.ud-tren {
  position: sticky; top: 0; z-index: 30; background: #10291b; color: #e6f1e8;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.ud-lui { color: #eaf0ec; text-decoration: none; font-size: 22px; line-height: 1; padding: 4px 6px; }
.ud-ten { flex: 1; min-width: 0; }
.ud-ten strong { display: block; font-size: 16px; }
.ud-ten small { display: block; font-size: 12px; color: #8ba295; }
.ud-tren form { flex: none; }
.ud-ruot { max-width: 900px; margin: 0 auto; padding: 14px 14px 90px; }

.the-cham {
  display: block; background: var(--giay); border: 1px solid var(--vien); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; text-decoration: none; color: var(--muc);
}
.the-cham:active { background: var(--chinh-nhat); }
.the-cham b { display: block; font-size: 17px; }
.the-cham span { display: block; color: var(--mo); font-size: 14px; margin-top: 2px; }

/* ---------- Quầy bán hàng ---------- */
.quay-hang { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mon {
  background: var(--giay); border: 2px solid var(--vien); border-radius: 14px; padding: 12px;
  text-align: left; cursor: pointer; font: inherit; color: var(--muc); position: relative;
}
.mon:active, .mon.dang-chon { border-color: var(--chinh); background: var(--chinh-nhat); }
.mon b { display: block; font-size: 15px; line-height: 1.3; }
.mon .gia-mon { display: block; margin-top: 6px; font-weight: 700; color: var(--chinh); }
.mon .dv { color: var(--mo); font-weight: 400; font-size: 13px; }
.mon .dem-mon {
  position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px; border-radius: 999px;
  background: var(--chinh); color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 7px;
}
.mon .giup { display: block; font-size: 12px; color: var(--vang); margin-top: 4px; }

.gio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--giay); border-top: 1px solid var(--vien);
  box-shadow: 0 -8px 28px rgba(22, 36, 29, .12);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
}
.gio .tom { display: flex; align-items: center; gap: 12px; }
.gio .tong { font-size: 22px; font-weight: 700; flex: 1; }
.gio .tong small { display: block; font-size: 12px; color: var(--mo); font-weight: 400; }
.gio .nut { font-size: 17px; padding: 12px 20px; }
/* Giỏ hàng KHÔNG được cao quá một phần ba màn hình. Chọn sáu món là nó nuốt hết chỗ,
   người đứng quầy không với tới lưới hàng để chọn tiếp — đã vấp 21/09/2026.
   Hai danh sách (đồ mượn và món bán) cuộn CHUNG một khung, không phải mỗi cái một trần. */
/* Giỏ nằm trong thanh dính đáy, ngay trên tổng tiền. Thu lại là một dòng; bung ra thì
   cuộn trong khung có trần, không dâng lên nuốt hết lưới hàng. */
.gio-khoi > summary {
  list-style: none; cursor: pointer; padding: 4px 0 8px;
  border-bottom: 1px solid var(--vien); margin-bottom: 8px;
}
.gio-khoi > summary::-webkit-details-marker { display: none; }
.gio-khoi > summary::before { content: '▸ '; color: var(--mo); }
.gio-khoi[open] > summary::before { content: '▾ '; }
.gio-cuon { max-height: 40vh; overflow-y: auto; margin: 0 0 8px; }
.gio-dong { margin: 0; }
/* Thanh tổng dính đáy và LUÔN hiện, nên lúc nào cũng phải chừa chỗ cho nó — không thì
   mấy món cuối lưới nằm dưới nó và chạm không tới. */
body.quay-co-thanh { padding-bottom: 104px; }
.gio .nut[disabled] { opacity: .45; cursor: default; }
.gio-dong .d { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--vien); }
.gio-dong .d .ten { flex: 1; min-width: 0; }
.gio-dong .d .ten small { display: block; color: var(--mo); }
.gio-dong .d button {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--vien);
  background: var(--giay); font-size: 20px; line-height: 1; cursor: pointer;
}
.gio-dong .d .sl { min-width: 28px; text-align: center; font-weight: 700; }

/* ---------- Ô ký và mật khẩu hiện một lần ---------- */
.mk-mot-lan {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 26px; letter-spacing: .06em;
  background: var(--kem); border: 1px dashed var(--dat); border-radius: 10px;
  padding: 12px 16px; display: inline-block; margin: 6px 0;
}

@media (max-width: 480px) {
  .quay-hang { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .gio .tong { font-size: 19px; }
}

/* ---------- Ô chọn luống ----------
   Chạm được bằng ngón tay, và nhìn một cái là biết luống nào đang được chọn. */
.o-luong {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 8px 0;
  padding: 7px 12px; border: 1px solid var(--vien); border-radius: 999px;
  background: var(--giay); font-size: 14px; cursor: pointer;
}
.o-luong:hover { border-color: var(--chinh); }
.o-luong:has(input:checked) { background: var(--chinh-nhat); border-color: var(--chinh); }
.o-luong input { width: auto; margin: 0; }

/* ---------- Khối mở ra khi bấm ----------
   Biểu mẫu dài mà mở sẵn thì đẩy hết danh sách xuống dưới màn hình. Người vào mục này
   phần lớn là để XEM cái đang có, lập cái mới là việc thỉnh thoảng. */
.khoi-mo > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px;
}
.khoi-mo > summary::-webkit-details-marker { display: none; }
.khoi-mo > summary::before {
  content: '+'; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  background: var(--chinh-nhat); color: var(--chinh); font-weight: 700; line-height: 1;
}
.khoi-mo[open] > summary::before { content: '−'; }
.khoi-mo[open] > summary { margin-bottom: 10px; }

/* ---------- Ô ký ----------
   Cao và rộng để ký bằng ngón tay trên điện thoại. touch-action: none để lúc kéo ngón
   vẽ chữ ký thì trang không cuộn theo — không có dòng này thì trên điện thoại gần như
   không ký nổi. */
.o-ky { position: relative; margin: 10px 0 4px; }
.o-ky canvas {
  display: block; width: 100%; height: 220px; touch-action: none; cursor: crosshair;
  background: var(--giay); border: 2px dashed var(--vien); border-radius: var(--bo-goc);
}
.o-ky canvas.da-ky { border-style: solid; border-color: var(--chinh); }
.o-ky #xoa-ky { position: absolute; top: 10px; right: 10px; }
.nut.to { padding: 13px 22px; font-size: 17px; }

/* Chữ ký đã lưu, hiện lại trên trang hợp đồng. */
.chu-ky-da-ky {
  display: inline-block; padding: 10px 14px; border: 1px solid var(--vien);
  border-radius: var(--bo-goc); background: var(--giay); text-align: center; margin: 0 14px 14px 0;
}
.chu-ky-da-ky img { display: block; height: 92px; max-width: 280px; object-fit: contain; }
.chu-ky-da-ky b { display: block; margin-top: 6px; font-size: 15px; }

/* Bản chụp toàn văn hợp đồng: chữ đều, xuống dòng đúng như lúc ký. */
.ban-chup {
  white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px; line-height: 1.65; margin: 0;
  background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-goc);
  padding: 14px 16px; overflow-x: auto;
}