/* =============================================================================
   NỀN TẢNG GIAO DIỆN — bảng màu, chữ, nút, khung, bảng phụ (modal).

   THANG KÍCH THƯỚC lấy nguyên theo Sổ tay Hội Nông dân (hoinongdan.sotay.org):
   chữ nền 14px, nút 13.5px cao 40px, tiêu đề bảng 16px, ô nhập 14px, dòng
   thông tin 13px. Thang này đã chạy tốt nhiều năm trên cả máy tính lẫn điện
   thoại — ĐỪNG phóng to lên, giao diện sẽ lập tức thô và chiếm chỗ.

   TONE MÀU: nền tối nhiều tầng theo Adobe Lightroom, điểm xuyết vài nét xanh
   #31a8ff ở viền nút, mép bảng, gạch chân tiêu đề và vài chữ cần nổi — như
   chiếc xe đen kẻ vài vệt xanh, không phải sơn xanh cả xe. Nguyên tắc: xanh
   chỉ dùng ở ĐƯỜNG NÉT và CHỮ NHẤN, không dùng làm mảng nền lớn.
   ========================================================================== */

:root {
  /* Nền: bốn tầng từ sâu nhất tới nổi nhất */
  --nen-sau: #101216;
  --nen: #16191e;
  --the: #1c2026;
  --the-2: #22272e;
  --the-3: #2a3038;

  /* Viền */
  --vien: #2b313a;
  --vien-sang: #39414c;

  /* Chữ */
  --chu: #e6eaf0;
  --chu-diu: #9aa4b2;
  --chu-mo: #6b7482;

  /* Xanh đặc trưng của web — dùng cho ĐƯỜNG NÉT và chữ nhấn */
  --xanh: #31a8ff;
  --xanh-dam: #1473e6;
  --xanh-dam-hover: #0d66d0;
  --xanh-mo: rgba(49, 168, 255, .16);   /* vệt xanh mờ cho viền phụ */
  --xanh-nen: rgba(49, 168, 255, .09);  /* nền xanh rất nhạt cho khối ghi chú */

  /* Màu chức năng */
  --la: #2d9d5f;
  --la-dam: #22834e;
  --la-dam-net: #3fc47c;   /* xanh lá đậm cho phần trăm giảm trên nền tối */
  --cam: #ffa72e;        /* giá tiền */
  --do: #e5534b;

  /* Bóng đổ */
  --bong: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .28);
  --bong-noi: 0 8px 24px rgba(0, 0, 0, .5);
  --bong-modal: 0 20px 56px rgba(0, 0, 0, .65);

  /* Bo góc — theo đúng thang của hoinongdan */
  --bo: 8px;
  --bo-the: 14px;
  --bo-modal: 16px;

  /* Chiều cao thanh báo giá neo đáy — cuối trang chừa đúng khoảng này */
  --cao-thanh-day: 104px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Khoá cuộn nền khi menu hoặc bảng phụ đang che màn hình */
body.khoa-cuon { overflow: hidden; }

h1, h2, h3 { margin: 0; letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0 0 10px; }
a { color: var(--xanh); }
img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
input { font: inherit; color: inherit; }

/* ------------------------------------------------------------------- NÚT */

.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--bo);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: .15s;
}

.nut:disabled { opacity: .45; cursor: not-allowed; }

/* Nút hành động chính — nền xanh đặc */
.nut-chinh { background: var(--xanh-dam); color: #fff; border-color: var(--xanh-dam); }
.nut-chinh:hover:not(:disabled) { background: var(--xanh-dam-hover); }
.nut-chinh:disabled { background: var(--the-3); border-color: var(--vien); color: var(--chu-mo); }

/* Nút phụ — nền tối, viền sáng, rê chuột thì nét viền chuyển xanh */
.nut-vien { background: var(--the-2); border-color: var(--vien-sang); color: var(--chu); }
.nut-vien:hover:not(:disabled) { background: var(--the-3); border-color: var(--xanh); color: var(--xanh); }

.nut-la { background: var(--la); color: #fff; border-color: var(--la); }
.nut-la:hover:not(:disabled) { background: var(--la-dam); }

/* Nút chốt đơn — nền đỏ để nổi bật hẳn khỏi mọi nút khác trên màn hình */
.nut-do { background: var(--do); color: #fff; border-color: var(--do); }
.nut-do:hover:not(:disabled) { background: #cf3f37; }
.nut-do:disabled { background: var(--the-3); border-color: var(--vien); color: var(--chu-mo); }

.nut-nho { min-height: 32px; padding: 6px 10px; font-size: 12px; border-radius: 6px; }
.nut-rong { width: 100%; }

/* --------------------------------------------------------------- Ô NHẬP */

.truong { margin-bottom: 14px; }

.truong label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--chu);
}

.truong input {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--vien-sang);
  border-radius: var(--bo);
  background: var(--nen-sau);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.truong input:focus {
  outline: none;
  border-color: var(--xanh);
  box-shadow: 0 0 0 3px var(--xanh-mo);
}

.truong input.sai { border-color: var(--do); }

.truong .goi-y { margin: 5px 0 0; font-size: 11.5px; color: var(--chu-mo); }
.truong .loi { margin: 5px 0 0; font-size: 12px; color: var(--do); }

/* ------------------------------------------------- KHUNG / BẢNG PHỤ (MODAL) */

.modal-lop {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow: auto;
  background: rgba(6, 8, 11, .72);
  animation: modal-nen-hien .3s ease-out;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: auto;
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-modal);
  box-shadow: var(--bong-modal);
  animation: modal-hien .34s cubic-bezier(.22, 1, .36, 1);
}

@keyframes modal-nen-hien { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-hien { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* Đầu bảng: nền hơi nổi hơn thân, và một vệt xanh mảnh chạy dưới chân —
   đây là một trong những nét xanh đặc trưng của web. */
.modal-dau {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 56px 16px 22px;
  background: var(--the-2);
  border-bottom: 1px solid var(--vien);
  border-radius: var(--bo-modal) var(--bo-modal) 0 0;
}

.modal-dau::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--xanh), rgba(49, 168, 255, 0));
}

