/* ==========================================================================
   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); }

/* ==========================================================================
   Đánh giá NCC/hồ sơ (07/2026) — tab "Đánh Giá" dùng CHUNG cho trang-kiem-dinh.html VÀ truy-xuat.html
   (xem reviewSectionHtml()/initReviewSection() trong shared.js)
   ========================================================================== */
.review-stars { color: var(--color-warning); letter-spacing: 1px; }
.review-stars--lg { font-size: var(--font-xl); }

.review-summary {
  display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center;
  padding: var(--space-5); background: var(--color-cream); border-radius: var(--radius-lg);
}
.review-summary__avg { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 120px; }
.review-summary__avg strong { font-size: var(--font-3xl); line-height: 1; }
.review-histogram { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--space-1); }
.review-histogram__row {
  display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: var(--space-2);
  font-size: var(--font-sm); color: var(--color-muted);
}
.review-histogram__bar { display: block; height: 8px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.review-histogram__bar span { display: block; height: 100%; background: var(--color-warning); }

.review-form { max-width: 480px; }
.star-picker { display: flex; gap: var(--space-1); }
.star-picker__star {
  font-size: var(--font-xl); color: var(--color-border); background: none; border: none;
  cursor: pointer; font-family: inherit; line-height: 1; padding: 0;
}
.star-picker__star.is-filled { color: var(--color-warning); }

.review-card { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.review-card:last-child { border-bottom: none; }
.review-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.review-card__reply { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-cream); border-radius: var(--radius-md); }
.review-reply-form { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); max-width: 480px; }
.review-reply-form textarea {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: inherit; resize: vertical;
}

/* ==========================================================================
   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 đồ (index.html — 07/2026 đảo lại thành trang chủ, xem mục Sitemap trong architecture.md; 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="index"` — 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="index"] { height: 100vh; overflow: hidden; }
/* Toggle Bản Đồ/Danh Sách (07/2026) — đứng NGOÀI .map-layout, luôn hiện dù đang ở view nào (view Danh
   Sách ẩn hẳn .map-sidebar nên toggle không thể sống trong sidebar). flex-shrink:0 để không bị
   .map-layout{flex:1} ngay dưới co lại mất chỗ. Padding CỐ Ý mỏng (var(--space-1), không phải space-3
   như dải thanh thông thường) + tab con cũng thu nhỏ riêng qua `#mapViewToggle .tab` — bar này chỉ có
   đúng 1 việc (2 nút bấm nhỏ) nên không cần cao bằng 1 section header thật, tránh chiếm nguyên 1 dòng vô
   ích (bug đã gặp — cao tới 64px, gần bằng cả .site-header 69px, chỉ để hiện 2 pill button). */
.map-view-toggle-bar {
  flex-shrink: 0; padding: var(--space-1) var(--space-5); border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
}
#mapViewToggle .tab { padding: var(--space-1) var(--space-3); font-size: var(--font-xs); }
.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); }
.map-canvas { flex: 1; min-height: 360px; }

/* Toggle Bản Đồ/Danh Sách (07/2026) — sống trong sidebar nên LUÔN hiện dù đang ở view nào; đổi view chỉ
   ẩn/hiện #map với #listViewWrap, không đụng tới bộ lọc — filter set ở view nào vẫn áp dụng khi đổi qua
   view khác vì cả 2 cùng đọc từ 1 hàm renderMarkers()/applyFilters() chung. */
.list-view-grid-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-6); background: var(--color-bg); }
.list-view-toolbar { margin-bottom: var(--space-4); }
/* Search + filter riêng cho view Danh Sách (07/2026) — KHÔNG dùng chung element với sidebar (view này
   ẩn hẳn sidebar) nhưng đồng bộ 2 CHIỀU với state filter thật qua JS (xem applyFilters() trong
   index.html): đổi ở đây → mirror sang input/select ẩn trong sidebar rồi gọi applyFilters() như cũ;
   đổi bên map → mirror ngược lại đây, để 2 bộ control luôn khớp nhau dù cái nào đang hiện. */
