/* ============================================================
   BioGaia ProDentis · biogaia-prodentis.vn
   Web design tokens + base styles · v1.0 · 12/09/2026
   Nguồn: BioGaia Brand Manual June 2024 (tr.22, 27, 30 tới 35, 77),
   benchmark site BioGaia global 12/09/2026, quyết định dự án tới 08/09/2026.
   Cách dùng: nạp file này trước CSS của theme hoặc Beaver Builder.
   Không sửa giá trị màu gốc (--bg-*). Chỉ đổi ở tầng vai trò (--color-*).
   ============================================================ */

/* ---------- 1. Font Oktah Neue (4 weight + italic, đủ glyph tiếng Việt) ----------
   LƯU Ý LICENSE: bộ file đi kèm Brand Manual là license Desktop của Monotype,
   chưa có quyền webfont. Chỉ bật khối @font-face này sau khi mua webfont license
   (MyFonts, khoảng 40 USD một style). Trước đó, site chạy bằng font dự phòng
   trong --font-sans và giữ nguyên toàn bộ token còn lại. */
@font-face { font-family: "Oktah Neue"; src: url("img/v9/fonts/OktahNeue-Regular.woff2") format("woff2");        font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Oktah Neue"; src: url("img/v9/fonts/OktahNeue-RegularItalic.woff2") format("woff2");  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Oktah Neue"; src: url("img/v9/fonts/OktahNeue-Medium.woff2") format("woff2");         font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Oktah Neue"; src: url("img/v9/fonts/OktahNeue-SemiBold.woff2") format("woff2");       font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- 2. Token ---------- */
:root {
  /* 2a. Màu gốc · dòng Prodentis, Brand Manual tr.27, PMS 338C */
  --bg-mint-100: #6ECEB2;
  --bg-mint-75:  #A1D4C5;
  --bg-mint-50:  #C5E3DA;
  --bg-mint-30:  #DAEDE8;
  --bg-mint-15:  #F0F7F7;

  /* 2b. Màu gốc · trung tính, tr.22 */
  --bg-ink:      #0E0E0E;   /* Almost Black, màu chữ và logo duy nhất */
  --bg-white:    #FFFFFF;
  --bg-offwhite: #F9F9FA;   /* Almost White, nền luôn hợp lệ */

  /* 2c. Màu gốc · xám, chỉ cho chữ phụ và biểu đồ, tr.77 */
  --bg-grey-85:  #4A4A49;
  --bg-grey-65:  #7C7C7B;
  --bg-grey-35:  #BCBCBC;

  /* 2d. Vai trò · đây là tầng theme và builder được phép trỏ tới */
  --color-text:            var(--bg-ink);
  --color-text-muted:      var(--bg-grey-85);   /* 8,9:1 trên trắng, 8,2:1 trên mint-15 */
  --color-text-on-image:   var(--bg-white);     /* chỉ dùng trên ảnh */
  --color-bg:              var(--bg-white);
  --color-bg-alt:          var(--bg-offwhite);
  --color-surface:         var(--bg-mint-15);   /* khối xen kẽ nhẹ */
  --color-surface-strong:  var(--bg-mint-30);   /* khối nhấn, đi cặp với mint-15 */
  --color-accent:          var(--bg-mint-100);  /* điểm nhấn đồ họa, KHÔNG làm nền chữ trắng */
  --color-accent-soft:     var(--bg-mint-75);   /* đi cặp với mint-100 */
  --color-border:          var(--bg-mint-50);
  --color-border-strong:   var(--bg-ink);
  --color-cta:             var(--bg-ink);
  --color-cta-text:        var(--bg-white);
  --color-cta-hover:       #2B2B2B;
  --color-focus:           var(--bg-ink);
  --color-link:            var(--bg-ink);
  --color-link-underline:  var(--bg-mint-100);

  /* 2e. Chữ · Brand Manual tr.30 tới 33, điều chỉnh cho màn hình */
  --font-sans: "Oktah Neue", "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-normal:   300;   /* Oktah Neue Normal · footnote, chú thích */
  --fw-regular:  400;   /* Regular · body, preamble */
  --fw-medium:   500;   /* Medium · H1, nút */
  --fw-semibold: 600;   /* SemiBold · H2, H3, subheading */

  --fs-footnote: 0.8125rem;                                  /* 13px */
  --fs-small:    0.875rem;                                   /* 14px */
  --fs-body:     clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);   /* 16 tới 17px */
  --fs-preamble: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);     /* 18 tới 20px */
  --fs-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);     /* 20 tới 24px */
  --fs-h2:       clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);     /* 28 tới 40px */
  --fs-h1:       clamp(2rem, 1.3rem + 2.9vw, 3.75rem);       /* 32 tới 60px, 32 để tên chủng Latin không tràn ở 375px */
  --fs-display:  clamp(2.75rem, 1.8rem + 4vw, 4.5rem);       /* 44 tới 72px, chỉ hero trang chủ */

  --lh-tight:   1.1;    /* display, H1 */
  --lh-heading: 1.2;    /* H2, H3, theo manual x1,2 */
  --lh-body:    1.55;   /* body web, manual in ấn là 1,2 */
  --ls-heading: -0.01em; /* manual: -5 tracking */

  /* 2f. Khoảng cách, nhịp 8px */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --section-y: clamp(48px, 5vw + 24px, 96px);
  /* Khoảng cách fluid theo cách Utopia, dùng cho gap và margin lớn để nhịp co giãn cùng chữ */
  --fl-s:  clamp(16px, 1rem + 0.5vw, 24px);
  --fl-m:  clamp(24px, 1.25rem + 1vw, 40px);
  --fl-l:  clamp(40px, 2rem + 2vw, 72px);
  --fl-xl: clamp(64px, 3rem + 3vw, 112px);
  --container: 1200px;
  --container-text: 720px;   /* độ rộng tối đa của cột chữ dài */
  --gutter: clamp(16px, 4vw, 32px);

  /* 2g. Hình khối · hệ hình tròn của logo */
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-product: 0 24px 40px -24px rgba(14, 14, 14, .28);
  --shadow-card:    0 8px 24px -16px rgba(14, 14, 14, .18);
  --btn-h: 48px;
  --btn-h-sm: 40px;
  --transition: 160ms ease;
}

/* ---------- 3. Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0 0 var(--space-4); color: var(--color-text); letter-spacing: var(--ls-heading); text-wrap: balance; text-transform: none; overflow-wrap: anywhere; }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-medium);   line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
h4 { font-size: var(--fs-preamble); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.display { font-size: var(--fs-display); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: -0.015em; }
p { margin: 0 0 var(--space-4); max-width: var(--container-text); }
.preamble { font-size: var(--fs-preamble); font-weight: var(--fw-regular); line-height: 1.45; }
.small { font-size: var(--fs-small); }
.muted { color: var(--color-text-muted); }
.footnote, .source { font-size: var(--fs-footnote); font-weight: var(--fw-normal); font-style: italic; color: var(--color-text-muted); line-height: 1.45; }
strong, b { font-weight: var(--fw-semibold); }
em, i { font-style: italic; }
a { color: var(--color-link); text-decoration: underline; text-decoration-color: var(--color-link-underline); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color var(--transition); }
a:hover { text-decoration-color: var(--color-text); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.25em; margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

/* Chú thích claim: mọi câu công dụng đều có số dẫn xuống khối .sources */
sup.ref { font-size: 0.7em; line-height: 0; vertical-align: super; font-weight: var(--fw-medium); }
sup.ref a { text-decoration: none; color: var(--color-text-muted); }
.sources { font-size: var(--fs-footnote); font-weight: var(--fw-normal); color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-5); }
.sources ol { padding-left: 1.4em; margin: 0; }
.sources li { margin-bottom: var(--space-1); }

/* Tên chủng: in nghiêng phần Latin, không nghiêng tên thương mại */
.strain i, .strain em { font-style: italic; }

/* ---------- 4. Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--surface { background: var(--color-surface); }
.section--surface-strong { background: var(--color-surface-strong); }
.section--offwhite { background: var(--color-bg-alt); }
.section--accent { background: var(--color-accent); }             /* chữ vẫn soft black */
.section--accent .muted, .section--surface-strong .muted { color: var(--bg-grey-85); }
.grid { display: grid; gap: var(--space-5); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: var(--space-4); }
.eyebrow { display: inline-block; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text-muted); margin-bottom: var(--space-3); }

/* ---------- 5. Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-h); padding: 0 var(--space-5);
  font: inherit; font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: 1;
  border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn--primary { background: var(--color-cta); color: var(--color-cta-text); border-color: var(--color-cta); }
.btn--primary:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-strong); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: transparent; text-decoration: underline; text-decoration-color: var(--color-link-underline); text-decoration-thickness: 2px; text-underline-offset: 4px; padding-inline: var(--space-2); }
.btn--sm { min-height: var(--btn-h-sm); padding: 0 var(--space-4); font-size: var(--fs-small); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- 6. Thành phần ---------- */
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.card--surface { background: var(--color-surface); border-color: transparent; }
.card--strong { background: var(--color-surface-strong); border-color: transparent; }
.card--accent { background: var(--color-accent); border-color: transparent; }   /* chữ soft black */
.infocard { background: var(--color-accent); border-radius: var(--radius-lg); aspect-ratio: 1; min-width: 0; min-height: 0; padding: var(--space-6); display: flex; flex-direction: column; justify-content: flex-end; }
.infocard h3 { margin-bottom: var(--space-2); }
.infocard p { margin: 0; }
.infocard--soft { background: var(--color-accent-soft); }
@media (max-width: 600px) { .infocard { aspect-ratio: auto; min-height: 150px; padding: var(--space-5); } }   /* ô hẹp dưới 170px thì bỏ tỉ lệ vuông để chữ không tràn */
.infocard--light { background: var(--color-surface-strong); }

