/* EbizPos polish overlay — override discipline, not a redesign.
   Load order: after index-*.css, so equal specificity wins.
   One accent (ember), one quiet surface (paper), hairlines instead of shadows. */

:root {
  --ink: #163a2e;
  --ink-deep: #0f2d23;
  --ember: #c0451f;
  --ember-deep: #a53a18;
  --paper: #faf7f1;
  --line: #e5dfd2;
  --muted: #687973;
}

/* Base: left-aligned, readable measure, Vietnamese line-height. */
body {
  background: var(--paper);
  color: var(--ink);
  text-rendering: optimizeLegibility;
}
main p, main li { line-height: 1.75; }
main p, .section-copy p, .hero-copy p { max-width: 62ch; }

/* Display type: single serif voice for headlines only.
   Self-hosted Fraunces subsets (vietnamese + latin), no Google Fonts round-trip. */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fraunces-vi-italic.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fraunces-vi-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fraunces-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.hero-copy h1, .section-copy h2, .section-heading h2,
.cta-band-inner h2, .testimonial-layout h2, .signup-inner h2,
.post-head h2 {
  /* Bundle sets `body .site-shell * { font-family: … !important }`, so display
     type has to match that weight or Roboto wins regardless of specificity. */
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}
.hero-copy h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); }
.section-copy h2, .section-heading h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); }

/* Eyebrows: sentence case, quiet — no tracked-out caps.
   (HTML holds ALL-CAPS text, so lowercase it here; first-letter recaps.) */
.eyebrow {
  text-transform: lowercase;
  letter-spacing: 0.01em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ember-deep);
}
.eyebrow::first-letter { text-transform: uppercase; }

/* Headline em inherits instead of popping one word. */
.hero-copy h1 em, .section-copy h2 em, .section-heading h2 em,
.cta-band-inner h2 em, .testimonial-layout h2 em, .signup-inner h2 em,
.post-head h2 em {
  font-family: Fraunces, Georgia, "Times New Roman", serif !important;
  font-style: italic;
  color: inherit;
}

/* Buttons: one shape language. */
.button-primary, .add-button {
  border-radius: 999px;
  background: var(--ember);
  transition: background 0.18s ease, transform 0.18s ease;
}
.button-primary:hover, .add-button:hover { background: var(--ember-deep); }
.button-primary:active, .add-button:active { transform: translateY(1px); }
.button-light { background: var(--paper); color: var(--ink); }
.button-text, .text-link { color: var(--ink); text-underline-offset: 3px; }
.text-link:hover, .button-text:hover { color: var(--ember-deep); }

