/* WS-VANTAI — một tệp kiểu dáng cho cả trang ngoài và khu 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ũ. */
/* VẬN TẢI XANH — xanh lá TƯƠI, màu lá non chứ không phải lá già.
   Ông chủ 21/09: "cho anh màu xanh tươi của lá cây đi, chứ xanh này nó xỉn và buồn quá".

   Chỗ khó: xanh càng tươi thì càng sáng, mà càng sáng thì chữ trên nền trắng
   càng khó đọc. Nên tách làm HAI vai, đừng bắt một màu gánh cả hai:

     --chinh  #13843e — chỉ dùng cho CHỮ, viền và nền nút. Đạt tương phản 4,8
                        trên nền trắng, vừa đủ chuẩn AA cho cỡ chữ thường.
     --la     #22c55e — màu lá non thật, dùng cho MẢNG LỚN: dải mở đầu, nhãn,
     --la-sang #4ade80  hình vẽ, dấu tích. Mảng to thì mắt đọc ra màu, không
                        phải đọc ra chữ, nên sáng thoải mái.

   Cảm giác "tươi" đến từ mảng lớn và từ nền, không đến từ màu chữ — nên cứ
   đẩy hai màu lá lên sáng, còn màu chữ giữ ở mức đọc được. */
:root {
  --nen: #f2fbf5;
  --giay: #ffffff;
  --muc: #0d1f14;
  --mo: #4f6a58;
  --vien: #cdeeda;
  --vien-dam: #a7dfbd;
  --chinh: #13843e;
  --chinh-dam: #0b6430;
  --chinh-nhat: #dcfce7;
  --chinh-mo: #f0fdf4;
  --la: #22c55e;
  --la-sang: #4ade80;
  --la-non: #86efac;
  --nang: #c2620d;
  --nang-nhat: #fff4e3;
  --dat: #55705e;
  --kem: #f6fdf8;
  --nhan: #b4531a;
  --do: #b3261e;
  --vang: #7d6a1a;
  --bo-goc: 14px;
  --bo-goc-nho: 9px;
  --bong: 0 1px 2px rgba(12, 60, 30, .05), 0 10px 28px rgba(12, 60, 30, .08);
  --bong-nho: 0 1px 2px rgba(12, 60, 30, .06);
  --bong-noi: 0 4px 10px rgba(12, 60, 30, .09), 0 18px 38px rgba(12, 60, 30, .12);
}
* { 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; }
.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);
}
.qt-tren .hieu { color: #fff; font-size: 16px; }
.qt-tren .hieu small { display: block; font-weight: 400; font-size: 11px; color: #8ba295; }
.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; }
.gio-dong { max-height: 40vh; overflow-y: auto; margin-bottom: 10px; }
.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;
}


/* =========================================================================
   TRANG NGOÀI — phần bán hàng.
   Ông chủ 21/09: "cho nó thành một giao diện thương mại phục vụ khách".
   Trang cũ là bảng liệt kê kỹ thuật; phần này làm nó thành trang bán vé.
   ========================================================================= */

