/* ==========================================================================
   MeMap — Design Tokens
   Nguồn: .claude/rules/design-system.md — không hardcode hex ngoài block này
   ========================================================================== */
:root {
  /* Brand — 07/2026 đổi từ cam (Meron Farm) sang xanh MeMap (không còn cam trong bộ nhận diện mới),
     lấy mẫu trực tiếp từ gradient logo MeMap thật (logo/memap.jpg, crop ra images/logo-memap-icon.png):
     #155C33 → #3F9A4D → #B7CB3B. --color-memap-green là màu CTA/accent chính của toàn site (thay
     --color-brand-orange cũ). */
  --color-memap-green: #3F9A4D;
  --color-memap-green-dark: #2E7A3B;
  --color-brand-green: #0B6B2E;
  --color-brand-green-dark: #084F22;
  --color-map-green: #1D6D3E;
  --color-map-green-dark: #14502E;

  /* Status */
  --color-success: #2E7D32;
  --color-warning: #F9A825;
  --color-danger: #D32F2F;
  --color-info: #1565C0;

  /* Neutral */
  --color-black: #0a0a0a;
  --color-white: #ffffff;
  --color-cream: #FFF8F0;
  --color-sand: #F5F0E8;

  /* Text */
  --color-text: #1A1A1A;
  --color-muted: #6B6B6B;
  --color-border: #E0E0E0;
  --color-bg: #FAFAF8;

  /* Type */
  --font-family: 'Be Vietnam Pro', Arial, sans-serif;
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-md: 1.125rem;
  --font-lg: 1.25rem;
  --font-xl: 1.5rem;
  --font-2xl: 2rem;
  --font-3xl: 2.75rem;
  --font-hero: 3.5rem;

  /* Spacing (8px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius & shadow */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  --container-max: 1200px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--font-base);
  line-height: 1.55;
  /* Sticky footer: khi nội dung trang ngắn hơn màn hình, footer vẫn dính đáy thay vì trôi lơ lửng
     ngay dưới nội dung. #footer-placeholder (nếu có) luôn là child cuối cùng của body. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#footer-placeholder { margin-top: auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
@media (min-width: 960px) {
  .container { padding: 0 var(--space-10); }
}

.section { padding: var(--space-16) 0; min-width: 0; }
.section--cream { background: var(--color-cream); }
.section--map { background: var(--color-map-green); color: var(--color-white); }

.eyebrow {
  display: inline-block;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-memap-green);
  margin-bottom: var(--space-2);
}

.section-heading { font-size: var(--font-2xl); font-weight: 700; margin-bottom: var(--space-3); }
.section-lead { font-size: var(--font-md); color: var(--color-muted); max-width: 640px; }

.text-muted { color: var(--color-muted); }
.mt-0 { margin-top: 0; }

/* ==========================================================================
   Cảnh báo mở file trực tiếp (file://) thay vì qua HTTP server
   ========================================================================== */
.file-protocol-warning {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--color-danger);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-sm);
  text-align: center;
  line-height: 1.5;
}
.file-protocol-warning code {
  background: rgba(255,255,255,0.2);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
}
@media (min-width: 960px) {
  .site-header__inner { padding: var(--space-3) var(--space-10); }
}
.site-header__logo { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; flex-shrink: 0; }
.site-header__logo img { height: 40px; width: auto; flex-shrink: 0; }
.site-header__logo .logo-full-img { display: none; height: 44px; }
@media (min-width: 1081px) {
  .site-header__logo .logo-icon-img { display: none; }
  .site-header__logo .logo-full-img { display: block; }
}

/* Nhóm bên phải header: ô tra cứu mã + toggle mobile + nav — gộp lại để justify-content:space-between
   trên .site-header__inner chỉ cần chia 2 phe (logo | phần còn lại), không dàn đều nhiều item lẻ tẻ. */
.site-header__right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 1; min-width: 0; }

/* Ô tra cứu mã lô nhanh — tách riêng khỏi nav chính, luôn hiện ở mọi kích thước màn hình (không ẩn vào hamburger) */
.header-quick-lookup { display: flex; align-items: center; gap: 0; flex-shrink: 1; min-width: 0; }
.header-quick-lookup input {
  width: 100%; min-width: 90px; max-width: 160px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-size: var(--font-sm);
}
.header-quick-lookup button {
  flex-shrink: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-memap-green);
  background: var(--color-memap-green); color: #fff; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer; font-size: var(--font-sm); line-height: 1;
}
.header-quick-lookup button:hover { background: var(--color-memap-green-dark); }
@media (max-width: 560px) {
  .header-quick-lookup input { display: none; }
  .header-quick-lookup button { border-radius: var(--radius-md); border-left: 1px solid var(--color-memap-green); }
}

