/* ============================================================
   Cantaloupe - Khung Dashboard kiểu mới (thư mục DUALUOI_WEB, 03/11/2026): cùng kiểu với trang chủ mới.
   Giữ nguyên bố cục và chức năng; chỉ đổi phông chữ (Be Vietnam Pro, tên trang chữ có chân Lora), ô bo góc lớn hơn,
   nút bo tròn, và chế độ tối bớt tối cho cùng tông với chế độ tối của trang công cộng.
   Chỉ áp cho body class "dash-sang" (các trang sau khi đăng nhập; trang Nhận diện khi mở trong Dashboard).
   ============================================================ */

.dash-sang {
  --dm-dam: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --dm-serif: 'Lora', Georgia, 'Times New Roman', serif;
  font-family: var(--dm-dam);
  background: #f3f7f4;
}

/* Thanh bên: mục chọn bo tròn hẳn như nút ở trang chủ */
.dash-sang .dash-brand { font-weight: 700; letter-spacing: -0.01em; font-size: 20px; }
.dash-sang .dash-nav a { border-radius: 999px; padding: 11px 16px; font-weight: 500; }
.dash-sang .dash-nav a.active { font-weight: 600; box-shadow: 0 6px 16px rgba(22,163,74,.28); }
.dash-sang .user-chip { border-radius: 18px; }

/* Tên trang: chữ có chân, to hơn một chút */
.dash-sang .dash-topbar .greet h1 { font-family: var(--dm-serif); font-weight: 500; letter-spacing: -0.01em; font-size: 34px; line-height: 1.15; }
.dash-sang .dash-topbar .greet p { font-size: 15px; margin-top: 4px; }
.dash-sang .in-dash .section-head h2 { font-family: var(--dm-serif); font-weight: 500; letter-spacing: -0.01em; font-size: 24px; }

/* Ô, thẻ, nút, ô nhập */
.dash-sang .panel { border-radius: 24px; padding: 24px 26px; }
.dash-sang .card { border-radius: 24px; }
.dash-sang .panel-head h3 { font-weight: 700; letter-spacing: -0.005em; }
.dash-sang .dash-section-title { font-weight: 700; }
.dash-sang .btn { border-radius: 999px; font-weight: 600; }
.dash-sang .field input, .dash-sang .field textarea, .dash-sang .field select { border-radius: 12px; }
.dash-sang .modal { border-radius: 24px; }
.dash-sang .upload-box { border-radius: 22px; }
.dash-sang .stage-photo { border-radius: 18px; }

/* ---------- Điện thoại (≤820px): thanh dưới đáy kiểu ứng dụng thay cho thanh bên và nút ☰ (người dùng chọn 03/11/2026).
   js/common.js (tabDuoiDashHTML) vẽ thanh này cùng với thanh bên ---------- */