.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-strong); color: var(--color-text); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.pill--outline { background: transparent; border: 1px solid var(--color-border-strong); }

.circle { display: flex; align-items: center; justify-content: center; text-align: center; aspect-ratio: 1; border-radius: 50%; padding: 18%; background: var(--color-bg-alt); color: var(--color-text); }
.circle--accent { background: var(--color-accent); }
.circle--soft { background: var(--color-surface-strong); }

/* Khối tuân thủ: bắt buộc trên mọi trang có nhắc sản phẩm */
.disclaimer { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--color-text); background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: var(--space-4) 0; }
.disclaimer strong { font-weight: var(--fw-semibold); }
.callout { border-left: 4px solid var(--color-accent); background: var(--color-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-4) var(--space-5); }
.callout--dentist { border-left-color: var(--color-border-strong); background: var(--color-bg-alt); }
.callout h3, .callout h4 { margin-bottom: var(--space-2); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

/* FAQ: dùng details/summary để chữ hiển thị khớp 1:1 với schema FAQPage */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font-size: var(--fs-preamble); font-weight: var(--fw-semibold); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-strong); font-weight: var(--fw-regular); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 var(--space-5); max-width: var(--container-text); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Bảng so sánh */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table th { font-weight: var(--fw-semibold); background: var(--color-surface); }
.table-wrap { overflow-x: auto; }

/* Form đặt hàng */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.input, .select, .textarea { font: inherit; font-size: var(--fs-body); color: var(--color-text); background: var(--color-bg); border: 1.5px solid var(--bg-grey-35); border-radius: var(--radius-sm); min-height: var(--btn-h); padding: 0 var(--space-4); width: 100%; min-width: 0; box-sizing: border-box; transition: border-color var(--transition); }
.textarea { min-height: 120px; padding-block: var(--space-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-border-strong); }
.field .hint { font-size: var(--fs-footnote); color: var(--color-text-muted); }
.field .error { font-size: var(--fs-footnote); color: var(--color-text); font-weight: var(--fw-medium); }
.input[aria-invalid="true"] { border-color: var(--color-border-strong); border-width: 2px; }

/* Header, footer */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 72px; }
.site-header .logo img { height: 28px; width: auto; }
.site-nav { display: flex; gap: var(--space-5); }
.site-nav a { text-decoration: none; font-weight: var(--fw-medium); font-size: var(--fs-small); }
.site-nav a[aria-current="page"], .site-nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav a { white-space: nowrap; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); background: transparent; font: inherit; cursor: pointer; }
@media (max-width: 960px) { .site-nav { display: none; } .nav-toggle { display: inline-grid; place-items: center; } .site-header .container { min-height: 64px; } }   /* menu mobile: nút tròn mở danh sách 5 mục dạng lớp phủ, dựng lúc làm theme */
.site-footer { background: var(--color-surface); padding-block: var(--space-8) var(--space-6); }   /* KHÔNG dùng soft black làm nền footer, manual tr.26 */
.site-footer .logo img { height: 32px; width: auto; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Media */
.media-circle { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.media-rounded { border-radius: var(--radius-lg); }
.packshot { filter: drop-shadow(var(--shadow-product)); }

/* Tiện ích */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Trang chủ bản 11 · 02/10/2026 · nạp sau tokens.css trong home-v11.bundle.css. Kế thừa khung chung của bản 10, phần riêng bản 11 ở cuối file
   Khung chung: mọi khối có cùng đầu khối (H2 + đoạn mở) và chân khối (câu nối + link chữ), thân khối được khác nhau.
   Chỉ dùng bộ token dưới đây: 6 cỡ chữ, 2 nhịp khoảng cách dọc, 3 bậc khoảng cách trong khối, 1 bo góc, 1 kiểu thẻ. */

:root {
  /* 6 cỡ chữ */
  --t-num:   clamp(2.75rem, 1.9rem + 3.2vw, 4.75rem);   /* số lớn */
  --t-h1:    clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem);
  --t-h2:    clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --t-lead:  clamp(1.125rem, 1rem + .5vw, 1.25rem);      /* đoạn mở, H3, câu nối */
  --t-body:  clamp(1rem, .95rem + .25vw, 1.0625rem);
  --t-small: .875rem;                                    /* chú thích, nhãn, menu */
  /* 2 nhịp khoảng cách dọc giữa các khối */
  --sec:  clamp(48px, 3vw + 28px, 80px);                 /* nửa khoảng cách giữa hai khối nền trắng */
  --sec-c: clamp(64px, 5vw + 32px, 112px);               /* đệm trong khối có nền màu */
  /* 3 bậc khoảng cách trong khối */
  --g-s: 16px;
  --g-m: clamp(24px, 1.25rem + 1vw, 40px);
  --g-l: clamp(40px, 2rem + 2vw, 72px);
  --r: 20px;
  --line: 1px solid var(--bg-mint-50);
}

/* ---------- Chữ: ép mọi thẻ về 6 cỡ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { font-size: var(--t-body); }
p, li, dd { text-wrap: pretty; }
h1 { font-size: var(--t-h1); line-height: 1.08; max-width: 16ch; }
h2 { font-size: var(--t-h2); max-width: 24ch; }
h3 { font-size: var(--t-lead); }
.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--color-text-muted); }
.small, .sources, .fine { font-size: var(--t-small); }
sup.ref a { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--bg-ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 100; }
.skip:focus { top: 12px; }
.arr { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---------- Khung khối ---------- */
.s { padding-block: var(--sec); }
.s--mint, .s--soft { padding-block: var(--sec-c); }
.s--mint { background: var(--bg-mint-100); }
.s--soft { background: var(--bg-mint-15); }
.s-head { max-width: 760px; margin-bottom: var(--g-l); }
.s-head h2 { margin: 0; }
.s-head .lead { margin: var(--g-s) 0 0; max-width: 60ch; }
.s--mint .s-head .lead { color: var(--bg-ink); }
.s-head--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: var(--g-m); flex-wrap: wrap; }
.s-head--row > div { max-width: 760px; }
.s-foot { margin-top: var(--g-l); padding-top: var(--g-m); border-top: var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--g-s) var(--g-m); flex-wrap: wrap; }
.s--mint .s-foot { border-top-color: var(--bg-mint-75); }
.bridge { margin: 0; font-size: var(--t-lead); line-height: 1.45; max-width: 54ch; }

/* ---------- Bộ element dùng chung ---------- */
/* Link chữ có mũi tên: một kiểu cho mọi khối */
.link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: var(--fw-semibold); text-decoration: none; border-bottom: 2px solid var(--bg-mint-100); padding-bottom: 2px; white-space: nowrap; }
.s--mint .link { border-bottom-color: var(--bg-ink); }
.link:hover { border-bottom-color: var(--bg-ink); }
.link .arr { transition: transform .2s ease; }
.link:hover .arr { transform: translateX(4px); }
.link--down .arr { transform: rotate(90deg); }
.link--down:hover .arr { transform: rotate(90deg) translateX(4px); }
/* Nhãn nhỏ */
.tag { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--bg-ink); background: #fff; font-size: var(--t-small); font-weight: var(--fw-semibold); text-decoration: none; }
a.tag { min-height: 44px; padding: 0 18px; transition: background .16s ease; }
a.tag:hover { background: var(--bg-mint-30); }
a.tag .arr { width: 16px; height: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Một kiểu thẻ: nền mint 15 phẳng, không viền, không bóng */
.box { background: var(--bg-mint-15); border-radius: var(--r); padding: var(--g-m); }
.box > :last-child { margin-bottom: 0; }
/* Số lớn */
.stat { border-top: 3px solid var(--bg-mint-100); padding-top: var(--g-s); }
.s--mint .stat { border-top-color: var(--bg-ink); }
.stat b { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-num); font-weight: var(--fw-medium); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat b small { font-size: var(--t-lead); font-weight: var(--fw-semibold); letter-spacing: 0; }
.stat p { margin: 12px 0 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--g-m) var(--g-l); }
.stats--stack { grid-template-columns: 1fr; gap: var(--g-l); }
/* Danh sách đánh số: dùng cho cơ chế, thói quen, câu hỏi, cách biên soạn */
.nlist { list-style: none; counter-reset: n; margin: 0; padding: 0; }
.nlist li { counter-increment: n; display: grid; grid-template-columns: 36px 1fr; gap: var(--g-s); padding: var(--g-s) 0; border-top: var(--line); margin: 0; }
.nlist li:last-child { padding-bottom: 0; }
.nlist li::before { content: counter(n); width: 36px; height: 36px; border-radius: 50%; background: var(--bg-mint-100); display: grid; place-items: center; font-size: var(--t-small); font-weight: var(--fw-semibold); }
.nlist b { display: block; margin-bottom: 2px; }
.s--mint .nlist li { border-top-color: var(--bg-mint-75); }
.s--mint .nlist li::before, .box .nlist li::before { background: #fff; }
.box .nlist li { border-top-color: var(--bg-mint-50); }
/* Ảnh: 2 tỉ lệ, 1 bo góc */
.media { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--bg-mint-15); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 10; }
/* Lưới */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g-l); align-items: start; }
.split--75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--c { align-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-l); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-m); }
.row2 { margin-top: var(--g-l); padding-top: var(--g-l); border-top: var(--line); }
.note { margin: 12px 0 0; padding-top: 12px; border-top: var(--line); font-size: var(--t-small); color: var(--color-text-muted); }
.note b { color: var(--color-text); }
.grid4 + .note { border-top: 0; margin-top: var(--g-s); }