.nav { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.nav__link {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__link:hover { background: var(--color-sand); }
.nav__link.is-active { background: var(--color-map-green); color: var(--color-white); }

.nav__dropdown { position: relative; flex-shrink: 0; }
.nav__dropdown-toggle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  font-weight: 600; font-size: var(--font-sm); background: transparent; border: none; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.nav__dropdown-toggle:hover { background: var(--color-sand); }
.nav__dropdown-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 200px; overflow: hidden;
}
.nav__dropdown.is-open .nav__dropdown-menu { display: block; }
.nav__dropdown-menu a {
  display: block; padding: var(--space-3) var(--space-4); font-size: var(--font-sm); font-weight: 500;
}
.nav__dropdown-menu a:hover { background: var(--color-sand); }

/* Màn hình hẹp: ẨN HẲN header (logo bar) — điều hướng chuyển hết xuống bottom nav kiểu app,
   nhường tối đa không gian dọc cho nội dung (hamburger menu cũ đã bỏ hẳn). */
@media (max-width: 1080px) {
  .site-header { display: none; }
}

/* ==========================================================================
   Bottom nav kiểu app (mobile/tablet ≤1080px) — Map · Thống Kê · Check · Tài khoản
   ========================================================================== */
.bottom-nav { display: none; }
@media (max-width: 1080px) {
  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1300;
    display: flex; align-items: stretch;
    background: var(--color-white); border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  }
  /* Chừa chỗ cho thanh nav — body là flex column nên map-layout/footer tự né, không bị che */
  body { padding-bottom: 58px; }

  .bottom-nav__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--space-1) 0; background: none; border: none; cursor: pointer;
    color: var(--color-muted); font-family: inherit; font-size: 0.68rem; font-weight: 600;
    text-decoration: none;
  }
  .bottom-nav__item.is-active { color: var(--color-map-green); }
  .bottom-nav__icon svg { width: 24px; height: 24px; display: block; }

  /* Mobile: header đã ẩn nên bớt padding đầu section — hết khoảng trống lớn phía trên tiêu đề trang */
  .section { padding: var(--space-6) 0 var(--space-10); }

  /* Mobile: ô bảng không bẻ chữ từng dòng (VD "Vú Sữa đóng gói 500g" mỗi từ 1 hàng) — giữ 1 dòng,
     bảng rộng thì cuộn ngang trong wrapper overflow-x:auto có sẵn */
  .data-table th, .data-table td,
  .batch-table th, .batch-table td { white-space: nowrap; }

  /* Mobile: ẩn footer ở các trang Thống Kê / MeMap Check / Tài Khoản / Chia Sẻ / Quản Lý NCC / Cấp Mã QR
     (bottom nav đã là điểm neo cuối màn hình, footer dài chỉ gây cuộn thừa).
     thong-ke-chi-tiet dùng chung data-page="thong-ke". */
  body[data-page="thong-ke"] .site-footer,
  body[data-page="truy-xuat"] .site-footer,
  body[data-page="tai-khoan"] .site-footer,
  body[data-page="chia-se-ncc"] .site-footer,
  body[data-page="admin-ncc"] .site-footer,
  body[data-page="ho-so-ncc"] .site-footer,
  body[data-page="kiem-dinh"] .site-footer,
  body[data-page="cap-qr"] .site-footer { display: none; }

  /* Mobile: 4 thẻ tổng quan ở trang Thống Kê cuộn ngang kiểu app thay vì xếp dọc chiếm cả màn hình */
  #statsSummaryCards {
    display: flex; overflow-x: auto; gap: var(--space-3);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  #statsSummaryCards::-webkit-scrollbar { display: none; }
  #statsSummaryCards .card { flex: 0 0 auto; min-width: 150px; scroll-snap-align: start; }
  #statsSummaryCards .stat-strip__value { font-size: var(--font-xl); }
}

/* ==========================================================================
   MeMap Cert (kiem-dinh.html + trang-kiem-dinh.html) — wizard tạo trang kiểm định public + QR
   ========================================================================== */
/* Thanh tiến trình 4 bước: Chọn chuẩn → Tải hồ sơ → AI xử lý → Trang public & QR */
.cert-stepper { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-10); }
.cert-stepper__step { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.cert-stepper__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-sand); color: var(--color-muted);
  font-size: var(--font-sm); font-weight: 700; border: 2px solid var(--color-border);
}
.cert-stepper__label { font-size: var(--font-sm); font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.cert-stepper__step.is-active .cert-stepper__dot { background: var(--color-memap-green); border-color: var(--color-memap-green); color: var(--color-white); }
.cert-stepper__step.is-active .cert-stepper__label { color: var(--color-text); }
.cert-stepper__step.is-done .cert-stepper__dot { background: var(--color-success); border-color: var(--color-success); color: var(--color-white); }
.cert-stepper__line { flex: 1; height: 2px; background: var(--color-border); min-width: 12px; }
@media (max-width: 720px) {
  .cert-stepper__label { display: none; }
  .cert-stepper__step.is-active .cert-stepper__label { display: inline; }
}

.cert-step-title { font-size: var(--font-lg); font-weight: 700; margin: var(--space-8) 0 var(--space-4); }
.cert-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-right: var(--space-2);
  background: var(--color-memap-green); color: var(--color-white); font-size: var(--font-sm);
}

/* Grid chuẩn kiểm định — card toggle chọn nhiều (kiểu lưới tool của ilovepdf) */
.cert-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3);
  margin-bottom: var(--space-8); /* tách khỏi nút Tiếp tục bên dưới */
}
.cert-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  padding: var(--space-4); border: 2px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-white); cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--font-sm); color: var(--color-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cert-card:hover { border-color: var(--color-memap-green); }
.cert-card.is-selected { border-color: var(--color-memap-green); background: var(--color-cream); }
.cert-card.is-selected::after { content: "✓ Đã chọn"; font-size: var(--font-xs); font-weight: 700; color: var(--color-memap-green); }
.cert-card__icon { font-size: 26px; line-height: 1; }
.cert-card__desc { font-size: var(--font-xs); color: var(--color-muted); }
/* .cert-card dùng lại làm <a> trong catalog trang chủ (index.html) — reset underline/màu link mặc định */
a.cert-card { text-decoration: none; position: relative; }
a.cert-card:hover strong { color: var(--color-memap-green); }
.cert-card__tag {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: var(--color-memap-green); color: var(--color-white);
  font-size: 10px; font-weight: 700; padding: 2px var(--space-2); border-radius: var(--radius-full);
}

/* Catalog chứng nhận trang chủ MeMap (index.html) — layout kiểu ilovepdf: hero + tabs category + grid */
.cert-catalog__hero { margin-bottom: var(--space-8); }
.cert-catalog__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.cert-cat-chip {
  border: 1px solid var(--color-border); background: var(--color-white); border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4); font-size: var(--font-sm); font-weight: 600; cursor: pointer;
  color: var(--color-text); font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease;
}
.cert-cat-chip:hover { border-color: var(--color-memap-green); }
.cert-cat-chip.is-active { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }
.cert-catalog__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 0; }

/* Dropzone upload */
.cert-dropzone {
  border: 2px dashed var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6); text-align: center; background: var(--color-white);
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.cert-dropzone.is-dragover { border-color: var(--color-memap-green); background: var(--color-cream); }
.cert-dropzone__icon { font-size: 40px; margin-bottom: var(--space-2); }
.cert-dropzone__browse {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-memap-green); font-weight: 700; text-decoration: underline;
}
.cert-file-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0 var(--space-6); }
.cert-file-chip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); background: var(--color-sand); border-radius: var(--radius-md);
  font-size: var(--font-sm);
}
.cert-file-chip span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cert-file-chip__remove {
  background: none; border: none; cursor: pointer; color: var(--color-muted);
  font-size: var(--font-lg); line-height: 1; padding: 0 var(--space-1);
}
.cert-file-chip__remove:hover { color: var(--color-danger); }