.dash-tab, .dash-them { display: none; }
@media (max-width: 820px) {
  .dash-sang .dash-sidebar, .dash-sang .mobile-menu-btn { display: none; }
  .dash-sang .dash-main { padding: 18px 16px calc(110px + env(safe-area-inset-bottom)); }
  .dash-sang .dash-topbar { margin-bottom: 18px; }
  .dash-sang .dash-topbar .greet h1 { font-size: 27px; }
  .dash-sang .dash-topbar .greet p { font-size: 14px; }
  .dash-sang .panel { border-radius: 20px; padding: 18px; }
  .dash-sang .widgets { gap: 14px; }
  /* Dải báo trên Tổng quan: biểu tượng + chữ một hàng, nút xuống dòng riêng rộng hết khung
     (trước đây nút giành chỗ nên chữ bị bóp thành cột hẹp mỗi dòng một hai chữ, người dùng chê 03/11/2026) */
  .dash-sang .alert-strip { flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; padding: 16px; }
  .dash-sang .alert-strip .a-ic { width: 42px; height: 42px; }
  .dash-sang .alert-strip .a-main { flex: 1 1 0; }
  .dash-sang .alert-strip .a-main h4 { line-height: 1.35; }
  .dash-sang .alert-strip > .btn { flex: 1 1 100%; justify-content: center; }
  /* Đầu mỗi ô: tên ô và nút/nhãn bên phải được xuống dòng khi chật, khỏi bóp chữ */
  .dash-sang .panel-head { flex-wrap: wrap; gap: 8px 12px; }

  /* Tổng quan: ô nhiệt độ & độ ẩm (đang khoá, "Đang phát triển thêm") xuống dưới cùng, "Tiến độ từng luống" lên trên nó */
  .dash-sang .o-khi-hau { order: 1; }
  /* Tổng quan, Tỷ lệ giai đoạn: vòng tròn ở giữa; chú thích bên dưới trải hết bề ngang, số canh phải, kẻ dòng mảnh
     (trước đây vòng tròn và chú thích dồn sang trái, bên phải trống, số nằm sát chữ) */
  .dash-sang .donut-wrap { flex-direction: column; align-items: stretch; gap: 14px; }
  .dash-sang #donutStage { align-self: center; }
  .dash-sang .donut-legend { gap: 0; }
  .dash-sang .donut-legend .legend-row { padding: 9px 2px; font-size: 15px; border-bottom: 1px solid rgba(148,163,184,.18); }
  .dash-sang .donut-legend .legend-row:last-child { border-bottom: 0; }
  .dash-sang .donut-legend .legend-row b { font-variant-numeric: tabular-nums; }

  /* Camera, Nhật ký nhận diện dưa: ảnh nhỏ + chữ một hàng rộng; nhãn tình trạng và nút "Chi tiết" xuống hàng dưới
     (trước đây cả 4 thứ chung một hàng nên chữ bị bóp hẹp) */
  .dash-sang .log-item { flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; }
  .dash-sang .log-item .log-main { flex: 1 1 calc(100% - 70px); }
  .dash-sang .log-item > .text-center { margin-left: 70px; }
  .dash-sang .log-item > .btn { margin-left: auto; }

  /* Cài đặt > Giao diện: 3 lựa chọn thành 3 thanh ngang xếp dọc (hình thu nhỏ bên trái, tên giữa, nút chọn bên phải) */
  .dash-sang .gdien-chon { flex-direction: column; gap: 10px; }
  .dash-sang .gdien-kieu { flex-direction: row; align-items: center; gap: 14px; padding: 10px 16px 10px 10px;
    border: 1.5px solid var(--slate-200); border-radius: 16px; transition: border-color .15s, background .15s; }
  .dash-sang .gdien-kieu:has(input:checked) { border-color: var(--green-600); background: var(--green-50); }
  .dash-sang .gdien-mau { width: 76px; height: 50px; border-radius: 10px; flex: none; }
  .dash-sang .gdien-kieu input:checked ~ .gdien-mau { box-shadow: none; }
  .dash-sang .gdien-mau i { top: 8px; left: 8px; width: 8px; height: 8px; }
  .dash-sang .gdien-mau b { top: 7px; left: 20px; width: 30px; height: 11px; border-radius: 3px; }
  .dash-sang .gdien-mau em { right: 8px; bottom: 8px; width: 24px; height: 12px; border-radius: 4px; }
  .dash-sang .gdien-mau.thiet-bi b { background: linear-gradient(90deg, #fff 18px, #2f3d36 18px); }
  .dash-sang .gdien-ten { flex: 1; flex-direction: row-reverse; justify-content: space-between; font-size: 16px; }

  .dash-tab { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; z-index: 300;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 66px; padding: 0 4px; border-radius: 22px;
    background: rgba(255,255,255,.96); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.16);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .dt-muc { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 600; color: #64748b; text-decoration: none; }
  .dt-muc:hover { text-decoration: none; color: var(--green-800); }
  .dt-muc.dang { color: var(--green-700); }
  .dt-ic { position: relative; display: grid; place-items: center; width: 44px; height: 30px; border-radius: 999px; transition: background .2s; }
  .dt-muc.dang .dt-ic { background: var(--green-100); }
  .dt-ic .ic-svg { width: 22px; height: 22px; }
  .dt-cham { position: absolute; top: 3px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--cal-ai); border: 2px solid #fff; }
  /* Nút tròn ở giữa (Nhận diện) nhô lên khỏi thanh */
  .dt-giua { justify-self: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--green-600); color: #fff; border: 4px solid #f3f7f4; box-shadow: 0 8px 20px rgba(22,163,74,.38); }
  .dt-giua:hover { color: #fff; text-decoration: none; }
  .dt-giua .ic-svg { width: 25px; height: 25px; }
  .dt-giua.dang { background: var(--melon-600); box-shadow: 0 8px 20px rgba(234,115,23,.38); }

  /* Tấm "Thêm" trượt lên từ đáy, lớp mờ phía sau; bấm ra ngoài là đóng */
  .dash-them:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 400; }
  .dt-man { position: absolute; inset: 0; background: rgba(15,23,42,.45); animation: dtHien .2s ease; }
  .dt-tam { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
    border-radius: 26px 26px 0 0; background: #fff; box-shadow: 0 -10px 30px rgba(15,23,42,.15); animation: dtLen .28s cubic-bezier(.2,.7,.2,1); }
  .dt-keo { width: 44px; height: 5px; border-radius: 99px; background: #cbd5e1; margin: 2px auto 14px; }
  .dt-tam .user-chip { margin-bottom: 8px; }
  .dt-dong { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 12px; border: 0; border-radius: 14px; background: none;
    font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none; }
  .dt-dong:hover { background: var(--green-50); text-decoration: none; }
  .dt-dong.dang { background: var(--green-50); color: var(--green-800); font-weight: 600; }
  .dt-dong .ic-svg { width: 22px; height: 22px; color: var(--green-700); }
  .khoa-cuon, .khoa-cuon body { overflow: hidden; }
}
@keyframes dtLen { from { transform: translateY(100%); } }
@keyframes dtHien { from { opacity: 0; } }
@media (max-width: 700px) {
  .dash-sang .dash-topbar .greet h1 { font-size: 26px; }
}

/* ---------- Chế độ tối bớt tối (người dùng chê tối quá ở trang công cộng, 03/11/2026): cùng tông than ánh xanh ---------- */
html.che-do-toi {
  --toi-nen: #1a2320;     /* nền trang */
  --toi-o: #232d28;       /* ô, thanh bên */
  --toi-o2: #2b3631;      /* ô lồng trong ô, ô nhập, nút sáng */
  --toi-vien: rgba(255,255,255,.08);
}
.che-do-toi .field input, .che-do-toi .field textarea, .che-do-toi .field select { background: #1f2925; }
/* Thanh dưới đáy và tấm "Thêm" trên điện thoại khi tối */
.che-do-toi .dash-tab { background: rgba(35,45,40,.96); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.che-do-toi .dt-muc { color: #93a19a; }
.che-do-toi .dt-muc.dang { color: #86efac; }
.che-do-toi .dt-muc.dang .dt-ic { background: rgba(134,239,172,.14); }
.che-do-toi .dt-cham { border-color: var(--toi-o); }
.che-do-toi .dt-giua { border-color: var(--toi-nen); }
.che-do-toi .dt-tam { background: var(--toi-o); box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
.che-do-toi .dt-keo { background: rgba(255,255,255,.2); }
.che-do-toi .dt-man { background: rgba(0,0,0,.55); }

/* ---------- Cài đặt thông báo (03/11/2026): nút gạt không bị bóp méo khi chữ dài (trên điện thoại núm tròn từng lòi ra ngoài) ---------- */
.dash-sang .switch { flex: none; }
.dash-sang .tb-dong { gap: 16px; }

/* ---------- Cài đặt > Lịch sử thông báo ---------- */
.tb-ngay { margin: 18px 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); }
.tb-ngay:first-child { margin-top: 0; }
.tb-muc { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(148,163,184,.18); }
.tb-muc:last-child { border-bottom: 0; }
.tb-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); }
.tb-ic .ic-svg { width: 20px; height: 20px; }
.tb-muc.stage .tb-ic { background: #f3e8ff; color: #7c3aed; }
.tb-muc.alert .tb-ic { background: #fee2e2; color: #b91c1c; }
.tb-muc.info .tb-ic { background: #dbeafe; color: #1d4ed8; }
.tb-than { flex: 1; min-width: 0; }
.tb-than b { font-size: 15px; }
.tb-than .tag-demo { margin-left: 8px; }
.tb-than .muted { margin-top: 2px; font-size: 14px; line-height: 1.5; }
.tb-gio { flex: none; padding-top: 2px; font-size: 13px; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.che-do-toi .tb-muc.stage .tb-ic { background: rgba(139,92,246,.2); color: #c4b5fd; }
.che-do-toi .tb-muc.alert .tb-ic { background: rgba(220,38,38,.18); color: #fca5a5; }
.che-do-toi .tb-muc.info .tb-ic { background: rgba(37,99,235,.2); color: #93c5fd; }

/* ---------- Chuông nhỏ nằm trong khung chủ vườn, bên phải (máy tính: cuối thanh bên; điện thoại: tấm "Thêm"), 03/11/2026.
   Bấm mở Cài đặt > Lịch sử thông báo; chấm đỏ khi có thông báo chưa xem (cả trên nút "Thêm" của thanh dưới đáy) ---------- */
.dash-sidebar .user-chip { gap: 10px; }
.dash-sidebar .user-chip .nut-chuong { width: 36px; height: 36px; }
.dash-sidebar .user-chip .nut-chuong .ic-svg { width: 18px; height: 18px; }
.dash-sidebar .user-chip .chuong-cham { top: 6px; right: 7px; }
.tb-cham { background: var(--cal-alert); }
.nut-chuong { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: var(--green-800); background: #f5f9f6; border: 1px solid rgba(15,23,42,.06); transition: background .15s, color .15s; }
.nut-chuong:hover { background: var(--green-50); color: var(--green-700); text-decoration: none; }
.nut-chuong .ic-svg { width: 20px; height: 20px; }
.chuong-cham { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--cal-alert); border: 2px solid #fff; }
.user-chip .nut-chuong { margin-left: auto; background: #fff; }
.che-do-toi .nut-chuong { background: var(--toi-o2); border-color: var(--toi-vien); }
.che-do-toi .user-chip .nut-chuong { background: var(--toi-o); }
.che-do-toi .chuong-cham { border-color: var(--toi-o2); }

/* ---------- Cài đặt trên điện thoại (03/11/2026): các mục là danh sách dọc (biểu tượng, tên, mũi tên); bấm một mục thì danh sách
   ẩn đi, hiện nội dung mục đó và nút "‹ Quay lại" (account.html thêm class cd-xem-o vào body) ---------- */
.cd-quay-lai { display: none; }
@media (max-width: 820px) {
  .dash-sang .cd-tabs { flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0 0 18px; overflow: hidden;
    background: #fff; border: 1px solid rgba(15,23,42,.07); border-radius: 20px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05); }
  .dash-sang .cd-tabs button, .dash-sang .cd-tabs button.active {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid rgba(148,163,184,.18);
    border-radius: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 500; text-align: left; }
  .dash-sang .cd-tabs button:last-child { border-bottom: 0; }
  .dash-sang .cd-tabs button::after { content: "›"; margin-left: auto; font-size: 24px; line-height: 1; color: var(--slate-400); }
  .dash-sang .cd-tabs button .ic-svg { width: 22px; height: 22px; color: var(--green-700); }
  .dash-sang .cd-tabs button:active { background: var(--green-50); }
  body.dash-sang:not(.cd-xem-o) .cd-o { display: none; }
  body.dash-sang.cd-xem-o .cd-tabs { display: none; }
  body.dash-sang.cd-xem-o .cd-quay-lai { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px -6px; padding: 6px 12px 6px 6px;
    border: 0; border-radius: 999px; background: none; color: var(--green-700); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
  body.dash-sang.cd-xem-o .cd-quay-lai:active { background: var(--green-50); }
  .che-do-toi .dash-sang .cd-tabs { background: var(--toi-o); border-color: var(--toi-vien); box-shadow: none; }
  .che-do-toi .dash-sang .cd-tabs button:not(.active), .che-do-toi .dash-sang .cd-tabs button.active { background: none; color: var(--ink); }
}

/* ---------- Cài đặt: các khung nội dung rộng hết màn hình (trước đây chỉ rộng 760px, người dùng muốn "toàn màn hình cho sang",
   03/11/2026). Nội dung bên trong xếp lại cho đầy khung ---------- */
.dash-sang .cd-o { max-width: none; }
.vm-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vm-o { padding: 16px 18px; border-radius: 16px; background: #f5f9f6; border: 1px solid rgba(15,23,42,.05); }
.vm-o span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--slate-500); }
.vm-o b { font-size: 18px; color: var(--green-900); }
.che-do-toi .vm-o { background: var(--toi-o2); border-color: var(--toi-vien); }
@media (min-width: 821px) {
  .dash-sang .cd-o { padding: 28px 32px; }
  /* Thông tin cá nhân: 2 cột ô nhập */
  .dash-sang #profileForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .dash-sang #profileForm .btn { grid-column: 1 / -1; justify-self: start; }
  /* Giao diện: 3 lựa chọn chia đều bề ngang, mỗi lựa chọn một ô viền, ô đang chọn viền xanh */
  .dash-sang .gdien-chon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .dash-sang .gdien-kieu { padding: 22px 16px 18px; border: 1.5px solid var(--slate-200); border-radius: 18px; transition: border-color .15s, background .15s; }
  .dash-sang .gdien-kieu:has(input:checked) { border-color: var(--green-600); background: var(--green-50); }
}
@media (max-width: 820px) {
  .vm-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vm-o { padding: 14px; }
  .vm-o b { font-size: 16px; }
}

/* ============================================================
   12/11/2026: sửa theo danh sách rà soát người dùng chọn (A6, A9, B18) và nhãn hiện sẵn ở khung xem camera.
   ============================================================ */
/* B18. Chữ 10–11px nâng lên 12–12,5px: nhãn "Minh hoạ", tên việc trong ô lịch, chữ "+2 nữa", thước ngày ở Nhật ký sinh trưởng */
.tag-demo { font-size: 12.5px; padding: 2px 9px; }
.cal-event { font-size: 12.5px; }
.cal-more { font-size: 12px; }
.gantt-today span, .gantt-scale { font-size: 12px; }
.cam-the small { font-size: 12.5px; }
/* Ghi chú dài cuối trang Camera: 13px → 14px, giãn dòng cho dễ đọc */
.dash-sang .ghi-chu-cuoi { font-size: 14px; line-height: 1.6; color: var(--slate-500); max-width: 980px; }

/* A9. Ô tích việc (Tổng quan): hình vẫn 26px, vùng bấm rộng ra 40px */
.task-check { position: relative; }
.task-check::before { content: ""; position: absolute; inset: -7px; }

/* A6. Lịch tháng trên điện thoại: ô ngày quá hẹp nên không ghi tên việc (trước bị cắt còn "0…") mà hiện chấm màu;
   bấm một ngày thì ô đó sáng viền xanh và danh sách việc của ngày hiện ngay dưới lưới (js/calendar.js: chonNgay) */
.cal-dots, .cal-ngay { display: none; }
@media (max-width: 700px) {
  .cal-grid { gap: 5px; }
  .cal-cell { min-height: 56px; padding: 7px 2px 6px; align-items: center; gap: 6px; border-radius: 12px; cursor: pointer; }
  .cal-cell .cal-event, .cal-cell .cal-more { display: none; }
  .cal-cell .day-num { font-size: 15px; line-height: 1; }
  .cal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .cal-dots i { width: 7px; height: 7px; border-radius: 50%; }
  .cal-dots i.done { opacity: .4; }
  .dash-sang .cal-cell.chon { background: var(--green-50); border-color: var(--green-600); box-shadow: 0 0 0 1px var(--green-600); }
  .cal-ngay { display: block; margin-top: 16px; padding-top: 4px; border-top: 1px solid rgba(148,163,184,.25); }
  .view-switch button { padding: 9px 16px; }   /* A9: cao khoảng 36px */
}
.che-do-toi .dash-sang .cal-cell.chon { background: color-mix(in srgb, #16a34a 18%, var(--toi-o2)); border-color: #4ade80; box-shadow: 0 0 0 1px #4ade80; }

/* Khung xem camera (12/11/2026, người dùng yêu cầu): mở trang là thấy ngay viền tô và nhãn (giai đoạn + độ chắc) của mọi hoa,
   quả máy đã nhận ra, không cần bấm. Nhãn ".cam-the.san" do js/camera-xoay.js đặt chỗ (left/top) và cho đi theo ảnh. */
.cam-vat { fill: color-mix(in srgb, var(--c) 22%, transparent); stroke: var(--c); }
.cam-vat:hover { fill: color-mix(in srgb, var(--c) 30%, transparent); stroke: var(--c); }
.cam-vat.chon { fill: color-mix(in srgb, var(--c) 38%, transparent); stroke-width: 3.5px; }
.cam-the.san { transform: none; animation: none; left: 0; top: 0; transition: opacity .15s; }
.cam-the.san.an { opacity: 0; visibility: hidden; }
.cam-the.san.chon { box-shadow: 0 0 0 2.5px var(--c), 0 10px 28px rgba(15,23,42,.22); z-index: 1; }
/* Mũi nhỏ chỉ từ nhãn vào vật (khi nhãn nằm ngay trên hoặc ngay dưới vật): ô vuông xoay 45 độ, cùng màu nền với nhãn */
.cam-the.san.mui-duoi::before, .cam-the.san.mui-tren::before { content: ""; position: absolute; left: calc(var(--mx, 50%) - 5px);
  width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.cam-the.san.mui-duoi::before { bottom: -4px; }
.cam-the.san.mui-tren::before { top: -4px; }
/* Điện thoại: khung ảnh nhỏ (khoảng 300px) nên nhãn làm gọn lại: tên giai đoạn không có nền, số % nhỏ hơn */
@media (max-width: 700px) {
  .cam-the.san { padding: 4px 8px 5px; border-radius: 9px; gap: 0; box-shadow: 0 5px 16px rgba(15,23,42,.24); }
  .cam-the.san .stage-chip { background: none; padding: 0; gap: 5px; }
  .cam-the.san .stage-chip i { width: 9px; height: 9px; }
  .cam-the.san b { font-size: 15px; line-height: 1.2; }
  /* Hai dòng chữ ở góc trên khung ảnh đè lên nhau trên điện thoại: dòng bên phải chỉ còn "Ảnh chụp sẵn"
     (chữ "Minh hoạ" đã có ở nhãn cạnh tên ô) */
  .cam-hud .hud-them { display: none; }
}

/* ============================================================
   12/11/2026, đợt 2 (người dùng yêu cầu)
   ============================================================ */
/* Khung xem camera: nút chọn cách hiện kết quả, nằm bên phải tên ô. "Bấm để xem" (class chi-bam trên khung ảnh):
   viền và nhãn ẩn, chỉ vật đang rê chuột / đang chọn mới hiện như trước 12/11 */
.cam-che-do { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.cam-che-do .view-switch { background: #f1f5f4; border-color: rgba(15,23,42,.06); }
.cam-che-do .view-switch button { padding: 8px 16px; white-space: nowrap; }
.cam-khung.chi-bam .cam-vat:not(.chon):not(:hover) { fill: transparent; stroke: transparent; }
.cam-khung.chi-bam .cam-the.san:not(.chon) { opacity: 0; visibility: hidden; }
@media (max-width: 700px) {
  .cam-dau .cam-che-do { width: 100%; justify-content: space-between; }
  .cam-che-do .view-switch button { padding: 9px 13px; }
}

/* Bản đồ giai đoạn sinh trưởng: mỗi luống là MỘT hàng thẳng như luống ngoài vườn, không bao giờ rớt xuống hàng thứ hai.
   Các ô cây chia đều bề ngang còn lại (lưới --so-cay cột, js/camera.js đặt), khung hẹp thì ô tự nhỏ lại; ô to nhất 26px như cũ. */
.garden-row .row-label { width: 56px; white-space: nowrap; }
.plant-cells { display: grid; grid-template-columns: repeat(var(--so-cay, 15), minmax(0, 1fr)); gap: 4px; flex: 1 1 0; min-width: 0;
  max-width: calc(var(--so-cay, 15) * 30px - 4px); }
.plant-cells .plant { width: auto; height: auto; aspect-ratio: 1; border-radius: 28%; }
.plant-cells .plant.pollinated { outline-width: 1.5px; outline-offset: 0; }
/* Máy tính: cột bản đồ rộng hơn hai cột kia để 15 ô cây của một luống đủ to khi nằm trên một hàng (trước: 1fr 1.15fr 1fr) */
@media (min-width: 1001px) { .cam-grid { grid-template-columns: 1.45fr 1.1fr 1fr; } }

/* ============================================================
   12/11/2026, đợt 3 (người dùng yêu cầu): nút "Rút gọn" ở đầu các ô nhật ký (CT.rutGon trong js/common.js)
   ============================================================ */
/* Nút là mũi tên tròn nhỏ, không chữ; ô đang thu thì mũi tên quay xuống, danh sách ẩn hết, đầu ô không còn khoảng trống bên dưới */
.panel-head .nut-rut-gon { flex: none; margin-left: 12px; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: #fff; border: 1px solid rgba(15,23,42,.1); color: var(--green-800);
  transition: background .15s, border-color .15s; }
.panel-head .nut-rut-gon:hover { background: var(--green-50); border-color: var(--green-600); }
.panel-head .nut-rut-gon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .2s; }
.panel-head h3 + .nut-rut-gon { margin-left: auto; }
.panel-head:has(.nut-rut-gon) .sub { margin-left: auto; }
.o-rut-gon .nut-rut-gon svg { transform: rotate(180deg); }
.da-rut-gon { display: none !important; }
.panel.o-rut-gon > .panel-head { margin-bottom: 0; }
.che-do-toi .panel-head .nut-rut-gon { background: var(--toi-o2); border-color: var(--toi-vien); color: #86efac; }
.che-do-toi .panel-head .nut-rut-gon:hover { background: color-mix(in srgb, #16a34a 18%, var(--toi-o2)); border-color: #4ade80; }

/* ============================================================
   13/11/2026: sửa theo loạt ảnh người dùng gửi
   ============================================================ */
/* Tổng quan + Thiết bị: các ô trong cùng một hàng cao bằng nhau, đáy ngang nhau (4 thẻ số liệu; "Tỷ lệ giai đoạn" và
   "Diễn biến sinh trưởng"; ...) */
.dash-sang .widgets > .w > .panel { height: 100%; }
/* 4 thẻ số liệu đồng đều: số cùng cỡ, cùng một dòng; dòng nhỏ luôn nằm sát đáy thẻ */
/* Biểu tượng nằm cố định ở góc trên phải, tên thẻ nằm bên dưới và được dùng hết bề ngang thẻ nên không thẻ nào bị rớt tên
   xuống hai dòng trong khi thẻ khác một dòng */
.dash-sang .stat .stat-top { display: block; position: relative; }
.dash-sang .stat .stat-ic { position: absolute; top: 0; right: 0; }
.dash-sang .stat .stat-val { font-size: 32px; white-space: nowrap; padding-right: 54px; }
.dash-sang .stat .stat-label { margin-top: 16px; }
.dash-sang .stat .stat-trend { margin-top: auto; padding-top: 4px; font-size: 12.5px; }
/* Tỷ lệ giai đoạn: ô cao bằng ô bên cạnh thì vòng tròn + chú thích nằm giữa theo chiều dọc */
.dash-sang .w-4 > .panel:has(.donut-wrap) { display: flex; flex-direction: column; }
.dash-sang .w-4 > .panel:has(.donut-wrap) .donut-wrap { flex: 1; align-content: center; }

/* Thiết bị: chữ trong ô chọn tần suất quét nằm giữa ô */
.tb-chon { text-align: center; text-align-last: center; width: 100%; padding: 9px 10px; border-radius: 10px; font: inherit; font-size: 14.5px;
  border: 1.5px solid rgba(148,163,184,.4); background: #fff; color: var(--ink); cursor: pointer; }
.tb-chon option { background: #fff; color: #0f172a; }
/* Chế độ tối (13/11/2026: trước đây ô nền xám sáng chữ trắng, danh sách xổ xuống nền trắng chữ trắng nên không đọc được) */
.che-do-toi .tb-chon { background: var(--toi-o2); border-color: rgba(255,255,255,.16); color: #e5ece8; color-scheme: dark; }
.che-do-toi .tb-chon option { background: #2b3631; color: #e5ece8; }
/* Nút "Hiện sẵn / Bấm để xem" ở ô Xem camera, chế độ tối: nền tối như các nút khác (trước bị nền trắng) */
.che-do-toi .cam-che-do .view-switch { background: var(--toi-o2); border-color: var(--toi-vien); }
.che-do-toi .cam-che-do .view-switch button:not(.active) { color: #c3cfc8; }

/* Lịch, kiểu xem Tuần: 7 cột ngang (js/calendar.js: renderWeek) */
.cal-dots i { width: 7px; height: 7px; border-radius: 50%; }
.cal-dots i.done { opacity: .4; }
.td-thu { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--slate-500); }
.td-so { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700;
  color: var(--ink); line-height: 1; }
.today .tuan-dau .td-so { background: var(--melon-600); color: #fff; }
.today .tuan-dau .td-thu { color: var(--melon-600); }
/* Kiểu "7 cột" */
.tuan-cot { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tuan-o { min-height: 250px; display: flex; flex-direction: column; gap: 8px; padding: 10px 7px 12px; border-radius: 16px; background: #fff;
  border: 1px solid rgba(15,23,42,.07); }
.tuan-dau { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(148,163,184,.22); }
.tuan-viec { display: flex; flex-direction: column; gap: 6px; }
.cal-event.tuan { white-space: normal; overflow-wrap: anywhere; padding: 6px 8px; border-radius: 9px; line-height: 1.35; }
.cal-event.tuan b { display: block; font-weight: 700; opacity: .92; }
@media (max-width: 700px) {
  .tuan-cot { gap: 5px; }
  .tuan-o { min-height: 0; align-items: center; gap: 5px; padding: 8px 2px 7px; border-radius: 12px; cursor: pointer; }
  .tuan-o .tuan-viec { display: none; }
  .tuan-dau { border-bottom: 0; padding-bottom: 0; gap: 3px; }
  .tuan-o.chon { background: var(--green-50); border-color: var(--green-600); box-shadow: 0 0 0 1px var(--green-600); }
  .td-so { width: 30px; height: 30px; font-size: 15px; }
  .td-thu { font-size: 12px; }
}
.che-do-toi .tuan-o { background: var(--toi-o2); border-color: var(--toi-vien); }
.che-do-toi .td-so { color: #e5ece8; }
.che-do-toi .today .tuan-dau .td-so { color: #fff; }
.che-do-toi .tuan-o.chon { background: color-mix(in srgb, #16a34a 18%, var(--toi-o2)); border-color: #4ade80; box-shadow: 0 0 0 1px #4ade80; }