/* ---------- Đầu trang website ---------- */
.site-header .container { gap: var(--g-s); }
.site-header .logo { display: inline-flex; align-items: center; min-height: 44px; }
.site-nav { gap: 8px; margin-left: auto; align-items: center; }
.nav-item { position: relative; }
.nav-item > a, .site-nav > a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; border-radius: var(--radius-pill); font-weight: var(--fw-medium); font-size: var(--t-small); text-decoration: none; }
.nav-item > a:hover, .site-nav > a:hover, .nav-item:focus-within > a { background: var(--bg-mint-15); text-decoration: none; }
.nav-item > a svg { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-item:hover > a svg, .nav-item:focus-within > a svg { transform: rotate(180deg); }
.subnav { position: absolute; top: calc(100% + 4px); left: 0; min-width: 280px; background: #fff; border-radius: var(--r); box-shadow: 0 24px 48px -24px rgba(14,14,14,.28); padding: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; }
.nav-item:hover .subnav, .nav-item:focus-within .subnav { opacity: 1; visibility: visible; transform: none; }
.subnav a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; font-size: var(--t-small); }
.subnav a:hover { background: var(--bg-mint-15); text-decoration: none; }
.subnav small { display: block; color: var(--color-text-muted); font-size: var(--t-small); }
.h-tools { display: flex; gap: 8px; align-items: center; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--bg-ink); }
.icon-btn:hover { background: var(--bg-mint-15); }
.icon-btn svg { width: 22px; height: 22px; }
.nav-toggle { display: none; }

/* ---------- 1 · Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(80vh, 740px); }
.hero .txt { display: flex; flex-direction: column; justify-content: center; padding: var(--g-l) var(--g-l) var(--g-l) max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.hero h1 { margin-bottom: var(--g-s); }
.hero .lead { max-width: 46ch; margin: 0; }
.hero .actions { margin-top: var(--g-m); }
.hero .chips-lead { margin: var(--g-m) 0 12px; font-size: var(--t-small); font-weight: var(--fw-semibold); }
.hero .tags { max-width: 520px; }
.hero .origin { margin: var(--g-m) 0 0; font-size: var(--t-small); color: var(--color-text-muted); max-width: 52ch; }
.hero .protectis { margin: 4px 0 0; font-size: var(--t-small); color: var(--color-text-muted); }
.hero .protectis a { color: var(--color-text); display: inline-block; padding-block: 10px; }
.hero .photo { position: relative; overflow: hidden; border-radius: 0 0 0 var(--r); background: var(--bg-mint-15); }
.hero .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* ---------- 2 · Tự kiểm ---------- */
.quiz label.q { display: flex; gap: var(--g-s); align-items: flex-start; padding: var(--g-s) 0; border-bottom: var(--line); cursor: pointer; transition: padding .16s ease; }
.quiz label.q:first-of-type { padding-top: 0; }
.quiz label.q:hover { padding-left: 6px; }
.quiz label.q input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--bg-ink); flex: 0 0 auto; }
.quiz .result { margin-top: var(--g-s); padding: var(--g-s); border-radius: var(--r); background: #fff; }
.quiz .result[data-state="dentist"] { border-left: 4px solid var(--bg-ink); }
.quiz .result p { margin: 0; animation: rise .4s ease both; }
.quiz .fine { margin: 12px 0 0; color: var(--color-text-muted); }
.rcard { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; background: var(--bg-mint-15); border-radius: var(--radius-sm); text-decoration: none; }
.rcard img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); }
.rcard b { display: block; font-size: var(--t-small); }
.rcard span { font-size: var(--t-small); color: var(--color-text-muted); }

/* ---------- 3 · Hệ vi sinh (khối mint duy nhất) ---------- */
.fig { margin: 0; }
.fig .panel { background: #fff; border-radius: var(--r); overflow: hidden; }
.gum { width: 100%; height: auto; display: block; }
.gum .b, .gum .f { transform-box: fill-box; transform-origin: center; }
.gum .bad .b { fill: var(--bg-grey-65); opacity: .3; }
.gum .good .b { fill: var(--bg-mint-100); stroke: var(--bg-ink); stroke-width: 1.4; }
.gum .good .f { animation: float 3.4s ease-in-out infinite; animation-delay: var(--f, 0s); }
.fig-caps { position: relative; min-height: 3.2em; margin: 12px 0 0; font-weight: var(--fw-semibold); }
.fig-caps span { position: absolute; inset: 0 auto auto 0; }
.fig-caps .c1 { opacity: 0; }
#mouth.on .bad .b { animation: crowd 10s ease-in-out infinite; }
#mouth.on .good .b { animation: appear 10s cubic-bezier(.2,.7,.2,1) infinite; }
#mouth.on .good.g2 .b { animation-delay: .35s; }
#mouth.on .good.g3 .b { animation-delay: .7s; }
.fig.on .c1 { animation: cap1 10s ease infinite; }
.fig.on .c2 { animation: cap2 10s ease infinite; }
.s--mint .stat { margin-bottom: var(--g-m); }

/* ---------- 4 · Thói quen: ảnh ngang ---------- */
.media--wide.kb img { animation: kenburns 30s ease-in-out infinite alternate; }

/* ---------- 5 · Lợi khuẩn: ba cảnh cơ chế ---------- */
.scene svg { width: 120px; height: 120px; display: block; margin-bottom: var(--g-s); }
.scene svg * { transform-box: fill-box; transform-origin: center; }
.scene h3 { margin-bottom: 8px; }
.scene p { margin: 0; }
.knock { animation: knock 4s ease-in-out infinite; }
.bobs > * { animation: float 3.4s ease-in-out infinite; }
.bobs > :nth-child(2) { animation-delay: .4s; } .bobs > :nth-child(3) { animation-delay: .8s; } .bobs > :nth-child(4) { animation-delay: 1.2s; }
.emit { animation: emit 2.4s ease-out infinite; }
.emit:nth-of-type(2) { animation-delay: .6s; } .emit:nth-of-type(3) { animation-delay: 1.2s; } .emit:nth-of-type(4) { animation-delay: 1.8s; }
.shrink { animation: shrink 2.4s ease-in-out infinite; }
.wave-hot { opacity: 0; animation: hot 6s ease-in-out infinite; }
.wave-calm { animation: calm 6s ease-in-out infinite; }
.box h3 { margin-bottom: 12px; }

/* ---------- 6 · Nghiên cứu: thẻ chung, số theo cỡ H2 ---------- */
.study { display: flex; flex-direction: column; transition: transform .2s ease; }
.study:hover { transform: translateY(-4px); }
.study .wk { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-h2); font-weight: var(--fw-medium); line-height: 1; font-variant-numeric: tabular-nums; }
.study .wk small { font-size: var(--t-small); font-weight: var(--fw-regular); color: var(--color-text-muted); }
.study .who { margin: var(--g-s) 0 0; font-weight: var(--fw-semibold); line-height: 1.3; }
.study .who small { display: block; font-size: var(--t-small); font-weight: var(--fw-regular); font-style: italic; color: var(--color-text-muted); margin-top: 2px; }
.study .tags { margin: 12px 0; gap: 6px; }
.study .tags span { padding: 4px 10px; border-radius: var(--radius-pill); background: #fff; font-size: var(--t-small); }
.study .sub { margin: 0 0 12px; font-size: var(--t-small); color: var(--color-text-muted); }
.study .find { margin: auto 0 0; padding-top: 12px; border-top: var(--line); }
.study .find b { display: block; font-size: var(--t-small); color: var(--color-text-muted); font-weight: var(--fw-medium); }
.study .doi { margin: 8px 0 0; font-size: var(--t-small); word-break: break-all; }
.study--more { background: #fff; border: 1.5px dashed var(--bg-mint-75); text-decoration: none; }
.study--more:hover { background: var(--bg-mint-15); text-decoration: none; }

/* ---------- 7 · BioGaia ---------- */
.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--g-l); }

/* ---------- 8 · Sản phẩm ---------- */
.s--product { position: relative; overflow: clip; }
.s--product .container { position: relative; z-index: 1; }
.scatter { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.scatter .lz { animation: float 6s ease-in-out infinite; animation-delay: var(--f, 0s); }
.scatter .lz.melt { animation: melt 7s ease-in-out infinite; animation-delay: var(--f, 0s); }
.pack img { width: 100%; max-width: 520px; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(14, 14, 14, .22)); animation: float 7s ease-in-out infinite; }
.facts { display: grid; gap: 8px; margin: var(--g-s) 0 0; }
.facts div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; border-top: var(--line); padding-top: 8px; }
.facts dt { font-weight: var(--fw-semibold); font-size: var(--t-small); }
.facts dd { margin: 0; font-size: var(--t-small); }
.pactions { display: flex; align-items: center; gap: var(--g-m); flex-wrap: wrap; margin: var(--g-m) 0 var(--g-s); }
.warn { font-weight: var(--fw-semibold); margin: 0 0 4px; }

/* ---------- 9 · Đọc tiếp ---------- */
.post { display: block; text-decoration: none; }
.post .media { margin-bottom: 12px; }
.post .media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.post:hover .media img { transform: scale(1.04); }
.post .cat { font-size: var(--t-small); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.post h3 { margin: 4px 0; }
.post:hover h3 { text-decoration: underline; text-decoration-color: var(--bg-mint-100); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post p { margin: 0; font-size: var(--t-small); color: var(--color-text-muted); }
.topics { display: flex; align-items: center; gap: 12px var(--g-s); flex-wrap: wrap; margin-top: var(--g-l); }
.topics > b { font-size: var(--t-small); }

/* ---------- 10 · Hỏi đáp ---------- */
.faq-lines details { border-bottom: var(--line); }
.faq-lines details:first-child { border-top: var(--line); }
.faq-lines summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--g-s); padding: var(--g-s) 0; font-size: var(--t-lead); font-weight: var(--fw-semibold); }
.faq-lines summary::-webkit-details-marker { display: none; }
.faq-lines summary::after { content: "+"; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-mint-15); transition: transform .2s ease; }
.faq-lines details[open] summary::after { content: "–"; background: var(--bg-mint-100); }
.faq-lines .answer { padding: 0 0 var(--g-s); max-width: 64ch; animation: rise .4s ease both; }
.faq-lines .answer p { margin: 0; }