/* Cards: hairline, flat, quiet numerals. */
.service-card, .article-card, .product-card, .quote-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
  background: #fff;
}
.service-card .number {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.line-arrow { color: var(--ember-deep); }
/* Bundle keeps .line-arrow absolute on desktop (>700px), overlapping card
   text (no `left`, cards 03/04 OVERLAP=true). Pull it back in-flow. */
.service-card .line-arrow { position: static; margin-top: 20px; }
.stars { color: var(--ember); letter-spacing: 0.1em; }

/* Price: calm. */
.price del { color: var(--muted); font-weight: 400; }
.price strong { color: var(--ink); }

/* The one bold moment: deep-green CTA band, paper text. */
.cta-band { background: var(--ink-deep); }
.cta-band-inner, .cta-band-inner h2, .cta-band-inner p { color: var(--paper); }
.cta-band-inner .eyebrow { color: #f0c9b8; }
.cta-or { color: #c9d4d0; }

/* Quieter chrome. */
.site-header { background: rgba(250, 247, 241, 0.92); backdrop-filter: blur(8px); }
/* Logo ships as a 500x500 webp with its own white plate (multiply loses to the
   header's backdrop-filter isolation). Style the plate as a badge instead. */
.site-header a:has(img) { background: #fff; border-radius: 12px; padding: 4px 8px; }
.breadcrumb-bar { border-bottom: 1px solid var(--line); }
.site-footer { border-top: 1px solid var(--line); }
.footer-bottom { border-top: 1px solid var(--line); }

/* Zalo float: smaller, less shouty. */
.zalo-button { box-shadow: 0 4px 18px rgba(22, 58, 46, 0.22); border-radius: 999px; }

/* Images never overflow; article images get soft corners. */
img { max-width: 100%; height: auto; }
.article-image img, .product-image img { border-radius: 10px 10px 0 0; }

/* Keyboard access: visible focus everywhere. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Small screens: stack every multi-column block. */
@media (max-width: 720px) {
  .hero-grid, .split-grid, .testimonial-layout, .signup-inner,
  .product-grid.home-products, .article-grid.home-articles, .service-grid {
    grid-template-columns: 1fr;
  }
  .hero-image-wrap { order: -1; }
  /* Chip and accent plate both read as stray blocks once the hero stacks: the
     plate peeks over the photo's top edge like a leftover rectangle. */
  .hero-chip, .hero-shape { display: none; }
  /* Caption hangs -18px past the photo; pin it in so it cannot push a
     horizontal scrollbar on a phone. */
  .photo-caption { right: 0; }
  /* Bundle keeps min-width:150px!important under max-width:700px, so hiding the
     span alone leaves an empty pill. Shrink it back to a circle clear of the CTA. */
  .zalo-button {
    min-width: 0 !important;
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    right: 16px !important;
    bottom: 16px !important;
  }
  .zalo-button span { display: none; }
}

/* Be Vietnam Pro: self-hosted subsets (vietnamese + latin-ext + latin), 4 weights. No Google Fonts round-trip. */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/bevietnampro-vietnamese-400.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/bevietnampro-latin-ext-400.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/bevietnampro-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/bevietnampro-vietnamese-500.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/bevietnampro-latin-ext-500.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/bevietnampro-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/bevietnampro-vietnamese-600.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/bevietnampro-latin-ext-600.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/bevietnampro-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/bevietnampro-vietnamese-700.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/bevietnampro-latin-ext-700.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/bevietnampro-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Be Vietnam Pro làm font chữ. Bundle khoá bằng
   `.site-shell * { font-family: Roboto… !important }` nên phải cùng !important;
   display type (Fraunces) ở trên vẫn thắng vì specificity `.hero-copy h1` cao hơn. */
body, .site-shell, .site-shell * {
  font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif !important;
}

/* Card sản phẩm: bundle để .product-copy chỉ padding-top nên chữ sát mép card
   và tiêu đề 3–4 dòng làm các card cao lệch nhau. Ốp đều padding, khoá chiều cao
   tiêu đề bằng line-clamp, canh giá + nút trên một hàng. */
.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 14px;
}
.product-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 16px 0;
}
.product-copy h2, .product-copy h3 {
  margin: 0 0 10px;
  font-size: 13.5px !important;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: 4.35em;
}
.price { margin-top: auto; }
.product-copy .add-button, .product-copy .button-primary {
  margin-top: 12px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Nút Zalo nổi: giữ nhận diện Zalo (xanh #0a75e8 + icon tròn trắng), chỉ bỏ
   viền trắng dày, tắt vòng pulse nhấp nháy ::before, bóng mềm, canh giữa icon
   trên mobile (bundle để img lệch + padding-right thừa khi ẩn span). */
.zalo-button {
  min-width: 0 !important;
  height: 56px !important;
  padding: 6px 16px 6px 6px !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(6, 62, 116, 0.32) !important;
}
.zalo-button:before { animation: none !important; opacity: 0 !important; }
.zalo-button img { width: 44px !important; height: 44px !important; padding: 4px !important; }
.zalo-button span { font-size: 12.5px; }
.zalo-button span small { font-size: 10px; }
.zalo-button:hover { background: #0867c8 !important; }
@media (max-width: 720px) {
  .zalo-button {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
  }
  .zalo-button img { width: 42px !important; height: 42px !important; padding: 4px !important; }
  .zalo-button span { display: none; }
}

/* ---- Một hệ màu duy nhất --------------------------------------------------
   Bundle mang bộ token riêng (--primary:#e86b45, --paper:#f8f5ee, --orange,
   --lime, --light-mint) nằm cạnh bộ token ở đầu file này, nên cùng một ý
   ra hai sắc độ khác nhau. Áp token dưới đây làm nguồn chân lý; các token
   bundle chỉ còn là bí danh trỏ về cùng giá trị. */
:root {
  --ember: #c0451f;
  --ember-deep: #a53a18;
  --ink: #163a2e;
  --ink-deep: #0f2d23;
  --paper: #faf7f1;
  --line: #e5dfd2;
  --muted: #687973;
  /* Sắc phái mới dẫn xuất từ ink, không phải màu mới */
  --tint: #eaf2ea;
  --tint-deep: #e0e7df;

  --primary: var(--ember);
  --primary-foreground: #fff;
  --foreground: var(--ink);
  --background: #fff;
  --border: var(--line);
  --light-mint: var(--tint);
  --orange: var(--ember);
}

/* Section nền xanh nhạt riêng của bundle → về tint chung. */
.values-section, .detail-description, .source-note { background: var(--tint); }
.source-note { color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }

/* Cookie banner dùng xanh dương #1c3d33, lệch hẳn hệ ink/ember. */
.cookie-outline { color: var(--ink) !important; border-color: var(--line) !important; }
.cookie-accept { background: var(--ink) !important; }
.cookie-accept:hover { background: var(--ink-deep) !important; }

/* Nút Zalo giữ xanh thương hiệu — đây là nhận diện bên thứ ba, không ép. */

/* --lime (#b7dc46) là sắc thứ ba còn sót trong bundle (badge giỏ, mảng sau
   ảnh, số about-figures, blockquote). Gom về ember. */
:root { --lime: var(--ember); }
/* Badge giỏ: chữ ink trên nền ember tối — đổi chữ sáng. */
.nav-cart span { color: #fff !important; }
/* Số about-figures: ember trên nền tint, giữ làm điểm nhấn duy nhất. */
.about-figures strong { color: var(--ember-deep) !important; }

/* ---- Làm gọn nhịp dọc -----------------------------------------------------
   Bundle để mỗi section 84–98px trên desktop và 96px dưới product-section —
   cộng dồn 9 section làm trang chủ dài và ngắt quãng. Một nhịp ~64px thống
   nhất đủ tách section mà vẫn thở. Mobile: bundle đã có sẵn block
   `@media (max-width:700px)` đặt 60px cho các section này, nên không đụng. */
@media (min-width: 701px) {
  .hero-section { padding: 56px 0 48px; }
  .about-slice,
  .services-section,
  .testimonial-section,
  .values-section { padding: 64px 0; }
  .post-section { padding: 60px 0; }
  .product-section { padding: 60px 0 72px; }
  .signup-strip { padding: 36px 0; }
  .signup-inner { gap: 20px; }
  .signup-inner h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); }
  .cta-band-inner { min-height: 320px; padding: 48px 0; }
}