.list-view-toolbar__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.list-view-toolbar__search {
  flex: 1 1 220px; min-width: 160px; max-width: 320px;
  padding: var(--space-2) 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); font-family: inherit;
}
/* Bọc riêng nút "Bộ lọc" + panel làm điểm neo position:relative — KHÔNG neo theo .list-view-toolbar__row
   (hàng công cụ rộng bằng cả lưới card, còn nút chỉ đứng giữa hàng) — bug đã gặp: neo theo row khiến
   panel trôi lệch hẳn sang mép phải màn hình, tách khỏi nút bấm (user báo "cái modal bị lệch ... lỗi
   rồi"). display:inline-flex để wrap chỉ rộng bằng đúng nút bên trong, không chiếm thêm khoảng trống. */
.list-view-toolbar__filter-wrap { position: relative; display: inline-flex; }
/* Panel "Bộ lọc" gộp Vùng/Sản phẩm/NCC — FLOAT đè lên lưới card bên dưới (position:absolute, neo theo
   .list-view-toolbar__filter-wrap ngay trên) thay vì nằm tĩnh trong luồng — bản tĩnh trước đó đẩy cả
   lưới card xuống mỗi khi mở/đóng, tốn diện tích (bug đã gặp, user báo "cho cái này float lên trên như
   này tốn diện tích quá"). Cùng pattern `.map-chip--filter`/`.map-float__panel` của bản đồ (cũng float
   đè lên map). Bản đầu float rộng HẾT CỠ hàng công cụ (`left:0; right:0`) — user báo tiếp "chiều rộng
   làm quá, bằng 1/3 hiện tại thôi" nên thu hẹp lại còn `width: min(420px, calc(100vw - 48px))` (~1/3
   chiều rộng lưới card ở màn hình desktop, tự co hẹp trên mobile). Dùng `100vw` thay vì `100%` vì
   containing block giờ là `.list-view-toolbar__filter-wrap` — 1 `inline-flex` chỉ rộng bằng đúng nút bên
   trong (~110px), nếu dùng `100%` thì `min(420px, 100%)` sẽ CHỌN NHẦM 100% (110px, nhỏ hơn 420px) khiến
   panel bị bóp hẹp còn bằng đúng bề ngang cái nút (bug đã gặp khi sửa lần đầu). Neo theo cạnh TRÁI
   (`left: 0`) của wrap, KHÔNG phải phải — thử `right: 0` trước nhưng khi hàng công cụ wrap xuống dòng
   trên mobile, nút "Bộ lọc" thường rơi về gần mép trái, neo phải kéo panel (420px) tràn hẳn ra ngoài mép
   trái màn hình (âm tọa độ x). Neo trái (mở rộng sang phải) khớp cả 2 trường hợp đã kiểm tra: desktop
   (nút ở giữa hàng rộng, thừa khoảng trống bên phải) và mobile (nút ở gần mép trái sau khi wrap). Đổi từ
   3 cột sang 1 cột (field xếp dọc) vì 420px không đủ rộng cho 3 cột như bản full-width trước đó — giống
   hệt cách `#mapFilterPanel` bên bản đồ xếp dọc ở khổ hẹp 320px. */
.list-view-toolbar__panel {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 50;
  width: min(420px, calc(100vw - 48px));
  padding: var(--space-4);
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
.list-view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-5); }
.list-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); cursor: pointer; text-align: left; display: flex; flex-direction: column;
  gap: var(--space-3); transition: box-shadow 0.15s ease, border-color 0.15s ease; font-family: inherit;
}
.list-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-map-green); }
.list-card__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.list-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff;
}
.list-card__title { display: block; font-size: var(--font-md); font-weight: 700; }
.list-card__author {
  display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-xs);
  color: var(--color-muted); margin-top: var(--space-1);
}
.list-card__verified { color: var(--color-info); font-weight: 700; }
.list-card__desc {
  font-size: var(--font-sm); color: var(--color-muted); margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.list-card__footer {
  display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-xs);
  color: var(--color-muted); padding-top: var(--space-3); border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.list-card__footer-spacer { flex: 1; }
@media (max-width: 879px) { .list-view-grid-wrap { min-height: 0; padding: var(--space-4); } }

.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; }
}