/* ---------- Nguồn và chân trang ---------- */
.sources summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: var(--fw-semibold); color: var(--color-text); }
.sources[open] ol { margin-top: 12px; }
.sources li:target { background: var(--bg-mint-30); }
.site-footer .top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--g-l); }
.site-footer .top a { display: inline-block; padding-block: 3px; min-height: 24px; }
.site-footer .contact { margin-top: var(--g-s); display: grid; gap: 6px; font-size: var(--t-small); }
.site-footer .contact a { font-weight: var(--fw-semibold); }
.site-footer .legal { border-top: var(--line); margin-top: var(--g-m); padding-top: var(--g-s); font-size: var(--t-small); color: var(--color-text-muted); }
.proto-bar { display: none; position: fixed; right: 12px; top: 76px; z-index: 99; background: var(--bg-ink); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12px; gap: 12px; }
.proto-bar a { color: #fff; text-decoration: none; opacity: .7; }
.proto-bar a[aria-current] { opacity: 1; text-decoration: underline; }
.proto .proto-bar { display: flex; }

/* ---------- Chuyển động ---------- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes crowd { 0%, 30% { opacity: .95; transform: scale(1.15); } 55%, 100% { opacity: .3; transform: none; } }
@keyframes appear { 0%, 28% { opacity: 0; transform: scale(.2); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes cap1 { 0%, 32% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes cap2 { 0%, 34% { opacity: 0; } 44%, 100% { opacity: 1; } }
@keyframes knock { 0% { transform: translateY(-6px); opacity: 1; } 40% { transform: translateY(22px); } 55% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes emit { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(46px); opacity: 0; } }
@keyframes shrink { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(.78); opacity: .55; } }
@keyframes hot { 0%, 30% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes calm { 0%, 30% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes melt { 0%, 20% { opacity: 1; transform: scale(1); } 60% { opacity: 0; transform: scale(.3); } 61%, 75% { opacity: 0; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
/* Hiện dần khi cuộn: chỉ khi trình duyệt hỗ trợ, nội dung hiện sẵn nếu không */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wave-hot { opacity: 0; }
  .fig-caps .c2 { opacity: 1; }
}

