/* Chuẩn Chaga v1.1 (THEME.md, áp dụng 2026-10-17).
   Mọi màu của site đi qua các biến dưới đây — đổi màu thì đổi ở đây, đừng viết mã màu cứng. */
:root {
  --sav-green-900: #123D32;
  --sav-green-950: #0B2B23;
  --sav-green-700: #23664D;
  --sav-cream: #F8F5ED;
  --sav-cream-deep: #F1ECE0;
  --sav-surface: #FFFFFF;
  --sav-text: #123D32;
  --sav-text-muted: #55665E;
  --sav-border: #E3DDCF;
  --sav-champagne: #C2A16A;
  --sav-tint: #E9F0EA;
  --primary: var(--sav-green-900);
  --primary-rgb: 18, 61, 50;
  --secondary: var(--sav-green-700);
  --accent: var(--sav-green-700);
  --accent-rgb: 35, 102, 77;
  --interactive: var(--sav-green-700);
  --bg: var(--sav-cream);
  --ink: var(--sav-text);
  --rim: var(--sav-border);
  --surface: var(--sav-surface);
  --subtle: var(--sav-text-muted);
  --faint: #5F6C66;
  --note: var(--sav-tint);
  --sun: var(--sav-champagne);
  --champagne: var(--sav-champagne);
  --footer-bg: var(--sav-cream-deep);
  --nav-card-bg: var(--sav-cream-deep);
  --booking-bg: var(--sav-tint);
  --on-primary: #FFFFFF;
  /* Nút kêu gọi hành động (CTA): ngọc lục bảo — sáng hơn xanh rừng thương hiệu để nổi bật.
     Chữ trắng 5.5:1, khi rê chuột 7.7:1. Xanh rừng #123D32 giữ cho header, footer, tiêu đề. */
  --cta: #2B7656;
  --cta-hover: #205D45;
  --cta-ring: inset 0 0 0 1px rgba(194, 161, 106, .55);
  --on-dark-label: var(--sav-champagne);
  --font-body: 'Be Vietnam Pro', sans-serif;
  --font-accent: 'Be Vietnam Pro', sans-serif;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: .75rem;
  --radius-md: 1rem;
  --radius-button: 1.25rem;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary);
  text-wrap: balance;
}

a {
  text-underline-offset: 0.16em;
}

:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 3px;
}

.card {
  border-color: var(--rim);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.article p,
.article li {
  color: var(--subtle);
  font-size: 1.125rem;
  line-height: 1.75;
}

/* Long-form copy stays easy to scan even inside centered sales sections. */
.prose-p {
  max-width: 68ch;
  text-align: left !important;
  line-height: 1.7;
}

body > .text-center.px-5.pt-8 > p.max-w-2xl {
  max-width: 68ch;
  text-align: left;
  line-height: 1.7;
}

.flex-1.text-center > p.text-xs,
section.max-w-3xl.text-center > p.text-xs,
.wrap[style*="text-align:center"] > p.muted {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left !important;
  line-height: 1.7;
}

.article h1 {
  color: var(--primary);
  font-size: clamp(1.75rem, 4.5vw, 2.25rem);
  line-height: 1.3;
}

.article h2,
.article h3 {
  color: var(--primary);
}

.article a,
main a:not(.btn-cta) {
  color: var(--interactive);
}

.section-label,
.kicker {
  color: var(--interactive) !important;
  font-size: clamp(.75rem, 1.4vw, .875rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.45 !important;
}

.article blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.125rem;
  border-left: 3px solid var(--champagne);
  background: var(--note);
  color: var(--ink);
}

header {
  background: var(--bg) !important;
  border-bottom-color: var(--rim) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

header .btn-cta {
  min-height: 44px;
  padding: 0 0.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--interactive) !important;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transform: none !important;
}

header .btn-cta:hover,
header .btn-cta:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--primary) !important;
  text-decoration: underline;
}

header nav a {
  white-space: nowrap;
}

header > div {
  width: 100%;
  max-width: 68rem !important;
}

header nav {
  align-self: stretch;
}

header nav a {
  display: inline-flex;
  align-items: center;
}

section[style*="border-top:1px solid var(--rim)"],
section[style*="border-bottom:1px solid var(--rim)"],
footer.border-t,
.article hr,
.rule {
  border-color: var(--rim) !important;
}

.btn-cta {
  border-color: var(--cta);
  background: var(--cta);
  box-shadow: var(--cta-ring) !important;
  color: var(--on-primary);
  min-height: 52px;
  border-radius: var(--radius-button) !important;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

a.border,
a.border-2,
button.border,
button.border-2 {
  border-radius: var(--radius-button) !important;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  border-color: var(--cta-hover);
  background: var(--cta-hover);
  box-shadow: var(--cta-ring) !important;
}

.btn-cta:active {
  transform: translateY(1px) !important;
}

.trust-avatar {
  background: var(--surface) !important;
  border-color: var(--rim) !important;
}

section h2 {
  font-size: clamp(2rem, 3.5vw, 2.625rem);
  line-height: 1.18;
  letter-spacing: -.025em;
}

section h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.3; }

.wrap { max-width: 48rem !important; }
.sec { padding: clamp(4rem, 8vw, 6rem) 0 !important; }
.sec-tight { padding: clamp(2.5rem, 5vw, 4rem) 0 !important; }

.article {
  max-width: 47rem !important;
  padding-top: clamp(3.5rem, 7vw, 5.5rem) !important;
  padding-bottom: clamp(4rem, 8vw, 6rem) !important;
}

.article h1 {
  max-width: 25ch;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -.03em;
}

.article h2 { font-size: clamp(1.625rem, 3vw, 2rem); margin-top: 3rem; }
.article h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.article p,
.article li { max-width: 68ch; }

.article nav.card {
  border-radius: var(--radius-sm);
  background: var(--nav-card-bg);
}

#order-form-wrap,
#qr-wrap {
  border-color: rgba(var(--primary-rgb), .14) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

#order-form input:not([type="checkbox"]),
#order-form textarea,
#order-form select {
  min-height: 48px;
  border-color: rgba(var(--primary-rgb), .18) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

#order-form input:focus,
#order-form textarea:focus,
#order-form select:focus {
  border-color: var(--interactive) !important;
  outline: 2px solid rgba(var(--accent-rgb), .16) !important;
  outline-offset: 1px;
}

#order-form-wrap > div:first-child,
#order-form .card {
  background: var(--sav-cream-deep) !important;
}

footer {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
  border-top: 1px solid rgba(var(--primary-rgb), .12) !important;
  background: var(--footer-bg);
}

footer::before {
  content: "";
  display: block;
  width: 8.5rem;
  height: 2rem;
  margin: 0 auto 1.5rem;
  background: url('/brand-logo.svg') center / contain no-repeat;
}

footer p { max-width: 44rem; margin-left: auto; margin-right: auto; }

/* Luxury wellness editorial rhythm for the public home page. */
.brand-intro {
  max-width: 68rem;
  margin: 0 auto;
  padding-top: 1.5rem !important;
}

.brand-intro > p {
  position: relative;
  margin-left: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--champagne);
  font-size: 1.0625rem !important;
  line-height: 1.62 !important;
}