/* Spinner + progress cho bước xử lý AI */
.cert-spinner {
  width: 56px; height: 56px; margin: 0 auto var(--space-6);
  border: 5px solid var(--color-border); border-top-color: var(--color-memap-green);
  border-radius: 50%; animation: cert-spin 0.9s linear infinite;
}
@keyframes cert-spin { to { transform: rotate(360deg); } }
.cert-progress {
  max-width: 360px; height: 8px; margin: var(--space-6) auto 0;
  background: var(--color-border); border-radius: var(--radius-full); overflow: hidden;
}
.cert-progress__fill {
  height: 100%; width: 5%; background: var(--color-memap-green);
  border-radius: var(--radius-full); transition: width 1.2s ease;
}

/* Breadcrumb — trang public kiểm định (SEO + điều hướng ngược về trang chủ) */
.breadcrumb { font-size: var(--font-sm); color: var(--color-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-memap-green); text-decoration: underline; }

/* Trang public kiểm định */
.cert-public-hero {
  background: var(--color-cream); border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap;
}
.cert-public-hero__main { flex: 1; min-width: 260px; }
/* Khối "Chia sẻ hồ sơ" — góc phải, ngang hàng với tên doanh nghiệp (không còn là card riêng cuối trang) */
.cert-public-hero__share {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.cert-public-hero__share .qr-preview__code { width: 180px; height: 180px; }
.cert-public-hero__share .btn { width: 100%; white-space: nowrap; }
@media (max-width: 640px) { .cert-public-hero { flex-direction: column; } .cert-public-hero__share { align-self: stretch; } }
.cert-public-hero__slogan {
  font-size: var(--font-md); font-style: italic; color: var(--color-memap-green); font-weight: 600;
  margin: var(--space-1) 0 var(--space-3);
}
/* Liên hệ tách dòng có icon (email/điện thoại) — dùng lại đúng chuỗi lien_he đã có, chỉ trình bày rõ hơn */
.cert-contact { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }
.cert-contact__item { font-size: var(--font-sm); color: var(--color-text); }
.cert-public-badges { display: flex; flex-direction: column; gap: var(--space-3); }
.cert-public-badge {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.cert-public-badge__icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.cert-public-badge > span:nth-child(2) { flex: 1; }
.cert-public-badge strong { display: block; }
.cert-public-badge small { color: var(--color-muted); font-size: var(--font-xs); }

/* Bản đầy đủ (trang mẫu / chứng chỉ có chi tiết): head + bảng chi tiết số chứng chỉ, hiệu lực, phạm vi */
.cert-public-badge--full { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.cert-public-badge__head { display: flex; align-items: center; gap: var(--space-4); }
.cert-public-badge__details {
  margin: 0; padding-top: var(--space-3); border-top: 1px dashed var(--color-border);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5);
}
.cert-public-badge__details > div:nth-child(4) { grid-column: 1 / -1; } /* phạm vi chứng nhận dài — chiếm cả hàng */
.cert-public-badge__details dt {
  font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-muted); margin-bottom: 2px;
}
.cert-public-badge__details dd { margin: 0; font-size: var(--font-sm); font-weight: 600; }
@media (max-width: 640px) { .cert-public-badge__details { grid-template-columns: 1fr; } }

/* "Giấy chứng nhận" dựng lại theo cấu trúc mẫu thật (issued to + địa chỉ, GGN/mã chứng nhận, bảng
   phạm vi crops-in-scope, ngày cấp/hiệu lực/quyết định, tổ chức chứng nhận) — nằm trong
   .cert-public-badge--full, ngay dưới phần head icon/tên/badge. */
.cert-visual {
  margin-top: var(--space-3); padding: var(--space-6);
  background: var(--color-cream); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  text-align: center;
}
.cert-visual__kicker {
  font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--color-muted);
  margin: 0 0 var(--space-2);
}
.cert-visual__standard { font-size: var(--font-md); font-weight: 700; margin: 0 0 var(--space-4); }
.cert-visual__issued-label { font-size: var(--font-xs); color: var(--color-muted); margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.cert-visual__company { font-size: var(--font-lg); font-weight: 700; margin: var(--space-1) 0 0; }
.cert-visual__address { font-size: var(--font-sm); color: var(--color-muted); margin: var(--space-1) 0 0; }
.cert-visual__ggn { font-size: var(--font-md); font-weight: 700; color: var(--color-memap-green); margin: var(--space-3) 0 0; }
.cert-visual__declare { font-size: var(--font-sm); color: var(--color-muted); max-width: 560px; margin: var(--space-4) auto var(--space-4); }
.cert-visual__table-wrap { overflow-x: auto; margin-bottom: var(--space-4); }
.cert-visual__table { width: 100%; border-collapse: collapse; font-size: var(--font-xs); text-align: left; background: var(--color-white); }
.cert-visual__table th, .cert-visual__table td {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); white-space: nowrap;
}
.cert-visual__table th { background: var(--color-sand); font-weight: 700; }
.cert-visual__dates {
  margin: 0 0 var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--color-border);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-5); text-align: left;
}
.cert-visual__dates dt { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: 2px; }
.cert-visual__dates dd { margin: 0; font-size: var(--font-sm); font-weight: 600; }
.cert-visual__footer { font-size: var(--font-xs); color: var(--color-muted); margin: 0; }
@media (max-width: 640px) { .cert-visual__dates { grid-template-columns: 1fr; text-align: center; } }