/* ---------- Máy tính bảng ---------- */
@media (max-width: 1100px) {
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-item > a, .site-nav > a { padding: 12px 10px; }
}
@media (max-width: 960px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-grid; }
  .site-header.open .site-nav { display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%; background: #fff; padding: 8px var(--gutter) var(--g-m); border-bottom: var(--line); max-height: calc(100vh - 64px); overflow: auto; }
  .site-header.open .nav-item > a, .site-header.open .site-nav > a { border-radius: 0; border-bottom: var(--line); font-size: var(--t-body); }
  .subnav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 8px 12px; min-width: 0; }
  .nav-item > a svg { display: none; }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero .photo { order: -1; height: 300px; border-radius: 0; }
  .hero .txt { padding: var(--g-m) var(--gutter) 0; }
  .split, .split--75 { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr; gap: var(--g-m); }
  .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-m); }
  .site-footer .top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .top > div:first-child { grid-column: 1 / -1; }
}
/* ---------- Điện thoại ---------- */
@media (max-width: 640px) {
  .hero .photo { height: 240px; }
  .h-tools .btn { display: none; }
  .s-foot { flex-direction: column; align-items: flex-start; }
  .link { white-space: normal; }
  /* Rút chiều dài: cuộn ngang cho cơ chế, nghiên cứu và bài viết */
  .hscroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--g-s); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; }
  .hscroll > * { flex: 0 0 82%; scroll-snap-align: start; }
  .scene svg { width: 96px; height: 96px; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .pack img { max-width: 56%; }
  .topics { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
  .topics > * { flex: 0 0 auto; }
  /* Nhịp và khoảng cách gọn hơn trên điện thoại, vẫn đúng 2 nhịp và 3 bậc */
  :root { --sec: 36px; --sec-c: 52px; --g-m: 20px; --g-l: 32px; }
  .nlist li { grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; }
  .nlist li::before { width: 28px; height: 28px; }
  .hero .tags { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; max-width: none; }
  .hero .tags .tag { flex: 0 0 auto; }
  .mob-hide { display: none; }
  .site-footer .top { grid-template-columns: 1fr 1fr; gap: var(--g-m); }
}

/* ================= Bản 11: phần thêm, vẫn dùng đúng bộ token ở đầu file ================= */
/* Hero: ba cách dùng trang */
.hero .ways { list-style: none; margin: var(--g-m) 0 0; padding: 0; max-width: 520px; }
.hero .ways li { margin: 0; border-top: var(--line); }
.hero .ways li:last-child { border-bottom: var(--line); }
.hero .ways a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--g-s); padding: 12px 0; min-height: 44px; text-decoration: none; }
.hero .ways b { font-weight: var(--fw-semibold); }
.hero .ways span { grid-column: 1; font-size: var(--t-small); color: var(--color-text-muted); }
.hero .ways .arr { grid-column: 2; grid-row: 1 / span 2; transform: rotate(90deg); transition: transform .2s ease; }
.hero .ways a:hover .arr { transform: rotate(90deg) translateX(4px); }
.hero .ways a:hover b { text-decoration: underline; text-decoration-color: var(--bg-mint-100); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Danh sách dấu tích: cùng khung với danh sách đánh số */
.nlist--check li::before { content: ""; background: var(--bg-mint-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%230E0E0E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* Thói quen thứ 6: phần bổ sung, vòng số viền thay vì nền đặc */
.nlist li.extra::before { background: #fff; box-shadow: inset 0 0 0 2px var(--bg-mint-100); }
.nlist li.extra .tag { min-height: 28px; padding: 0 10px; margin-bottom: 6px; }
.nlist .link { min-height: 36px; margin-top: 4px; }
/* Thẻ vấn đề thường gặp */
.issue h3 { margin-bottom: 12px; }
.issue p { margin: 0 0 12px; }
.issue p b { display: block; font-weight: var(--fw-semibold); }
.issue .link { margin-top: auto; }
.issue { display: flex; flex-direction: column; }
/* Hiểu lầm: mỗi dòng là điều đúng, hiểu lầm, giải thích */
.myths { border-top: var(--line); }
.myth { display: grid; grid-template-columns: 36px minmax(0, 5fr) minmax(0, 7fr); gap: var(--g-s) var(--g-l); padding: var(--g-m) 0; border-bottom: var(--line); }
.myth::before { counter-increment: m; content: counter(m); width: 36px; height: 36px; border-radius: 50%; background: var(--bg-mint-100); display: grid; place-items: center; font-size: var(--t-small); font-weight: var(--fw-semibold); }
.myths { counter-reset: m; }
.myth h3 { margin: 0; }
.myth .wrong { margin: 8px 0 0; font-size: var(--t-small); color: var(--color-text-muted); }
.myth .why p { margin: 0; }
/* Khi nào cần đi khám */
.go { margin-top: var(--g-l); }
.go p { margin: 0; }
/* Trên khối mint */
.s--mint .note { color: var(--bg-ink); border-top-color: var(--bg-mint-75); }
.s--mint .row2 { border-top-color: var(--bg-mint-75); }
/* Lưới 2 cột cho thẻ có nhiều chữ: vấn đề thường gặp, điểm khác của BioGaia */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-m); }
/* Bốn điểm khác của BioGaia */
.facts4 .box h3 { margin-bottom: 8px; }
.facts4 .box p { margin: 0; }
.s-head .lead + .lead { margin-top: 8px; }

@media (max-width: 960px) {
  .myth { grid-template-columns: 36px minmax(0, 1fr); }
  .myth .why { grid-column: 2; }
}
@media (max-width: 640px) {
  .grid2 { grid-template-columns: 1fr; }
  .grid2.hscroll { display: flex; }
  .media--tall { aspect-ratio: 16 / 10; }
  .media--tall img { object-position: 50% 25%; }
  .myth { grid-template-columns: 28px minmax(0, 1fr); gap: 8px 12px; }
  .myth::before { width: 28px; height: 28px; }
}

/* Trang chủ bản 13 · 03/10/2026 · nạp sau tokens.css và home-v11.css trong home-v13.bundle.css.
   Giữ 6 khối của bản 12. Cỡ chữ và khoảng thở theo biogaiagroup.com (cùng font Oktah Neue), đo ở laptop 1366px ngày 03/10:
   H1 64 chỉ ở hero, H2 34, thân 16/24, số lớn 80 đậm, đệm trên mỗi khối 100px. Mỗi khối một ý, một ảnh lớn, một nút. */

:root {
  --t-num:   clamp(3rem, 1.5rem + 4vw, 5rem);            /* 80px ở 1366 */
  --t-h1:    clamp(2.125rem, 1.4rem + 2.2vw, 3.5rem);    /* 52px ở 1366, 34px điện thoại */
  --t-h2:    clamp(1.625rem, 1.2rem + 1.1vw, 2.125rem);  /* 34px ở 1366, 26px điện thoại */
  --t-lead:  clamp(1.125rem, 1rem + .3vw, 1.25rem);      /* 20px, mỗi khối tối đa một đoạn */
  --t-card:  clamp(1.25rem, 1rem + .8vw, 1.5rem);        /* tiêu đề thẻ 24px */
  --t-body:  1rem;
  --sec:     clamp(56px, 4vw + 40px, 100px);
  --sec-c:   clamp(56px, 4vw + 40px, 100px);
}
body { line-height: 1.5; }
h1 { max-width: 24ch; text-wrap: balance; }   /* 13/10: nới từ 14ch, tiêu đề tiếng Việt dạng câu dài nên 14ch ép xuống 3 tới 4 dòng */
h2 { max-width: 34ch; text-wrap: balance; }   /* 13/10: nới từ 22ch, cùng lý do, balance để các dòng dài gần bằng nhau */
h3 { text-wrap: balance; }
.lead, .s-head p, .hero .lead { text-wrap: pretty; }   /* tránh dòng cuối còn 1 chữ */
.lead { color: var(--color-text); }
.s-head { margin-bottom: var(--g-m); }

/* Menu một tầng, mục đang xem */
.site-nav > a[aria-current="page"] { background: var(--bg-mint-15); }

/* Nút tròn đen có mũi tên: dùng cho thẻ chủ đề và thẻ bài, như thẻ tin của biogaiagroup.com */
.rbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-ink); color: #fff; flex: 0 0 auto; transition: transform .2s ease; }
.rbtn .arr { width: 18px; height: 18px; }
a:hover > .rbtn, .rbtn:hover, a:hover .rbtn { transform: translateX(3px); }

/* ---------- 1 · Hero ---------- */
.hero .eyebrow { margin: 0 0 12px; font-size: var(--t-small); font-weight: var(--fw-semibold); letter-spacing: .02em; color: var(--color-text-muted); }
.hero h1 { margin-bottom: var(--g-s); }
.hero .lead { max-width: 40ch; }
.hero .ways--go .arr { transform: none; }
.hero .ways--go a:hover .arr { transform: translateX(4px); }
.hero .ways a { padding: 14px 0; }

/* ---------- 2 · Ai mang BioGaia Prodentis tới Việt Nam: ảnh tràn lề, vòng tròn chữ, hàng số ---------- */
.s--who { padding-bottom: 0; }
.circle-photo { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: flex-end; padding: var(--g-l) max(var(--gutter), calc((100vw - var(--container)) / 2)); overflow: hidden; }
.circle-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; }
.circle { position: relative; width: 460px; aspect-ratio: 1; border-radius: 50%; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 64px; }
.circle h2 { font-size: var(--t-card); margin: 0 0 12px; max-width: 18ch; }
.circle p { margin: 0 0 var(--g-s); max-width: 30ch; }
.who-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-m) var(--g-l); padding-block: var(--sec); }
.who-stats .num { display: flex; align-items: baseline; font-size: var(--t-num); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.who-stats .num small { font-size: var(--t-lead); font-weight: var(--fw-semibold); margin-left: 8px; letter-spacing: 0; }
.who-stats p { margin: 12px 0 0; max-width: 24ch; }

/* ---------- 3 · Men vi sinh có phải chỉ cho tiêu hóa: chia đôi, nửa mint có chữ, nửa hình tràn lề ---------- */
.s--duo { padding: 0; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 600px; }
.duo-txt { background: var(--bg-mint-100); display: flex; flex-direction: column; justify-content: center; padding: var(--sec) var(--g-l) var(--sec) max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.duo-txt h2 { margin: 0 0 var(--g-s); }
.duo-txt .lead { margin: 0 0 var(--g-m); max-width: 44ch; color: var(--bg-ink); }
.duo-txt .big { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--g-m); font-size: var(--t-num); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: -.02em; }
.duo-txt .big small { font-size: var(--t-lead); letter-spacing: 0; }
.cta-q { margin: 0 0 var(--g-s); font-size: var(--t-lead); font-weight: var(--fw-semibold); line-height: 1.35; max-width: 34ch; }
.duo-fig { background: var(--bg-mint-15); display: flex; align-items: center; justify-content: center; padding: var(--g-l); }
.duo-fig .fig { width: 100%; max-width: 560px; }
.duo-fig .fig-caps { font-size: var(--t-small); }

/* ---------- 4 · Hai chủ đề: thẻ ảnh lớn, 3 câu hỏi, nút tròn ---------- */
.topic { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.topic .media { border-radius: 0; aspect-ratio: 16 / 9; }
.topic .media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.topic:hover .media img { transform: scale(1.03); }
.topic img[src*="portrait"] { object-position: 50% 40%; }
.topic .body { padding: var(--g-m); display: flex; flex-direction: column; flex: 1; }
.topic .head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--g-s); text-decoration: none; }
.topic h3 { margin: 0 0 8px; font-size: var(--t-card); line-height: 1.2; }
.topic .body > p { margin: 0 0 var(--g-s); }
.qs { list-style: none; margin: 0; padding: 0; }
.qs li { margin: 0; border-top: 1px solid var(--bg-mint-50); }
.qs a { display: grid; grid-template-columns: 1fr auto; gap: var(--g-s); align-items: center; padding: 10px 0; min-height: 44px; text-decoration: none; }
.qs a:hover span { text-decoration: underline; text-decoration-color: var(--bg-mint-100); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.qs .arr { width: 16px; height: 16px; }

/* ---------- 5 · Sản phẩm ---------- */
.s--product .s-head .lead { max-width: 52ch; }

/* ---------- 6 · Bài viết và hỏi đáp ---------- */
.post { position: relative; }
.post h3 { font-size: var(--t-lead); padding-right: 56px; }
.post .rbtn { position: absolute; right: 0; bottom: 0; }
.post p { padding-right: 56px; }
.faq-wrap .s-head { margin-bottom: var(--g-m); }
.faq-lines summary { font-size: var(--t-body); }
.stat p sup.ref { line-height: 0; }

@media (max-width: 960px) {
  .duo { grid-template-columns: 1fr; min-height: 0; }
  .duo-txt { padding: var(--sec) var(--gutter); }
  .duo-fig { padding: var(--g-m) var(--gutter); }
  .who-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .circle-photo { min-height: 0; flex-direction: column; align-items: stretch; padding: 0; }
  .circle-photo > img { position: static; height: 300px; }
  .circle { width: auto; aspect-ratio: auto; border-radius: 0; padding: var(--g-m) var(--gutter) 0; align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
  :root { --sec: 56px; --sec-c: 56px; }
  .who-stats .num { font-size: 3rem; }
  .duo-txt .big { font-size: 3rem; }
  .circle-photo > img { height: 240px; }
}
.faq-lines .answer { max-width: 76ch; }

/* Hiện dần khi cuộn: bắt đầu từ độ đậm 85% để chữ luôn đủ tương phản, kể cả lúc đang chạy */
@keyframes rise-soft { from { opacity: .85; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation-name: rise-soft; }
  }
}
/* Số nguồn trên nền mint: chữ đen cho đủ tương phản */
.s--mint sup.ref a, .duo-txt sup.ref a, .habit6 sup.ref a { color: var(--bg-ink); }

/* Trang chủ đề bản 1 · 03/10/2026 · nạp sau tokens.css, home-v11.css, home-v13.css.
   Dùng chung cho trang Chăm sóc răng miệng và trang Men vi sinh răng miệng. Cùng cỡ chữ, khoảng thở và element với trang chủ bản 13. */

/* Đường dẫn trang */
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--g-s); font-size: var(--t-small); color: var(--color-text-muted); }
.crumbs a { color: var(--color-text-muted); }
.crumbs span[aria-current] { color: var(--color-text); font-weight: var(--fw-semibold); }

/* Hero trang chủ đề: thấp hơn trang chủ, có nút nhảy tới từng phần */
.hero--topic { min-height: min(68vh, 600px); }
.hero--topic h1 { max-width: 20ch; font-size: clamp(2rem, 1.3rem + 1.9vw, 3rem); }
.hero--topic .photo img { object-position: 50% 45%; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--g-m) 0 0; padding: 0; list-style: none; }
.jump li { margin: 0; }
.jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--bg-mint-15); font-size: var(--t-small); font-weight: var(--fw-semibold); text-decoration: none; }
.jump a:hover { background: var(--bg-mint-30); }

/* Khối răng miệng khỏe: số lớn bên trái, danh sách dấu tích bên phải */
.bigstat { font-size: var(--t-num); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: -.02em; margin: 0 0 12px; }
.bigstat small { font-size: var(--t-lead); letter-spacing: 0; margin-left: 4px; }
.split--stat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.nlist--check li { padding: 14px 0; }

/* Bệnh thường gặp: thẻ trắng trên nền mint 15 */
.s--soft .box { background: #fff; }
.issue h3 { font-size: var(--t-card); }
.issue p { margin: 0 0 10px; }
.issue p b { display: inline; margin-right: 4px; }
.issue .link { margin-top: auto; }
.quizrow { margin-top: var(--g-l); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g-l); align-items: start; }
.quizrow h3 { font-size: var(--t-card); margin: 0 0 8px; }
.quizrow p { margin: 0; }
.quiz { background: #fff; }

/* Hiểu lầm: mỗi dòng mở ra xem giải thích */
.myth-acc details { border-bottom: var(--line); }
.myth-acc details:first-child { border-top: var(--line); }
.myth-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 36px 1fr 32px; gap: var(--g-s); align-items: center; padding: var(--g-s) 0; }
.myth-acc summary::-webkit-details-marker { display: none; }
.myth-acc summary::before { counter-increment: m; content: counter(m); width: 36px; height: 36px; border-radius: 50%; background: var(--bg-mint-100); display: grid; place-items: center; font-size: var(--t-small); font-weight: var(--fw-semibold); }
.myth-acc summary::after { content: "+"; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-mint-15); }
.myth-acc details[open] summary::after { content: "–"; background: var(--bg-mint-100); }
.myth-acc { counter-reset: m; }
.myth-acc h3 { margin: 0; font-size: var(--t-body); font-weight: var(--fw-semibold); line-height: 1.4; }
.myth-acc .answer { padding: 0 0 var(--g-s) calc(36px + var(--g-s)); max-width: 76ch; }
.myth-acc .wrong { margin: 0 0 6px; font-size: var(--t-small); color: var(--color-text-muted); }
.myth-acc .answer p:last-child { margin: 0; }