/* ---------- Dải mở đầu ---------- */
.mo-dau {
  position: relative; overflow: hidden;
  background: linear-gradient(148deg, #12783a 0%, #1da851 42%, #2fc768 76%, #4ade80 100%);
  color: #fff; margin: 0 0 30px;
}
.mo-dau .khung { position: relative; z-index: 2; padding-top: 52px; padding-bottom: 52px; }
.mo-dau h1 {
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1.18; margin: 0 0 14px;
  color: #fff; max-width: 17ch; letter-spacing: -.01em;
}
.mo-dau p.dat { font-size: clamp(16px, 1.6vw, 19px); color: #e7fbee; max-width: 52ch; margin: 0 0 24px; }
.mo-dau .nut-hang { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.mo-dau .nut.sang { background: #fff; color: var(--chinh-dam); border-color: #fff; font-weight: 600; }
.mo-dau .nut.sang:hover { background: #e6fced; }
.mo-dau .nut.vien { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.mo-dau .nut.vien:hover { background: rgba(255,255,255,.12); }
.mo-dau .goi { color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; white-space: nowrap; }
.mo-dau .goi small { display: block; font-weight: 400; font-size: 13px; color: #cdf5da; }

/* Hình nền vẽ bằng mã: không tải tệp ảnh nào, nên không hỏng khi mạng chậm
   và không vướng bản quyền ảnh của ai. */
.mo-dau .hinh { position: absolute; inset: 0; z-index: 1; opacity: .5; pointer-events: none; }
.mo-dau .hinh svg { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) { .mo-dau .hinh { opacity: .28; } }

/* ---------- Thẻ dịch vụ ---------- */
.dv {
  background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo-goc);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.dv:hover { box-shadow: var(--bong-noi); transform: translateY(-3px); border-color: var(--vien-dam); }
.dv .dau { display: flex; align-items: center; gap: 11px; }
.dv .bieu-tuong {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
  background: var(--chinh-nhat); color: var(--chinh-dam);
  display: flex; align-items: center; justify-content: center;
}
.dv .bieu-tuong svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.dv h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.dv .loi-the {
  display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 600;
  background: var(--chinh-nhat); color: var(--chinh-dam); padding: 4px 10px; border-radius: 999px;
}
.dv .loi-the.mem { background: var(--nang-nhat); color: var(--nang); }
.dv p { margin: 0; color: var(--mo); font-size: 14.5px; line-height: 1.6; }
.dv .chan-the {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--vien);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.dv .gia-tu { font-size: 13px; color: var(--mo); }
.dv .gia-tu b { font-size: 19px; color: var(--muc); font-variant-numeric: tabular-nums; }

/* ---------- Bảng tuyến ---------- */
.tuyen-the { background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo-goc); overflow: hidden; }
.tuyen-the .dinh-tuyen { padding: 16px 18px; background: var(--kem); border-bottom: 1px solid var(--vien); }
.tuyen-the .dinh-tuyen h3 { margin: 0 0 4px; font-size: 17px; }
.tuyen-the .chang { color: var(--mo); font-size: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tuyen-the .chang .mui { color: var(--chinh); }
.tuyen-the .gia-dong {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--vien); font-size: 15px;
}
.tuyen-the .gia-dong:last-child { border-bottom: 0; }
.tuyen-the .gia-dong b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Cam kết ---------- */
.cam-ket { display: flex; gap: 13px; align-items: flex-start; }
.cam-ket .dau-tich {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--chinh-nhat); color: var(--chinh-dam);
  display: flex; align-items: center; justify-content: center;
}
.cam-ket .dau-tich svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.cam-ket h4 { margin: 0 0 4px; font-size: 15.5px; }
.cam-ket p { margin: 0; color: var(--mo); font-size: 14px; line-height: 1.55; }

/* ---------- Dải kêu gọi cuối trang ---------- */
.keu-goi-cuoi {
  background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo-goc);
  padding: 26px; text-align: center; margin: 30px 0;
}
.keu-goi-cuoi h2 { margin: 0 0 8px; }
.keu-goi-cuoi p { margin: 0 0 18px; color: var(--mo); }
.keu-goi-cuoi .nut-hang { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Thẻ chỗ trống ---------- */
.cho-the { border-left: 4px solid var(--nang); }
.cho-the.con-ghe { border-left-color: var(--chinh); }
.cho-the .so-cho-con { font-size: 26px; font-weight: 700; color: var(--chinh-dam); line-height: 1; }

/* ---------- Các bước ---------- */
.buoc-di { display: flex; gap: 14px; align-items: flex-start; }
.buoc-di .so {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--chinh); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.buoc-di h4 { margin: 3px 0 4px; font-size: 15.5px; }
.buoc-di p { margin: 0; color: var(--mo); font-size: 14px; }


/* =========================================================================
   XE XANH — phần nâng cho ra dáng nghề vận tải.
   Ông chủ 21/09: "giao diện kiểu vận tải, màu xanh lá cây biểu hiện cho Xe
   XANH, giao diện chuyên nghiệp đi em".
   ========================================================================= */

/* ---------- Chữ: nới một chút cho tiêu đề bớt chật ---------- */
h1, h2, h3, .so-to { letter-spacing: -.015em; }
h2 { margin: 34px 0 16px; font-size: clamp(21px, 2.2vw, 26px); }
h2.co-vach { display: flex; align-items: center; gap: 12px; }
h2.co-vach::after { content: ""; flex: 1; height: 1px; background: var(--vien); }
.dan-de { color: var(--mo); max-width: 62ch; margin: -8px 0 18px; font-size: 15.5px; }

/* ---------- Thanh trên ---------- */
/* ⚠ ĐỪNG đặt backdrop-filter (hay filter, transform, perspective) lên .dinh.
   Những thuộc tính ấy biến thẻ này thành gốc toạ độ mới cho mọi position:fixed
   nằm bên trong — mà menu mobile CHÍNH LÀ một thẻ fixed nằm trong .dinh.
   Hậu quả: menu bị nhốt trong cái thanh cao 60px, mở ra thấy một ô trắng rỗng
   thay vì danh sách mục. Đã vấp đúng chỗ này 21/09/2026: nền mờ trông đẹp hơn
   được vài ngày, đổi lại menu điện thoại hỏng hoàn toàn. */
.dinh { background: #ffffff; }
.hieu-dau svg { flex: 0 0 auto; }

/* ---------- Dải mở đầu ---------- */
.mo-dau .khung { padding-top: 62px; padding-bottom: 58px; }
.mo-dau h1 { text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.mo-dau .nhan-xanh {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.38);
  color: #f2fff6; font-size: 13px; font-weight: 600; padding: 5px 13px; border-radius: 999px;
}
.mo-dau .nhan-xanh svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Dải số liệu ---------- */
.so-lieu-hang {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--vien); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); overflow: hidden; margin: -18px 0 8px;
  box-shadow: var(--bong);
}
.so-lieu-hang > div { background: var(--giay); padding: 18px 16px; text-align: center; }
.so-lieu-hang .so { font-size: 27px; font-weight: 700; color: var(--chinh-dam); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.so-lieu-hang .nhan-so { font-size: 13px; color: var(--mo); margin-top: 3px; }

/* ---------- Thẻ dịch vụ: tinh hơn ---------- */
.dv { padding: 22px; box-shadow: var(--bong-nho); }
.dv .bieu-tuong {
  background: linear-gradient(145deg, var(--chinh-nhat), #bdf3d0);
  box-shadow: inset 0 0 0 1px rgba(21,122,69,.08);
}
.dv .chan-the .nut { flex: 0 0 auto; }
.dv .gia-tu b { color: var(--chinh-dam); }

/* ---------- Khối Xe Xanh ---------- */
.xanh-khoi {
  background: linear-gradient(140deg, var(--chinh-mo), #e6f4ea);
  border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 26px;
}
.xanh-khoi h2 { margin-top: 0; }
.xanh-y { display: flex; gap: 12px; align-items: flex-start; }
.xanh-y .cham {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  background: var(--giay); color: var(--chinh-dam);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--bong-nho);
}
.xanh-y .cham svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.xanh-y h4 { margin: 2px 0 4px; font-size: 15px; }
.xanh-y p { margin: 0; color: var(--mo); font-size: 14px; line-height: 1.55; }

/* ---------- Bảng tuyến ---------- */
.tuyen-the { box-shadow: var(--bong-nho); transition: box-shadow .16s ease; }
.tuyen-the:hover { box-shadow: var(--bong); }
.tuyen-the .dinh-tuyen { background: linear-gradient(140deg, var(--kem), var(--chinh-mo)); }
.tuyen-the .gia-dong b { color: var(--muc); }
.tuyen-the .gia-dong:hover { background: var(--chinh-mo); }
.tuyen-the .nhan-noi-bat {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; background: var(--nang-nhat); color: var(--nang);
  padding: 3px 9px; border-radius: 999px; margin-left: 8px;
}

/* ---------- Dải kêu gọi cuối ---------- */
.keu-goi-cuoi {
  background: linear-gradient(150deg, var(--chinh) 0%, var(--la) 58%, var(--la-sang) 100%);
  border: 0; color: #fff; padding: 34px 26px;
}
.keu-goi-cuoi h2 { color: #fff; margin-top: 0; }
.keu-goi-cuoi p { color: #eafbf0; }
.keu-goi-cuoi .nut { background: #fff; color: var(--chinh-dam); border-color: #fff; font-weight: 600; }
.keu-goi-cuoi .nut.phu { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }

/* ---------- Chân trang ---------- */
.chan { background: #0c4a28; color: #cdebd8; margin-top: 40px; }
.chan a { color: #86efac; }
.chan .duoi-cung { border-top: 1px solid rgba(255,255,255,.14); color: #9ccfae; }

/* ---------- Thẻ chỗ trống ---------- */
.cho-the { box-shadow: var(--bong-nho); }
.cho-the .so-cho-con { color: var(--chinh-dam); }

/* ---------- Các bước ---------- */
.buoc-di .so { background: linear-gradient(145deg, var(--la), var(--la-sang)); box-shadow: var(--bong-nho); }

/* ---------- Khu quản lý: nhấn cùng tông ---------- */
.qt-ben .muc.dang { border-left-color: var(--chinh); background: var(--chinh-nhat); }
.so-to.thu { color: var(--chinh-dam); }

@media (max-width: 700px) {
  .mo-dau .khung { padding-top: 40px; padding-bottom: 40px; }
  .so-lieu-hang { margin-top: 0; }
  .keu-goi-cuoi { padding: 26px 18px; }
}


/* =========================================================================
   DẢI MỞ ĐẦU HAI CỘT: chữ bên trái, tranh "người gọi xe" bên phải.
   ========================================================================= */
.mo-dau .trong-hai-cot {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 36px; align-items: center;
}
.mo-dau .cot-chu { min-width: 0; }
.mo-dau .cot-tranh { min-width: 0; }
.tranh-goi-xe { width: 100%; height: auto; display: block; overflow: visible; }

/* Trên màn hẹp: một cột, tranh xuống dưới và thu nhỏ lại. Không ẩn hẳn —
   đây là thứ nói ngay "đây là chỗ gọi xe", ẩn đi thì màn hình điện thoại
   chỉ còn chữ. */
@media (max-width: 900px) {
  .mo-dau .trong-hai-cot { grid-template-columns: 1fr; gap: 20px; }
  .mo-dau h1 { max-width: none; }
  .mo-dau .cot-tranh { max-width: 560px; margin: 0 auto; }
}

/* ---------- Chuyển động ---------- */
/* Vạch kẻ đường trôi về phía sau: mắt đọc ra "xe đang tiến tới" mà không cần
   dịch chuyển cả chiếc xe đi đâu cả. */
@keyframes vach-troi { from { transform: translateX(0); } to { transform: translateX(-86px); } }
@keyframes banh-quay { to { transform: rotate(360deg); } }
@keyframes xe-nhun   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes song-toa  { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tay-vay   { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } }

.tranh-goi-xe .vach-duong { animation: vach-troi 1.1s linear infinite; }
.tranh-goi-xe .xe-toi     { animation: xe-nhun 2.4s ease-in-out infinite; }
.tranh-goi-xe .banh .nan  { transform-box: fill-box; transform-origin: center;
                            animation: banh-quay 1.1s linear infinite; }
.tranh-goi-xe .nguoi-goi  { transform-box: fill-box; transform-origin: 30% 85%;
                            animation: tay-vay 3.2s ease-in-out infinite; }
.tranh-goi-xe .song1 { animation: song-toa 1.8s ease-out infinite; }
.tranh-goi-xe .song2 { animation: song-toa 1.8s ease-out .22s infinite; }
.tranh-goi-xe .song3 { animation: song-toa 1.8s ease-out .44s infinite; }

/* Ai đặt máy ở chế độ giảm chuyển động thì tranh đứng yên hoàn toàn.
   Có người chóng mặt thật vì thứ chạy qua chạy lại trên màn hình. */
@media (prefers-reduced-motion: reduce) {
  .tranh-goi-xe *, .tranh-goi-xe { animation: none !important; }
}


/* =========================================================================
   MÀN HÌNH HẸP: thu gọn dải mở đầu.
   Ông chủ 21/09: "trên mobile khung cao quá, thu lại gọn trên mobile nhé".

   Trên điện thoại, dải mở đầu chiếm gần trọn màn hình đầu tiên — khách phải
   cuộn mới thấy được dịch vụ và giá, mà phần lớn người ta không cuộn. Nên ở
   đây cắt khoảng đệm, hạ cỡ chữ, và ÉP CHIỀU CAO bức tranh: nhờ neo xuống đáy
   nên phần trời trống bị cắt đi, người và xe vẫn còn nguyên.
   ========================================================================= */
@media (max-width: 760px) {
  .mo-dau .khung { padding-top: 19px; padding-bottom: 15px; }
  .mo-dau .trong-hai-cot { gap: 10px; }

  .mo-dau .nhan-xanh { font-size: 11px; padding: 3.5px 9px; margin-bottom: 9px; gap: 6px; }
  .mo-dau .nhan-xanh svg { width: 13px; height: 13px; }

  .mo-dau h1 { font-size: 23.5px; line-height: 1.2; margin-bottom: 8px; }
  .mo-dau p.dat { font-size: 14px; line-height: 1.45; margin-bottom: 13px; }

  /* Hai nút đứng cạnh nhau và chia đôi bề ngang, số điện thoại xuống dòng dưới.
     Trước đây ba thứ này xếp dọc thành ba tầng, tốn gần một phần ba màn hình. */
  .mo-dau .nut-hang { gap: 9px; }
  .mo-dau .nut-hang .nut.to { flex: 1 1 0; min-width: 0; text-align: center;
    padding: 10px 10px; font-size: 14.5px; }
  .mo-dau .goi { flex: 1 0 100%; font-size: 15.5px; margin-top: 1px; line-height: 1.25; }
  .mo-dau .goi small { font-size: 11.5px; }

  /* Phải ghi rõ width cho cả cột lẫn SVG. Ảnh SVG mang sẵn tỷ lệ từ viewBox;
     đặt mỗi chiều cao thì trình duyệt tự suy ra chiều rộng theo tỷ lệ ấy
     (132px × 640/420 = 201px) rồi cột co theo — bức tranh teo lại còn hơn nửa
     bề ngang màn hình. */
  .mo-dau .cot-tranh { max-width: none; width: 100%; justify-self: stretch; }
  .tranh-goi-xe { width: 100%; height: 124px; }

  /* Bốn ô số liệu xếp hai hàng hai cột cho đỡ dài. */
  .so-lieu-hang { grid-template-columns: repeat(2, 1fr); }
  .so-lieu-hang > div { padding: 13px 10px; }
  .so-lieu-hang .so { font-size: 23px; }
  .so-lieu-hang .nhan-so { font-size: 12px; }

  h2 { margin: 26px 0 12px; }
  .dan-de { font-size: 14.5px; margin-bottom: 14px; }
  .dv { padding: 17px; }
  .the { padding: 16px; }
}

/* Máy màn hình rất hẹp: hạ thêm một nấc nữa. */
@media (max-width: 400px) {
  .mo-dau .khung { padding-top: 20px; padding-bottom: 16px; }
  .mo-dau h1 { font-size: 23px; }
  .mo-dau p.dat { font-size: 14px; }
  .tranh-goi-xe { width: 100%; height: 108px; }
  .mo-dau .nut-hang .nut.to { font-size: 14.5px; padding: 10px 8px; }
}