/* Kho tài liệu kiểu Drive — lưới thẻ file thay cho danh sách dòng đơn điệu */
.cert-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); }
.cert-file-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-2); background: var(--color-sand); border-radius: var(--radius-md);
  text-align: center; transition: background 0.15s ease;
}
.cert-file-card:hover { background: var(--color-cream); }
.cert-file-card__icon { font-size: 30px; line-height: 1; }
.cert-file-card__name {
  font-size: var(--font-xs); font-weight: 600; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cert-file-card__size { font-size: var(--font-xs); color: var(--color-muted); }

/* Công bố chất lượng sản phẩm — danh sách dọc đơn giản (tham khảo cấu trúc trang công bố thật:
   ưu tiên nội dung văn bản hơn card/grid hoa mỹ) */
.cert-declare-list { display: flex; flex-direction: column; gap: var(--space-3); }
.cert-declare {
  padding: var(--space-4) var(--space-5); background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.cert-declare__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* Trang public kiểm định — 4 tab (Thông Tin/Hình Ảnh & Tài Liệu/Nhân Lực & Vật Tư/Lịch Sử Trồng Trọt) */
.cert-tab-panel { margin-top: var(--space-2); }
.cert-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.cert-media-item { margin: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cert-media-item img { width: 100%; height: 160px; object-fit: cover; display: block; }
.cert-media-item figcaption { padding: var(--space-2) var(--space-3); font-size: var(--font-xs); color: var(--color-muted); }
.cert-media-item--video .cert-media-item__video-stub {
  width: 100%; height: 160px; display: flex; align-items: center; justify-content: center;
  background: var(--color-sand); color: var(--color-muted); font-size: 40px;
}
.cert-list-plain { margin: 0; padding-left: var(--space-5); }
.cert-list-plain li { font-size: var(--font-sm); margin-bottom: var(--space-1); }


/* ==========================================================================
   Trang Tài Khoản (tai-khoan.html) — màn hình tài khoản riêng cho mobile,
   desktop vẫn xem được (dropdown tên tài khoản trên header là lối chính)
   ========================================================================== */
.account-hero { text-align: center; margin-bottom: var(--space-8); }
.account-hero__avatar {
  width: 84px; height: 84px; margin: 0 auto var(--space-4); border-radius: var(--radius-full);
  background: var(--color-cream); color: var(--color-memap-green);
  display: flex; align-items: center; justify-content: center;
}
.account-hero__avatar svg { width: 44px; height: 44px; }
.account-hero__name { font-size: var(--font-2xl); font-weight: 700; margin-bottom: var(--space-1); }

.account-menu { display: flex; flex-direction: column; gap: var(--space-3); }
.account-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm);
}
.account-menu__item:hover { border-color: var(--color-map-green); }
.account-menu__item strong { display: block; font-size: var(--font-base); }
.account-menu__item small { display: block; color: var(--color-muted); font-size: var(--font-sm); margin-top: 2px; }
.account-menu__chevron { font-size: var(--font-xl); color: var(--color-muted); flex-shrink: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-map-green-dark); color: rgba(255,255,255,0.85); padding: var(--space-12) 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); }
.site-footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.site-footer__brand img { height: 36px; display: block; }
/* Icon footer dùng bản PNG nền trắng sẵn (images/logo-memap-icon-white.png) — nền trắng đã bo góc khớp
   chính xác hình dạng icon (flatten trực tiếp từ alpha channel gốc), không cần khung CSS riêng để mô
   phỏng lại bo góc như bản PNG trong suốt cũ. */
.site-footer__logo-img { border-radius: 8px; }
.site-footer__note { font-size: var(--font-sm); max-width: 420px; color: rgba(255,255,255,0.7); }
.site-footer__links { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.site-footer__links h4 { font-size: var(--font-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); color: rgba(255,255,255,0.6); }
.site-footer__links a { display: block; padding: var(--space-1) 0; font-size: var(--font-sm); color: rgba(255,255,255,0.9); }
.site-footer__links a:hover { text-decoration: underline; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  font-weight: 600; font-size: var(--font-sm); border: 2px solid transparent; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap; /* chữ trong button không bao giờ xuống hàng — ô hẹp thì bảng tự cuộn ngang */
}
.btn-primary { background: var(--color-memap-green); color: var(--color-white); }
.btn-primary:hover { background: var(--color-memap-green-dark); }
.btn-map { background: var(--color-map-green); color: var(--color-white); }
.btn-map:hover { background: var(--color-map-green-dark); }
.btn-outline { border-color: var(--color-map-green); color: var(--color-map-green); background: transparent; }
.btn-outline:hover { background: var(--color-map-green); color: var(--color-white); }
.btn-outline-orange { border-color: var(--color-memap-green); color: var(--color-memap-green); background: transparent; }
.btn-outline-orange:hover { background: var(--color-memap-green); color: var(--color-white); }
.btn-danger { background: var(--color-danger); color: var(--color-white); }
.btn-danger:hover { background: #a82424; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--font-xs); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--color-memap-green); }

/* ==========================================================================
   Badges (trạng thái NCC / QR)
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-3);
  font-size: var(--font-xs); font-weight: 700; white-space: nowrap;
}
.badge--da-duyet  { background: rgba(46,125,50,0.12); color: var(--color-success); }
.badge--cho-duyet { background: rgba(249,168,37,0.16); color: #8a6100; }
.badge--tu-choi,
.badge--tam-khoa  { background: rgba(211,47,47,0.12); color: var(--color-danger); }
.badge--info      { background: rgba(21,101,192,0.12); color: var(--color-info); }
.badge--info-loai { background: rgba(21,101,192,0.12); color: var(--color-info); } /* loại "Vật nuôi" */
.badge--cert      { background: var(--color-sand); color: var(--color-text); border: 1px solid var(--color-border); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.card-body { padding: var(--space-6); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Module intro cards (index.html) */
.module-card { border-top: 6px solid var(--color-border); display: flex; flex-direction: column; height: 100%; }
.module-card--map { border-top-color: var(--color-map-green); }
.module-card--check { border-top-color: var(--color-memap-green); }
.module-card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--color-white);
  margin-bottom: var(--space-4);
}
.module-card--map .module-card__icon { background: var(--color-map-green); }
.module-card--check .module-card__icon { background: var(--color-memap-green); }
.module-card h3 { font-size: var(--font-xl); margin-bottom: var(--space-2); }
.module-card ul { margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.module-card li { font-size: var(--font-sm); color: var(--color-muted); padding-left: var(--space-5); position: relative; }
.module-card li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 700; }
.module-card .btn { margin-top: auto; align-self: flex-start; }

/* Stat strip */
.stat-strip { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: center; text-align: center; }
.stat-strip__item .stat-strip__value { font-size: var(--font-3xl); font-weight: 700; color: var(--color-map-green); }
.stat-strip__item .stat-strip__label { font-size: var(--font-sm); color: var(--color-muted); }
/* 5 thẻ tổng quan ở thong-ke.html: hạ 1 cỡ chữ để số 6-7 chữ số không tràn khỏi thẻ */
#statsSummaryCards .stat-strip__value { font-size: var(--font-2xl); }
.stat-strip__tag { font-size: var(--font-xs); color: var(--color-muted); text-align: center; margin-top: var(--space-4); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: var(--space-20) 0; background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-bg) 100%); }
.hero__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.hero h1 { font-size: clamp(2rem, 5vw, var(--font-3xl)); font-weight: 700; line-height: 1.15; margin-bottom: var(--space-5); }
.hero p { font-size: var(--font-md); color: var(--color-muted); margin-bottom: var(--space-8); }
.hero__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Bản đồ (ban-do.html, mini-map)
   ========================================================================== */