/* Thói quen: ảnh và danh sách, rồi dải mint cho thói quen thứ 6 */
.habit6 { margin-top: var(--g-l); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g-l); align-items: center; background: var(--bg-mint-100); border-radius: var(--r); padding: var(--g-l); }
.habit6 h3 { font-size: var(--t-card); margin: 0 0 8px; }
.habit6 p { margin: 0; }
.habit6 .cta-q { margin: 0 0 var(--g-s); }

/* Khi nào đi khám: 4 dấu hiệu trong khung viền đen */
.go4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-m); border: 2px solid var(--bg-ink); border-radius: var(--r); padding: var(--g-m); margin: 0; list-style: none; }
.go4 li { margin: 0; }
.go4 b { display: block; font-size: var(--t-body); margin-bottom: 4px; }
.go4 span { font-size: var(--t-small); color: var(--color-text-muted); }
.go-note { margin: var(--g-s) 0 0; font-size: var(--t-small); color: var(--color-text-muted); }

@media (max-width: 960px) {
  .split--stat, .quizrow, .habit6 { grid-template-columns: 1fr; }
  .go4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero--topic .photo { height: 260px; }
}
@media (max-width: 640px) {
  .go4 { grid-template-columns: 1fr; }
  .habit6 { padding: var(--g-m); }
  .myth-acc summary { grid-template-columns: 28px 1fr 28px; gap: 12px; }
  .myth-acc summary::before { width: 28px; height: 28px; }
  .myth-acc .answer { padding-left: 40px; }
  .bigstat { font-size: 3rem; }
}

/* Bộ element v2 · 03/10/2026 · nạp sau tokens.css, home-v11.css, home-v13.css, topic-v1.css.
   Các element dựng lại từ bản 5B và bản 7 theo khung chữ, màu và khoảng thở của trang chủ bản 13.
   Từ 03/10 khuya áp phương án B (anh Lộc chọn): phần cuối file, mục "Phương án B", ghi đè góc, nút, link, nền dải của các CSS nạp trước.
   Mỗi element có mã E.. khớp với Guideline web v2.0 mục 5. Trang thật gắn data-el="E.." vào thẻ section để script soát nhận ra. */

/* ---------- E3 · Hình vẽ có chú thích (từ hero bản 7) ---------- */
.diagram { margin: 0; }
.diagram .panel { background: var(--bg-mint-15); border-radius: var(--r); padding: var(--g-m); }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .lbl { font: 600 15px/1.2 var(--font-sans); fill: var(--bg-ink); }
.diagram .lbl2 { font: 400 13px/1.2 var(--font-sans); fill: #4A4A49; }
.diagram .key { display: flex; gap: var(--g-m); margin: 12px 0 0; font-size: var(--t-small); }
.diagram .key i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.diagram .k-good { background: var(--bg-mint-100); box-shadow: inset 0 0 0 1.2px var(--bg-ink); }
.diagram .k-bad { background: var(--bg-grey-65); opacity: .6; }
.diagram figcaption { margin-top: 8px; font-size: var(--t-small); color: var(--color-text-muted); }
/* Biến thể có nút chuyển trạng thái: dùng cho sơ đồ nướu khỏe, viêm lợi, viêm nha chu */
.states { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: #fff; margin-bottom: var(--g-s); }
.states button { font: inherit; font-size: var(--t-small); font-weight: var(--fw-semibold); border: 0; background: transparent; padding: 10px 16px; border-radius: var(--radius-pill); cursor: pointer; min-height: 40px; }
.states button[aria-pressed="true"] { background: var(--bg-ink); color: #fff; }

/* ---------- E7 · So sánh hai trạng thái (từ hệ vi sinh bản 7) ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-m); }
.compare figure { margin: 0; }
.compare svg { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto var(--g-s); }
.compare b { display: block; margin-bottom: 4px; }
.compare p { margin: 0; font-size: var(--t-small); }

/* ---------- E11 · Thẻ nghiên cứu có bộ lọc (từ thư viện nghiên cứu bản 7) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--g-m); }
.filters button { font: inherit; font-size: var(--t-small); font-weight: var(--fw-semibold); min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--bg-ink); background: #fff; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--bg-ink); color: #fff; }
.study2 { display: flex; flex-direction: column; border-top: 3px solid var(--bg-ink); background: #fff; padding: var(--g-s) 0 0; }
.study2 .tag { align-self: flex-start; min-height: 28px; padding: 0 10px; background: var(--bg-mint-15); border: 0; }
.study2 h3 { font-size: var(--t-body); font-weight: var(--fw-semibold); margin: 12px 0 4px; }
.study2 .cite { margin: 0 0 12px; font-size: var(--t-small); color: var(--color-text-muted); }
.study2 dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.study2 dt { font-size: 12px; color: var(--color-text-muted); }
.study2 dd { margin: 0; font-size: var(--t-small); font-weight: var(--fw-semibold); }
.study2 .res { margin: 0 0 12px; font-size: var(--t-small); }
.study2 .res b { display: block; font-size: 12px; color: var(--color-text-muted); font-weight: var(--fw-medium); }
.study2 .doi { margin-top: auto; font-size: var(--t-small); word-break: break-all; }

/* ---------- E13 · Dải bước có biểu tượng, một bước nổi bật ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g-s); counter-reset: st; }
.steps li { margin: 0; counter-increment: st; background: var(--bg-mint-15); border-radius: var(--r); padding: var(--g-s); display: flex; flex-direction: column; gap: 10px; }
.steps .ic { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.steps .ic svg { width: 30px; height: 30px; }
.steps li::before { content: "0" counter(st); font-size: var(--t-small); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.steps b { font-size: var(--t-body); line-height: 1.3; }
.steps span { font-size: var(--t-small); color: var(--color-text-muted); }
.step-hero { margin-top: var(--g-s); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-m); align-items: center; background: var(--bg-mint-100); border-radius: var(--r); padding: var(--g-m) var(--g-l); }
.step-hero .no { font-size: var(--t-num); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: -.02em; }
.step-hero h3 { font-size: var(--t-h2); margin: 0 0 8px; }
.step-hero p { margin: 0; max-width: 52ch; }
.step-hero .ic { width: 120px; height: 120px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.step-hero .ic svg { width: 72px; height: 72px; }
.step-hero sup.ref a { color: var(--bg-ink); }

/* ---------- E20 · Ảnh tràn lề có thẻ chữ đè (từ bản 5B) ---------- */
.photo-card { position: relative; min-height: 560px; display: grid; align-items: end; overflow: hidden; }
.photo-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.photo-card .container { position: relative; z-index: 1; padding-block: var(--g-l); }
.photo-card .card { background: #fff; border-radius: var(--r); padding: var(--g-m); max-width: 460px; box-shadow: 0 30px 60px -30px rgba(14, 14, 14, .4); }
.photo-card .card h2 { font-size: var(--t-h2); margin: 0 0 12px; }
.photo-card .card p { margin: 0 0 var(--g-s); }

/* ---------- E21 · Thuật ngữ bấm xem giải thích (từ bản 7) ---------- */
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; text-decoration: underline dotted var(--bg-ink); text-underline-offset: 4px; }
.term-def { display: block; margin: 8px 0; padding: 12px var(--g-s); background: var(--bg-mint-15); border-radius: var(--radius-sm); font-size: var(--t-small); }
.term-def[hidden] { display: none; }

/* ---------- E22 · Bảng chủ đề kèm danh sách bài (từ bản 7) ---------- */
.taxo { border-top: var(--line); }
.taxo .row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--g-m); padding: var(--g-m) 0; border-bottom: var(--line); }
.taxo h3 { font-size: var(--t-card); margin: 0; }
.taxo p { margin: 0; font-size: var(--t-small); color: var(--color-text-muted); }
.taxo ul { list-style: none; margin: 0; padding: 0; }
.taxo li { margin: 0 0 6px; }
.taxo li a { font-size: var(--t-small); }

/* ---------- E16, E17 · biểu tượng nhỏ cho thẻ bệnh và khung khi nào đi khám ---------- */
.ic-sm { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-mint-15); display: grid; place-items: center; margin-bottom: 12px; }
.s--soft .ic-sm { background: var(--bg-mint-30); }
.ic-sm svg { width: 26px; height: 26px; }

/* ---------- Phương án B · anh Lộc chọn 03/10/2026 ----------
   Theo chi tiết đo trên biogaiagroup.com và biogaia.com ở khổ 1366px: ảnh và thẻ góc vuông, nút chữ nhật bo 4px cao 48px,
   link chữ đậm không gạch chân, dải nền xám rất nhạt #F1F3F9, thẻ trên nền trắng #F9F9FA.
   Mint giữ làm điểm nhấn (số thứ tự, dấu tích, hình vẽ) và 1 khối mint 100 mỗi trang theo Brand Manual Prodentis.
   Biến --bg-mint-15 được các CSS cũ dùng cho dải nền, nên đổi giá trị của biến sang xám #F1F3F9 thay vì sửa từng chỗ. */
