/* ============================================================
   common.css - Design tokens & style dùng chung toàn site
   Nạp TRƯỚC style.css / footer.css. File khác tái sử dụng qua var(--...).
   ============================================================ */

:root {
  /* Dải màu xanh thương hiệu (phối giữa #1b5e20 brand và #153b24 xanh footer) */
  --brand-50: #F2F7F3;
  --brand-100: #E8F5E9;
  --brand-200: #CDEBCF;
  --brand-300: #A8D9AC;
  --brand-400: #6DBF76;
  --brand-500: #43A047;
  --brand-600: #1B5E20;
  --brand-700: #184C22;
  --brand-800: #14401D;
  --brand-900: #103317;
  --brand-950: #0B2410;

  /* Alias semantic (file khác đang dùng các tên này) */
  --brand: var(--brand-600);
  --brand-dark: var(--brand-700);
  --brand-mid: var(--brand-500);
  --brand-light: var(--brand-100);
  --brand-soft: var(--brand-50);
  --brand-deep: var(--brand-950);

  /* Bảng màu footer */
  --forest: #153b24;
  --forest-mid: #235336;
  --forest-light: #f2f7f3;
  /* Token --ocean* DỮ TEN GỐC nhưng giá trị đã đồng bộ sang ton lime
     (khớp header/hero/breadcrumb/footer) de khong phai doi toan bo goi su dung */
  --ocean: #1a2e05;
  --ocean-mid: #365314;
  --ocean-light: #f0fce0;
  --gold: #d99b14;
  --ink: #18241d;

  /* Font - CHỈ dùng font hệ thống, KHÔNG nạp font ngoài (Google Fonts...) cho đỡ tốn thời gian tải */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --container-width: 960px;
  --wrap-width: 1160px;
}

/* Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
  color: #222;
}

/* Khung nội dung: .container cho khối trong trang, .wrap cho khối full-width (footer...) */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1rem;
}
.wrap {
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 0 28px;
}


/* Tro nang (Screen reader only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}