/* flex:1 thay vì height: calc(100vh - Npx) — body giờ là flex column nên map-layout tự lấp đầy phần còn lại
   sau header, không phụ thuộc vào việc đo đúng chiều cao header (dễ lệch khi header đổi nội dung/wrap).
   NHƯNG body mặc định chỉ có `min-height: 100vh` (để trang dài bình thường vẫn scroll + sticky footer) —
   với trang bản đồ, `min-height` KHÔNG chặn body cao hơn viewport khi nội dung sidebar dài (~500 NCC),
   khiến `.map-layout{flex:1}` không còn là "phần còn lại của viewport" mà phình theo chiều cao sidebar,
   sidebar's overflow-y:auto không bao giờ kích hoạt (không có gì để cắt) — cả TRANG cuộn thay vì cuộn
   RIÊNG sidebar, và bản đồ bị kéo dài bất thường (bug đã gặp). Chốt `height: 100vh` (thay vì min-height)
   CHỈ cho trang này qua `data-page="ban-do"` — không đổi rule chung của body vì các trang khác cần
   min-height để nội dung ngắn vẫn đẩy được footer xuống đáy. */
body[data-page="ban-do"] { height: 100vh; overflow: hidden; }
.map-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@media (min-width: 880px) {
  .map-layout { flex-direction: row; }
}
.map-sidebar {
  width: 100%; background: var(--color-white); border-right: 1px solid var(--color-border);
  padding: var(--space-5); overflow-y: auto; flex-shrink: 0;
}
@media (min-width: 880px) { .map-sidebar { width: 400px; } }

/* Mobile: cất bộ lọc + thống kê + toggle đi, sidebar chỉ còn ô tìm kiếm gọn — tập trung toàn bộ màn hình
   cho bản đồ. Các khối này vẫn đầy đủ trên desktop (≥880px). */
@media (max-width: 879px) {
  .map-sidebar { padding: var(--space-3) var(--space-4); overflow-y: visible; }
  .map-sidebar .field { margin-bottom: 0; }
  .map-sidebar .map-result-count,
  .map-sidebar .map-results { display: none; }
  .map-canvas { min-height: 0; }
  /* Bộ lọc giờ là cụm floating trên bản đồ nên mobile vẫn dùng được — panel thu hẹp theo màn hình */
  .map-float__panel { max-height: 50vh; }
}
.map-sidebar h2 { font-size: var(--font-lg); margin-bottom: var(--space-4); }
/* "Thống Kê" lồng trong trang Map (không còn là nav item riêng) — link nhỏ ngay dưới ô tìm kiếm */
.map-sidebar__stats-link {
  display: block; font-size: var(--font-sm); font-weight: 600; color: var(--color-map-green);
  text-decoration: none; margin-bottom: var(--space-4);
}
.map-sidebar__stats-link:hover { text-decoration: underline; }
.map-canvas { flex: 1; min-height: 360px; }

.field { margin-bottom: var(--space-5); }
/* Dòng field trong builder mẫu chứng nhận tùy chỉnh (chia-se-ncc.html) — checkbox chọn field + toggle
   "bắt buộc" cho field chuẩn, hoặc input tên field + toggle "bắt buộc" + nút xóa cho field tự do. */
.field-builder-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.field-builder-row:last-child { border-bottom: none; }
.field-builder-row input[type="text"] { margin: 0; }
.tpl-remove-custom {
  background: none; border: none; color: var(--color-muted); font-size: var(--font-lg);
  cursor: pointer; line-height: 1; padding: 0 var(--space-2);
}
.tpl-remove-custom:hover { color: var(--color-danger); }
.field label { display: block; font-size: var(--font-sm); font-weight: 600; margin-bottom: var(--space-2); }
.field input[type="text"],
.field input[type="search"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%; padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-white); color: var(--color-text);
}
.field textarea { resize: vertical; min-height: 90px; }
.checkbox-list { display: flex; flex-direction: column; gap: var(--space-2); }
.checkbox-list label { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; font-size: var(--font-sm); }

/* Multi-select dropdown gọn (dùng cho lọc "Sản phẩm" nhiều lựa chọn thay vì list checkbox dài) */
.multiselect { position: relative; }
.multiselect__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-white); color: var(--color-text); font-size: var(--font-sm); text-align: left; cursor: pointer;
}
.multiselect__toggle:hover { border-color: var(--color-map-green); }
.multiselect__caret { color: var(--color-muted); transition: transform 0.15s ease; flex-shrink: 0; }
.multiselect.is-open .multiselect__caret { transform: rotate(180deg); }
.multiselect__panel {
  display: none; position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: 60;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: var(--space-3); max-height: 280px; overflow-y: auto;
}
.multiselect.is-open .multiselect__panel { display: block; }
.multiselect__search {
  width: 100%; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-sm);
}
.multiselect__panel .checkbox-list label.is-hidden-by-search { display: none; }

.map-result-count { font-size: var(--font-sm); color: var(--color-muted); margin-bottom: var(--space-4); }

/* Sản lượng inline hiện ngay dưới mỗi bộ lọc (vùng / NCC / sản phẩm) khi có lựa chọn */
.filter-yield {
  font-size: var(--font-xs); font-weight: 600; color: var(--color-map-green);
  background: var(--color-cream); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); margin: calc(-1 * var(--space-3)) 0 var(--space-5);
}