:root {
  --r: 0px;
  --radius-sm: 4px;
  --bg-band: #F1F3F9;              /* dải nền xám lạnh rất nhạt của biogaiagroup.com */
  --bg-card: #F9F9FA;              /* thẻ trên nền trắng, như thẻ tin của group */
  --bg-mint-15: var(--bg-band);
}
/* Nút chữ nhật, bo 4px, cao 48px, chữ 600 */
.btn { border-radius: 4px; min-height: 48px; font-weight: 600; }
.btn--secondary { border-color: var(--bg-ink); }
/* Link chữ đậm màu đen, không gạch chân, có mũi tên. Gạch chân khi rê chuột */
.link { border-bottom: 0; font-weight: 700; padding-bottom: 0; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Nhãn, nút nhảy, nút lọc, nút chuyển trạng thái, menu: bo 4px thay bo tròn */
.tag, a.tag, .jump a, .filters button, .states, .states button, .site-nav > a, .nav-item > a { border-radius: 4px; }
/* Thẻ trên nền trắng: xám rất nhạt. Thẻ trên dải nền xám: trắng */
.box, .topic, .issue { background: var(--bg-card); }
.s--soft .box, .s--soft .quiz { background: #fff; }
/* Ảnh hero tràn sát mép, hình trong khối chia đôi và hình vẽ: góc vuông */
.hero .photo { border-radius: 0; }
.fig .panel, .diagram .panel { border-radius: 0; }

@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-hero { grid-template-columns: 1fr; padding: var(--g-m); }
  .step-hero .ic { display: none; }
  .taxo .row { grid-template-columns: 1fr; gap: 8px; }
  .photo-card { min-height: 0; display: block; }
  .photo-card > img { position: relative; height: 300px; }
  .photo-card .container { padding-block: 0 var(--g-m); margin-top: -48px; }
}
@media (max-width: 640px) {
  .compare { grid-template-columns: 1fr 1fr; gap: var(--g-s); }
  .study2 dl { grid-template-columns: 1fr 1fr; }
}

/* Giọng A · nha sĩ tại ghế khám · 05/10. E26 Đọc nhanh, E27 Nhớ một câu, E28 Ít ai để ý. Cùng một kiểu: kẻ trái mint, nhãn nhỏ */
.say { position: relative; margin: var(--g-m) 0 0; padding: 14px 18px 14px 22px; border-left: 3px solid var(--bg-mint-100); background: var(--bg-card); }
.s--soft .say, .s--soft .quick { background: #fff; }
.say-lbl { display: block; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.say--key { font-size: 20px; font-weight: var(--fw-semibold); line-height: 1.35; max-width: 44ch; }
.say--aside p { margin: 0; font-size: var(--t-body); max-width: 70ch; }
.quick { margin: var(--g-m) 0 0; padding: 14px 18px; border-left: 3px solid var(--bg-mint-100); background: var(--bg-band); }
.quick ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.quick li { margin: 0; }
.quick a { display: flex; gap: 10px; align-items: baseline; font-weight: var(--fw-semibold); text-decoration: none; color: inherit; font-size: var(--t-body); line-height: 1.4; }
.quick a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bg-mint-100); flex: 0 0 auto; transform: translateY(-1px); }
.quick a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero .quick { margin-top: var(--g-m); }
@media (max-width: 640px) { .say--key { font-size: 18px; } .say, .quick { padding: 12px 14px 12px 16px; } }

/* Trang chủ đề bản 2 · 03/10/2026 · nạp sau elements-v2.css (phương án B).
   Chỉ thêm bố cục cho các biến thể element dùng ở trang Chăm sóc răng miệng bản 2, không đổi góc, nút, link, màu của phương án B. */

/* E3 · sơ đồ nướu 3 trạng thái: hình bên trái, chú thích chữ bên phải đổi theo nút */
.gum-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.gum-fig svg [data-st] { display: none; }
.gum-fig[data-state="khoe"] svg [data-st="khoe"],
.gum-fig[data-state="viem"] svg [data-st="viem"],
.gum-fig[data-state="nhachu"] svg [data-st="nhachu"] { display: inline; }
.state-note[hidden] { display: none; }
.state-note h3 { font-size: var(--t-card); margin: 0 0 var(--g-s); }
.state-note ul { list-style: none; margin: 0; padding: 0; }
.state-note li { position: relative; margin: 0; padding: 10px 0 10px 28px; }
.state-note li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-mint-100); box-shadow: inset 0 0 0 1.2px var(--bg-ink); }
.state-note--bad li::before { background: var(--bg-grey-65); box-shadow: none; }
.diagram .lbl3 { font: 600 13px/1.2 var(--font-sans); fill: var(--bg-ink); }

/* E16 · số lớn bên trái, 4 thẻ có biểu tượng bên phải */
.issue-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.issue-split .issue-lead > p { margin: 0; max-width: 28ch; }
.issue-split .s-head { margin-bottom: var(--g-m); }
.issue { display: flex; flex-direction: column; }

/* E14 · tự kiểm có hình gương */
.quiz-fig { margin: var(--g-m) 0 0; }
.quiz-fig svg { width: 200px; height: auto; display: block; }
.quizrow { margin-top: 0; }
.quizrow h2 { margin: 0 0 12px; }

/* E15 · ảnh người bên cạnh danh sách hiểu lầm */
.myth-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }

/* E13 · link nhỏ trong bước, nút trong thẻ bước 06 */
.steps .link { min-height: 32px; font-size: var(--t-small); margin-top: auto; }
.step-hero .cta-q { margin: var(--g-s) 0; font-weight: var(--fw-semibold); }

/* E17 · ảnh bên trái, khung 4 dấu hiệu 2 cột bên phải */
.kham-split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.go4--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; }
.go4 .ic-sm { margin-bottom: 10px; }

/* E18 · cột trái có H2, đoạn mở và hình vẽ bàn chải 45 độ */
.faq-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.faq-split .s-head { margin-bottom: var(--g-m); }
.faq-fig { margin: 0; }
.faq-fig svg { width: 100%; max-width: 300px; height: auto; display: block; background: var(--bg-band); }
.faq-fig figcaption { margin-top: 8px; font-size: var(--t-small); color: var(--color-text-muted); }
.faq-split .faq-lines .link { min-height: 32px; }

@media (max-width: 960px) {
  .gum-split, .issue-split, .myth-split, .kham-split, .faq-split { grid-template-columns: 1fr; }
  .myth-split .media { max-width: 360px; }
  .steps li .link { font-size: var(--t-small); }
}
@media (max-width: 640px) {
  .go4--2 { gap: var(--g-s); padding: var(--g-s); }
  .quiz-fig svg { width: 150px; }
  .faq-fig svg { max-width: 220px; }
  /* Chữ chú thích trong sơ đồ: hình thu còn khoảng 300px nên tăng cỡ chữ theo đơn vị của hình */
  .gum-fig .lbl { font-size: 22px; }
  .gum-fig .lbl3 { font-size: 19px; }
  .gum-fig .lbl2 { font-size: 17px; }
}

/* Trang chủ đề bản 3 · 04/10/2026 · nạp sau topic-v2.css.
   Thêm bố cục cho các biến thể element ở trang Men vi sinh răng miệng. Không đổi góc, nút, link, màu của phương án B. */

/* E7 · hai cột so sánh men vi sinh và men tiêu hóa, mỗi cột có hình và 3 dòng */
.compare--wide { gap: var(--g-l); }
.compare--wide figure { background: #fff; padding: var(--g-m); }
.compare--wide svg { max-width: 200px; }
.compare--wide h3 { font-size: var(--t-card); text-align: center; margin: 0 0 var(--g-s); }
.cmp-dl { margin: 0; display: grid; gap: 0; }
.cmp-dl div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-top: var(--line); }
.cmp-dl dt { font-size: var(--t-small); font-weight: var(--fw-semibold); }
.cmp-dl dd { margin: 0; font-size: var(--t-small); }

/* E3 · hệ vi sinh cân bằng và mất cân bằng, 2 trạng thái */
.bal-fig svg [data-st] { display: none; }
.bal-fig[data-state="can"] svg [data-st="can"],
.bal-fig[data-state="lech"] svg [data-st="lech"] { display: inline; }
.bal-note .bigstat { margin-bottom: 4px; }
.bal-note .bigstat + p { margin: 0 0 var(--g-m); font-weight: var(--fw-semibold); }