.modal-dau h2 { font-size: 16px; font-weight: 700; flex: 1; min-width: 0; }

.modal-x {
  position: absolute;
  /* Phải nổi trên .modal-dau: thanh tiêu đề cũng là phần tử định vị (để vẽ vệt
     xanh ở chân) và đứng SAU nút X trong HTML, nên mặc định nó phủ lên nút X
     khiến bấm không ăn — lỗi này đã xảy ra thật. */
  z-index: 2;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bo);
  font-size: 18px;
  line-height: 1;
  color: var(--chu-mo);
  background: transparent;
  border: 1px solid transparent;
  transition: .15s;
}

.modal-x:hover { background: var(--do); border-color: var(--do); color: #fff; }

.modal-than { padding: 18px 22px; max-height: 70vh; overflow: auto; }

.modal-day {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 22px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--nen-sau);
  border-top: 1px solid var(--vien);
  border-radius: 0 0 var(--bo-modal) var(--bo-modal);
}

.modal-day .nut { flex: 1 1 150px; }

/* ------------------------------------- 2 NÚT CUỘN LÊN ĐẦU / XUỐNG CUỐI MODAL
   Tự động chèn cho MỌI bảng phụ trong toàn web (kể cả bảng viết sau này) —
   xem hàm ganNutCuonModal ở phần 02. Luôn thẳng hàng dọc, sát mép phải màn
   hình, đè lên bảng đang mở, và KÉO THẢ được theo chiều dọc.
   Kiểu dáng giữ nguyên như bên Sổ tay Hội Nông dân. */
.nut-cuon-modal {
  position: fixed;
  right: 6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #616161, #212121);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  opacity: .55;
  transition: opacity .2s ease;
  /* Khoá chọn văn bản + menu ngữ cảnh — trình duyệt di động hiểu mũi tên bên
     trong nút như một ký tự thường, bấm giữ lâu sẽ hiện menu "Sao chép". */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.nut-cuon-modal:hover { opacity: 1; }

@media (max-width: 640px) {
  .nut-cuon-modal { width: 32px; height: 32px; font-size: 14px; right: 4px; }
}

/* ---------------------------------------------------- DÒNG THÔNG TIN (KEY–VALUE) */

.dong-tt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--vien);
}

.dong-tt:last-child { border-bottom: 0; }
.dong-tt > span { color: var(--chu-diu); }
.dong-tt > b { font-weight: 600; text-align: right; word-break: break-word; }

/* --------------------------------------------------------------- TIỆN ÍCH */

/* Nhãn phân đoạn — chữ nhỏ in hoa, kèm một vạch xanh ngắn dẫn đầu */
.nhan-doan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--chu-diu);
}

.nhan-doan::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--xanh); flex: 0 0 auto; }
.nhan-doan::after { content: ""; flex: 1; height: 1px; background: var(--vien); }

.chu-nhan { color: var(--xanh); }
.chu-tien { color: var(--cam); font-weight: 700; }

/* Khối ghi chú nhẹ — nền xanh rất nhạt, viền trái xanh đặc */
.ghi-chu {
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--chu-diu);
  background: var(--xanh-nen);
  border-left: 2px solid var(--xanh);
  border-radius: 0 var(--bo) var(--bo) 0;
}

.ghi-chu strong { color: var(--chu); }

:focus-visible { outline: 2px solid var(--xanh); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}