/* Panel chi tiết bên phải — hiện khi click marker/polygon trên MeMap Map */
.map-canvas { position: relative; }
.map-detail-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: 92vw;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 1100;
  overflow-y: auto;
}
.map-detail-panel.is-open { transform: translateX(0); }
.map-detail-panel__header {
  position: sticky; top: 0;
  /* z-index bắt buộc: nội dung bên dưới có phần tử positioned (chấm timeline nhật ký...) sẽ vẽ ĐÈ lên
     header sticky khi cuộn nếu header không có z-index riêng — bug đã gặp trên mobile */
  z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-3);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.map-detail-panel__close {
  background: var(--color-sand); border: none; border-radius: var(--radius-full);
  width: 32px; height: 32px; font-size: var(--font-lg); line-height: 1; cursor: pointer; color: var(--color-muted);
  flex-shrink: 0;
}
.map-detail-panel__body { padding: var(--space-5); }
.map-detail-panel__img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.map-detail-panel__crop { font-size: var(--font-xl); font-weight: 700; margin-bottom: var(--space-1); }
.map-detail-panel__ncc { font-size: var(--font-sm); color: var(--color-muted); margin-bottom: var(--space-3); }
.map-detail-panel__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-4) 0; }
.map-detail-panel__facts dt { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: var(--space-1); }
.map-detail-panel__facts dd { margin: 0; font-weight: 700; }
.map-detail-panel__section-title { font-size: var(--font-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); margin: var(--space-5) 0 var(--space-2); }
.map-detail-panel__batches { display: flex; flex-direction: column; gap: var(--space-2); }
.map-detail-panel__batch-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3); background: var(--color-sand); border-radius: var(--radius-md); font-size: var(--font-sm);
}

@media (max-width: 720px) {
  .map-detail-panel { width: 100%; max-width: 100%; top: auto; height: 70%; transform: translateY(100%); }
  .map-detail-panel.is-open { transform: translateY(0); }
}

/* Toggle switch (VD: "Hiển thị vùng trồng" — giống AgriMaps) */
.toggle-field { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); font-size: var(--font-sm); font-weight: 600; }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch__track { position: absolute; inset: 0; background: var(--color-border); border-radius: var(--radius-full); transition: background 0.15s ease; cursor: pointer; }
.toggle-switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: var(--shadow-sm); }
.toggle-switch input:checked + .toggle-switch__track { background: var(--color-map-green); }
.toggle-switch input:checked + .toggle-switch__track .toggle-switch__thumb { transform: translateX(18px); }

/* Khối bộ lọc thu gọn (collapsible) — nhường không gian ưu tiên cho khối sản lượng bên dưới */
.filter-toggle-wrap { margin-bottom: var(--space-5); }
.filter-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); background: var(--color-sand); border: none;
  border-radius: var(--radius-md); font-weight: 600; font-size: var(--font-sm); cursor: pointer; color: var(--color-text);
}
.filter-toggle:hover { background: var(--color-border); }
.filter-toggle__caret { color: var(--color-muted); transition: transform 0.15s ease; }
.filter-toggle-wrap.is-open .filter-toggle__caret { transform: rotate(180deg); }
.filter-toggle__body { display: none; padding-top: var(--space-4); }
.filter-toggle-wrap.is-open .filter-toggle__body { display: block; }

/* Khối sản lượng — trọng tâm chính của sidebar, nổi bật hơn bộ lọc */
.stats-panel { background: var(--color-cream); border-radius: var(--radius-lg); padding: var(--space-5); }
.stats-panel__title { font-size: var(--font-md); font-weight: 700; margin: 0 0 var(--space-4); }
.stats-panel__tabs { margin-bottom: var(--space-4); }

/* Danh sách kết quả trong sidebar MeMap Map (kiểu Google Maps) — card ảnh + tên + chỉ số, click mở chi tiết */
.map-results__count { font-size: var(--font-sm); color: var(--color-muted); margin-bottom: var(--space-3); }
.map-results__list { display: flex; flex-direction: column; gap: var(--space-2); }
.map-result-card {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-white); cursor: pointer; text-align: left;
  font-family: inherit; font-size: inherit; color: var(--color-text);
}
.map-result-card:hover { border-color: var(--color-map-green); background: var(--color-cream); }
.map-result-card__img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
/* Fallback avatar khi anh_dai_dien là placehold.co (ảnh có chữ to, crop nhỏ sẽ đọc không được) — khối màu
   trạng thái + chữ cái đầu tên NCC, cùng kích thước 56px với .map-result-card__img để không lệch layout. */
.map-result-card__img--fallback {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white); font-size: var(--font-lg); font-weight: 700;
}
.map-result-card__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.map-result-card__info strong { font-size: var(--font-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-result-card__sub { font-size: var(--font-xs); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-result-card__metric { font-size: var(--font-xs); font-weight: 700; color: var(--color-map-green); }

/* Thống kê sản lượng (theo sản phẩm / theo NCC) trong sidebar MeMap Map */
.map-stats__list { margin-bottom: var(--space-4); }
.map-stats__row { margin-bottom: var(--space-3); }
.map-stats__row-label {
  display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: var(--font-xs); margin-bottom: var(--space-1); color: var(--color-text);
}
.map-stats__row-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-stats__bar-track { height: 6px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; }
.map-stats__bar-fill { height: 100%; border-radius: var(--radius-full); }

/* Biểu đồ donut (SVG thuần, không thư viện) — cơ cấu sản lượng theo sản phẩm ở thong-ke-chi-tiet.html */
.donut-chart { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.donut-chart svg { flex-shrink: 0; }
.donut-chart__legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: var(--space-2); }
.donut-chart__legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-xs); }
.donut-chart__legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.donut-chart__legend-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-chart__legend-value { font-weight: 700; }
.donut-chart__center-label { font-size: var(--font-xs); fill: var(--color-muted); }
.donut-chart__center-value { font-size: var(--font-md); font-weight: 700; fill: var(--color-text); }

/* Biểu đồ cột 12 tháng — nguồn cung theo tháng thu hoạch ở thong-ke-chi-tiet.html */
.month-chart { display: flex; align-items: flex-end; gap: var(--space-1); height: 160px; }
.month-chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: var(--space-1); min-width: 0; }
.month-chart__bar { width: 100%; max-width: 32px; background: var(--color-memap-green); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 2px; }
.month-chart__bar--empty { background: var(--color-border); }
.month-chart__value { font-size: 0.65rem; color: var(--color-muted); white-space: nowrap; }
.month-chart__label { font-size: var(--font-xs); color: var(--color-muted); font-weight: 600; }