/* E8 · ba cảnh cơ chế trên dải xám: thẻ trắng */
.s--soft .scene { background: #fff; padding: var(--g-m); }
.scene .note { margin-top: 12px; padding-top: 12px; border-top: var(--line); font-size: var(--t-small); }

/* E11 · số lớn cạnh đầu khối, bộ lọc 3 nhóm người */
.study-head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--g-l); align-items: end; margin-bottom: var(--g-m); }
.study-head .s-head { margin-bottom: 0; }
.study-head .stat p:last-child { margin: 0; font-size: var(--t-small); }
.study2[hidden] { display: none; }
.study2 h3 { margin-top: 0; }
.study2 .cite a { font-weight: var(--fw-regular); color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.study2 .res { margin: 0; padding-top: 12px; border-top: var(--line); }
.study-more { margin: var(--g-m) 0 0; }

/* E13 · 4 bước */
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s--soft .steps li { background: #fff; }

/* E19 trên khối chia đôi mint 100 */
.s--duo.s--product .duo-txt h2 { max-width: 18ch; }
.s--duo.s--product .facts { margin-bottom: 0; }
.s--duo.s--product .facts div { border-top-color: rgba(14, 14, 14, .18); }
.s--duo.s--product .tag { background: #fff; border: 0; }
.s--duo.s--product .duo-fig .pack img { max-width: 440px; }
.s--duo.s--product .warn { margin-top: var(--g-s); }

/* E18 · hình vi khuẩn dạng que ở cột trái */
.faq-fig--rod svg { padding: var(--g-s); }

@media (max-width: 960px) {
  .study-head { grid-template-columns: 1fr; gap: var(--g-s); }
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .compare--wide { grid-template-columns: 1fr; gap: var(--g-s); }
  .compare--wide svg { max-width: 130px; }
  .cmp-dl div { grid-template-columns: 1fr; gap: 2px; }
  .bal-fig .lbl, .probe-fig .lbl { font-size: 22px; }
  .probe-fig .lbl3 { font-size: 19px; }
  .probe-fig .lbl2 { font-size: 17px; }
  .s--duo.s--product .duo-fig .pack img { max-width: 70%; }
}

/* E18 trên dải xám: nền hình trắng */
.s--soft .faq-fig svg { background: #fff; }

/* Trang Nghiên cứu · 04/10 */
/* E4 trong một khối có đầu khối: bỏ đệm riêng của hàng số */
.who-stats--in { padding-block: 0; }
/* E15 dùng cho thuật ngữ: tiêu đề ngắn, không dòng "hiểu lầm" */
.terms summary h3 { font-size: var(--t-body); }
.terms .answer p { margin: 0; }
/* E16 dùng cho tổng quan: dòng tác giả nhỏ dưới tiêu đề */
.issue .cite-sm { margin: -6px 0 10px; font-size: var(--t-small); color: var(--color-text-muted); }
.study2 .ic-sm { margin-bottom: 10px; }
.s--soft .study2 { padding: var(--g-s); }

/* Trang BioGaia Prodentis · 05/10 */
.hero--product .photo--pack { background: var(--bg-band); }
.hero--product .photo--pack img { object-fit: contain; padding: var(--g-l); filter: drop-shadow(0 24px 32px rgba(14, 14, 14, .18)); }
.hero-tag { margin: var(--g-s) 0 0; }
.hero-tag .tag { background: var(--bg-band); border: 0; }
.go-note.warn { margin-top: var(--g-m); font-weight: var(--fw-semibold); }
#thanh-phan .facts { margin-top: 0; }
@media (max-width: 960px) { .hero--product .photo--pack img { padding: var(--g-m); } }
/* E6 có ảnh chụp thay hình vẽ: ảnh phủ kín nửa khối */
.duo-fig--photo { padding: 0; position: relative; min-height: 420px; }
.duo-fig--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 960px) { .duo-fig--photo { min-height: 320px; } }

/* Trang Về MTC Pharma · 05/10: Happy Gaia phóng to, cắt ở mép, không xoay, nền xám */
.hero--about .photo--gaia { background: var(--bg-band); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero--about .gaia { width: 135%; max-width: none; height: auto; fill: var(--bg-mint-100); transform: translateX(8%); }

/* E23 · Biểu mẫu đặt hàng, liên hệ · 05/10 */
.order-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-s) var(--g-m); padding: var(--g-m); }
.f-row { display: flex; flex-direction: column; gap: 6px; }
.f-row--wide { grid-column: 1 / -1; }
.f-row label { font-size: var(--t-small); font-weight: var(--fw-semibold); }
.f-row input, .f-row select, .f-row textarea { font: inherit; font-size: 16px; min-height: 48px; padding: 10px 12px; border: 1.5px solid #B9BCC4; border-radius: 4px; background: #fff; color: var(--bg-ink); }
.f-row textarea { min-height: 96px; resize: vertical; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: 2px solid var(--bg-ink); outline-offset: 1px; border-color: var(--bg-ink); }
.f-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-small); }
.f-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--bg-ink); flex: 0 0 auto; }
.f-check a { font-weight: var(--fw-semibold); }
.f-msg { margin: 0; font-size: var(--t-small); min-height: 1.4em; }
.f-msg[data-state="err"] { color: #B3261E; }
.f-msg[data-state="ok"] { font-weight: var(--fw-semibold); }
@media (max-width: 640px) { .order-form { grid-template-columns: 1fr; padding: var(--g-s); } }

/* Trang Hỏi đáp · 05/10 */
.hero--faq .photo--q { background: var(--bg-band); display: flex; align-items: center; justify-content: center; }
.hero--faq .photo--q svg { width: 60%; max-width: 340px; height: auto; position: static; }
.faq-search { margin-top: var(--g-m); max-width: 520px; }
.faq-search input { width: 100%; font: inherit; font-size: 16px; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--bg-ink); border-radius: 4px; }
.faq-search .f-msg { margin-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.taxo .row[hidden], details.qa[hidden] { display: none; }
.qa-list details.qa { border-bottom: var(--line); }
.qa-list details.qa summary { cursor: pointer; padding: 14px 32px 14px 0; font-weight: var(--fw-semibold); list-style: none; position: relative; }
.qa-list details.qa summary::-webkit-details-marker { display: none; }
.qa-list details.qa summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-weight: var(--fw-semibold); }
.qa-list details.qa[open] summary::after { content: "–"; }
.qa-list .answer p { margin: 0 0 10px; font-size: var(--t-small); }
#hoi-them .duo-fig svg { width: 70%; max-width: 320px; height: auto; }
.taxo--qa .row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.taxo--qa .ic-sm { margin-bottom: 10px; }
.taxo--qa h3 { margin-bottom: 6px; }
@media (max-width: 960px) { .taxo--qa .row { grid-template-columns: 1fr; } }

/* Trang Liên hệ, Chính sách bảo mật · 05/10 */
.hero--faq .facts { margin-top: var(--g-m); max-width: 520px; }
.draft-note { display: inline-block; margin: var(--g-s) 0 0; padding: 6px 10px; background: #FFF4D6; font-size: var(--t-small); font-weight: var(--fw-semibold); }
.pol-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.pol-toc { position: sticky; top: 96px; align-self: start; }
.pol-toc .toc-h { font-weight: var(--fw-semibold); margin: 10px 0 8px; }
.toc { margin: 0; padding-left: 20px; font-size: var(--t-small); }
.toc li { margin: 0 0 8px; }
.toc a { font-weight: var(--fw-regular); }
.pol { padding-bottom: var(--g-m); }
.pol + .pol { border-top: var(--line); padding-top: var(--g-m); }
.pol h2 { font-size: var(--t-card); margin: 0 0 12px; }
.pol ul { padding-left: 20px; margin: 0 0 12px; }
.pol li { margin: 0 0 6px; }
@media (max-width: 960px) { .pol-split { grid-template-columns: 1fr; } .pol-toc { position: static; } }

/* Bản 3 sau review · 05/10 */
/* E25 · kết quả theo nhóm người: hàng có biểu tượng, nhãn 3 mức, 1 đoạn, link */
.grp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-m); }
.grp { display: grid; grid-template-columns: 44px 1fr; gap: var(--g-s); align-items: start; }
.grp h3 { font-size: var(--t-card); margin: 0 0 8px; }
.grp p { margin: 0 0 10px; font-size: var(--t-small); }
.grp .link { font-size: var(--t-small); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 4px; font-size: 13px; font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; }
.chip--yes { background: var(--bg-mint-100); color: var(--bg-ink); }
.chip--part { background: #fff; border: 1.5px solid var(--bg-ink); color: var(--bg-ink); }
.chip--no { background: #E3E6EB; color: var(--bg-ink); }
.s--soft .chip--part { background: #fff; }
.study2 .chips { margin: 0 0 8px; }
.chip-key { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 var(--g-m); font-size: var(--t-small); color: var(--color-text-muted); }
.terms details.more > summary h3 { color: var(--color-text-muted); }
.terms details.more .answer { padding-left: 0; }
@media (max-width: 960px) { .grp-list { grid-template-columns: 1fr; } }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.who-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .steps--3 { grid-template-columns: 1fr; } .who-stats--3 { grid-template-columns: 1fr; } }
.grp-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grp-list--3 .grp { grid-template-columns: 1fr; }
.grp-list--3 .grp .ic-sm { margin-bottom: 8px; }
@media (max-width: 960px) { .grp-list--3 { grid-template-columns: 1fr; } }

/* ---------- Menu con (13/10/2026, sửa 14/10): nút Men vi sinh răng miệng chỉ mở danh sách Định nghĩa, Nghiên cứu. Dựng bằng tools/khung_chung.py ---------- */
.nav-item > .nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-weight: var(--fw-medium); font-size: var(--t-small); cursor: pointer; }
.nav-item > .nav-btn:hover, .nav-item.open > .nav-btn, .nav-item:has(.subnav [aria-current="page"]) > .nav-btn { background: var(--bg-mint-15); }
.nav-item > .nav-btn svg { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-item:hover > .nav-btn svg, .nav-item.open > .nav-btn svg { transform: rotate(180deg); }
.nav-item.open .subnav { opacity: 1; visibility: visible; transform: none; }
.site-nav .subnav a, .site-nav .subnav a:hover, .site-nav .subnav a[aria-current="page"] { text-decoration: none; white-space: normal; font-weight: var(--fw-medium); }
.site-nav .subnav a[aria-current="page"] { background: var(--bg-mint-15); }
.site-nav .subnav small { margin-top: 2px; font-weight: 400; }
/* Mở bằng di chuột hoặc bấm (class open), không mở theo focus để bấm lần hai đóng được */
@media (min-width: 961px) { .nav-item:has(> .nav-btn):not(.open):not(:hover) .subnav { opacity: 0; visibility: hidden; transform: translateY(6px); } }
@media (max-width: 1100px) { .nav-item > .nav-btn { padding: 12px 10px; } }
@media (max-width: 960px) {
  .site-header.open .nav-item > .nav-btn { display: flex; width: 100%; border-radius: 0; border-bottom: var(--line); font-size: var(--t-body); cursor: default; background: transparent; }
  .nav-item > .nav-btn svg { display: none; }
}