.editorial-hero {
  max-width: 68rem !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr);
  grid-template-areas:
    "label media"
    "title media"
    "proof media"
    "body media"
    "actions media";
  grid-template-rows: auto auto auto auto 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem) !important;
  row-gap: 0 !important;
  padding-top: clamp(2rem, 4vw, 3.75rem) !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

.editorial-hero > .hero-copy {
  display: contents;
}

.editorial-hero .section-label { grid-area: label; }
.editorial-hero h1 { grid-area: title; }
.editorial-hero .hero-proof { grid-area: proof; }
.editorial-hero .hero-body { grid-area: body; }
.editorial-hero .hero-actions { grid-area: actions; }
.editorial-hero .hero-media { grid-area: media; align-self: center; }

.editorial-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.65rem, 5vw, 4.65rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.editorial-hero h1 > span { display: block; }

.editorial-hero .prose-p {
  max-width: 58ch;
  font-size: 1.125rem !important;
}

.editorial-hero .hero-actions .btn-cta {
  min-height: 58px;
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

.editorial-hero [data-role="PRODUCT"] {
  position: relative;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--surface) !important;
  box-shadow: 18px 18px 0 -17px var(--champagne) !important;
}

.editorial-hero [data-role="PRODUCT"] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.editorial-mechanism,
.editorial-inclusions,
.editorial-founder,
.editorial-booking,
.editorial-faq {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.editorial-mechanism {
  background: var(--primary) !important;
  color: var(--bg);
  padding: clamp(4.5rem, 9vw, 7.5rem) 0 !important;
}

.editorial-mechanism h2,
.editorial-mechanism p {
  color: var(--bg) !important;
}

.editorial-mechanism .section-label {
  color: var(--on-dark-label) !important;
  text-align: left !important;
}

.editorial-mechanism .prose-p,
.editorial-mechanism h2 {
  margin-left: 0 !important;
  text-align: left !important;
}

.editorial-mechanism h2 {
  max-width: 24ch;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  line-height: 1.18;
  text-wrap: balance;
}

.editorial-inclusions {
  background: var(--bg) !important;
  padding: clamp(4.5rem, 9vw, 7rem) 0 !important;
}

.editorial-inclusions > div {
  max-width: 64rem !important;
}

.editorial-inclusions .grid {
  counter-reset: inclusion;
  gap: 0 !important;
  border-top: 1px solid var(--rim);
}

.editorial-inclusions .card {
  counter-increment: inclusion;
  position: relative;
  padding: 2rem 1.5rem 2rem 3.75rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rim) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.editorial-inclusions .card::before {
  content: "0" counter(inclusion);
  position: absolute;
  top: 2.1rem;
  left: 1rem;
  color: var(--champagne);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.editorial-founder > div {
  max-width: 58rem !important;
  display: grid !important;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 4.5rem) !important;
  align-items: center;
  text-align: left !important;
}

.editorial-founder img {
  width: 10rem !important;
  height: 12rem !important;
  margin: 0 !important;
  border-radius: 3px !important;
  border: 0 !important;
  object-fit: cover;
}

.editorial-evidence {
  gap: 0 !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.editorial-evidence .card {
  border: 0 !important;
  border-left: 1px solid var(--rim) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 1rem clamp(1.5rem, 4vw, 3rem) !important;
}

.editorial-evidence .card:first-child {
  border-left-color: var(--champagne) !important;
}

.editorial-products {
  max-width: 68rem !important;
  padding-top: clamp(4.5rem, 8vw, 7rem) !important;
  padding-bottom: clamp(4.5rem, 8vw, 7rem) !important;
}

.editorial-products > .grid .card {
  padding: 1.5rem !important;
  border-radius: var(--radius-md) !important;
}

.editorial-products > .grid > .card:first-child {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(15rem, .9fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(1.5rem, 4vw, 3rem) !important;
  border-color: rgba(var(--primary-rgb), .16) !important;
  background: var(--surface);
}

.editorial-products > .grid > .card:first-child img {
  grid-column: 1;
  grid-row: 1 / 7;
  width: 100% !important;
  height: 20rem !important;
  margin: 0 !important;
  align-self: center;
}

.editorial-products > .grid > .card:first-child > :not(img) { grid-column: 2; }
.editorial-products > .grid > .card:first-child > p.font-semibold { font-size: 1.75rem !important; line-height: 1.25 !important; }
.editorial-products > .grid > .card:first-child > p.font-black { font-size: 1.75rem !important; color: var(--primary) !important; }
.editorial-products > .grid > .card:first-child .btn-cta { justify-self: start; min-width: 11rem; padding-left: 1.5rem; padding-right: 1.5rem; }

.editorial-products img {
  border-radius: 2px !important;
}

.editorial-booking {
  background: var(--booking-bg) !important;
  padding: clamp(4.5rem, 8vw, 6.5rem) 0 !important;
}

.editorial-booking > div {
  text-align: left !important;
}

.editorial-booking .prose-p {
  margin-left: 0 !important;
}

.editorial-booking a:not(.btn-cta) {
  border-width: 1px !important;
  border-radius: 6px !important;
}

.editorial-guarantee {
  position: relative;
  max-width: 48rem !important;
  padding-top: 5.5rem !important;
  padding-bottom: 5.5rem !important;
}

.editorial-guarantee::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: 0 auto 1.5rem;
  background: var(--champagne);
}

.editorial-faq {
  background: var(--bg) !important;
  padding: clamp(4.5rem, 8vw, 6rem) 0 !important;
}

.editorial-faq #faq-list {
  border-top: 1px solid var(--rim);
}

.editorial-faq details.card {
  margin-bottom: .75rem;
  border: 1px solid rgba(var(--primary-rgb), .12) !important;
  border-radius: .875rem !important;
  background: rgba(255,255,255,.72) !important;
  padding: 1.25rem 1.125rem !important;
}

.editorial-faq summary {
  font-size: 1.0625rem !important;
  line-height: 1.5 !important;
}

.editorial-final {
  max-width: 52rem !important;
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.editorial-final > .card {
  border: 0 !important;
  border-top: 1px solid var(--champagne) !important;
  border-bottom: 1px solid var(--rim) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

@media (max-width: 639px) {
  header:has(#menu-toggle) > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 0.5rem;
    min-height: 72px;
    padding: 0 1rem !important;
  }

  header:has(#menu-toggle) > div > .flex:first-child {
    display: contents;
  }

  header:has(#menu-toggle) a[aria-label="Sống An Vui"] {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
  }

  header:has(#menu-toggle) #menu-toggle {
    grid-column: 2;
    justify-self: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    margin-left: 0 !important;
    color: var(--primary);
  }

  #menu-icon-open {
    width: 24px !important;
  }

  #menu-icon-open > div:first-child,
  #menu-icon-open > div:last-child {
    height: 2px !important;
    background: var(--primary) !important;
  }

  #menu-icon-open > div:nth-child(2) {
    margin: 2px 0 !important;
    color: var(--primary) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
  }

  #menu-icon-close {
    width: 24px;
    height: 24px;
  }

  header:has(#menu-toggle) > div > :last-child {
    grid-column: 3;
    justify-self: end;
    min-width: 0;
  }

  header img[alt="Sống An Vui"] {
    width: 108px !important;
    max-width: 100%;
    height: auto !important;
    flex-shrink: 0;
  }

  header .btn-cta {
    flex: 0 0 auto;
    font-size: 0.9375rem !important;
    min-width: max-content;
    min-height: 44px;
    padding: 0 0.25rem !important;
    justify-content: flex-end;
  }

  .brand-intro {
    padding-top: 1.25rem !important;
    text-align: left !important;
  }

  .brand-intro > p {
    padding-left: 1rem;
    font-size: 1rem !important;
  }

  .editorial-hero {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "proof"
      "body"
      "actions"
      "media";
    grid-template-rows: auto;
    gap: 2rem !important;
    row-gap: 0 !important;
    padding-top: 1.75rem !important;
    padding-bottom: 3.75rem !important;
  }

  .editorial-hero > div:first-child {
    text-align: left !important;
  }

  .editorial-hero .hero-media {
    margin: 2rem 0 0;
  }

  .editorial-hero h1 {
    max-width: 14ch;
    font-size: 2.375rem !important;
    letter-spacing: -.05em;
  }

  .editorial-hero .section-label,
  .editorial-hero .prose-p {
    text-align: left !important;
    margin-left: 0 !important;
  }

  .editorial-hero .flex {
    justify-content: flex-start !important;
  }

  .editorial-hero [data-role="PRODUCT"] {
    aspect-ratio: 4 / 3;
    width: 100%;
  }

  .editorial-inclusions .card {
    padding-left: 3.25rem !important;
  }

  .editorial-founder > div {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1.25rem !important;
  }

  .editorial-founder img {
    width: 5.5rem !important;
    height: 7rem !important;
  }

  .editorial-evidence .card {
    border-left: 0 !important;
    border-top: 1px solid var(--rim) !important;
    padding: 1.5rem 0 !important;
  }

  .editorial-evidence .card:first-child {
    border-top-color: var(--champagne) !important;
  }

  .editorial-products > .grid {
    grid-template-columns: 1fr !important;
  }

  .editorial-products > .grid .card {
    padding: 1.25rem !important;
  }

  .editorial-products > .grid > .card:first-child {
    display: flex !important;
    grid-column: 1 / -1;
    padding: 1.25rem !important;
  }

  .editorial-products > .grid > .card:first-child img {
    width: 100% !important;
    height: 14rem !important;
    margin-bottom: 1rem !important;
  }

  .editorial-products > .grid > .card:first-child .btn-cta {
    width: 100%;
  }

  .editorial-products > .grid .card img {
    height: 12rem !important;
  }

  .editorial-products > .grid .btn-cta {
    width: 100%;
  }

  .editorial-booking > div {
    text-align: left !important;
  }

  .editorial-final {
    text-align: left !important;
  }

  .editorial-final .btn-cta {
    justify-content: center;
    text-align: center;
  }

  body > .text-center.px-5.pt-8 h1,
  body > div.text-center + section h1,
  header + script + section h1 {
    font-size: clamp(2.375rem, 10.5vw, 2.75rem) !important;
    line-height: 1.18 !important;
  }

  header + main,
  header + script + main,
  header + script + section,
  header + script + div {
    padding-top: 1.5rem !important;
  }

  .prose-p,
  body > .text-center.px-5.pt-8 > p.max-w-2xl,
  .article p,
  .article li {
    min-width: 0;
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
  }

  body > .text-center.px-5.pt-8 {
    padding-top: 1.5rem !important;
  }

  body { font-size: 16px; }
  section h2 { font-size: clamp(2rem, 9vw, 2.4rem); }
  .article h1 { font-size: clamp(2rem, 9vw, 2.625rem); }
  .sec { padding: 3.75rem 0 !important; }

  header img[alt="Sống An Vui"] {
    width: 120px !important;
  }

  .btn-cta { min-height: 54px; }

  /* /qua/: cột "Link gửi khách" có style="white-space:nowrap" viết cứng (cả file
     tĩnh lẫn lib/khung-qua.mjs) nên bảng rộng 403px trên màn 390px, phải vuốt
     ngang. Trên điện thoại cho link xuống dòng. */
  td[style*="nowrap"] {
    white-space: normal !important;
  }

  td[style*="nowrap"] > code {
    overflow-wrap: anywhere;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  header .tu-van-btn {
    display: none !important;
  }

  header > div > .flex:last-child > a:first-child:not(:last-child) {
    display: none !important;
  }

  header > div {
    gap: 0.75rem;
  }

  header nav {
    gap: clamp(0.75rem, 2vw, 1.25rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Dư âm bảng teal/vàng cũ viết cứng trong HTML ───────────────────────────
   Mã màu trong style="…" do HTML viết, hoặc do JS gán (trình duyệt viết lại thành
   "rgba(44, 95, 114, 0.04)" — có dấu cách) nên mỗi màu khớp cả hai dạng. */
.mobile-menu-link:active,
.mobile-menu-link.is-active {
  background: rgba(var(--primary-rgb), .08);
}

[style*="rgba(44,95,114,.1)"],
[style*="rgba(44, 95, 114, 0.1)"] {
  background: rgba(var(--primary-rgb), .08) !important;
}

/* /order/: ô "Thanh toán khi nhận hàng" đang chọn (HTML + order/index.html dòng gán style.background) */
[style*="rgba(44,95,114,.04)"],
[style*="rgba(44, 95, 114, 0.04)"] {
  background: rgba(var(--primary-rgb), .04) !important;
}

[style*="rgba(201,134,46,.12)"] {
  background: var(--note) !important;
}

/* `.article a` (0,1,1) mạnh hơn `.btn-cta` (0,1,0) nên nút trong bài blog bị
   chữ xanh lá trên nền xanh rừng — gần như không đọc được (tương phản 1.8). */
.article a.btn-cta,
main a.btn-cta {
  color: var(--on-primary);
  text-decoration: none;
}

/* Nhãn chuyên mục "Miễn dịch" viết cứng #B8860B: tương phản 2.9 trên nền nhãn. */
[style*="color:#B8860B"] {
  color: #7A5B26 !important;
}

/* Nút viền "Nhắn Zalo", "Tư vấn miễn phí", "Đặt lịch…": màu viết cứng trong style="…" (HTML + lib/)
   → cùng màu CTA với nút đặc. Khớp cả dạng trình duyệt viết lại khi JS chạm vào style (có dấu cách). Chữ #2B7656 trên nền kem 5.0:1, trên trắng 5.5:1. */
a[style*="border-color:var(--primary);color:var(--primary)"],
a[style*="border-color: var(--primary); color: var(--primary)"] {
  border-color: var(--cta) !important;
  color: var(--cta) !important;
}

a[style*="border-color:var(--primary);color:var(--primary)"]:hover,
a[style*="border-color: var(--primary); color: var(--primary)"]:hover {
  border-color: var(--cta-hover) !important;
  color: var(--cta-hover) !important;
}


/* ═══ TRANG CHỦ — giao diện 2026-10-18 (chỉ áp khi <body class="trang-chu">) ═══ */
/* Bản mẫu duyệt: output/design/2026-10-18/trang-chu-mau/so-sanh.html. Mọi quy tắc bắt đầu bằng .trang-chu. */
.trang-chu{ --dong:#C2A16A; --dong-chu:#7A5F34; } /* --dong-chu: vàng đồng đậm cho CHỮ trên nền sáng (5.98:1 trên trắng) */

/* Vạch vàng đồng ở nhãn mục (hai bên nếu căn giữa) */
.trang-chu .section-label{display:flex;align-items:center;gap:.65rem}
.trang-chu .section-label::before{content:"";flex:0 0 1.75rem;height:1px;background:var(--dong)}
.trang-chu .section-label.text-center{justify-content:center}
.trang-chu .section-label.text-center::after{content:"";flex:0 0 1.75rem;height:1px;background:var(--dong)}

/* Màn đầu: vân vòng tuổi nấm Chaga rất nhạt sau ảnh */
.trang-chu .editorial-hero{position:relative;isolation:isolate}
.trang-chu .editorial-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 76% 46%, transparent 0 26px, rgba(194,161,106,.16) 26px 27px);
  -webkit-mask:radial-gradient(circle at 76% 46%, #000 0 22%, transparent 48%);
          mask:radial-gradient(circle at 76% 46%, #000 0 22%, transparent 48%)}
.trang-chu .hero-photo{position:relative;justify-self:center;width:min(100%,24rem);padding:0 1.5rem 1.75rem}
.trang-chu .photo-frame{position:relative;margin:0;aspect-ratio:4/5;border-radius:999px 999px 1.5rem 1.5rem;overflow:hidden;
  background:linear-gradient(180deg,#EADCBE 0%,#F4EDDD 48%,#E3ECE4 100%);
  box-shadow:0 0 0 1px var(--dong),0 0 0 9px var(--bg),0 0 0 10px rgba(194,161,106,.6),0 34px 60px -32px rgba(18,61,50,.5)}
.trang-chu .photo-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;mix-blend-mode:multiply}
/* Hình minh hoạ bát cơm (owner 2026-10-26: ba nhãn ½ rau · ¼ đạm · ¼ cơm phải chỉ vào một bát, không phải ảnh chân dung).
   SVG nền trong suốt, nền khung lộ ra; không hoà màu multiply như ảnh chụp, không thì bát trắng ngả màu theo nền. */
.trang-chu .photo-frame img.minh-hoa{mix-blend-mode:normal;object-position:50% 50%}
/* Nhãn "¼ đạm" hạ xuống ngang phần đạm (góc dưới phải của bát) — vị trí cũ 44–50% rơi vào chỗ giáp rau/đạm.
   :has() để chỉ áp khi khung đang là hình bát cơm; trình duyệt cũ không hỗ trợ thì nhãn giữ chỗ cũ, không vỡ gì. */
.trang-chu .hero-photo:has(img.minh-hoa) .chip-2{top:61%}
.trang-chu .photo-cap{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max-content;max-width:calc(100% - 1rem);margin:0;
  background:var(--primary);color:#F8F5ED;border-radius:1rem;padding:.6rem 1.1rem;text-align:center;
  font-size:.8125rem;line-height:1.35;box-shadow:inset 0 0 0 1px rgba(194,161,106,.65),0 14px 30px -16px rgba(18,61,50,.6)}
.trang-chu .photo-cap strong{display:block;font-weight:600}
.trang-chu .photo-cap span{display:block;color:var(--dong);font-size:.75rem}
.trang-chu .chip{position:absolute;z-index:2;background:var(--surface);border:1px solid var(--rim);border-radius:.9rem;
  padding:.55rem .85rem .55rem 1.6rem;font-size:.75rem;line-height:1.35;color:var(--subtle);box-shadow:0 14px 30px -16px rgba(18,61,50,.4)}
.trang-chu .chip::before{content:"";position:absolute;left:.7rem;top:.85rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--dong)}
.trang-chu .chip strong{display:block;color:var(--primary);font-size:.875rem}
.trang-chu .chip-1{top:5%;left:-1.25rem}
.trang-chu .chip-2{top:44%;right:-1.5rem}
.trang-chu .chip-3{bottom:15%;left:-1.75rem}
.trang-chu .hero-proof{display:none} /* dòng ảnh nhỏ cạnh nút: chỉ điện thoại, xem cuối khối */

/* Dải huy hiệu */
.trang-chu .huy-hieu{background:var(--primary);color:#F8F5ED;border-top:1px solid var(--dong);border-bottom:1px solid var(--dong)}
.trang-chu .huy-hieu-khung{max-width:72rem}
.trang-chu .huy-hieu-nhan{margin:0 0 1.25rem;text-align:center;color:var(--dong);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.trang-chu .huy-hieu-ds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0}
.trang-chu .huy-hieu-ds li{display:flex;align-items:center;gap:.85rem;padding:.25rem 1.25rem;border-left:1px solid rgba(194,161,106,.35)}
.trang-chu .huy-hieu-ds li:first-child{border-left:0;padding-left:0}
.trang-chu .hh-icon{flex:0 0 auto;width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--dong);box-shadow:inset 0 0 0 1px var(--dong),inset 0 0 0 4px var(--primary),inset 0 0 0 5px rgba(194,161,106,.45)}
.trang-chu .hh-icon svg{width:1.35rem;height:1.35rem}
.trang-chu .huy-hieu-ds strong{display:block;font-size:.9375rem;font-weight:600;line-height:1.3;color:#fff}
.trang-chu .huy-hieu-ds small{display:block;font-size:.8125rem;line-height:1.35;color:rgba(248,245,237,.78)}

/* Ba con số */
.trang-chu .so-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;margin-bottom:1rem;
  color:var(--secondary);background:var(--bg);box-shadow:inset 0 0 0 1px var(--dong),inset 0 0 0 4px var(--bg),inset 0 0 0 5px rgba(194,161,106,.45)}
.trang-chu .so-icon svg{width:1.4rem;height:1.4rem}
.trang-chu .ba-con-so .card{position:relative;padding:1.75rem 1.5rem 1.5rem !important;border-radius:1rem !important;overflow:hidden}
.trang-chu .ba-con-so .card::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:0;height:2px;background:linear-gradient(90deg,var(--dong),rgba(194,161,106,0))}
.trang-chu .ba-con-so .card > p.font-semibold{font-size:1.0625rem !important;margin-bottom:.5rem !important}

/* Số các bước: vòng vàng đồng */
.trang-chu ol > li.card > span.rounded-full{background:var(--surface) !important;color:var(--dong-chu) !important;
  box-shadow:inset 0 0 0 1px var(--dong),inset 0 0 0 4px var(--surface),inset 0 0 0 5px rgba(194,161,106,.45)}

/* Thẻ: rê chuột thì viền vàng đồng */
.trang-chu .card{transition:border-color .2s ease, box-shadow .2s ease}
.trang-chu a.card:hover, .trang-chu .editorial-products .card:hover{border-color:var(--dong) !important}

/* Người sáng lập */
.trang-chu .editorial-founder > div{position:relative;background:var(--bg);border:1px solid var(--rim);border-radius:1.5rem;
  padding:clamp(1.75rem,4vw,3rem) !important;grid-template-columns:11rem minmax(0,1fr) !important;box-shadow:0 30px 60px -45px rgba(18,61,50,.45)}
.trang-chu .editorial-founder > div::before{content:"";position:absolute;left:2rem;right:2rem;top:-1px;height:2px;
  background:linear-gradient(90deg,rgba(194,161,106,0),var(--dong),rgba(194,161,106,0))}
.trang-chu .editorial-founder img{width:11rem !important;height:13.75rem !important;border-radius:999px 999px 1rem 1rem !important;
  object-position:50% 30% !important;background:linear-gradient(180deg,#EADCBE,#F4EDDD);mix-blend-mode:multiply;
  box-shadow:0 0 0 1px var(--dong),0 0 0 6px var(--bg),0 0 0 7px rgba(194,161,106,.55) !important}
.trang-chu .editorial-founder h2{font-size:1.375rem !important;line-height:1.3 !important}
.trang-chu .editorial-founder h2::after{content:"";display:block;width:2.5rem;height:1px;background:var(--dong);margin-top:.75rem}
.trang-chu .editorial-founder .prose-p{font-size:.9375rem !important}

.trang-chu .editorial-evidence .card:first-child{border-top:2px solid var(--dong) !important}

/* Đặt lịch */
.trang-chu .editorial-booking > div{position:relative;background:var(--surface);border-radius:1.5rem;padding:clamp(1.75rem,4vw,3rem) !important;
  box-shadow:inset 0 0 0 1px var(--dong),inset 0 0 0 7px var(--surface),inset 0 0 0 8px rgba(194,161,106,.4),0 30px 60px -45px rgba(18,61,50,.45)}
.trang-chu .lich-icon{display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;border-radius:50%;margin-bottom:1.25rem;
  background:var(--primary);color:var(--dong);box-shadow:inset 0 0 0 1px var(--dong)}
.trang-chu .lich-icon svg{width:1.5rem;height:1.5rem}

/* Cam kết: như giấy chứng nhận */
.trang-chu .editorial-guarantee{max-width:46rem !important}
.trang-chu .editorial-guarantee::before{display:none !important}
.trang-chu .cam-ket{position:relative;background:var(--surface);border-radius:1.25rem;padding:3.25rem clamp(1.5rem,5vw,3.5rem) 2.25rem;
  box-shadow:inset 0 0 0 1px var(--dong),inset 0 0 0 8px var(--surface),inset 0 0 0 9px rgba(194,161,106,.45),0 30px 60px -45px rgba(18,61,50,.45)}
.trang-chu .cam-ket .section-label{justify-content:center}
.trang-chu .cam-ket .section-label::after{content:"";flex:0 0 1.75rem;height:1px;background:var(--dong)}
.trang-chu .con-dau{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:4rem;height:4rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--dong);
  box-shadow:inset 0 0 0 1px var(--dong),inset 0 0 0 5px var(--primary),inset 0 0 0 6px rgba(194,161,106,.5),0 0 0 6px var(--bg)}
.trang-chu .con-dau svg{width:1.75rem;height:1.75rem}

/* Câu hỏi thường gặp: +/− vàng đồng */
.trang-chu .editorial-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.trang-chu .editorial-faq summary::-webkit-details-marker{display:none}
.trang-chu .editorial-faq summary::after{content:"+";flex:0 0 1.75rem;height:1.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:500;font-size:1.125rem;line-height:1;color:var(--dong-chu);box-shadow:inset 0 0 0 1px var(--dong)}
.trang-chu .editorial-faq details[open] summary::after{content:"–";background:var(--primary);color:var(--dong);box-shadow:none}
.trang-chu .editorial-faq details[open]{border-color:rgba(194,161,106,.6) !important}

/* Lời mời cuối trang: lặp lại vân vòng tuổi */
.trang-chu .editorial-final{position:relative;isolation:isolate}
.trang-chu .editorial-final::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%, transparent 0 26px, rgba(194,161,106,.13) 26px 27px);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 0 18%, transparent 46%);
          mask:radial-gradient(circle at 50% 50%, #000 0 18%, transparent 46%)}

/* Chân trang: nền xanh rừng, logo bản sáng — CẢ SITE (từ 2026-10-19; trước chỉ trang chủ, các trang khác nền kem
   gần trùng thân trang). Viết không tiền tố .trang-chu, màu vàng đồng dùng --champagne (cùng mã với --dong). */
footer, footer.border-t{background:var(--primary) !important;border-top:1px solid var(--champagne) !important;color:#F8F5ED} /* .border-t: thắng `footer.border-t{border-color:var(--rim)}` ở đầu file */
footer::before{background-image:url('/brand-logo-light.svg') !important;width:10rem !important;height:2.1rem !important}
footer p{color:rgba(248,245,237,.82) !important}
footer p.font-semibold, footer strong{color:#F8F5ED !important}
footer a{color:var(--champagne) !important}
footer a:hover{color:#F8F5ED !important}
footer [style*="--faint"]{color:rgba(248,245,237,.66) !important}

/* Sửa lỗi: menu gãy dòng ở khổ 640–1100px */
.trang-chu header nav, .trang-chu header .tu-van-btn{white-space:nowrap}
@media (max-width:1100px){ .trang-chu header .tu-van-btn{display:none !important} }
@media (min-width:640px) and (max-width:899px){
  .trang-chu header nav a[href="#lien-he"], .trang-chu header nav a[href="#ve-chung-toi"]{display:none}
  .trang-chu header nav{gap:1rem !important}
}
/* Sửa lỗi: nút "Chọn mua" thẻ lớn bị kéo cao; hàng sản phẩm thứ hai trống một ô */
.trang-chu .editorial-products > .grid > .card:first-child .btn-cta{align-self:start}
@media (min-width:1024px){ .trang-chu .editorial-products > .grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }

/* Chuyển động nhẹ — tắt hẳn nếu máy đặt giảm chuyển động */
@media (prefers-reduced-motion:no-preference){
  .trang-chu .hien-dan{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .trang-chu .hien-dan.da-hien{opacity:1;transform:none}
  .trang-chu .hero-photo{animation:trang-chu-vao .9s ease both .1s}
}
@keyframes trang-chu-vao{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

@media (max-width:899px){
  .trang-chu .huy-hieu-ds{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.25rem}
  .trang-chu .huy-hieu-ds li:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:639px){
  /* cột lưới phải là minmax(0,1fr): cột "auto" giãn theo nội dung dài nhất và đẩy cả màn đầu tràn ngang */
  .trang-chu .editorial-hero{grid-template-columns:minmax(0,1fr) !important}
  .trang-chu .editorial-hero::before{background:none}
  .trang-chu .hero-proof{display:flex;grid-area:proof;justify-self:start;align-items:center;gap:.75rem;margin:0 0 1.1rem;padding:.55rem 1rem .55rem .55rem;
    background:var(--surface);border:1px solid var(--rim);border-radius:1.5rem;max-width:100%}
  .trang-chu .hero-proof img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex:0 0 44px;
    box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--dong)}
  .trang-chu .hero-proof p{margin:0;font-size:.8125rem;line-height:1.35;color:var(--subtle)}
  .trang-chu .hero-proof strong{color:var(--primary);font-weight:600}
  .trang-chu .hero-photo{width:min(100%,20rem);padding:0 .75rem 1.75rem}
  .trang-chu .chip{font-size:.6875rem;padding:.45rem .7rem .45rem 1.4rem}
  .trang-chu .chip strong{font-size:.8125rem}
  .trang-chu .chip::before{top:.72rem;left:.6rem}
  .trang-chu .chip-1{top:2%;left:-.5rem} .trang-chu .chip-2{top:50%;right:-.5rem} .trang-chu .chip-3{bottom:17%;left:-.75rem}
  .trang-chu .huy-hieu-ds li{flex-direction:column;align-items:flex-start;gap:.55rem;padding:0 0 0 1rem}
  .trang-chu .huy-hieu-ds li:nth-child(odd){padding-left:0;border-left:0}
  .trang-chu .huy-hieu-ds strong{font-size:.875rem}
  .trang-chu .huy-hieu-ds small{font-size:.75rem}
  .trang-chu .editorial-founder > div, .trang-chu .editorial-booking > div{margin-left:1rem !important;margin-right:1rem !important;padding:1.75rem 1.25rem !important}
  .trang-chu .editorial-founder > div{grid-template-columns:1fr !important;text-align:center !important;gap:1.5rem !important}
  .trang-chu .editorial-founder img{width:9rem !important;height:11.25rem !important;margin:0 auto !important}
  .trang-chu .editorial-founder h2::after{margin-left:auto;margin-right:auto}
  .trang-chu .editorial-founder .prose-p{text-align:left}
  .trang-chu .cam-ket{padding-top:3rem}
  .trang-chu .cam-ket .prose-p{text-align:left}
}

/* ── Trang chủ, sửa tay 2026-10-18 (owner duyệt): nút đầu trang + chữ tối thiểu 13px ── */
/* Nút "Đánh giá 3 phút" ở đầu trang: các trang khác để dạng link chữ (header .btn-cta ở trên), trang chủ là nút đặc */
.trang-chu header .btn-cta{background:var(--cta) !important;color:#FFFFFF !important;border-radius:999px !important;
  padding:0 1.15rem !important;box-shadow:var(--cta-ring) !important}
.trang-chu header .btn-cta:hover, .trang-chu header .btn-cta:focus-visible{background:var(--cta-hover) !important;color:#FFFFFF !important;text-decoration:none}
@media (max-width:639px){ .trang-chu header .btn-cta{padding:0 .9rem !important;font-size:.875rem !important} }
/* Khách 40–60 tuổi: không chữ nào dưới 13px — kể cả dòng "không phải là thuốc" bắt buộc theo luật ở chân trang */
.trang-chu .section-label{font-size:.8125rem !important}
.trang-chu .chip{font-size:.8125rem}
.trang-chu .chip strong{font-size:.9375rem}
.trang-chu .photo-cap span{font-size:.8125rem;text-wrap:balance}
.trang-chu .huy-hieu-nhan{font-size:.8125rem}
.trang-chu .huy-hieu-ds small{font-size:.875rem}
.trang-chu .editorial-products .text-\[10px\]{font-size:.8125rem !important}
/* chân trang mọi trang: hai dòng cuối (địa chỉ, "không phải là thuốc") 10–11px → 13px; dòng link + © (text-xs 12px)
   → 14px như trang chủ (trang chủ nâng .text-xs trong <style> riêng của nó) */
footer .text-\[11px\], footer .text-\[10px\]{font-size:.8125rem !important;line-height:1.5}
footer .text-xs{font-size:.875rem !important;line-height:1.5 !important}

/* ── Trang chủ, nút "Đặt lịch tư vấn miễn phí" (2026-10-19) ──
   HTML khai nút viên thuốc viền 2px như "Đặt lịch trò chuyện" ở đầu trang, nhưng quy tắc cũ
   `.editorial-booking a:not(.btn-cta){border-radius:6px;border-width:1px}` (có từ trước giao diện mới) đè
   thành chữ nhật viền mảnh — nút duy nhất trên trang không bo tròn. Trên điện thoại cho rộng hết thẻ. */
.trang-chu .editorial-booking a:not(.btn-cta){border-radius:999px !important;border-width:2px !important;justify-content:center}
@media (max-width:639px){ .trang-chu .editorial-booking a:not(.btn-cta){display:flex !important;width:100%} }

/* ── Trang chủ, hai nút đầu trang "Làm bài đánh giá 3 phút" + "Đặt lịch trò chuyện" (2026-10-19) ──
   Nút đặc bo 20px (.btn-cta dùng --radius-button) cạnh nút viền bo tròn hẳn: cho cả hai bo tròn, như nút
   "Đánh giá 3 phút" trên thanh đầu trang. Trên điện thoại hai nút dài theo chữ nên một dài một ngắn, lệch mép
   phải — cho rộng hết cột, cao bằng nhau, chữ giữa. Máy tính giữ hai nút nằm cạnh nhau. */
.trang-chu .editorial-hero .hero-actions > a{border-radius:999px !important}
@media (max-width:639px){
  .trang-chu .editorial-hero .hero-actions > a{width:100%;min-height:56px !important;justify-content:center !important}
}

/* ── Trang chủ, lời mời cuối trang + dòng "Miễn phí…" đầu trang (2026-10-19) ──
   Nút "Làm bài đánh giá 3 phút" cuối trang cũng bo tròn hẳn như ở đầu trang. Trên điện thoại: nút rộng hết cột
   (trước dài theo chữ, hụt mép phải), bớt khoảng trống 96px trên/dưới, và hai link "Đặt lịch trò chuyện" /
   "nhắn Zalo" không bị ngắt giữa cụm. Chữ canh giữa như trên máy tính (canh trái thì lệch so với nút rộng
   hết cột chữ giữa và vân vòng tuổi ở giữa khối). (Dòng chữ nhỏ "Miễn phí…" dưới hai nút đầu trang rớt riêng chữ "gì": sửa
   trong index.html bằng &nbsp; giữa các chữ của từng cụm, nên chỉ xuống dòng ở dấu "·".) */
.trang-chu .editorial-final .btn-cta{border-radius:999px !important}
.trang-chu .editorial-final p a{white-space:nowrap}
.trang-chu .editorial-final p{text-wrap:balance}
/* .prose-p ép canh trái mọi nơi (cho đoạn dài); câu "3 phút để biết…" ngắn, nằm giữa tiêu đề và nút canh giữa → lệch trái */
.trang-chu .editorial-final .prose-p{text-align:center !important}
@media (max-width:639px){
  .trang-chu .editorial-final{padding-top:4rem !important;padding-bottom:4rem !important;text-align:center !important}
  .trang-chu .editorial-final .btn-cta{display:flex !important;width:100%;min-height:56px !important}
}

/* ── Trang chủ, nhãn "Men gan" tràn mép phải ở khổ 640–899px (2026-10-19) ──
   Khổ này ảnh đầu trang chỉ cách mép phải ~21px mà nhãn chìa ra 24px (right:-1.5rem) → trang kéo ngang được 3px
   (máy tính bảng, điện thoại xoay ngang). Thu nhãn vào còn chìa 1rem; điện thoại và máy tính không đổi. */
@media (min-width:640px) and (max-width:899px){ .trang-chu .chip-2{right:-1rem} }

/* ── Trang chủ, hai thẻ rộng "Combo đầy đủ" + "Gia vị Chaga" và dòng "Nhắn Zalo" dưới mục sản phẩm (2026-10-19) ──
   Điện thoại: hai thẻ này canh giữa nhãn/tên/giá nhưng đoạn mô tả canh trái, nút ngắn theo chữ — lệch so với nhau
   và với bốn thẻ sản phẩm phía trên (chữ canh trái, nút rộng hết thẻ). Cho giống bốn thẻ đó.
   Máy tính: quy tắc chung `.flex-1.text-center > p.text-xs` (cột 68ch đặt giữa) làm đoạn mô tả thụt vào ~100px so
   với tên và giá — cho sát lề trái như các dòng khác của thẻ (vẫn giữ dòng không quá 65 ký tự).
   Link "Nhắn Zalo 0382 332 992" không ngắt đôi. ("Chưa mở bán…" rớt riêng chữ "hàng": &nbsp; trong index.html.) */
.trang-chu .editorial-products > .card > div > p.text-xs{max-width:65ch;margin-left:0;margin-right:0}
.trang-chu .editorial-products > p{text-wrap:balance}
.trang-chu .editorial-products > p a{white-space:nowrap}
@media (max-width:639px){
  .trang-chu .editorial-products > .card > div{text-align:left !important;width:100%}
  .trang-chu .editorial-products > .card > div > a{display:flex !important;width:100%}
}

/* ── Trang chủ, khung thẻ sản phẩm viền vàng đồng (2026-10-19) ──
   Sáu thẻ ở mục sản phẩm (bốn thẻ lưới + Combo + Gia vị) viền vàng đồng, thêm một nét mảnh bên trong cách 5px —
   cùng kiểu khung đôi của ảnh đầu trang. Viền ngoài !important vì thẻ đầu có border-color riêng (inline + quy tắc
   `.card:first-child`). Rê chuột: viền đậm hẳn, nổi nhẹ. */
.trang-chu .editorial-products .card{border-color:rgba(194,161,106,.75) !important;
  box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px rgba(194,161,106,.3),0 18px 40px -30px rgba(18,61,50,.35)}
.trang-chu .editorial-products .card:hover{border-color:var(--dong) !important;
  box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px rgba(194,161,106,.5),0 24px 46px -28px rgba(18,61,50,.42)}

/* ── Trang chủ, chữ trong thẻ sản phẩm cùng một khuôn (owner duyệt 2026-10-26) ──
   Thẻ đầu (Nano Chaga) là thẻ nổi bật: trên máy tính chiếm cả hàng, hai cột, tên + giá 1.75rem — giữ nguyên.
   Trên điện thoại nó chỉ xếp chồng như thẻ thường mà vẫn giữ tên 28px, lệch hẳn ba thẻ kia (tên 16px, giá 18px).
   Owner chọn khuôn của thẻ thường, lấy kiểu giá đậm, xanh đậm của thẻ nổi bật cho mọi thẻ. */
.trang-chu .editorial-products > .grid > .card:not(:first-child) > p.font-semibold{font-size:1.125rem !important;line-height:1.35 !important;font-weight:700}
.trang-chu .editorial-products > .grid > .card:not(:first-child) > p.font-black{font-size:1.375rem !important;color:var(--primary) !important}
@media (max-width:639px){
  .trang-chu .editorial-products > .grid > .card:first-child > p.font-semibold,
  .trang-chu .editorial-products > .grid > .card:not(:first-child) > p.font-semibold{font-size:1.25rem !important;line-height:1.3 !important;font-weight:700}
  .trang-chu .editorial-products > .grid > .card:first-child > p.font-black,
  .trang-chu .editorial-products > .grid > .card:not(:first-child) > p.font-black{font-size:1.5rem !important;color:var(--primary) !important}
}
/* Thẻ rộng "Combo đầy đủ" nằm ngoài lưới nên khối trên không phủ tới — giá còn 20px xanh nhạt (owner 2026-10-26:
   "màu giá tiền chưa nổi giống các sản phẩm khác"). Cùng cỡ, cùng màu với giá ba thẻ thường. */
.trang-chu .editorial-products > .card p.font-black{font-size:1.375rem !important;color:var(--primary) !important}
@media (max-width:639px){ .trang-chu .editorial-products > .card p.font-black{font-size:1.5rem !important} }
/* ── Trang chủ, giá hạ một bậc + quy cách cạnh giá (owner đồng ý 2026-10-26) ──
   Giá đang là chữ to và đậm nhất trong thẻ (24px, nét 900 — to hơn cả tên 20px): mắt đọc con số trước khi đọc sản phẩm
   giúp gì, ngược với thông điệp "sửa từ mâm cơm, không cần mua gì" của cả trang. Thứ tự đọc mới: tên → công dụng → giá.
   Giá vẫn rõ, vẫn xanh đậm, cùng một kiểu cho mọi thẻ; chỉ không còn to hơn tên. Quy cách (hộp 800g, 60 viên…) cho
   con số có ngữ cảnh — lấy đúng theo knowledge/chaga-global-reference.md mục 4, không ghi giá theo ngày. */
.trang-chu .editorial-products p.font-black{font-weight:700 !important}
.trang-chu .editorial-products > .grid > .card:first-child > p.font-black{font-size:1.375rem !important}
.trang-chu .editorial-products > .grid > .card:not(:first-child) > p.font-black,
.trang-chu .editorial-products > .card p.font-black{font-size:1.125rem !important}
.trang-chu .editorial-products > .card > div > p.font-display.font-bold{font-size:1.125rem !important;font-weight:700 !important}
.trang-chu .editorial-products .quy-cach{font-family:var(--font-body);font-size:.875rem;font-weight:500;color:var(--subtle);white-space:nowrap}
/* Link "Tìm hiểu thêm" trên thẻ có trang tìm hiểu sẵn (owner 2026-10-26, bước 1: Nano → /mo-mau, Sibi → bài so sánh).
   Đặt ngay dưới mô tả, trên giá — đặt dưới nút "Chọn mua" thì thẻ Sibi lệch nút so với hai thẻ cùng hàng. Vùng bấm ≥44px. */
.trang-chu .editorial-products .tim-hieu{display:inline-flex;align-items:center;align-self:flex-start;justify-self:start;min-height:44px;
  margin:-.75rem 0 .375rem;font-size:.9375rem;font-weight:600;color:var(--primary);text-decoration:underline;text-underline-offset:3px}
/* Thẻ nổi bật trên máy tính chia 5 hàng cố định (nhãn, tên, mô tả, giá, nút = 1fr) — thêm link là thành 6 phần tử, giá rơi vào
   hàng giãn 1fr, hở to giữa giá và nút. Thêm một hàng auto khi thẻ có link. */
.trang-chu .editorial-products > .grid > .card:first-child:has(.tim-hieu){grid-template-rows:repeat(5,auto) 1fr}
@media (max-width:639px){
  .trang-chu .editorial-products > .grid > .card:first-child > p.font-black,
  .trang-chu .editorial-products > .grid > .card:not(:first-child) > p.font-black,
  .trang-chu .editorial-products > .card p.font-black{font-size:1.25rem !important}
  .trang-chu .editorial-products > .card > div > p.font-display.font-bold{font-size:1.25rem !important}
}

/* ── Nút bo tròn hẳn trên CẢ SITE (2026-10-19) ──
   Mọi nút trong HTML đều khai rounded-full, nhưng `.btn-cta{border-radius:var(--radius-button)!important}` và
   `a.border,a.border-2,button.border…{…}` ở đầu file ép về bo 20px — chỉ trang chủ đã được sửa lại. Trả về bo tròn
   hẳn cho mọi nút khai rounded-full (nút đặc, nút viền, nút lọc chuyên mục ở /blog/, nút "Đặt hàng" ở /order/).
   Trừ `header .btn-cta` ở các trang trong: chỗ đó cố ý là link chữ (bo 0, xem `header .btn-cta` ở trên). */
:is(a,button).rounded-full.btn-cta:not(header .btn-cta),
:is(a,button).rounded-full:is(.border,.border-2){border-radius:999px !important}

/* Bài kiến thức (/blog/…): "Xem sản phẩm ngay" + "Nhận file PDF miễn phí" trên điện thoại rộng hết thẻ, chữ giữa,
   như trang chủ. Chỉ CSS — HTML bài viết do renderer dựng, phải khớp từng byte (chốt doi-chieu-trang). */
@media (max-width:639px){
  main.article a.btn-cta{display:flex !important;width:100%;min-height:56px;align-items:center;justify-content:center;text-align:center}
}

/* ── Bài kiến thức + /blog/: điểm nhấn vàng đồng như trang chủ (2026-10-19) ──
   Chỉ ba chỗ — thân bài để sạch cho dễ đọc. Chỉ CSS (HTML bài do renderer dựng, phải khớp từng byte).
   1. Hai hộp cuối bài ("Xem sản phẩm ngay", "Tặng miễn phí"): khung đôi vàng đồng như thẻ sản phẩm trang chủ.
      Hộp "Tặng miễn phí" bỏ viền + nền xanh viết trong style="…"; nhãn 11px → 13px, có vạch vàng đồng như nhãn mục.
   2. Nhãn mục ("Bài liên quan", "Kiến thức" ở /blog/): vạch vàng đồng phía trước, 13px.
   3. Thẻ bài viết (/blog/ + bài liên quan): rê chuột viền vàng đồng. */
main.article > div.card.my-8{border-color:rgba(194,161,106,.75) !important;background:var(--surface) !important;
  box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px rgba(194,161,106,.3),0 18px 40px -30px rgba(18,61,50,.35) !important}
main.article > div.card.my-8 .text-\[11px\]{font-size:.8125rem !important;display:flex;align-items:center;gap:.65rem;letter-spacing:.06em !important}
main.article > div.card.my-8 .text-\[11px\]::before{content:"";flex:0 0 1.75rem;height:1px;background:var(--champagne)}
body:not(.trang-chu) main p.section-label{display:flex;align-items:center;gap:.65rem;font-size:.8125rem !important}
body:not(.trang-chu) main p.section-label::before{content:"";flex:0 0 1.75rem;height:1px;background:var(--champagne)}
body:not(.trang-chu) main a.card{transition:opacity .15s, border-color .2s ease !important}
body:not(.trang-chu) main a.card:hover{border-color:var(--champagne) !important}

/* ── Đầu trang CẢ SITE giống trang chủ (2026-10-19) ──
   1. Nút "Đánh giá 3 phút" / "Đặt hàng": nút đặc bo tròn như trang chủ (trước ở các trang trong là link chữ —
      `header .btn-cta{…transparent…}` ở đầu file, chọn ngày 18/10). Viết lại đúng các quy tắc `.trang-chu header
      .btn-cta` không tiền tố, đặt sau để thắng.
   2. Chữ menu 14px → 16px như trang chủ (trang chủ nâng .text-sm trong <style> riêng); khổ 640–899px ẩn "Về chúng
      tôi" + "Liên hệ" như trang chủ để menu không gãy dòng.
   3. Chữ "MENU" dưới biểu tượng 7px → 10px.
   4. Logo trên điện thoại 120px → tối đa 132px (co lại ở màn rất hẹp để không chèn nút). */
header .btn-cta{background:var(--cta) !important;color:#FFFFFF !important;border-radius:999px !important;
  padding:0 1.15rem !important;box-shadow:var(--cta-ring) !important}
header .btn-cta:hover, header .btn-cta:focus-visible{background:var(--cta-hover) !important;color:#FFFFFF !important;text-decoration:none}
header nav.text-sm, #mobile-menu .text-sm{font-size:1rem !important}
header nav{white-space:nowrap}
@media (min-width:640px) and (max-width:899px){
  header nav a[href$="#lien-he"], header nav a[href$="#ve-chung-toi"]{display:none}
  header nav{gap:1rem !important}
}
@media (max-width:639px){
  header .btn-cta{padding:0 .9rem !important;font-size:.875rem !important}
  #menu-icon-open{width:32px !important}
  #menu-icon-open > div:nth-child(2){font-size:10px !important;letter-spacing:.04em !important;margin:3px 0 !important}
  header:has(#menu-toggle) img[alt="Sống An Vui"]{width:min(132px,33vw) !important} /* /order/, /thank-you/ (không menu) giữ nguyên */
}
/* Màn rất hẹp (≤360px, vd iPhone SE): nút đầu trang rộng hơn cột 1fr → lấn nút MENU (trang chủ bị từ trước).
   Cột nút theo đúng bề rộng nút, logo co phần còn lại; chữ nút 13px. */
@media (max-width:360px){
  header:has(#menu-toggle) > div{grid-template-columns:minmax(0,1fr) 44px auto !important}
  header .btn-cta, .trang-chu header .btn-cta{padding:0 .7rem !important;font-size:.8125rem !important}
}
/* Khổ 900–1100px: menu 16px + "Nhắn Zalo" + nút đặc (trang quà, /mo-mau/) không vừa một dòng → khít khoảng cách menu */
@media (min-width:900px) and (max-width:1100px){ header nav{gap:.75rem !important} }

/* ── Bài kiến thức: dòng người viết + đoạn "Ai nên hỏi bác sĩ" (2026-10-20, báo cáo kiểm 21 trang mục 9.2 + 9.5) ──
   HTML do renderer dựng (lib/khung-blog.mjs, lib/blocks/index.mjs), chỉ có ở main.article. Chữ không dưới 13px.
   `.article p` trên điện thoại ép 17px !important → các quy tắc dưới cũng !important, tăng độ đặc hiệu để thắng. */
main.article p.tac-gia{display:flex;align-items:center;gap:.6rem;margin:-.5rem 0 1.75rem;max-width:none;
  font-size:.9375rem !important;line-height:1.45 !important;color:var(--subtle)}
main.article p.tac-gia img{width:32px;height:32px;border-radius:999px;object-fit:cover;object-position:50% 20%;
  border:1px solid var(--rim);flex-shrink:0}
main.article p.tac-gia strong{color:var(--ink);font-weight:600}
main.article aside.luu-y-chaga{margin:2rem 0;padding:1.125rem 1.25rem;border-left:3px solid var(--champagne);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--note)}
main.article aside.luu-y-chaga p,
main.article aside.luu-y-chaga li{font-size:1rem !important;line-height:1.65 !important;color:var(--ink)}
main.article aside.luu-y-chaga p.luu-y-chaga__tieu-de{font-family:var(--font-display);font-weight:700;
  font-size:1.0625rem !important;color:var(--primary);margin-bottom:.5rem}
main.article aside.luu-y-chaga ul{margin-bottom:.75rem}
main.article aside.luu-y-chaga > :last-child{margin-bottom:0}