/* Nhật ký mùa vụ trong panel chi tiết */
.nhat-ky-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; border-left: 2px solid var(--color-border); }
.nhat-ky-list li { position: relative; padding: 0 0 var(--space-3) var(--space-4); font-size: var(--font-sm); }
.nhat-ky-list li::before {
  content: ""; position: absolute; left: -5px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-map-green);
}
.nhat-ky-list__date { display: block; font-size: var(--font-xs); color: var(--color-muted); font-weight: 600; }

/* Lịch mùa vụ 12 tháng (giống lịch trồng trọt truyền thống) */
.season-calendar { display: flex; gap: 2px; margin: var(--space-2) 0 var(--space-4); }
.season-calendar__cell {
  flex: 1; text-align: center; font-size: 10px; padding: var(--space-1) 0;
  border-radius: var(--radius-sm); background: var(--color-border); color: var(--color-muted); font-weight: 600;
}
.season-calendar__cell.is-active { background: var(--color-memap-green); color: #fff; }

/* Toggle "Xem nhật ký mùa vụ" trong thẻ sản phẩm (ho-so-ncc.html) */
.zone-details { margin-top: var(--space-2); }
.zone-details summary {
  cursor: pointer; font-size: var(--font-sm); font-weight: 600; color: var(--color-map-green);
  list-style: none;
}
.zone-details summary::-webkit-details-marker { display: none; }
.zone-details summary::before { content: "▸ "; }
.zone-details[open] summary::before { content: "▾ "; }

.leaflet-popup-content { font-family: var(--font-family); min-width: 200px; }

/* Marker icon theo loại sản phẩm (crop emoji) trên MeMap Map */
.crop-marker-icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; border: 2px solid #fff; box-shadow: var(--shadow-sm);
}
/* ==========================================================================
   Cụm điều khiển floating trên bản đồ — chip Loại đối tượng + nút Bộ lọc (expand/collapse)
   Đặt cạnh phải nút zoom của Leaflet (zoom ~46px + lề), z-index dưới detail panel (1100).
   ========================================================================== */
.map-float {
  position: absolute; top: 10px; left: 56px; z-index: 1050;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  max-width: calc(100% - 70px);
}
.map-float__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.map-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
  background: var(--color-white); color: var(--color-muted);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
  font-family: inherit; font-size: var(--font-xs); font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.map-chip.is-active { background: var(--color-map-green); border-color: var(--color-map-green); color: var(--color-white); }
.map-chip--filter { color: var(--color-text); }
.map-float__panel {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-4);
  width: 320px; max-width: calc(100vw - 80px);
  max-height: min(520px, 62vh); overflow-y: auto;
}

/* Marker chế độ "Theo NCC" — vòng tròn màu trạng thái + chữ cái đầu tên NCC */
.ncc-marker-icon { color: var(--color-white); font-weight: 800; font-size: 14px; font-family: var(--font-family); }
/* Dòng sản phẩm trong panel NCC (chế độ Theo NCC) — button trông như row, click vào chi tiết */
.ncc-panel__product { text-align: left; cursor: pointer; font-family: inherit; font-size: inherit; width: 100%; border: none; }
.ncc-panel__product:hover { background: var(--color-cream); }
.map-popup__img { width: 100%; height: 90px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.map-popup__title { font-weight: 700; margin-bottom: var(--space-1); }
.map-popup__meta { font-size: var(--font-xs); color: var(--color-muted); margin-bottom: var(--space-2); }
.map-popup__actions { margin-top: var(--space-2); }

.mini-map { height: 220px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }

/* ==========================================================================
   Hồ sơ NCC
   ========================================================================== */
.profile-banner { height: 260px; background-size: cover; background-position: center; border-radius: var(--radius-lg); margin-bottom: var(--space-8); }
/* Banner placeholder chữ (placehold.co, tỉ lệ nguồn 1200x400 = 3:1) bị "cover" phóng to + cắt 2 bên khi
   container hẹp hơn tỉ lệ đó rất nhiều trên mobile (390px rộng nhưng vẫn cao 260px cố định), làm chữ tên
   doanh nghiệp tràn khung/mất chữ 2 đầu — hạ chiều cao theo % chiều rộng để giữ gần đúng tỉ lệ 3:1, tránh
   crop nặng (ảnh thật cũng chấp nhận được vì banner thấp hơn trên mobile vốn là cách làm phổ biến). */
@media (max-width: 640px) {
  .profile-banner { height: 34vw; min-height: 110px; max-height: 200px; }
}
.profile-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.profile-title { font-size: var(--font-2xl); font-weight: 700; }
.profile-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--color-muted); font-size: var(--font-sm); margin-bottom: var(--space-6); }
.profile-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-10); }
@media (max-width: 880px) { .profile-grid { grid-template-columns: 1fr; } }
/* min-width:0 để bảng/bar chart bên trong không banh rộng cột grid quá viewport (bug tràn ngang mobile) */
.profile-grid > div { min-width: 0; }
.cert-list { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }

.batch-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
.batch-table th, .batch-table td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--font-sm); }
.batch-table th { color: var(--color-muted); font-weight: 600; text-transform: uppercase; font-size: var(--font-xs); letter-spacing: 0.04em; }

.empty-state { text-align: center; padding: var(--space-20) var(--space-6); color: var(--color-muted); }
.empty-state h2 { color: var(--color-text); margin-bottom: var(--space-3); }

/* ==========================================================================
   Admin — bảng, tab, modal
   ========================================================================== */
.admin-banner {
  background: rgba(211,47,47,0.08); border: 1px solid rgba(211,47,47,0.25); color: var(--color-danger);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: var(--font-sm);
  margin-bottom: var(--space-6);
}
.admin-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* #certPublicTabs (trang-kiem-dinh.html) nằm ngay dưới .cert-public-hero — hero không có margin-bottom
   nên tabs bị dính sát cạnh dưới hero (0px) trong khi bên dưới lại có mb-6 (24px), lệch khoảng cách trên/
   dưới rõ rệt. Thêm margin-top để cân bằng 2 phía — chỉ scope riêng #certPublicTabs, không áp dụng cho các
   .tabs khác (VD #viewModeTabs ở ban-do.html là control nhỏ trong panel nổi, không nên có thêm khoảng). */
#certPublicTabs { margin-top: var(--space-6); }
.tab {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--font-sm);
  font-weight: 600; background: var(--color-sand); border: none; cursor: pointer; color: var(--color-text);
}
.tab.is-active { background: var(--color-map-green); color: var(--color-white); }

.data-table { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.data-table th, .data-table td { text-align: left; padding: var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--font-sm); vertical-align: middle; }
.data-table th { background: var(--color-sand); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.is-clickable { cursor: pointer; }
.data-table tr.is-clickable:hover { background: var(--color-cream); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); flex-wrap: wrap; }
.pagination__btn {
  min-width: 36px; height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--color-white); color: var(--color-text); font-size: var(--font-sm); font-weight: 600; cursor: pointer;
}
.pagination__btn:hover:not(:disabled) { border-color: var(--color-map-green); color: var(--color-map-green); }
.pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination__btn.is-active { background: var(--color-map-green); border-color: var(--color-map-green); color: var(--color-white); }
.pagination__ellipsis { padding: 0 var(--space-1); color: var(--color-muted); font-size: var(--font-sm); }

/* Lịch mùa vụ dạng lưới — trang Thống Kê (tất cả sản phẩm x 12 tháng, lấy cảm hứng từ lịch mùa vụ nông nghiệp) */
.season-grid { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); font-size: var(--font-xs); }
.season-grid th, .season-grid td { border: 1px solid var(--color-border); text-align: center; padding: var(--space-2); min-width: 30px; }
.season-grid th:first-child, .season-grid td:first-child { text-align: left; white-space: nowrap; padding-left: var(--space-3); min-width: 180px; }
.season-grid th { background: var(--color-sand); color: var(--color-muted); font-weight: 600; }
.season-grid td.is-active { background: var(--color-memap-green); color: var(--color-white); font-weight: 600; }
.season-grid tbody tr:nth-child(even) { background: var(--color-bg); }

/* Hàng "Tổng nguồn cung" cuối lưới mùa vụ (trang chi tiết thống kê) — cộng sản lượng ước tính từng tháng */
.season-grid__total td { background: var(--color-sand); font-weight: 700; border-top: 2px solid var(--color-border); }
.season-grid__total td:first-child { color: var(--color-muted); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.03em; }
.season-grid__total td.is-peak { background: var(--color-map-green); color: var(--color-white); }

/* Tên NCC trong bảng thống kê — link điều hướng sang trang chi tiết thống kê của NCC đó */
.ncc-stats-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--color-map-green); font-weight: 600; font-size: inherit; font-family: inherit; text-align: left;
  display: inline-block;
}
.ncc-stats-link:hover { text-decoration: underline; }
.row-actions { display: flex; gap: var(--space-2); flex-wrap: nowrap; }

.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(10,10,10,0.5);
  align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4);
}
.modal-overlay.is-open { display: flex; }
.modal { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.modal-header h3 { font-size: var(--font-lg); }
.modal-close { background: none; border: none; font-size: var(--font-xl); cursor: pointer; color: var(--color-muted); line-height: 1; }
.modal-body { padding: var(--space-6); }
.modal-footer { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--space-3); }

.draw-panel { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 780px) { .draw-panel { grid-template-columns: 1fr; } }
.draw-panel .map-canvas-inline { height: 420px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }

/* ==========================================================================
   Cấp QR
   ========================================================================== */
.qr-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: stretch; }
@media (max-width: 880px) { .qr-layout { grid-template-columns: 1fr; } }
.qr-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8); text-align: center; height: 100%; }
.qr-preview__code { padding: var(--space-4); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
/* Ẩn khung QR khi chưa sinh mã — tránh ô vuông trống lơ lửng giữa card */
.qr-preview__code:empty { display: none; }
.qr-preview__code img, .qr-preview__code canvas { display: block; }
.qr-preview__meta { font-size: var(--font-sm); color: var(--color-muted); }

/* ==========================================================================
   Truy xuất (MeMap Check)
   ========================================================================== */
.trace-result { border-left: 4px solid var(--color-border); }
.trace-result--valid { border-left-color: var(--color-success); }
.trace-result--warn  { border-left-color: var(--color-danger); background: rgba(211,47,47,0.05); }
.trace-warning-banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: rgba(211,47,47,0.08); border: 1px solid rgba(211,47,47,0.3); color: var(--color-danger);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-6); font-size: var(--font-sm);
}
.trace-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.trace-header img { width: 72px; height: 72px; border-radius: var(--radius-md); object-fit: cover; }
.trace-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-5); margin: var(--space-6) 0; }
.trace-facts dt { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: var(--space-1); }
.trace-facts dd { margin: 0; font-weight: 600; }
/* Dòng mô tả ở landing MeMap Check — giữ 1 dòng trên desktop (không xuống hàng), cho phép tràn nhẹ ra
   ngoài khung 560px của landing; màn hình hẹp mới wrap lại bình thường */
.check-landing__lead { white-space: nowrap; margin-left: -80px; margin-right: -80px; max-width: none; }
@media (max-width: 860px) { .check-landing__lead { white-space: normal; margin-left: auto; margin-right: auto; } }

.trace-shop-stub {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--color-sand); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-top: var(--space-6);
}

/* Tab nội dung trang truy xuất (Nhật Ký / Sản Phẩm / Nhà Cung Cấp / Vùng Trồng / Đánh Giá) */
.trace-tab-panel { min-height: 120px; }
.trace-tab-title { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-4); }

/* ==========================================================================
   Utility
   ========================================================================== */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* In hồ sơ kiểm định (trang-kiem-dinh.html, nút "🖨️ In hồ sơ") — ẩn header/footer/nav/nút bấm, chỉ giữ
   nội dung chứng nhận + công bố + tài liệu để in gọn trên giấy. */
@media print {
  .site-header, .site-footer, .bottom-nav, .no-print { display: none !important; }
  /* Khi in, hiện đủ cả 4 tab thông tin/hình ảnh/nhân lực/lịch sử thay vì chỉ tab đang xem trên màn hình */
  .cert-tab-panel.hidden { display: block !important; }
}