@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800&display=swap');

/* ==========================================================================
   Lolool — Web App Dinh dưỡng Mẹ bầu
   Design System: "Editorial Macro" (kem giấy · navy · terracotta · sage · gold)
   Lấy cảm hứng từ bộ Cẩm nang Thực đơn 7 ngày chuẩn Macro.
   ========================================================================== */

/* ==========================================================================
   1. Root Variables & Theme Tokens
   ========================================================================== */
:root {
  /* Màu CHỮ NHẤN (chỉ chữ, không phải nền/viền/nút). Nền sáng giữ xanh đậm;
     nền tối lật sang vàng ở css/nen-toi.css — chữ xanh trên nền xanh đọc rất
     mệt (lệnh anh Tú 26/08/2026). */
  --chu-nhan: #37813C;
  /* Nền & surface */
  --bg-main: hsl(43, 33%, 95%);          /* kem giấy #F3EFE6 */
  --bg-soft: hsl(40, 34%, 92%);          /* kem đậm hơn cho khối phụ */
  --surface: #FFFFFF;
  --surface-warm: hsl(43, 42%, 98%);

  /* Mực & chữ */
  --ink: hsl(150, 20%, 20%);             /* xanh-charcoal #293D33 — tiêu đề */
  --text-primary: hsl(210, 24%, 26%);    /* #33414E */
  --text-secondary: hsl(208, 15%, 38%);  /* #535F6B — đậm hơn, đạt AA trên nền kem */
  --text-light: hsl(208, 12%, 42%);      /* #5E6B77 — đạt AA (thay #8A97A1 fail) */

  /* Navy = Primary (đạm/hành động) */
  --primary: hsl(124, 39%, 45%);         /* #469F4C */
  /* Chữ trên nút xanh — nút giữ nguyên màu ở nền tối nên token này KHÔNG lật.
     Có token để khối CSS mới không phải viết cứng #FFFFFF (xem test
     "Khối CSS mới không viết cứng một mã màu nào"). */
  --chu-tren-nut: #FFFFFF;
  --primary-hover: hsl(126, 44%, 37%);
  --primary-dark: hsl(128, 48%, 28%);
  --primary-light: hsl(124, 40%, 92%);

  /* Terracotta = Carb / accent ấm */
  --carb: hsl(18, 55%, 46%);             /* #B85A33 */
  --carb-dark: hsl(16, 55%, 37%);
  --carb-light: hsl(22, 52%, 93%);

  /* Protein alias = navy */
  --protein: var(--primary);
  --protein-light: var(--primary-light);

  /* Sage green */
  --success: hsl(104, 23%, 47%);         /* #6E9466 */
  --success-dark: hsl(104, 28%, 31%);
  --success-light: hsl(96, 34%, 92%);

  /* Gold accent */
  --gold: hsl(39, 46%, 58%);             /* #C3A468 */
  --gold-dark: hsl(36, 45%, 44%);
  --gold-light: hsl(43, 52%, 91%);

  /* Trạng thái */
  --warning: hsl(38, 76%, 52%);
  --warning-dark: hsl(32, 60%, 38%);
  --warning-light: hsl(40, 72%, 92%);
  --danger: hsl(2, 60%, 55%);
  --danger-dark: hsl(2, 52%, 42%);
  --danger-light: hsl(4, 62%, 95%);

  /* Viền */
  --border: hsl(40, 22%, 83%);
  --border-light: hsl(40, 22%, 89%);

  /* Mực + nền khi IN RA GIẤY (js/so-kham.js #skPrint, khuôn theo js/giodo.js).
     Giấy luôn trắng-đen bất kể app đang bật nền tối, nên ba token này
     KHÔNG lật ở css/nen-toi.css — như --chu-tren-nut ở trên, có token để
     khối @media print không phải viết cứng #000/#999/#fff (xem test
     "Khối CSS mới không viết cứng một mã màu nào"). */
  --muc-in: #000;
  --vien-in: #999;
  --nen-in: #fff;

  /* Bóng dịu ám tông ấm */
  --shadow-sm: 0 1px 2px rgba(34, 45, 58, 0.05), 0 1px 3px rgba(34, 45, 58, 0.04);
  --shadow: 0 6px 22px rgba(34, 45, 58, 0.07), 0 2px 6px rgba(34, 45, 58, 0.04);
  --shadow-hover: 0 14px 34px rgba(70,159,76, 0.14);

  /* Bo góc */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Alias tương thích code cũ */
  --accent: var(--carb);
  --accent-dark: var(--carb-dark);
  --accent-light: var(--carb-light);
  --background: var(--bg-main);
}

/* ==========================================================================
   2. Reset & Typography
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Cỡ chữ gốc — 20/08/2026 (lệnh anh Tú: "cho font chữ toàn app to hơn 1 mức,
   nhiều người đọc khó"). 16px → 17.5px (+9%). Gần như toàn bộ CSS dùng rem
   nên đổi đúng dòng này là cả app lên theo; chỗ nào còn px thì chỉnh riêng. */
html { scroll-behavior: smooth; font-size: 17.5px; }

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Tiêu đề mục (Cẩm nang, Khoá học...). Trước 21/08/2026 các mục này dùng thẻ <h1>
   nên trình duyệt tự cho cỡ 1.5em vì nằm trong <section>. Đã hạ xuống <h2> để cả
   trang chỉ còn một H1 — ghim thẳng cỡ chữ và lề ở đây để hiển thị không xê dịch,
   và không phụ thuộc vào quy tắc mặc định mà trình duyệt đang dần bỏ. */
.section-title { font-size: 1.5em; margin-block: 0.83em; }

a { text-decoration: none; color: inherit; }

::selection { background: var(--gold-light); color: var(--carb-dark); }

/* Vòng focus rõ ràng cho bàn phím (a11y + cảm giác chỉn chu) — chỉ hiện khi điều hướng bằng phím */
:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Icon vector dùng chung (lolo-icons.js) — căn giữa theo dòng chữ */
.lolo-ic { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.au-book { display: inline-flex; align-items: center; gap: 8px; }
.au-book .au-book-ic { display: inline-flex; }

/* Chuyển động vào-khi-cuộn (reveal-home.js). Chỉ ẩn khi JS bật cờ .lolo-anim → JS tắt vẫn hiện. */
html.lolo-anim [data-rise] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .66s cubic-bezier(.2, .7, .2, 1), transform .66s cubic-bezier(.2, .7, .2, 1);
}
html.lolo-anim [data-rise].rise-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.lolo-anim [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   3. Header & Navigation
   ========================================================================== */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(70px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  background: rgba(250, 248, 243, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  z-index: 1000;
  box-shadow: 0 2px 14px rgba(34, 45, 58, 0.04);
}

.header-container {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-img { height: 38px; width: auto; display: block; }
@media (max-width: 480px) { .logo-img { height: 32px; } }

.nav-menu { display: flex; gap: 2px; }

.nav-link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}

.nav-link:hover { color: var(--text-primary); background-color: var(--bg-soft); }

/* Nút Tìm kiếm trong thanh nav (20/08/2026). Là <button> nên phải gỡ kiểu mặc
   định của trình duyệt, còn lại ăn theo .nav-link cho khớp các mục bên cạnh. */
.nav-tim {
  border: none; background: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; text-align: left;
}
.nav-tim span { font-size: .95em; line-height: 1; }
/* Thẻ mẹo được ô tìm kiếm nhảy tới: nháy viền một nhịp cho mẹ biết đang ở đâu. */
/* Dòng phụ trong thẻ kết quả chỉ số — vd "trung bình của trái 1.2 và phải 0.98". */
.bio-res-phu { font-weight: 500; color: var(--text-secondary); font-size: .86em; }
.tip-card.tip-sang {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light, #e3f3e4);
}

.nav-link.active {
  color: var(--text-primary);
  background-color: var(--bg-soft);
  font-weight: 700;
}

/* Chế độ sáng/tối (05/09/2026): dời từ cụm nút nổi vào cuối menu — css/nen-
   toi.css định hình #cheDoBtn thành nút TRÒN nổi (56px, bo tròn, đổ bóng);
   ở đây ghi đè lại thành một mục hàng ngang giống hệt .nav-link bên cạnh nó,
   độ ưu tiên .nav-menu .cheDo-btn (0,2,0) thắng .cheDo-btn (0,1,0) dù file
   nào nạp sau. */
.nav-menu .cheDo-btn {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 8px; width: auto; height: auto; padding: 8px 12px; margin: 0;
  border: none; border-radius: var(--radius-sm); box-shadow: none;
  background: none; color: var(--text-secondary);
  font-size: 0.92rem; font-weight: 500; font-family: inherit;
  text-align: left; cursor: pointer;
}
.nav-menu .cheDo-btn:hover { color: var(--text-primary); background-color: var(--bg-soft); transform: none; }
.nav-menu .cheDo-btn small { font-size: inherit; font-weight: 500; letter-spacing: normal; }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 44px; height: 44px;
  padding: 13px 10px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  cursor: pointer;
}

.menu-toggle .bar {
  height: 2px; width: 100%;
  background-color: var(--ink);
  border-radius: 2px;
  transition: var(--transition);
}

/* ==========================================================================
   4. Main Structure & Sections
   ========================================================================== */
.main-content {
  margin-top: calc(70px + env(safe-area-inset-top, 0px));
  padding: 44px 24px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  min-height: calc(100vh - 200px);
}

.app-section { display: none; }
.app-section.active { display: block; animation: sectionIn 0.45s ease-out; }

/* Thanh "← Quay lại" dùng chung — app.js chèn vào đầu .main-content,
   chỉ hiện ở các màn con (BACK_HUB trong js/app.js). */
#loloBackBar { display: none; margin: 0 0 18px; }
#loloBackBar.show { display: block; }
#loloBackBar .lolo-back {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border, #e5ddcd); border-radius: 999px;
  background: var(--surface, #fff); color: var(--ink, #293D33);
  font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 600;
  font-size: 0.9rem; padding: 9px 18px; min-height: 44px; cursor: pointer;
  transition: var(--transition, all 0.3s);
}
#loloBackBar .lolo-back:hover { background: var(--warm, #f3eee3); transform: translateX(-2px); }

@keyframes sectionIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-header {
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 760px;
}

/* Cards & controls */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  padding: 28px;
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-hover); }

.glass-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: var(--transition);
}
.glass-card:hover { border-color: var(--gold); box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary {
  background-color: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(70,159,76, 0.22);
}
.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(70,159,76, 0.3);
}

.btn-block { width: 100%; }

.form-control {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
  transition: var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
select.form-control { cursor: pointer; }

/* Ô nhập SỐ: bỏ nút mũi tên tăng/giảm trên TOÀN APP (17/08/2026, lệnh anh Tú).
   Lý do: mẹ nhập thẳng con số trên phiếu siêu âm/xét nghiệm, không ai bấm mũi
   tên để lên từng đơn vị; nút này chỉ chiếm chỗ và dễ bấm nhầm lệch số đo.
   Vẫn giữ type="number" để điện thoại bật bàn phím số và trình duyệt kiểm tra
   min/max/step như cũ. */
input[type="number"] {
  -moz-appearance: textfield;   /* Firefox */
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* ==========================================================================
   5. Reveal & number-count animation
   ========================================================================== */
.js-enabled .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-enabled .reveal.in-view { opacity: 1; transform: none; }

/* Đĩa ăn xoay hiện vào */
.js-enabled .reveal .plate-photo {
  transform: scale(0.85) rotate(-14deg);
  opacity: 0.5;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s, opacity 0.7s ease 0.15s;
}
.js-enabled .reveal.in-view .plate-photo { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js-enabled .reveal,
  .js-enabled .reveal .plate-photo { opacity: 1 !important; transform: none !important; transition: none; }
  .app-section.active { animation: none; }
  html { scroll-behavior: auto; }
  /* Tắt mọi hiệu ứng động (heroFloat, fadeInUp...) để tránh chóng mặt cho mẹ bầu */
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   6. Home Section (Hero & Stats)
   ========================================================================== */
.hero-banner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 40px;
  background: linear-gradient(140deg, #FFFFFF 0%, var(--bg-soft) 52%, var(--gold-light) 100%);
  border-radius: 28px;
  padding: 60px 52px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  margin-bottom: 40px;
  overflow: hidden;
  position: relative;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.badge-tag {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--carb-dark);
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--border-light);
  padding: 6px 14px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-content h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  color: var(--ink);
  line-height: 1.15;
}

.hero-content p {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 540px;
}

.quick-selector-box {
  background: var(--surface);
  padding: 22px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  width: 100%;
  max-width: 500px;
}
.quick-selector-box label { font-weight: 600; margin-bottom: 8px; display: block; color: var(--text-primary); }
.select-btn-group { display: flex; gap: 12px; }
.select-btn-group select { flex: 1; }

.hero-image { display: flex; justify-content: center; position: relative; z-index: 1; }
.hero-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(70,159,76, 0.18));
  animation: heroFloat 6s ease-in-out infinite;
}
.hero-photo {
  width: 100%;
  max-width: 420px;
  border-radius: 24px;
  overflow: hidden;
  border: 5px solid #FFFFFF;
  box-shadow: 0 20px 44px rgba(70,159,76, 0.2);
  animation: heroFloat 6s ease-in-out infinite;
}
.hero-photo img { width: 100%; height: auto; display: block; }
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
  text-align: center;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--primary);
  transition: var(--transition);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.stat-card h3 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
}
.stat-card:nth-child(2) h3 { color: var(--carb); }
.stat-card:nth-child(3) h3 { color: var(--success-dark); }
.stat-card:nth-child(4) h3 { color: var(--gold-dark); }

.stat-card p { color: var(--text-secondary); font-weight: 500; font-size: 0.95rem; }

/* Philosophy */
.philosophy-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 44px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
}
.philosophy-box h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 36px;
  color: var(--ink);
}
.philosophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.phil-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.phil-icon {
  font-size: 2.4rem;
  background: linear-gradient(135deg, var(--primary-light), var(--gold-light));
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px var(--border-light);
}
.phil-item h4 { font-size: 1.15rem; color: var(--text-primary); }
.phil-item p { color: var(--text-secondary); font-size: 0.95rem; }

/* ==========================================================================
   7. Meal Plan Section
   ========================================================================== */
.inline-select { width: 150px; }

.trimester-info-box {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--gold-light) 100%);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  margin-bottom: 32px;
  border-left: 6px solid var(--primary);
}
.trimester-info-box h3 { margin-bottom: 6px; font-size: 1.35rem; color: var(--ink); }
.trimester-info-box p { color: var(--text-secondary); font-weight: 500; }

.meal-plan-container {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.day-tabs { display: flex; flex-direction: column; gap: 8px; }

.day-tab-btn {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.day-tab-btn:hover { color: var(--primary); background-color: var(--primary-light); }
.day-tab-btn.active {
  color: #FFFFFF;
  background-color: var(--primary);
  box-shadow: 0 6px 16px rgba(70,159,76, 0.25);
  border-color: var(--primary);
}

.meals-content-wrapper { display: flex; flex-direction: column; gap: 20px; }

/* Chủ đề của ngày */
.day-theme-label { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.theme-eyebrow {
  font-size: 0.84rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--carb);
}
.theme-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.55rem; color: var(--ink);
}

.meals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.meal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px;
  transition: var(--transition);
  animation: fadeInUp 0.4s ease-out both;
}
.meal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.meal-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border-light); padding-bottom: 10px;
}
.meal-name {
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  color: var(--primary-dark); background-color: var(--primary-light);
  padding: 4px 10px; border-radius: 20px;
}
.meal-cal { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); }
.meal-food { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); min-height: 48px; }

.meal-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.meal-badge {
  font-size: 0.87rem; font-weight: 700; padding: 4px 12px;
  border-radius: 20px; white-space: nowrap; color: #FFFFFF;
}
.meal-badge.carb { background-color: var(--carb); }
.meal-badge.protein { background-color: var(--primary); }

.meal-note {
  font-size: 0.9rem; color: var(--text-secondary);
  background-color: var(--success-light);
  padding: 12px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--success); margin-top: auto;
}

/* Day total bar */
.day-total-summary-bar {
  background-color: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}
.day-total-summary-bar .total-text { font-size: 1rem; color: var(--text-primary); margin-bottom: 10px; }
.day-total-summary-bar .total-text strong { color: var(--primary); }
.total-progress-track {
  height: 12px; background-color: var(--bg-soft);
  border-radius: 6px; overflow: hidden; border: 1px solid var(--border-light);
}
.total-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--carb) 0%, var(--primary) 100%);
  border-radius: 6px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mẹo đầu bếp của ngày */
.day-tip-box {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--gold-light);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.day-tip-icon { font-size: 1.6rem; line-height: 1; }
.day-tip-content { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6; }
.day-tip-content strong { color: var(--carb-dark); }

.nutrient-highlights-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  padding: 28px;
  box-shadow: var(--shadow);
}
.nutrient-highlights-box h3 { font-size: 1.15rem; margin-bottom: 16px; color: var(--ink); }
.highlight-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.nutrient-pill {
  background-color: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.9rem; font-weight: 600;
  padding: 8px 16px; border-radius: 30px;
  border: 1px solid rgba(70,159,76, 0.15);
}

/* ==========================================================================
   7B. Cẩm nang trực quan (Visual Guide)
   ========================================================================== */
.guide-stack { display: flex; flex-direction: column; gap: 24px; }
.guide-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.guide-block {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px;
}

.block-head { margin-bottom: 10px; }
.block-head.center { text-align: center; }
.block-head h3 { font-size: 1.4rem; color: var(--ink); }
.block-sub { color: var(--text-secondary); margin-top: 4px; font-size: 0.98rem; }

/* Đĩa ăn hoàn hảo */
.plate-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: center;
  margin-top: 16px;
}
.plate-visual-wrap { display: flex; justify-content: center; }
.plate-photo {
  width: 260px; height: 260px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 14px 32px rgba(34, 45, 58, 0.18), inset 0 0 0 6px #FFFFFF;
}
.plate-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate-ring {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(110, 148, 102, 0.55);
  pointer-events: none;
}
.plate-visual {
  width: 240px; height: 240px; border-radius: 50%;
  background: conic-gradient(var(--success) 0 50%, var(--carb) 50% 75%, var(--primary) 75% 100%);
  position: relative;
  box-shadow: 0 12px 30px rgba(34, 45, 58, 0.16), inset 0 0 0 6px #FFFFFF;
}
.plate-visual::after {
  content: "";
  position: absolute; inset: 33%;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(34, 45, 58, 0.14);
}
.plate-center {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.plate-center strong { font-family: var(--font-display); color: var(--ink); font-size: 1.2rem; }
.plate-center small { color: var(--text-secondary); font-size: 0.84rem; }

.plate-legend { display: flex; flex-direction: column; gap: 18px; }
.plate-seg-item { display: flex; gap: 14px; align-items: flex-start; }
.seg-dot { width: 16px; height: 16px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.seg-veg .seg-dot { background: var(--success); }
.seg-carb .seg-dot { background: var(--carb); }
.seg-protein .seg-dot { background: var(--primary); }
.seg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; flex-wrap: wrap; }
.seg-portion { font-family: var(--font-heading); font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.seg-body h4 { display: inline; font-size: 1rem; color: var(--text-primary); }
.plate-seg-item p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }

/* Ma trận quy đổi */
#carbExchangeBlock { border-top: 4px solid var(--carb); }
#proteinExchangeBlock { border-top: 4px solid var(--primary); }

.ex-target {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800; font-size: 1.05rem;
  color: #FFFFFF; padding: 8px 22px; border-radius: 30px;
  margin-top: 8px;
}
.ex-target-carb { background: var(--carb); }
.ex-target-protein { background: var(--primary); }

.ex-items {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 10px; justify-content: center;
  margin: 22px 0;
}
.ex-item {
  flex: 1; min-width: 110px;
  background: var(--surface-warm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 12px 14px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  transition: var(--transition);
}
.ex-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ex-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
}
.ex-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-icon { font-size: 2.2rem; }
.ex-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.ex-eq { display: flex; align-items: center; font-size: 1.4rem; font-weight: 800; color: var(--text-light); }

.ex-fact {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--radius-md);
  padding: 14px 16px; font-size: 0.9rem; line-height: 1.6;
}
.ex-fact-ic { font-size: 1.15rem; line-height: 1.4; }
.ex-fact-carb { background: var(--carb-light); color: var(--carb-dark); }
.ex-fact-protein { background: var(--primary-light); color: var(--primary-dark); }

/* Tủ thuốc tự nhiên - danh sách xanh */
.shelf-rows { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.shelf-row {
  display: flex; gap: 16px; align-items: center;
  background: var(--surface-warm);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  transition: var(--transition);
}
.shelf-row:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.shelf-emoji {
  width: 68px; height: 68px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  font-size: 2rem;
}
.shelf-emoji img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-info h4 { color: var(--ink); font-size: 1.05rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shelf-tag {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--carb-dark); background: var(--carb-light); padding: 3px 10px; border-radius: 20px;
}
.shelf-info p { color: var(--text-secondary); font-size: 0.92rem; margin-top: 3px; }
.shelf-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--success-light);
  border: 1px solid rgba(110, 148, 102, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 16px; color: var(--success-dark);
  font-size: 0.9rem; line-height: 1.6;
}
.shelf-note-ic { font-size: 1.15rem; }

/* 3 Quy tắc vàng */
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rule-item {
  position: relative;
  background: var(--surface-warm);
  border: 1px solid var(--border-light);
  border-top: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: var(--transition);
}
.rule-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.rule-icon { width: 56px; height: 56px; margin: 0 auto 8px; color: var(--primary); }
.rule-icon svg { width: 100%; height: 100%; }
.rule-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--carb); line-height: 1; }
.rule-item h4 { color: var(--ink); font-size: 1.15rem; margin: 8px 0; }
.rule-item p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }

/* ==========================================================================
   8. Nutrition Calculator Section
   ========================================================================== */
.calculator-layout { display: grid; grid-template-columns: 420px 1fr; gap: 32px; align-items: start; }
.calc-form-container h3 { color: var(--ink); margin-bottom: 20px; }
.form-group-row { display: flex; gap: 16px; }
.form-group-row .form-group { flex: 1; }
.form-group { margin-bottom: 20px; }
.form-group label { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; display: block; }

.calc-results-container { min-height: 480px; }
.waiting-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; min-height: 400px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  padding: 40px; text-align: center;
}
.waiting-icon { width: 60px; height: 60px; margin-bottom: 16px; stroke: var(--primary); opacity: 0.65; }
.waiting-state p { color: var(--text-secondary); font-weight: 500; }

.results-content { animation: sectionIn 0.4s ease-out; }
.summary-cards-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; }
.result-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  padding: 24px;
  box-shadow: var(--shadow);
}
.main-calorie-card { border-top: 6px solid var(--primary); }
.bmi-card { border-top: 6px solid var(--success); }
.card-label {
  font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
  color: var(--text-secondary); letter-spacing: 0.5px; margin-bottom: 8px; display: block;
}
.main-value { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.main-value .unit { font-size: 1.15rem; font-weight: 500; color: var(--text-secondary); font-family: var(--font-body); }
.main-value .bmi-cat {
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; vertical-align: middle;
  background-color: var(--success-light); color: var(--success-dark);
  padding: 4px 10px; border-radius: 20px; margin-left: 8px;
}
.sub-detail { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }

.macros-section { margin-bottom: 24px; }
.macros-section h3 { font-size: 1.25rem; margin-bottom: 6px; color: var(--ink); }
.macro-subtitle { color: var(--text-secondary); margin-bottom: 20px; font-size: 0.95rem; }
.macro-item { margin-bottom: 20px; }
.macro-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 6px; }
.macro-name { font-weight: 600; font-size: 0.95rem; }
.macro-target { font-size: 0.95rem; color: var(--text-secondary); }
.macro-target strong { font-size: 1.15rem; color: var(--ink); }
.progress-bar-container {
  height: 10px; background-color: var(--bg-soft);
  border-radius: 20px; overflow: hidden; margin-bottom: 6px; border: 1px solid var(--border-light);
}
.progress-bar { height: 100%; border-radius: 20px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }
.carbs-bar { background-color: var(--carb); }
.protein-bar { background-color: var(--primary); }
.fat-bar { background-color: var(--gold); }
.macro-desc { font-size: 0.85rem; color: var(--text-light); }

.micros-section h3 { color: var(--ink); margin-bottom: 8px; }
.micros-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 16px; }
.micro-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
  transition: var(--transition);
}
.micro-card:hover { box-shadow: var(--shadow); border-color: var(--primary-light); }
.micro-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px; }
.micro-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.micro-val { font-size: 1.1rem; font-weight: 700; color: var(--primary-dark); }
.micro-desc { font-size: 0.85rem; color: var(--text-secondary); }

/* ==========================================================================
   9. Foods Section
   ========================================================================== */
.food-tabs-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.food-switch-btn {
  background-color: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 700; color: var(--text-secondary);
  cursor: pointer; transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.food-switch-btn:hover { background-color: var(--bg-soft); }
.food-switch-btn.active#btnShowEat {
  background-color: var(--success); color: #FFFFFF; border-color: var(--success);
  box-shadow: 0 6px 20px rgba(110, 148, 102, 0.3);
}
.food-switch-btn.active#btnShowAvoid {
  background-color: var(--danger); color: #FFFFFF; border-color: var(--danger);
  box-shadow: 0 6px 20px rgba(217, 83, 79, 0.26);
}

.filter-bar { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.filter-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 18px; border-radius: 30px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  color: var(--text-secondary); cursor: pointer; transition: var(--transition);
}
.filter-btn:hover { background-color: var(--primary-light); color: var(--primary); border-color: rgba(70,159,76, 0.25); }
.filter-btn.active {
  background-color: var(--primary); color: #FFFFFF; border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(70,159,76, 0.2);
}

.foods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.food-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  animation: fadeInUp 0.35s ease-out both;
  transition: var(--transition);
}
.food-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.food-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.food-card-header h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.food-badge { font-size: 0.87rem; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.food-badge.eat { background-color: var(--success-light); color: var(--success-dark); border: 1px solid rgba(110, 148, 102, 0.3); }
.food-badge.avoid-high { background-color: var(--danger-light); color: var(--danger-dark); border: 1px solid rgba(217, 83, 79, 0.25); }
.food-badge.avoid-medium { background-color: var(--warning-light); color: var(--warning-dark); border: 1px solid rgba(232, 169, 60, 0.35); }
.food-detail-box { font-size: 0.9rem; color: var(--text-secondary); padding: 14px; border-radius: var(--radius-sm); line-height: 1.6; }
.food-detail-box strong { color: var(--text-primary); }
.food-detail-box.eat-detail { background-color: var(--success-light); border-left: 3px solid var(--success); }
.food-detail-box.avoid-detail-high { background-color: var(--danger-light); border-left: 3px solid var(--danger); }
.food-detail-box.avoid-detail-medium { background-color: var(--warning-light); border-left: 3px solid var(--warning); }
.food-recommend { font-size: 0.9rem; color: var(--text-primary); line-height: 1.5; }
.food-recommend strong { color: var(--success-dark); }

/* ==========================================================================
   10. Special Diets Section
   ========================================================================== */
.special-diets-container { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.diet-vertical-tabs { display: flex; flex-direction: column; gap: 10px; }
.diet-tab-btn {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px 20px; text-align: left;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  color: var(--text-secondary); cursor: pointer; transition: var(--transition);
  box-shadow: var(--shadow-sm); line-height: 1.4;
}
.diet-tab-btn:hover { color: var(--primary); background-color: var(--primary-light); }
.diet-tab-btn.active {
  color: #FFFFFF; background-color: var(--primary-dark); border-color: var(--primary-dark);
  box-shadow: 0 6px 16px rgba(20, 55, 85, 0.28);
}

.diet-details-content { min-height: 400px; }
.diet-details-content h3 {
  font-family: var(--font-display);
  font-size: 1.5rem; color: var(--ink);
  margin-bottom: 12px; border-bottom: 2px solid var(--gold-light); padding-bottom: 10px;
}
.diet-intro { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 24px; font-style: italic; }
.diet-section-title { font-size: 1.1rem; font-weight: 700; color: var(--carb); margin-bottom: 12px; margin-top: 24px; }
.diet-principles-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.diet-principles-list li { position: relative; padding-left: 28px; font-size: 0.95rem; color: var(--text-primary); }
.diet-principles-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 800; font-size: 1.1rem; }
.diet-limit-box { background-color: var(--danger-light); border-left: 4px solid var(--danger); padding: 16px 20px; border-radius: var(--radius-sm); color: var(--danger-dark); font-size: 0.95rem; line-height: 1.6; }
.diet-sample-menu { background-color: var(--primary-light); border-left: 4px solid var(--primary); padding: 18px 22px; border-radius: var(--radius-sm); color: var(--primary-dark); font-size: 0.95rem; line-height: 1.6; }

/* ==========================================================================
   11. Tips Section
   ========================================================================== */
.tips-grid { display: flex; flex-direction: column; gap: 16px; }
.tips-cat-header {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  margin-top: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold-light);
}
.tips-cat-header:first-child { margin-top: 0; }
/* ── Mẹo dạng TAB (20/08/2026, sửa 20/08 chiều) ── 116 mẹo xếp dọc thì cuộn mãi
   không hết. Thanh tab XUỐNG DÒNG thành lưới: 11 nhóm phải thấy hết trong một
   màn hình, không cuộn ngang (cuộn ngang giấu mất nửa số nhóm). */
.tips-tabs {
  display: grid; gap: 10px; padding: 2px 0 4px; margin-bottom: 18px;
  /* 228px là bề ngang tối thiểu để tên nhóm dài nhất ("Cân & đường huyết")
     không vỡ quá 2 dòng. Khung 1100px → 4 cột → 11 nhóm gọn trong 3 hàng. */
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}
.tips-tab {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 56px; padding: 7px 12px 7px 8px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-secondary); font-family: inherit; font-weight: 650;
  font-size: .86rem; line-height: 1.25;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.tips-tab:hover { border-color: var(--primary); color: var(--primary-dark); box-shadow: var(--shadow); }
.tips-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Ảnh Pixar của nhóm. Có ảnh thì ẩn emoji đứng ngay sau — mất file thì <img>
   bị onerror gỡ đi, selector không khớp nữa, emoji tự hiện lại. */
.tips-tab-anh {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  object-fit: cover; background: var(--bg-soft);
}
.tips-tab-anh + .tips-tab-ic { display: none; }
.tips-tab-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; line-height: 1; background: var(--bg-soft);
}
.tips-tab.on .tips-tab-ic { background: rgba(255,255,255,.2); }
.tips-tab-ten { flex: 1 1 auto; min-width: 0; }
.tips-tab-so {
  flex: 0 0 auto; font-size: 0.86rem; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; background: var(--bg-soft); color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.tips-tab.on .tips-tab-so { background: rgba(255,255,255,.24); color: #fff; }
/* Đầu mỗi tab: ảnh lớn + tên đầy đủ + mô tả. */
.tips-pane-dau { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.tips-pane-anh {
  flex: 0 0 auto; width: 104px; height: 104px; border-radius: 18px;
  object-fit: cover; background: var(--bg-soft); box-shadow: var(--shadow);
}
.tips-pane-chu { min-width: 0; }
.tips-pane-tieude { font-size: 1.28rem; color: var(--ink); margin-bottom: 6px; }
.tips-pane-mota { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-secondary); }
/* Nhóm dấu hiệu phải đi viện: gạch cảnh báo để không lẫn với mẹo ăn uống. */
.tips-pane-canh .tips-pane-mota {
  border-left: 4px solid var(--danger-dark); padding: 10px 14px;
  background: var(--danger-light); color: var(--danger-dark);
  border-radius: 0 10px 10px 0; font-weight: 600;
}
.tips-pane-canh .tips-pane-tieude { color: var(--danger-dark); }
.tips-pane-canh .tip-card { border-color: var(--danger-dark); }
@media (max-width: 600px) {
  .tips-tabs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tips-tab { min-height: 52px; font-size: 0.93rem; gap: 8px; padding: 6px 9px 6px 6px; }
  .tips-tab-anh, .tips-tab-ic { width: 36px; height: 36px; border-radius: 10px; }
  .tips-tab-so { display: none; }
  .tips-pane-dau { gap: 13px; margin-bottom: 16px; }
  .tips-pane-anh { width: 74px; height: 74px; border-radius: 14px; }
  .tips-pane-tieude { font-size: 1.12rem; }
}
.tips-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 8px; }
.tip-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: var(--transition);
  animation: fadeInUp 0.35s ease-out both;
}
.tip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.tip-header { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border-light); padding-bottom: 12px; }
.tip-icon {
  font-size: 1.9rem; width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--primary-light), var(--gold-light));
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tip-header h3 { font-size: 1.15rem; color: var(--ink); }
.tip-content { font-size: 0.95rem; color: var(--text-secondary); white-space: pre-line; line-height: 1.6; }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.app-footer { background-color: var(--ink); color: #D7E2ED; padding: 44px 24px; margin-top: 60px; }
/* 14/09/2026 — chân trang 3 cột (doanh nghiệp · liên hệ · chính sách) + lưu ý y khoa
   trải hết chiều ngang, theo "Review chỉnh sửa web" cho hồ sơ TMĐT. */
.footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 36px 40px; }
.footer-info h3 { font-family: var(--font-display); color: #FFFFFF; font-size: 1.5rem; margin-bottom: 12px; }
.footer-info p { font-size: 0.95rem; margin-bottom: 8px; }
.footer-cty { font-size: 0.85rem; line-height: 1.6; margin-top: 14px; opacity: 0.9; }
.footer-cty strong { color: #FFFFFF; }
.footer-lienhe h4, .footer-chinhsach h4 { color: #FFFFFF; font-size: 0.95rem; font-weight: 700; margin: 0 0 10px; letter-spacing: .02em; }
.footer-lienhe p { font-size: 0.9rem; line-height: 1.65; margin: 0; }
.footer-lienhe a, .footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-lienhe a:hover, .footer-legal a:hover { color: #FFFFFF; }
.footer-legal { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; line-height: 1.5; opacity: 0.9; }
.footer-legal li { margin-bottom: 7px; }
.footer-disclaimer { grid-column: 1 / -1; }
.copyright { font-size: 0.85rem; opacity: 0.75; margin-top: 16px; }
.footer-disclaimer {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 20px; font-size: 0.85rem; line-height: 1.6;
  border-left: 4px solid var(--gold);
}
.footer-disclaimer strong { color: #FFFFFF; }

/* 22/09/2026 — logo "Đã thông báo Bộ Công Thương" (nền trong suốt) dưới thông tin doanh nghiệp.
   img có width/height attr → đặt width PHẢI kèm height:auto (bẫy ảnh MGM 05/09). */
.footer-bct { display: inline-block; margin-top: 14px; line-height: 0; }
.footer-bct img { width: 160px; height: auto; display: block; }

/* 22/09/2026 — chân trang CHỈ hiện ở trang chủ. switchSection() (js/app.js) gắn
   class này lên <body> khi mục mở khác "home". Ẩn footer thì tab khác mất
   ~100px đệm dưới → nới main để nút nổi "Mời bạn" (.moi-ban-fab, góc dưới phải)
   không đè lên dòng cuối. */
body.lolo-khong-trang-chu .app-footer { display: none; }
body.lolo-khong-trang-chu .main-content { padding-bottom: 96px; }

/* ==========================================================================
   Ô "Tôi đồng ý với Chính sách thanh toán" trên màn nộp tiền (14/09/2026, hồ sơ TMĐT).
   Chưa tích → mã QR mờ + dòng nhắc; tích rồi → QR rõ. CSS thuần (anh em kề ~),
   không cần JS — đặt ở đây để không ăn vào ngân sách byte của js/auth-gate.js.
   ========================================================================== */
#agDongY { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--primary, #469F4C); cursor: pointer; }
.ag-dongy { display: inline; font-size: .92rem; line-height: 1.5; color: var(--ink, #293D33); cursor: pointer; }
.ag-dongy a { color: var(--chu-nhan, #37813C); }
#agDongY:not(:checked) ~ .ag-qr { filter: blur(9px); pointer-events: none; }
#agDongY:not(:checked) + .ag-dongy::after { content: " — tích để hiện mã QR"; color: var(--text-secondary, #667581); font-size: .85rem; }
#agDongY ~ .ag-qr { margin-top: 12px; transition: filter .25s; }


/* ==========================================================================
   13. Media Queries
   ========================================================================== */
@media (max-width: 992px) {
  .hero-banner { grid-template-columns: 1fr; padding: 44px 34px; }
  .hero-image { order: -1; }
  .hero-svg { max-width: 240px; }
  .calculator-layout { grid-template-columns: 1fr; }
  .meal-plan-container { grid-template-columns: 1fr; }
  .day-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 8px; }
  .day-tab-btn { white-space: nowrap; padding: 12px 18px; }
  .special-diets-container { grid-template-columns: 1fr; }
  .diet-vertical-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 8px; }
  .diet-tab-btn { white-space: nowrap; padding: 12px 16px; }
  .plate-layout { grid-template-columns: 1fr; gap: 24px; }
}

/* Chân trang 3 cột trên điện thoại (15/09/2026): thu chữ và lề để ba cột vừa
   màn 390px; email/địa chỉ dài bẻ dòng bằng overflow-wrap; lưu ý y khoa vẫn
   trải hết chiều ngang (grid-column: 1 / -1 ở luật gốc). */
@media (max-width: 600px) {
  .app-footer { padding: 30px 14px 34px; }
  .footer-container { grid-template-columns: 1fr 1fr 1.15fr; gap: 16px 12px; }
  .footer-info h3 { font-size: 1.05rem; margin-bottom: 6px; }
  .footer-info p { font-size: 0.7rem; line-height: 1.45; margin-bottom: 6px; }
  .footer-cty { font-size: 0.62rem; line-height: 1.45; margin-top: 8px; overflow-wrap: anywhere; }
  .footer-lienhe h4, .footer-chinhsach h4 { font-size: 0.72rem; margin-bottom: 6px; }
  .footer-lienhe p { font-size: 0.62rem; line-height: 1.5; overflow-wrap: anywhere; }
  .footer-legal { font-size: 0.62rem; line-height: 1.4; }
  .footer-legal li { margin-bottom: 5px; }
  .copyright { font-size: 0.6rem; margin-top: 8px; }
  .footer-disclaimer { padding: 14px; font-size: 0.78rem; }
}

@media (max-width: 768px) {
  .main-content { padding: 32px 18px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-header h2 { font-size: 1.8rem; }
  .inline-select { width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .philosophy-grid { grid-template-columns: 1fr; gap: 24px; }
  .meals-grid { grid-template-columns: 1fr; }
  .foods-grid { grid-template-columns: 1fr; }
  .micros-grid { grid-template-columns: 1fr; }
  .tips-cat-grid { grid-template-columns: 1fr; }
  .guide-grid-2 { grid-template-columns: 1fr; }
  .rules-grid { grid-template-columns: 1fr; }
  /* 15/09/2026 (anh Tú): chân trang GIỮ 3 cột trên máy hẹp, chỉ bó khoảng cách. */
  .footer-container { grid-template-columns: 1.1fr 1fr 1.1fr; gap: 24px 18px; }

}

/* Thanh nav ngang: 7 mục + nút Đăng nhập. Với cỡ chữ mới (0,92rem × 17,5px ≈
   16px) nó cần khoảng 1150px mới đủ chỗ — hẹp hơn là tràn ngang. Nên gập thành
   nút hamburger từ 1150px thay vì 992px như trước.
   (Ở 992px cũ thì ngay cả cỡ chữ cũ cũng đã hơi chật.) */
@media (max-width: 1150px) {
  .menu-toggle { display: flex; }
  .nav-menu {
    display: none; position: absolute; top: calc(70px + env(safe-area-inset-top, 0px)); left: 0; right: 0;
    background-color: var(--surface); flex-direction: column;
    padding: 8px 12px; box-shadow: 0 8px 16px rgba(34, 45, 58, 0.08);
    border-bottom: 1px solid var(--border); gap: 2px;
  }
  /* 20/08/2026 (lệnh anh Tú, lần 2): "to quá, giảm 1/2 thôi". Bóp chữ nhỏ thêm
     nữa thì mẹ đọc không ra và ngón tay bấm trượt, nên đổi cách: XẾP 2 CỘT.
     8 mục thành 4 hàng → chiều cao còn đúng nửa mà cỡ chữ giữ nguyên.
     Từ ~448px (bản gốc) xuống ~150px. */
  .nav-menu.open { display: grid; grid-template-columns: 1fr 1fr; }
  .nav-link { width: 100%; padding: 5px 12px; font-size: 0.85rem; line-height: 1.3; }
  /* Nút tài khoản trải hết bề ngang — nó là hành động, không phải mục điều hướng. */
  .nav-menu .nav-acc { grid-column: 1 / -1; }
  /* Chế độ sáng/tối cũng là hành động, không phải mục điều hướng — trải hết
     bề ngang như .nav-acc, không kẹt lẻ loi trong một ô của lưới 2 cột. */
  .nav-menu .cheDo-btn { width: 100%; padding: 5px 12px; font-size: 0.85rem; grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  html { font-size: 17px; }
  /* iOS KHÔNG tự phóng to khi focus nếu input ≥ 16px — 17px vừa đạt mốc đó,
     vừa khớp cỡ chữ xung quanh (trước là 16px, giờ nhìn nhỏ hơn phần còn lại). */
  input, select, textarea, .form-control { font-size: 17px; }
  .stats-grid { grid-template-columns: 1fr; }
  .hero-content h1 { font-size: 2.3rem; }
  .hero-banner { padding: 36px 24px; }
  .select-btn-group { flex-direction: column; gap: 8px; }
  .summary-cards-row { grid-template-columns: 1fr; }
  .food-tabs-switch { grid-template-columns: 1fr; gap: 10px; }
  .ex-items { flex-direction: column; }
  .ex-eq { justify-content: center; }
}

/* Helpers */
.hidden { display: none !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success-dark) !important; }
.text-warning { color: var(--warning-dark) !important; }
.text-danger { color: var(--danger-dark) !important; }

/* ==========================================================================
   Banner ảnh Foods / Tips, ảnh chế độ ăn, và mục Cơ sở khoa học
   ========================================================================== */
.foods-banner {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin: 0 0 22px;
  border: 4px solid #FFFFFF;
  box-shadow: 0 12px 30px rgba(34, 45, 58, 0.14);
}
.foods-banner img { display: block; width: 100%; height: 220px; object-fit: cover; }
.foods-banner .foods-banner-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 18px;
  font-size: 0.95rem; font-weight: 600; color: #FFFFFF;
  background: linear-gradient(0deg, rgba(41,61,51,0.86) 0%, rgba(41,61,51,0) 100%);
}
/* Tab "Cần tránh": phủ lớp cảnh báo để ảnh KHÔNG trông hấp dẫn */
.foods-banner.banner-avoid img { filter: grayscale(35%) contrast(0.95) brightness(0.9); }
.foods-banner.banner-avoid::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(184, 60, 60, 0.16); pointer-events: none;
}
.foods-banner .cap-avoid {
  background: linear-gradient(0deg, rgba(150,40,40,0.92) 0%, rgba(150,40,40,0) 100%);
}

.tips-banner {
  border-radius: 18px; overflow: hidden; margin: 0 0 24px;
  border: 4px solid #FFFFFF; box-shadow: 0 12px 30px rgba(34, 45, 58, 0.12);
}
.tips-banner img { display: block; width: 100%; height: 200px; object-fit: cover; }

.diet-header-img {
  border-radius: 14px; overflow: hidden; margin: -4px 0 18px;
  border: 3px solid #FFFFFF; box-shadow: 0 10px 24px rgba(34, 45, 58, 0.12);
}
.diet-header-img img { display: block; width: 100%; height: 200px; object-fit: cover; }

/* Cơ sở khoa học */
.science-intro {
  max-width: 820px; color: var(--text-secondary);
  font-size: 1.02rem; line-height: 1.7; margin-bottom: 26px;
}
.science-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;
}
.science-card {
  background: var(--surface); border-radius: 16px; padding: 22px 22px 18px;
  border: 1px solid var(--border, #E7E1D4); border-top: 4px solid var(--gold);
  box-shadow: 0 8px 22px rgba(34, 45, 58, 0.07);
}
.science-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.science-card-head .science-ic { font-size: 1.5rem; line-height: 1; }
.science-card-head h3 { font-size: 1.1rem; color: var(--ink); margin: 0; }
.science-claim { color: var(--text-primary); line-height: 1.65; margin-bottom: 14px; font-size: 0.98rem; }
.science-refs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.science-refs li { position: relative; padding-left: 22px; font-size: 0.88rem; line-height: 1.55; }
.science-refs li::before { content: "🔗"; position: absolute; left: 0; top: 1px; font-size: 0.9rem; }
.science-refs a { color: var(--primary); text-decoration: none; border-bottom: 1px solid transparent; }
.science-refs a:hover { border-bottom-color: var(--primary); }
.science-note {
  margin-top: 26px; padding: 14px 18px; background: var(--gold-light);
  border-radius: 12px; color: var(--carb-dark); font-size: 0.92rem; line-height: 1.6;
}

@media (max-width: 480px) {
  .foods-banner img, .tips-banner img, .diet-header-img img { height: 160px; }
  .science-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14. Design refresh v2 — nâng chuẩn top nutrition app (GIỮ NGUYÊN palette)
   Pattern: ZOE warm-editorial · Noom tiết chế · Cronometer data-viz ·
   shadow mềm nhiều lớp · type scale rõ · badge/nút bo pill.
   ========================================================================== */
:root {
  --shadow-sm: 0 1px 2px rgba(41,61,51,.05), 0 2px 8px rgba(41,61,51,.04);
  --shadow: 0 4px 14px rgba(41,61,51,.06), 0 16px 32px rgba(41,61,51,.05);
  --shadow-hover: 0 10px 24px rgba(41,61,51,.09), 0 28px 54px rgba(70,159,76,.11);
  --radius-xl: 26px;
  --radius-pill: 999px;
  --border-hair: 1px solid rgba(41,61,51,.08);
}

/* Nhịp thở rộng hơn */
.main-content { max-width: 1160px; padding-top: 52px; padding-bottom: 52px; }

/* Header tinh tế + gạch chân active terracotta */
.app-header { background: rgba(243,239,230,.82); border-bottom: var(--border-hair); }
.nav-link.active { position: relative; }
/* Active chỉ báo bằng chữ đậm + nền cream trung tính — bỏ gạch cam (giữ hệ 1 màu nhấn xanh). */
.nav-link.active::after { display: none; }

/* Nút bo tròn pill + bóng mềm */
.btn { border-radius: var(--radius-pill); padding: 14px 30px; }
.btn-primary { box-shadow: 0 6px 18px rgba(70,159,76,.20); }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(70,159,76,.26); }
.filter-btn, .food-switch-btn { border-radius: var(--radius-pill); }

/* Section header: gạch accent gradient + h2 lớn, thoáng */
.section-header { margin-bottom: 40px; }
.section-header h2 { font-size: 2.5rem; letter-spacing: -0.02em; line-height: 1.12; }
.section-header h2::before {
  content: ""; display: block; width: 48px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--carb), var(--gold)); margin-bottom: 16px;
}
.section-header p { font-size: 1.12rem; line-height: 1.7; max-width: 680px; }

/* Hero: heading lớn hơn, ảnh sâu hơn */
.hero-banner { border-radius: var(--radius-xl); padding: 68px 60px; }
.hero-content { gap: 22px; }
.hero-content h1 { font-size: 3.4rem; letter-spacing: -0.025em; line-height: 1.08; }
.hero-content p { font-size: 1.18rem; line-height: 1.65; }
.hero-photo { border-width: 6px; box-shadow: 0 26px 54px rgba(70,159,76,.22); }
.badge-tag { background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); letter-spacing: 0.08em; }

/* Card đồng nhất: viền tóc + hover-lift mượt */
.card, .glass-card, .stat-card, .meal-card, .food-card, .tip-card, .guide-block,
.result-card, .micro-card, .nutrient-highlights-box, .science-card, .rule-item {
  border: var(--border-hair);
}
.stat-card, .meal-card, .food-card, .tip-card, .guide-block, .science-card, .rule-item {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s;
}
.stat-card:hover, .meal-card:hover, .food-card:hover, .tip-card:hover,
.guide-block:hover, .science-card:hover, .rule-item:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-hover);
}

/* Food switch "Cần tránh": terracotta ấm thay vì đỏ bão hoà */
.food-switch-btn { border-width: 1.5px; }
.food-switch-btn.active#btnShowAvoid {
  background-color: var(--carb); border-color: var(--carb);
  box-shadow: 0 6px 18px rgba(184,90,51,.26);
}

/* Data-viz: thanh macro dày, bo tròn hẳn, nền dịu */
.progress-bar-container, .total-progress-track {
  height: 12px; border: none; border-radius: var(--radius-pill);
  background: rgba(41,61,51,.08);
}
.progress-bar, .total-progress-fill { border-radius: var(--radius-pill); }

/* Số liệu to hơn (Cronometer/MFP) */
.main-value { font-size: 2.85rem; font-variant-numeric: tabular-nums; }
.stat-card h3 { font-size: 2.7rem; letter-spacing: -0.02em; }

/* Vi chất: accent gold trên đầu card */
.micro-card { border-top: 3px solid var(--gold); }
.micro-val { font-size: 1.2rem; }

/* Footer: chữ kem ấm trên navy */
.app-footer { color: rgba(243,239,230,.74); }

/* Reveal nhẹ nhàng hơn */
.js-enabled .reveal { transform: translateY(16px); }

/* Responsive tinh chỉnh */
@media (max-width: 768px) {
  .section-header h2 { font-size: 2rem; }
  .hero-banner { padding: 48px 32px; }
}
@media (max-width: 480px) {
  .hero-content h1 { font-size: 2.4rem; }
  .hero-banner { padding: 40px 24px; }
  .main-content { padding-top: 36px; }
}

/* Vòng tròn phân bổ năng lượng (macro donut) — chất Cronometer/MFP */
.macro-donut-wrap {
  display: flex; align-items: center; gap: 28px;
  margin: 6px 0 24px; flex-wrap: wrap;
}
.macro-donut {
  width: 152px; height: 152px; border-radius: 50%;
  position: relative; flex-shrink: 0;
  box-shadow: 0 10px 26px rgba(41,61,51,.12);
  background: conic-gradient(var(--carb) 0 50%, var(--primary) 50% 75%, var(--gold) 75% 100%);
}
.macro-donut::before {
  content: ""; position: absolute; inset: 27px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 2px 8px rgba(41,61,51,.10);
}
.macro-donut-center {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.macro-donut-center strong {
  font-family: var(--font-display); font-size: 1.55rem; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.macro-donut-center small { font-size: 0.82rem; color: var(--text-secondary); margin-top: 3px; }
.macro-donut-legend { display: flex; flex-direction: column; gap: 11px; min-width: 160px; }
.mdl-row { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--text-primary); }
.mdl-row strong { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.mdl-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.dot-carb { background: var(--carb); }
.dot-protein { background: var(--primary); }
.dot-fat { background: var(--gold); }

/* Thumbnail ảnh cho meal-card (thực đơn) */
.meal-thumb {
  margin: -24px -24px 8px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.meal-thumb img { display: block; width: 100%; height: 148px; object-fit: cover; }

/* Tab Mẹo — banner ảnh theo nhóm (bento) */
.tips-category { margin-bottom: 28px; }
.tips-cat-banner {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 18px; border: 4px solid #FFFFFF; box-shadow: var(--shadow);
}
.tips-cat-banner img { display: block; width: 100%; height: 152px; object-fit: cover; }
.tips-cat-title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 22px; font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700; color: #FFFFFF;
  background: linear-gradient(0deg, rgba(41,61,51,.82) 0%, rgba(41,61,51,0) 100%);
}
@media (max-width: 480px) {
  .meal-thumb img, .tips-cat-banner img { height: 130px; }
  .tips-cat-title { font-size: 1.2rem; }
}

/* ==========================================================================
   Công cụ tính cân nặng thai (EFW)
   ========================================================================== */
.efw-tool { margin: 0 0 40px; }
.efw-head { text-align: center; margin-bottom: 24px; }
.efw-head h2 { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); }
.efw-head p { color: var(--text-secondary); max-width: 640px; margin: 8px auto 0; font-size: 1rem; }
.efw-grid { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; }
.efw-form { display: flex; flex-direction: column; gap: 6px; }
/* min-height/line-height lặp lại đúng giá trị của quy tắc "đồng đều nhãn form"
   ở trên, vì 21/08/2026 hai nhãn "Mẹ mang"/"Mẹ đang mang" đã đổi sang <div>
   (chúng đứng đầu một nhóm NÚT, không có ô nhập nào để trỏ vào). Quy tắc kia
   chỉ nhắm <label> nên <div> tụt còn 25px giữa hàng xóm 39px — lệch nhịp dọc. */
.efw-label { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-top: 8px;
  min-height: 2.5em; line-height: 1.3; }
.efw-row2 { display: flex; gap: 10px; }
.efw-row2 .form-control { flex: 1; }
.efw-form .btn { margin-top: 14px; }
.efw-btn-ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); margin-top: 8px; }
.efw-btn-ghost:hover { background: var(--primary-light); }

/* ── Lỗi gắn ĐÚNG Ô + đơn vị gram nổi bật (05/09/2026) ──
   .efw-in-wrap bọc ô nhập cân nặng để cắm badge .efw-unit ("gram") đè lên góc
   phải — mẹ đọc số trên phiếu siêu âm và gõ, khỏi tự hỏi ô này tính bằng kg
   hay gram. .is-loi viền đỏ đúng ô sai; .efw-loi-o là dòng chữ lỗi ngay dưới
   ô đó (không còn đổ chung vào #efwResult); .efw-nhac-thutu là lời NHẮC
   không chặn khi tuổi thai lần này lệch thứ tự so với lần đo trước. */
.efw-in-wrap { position: relative; }
.efw-in-wrap .form-control { padding-right: 62px; }
.efw-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 0.8rem; font-weight: 700; color: var(--text-light); background: var(--bg-soft);
  padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.efw-goiy-phieu { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-light); }
.form-control.is-loi { border-color: var(--danger); }
.form-control.is-loi:focus { box-shadow: 0 0 0 3px var(--danger-light); }
.efw-loi-o { display: block; margin-top: 6px; color: var(--danger-dark); font-size: 0.85rem;
  font-weight: 600; line-height: 1.4; }
.efw-loi-nut { display: block; margin-top: 8px; background: var(--danger-dark); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 7px 14px; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.efw-loi-nut:hover { opacity: .88; }
.efw-nhac-thutu { margin-top: 6px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--warning-light); color: var(--warning-dark); font-size: 0.85rem; line-height: 1.4; }
/* Node dựng MỘT LẦN rồi chỉ đổi textContent — xoá chữ đi mà không ẩn thì còn
   trơ lại một vệt nền vàng có padding nằm dưới ô tuần. */
.efw-nhac-thutu:empty { display: none; }
.btn[aria-busy="true"] { opacity: .7; }

/* Header cố định cao 70px — chừa chỗ để cuộn tới kết quả không bị header che
   (window.loloCuonToi dùng block:"start"). */
.efw-output, .efw-result, .bio-results { scroll-margin-top: 92px; }
.efw-output { min-height: 100px; }
.efw-result:not(:empty) { padding: 18px 20px; border-radius: var(--radius-md);
  border: 1px solid var(--border); border-left-width: 5px; }
.efw-result.state-normal { border-left-color: var(--success-dark); }
.efw-result.state-warn { border-left-color: var(--warning-dark); }
.efw-result.state-danger { border-left-color: var(--danger-dark); }
.efw-result.state-normal { background: var(--success-light); color: var(--success-dark); }
.efw-result.state-warn { background: var(--warning-light); color: var(--warning-dark); }
.efw-result.state-danger { background: var(--danger-light); color: var(--danger-dark); }
.efw-res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.efw-res-k { display: block; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; opacity: 1; }
.efw-res-v { font-size: 1.12rem; font-weight: 700; }
.efw-res-v.efw-centile { font-family: var(--font-display); font-size: 1.45rem; }
.efw-std { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; background: rgba(41,61,51,.12); color: var(--ink); padding: 2px 8px; border-radius: 999px; margin-left: 4px; font-style: normal; }
.efw-res-verdict { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light);
  font-weight: 800; font-size: 1.05rem; }

/* ── Song thai: chọn số thai + hai cột kết quả ── */
.efw-seg { display: flex; gap: 8px; margin-top: 6px; }
.efw-seg-nut { flex: 1; padding: 10px 8px; border-radius: var(--radius-sm, 10px); border: 1.5px solid var(--border);
  background: transparent; color: var(--text-secondary); font-weight: 700; font-size: .92rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s; }
.efw-seg-nut.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.efw-hoso-note { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--primary-light);
  color: var(--primary-dark); font-size: .84rem; line-height: 1.55; }
.efw-res-grid-song { grid-template-columns: repeat(2, 1fr); }
.efw-song-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
/* Thẻ của từng bé: dùng TOKEN surface để tự lật theo chế độ Ngày/Đêm. Bản cũ
   hardcode rgba(255,255,255,.42) nên ở nền tối thành ô xám bạc, chữ xanh nhạt
   trên xám → tương phản rất kém (anh Tú báo 19/08). */
.efw-song-be { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px); padding: 13px 15px; }
.efw-song-be h5 { font-size: 0.92rem; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px; font-weight: 800; color: var(--text-primary); opacity: 1;
  padding-bottom: 7px; border-bottom: 1px solid var(--border-light); }
.efw-song-be .efw-res-grid { grid-template-columns: 1fr; gap: 7px; }
.efw-song-be .efw-res-v.efw-centile { font-size: 1.34rem; }
.efw-song-nhan { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border-light);
  font-size: 0.94rem; line-height: 1.45; font-weight: 700; }
@media (max-width: 560px) { .efw-song-2 { grid-template-columns: 1fr; } }
/* Dòng "Tặng công cụ này" (Task 8, 01/09/2026) — sau khi có kết quả. */
.efw-tang { margin-top: 12px; text-align: center; }
/* color: var(--chu-nhan) cho khớp 3 nút tặng còn lại (tt/cd/tc-tang-nut);
   `inherit` trước đây lấy màu chữ thân trang nên nút trông như chữ thường. */
.efw-tang-nut { background: none; border: none; color: var(--chu-nhan, #37813C); font-size: 0.88rem; font-weight: 600; cursor: pointer; padding: 8px 4px; }
.efw-tang-nut:hover { text-decoration: underline; }

/* 14/09/2026 — "Hỏi điều dưỡng về kết quả này" + dòng góp ý dưới kết quả cân nặng
   (js/efw-calc.js). Nút chính ≥44px cho ngón tay; màu chữ lấy --bg-main để theme tối
   (nền vàng --chu-nhan) vẫn đọc được. */
.efw-hoi-dd { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-warm, #FDFBF6); border: 1px solid var(--border-light, #E5DDCD); }
.efw-hoi-dd p { margin: 0 0 8px; font-size: .92rem; line-height: 1.5; color: var(--text-secondary, #667581); }
.efw-hoi-dd-nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 10px 14px; border: none; border-radius: 999px; background: var(--chu-nhan, #37813C); color: var(--bg-main, #fff); font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; }
.efw-hoi-dd-nut:hover { filter: brightness(1.06); }
.efw-hoi-dd small { display: block; margin-top: 6px; font-size: .8rem; line-height: 1.45; color: var(--text-light, #5E6B77); }
/* 14/09 (anh Tú): link chế độ ăn Thai nhỏ / Thai to lặp lại ngay trong thẻ — khối lời khuyên bên dưới vẫn có nút cũ. */
.efw-hoi-dd-cda { display: block; width: 100%; margin-top: 10px; min-height: 40px; padding: 8px 12px; background: none; border: 1px solid var(--chu-nhan, #37813C); border-radius: 999px; color: var(--chu-nhan, #37813C); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.efw-hoi-dd-cda:hover { background: var(--bg-soft, #F1EDE3); }
.efw-gop-y { text-align: center; margin-top: 2px; }
.efw-gop-y-nut { background: none; border: none; color: var(--text-secondary, #667581); font: inherit; font-size: .84rem; text-decoration: underline; cursor: pointer; padding: 6px 4px; min-height: 36px; }
.efw-advice-inner { background: var(--surface); border: var(--border-hair); border-radius: var(--radius-md); padding: 16px 18px; margin-top: 12px; box-shadow: var(--shadow-sm); }
.efw-advice-inner h4 { color: var(--carb-dark); font-size: 1.02rem; margin-bottom: 8px; }
.efw-advice-inner p { font-size: 0.92rem; line-height: 1.65; color: var(--text-secondary); }
.efw-cta { margin-top: 14px; width: 100%; }

/* Hàng "Mẹ mở ngay được" dưới lời khuyên — dựng sau khi xem lại phiên Clarity 17/08/2026:
   mẹ bấm 8 lần vào dòng chữ "Việc cần làm…" mà không có gì xảy ra. Nút phải trông rõ là
   bấm được, và cao tối thiểu 44px cho ngón tay. */
.efw-viec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.efw-viec-nhan {
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: rgba(214, 231, 220, .72);
  letter-spacing: .2px;
}
.efw-viec-nut {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #D6E7DC;
  background: rgba(141, 239, 192, .10);
  border: 1px solid rgba(141, 239, 192, .34);
  border-radius: 999px;
  cursor: pointer;
}
.efw-viec-nut:active { background: rgba(141, 239, 192, .22); }

.efw-giaithich-nut {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 0;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  /* 05/09 (review toàn nhánh): hai khối này SỐNG TRONG .efw-result — nền
     state-normal/warn/danger đều NHẠT. Màu chữ sáng của theme tối để lại đây
     cho tương phản ~1.2:1, mẹ gần như không đọc được. Lấy token chữ thường. */
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(141, 239, 192, .5);
  cursor: pointer;
}
.efw-giaithich {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── 4 câu giải thích hiện TRƯỚC con số + số bấm được + gợi ý nối tiếp
   (Task 6, 05/09/2026). Nằm trong .efw-result (nền sáng theo trạng thái) nên
   dùng token chữ thường, KHÔNG hardcode màu sáng như .efw-giaithich ở trên. */
.efw-4cau { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-light); }
.efw-cau b { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 3px; }
.efw-cau p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.efw-cau ul { margin: 4px 0 0; padding-left: 20px; font-size: 0.92rem; line-height: 1.55; }
.efw-cau li { margin-bottom: 2px; }
/* Mỗi ô EFW/Z-score/Bách phân vị giờ là một nút — chạm số để mở giải thích
   ngay dưới, thay vì phải tìm nút ℹ️ riêng ở cuối kết quả. */
.efw-so { display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 4px 6px; margin: -4px -6px; font: inherit; color: inherit; cursor: pointer;
  border-radius: 8px; position: relative; }
.efw-so::after { content: "▾"; position: absolute; top: 4px; right: 4px; font-size: 0.7rem; opacity: .55; }
.efw-so[aria-expanded="true"]::after { content: "▴"; opacity: .85; }
.efw-so:hover, .efw-so:focus-visible { background: rgba(0,0,0,.06); }
.efw-tiep { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.efw-tiep > span { width: 100%; font-size: 0.86rem; font-weight: 700; color: var(--text-secondary); }
.efw-tiep-nut { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 8px 14px; font-size: 0.86rem; font-weight: 600; font-family: inherit;
  color: var(--primary-dark); background: var(--primary-light); border: 1px solid transparent;
  border-radius: 999px; cursor: pointer; text-decoration: none; }
.efw-tiep-nut:hover { filter: brightness(0.96); }

.efw-chart-wrap { margin-top: 14px; background: var(--surface); border: var(--border-hair); border-radius: var(--radius-md); padding: 12px; }
#efwCompare { margin-top: 14px; }
.efw-cmp-title { font-size: 0.98rem; color: var(--ink); margin-bottom: 10px; }
.efw-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.efw-table th { background: var(--primary-light); color: var(--primary-dark); padding: 8px 6px; text-align: center; font-weight: 700; }
.efw-table td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--border-light); }
.efw-row-last td { background: var(--gold-light); font-weight: 700; color: var(--ink); }
.efw-up { color: var(--success-dark); font-weight: 700; }
.efw-down { color: var(--danger-dark); font-weight: 700; }
.efw-flat { color: var(--text-light); }
.efw-cmp-note { font-size: 0.92rem; color: var(--text-light); margin-top: 8px; }

/* Lịch sử theo thai kỳ + nghi nhập nhầm + xoá dòng (Task 8, 05/09/2026):
   nhiều thai kỳ giờ hiện thành NHIỀU bảng riêng (mới nhất trước) — mỗi bảng
   cách bảng trước một khoảng để mắt tách được ranh giới hai thai kỳ. Dòng
   "nghi nhập nhầm" nổi bật bằng nền vàng nhạt (không dùng đỏ — đây chỉ là
   một lời nhắc kiểm tra lại, không phải cảnh báo y khoa) và không có mũi
   tên xu hướng (đã nghi sai thì mũi tên vô nghĩa); có nút xoá ngay tại dòng
   để mẹ tự sửa dữ liệu cũ mà không cần rời màn hình. */
.efw-nhom-tt { margin-top: 20px; }
.efw-nhom-tt:first-child { margin-top: 0; }
.efw-row-nghi td { background: var(--warning-light); }
.efw-nghi { display: block; margin-top: 3px; font-size: 0.78rem; font-weight: 600; color: var(--warning-dark); }
.efw-xoa-dong { display: inline-block; margin-top: 5px; padding: 4px 12px; min-height: 30px;
  font-size: 0.76rem; font-weight: 600; font-family: inherit; color: var(--danger-dark);
  background: var(--danger-light); border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.efw-xoa-dong:hover { filter: brightness(0.96); }
.efw-disclaimer { margin-top: 18px; font-size: 0.85rem; color: var(--text-secondary); text-align: center; }
.efw-src-link { color: var(--primary); border-bottom: 1px solid transparent; }
.efw-src-link:hover { border-bottom-color: var(--primary); }
@media (max-width: 768px) { .efw-grid { grid-template-columns: 1fr; } .efw-head h2 { font-size: 1.6rem; } }

/* ==========================================================================
   15. Nav gọn 1 hàng + thẻ CTA công cụ cân nặng thai (trang chủ)
   ========================================================================== */
/* Nav: chữ ngắn + sát hơn; thu về hamburger sớm (≤1024px) để KHÔNG xuống 2 hàng */
.nav-menu { gap: 0; }
.nav-link { font-size: 0.85rem; padding: 8px 10px; }
@media (max-width: 1024px) {
  .menu-toggle { display: flex; }
  .nav-menu {
    display: none; position: absolute; top: calc(70px + env(safe-area-inset-top, 0px)); left: 0; right: 0;
    background: var(--surface); flex-direction: column;
    padding: 8px 12px; box-shadow: var(--shadow);
    border-bottom: 1px solid var(--border); gap: 2px;
  }
  /* Khối này TRÙNG với khối 1150px ở trên và đè lên nó dưới 1024px — phải giữ
     cùng con số, không thì thu nhỏ ở cửa sổ hẹp rồi lại phình ra ở điện thoại. */
  .nav-menu.open { display: grid; grid-template-columns: 1fr 1fr; }
  .nav-link { width: 100%; padding: 5px 12px; font-size: 0.85rem; line-height: 1.3; }
  .nav-menu .nav-acc { grid-column: 1 / -1; }
  .nav-menu .cheDo-btn { width: 100%; padding: 5px 12px; font-size: 0.85rem; grid-column: 1 / -1; }
  .nav-link.active::after { display: none; }
}

/* 20/08/2026 (lệnh anh Tú): "menu cho 1 hàng trên điện thoại và không hết bề
   ngang, chiếm 1 nửa thôi, còn nhìn thấy phía sau".
   Lưới 2 cột hợp với cửa sổ hẹp trên máy bàn, nhưng trên điện thoại nó trải hết
   bề ngang nên vẫn có cảm giác bị chặn tầm nhìn. Ở đây đổi sang MỘT CỘT, panel
   hẹp nép bên phải ngay dưới nút hamburger — nửa màn hình bên trái vẫn thấy
   nội dung, bấm vào đó cũng là đóng menu (xem dongMenu trong js/app.js). */
@media (max-width: 600px) {
  .nav-menu {
    left: auto; right: 10px;
    width: min(52vw, 230px);
    border-radius: 16px;
    border-bottom: none;
    box-shadow: 0 14px 30px rgba(20, 30, 25, .32);
  }
  .nav-menu.open { grid-template-columns: 1fr; }
  /* Một cột rồi thì nút tài khoản không cần trải ngang nữa. */
  .nav-menu .nav-acc { grid-column: auto; }
  .nav-menu .cheDo-btn { grid-column: auto; }
  .nav-link { padding: 7px 12px; }
}

/* Thẻ CTA công cụ cân nặng thai */
.home-tool-cta {
  display: flex; align-items: center; gap: 20px;
  margin: 0 0 40px; padding: 24px 28px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--gold-light) 100%);
  border: var(--border-hair); box-shadow: var(--shadow);
  color: var(--ink); transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s;
}
.home-tool-cta:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
/* Hướng dẫn "Thêm vào màn hình chính" (09/08/2026) — thẻ đầu trang chủ */
.a2hs {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-color, #e5ddcd);
  border-radius: 18px;
  padding: 16px 18px 18px;
  margin: 18px 0 22px;
  box-shadow: 0 4px 14px rgba(41, 61, 51, .07);
}
.a2hs[hidden] { display: none; }
.a2hs-close {
  position: absolute; top: 6px; right: 12px;
  background: none; border: none; font-size: 1.5rem;
  color: #8a97a1; cursor: pointer; line-height: 1;
}
.a2hs-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.a2hs-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.5rem;
  border-radius: 13px;
  background: linear-gradient(145deg, #f4faf3, #e2f1e3);
  border: 1px solid rgba(70, 159, 76, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 6px rgba(41, 61, 51, .08);
}
.a2hs-head strong { display: block; font-family: var(--font-display, sans-serif); font-size: 1.05rem; color: #293D33; }
.a2hs-head span { font-size: .88rem; color: #667581; }
.a2hs-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.a2hs-tab {
  flex: 1; max-width: 160px; padding: 8px 12px;
  border: 1px solid #e5ddcd; border-radius: 999px;
  background: #fdfbf6; color: #667581; font: inherit; font-weight: 600;
  font-size: .9rem; cursor: pointer;
}
.a2hs-tab.on { background: #469F4C; border-color: #469F4C; color: #fff; }
.a2hs-steps { margin: 0; padding-left: 20px; font-size: .92rem; line-height: 1.7; color: #293D33; }
.a2hs-steps[hidden] { display: none; }
/* Nhắc đăng nhập trước khi mẹ mở sang trình duyệt khác (03/09/2026): mất hồ
   sơ ở bước này là chỗ mất mẹ nhiều nhất, nên phải nổi hơn chữ thường một
   bậc — nhưng KHÔNG dùng màu đỏ cảnh báo: mẹ chưa làm gì sai. */
.a2hs-nhac {
  margin: 10px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: #FFF7E6; border: 1px solid #F2D9A0;
  font-size: .9rem; line-height: 1.6; color: #5C4413;
}

/* 10/08/2026: FREE mode (pro_active=false) → ẩn mọi nhãn PRO tĩnh. auth-gate
   thêm class body.lolo-pro-on khi bật thu phí; không có class = ẩn nhãn. */
body:not(.lolo-pro-on) .pro-tag { display: none !important; }

/* Nhãn PRO (09/08/2026): ký hiệu nhỏ đặt trên đầu chữ ở mọi tính năng thu phí
   (cân nặng thai, tiểu đường, tra cứu xét nghiệm, khoá học dinh dưỡng, yoga, stress). */
.pro-tag {
  display: inline-block;
  font-family: var(--font-display, sans-serif);
  font-size: .56em; font-weight: 800; letter-spacing: .08em;
  color: #fff; background: #C2410C;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  padding: 2px 7px; border-radius: 7px;
  vertical-align: super; margin-left: 6px; line-height: 1.2;
  box-shadow: 0 1px 3px rgba(154, 52, 18, .35);
}

/* Icon kiểu Apple (09/08/2026): emoji đặt trong ô vuông bo góc mềm như icon app iOS,
   nền gradient nhạt đồng bộ toàn bộ thẻ — cùng ngôn ngữ với icon màn đăng ký (auth-gate). */
.htc-icon {
  width: 58px; height: 58px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.9rem; line-height: 1;
  border-radius: 16px;
  background: linear-gradient(145deg, #f4faf3, #e2f1e3);
  border: 1px solid rgba(70, 159, 76, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 6px rgba(41, 61, 51, .08);
}
.htc-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.htc-body strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.htc-body span { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.55; }
.htc-btn {
  flex-shrink: 0; white-space: nowrap;
  background: var(--primary); color: #FFFFFF;
  padding: 12px 24px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.95rem; box-shadow: 0 6px 16px rgba(70,159,76,.22);
}
.home-tool-cta:hover .htc-btn { background: var(--primary-hover); }
@media (max-width: 640px) {
  .home-tool-cta { flex-direction: column; text-align: center; }
  .htc-btn { width: 100%; text-align: center; }
}

/* Mục lục trang chủ — điều hướng tới mọi nội dung */
.home-toc { margin: 24px 0 8px; }
.home-toc-head { text-align: center; max-width: 640px; margin: 0 auto 18px; }
.home-toc-head h2 { margin: 0 0 6px; }
.home-toc-head p { margin: 0; color: var(--text-secondary); }
.home-toc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.toc-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: var(--transition);
}
.toc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--primary-light); }
.toc-ic { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }
.toc-tx { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.toc-tx strong { color: var(--ink); font-family: var(--font-heading); font-size: 1.08rem; }
.toc-tx span { color: var(--text-secondary); font-size: .9rem; line-height: 1.45; }
.toc-go { color: var(--primary); font-size: 1.3rem; font-weight: 700; flex: 0 0 auto; }
@media (max-width: 640px) { .home-toc-grid { grid-template-columns: 1fr; } }

/* Liên hệ & phòng khám */
.home-contact { margin: 28px 0 8px; }
.home-contact-head { text-align: center; margin: 0 auto 16px; }
.home-contact-head h2 { margin: 0 0 4px; }
.home-contact-head p { margin: 0; color: var(--text-secondary); }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.contact-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: var(--transition); }
.contact-item:hover { border-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.contact-ic { font-size: 1.5rem; flex: 0 0 auto; }
.contact-tx { display: flex; flex-direction: column; min-width: 0; }
.contact-tx strong { color: var(--ink); font-size: .98rem; }
.contact-tx span { color: var(--text-secondary); font-size: .86rem; }
.contact-tx em { color: var(--primary); font-style: normal; font-weight: 600; }
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }

/* Nút Đặt lịch khám nổi bật — dính khi cuộn, hiện Ở MỌI TRANG (lệnh user 09/08) */
.social-float { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 950; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.float-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.float-gom { display: none; }   /* máy tính: mép phải rộng, không cần gom */
.book-cta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 80px; padding: 15px 8px; border-radius: 22px; text-decoration: none; text-align: center; color: var(--text-primary); background: var(--surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border-light); box-shadow: 0 10px 28px rgba(34, 45, 58, .16); transition: transform .18s ease, box-shadow .18s ease; }
.book-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(34, 45, 58, .22); }
.book-cta:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 3px; }
.book-cta-ic { display: inline-flex; color: var(--text-secondary); }
.book-cta-ic svg { width: 30px; height: 30px; fill: var(--text-secondary); }
.book-cta-tx { font-size: 0.94rem; font-weight: 700; line-height: 1.15; letter-spacing: .2px; }
.book-cta-pulse { display: none; }
@keyframes bookPulse {
  0% { box-shadow: 0 0 0 0 rgba(70, 159, 76, .55); }
  70% { box-shadow: 0 0 0 18px rgba(70, 159, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 159, 76, 0); }
}
@media (prefers-reduced-motion: reduce) { .book-cta-pulse { animation: none; } }

/* Nút Nhóm Zalo — cạnh nút Đặt lịch khám, cùng khối .social-float */
.zalo-cta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 80px; padding: 15px 8px; border-radius: 22px; text-decoration: none; text-align: center; color: var(--surface); background: var(--primary); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 12px 28px rgba(58, 138, 67, .5); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.zalo-cta:hover { background: var(--primary-hover); transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 34px rgba(58, 138, 67, .62); }
.zalo-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.zalo-cta-ic { display: inline-flex; font-size: 26px; line-height: 1; }
.zalo-cta-tx { font-size: 0.92rem; font-weight: 800; line-height: 1.15; letter-spacing: .2px; }
.zalo-cta-badge { position: absolute; top: -9px; right: -10px; background: var(--danger); color: var(--surface); font-size: 0.72rem; font-weight: 800; letter-spacing: .02em; padding: 3px 7px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); border: 2px solid var(--surface); white-space: nowrap; }
@media (max-width: 768px) {
  /* 10/08/2026: nút nổi hiện MỌI trang → trên điện thoại dời xuống góc dưới-phải
     để KHÔNG che chữ giữa trang khi mẹ đang đọc công cụ/bài viết.
     23/08/2026: dời xuống góc thôi vẫn chưa đủ — ba nút xếp dọc cao gần nửa màn
     hình, che số kcal và tên món ở mục Thực đơn (ảnh Clarity). Nay CỤP LẠI sau
     một nút tròn, bấm mới bung; xem js/app.js khối "gom nút nổi". */
  .social-float { right: 12px; gap: 10px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: none; align-items: flex-end; }
  /* Chừa đáy vừa đúng nút tròn 54px, không phải cả cụm như trước */
  .main-content { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .float-stack { display: none; gap: 10px; align-items: flex-end; margin-bottom: 2px; }
  .social-float.mo .float-stack { display: flex; animation: floatBung .18s ease-out both; }
  @keyframes floatBung { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .float-gom {
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; padding: 0; border-radius: 50%;
    color: #FFFFFF; background: var(--primary);
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 10px 26px rgba(58, 138, 67, .5);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .float-gom:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
  /* Dấu + vẽ bằng hai vạch để xoay thành dấu × lúc cụm đang mở */
  .float-gom-ic { position: relative; display: block; width: 22px; height: 22px; transition: transform .2s ease; }
  .float-gom-ic::before, .float-gom-ic::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    background: currentColor; border-radius: 2px; transform: translate(-50%, -50%);
  }
  .float-gom-ic::before { width: 22px; height: 3px; }
  .float-gom-ic::after { width: 3px; height: 22px; }
  .social-float.mo .float-gom-ic { transform: rotate(45deg); }
  @media (prefers-reduced-motion: reduce) {
    .social-float.mo .float-stack { animation: none; }
    .float-gom-ic { transition: none; }
  }
  .book-cta { width: 66px; padding: 12px 6px; border-radius: 18px; }
  .book-cta-ic svg { width: 26px; height: 26px; }
  .book-cta-tx { font-size: 0.86rem; }
  .book-cta-pulse { border-radius: 18px; }
  .zalo-cta { width: 66px; padding: 12px 6px; border-radius: 18px; }
  .zalo-cta-ic { font-size: 22px; }
  .zalo-cta-tx { font-size: 0.82rem; }
  .zalo-cta-badge { font-size: .56rem; padding: 2px 6px; top: -7px; right: -8px; }
}
@media (max-width: 420px) {
  .book-cta { width: 60px; padding: 10px 5px; }
  .book-cta-ic svg { width: 23px; height: 23px; }
  .book-cta-tx { font-size: 0.8rem; }
  .zalo-cta { width: 60px; padding: 10px 5px; }
  .zalo-cta-ic { font-size: 19px; }
  .zalo-cta-tx { font-size: 0.76rem; }
  .zalo-cta-badge { top: -6px; right: -6px; }
}

/* ==========================================================================
   Nút nổi ĐỘC LẬP "Mời bạn nhận Pro" (01/09/2026) — xem index.html.
   Đứng NGOÀI .social-float/#floatGom nên "+" không che được nó, và không
   cần đăng nhập mới thấy — trước đây #referralFabBtn nằm TRONG cụm, phải
   bấm "+" bung ra VÀ đăng nhập mới hiện, nên gần như không ai thấy (chương
   trình mời bạn "không ai chơi"). js/game-popup.js bật/tắt bằng
   style.display, theo game.dang_chay đọc từ /api/referral/leaderboard
   (public, không cần token — tái dùng đúng fetch popup đã gọi).

   display:flex ở ĐÂY (không phải "none"): HTML để sẵn style="display:none"
   inline để không loé lên; JS chỉ xoá inline (style.display = "") lúc bật,
   khi đó nút rơi về đúng "display: flex" của class này — giống nếp
   .zalo-cta/#referralFabBtn cũ, ĐỪNG đặt "none" ở class kẻo JS xoá inline
   xong nút vẫn mất tăm.

   Vị trí: cụm "+" bung ra mọc THẲNG LÊN TRÊN #floatGom (xem test/nut-noi-
   gom-dien-thoai.test.js — "nút tròn phải nằm DƯỚI cụm"), nên đặt nút này
   NGAY PHÍA TRÊN "+" sẽ bị cụm bung đè lên. Đặt CẠNH nó (bên trái, cùng
   hàng ngang) thì cụm bung theo chiều dọc không bao giờ chạm tới — an toàn
   trong MỌI trạng thái đóng/mở của "+". Máy tính: .social-float nằm GIỮA
   mép phải (top:50%), nút này đứng riêng ở góc dưới-phải, cách xa cụm. */
.moi-ban-fab {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 955;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 82px;
  padding: 13px 8px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  background: linear-gradient(155deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--surface);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 12px 28px rgba(195, 164, 104, .5);
  transition: transform .18s ease, box-shadow .18s ease;
  animation: mbfRungChuong 2.2s ease-in-out infinite;
}
/* Rung như chuông cho tới khi mẹ bấm: mỗi 2,2s lắc một hồi (~0,7s) rồi
   đứng yên — nút nằm nép ở góc, không động đậy thì mẹ lướt qua không thấy
   (chương trình mời bạn "không ai chơi" đúng vì nút chìm).

   Xoay quanh TÂM (mặc định), không quanh mép trên: trên điện thoại nút chỉ
   cách cụm "+" (#floatGom) 8-10px, mà nút cao tới 97-108px (chữ xuống 3
   dòng) — pivot ở mép trên thì hai góc đáy văng ngang cả chục px và đè lên
   cụm. Quanh tâm, chỗ lấn rộng nhất = (cao/2)·sin(góc). Góc chốt 6°, đo
   bằng getBoundingClientRect: khổ ≤768px hở 10px → còn 4,6px; khổ ≤420px
   hở 8px → còn 3,1px, giữ đúng luật "không chồng lên #floatGom" ở
   test/referral-dong-mo.test.js. ĐỪNG nâng lên 9° cho "rung mạnh hơn":
   9° lấn 8,4px, ăn sạch khe hở khổ nhỏ.

   Chỉ động vào transform (GPU), không đụng box-shadow — tránh vẽ lại nền
   mỗi khung hình trên máy yếu.

   Hover/bấm phải TẮT hẳn animation: animation luôn đè transform của
   :hover, để nguyên thì cái nhấc lên 2px kia không bao giờ chạy. */
@keyframes mbfRungChuong {
  0%        { transform: rotate(0deg); }
  3%        { transform: rotate(-6deg); }
  7%        { transform: rotate(5.4deg); }
  11%       { transform: rotate(-4.6deg); }
  15%       { transform: rotate(3.6deg); }
  19%       { transform: rotate(-2.6deg); }
  23%       { transform: rotate(1.6deg); }
  27%       { transform: rotate(-0.8deg); }
  31%, 100% { transform: rotate(0deg); }
}
.moi-ban-fab:hover,
.moi-ban-fab:active,
.moi-ban-fab:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) { .moi-ban-fab { animation: none; } }
.moi-ban-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 34px rgba(195, 164, 104, .62); }
.moi-ban-fab:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 3px; }
.mbf-badge {
  position: absolute; top: -9px; right: -10px;
  background: var(--danger); color: var(--surface);
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  padding: 3px 7px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25); border: 2px solid var(--surface);
  white-space: nowrap;
}
.mbf-ic { display: block; font-size: 24px; line-height: 1; }
.mbf-tx { display: block; font-weight: 800; font-size: .84rem; line-height: 1.15; letter-spacing: .1px; }
@media (max-width: 768px) {
  /* Cùng hàng ngang với #floatGom (right:12px, bottom theo safe-area, rộng
     54px) — đặt CẠNH bên trái nó, cách 10px, KHÔNG đặt phía trên (xem ghi
     chú vị trí ở đầu khối). */
  .moi-ban-fab {
    right: calc(12px + 54px + 10px);
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 68px;
    padding: 10px 6px;
  }
  .mbf-ic { font-size: 20px; }
  .mbf-tx { font-size: .74rem; }
  .mbf-badge { font-size: .56rem; padding: 2px 6px; top: -7px; right: -8px; }
}
@media (max-width: 420px) {
  .moi-ban-fab { right: calc(12px + 54px + 8px); width: 60px; padding: 8px 5px; }
  .mbf-ic { font-size: 18px; }
  .mbf-tx { font-size: .68rem; }
}

/* ==========================================================================
   ẨN CỤM NÚT NỔI KHI MẸ ĐANG NHẬP/XEM KẾT QUẢ (05/09/2026, cải thiện T9).
   js/app.js gắn class này lên <body> khi: đang ở mục "Các chỉ số thai nhi"
   (efw) / "Sổ kết quả khám" (sokham) — hai màn có biểu đồ/kết quả choán hết
   bề ngang — HOẶC mẹ vừa chạm vào một ô nhập bất kỳ (bàn phím ảo đẩy trang
   lên, cụm nổi đè lên đúng chỗ mẹ đang gõ). #socialFloat (đặt lịch + Zalo)
   và #moiBanFab (Mời bạn nhận Pro) đứng độc lập nên phải ẩn CẢ HAI.
   ========================================================================== */
.lolo-an-noi #socialFloat, .lolo-an-noi #moiBanFab { display: none !important; }

/* ==========================================================================
   Thẻ giới thiệu TÁC GIẢ ở đầu trang chủ (ngay sau hero)
   Mặc định thu gọn: ảnh + tên + chức danh + 4 ô số liệu. Bấm "Xem đầy đủ"
   mới mở học vấn / chuyên môn / công bố / GENOLIFE / địa chỉ phòng khám.
   Dùng token brand app (ink · green · cream · warm · border · Outfit/Inter).
   ========================================================================== */
.au-card { max-width: 1000px; margin: 34px auto 0; padding: 26px 26px 24px; background: var(--surface, #fff); border: 1px solid var(--border, #e5ddcd); border-radius: var(--radius-lg, 20px); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06)); }
.au-hero { display: flex; gap: 22px; align-items: center; }
.au-avatar { flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 4px solid var(--surface, #fff); box-shadow: 0 0 0 1px var(--border-light), 0 10px 26px rgba(34,45,58,.12); background: var(--surface-warm, #fdfbf6); }
.au-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transform: scale(1.42); filter: saturate(.9); display: block; }
.au-id { min-width: 0; }
.au-eyebrow { display: inline-block; font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 700; font-size: 0.82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark, #a07d38); background: var(--gold-light, #f3ecdb); padding: 5px 11px; border-radius: 999px; }
.au-card h2 { font-family: var(--font-heading, 'Outfit', sans-serif); color: var(--ink, #293D33); font-size: 1.5rem; line-height: 1.25; margin: 10px 0 4px; }
.au-role { color: var(--primary-dark, #2E7D32); font-weight: 600; font-size: .95rem; margin: 0 0 4px; }
.au-slogan { color: var(--text-secondary, #667581); font-style: italic; font-size: .95rem; margin: 0; }
.au-photo { color: var(--text-light, #8a97a1); font-size: 0.88rem; margin: 6px 0 0; }

.au-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.au-stat { text-align: center; padding: 14px 10px; border-radius: var(--radius-md, 14px); background: var(--surface-warm, #fdfbf6); border: 1px solid var(--border, #e5ddcd); }
.au-n { display: block; font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 800; font-size: 1.32rem; line-height: 1.15; color: var(--primary, #469F4C); }
.au-n small { font-size: .62em; font-weight: 700; }
.au-l { display: block; margin-top: 5px; color: var(--text-secondary, #667581); font-size: 0.9rem; line-height: 1.35; }

.au-toggle { display: block; width: 100%; margin-top: 18px; cursor: pointer; padding: 12px 18px; border-radius: var(--radius-md, 14px); border: 1.5px solid var(--border, #e5ddcd); background: var(--surface-warm, #fdfbf6); color: var(--ink, #293D33); font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 600; font-size: .95rem; transition: var(--transition, all .3s); }
.au-toggle:hover { background: #f3eee3; border-color: var(--primary, #469F4C); }

.au-more { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border, #e5ddcd); }
.au-more[hidden] { display: none; }
.au-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.au-card .au-more h3 { font-family: var(--font-heading, 'Outfit', sans-serif); color: var(--ink, #293D33); font-size: 1.02rem; margin: 0 0 10px; }
.au-card .au-more h3 + h3, .au-pubs + h3 { margin-top: 14px; }
.au-col p { color: var(--text-secondary, #667581); font-size: .9rem; line-height: 1.6; margin: 0 0 10px; }
.au-col b { color: var(--ink, #293D33); }
.au-tl { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border, #e5ddcd); color: var(--text-secondary, #667581); font-size: .88rem; line-height: 1.5; }
.au-tl:last-child { border-bottom: none; }
.au-yr { flex: 0 0 62px; font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 700; color: var(--primary, #469F4C); }
.au-pubs { margin: 0; padding-left: 20px; color: var(--text-secondary, #667581); font-size: .86rem; line-height: 1.6; }
.au-pubs li { margin-bottom: 6px; }

.au-box { margin-top: 20px; padding: 18px 20px; border-radius: var(--radius-md, 14px); background: var(--surface-warm, #fdfbf6); border: 1px solid var(--border, #e5ddcd); }
.au-box p, .au-box li { color: var(--text-secondary, #667581); font-size: .89rem; line-height: 1.6; }
.au-box p { margin: 0 0 10px; }
.au-box ul { margin: 0 0 10px; padding-left: 20px; }
.au-box li { margin-bottom: 4px; }
.au-box b { color: var(--ink, #293D33); }
.au-coi { font-size: 0.94rem !important; color: var(--text-light, #8a97a1) !important; margin-bottom: 0 !important; }

.au-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.au-book, .au-web { display: inline-block; padding: 13px 22px; border-radius: var(--radius-md, 14px); text-decoration: none; font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 700; font-size: .96rem; transition: var(--transition, all .3s); }
.au-book { background: var(--primary, #469F4C); color: #fff; }
.au-book:hover { background: var(--primary-hover, #37813C); box-shadow: var(--shadow-hover, 0 14px 34px rgba(70, 159, 76, .2)); }
.au-web { background: var(--surface-warm, #fdfbf6); color: var(--ink, #293D33); border: 1.5px solid var(--border, #e5ddcd); }
.au-web:hover { border-color: var(--primary, #469F4C); }
.au-note { margin: 14px 0 0; color: var(--text-light, #8a97a1); font-size: 0.94rem; line-height: 1.55; }

@media (max-width: 860px) {
  .au-cols { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  .au-card { margin-top: 24px; padding: 20px 16px 18px; border-radius: var(--radius-md, 16px); }
  .au-hero { flex-direction: column; text-align: center; gap: 14px; }
  .au-avatar { width: 108px; height: 108px; }
  .au-card h2 { font-size: 1.3rem; }
  .au-stats { grid-template-columns: 1fr 1fr; }
  .au-cta { flex-direction: column; }
  .au-book, .au-web { text-align: center; }
}

/* ─── Đồng đều nhãn form ở MỌI công cụ → 2 ô nhập luôn thẳng hàng (nhìn chuyên
   nghiệp). Nhãn dài/ngắn khác nhau vẫn giữ cùng chiều cao nên ô bên dưới thẳng
   hàng. Chỉ áp trong khu công cụ (.app-section), không đụng modal/đăng ký. ─── */
.app-section [class*="-field"] > label,
.app-section [class*="-form"] > label,
.app-section [class*="-row"] > label {
  display: block;
  min-height: 2.5em;
  line-height: 1.3;
}


/* ══════════════════════════════════════════════════════════════════════════
   BỘ CHỈ SỐ SIÊU ÂM (biometry) — ngôn ngữ thị giác kiểu Apple:
   bề mặt trắng, bo lớn, viền tóc, chữ phân cấp rõ, trạng thái báo bằng
   chấm màu + pill (không đổ nền rực), hàng disclosure bung bảng tham chiếu.
   ══════════════════════════════════════════════════════════════════════════ */

.bio-card { max-width: 980px; margin: 18px auto 8px; padding: 22px 20px; }
.bio-head h2 { margin: 0 0 6px; font-size: 1.3rem; letter-spacing: -0.015em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bio-sub { color: var(--text-secondary); margin: 0 0 16px; line-height: 1.55; }
.bio-tag-pro { background: var(--primary-dark); color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; }
.bio-group-title { margin: 18px 0 8px; font-weight: 700; font-size: 0.9rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); }

/* ── Mã chỉ số: chữ trắng trên nền xanh (đúng ký hiệu trên phiếu siêu âm) ── */
.bio-pick-ic, .bio-res-ic, .bio-lbl-ic {
  font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  background: var(--primary); color: #fff;
}

/* ── Hai bảng song song: trái = tuổi thai, phải = các chỉ số ── */
.bio-2cot { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 18px; align-items: start; }
.bio-cot-phai > .bio-group-title:first-child { margin-top: 0; }
@media (max-width: 900px) { .bio-2cot { grid-template-columns: 1fr; } }

/* ── Chọn tuổi thai bằng lưới nút (kiểu bảng nhập INTERGROWTH-21st) ── */
.bio-ga-box { background: var(--surface-warm); border: 1px solid var(--border-light); border-radius: 18px; padding: 16px; position: sticky; top: 84px; }
@media (max-width: 900px) { .bio-ga-box { position: static; } }
.bio-ga-top { display: flex; align-items: baseline; gap: 10px; }
/* 21/08/2026: hai chỗ này đổi từ <span> sang <label for> vì Clarity ghi nhận
   dead click ba lần liên tiếp ở đây. Cho con trỏ bàn tay để mẹ BIẾT là chạm
   được — con trỏ báo sai chiều nào cũng gây bấm hụt. */
.bio-ga-tt { font-weight: 700; cursor: pointer; }
.bio-ga-nhan { margin-left: auto; color: var(--primary-dark); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.bio-ga-lb { margin: 12px 0 6px; font-size: 0.9rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); }
.bio-ga-luoi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bio-ga-luoi-ngay { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bio-ga-o { min-height: 44px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--surface);
  color: var(--text-primary); font-weight: 650; font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s, color .15s; }
.bio-ga-o:hover { border-color: var(--primary); }
.bio-ga-o.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.bio-ga-ngaysa { margin-top: 14px; }

/* ── Hàng nhập chỉ số: nhãn trái, ô nhập phải ── */
.bio-rows { border: 1px solid var(--border-light); border-radius: 16px; overflow: hidden; background: var(--surface); }
.bio-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-light); }
.bio-row:last-child { border-bottom: 0; }
.bio-row-ma { display: grid; place-items: center; min-width: 50px; height: 32px; padding: 0 9px; flex: 0 0 auto;
  border-radius: 10px; background: var(--primary); color: #fff; font-weight: 800; font-size: 0.9rem; }
.bio-row-ten { flex: 1; min-width: 0; font-size: .95rem; font-weight: 600; display: flex; flex-direction: column; gap: 1px; }
.bio-row-note { font-style: normal; font-weight: 400; font-size: 0.86rem; color: var(--text-light); }
.bio-row-in { width: 110px; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
/* Hàng tuổi thai kiểu tuần + ngày (bảng nhịp tim 6–10 tuần ghi theo từng ngày). */
.bio-ga2 { flex: 0 0 auto; display: flex; gap: 6px; }
.bio-ga-sel { width: 104px; padding-left: 8px; padding-right: 6px; font-size: .88rem; }
@media (max-width: 420px) {
  .bio-row-ga { flex-wrap: wrap; }
  .bio-ga2 { width: 100%; }
  .bio-ga-sel { flex: 1; width: auto; }
}
/* 21/08/2026 — BẪY ĐỘ ĐẶC HIỆU, đừng xoá ba dòng dưới.
   Hàng nhập chỉ số giờ là <label> bọc cả hàng (mẹ chạm đâu trong hàng cũng vào
   ô nhập). Nhưng quy tắc "đồng đều nhãn form" ở trên bắt luôn nó:
   `.app-section [class*="-row"] > label` khớp cả .bio-rows vì chuỗi "-row" nằm
   trong "bio-rows", mà độ đặc hiệu (0,2,1) thì cao hơn .bio-row (0,1,0) — hàng
   mất display:flex, badge/chữ/ô nhập rơi xuống xếp chồng dọc. Quy tắc kia dành
   cho nhãn "chữ nằm TRÊN ô"; hàng này là bố cục, phải giành lại display. */
.app-section [class*="-row"] > label.bio-row { display: flex; min-height: 0; }
.app-section [class*="-row"] > label.bio-row-ma { display: grid; min-height: 0; }
.app-section [class*="-row"] > label.bio-row-ten { display: flex; min-height: 0; }

/* 05/09/2026 (mục 9 — chọn chỉ số TRƯỚC): biometry.js ẩn hàng chưa chọn bằng
   thuộc tính `hidden` gốc (row.hidden = true). Nhưng dòng .bio-row { display:
   flex } NGAY TRÊN đã thắng đúng bẫy độ đặc hiệu vừa ghi chú — [hidden] mặc
   định trình duyệt (0,1,0) thua .bio-row (0,3,1) nên KHÔNG tự ẩn được. Phải
   nhắc lại nguyên chuỗi selector + [hidden] để độ đặc hiệu cao hơn thắng. */
.app-section [class*="-row"] > label.bio-row[hidden] { display: none; }

.bio-row-off { opacity: .5; }
.bio-row-off .bio-row-ma { background: var(--border); }
.bio-calc { margin-top: 18px; }

/* ── Chọn chỉ số TRƯỚC rồi mới mở ô (mục 9, 05/09/2026): mẹ bấm chip đúng
   những gì phiếu của mẹ CÓ, hàng còn lại thu gọn — đỡ rợp mắt trước một bảng
   10+ ô nhập mà phiếu thật chỉ ghi 4-5 số. ── */
.bio-chon { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px; }
.bio-chon-nhan { font-size: 0.86rem; color: var(--text-light); margin-right: 2px; }
.bio-chip {
  border: 1px solid var(--border-light); background: var(--surface); color: var(--text-secondary);
  border-radius: 999px; padding: 6px 13px; font-size: 0.84rem; font-weight: 650;
  font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s, color .15s;
}
.bio-chip:hover { border-color: var(--primary); }
.bio-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.bio-chip-tatca { font-weight: 700; }

/* ── Phiếu mẫu (minh hoạ): khoanh đúng vị trí chỉ số mẹ vừa bấm chip ── */

/* ── Nhóm "nâng cao" gói lại (n.gop, 05/09/2026): ĐM tử cung ít phiếu ghi tới
   — không đập thẳng vào mắt mẹ như nhóm chính, mẹ tự mở khi phiếu có ghi. ── */
.bio-gop { margin: 18px 0 0; }
/* Nhóm gói lại mà chip đã ẩn hết hàng bên trong thì ẩn cả <details> — mở mũi
   tên ra thấy hộp rỗng còn khó hiểu hơn là không thấy nhóm. Độ đặc hiệu
   (0,2,0) để thắng mọi luật display của .bio-gop ở trên. */
.bio-gop[hidden] { display: none; }
.bio-gop summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  margin: 0 0 8px; font-weight: 700; font-size: 0.9rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-light);
}
.bio-gop summary::-webkit-details-marker { display: none; }
.bio-gop summary::before { content: "▸"; font-size: .8em; transition: transform .15s; }
.bio-gop[open] summary::before { transform: rotate(90deg); }

/* ── Thẻ kết quả ── */
.bio-results { margin-top: 18px; display: grid; gap: 12px; }
.bio-res { background: var(--surface); border: 1px solid var(--border-light); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.bio-res-head { display: flex; align-items: center; gap: 12px; }
.bio-res-ic { display: grid; place-items: center; min-width: 50px; height: 38px; padding: 0 10px; flex: 0 0 auto; border-radius: 12px; font-size: .86rem; }
.bio-res-id { min-width: 0; flex: 1; }
.bio-res-id h3 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.bio-res-sub { margin: 2px 0 0; color: var(--text-light); font-size: .88rem; font-variant-numeric: tabular-nums; }
/* Ô giá trị bấm được — chạm số để mở "chỉ số này đo gì + nguồn" ngay dưới
   (Task 7, 05/09/2026), thay .bio-res-sub tĩnh trước đây. */
.bio-so { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 0; padding: 0;
  background: none; border: none; font: inherit; font-size: .88rem; color: var(--text-light);
  font-variant-numeric: tabular-nums; cursor: pointer; text-align: left; }
.bio-so::after { content: "▾"; font-size: .65rem; opacity: .55; }
.bio-so[aria-expanded="true"]::after { content: "▴"; opacity: .85; }
.bio-so:hover, .bio-so:focus-visible { color: var(--text-secondary); }
.bio-res-pct { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.bio-res-pct-n { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bio-res-cham { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.bio-res-chu { margin: 12px 0 0; font-weight: 600; font-size: .95rem; }
.bio-res-hd { margin: 4px 0 0; color: var(--text-secondary); line-height: 1.55; font-size: .92rem; }

.bio-res-xanh .bio-res-ic { background: var(--primary); color: #fff; }
.bio-res-xanh { border-color: rgba(70,159,76,.22); }
.bio-res-xanh .bio-res-pct-n, .bio-res-xanh .bio-res-chu { color: var(--primary-dark); }
.bio-res-xanh .bio-res-cham { background: var(--primary); }
.bio-res-vang .bio-res-ic { background: var(--gold-dark); color: #fff; }
.bio-res-vang { border-color: rgba(195,164,104,.4); }
.bio-res-vang .bio-res-pct-n, .bio-res-vang .bio-res-chu { color: var(--gold-dark); }
.bio-res-vang .bio-res-cham { background: var(--gold); }
.bio-res-do .bio-res-ic { background: var(--danger-dark); color: #fff; }
.bio-res-do { border-color: rgba(179,38,30,.3); }
.bio-res-do .bio-res-pct-n, .bio-res-do .bio-res-chu { color: var(--danger-dark); }
.bio-res-do .bio-res-cham { background: var(--danger); }
.bio-res-xam { opacity: .92; }

/* ── Khối cảnh báo + miễn trừ ── */
.bio-canh { margin-top: 14px; padding: 14px 16px; background: var(--bg-soft); border-radius: 14px; }
.bio-canh-td { margin: 0; font-weight: 700; font-size: .95rem; }
.bio-res-do .bio-canh-td { color: var(--danger-dark); }
.bio-res-vang .bio-canh-td { color: var(--gold-dark); }
.bio-canh-hd { margin: 6px 0 0; color: var(--text-secondary); line-height: 1.55; font-size: .92rem; }
/* (17/08: bỏ nút đặt lịch trong nội dung — chỉ giữ nút nổi ở sidebar phải) */
.bio-mientru { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border-light);
  color: var(--text-light); font-size: 0.9rem; line-height: 1.5; }

/* ── Dòng nguồn cuối thẻ (bỏ bảng tham chiếu, chỉ ghi nghiên cứu + link) ── */
.bio-src { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border-light);
  color: var(--text-light); font-size: 0.9rem; line-height: 1.5; }
.bio-src a { color: var(--primary-dark); font-weight: 600; white-space: nowrap; }
.bio-auto-note { margin: 10px 0 0; color: var(--text-secondary); font-size: .86rem; }

/* Giải thích ẩn dưới ô giá trị (.bio-so) — mở/đóng khi mẹ chạm số. Chứa cả
   .bio-src (nguonHtml) lồng bên trong nên bỏ viền/lề của .bio-src ở đây,
   tránh hai đường kẻ chồng nhau. */
.bio-giaithich { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border-light);
  color: var(--text-light); font-size: .9rem; line-height: 1.55; }
.bio-giaithich .bio-src { margin: 0; padding: 0; border: 0; }

/* ── Tóm tắt trước bảng (mục 14/15, Task 7, 05/09/2026): mẹ đọc 3 câu — đối
   chiếu nói gì / chưa đủ để kết luận gì / nên hỏi bác sĩ gì — TRƯỚC khi thấy
   từng thẻ số đo bên dưới. ── */
.bio-4cau { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px;
  padding: 14px 16px; background: var(--bg-soft); border-radius: 14px; }
.bio-cau b { display: block; font-size: .86rem; font-weight: 700; margin-bottom: 3px; }
.bio-cau p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text-secondary); }

.bio-ref-note { font-size: 0.9rem; color: var(--text-light); margin-top: 16px; line-height: 1.55; }
.bio-chart-wrap { margin-top: 18px; }
.bio-chart-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .9rem; color: var(--text-secondary); }
.bio-chart-sel { max-width: 240px; }

@media (max-width: 640px) {
  .bio-ga { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .bio-grid { grid-template-columns: 1fr 1fr; }
  .bio-picks { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .bio-res { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bio-pick, .bio-disc-ic { transition: none; }
}

/* ── Thanh tab TẦNG 2 (trong tab "Chỉ số khác") — nhẹ hơn thanh tab cha ── */
.cs-tabs-sub { margin-top: 0; margin-bottom: 14px; padding: 4px; }
.cs-tabs-sub .cs-tab { font-size: .9rem; padding: 9px 16px; }

/* ── Tab "Chỉ số khác trên siêu âm" — đánh giá theo NGƯỠNG (17/08/2026) ──
   Không có bách phân vị nên nhãn kết luận thay chỗ số "P.." ở góc phải thẻ. */
.ng-form { margin-top: 4px; }
.ng-khac { margin: 0 0 14px; padding: 11px 14px; background: var(--bg-soft); border-radius: 12px;
  color: var(--text-secondary); font-size: .86rem; line-height: 1.6; }
.ng-tip { margin: 10px 0 0; padding: 12px 14px; background: var(--bg-soft); border-radius: 12px;
  color: var(--text-secondary); font-size: .86rem; line-height: 1.6; }
.bio-res-nhan-nguong { display: inline-block; max-width: 190px; text-align: right;
  font-size: .84rem; font-weight: 700; line-height: 1.35; }
.bio-res-xanh .bio-res-nhan-nguong { color: var(--primary-dark); }
.bio-res-vang .bio-res-nhan-nguong { color: var(--gold-dark); }
.bio-res-do   .bio-res-nhan-nguong { color: var(--danger-dark); }

.ng-oi-rows { margin-top: 4px; display: grid; gap: 8px; }
.ng-oi-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  align-items: baseline; padding: 10px 12px; background: var(--bg-soft); border-radius: 12px; }
.ng-oi-ten { font-weight: 600; font-size: .9rem; }
.ng-oi-so { font-variant-numeric: tabular-nums; font-weight: 700; }
.ng-oi-nhan { grid-column: 1 / -1; font-size: .84rem; font-weight: 600; }
.ng-oi-xanh .ng-oi-nhan { color: var(--primary-dark); }
.ng-oi-vang .ng-oi-nhan { color: var(--gold-dark); }
.ng-oi-do   .ng-oi-nhan { color: var(--danger-dark); }
.ng-oi-kl { margin-top: 14px; padding: 14px 16px; background: var(--bg-soft); border-radius: 14px; }
.ng-oi-kl-td { margin: 0; font-weight: 700; font-size: .98rem; }
.bio-res-xanh .ng-oi-kl-td { color: var(--primary-dark); }
.bio-res-vang .ng-oi-kl-td { color: var(--gold-dark); }
.bio-res-do   .ng-oi-kl-td { color: var(--danger-dark); }
.ng-oi-kl-chu { margin: 6px 0 0; color: var(--text-secondary); line-height: 1.55; font-size: .92rem; }
.ng-oi-kc { margin: 10px 0 0; font-size: .84rem; line-height: 1.6; color: var(--text-secondary); }
.ng-oi-kc-lech { padding: 10px 12px; border-radius: 12px; background: var(--bg-soft);
  border-left: 3px solid var(--gold-dark); }

@media (max-width: 640px) {
  .bio-res-nhan-nguong { max-width: 130px; font-size: 0.9rem; }
}

/* ── Hố sau chuyên sâu: hình minh hoạ SVG + nhãn (17/08/2026) ── */
.pf-hinh { margin: 16px 0; padding: 14px; background: var(--bg-soft); border-radius: 16px; }
.pf-hinh svg { width: 100%; height: auto; display: block; }
.pf-hinh .pf-lb { font-size: 13px; font-weight: 600; fill: var(--text-secondary); font-family: inherit; }
.pf-hinh .pf-lb-do { fill: var(--danger-dark); }
.pf-hinh figcaption { margin: 10px 2px 0; font-size: 0.94rem; line-height: 1.6; color: var(--text-secondary); }
.pf-mri { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--gold-dark); color: #fff; font-size: 0.74rem; font-weight: 800; letter-spacing: .04em;
  vertical-align: middle; }
.pf-luuy { margin: 10px 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-light);
  padding: 9px 12px; background: var(--bg-soft); border-radius: 10px; }

/* ── Rãnh Sylvius: ảnh gốc Hình 1(a) + bảng đối chiếu tiếng Việt ── */
.syl-anh img { width: 100%; height: auto; display: block; border-radius: 10px;
  background: #fff; border: 1px solid var(--border-light); }
.syl-vn { margin: 12px 0 0; padding: 12px 14px 12px 16px; background: var(--surface);
  border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 16px;
  list-style: none; counter-reset: none; }
.syl-vn li { font-size: .84rem; line-height: 1.5; color: var(--text-secondary); }
.syl-vn li b { color: var(--text-primary); }
@media (max-width: 760px) { .syl-vn { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .syl-vn { grid-template-columns: 1fr; } }

/* ── Rãnh Sylvius: lưới 6 mốc + nút chọn mức (17/08/2026) ── */
.ng-than-hai { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--danger-light);
  color: var(--danger-dark); font-size: .88rem; line-height: 1.55; font-weight: 600; }
.syl-hd { margin: 0 0 12px; font-size: .88rem; line-height: 1.6; color: var(--text-secondary); }
.syl-luoi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.syl-o { margin: 0; padding: 8px 6px; background: var(--surface); border-radius: 12px;
  border: 1.5px solid var(--border-light); }
.syl-o-on { border-color: var(--primary); background: var(--primary-light); }
.syl-o svg { width: 100%; height: auto; display: block; }
.syl-o figcaption { margin-top: 4px; text-align: center; display: grid; gap: 2px; }
.syl-o figcaption b { font-size: 0.92rem; color: var(--text-primary); }
.syl-o figcaption span { font-size: 0.8rem; line-height: 1.35; color: var(--text-light); }

.syl-chon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.syl-nut { display: grid; gap: 2px; padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  font-family: inherit; color: var(--text-primary); transition: var(--transition); }
.syl-nut:hover { border-color: var(--primary); }
.syl-nut.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.syl-nut-tuan { font-size: 0.88rem; font-weight: 700; opacity: .75; }
.syl-nut-ten { font-size: .84rem; font-weight: 600; line-height: 1.35; }

.syl-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 4px; }
.syl-doi-o { display: grid; gap: 6px; }
.syl-doi-lb { font-size: 0.86rem; font-weight: 700; color: var(--text-light); text-transform: uppercase;
  letter-spacing: .05em; }
.syl-doi .syl-o { background: var(--bg-soft); }

@media (max-width: 720px) {
  .syl-luoi { grid-template-columns: repeat(3, 1fr); }
  .syl-chon { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .syl-luoi { grid-template-columns: 1fr 1fr; }
  .syl-chon { grid-template-columns: 1fr; }
}

/* ── Máy tính tốc độ tăng beta hCG (17/08/2026) ── */
.bh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bh-lan { display: grid; gap: 10px; align-content: start; }
.bh-lan .bio-group-title { margin: 0; }
.bh-tuan { margin-top: 14px; }
.bh-cach { margin: 10px 0 0; font-size: .86rem; color: var(--text-secondary); min-height: 1.2em; }
.bh-cach-loi { color: var(--danger-dark); font-weight: 600; }
/* Ô ngày dạng lịch: cả ô là vùng bấm, con trỏ báo rõ là bấm được. */
.lolo-lich { cursor: pointer; }
.lolo-lich::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
.bh-os { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 4px; }
.bh-o { padding: 12px 14px; background: var(--bg-soft); border-radius: 14px; display: grid; gap: 2px; }
.bh-o-nhan { font-size: 0.9rem; color: var(--text-light); }
.bh-o-so { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bio-res-xanh .bh-o-so { color: var(--primary-dark); }
.bio-res-vang .bh-o-so { color: var(--gold-dark); }
.bio-res-do   .bh-o-so { color: var(--danger-dark); }
.bh-o-phu { font-size: 0.87rem; color: var(--text-light); }
.bh-luu-y { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft);
  border-left: 3px solid var(--gold-dark); font-size: .84rem; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 640px) {
  .bh-grid { grid-template-columns: 1fr; gap: 14px; }
  .bh-os { grid-template-columns: 1fr; }
}

/* ── A2HS: thẻ hướng dẫn ghim ngay dưới hero (bước 1 trang chủ) ── */
.a2hs-card { position: relative; max-width: 980px; margin: 18px auto 8px; padding: 20px; }
.a2hs-card .a2hs-head { display: flex; gap: 12px; align-items: flex-start; }
.a2hs-card .a2hs-ic { font-size: 1.6rem; }
.a2hs-card h2 { margin: 0 0 4px; font-size: 1.2rem; letter-spacing: -0.015em; }
.a2hs-card p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.a2hs-steps { margin: 12px 0 0 20px; line-height: 1.85; }
/* 44x44 là ngưỡng chạm tối thiểu — đo ở khổ 390px nút này chỉ 27x36, mẹ bấm
   hụt ra ngoài là trúng banner (mở hướng dẫn ghim) chứ không đóng được. */
.a2hs-card .a2hs-x { position: absolute; top: 4px; right: 6px; width: 44px; height: 44px;
  display: grid; place-items: center; background: none; border: 0; font-size: 1.4rem; color: var(--text-light); }
.a2hs-card .a2hs-btn { margin-top: 14px; margin-left: 0; }

/* Chỉ Android có nút cài; iPhone và máy tính giữ hướng dẫn hiện sẵn (09/09/2026). */
#a2hsBanner { --a2hs-cta-bg: #256A2E; --a2hs-cta-ink: #FFFFFF; }
html:not([data-che-do="ngay"]) #a2hsBanner {
  --a2hs-cta-bg: #8DEFC0; --a2hs-cta-ink: #05211A;
}
#a2hsBanner .a2hs-head { padding-right: 30px; }
#a2hsBanner .a2hs-install-row { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
#a2hsBanner .a2hs-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 26px; margin: 0; max-width: 100%;
  background: var(--a2hs-cta-bg); color: var(--a2hs-cta-ink);
  font-size: 1.15rem; font-weight: 700; line-height: 1.3; white-space: normal;
  cursor: pointer; flex-shrink: 0;
}
#a2hsBanner .a2hs-primary:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 4px; }
#a2hsBanner .a2hs-primary:disabled { cursor: progress; opacity: .75; }
#a2hsBanner .a2hs-note { max-width: 42ch; font-size: .95rem; }
#a2hsBanner .a2hs-guide { margin-top: 20px; padding: 16px 0 0; border-top: 1px solid var(--border-light); }
#a2hsBanner .a2hs-guide[hidden] { display: none; }
#a2hsBanner .a2hs-status:empty { display: none; }
#a2hsBanner .a2hs-status:not(:empty) { margin: 14px 0 0; color: var(--text-primary); }
@media (max-width: 600px) {
  #a2hsBanner .a2hs-install-row { flex-direction: column; align-items: stretch; gap: 12px; }
  #a2hsBanner .a2hs-primary { width: 100%; }
  #a2hsBanner .a2hs-note { max-width: none; }
  #a2hsBanner .a2hs-inner { flex-wrap: wrap; }
}

/* Banner mỏng (dự phòng khi không có chỗ dựng thẻ) */
#a2hsBanner:not(.a2hs-card) { background: var(--primary-light); border-bottom: 1px solid var(--border-light); font-size: .9rem; }
.a2hs-inner { display: flex; align-items: center; gap: 10px; max-width: 980px; margin: 0 auto; padding: 8px 14px; }
.a2hs-txt { display: flex; flex-direction: column; line-height: 1.3; }
.a2hs-txt span { color: var(--text-secondary); font-size: 0.92rem; }
.a2hs-btn { margin-left: auto; background: var(--primary); color: #fff; border: 0; border-radius: 999px; min-height: 44px; padding: 0 18px; font-weight: 650; white-space: nowrap; }
.a2hs-btn-ghost { background: var(--surface); color: var(--primary-dark); border: 1.5px solid var(--primary); margin-left: 8px; }
.a2hs-x { background: none; border: 0; font-size: 1.3rem; color: var(--text-light);
  min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 2px 8px; }
.a2hs-guide { max-width: 980px; margin: 0 auto; padding: 0 14px 10px; }
/* Icon Chia sẻ của iOS vẽ bằng SVG. Bản cũ mượn một ký tự Unicode, font hệ
   thống hiện nó ra hình mũi tên tròn — mẹ tìm cả buổi không thấy nút nào như
   thế trong Safari. */
.a2hs-share { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; vertical-align: -9px;
  border: 1.5px solid var(--primary); border-radius: 8px; color: var(--primary-dark); }
.a2hs-ic-share { display: block; }

/* Thanh công cụ dưới cùng của Safari, nút Chia sẻ khoanh sáng — nói "ở thanh
   dưới" bằng chữ thì mẹ vẫn phải đoán, vẽ ra thì nhìn một cái là biết. */
.a2hs-thanh { margin: 14px 0 0; }
.a2hs-thanh-bar { display: flex; align-items: center; justify-content: space-around;
  padding: 10px 12px; border-radius: 14px;
  background: var(--surface-warm); border: 1px solid var(--border-light);
  color: var(--text-light); font-size: 1.15rem; line-height: 1; }
.a2hs-thanh-hi { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--primary-dark); background: var(--primary-light);
  box-shadow: 0 0 0 2px var(--primary); }
.a2hs-thanh figcaption { margin-top: 8px; text-align: center;
  font-size: .84rem; color: var(--text-secondary); }
/* Bản Chrome: thanh địa chỉ, nút ⋮ nằm cuối bên phải chứ không ở giữa */
.a2hs-thanh-tren { justify-content: space-between; gap: 10px; }
.a2hs-thanh-url { flex: 1; min-width: 0; padding: 7px 12px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-secondary);
  font-size: 0.94rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2hs-thanh-cham { flex: 0 0 auto; font-size: 1.25rem; font-weight: 700; }


/* Thẻ "mẹ đang ở trong Facebook/Zalo" — hai nút hành động nằm ngang, xuống
   dòng khi màn hẹp. .a2hs-btn dùng chung cho cả <a> lẫn <button> nên phải
   canh giữa bằng inline-flex, không thì chữ trong thẻ <a> lệch lên trên. */
.a2hs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.a2hs-actions .a2hs-btn { margin: 0; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: .95rem; }
/* Không có chỗ dựng dưới hero (trang khác trang chủ) → thẻ nổi trên cùng trang */
.a2hs-card-noi { margin: 12px 14px; }
@media (max-width: 480px) { .a2hs-actions .a2hs-btn { width: 100%; } }
@media (max-width: 560px) { .a2hs-txt span { display: none; } }

/* A2HS — máy tính: 2 cột hướng dẫn iPhone / Android */
/* HAI CỘT PHẢI NGANG NHAU. Để hai cột tự trôi thì chỉ cần một câu bên iPhone
   dài hơn, xuống dòng, là bước 2 và bước 3 lệch hẳn so với cột Android — đọc
   như hai tờ giấy dán cạnh nhau chứ không phải một bảng so sánh. Nay khoá
   theo hàng: tiêu đề thẳng tiêu đề, bước 1 thẳng bước 1, hình minh hoạ hai
   bên cùng nằm trên một đường (mỗi cột đều có một hình). */
.a2hs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; margin-top: 14px;
  grid-template-rows: auto auto auto auto auto; }
.a2hs-col h3 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.a2hs-os { background: var(--primary); color: #fff; font-size: 0.84rem; font-weight: 800; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; }
.a2hs-col .a2hs-steps { margin-top: 8px; }
.a2hs-hint { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--border-light); font-size: .88rem; }

/* Trình duyệt có subgrid: từng dòng của hai cột chia chung một lưới hàng. */
@supports (grid-template-rows: subgrid) {
  .a2hs-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
  .a2hs-col > h3 { grid-row: 1; align-self: center; }
  .a2hs-cols .a2hs-steps { display: grid; grid-row: 2 / 5; grid-template-rows: subgrid; margin: 0; }
  .a2hs-cols .a2hs-thanh { grid-row: 5; align-self: end; margin: 4px 0 0; }
}
/* Không có subgrid: vẫn cân được nhờ chiều cao tối thiểu mỗi bước + hình đẩy
   xuống đáy, chỉ kém chính xác một chút khi câu tràn ba dòng. */
@supports not (grid-template-rows: subgrid) {
  .a2hs-col { display: flex; flex-direction: column; }
  .a2hs-cols .a2hs-steps > li { min-height: 3.2em; }
  .a2hs-cols .a2hs-thanh { margin-top: auto; }
}

/* Màn hẹp: xếp dọc một cột, thôi khoá hàng (khoá nữa là hai cột chồng lên nhau). */
@media (max-width: 700px) {
  .a2hs-cols { grid-template-columns: 1fr; gap: 18px; grid-template-rows: none; }
  .a2hs-col, .a2hs-cols .a2hs-steps { display: block; grid-row: auto; }
  .a2hs-cols .a2hs-steps { margin: 8px 0 0; }
  .a2hs-cols .a2hs-steps > li { min-height: 0; }
  .a2hs-cols .a2hs-thanh { grid-row: auto; margin: 12px 0 0; }
}



/* ── Nút Tài khoản trên thanh menu (17/08/2026) ── */
.nav-acc { border: 1.5px solid var(--primary); border-radius: 999px; padding: 6px 16px !important; color: var(--primary-dark) !important; font-weight: 650; }
.nav-acc:hover { background: var(--primary-light); }
.nav-acc.nav-acc-on { background: var(--primary); border-color: var(--primary); color: #fff !important; }
.nav-acc.nav-acc-on:hover { background: var(--primary-hover); }

/* ── Nút xoá dữ liệu chỉ số (tách bạch với cân nặng thai) ── */
.bio-xoa { margin-top: 10px; min-height: 44px; border-radius: 999px;
  background: transparent; color: var(--danger-dark); border: 1.5px solid var(--border);
  font-weight: 600; font-size: .92rem; }
.bio-xoa:hover { border-color: var(--danger); background: var(--danger-light); }

/* ── Đánh giá đầu thai (dựng lại công cụ của Dr. Tú trong app) ── */
.dt-card { margin-top: 14px; padding: 18px; background: var(--surface);
  border: 1px solid var(--border-light); border-radius: 18px; box-shadow: var(--shadow-sm); }
.dt-card-vang { border-color: rgba(195,164,104,.4); }
.dt-card-do { border-color: rgba(179,38,30,.3); }
.dt-title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.dt-sub { margin: 4px 0 14px; color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }
.dt-rows { border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; }
.dt-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--border-light); font-size: .93rem; }
.dt-row:last-child { border-bottom: 0; }
.dt-row-ten { flex: 1 1 auto; min-width: 120px; font-weight: 600; }
.dt-row-so { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-row-nhan { flex: 0 0 auto; margin-left: auto; font-weight: 650; font-size: .84rem;
  padding: 4px 10px; border-radius: 999px; text-align: right; }
.dt-xanh .dt-row-nhan { background: var(--primary-light); color: var(--primary-dark); }
.dt-vang .dt-row-nhan { background: var(--gold-light); color: var(--gold-dark); }
.dt-do .dt-row-nhan { background: var(--danger-light); color: var(--danger-dark); }
.dt-hinhdang { margin: 12px 0 0; color: var(--text-secondary); font-size: .88rem; line-height: 1.55; }
.dt-ketluan { margin-top: 14px; padding: 14px 16px; background: var(--bg-soft); border-radius: 14px; }
.dt-kl-title { margin: 0; font-weight: 700; font-size: .98rem; }
.dt-card-xanh .dt-kl-title { color: var(--primary-dark); }
.dt-card-vang .dt-kl-title { color: var(--gold-dark); }
.dt-card-do .dt-kl-title { color: var(--danger-dark); }
.dt-kl-chu { margin: 6px 0 0; color: var(--text-secondary); line-height: 1.55; font-size: .92rem; }
@media (max-width: 560px) {
  .dt-row { flex-wrap: wrap; gap: 6px; }
  .dt-row-nhan { margin-left: 0; }
}

/* ── 3 tab con của mục "Các chỉ số thai nhi" ── */
.cs-tabs { display: flex; gap: 8px; max-width: 980px; margin: 0 auto 14px; padding: 6px;
  background: var(--bg-soft); border-radius: 999px; }
.cs-tab { flex: 1; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-secondary); font-weight: 650; font-size: .92rem;
  transition: background .18s, color .18s; }
.cs-tab:hover { color: var(--primary-dark); }
.cs-tab.on { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
/* 05/09/2026: tab tầng 1 đổi tên theo CÂU HỎI của mẹ ("Cân nặng của bé"…).
   (05/09 tối, anh Tú) bỏ dòng phụ <small> — tab tầng 1 một dòng như tab con. */
@media (max-width: 640px) {
  .cs-tabs { flex-direction: column; border-radius: 18px; }
  .cs-tab { width: 100%; }
}

/* ── Độ mờ da gáy ── */
.nt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
@media (max-width: 560px) { .nt-form { grid-template-columns: 1fr; } }
.nt-meta { margin-top: 10px; color: var(--text-secondary); font-size: .92rem; }
.nt-risk-wrap { margin-top: 14px; }
.nt-risk-title { margin: 0 0 8px; font-size: 0.9rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); }
.nt-risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.nt-risk { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border-light); text-align: center; }
.nt-risk-so { display: block; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.nt-risk-nhan { display: block; margin-top: 2px; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.35; }
.nt-risk-xanh { background: var(--primary-light); border-color: rgba(70,159,76,.25); }
.nt-risk-xanh .nt-risk-so { color: var(--primary-dark); }
.nt-risk-vang { background: var(--gold-light); border-color: rgba(195,164,104,.4); }
.nt-risk-vang .nt-risk-so { color: var(--gold-dark); }
.nt-risk-do { background: var(--danger-light); border-color: rgba(179,38,30,.3); }
.nt-risk-do .nt-risk-so { color: var(--danger-dark); }
.nt-risk-note { margin: 10px 0 0; font-size: 0.92rem; color: var(--text-light); line-height: 1.5; }
.bio-cg-tag { font-weight: 400; font-size: 0.84rem; letter-spacing: 0; text-transform: none; color: var(--text-light); }


/* === Vá dead click 21/08/2026 (audit Clarity: 1.685 dead click/3 ngày) =========
   1) Phản hồi khi chạm: cả app không có rule :active — mẹ bấm trúng nút thật
      cũng không thấy gì thay đổi nên bấm thêm lần nữa thành dead click.
   2) Cụm nút nổi là flex container phủ góc màn hình: khe hở GIỮA các nút
      nuốt cú bấm của nội dung nằm dưới.
   3) 4 ô thống kê tác giả bấm được (mở "Xem đầy đủ") — cần cursor. */
button:not([disabled]):active,
.nav-link:active, .cs-tab:active, .kb-cta:active,
.ld-today-chip:active, .ld-wd-cta:active, .ld-wd-upd:active,
.social-float a:active {
  transform: scale(.97);
  filter: brightness(.95);
}
@media (prefers-reduced-motion: reduce) {
  button:not([disabled]):active,
  .nav-link:active, .cs-tab:active, .kb-cta:active,
  .ld-today-chip:active, .ld-wd-cta:active, .ld-wd-upd:active,
  .social-float a:active { transform: none; }
}
/* Khoảng trống giữa các nút phải cho cú chạm lọt xuống trang phía dưới —
   .float-stack là hộp bọc, đừng để nó nuốt luôn khoảng trống ấy. */
.social-float, .float-stack { pointer-events: none; }
.social-float > .float-gom, .social-float > .cheDo-btn, .social-float > .book-cta,
.social-float > .zalo-cta, .float-stack > * { pointer-events: auto; }
.au-stat { cursor: pointer; }

/* === Dashboard hai mặt (đợt cải thiện T9, Task 2, 05/09/2026) =================
   Phần lớn CSS của #lolo-dashboard nằm trong js/dashboard.js (injectStyles,
   thêm động vào <head> lúc chạy) — 3 lớp dưới đây là hàng mới của đợt này nên
   nằm ở style.css cho dễ soát riêng: .ld-capnhat (nút mời cập nhật lần khám
   mới, ngay dưới số đo), .ld-goiy (khối "Tuần này mẹ nên đọc" — 1 gợi ý thay
   cho danh sách cần đọc), và ép .ld-quick-grid về đúng 3 cột (selector có
   #lolo-dashboard đứng trước để thắng bất kể thứ tự nạp so với style inject
   trong dashboard.js, vì cùng độ đặc hiệu thì ai nạp sau thắng). */
.ld-capnhat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 10px;
  background: var(--primary-light, #e6f3ea);
  color: var(--primary-dark, #2c6b30);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
}
.ld-capnhat:hover { background: var(--success-light, #eaf5eb); }

/* (Sửa sau review toàn nhánh, mục 6) Nền/viền/bo/đệm/bóng của thẻ này TRÙNG
   từng giá trị với .ld-card (js/dashboard.js, injectStyles) — nên thẻ mang
   luôn class ld-card và khối rule trùng ở đây bị xoá. Được thêm: luật "thẻ 1
   hành động" trong onDashClick chỉ soi .ld-card, nên từ giờ mẹ bấm vào thân
   thẻ (không trúng đúng cái nút) vẫn mở được bài — trước đó là dead click. */
.ld-goiy h3 {
  margin: 0 0 12px;
  font-family: var(--font-display, 'Playfair Display', serif);
  color: var(--ink, #293D33);
  font-size: 1.2rem;
}
.ld-goiy-bai {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-warm, #fdfbf6);
  border: 1px solid var(--border, var(--border-light, #e5ddcd));
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink, #293D33);
  font-family: inherit;
  font-weight: 700;
  font-size: .96rem;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
}
.ld-goiy-bai:hover { border-color: var(--primary, #469F4C); box-shadow: 0 6px 16px rgba(70, 159, 76, .1); }

/* (Sửa sau review toàn nhánh, mục 3) Giữ sẵn chỗ cho dashboard khi mẹ ĐÃ có
   hồ sơ. #lolo-dashboard rỗng lúc trang mới vẽ, js/dashboard.js đổ nội dung
   vào ở DOMContentLoaded — không dự trữ chiều cao thì mọi thứ dưới nó (hero,
   lưới tính năng) bị đẩy tụt xuống một nhịp ngay trước mắt mẹ. 60vh là mức
   xấp xỉ phần dashboard nhìn thấy ở màn đầu; thẻ thật cao hơn thì min-height
   không cản gì, mẹ chưa có hồ sơ thì không dự trữ (khối đó rỗng thật). */
html.lolo-co-ho-so #lolo-dashboard { min-height: 60vh; }

#lolo-dashboard .ld-quick-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
  #lolo-dashboard .ld-quick-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   THẺ MÓN ĂN MỞ ĐƯỢC + TẤM CHI TIẾT MÓN (vá rage click ở mục Thực đơn).
   Trước đây thẻ món có đủ "mùi nút bấm" — ảnh, bóng đổ, nhấc lên khi rê chuột —
   mà bấm vào không ăn. Nay thẻ mở thật, nên giữ nguyên mùi ấy và THÊM một dòng
   nói rõ cú bấm cho gì.
   MÀU: chỉ dùng token. App bật NỀN TỐI mặc định (css/nen-toi.css lật token
   toàn cục), mã màu sáng viết cứng ở đây là chữ đen trên nền đen ban đêm.
   ══════════════════════════════════════════════════════════════════════════ */
.meal-card { cursor: pointer; }
.meal-card:focus-within { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.meal-more {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 11px 14px; margin-top: 2px;
  font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700;
  text-align: left; color: var(--primary-dark);
  background: var(--primary-light);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition);
}
.meal-more:hover { border-color: var(--primary); }
.meal-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.meal-more-mui { font-size: 1.25rem; line-height: 1; }

/* ── Tấm xổ trong thẻ ────────────────────────────────────────────────────
   Không còn là hộp thoại phủ màn hình: tấm nằm ngay trong .meal-card, dưới
   nút mời bấm, nên mẹ không mất tên món khỏi tầm mắt và cuộn tiếp được. */
.mon-xo {
  margin-top: 4px; padding-top: 16px;
  border-top: 1px dashed var(--border-light);
  animation: monXoRa .2s ease-out both;
}
.mon-xo[hidden] { display: none; }
@keyframes monXoRa { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mon-xo { animation: none; } }

/* Thẻ đang mở: chừa chỗ cho tiêu đề dính khi kéo thẻ về đầu khung nhìn,
   và thôi nhấc lên theo con trỏ (tấm dài, nhấc lên nhìn giật). */
.meal-card { scroll-margin-top: 84px; }
.meal-card.mon-mo:hover { transform: none; box-shadow: var(--shadow); }
.mon-mo .meal-more { border-color: var(--primary); background: var(--surface-warm); }
.meal-more-mui { display: inline-block; transition: transform .18s ease; }
.mon-mo .meal-more-mui { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .meal-more-mui { transition: none; } }

.mon-so { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mon-o {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 10px;
  background: var(--surface-warm);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.mon-o-cham { width: 10px; height: 10px; border-radius: 50%; }
.mon-cham-kcal { background: var(--gold); }
.mon-cham-carb { background: var(--carb); }
.mon-cham-dam { background: var(--primary); }
.mon-o-tri {
  font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.mon-o-nhan { font-size: 0.92rem; color: var(--text-secondary); }

.mon-khoi { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.mon-meo {
  margin-top: 16px; padding: 14px 16px;
  background: var(--gold-light); border-radius: var(--radius-sm);
}
.mon-meo h4, .mon-khoi h4 {
  margin: 0 0 8px; font-family: var(--font-heading); font-size: 0.95rem;
  font-weight: 700; color: var(--ink);
}
.mon-meo p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--text-secondary); }

.mon-muc {
  display: inline-block; margin: 0 0 12px; padding: 4px 12px;
  font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700;
  border-radius: 20px;
}
.mon-muc-carb { background: var(--carb-light); color: var(--carb-dark); }
.mon-muc-dam { background: var(--primary-light); color: var(--primary-dark); }

.mon-doi { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.mon-doi-o {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  font-size: 0.93rem; color: var(--text-primary);
  background: var(--surface-warm);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.mon-doi-ic { font-size: 1.2rem; line-height: 1; }
.mon-fact {
  margin: 12px 0 0; padding: 12px 14px;
  font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary);
  background: var(--gold-light); border-radius: var(--radius-sm);
}

.mon-dia { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.mon-dia-o {
  padding: 8px 14px; font-size: 0.9rem; color: var(--text-primary);
  background: var(--surface-warm);
  border: 1px solid var(--border-light); border-radius: 20px;
}
.mon-dia-o strong { color: var(--ink); }
.mon-dia-veg { border-color: var(--success); }
.mon-dia-carb { border-color: var(--carb); }
.mon-dia-protein { border-color: var(--primary); }

.mon-them {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; margin-top: 20px; padding: 12px 16px;
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700;
  color: var(--primary-dark); background: var(--primary-light);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  text-decoration: none;
}
.mon-them:hover { border-color: var(--primary); }
.mon-them:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Điện thoại: thẻ món bớt nới, ba ô số co lại cho vừa một hàng ngang màn 360px. */
@media (max-width: 600px) {
  .meal-card { padding: 18px 16px; gap: 12px; }
  .meal-card { scroll-margin-top: 72px; }
  .mon-xo { padding-top: 14px; }
  .mon-so { gap: 8px; }
  .mon-o { padding: 10px 7px; }
  .mon-o-tri { font-size: .95rem; }
  .mon-o-nhan { font-size: 0.86rem; }
  .mon-doi-o { padding: 9px 11px; font-size: .9rem; }
  .mon-khoi { margin-top: 16px; padding-top: 14px; }
}

/* ── Lolool referral: QR → xác minh bằng Zalo ─────────────────────────── */
.referral-goc:empty { display: none; }
.referral-goc {
  width: min(92vw, 680px); margin: 96px auto 24px; padding: 24px;
  border: 1px solid rgba(70, 159, 76, .22); border-radius: 24px;
  background: var(--surface); box-shadow: 0 18px 50px rgba(34,45,58,.12);
  position: relative; z-index: 2;
}
.referral-goc .rf-tieude { margin: 0 0 12px; color: var(--ink); }
.referral-goc .rf-mota, .referral-goc .rf-tiendo, .referral-goc .rf-dan {
  color: var(--text-secondary); line-height: 1.65;
}
/* Câu Pro + tên người mời, đứng NGAY TRƯỚC nút tạo tài khoản (Task 2, 05/09).
   Tách khỏi .rf-mota mặc định vì đây là dòng chuyển ý (từ "tra cân nặng
   miễn phí" sang "tạo tài khoản có Pro") — cần nhỉnh hơn một chút, không
   chìm như phần mô tả mở đầu. */
.referral-goc .rf-mota-pro {
  margin: 18px 0 0; color: var(--text-secondary); line-height: 1.6; font-size: 14px;
}
.referral-goc .rf-sdt, .referral-goc .rf-link {
  width: 100%; box-sizing: border-box; margin: 12px 0; padding: 13px 15px;
  border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit;
}
.referral-goc .rf-gui, .referral-goc .rf-chep, .referral-goc .rf-mo-zalo, .referral-goc .rf-candn-nut {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 11px 18px; border: 0; border-radius: 999px;
  background: var(--primary); color: var(--surface); font: 700 15px/1.2 inherit;
  text-decoration: none; cursor: pointer;
}
/* Khối "chưa đăng nhập" — mã QR/link gắn tài khoản nên cần đăng nhập trước. */
.referral-goc .rf-candn { text-align: center; padding: 26px 18px; }
.referral-goc .rf-candn-chu { margin: 0 0 16px; color: var(--text-secondary); line-height: 1.5; }
.referral-goc .rf-gui:disabled { opacity: .6; cursor: wait; }
.referral-goc .rf-loi { color: var(--danger-dark); min-height: 1.4em; }
.referral-goc .rf-so {
  padding: 14px; border-radius: 14px; background: var(--primary-light);
  color: var(--primary-dark); font: 800 28px/1.2 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .04em; text-align: center;
}
/* Mã ngắn 4 ký tự (03/09/2026) — thay .rf-so ở chế độ mã: chỉ 4 ký tự nên
   phóng to hơn hẳn, giãn chữ rộng để mẹ đọc từng ký tự không lẫn. */
.referral-goc .rf-ma-ngan {
  padding: 16px; border-radius: 14px; background: var(--primary-light);
  color: var(--primary-dark); font: 800 44px/1.2 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .22em; text-indent: .22em; text-align: center;
}
/* Dòng dự phòng "hoặc nhắn: Lolo 09xxxxxxxx" — cố ý nhỏ, đường chính là mã. */
.referral-goc .rf-hd-du-phong { margin: 2px 0 0; color: var(--text-secondary); font-size: .85rem; }

/* Màn Zalo — hai nút mượt + hướng dẫn 1-2-3 (01/09/2026, giảm ma sát bước
   Zalo). .rf-hd-cau hiện nguyên câu "Lolo <số>" để mẹ gõ tay được khi mọi
   cách chép đều hỏng; .rf-hd-chep là nút PHỤ (viền) đứng cạnh .rf-mo-zalo
   (nút CHÍNH, đã có nền đặc ở rule .rf-gui/.rf-chep/.rf-mo-zalo phía trên). */
.referral-goc .rf-hd-cau { margin: 6px 0 14px; color: var(--text-secondary); font-size: .92rem; }
.referral-goc .rf-hd-hang { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.referral-goc .rf-hd-hang .rf-hd-chep, .referral-goc .rf-hd-hang .rf-mo-zalo {
  flex: 1 1 auto; min-width: 180px;
}
.referral-goc .rf-hd-chep {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 18px; border: 1px solid var(--primary);
  border-radius: 999px; background: transparent; color: var(--primary-dark);
  font: 700 15px/1.2 inherit; cursor: pointer;
}
.referral-goc .rf-hd-buoc { margin: 4px 0 14px; padding-left: 22px; color: var(--ink); line-height: 1.7; }
.referral-goc .rf-hd-buoc li { margin: 8px 0; font-size: 1rem; }
.referral-goc .rf-hd-lai { margin: 10px 0 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.5; }

/* Phòng khám đã xác nhận, chờ mẹ bấm (02/09/2026). Khi khối này hiện, ba
   bước hướng dẫn + hàng nút Chép/Mở Zalo đã xong việc — thu lại để mắt mẹ
   rơi thẳng vào nút "Tạo tài khoản ngay", không phải đọc lại từ đầu. Chỉ
   ẩn bằng CSS, DOM vẫn nguyên: mẹ nào dùng trình đọc màn hình hay tắt CSS
   vẫn còn đủ đường đi. */
.referral-goc .rf-zalo-xong .rf-hd-buoc,
.referral-goc .rf-zalo-xong .rf-hd-hang,
.referral-goc .rf-zalo-xong .rf-hd-du-phong,
.referral-goc .rf-zalo-xong .rf-hd-cau { display: none; }
.referral-goc .rf-hd-xong { margin: 8px 0 0; }
.referral-goc .rf-hd-xong-cau {
  margin: 0 0 12px; color: var(--primary-dark); font: 700 1.05rem/1.4 inherit;
}
.referral-goc .rf-hd-tao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 12px 18px; border: 0;
  border-radius: 999px; background: var(--primary); color: var(--surface);
  font: 800 16px/1.2 inherit; cursor: pointer;
}
.referral-goc .rf-hd-tao[disabled] { opacity: .6; cursor: default; }
.referral-goc .rf-hd-xong-lai { margin: 10px 0 0; color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }
.referral-goc .rf-qr { display: block; max-width: 220px; margin: 16px auto; }
.referral-goc .rf-thanh { height: 10px; margin: 18px 0 10px; overflow: hidden;
  border-radius: 999px; background: var(--primary-light); }
.referral-goc .rf-thanh-trong { height: 100%; border-radius: inherit; background: var(--primary); }
.referral-goc .rf-bxh { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-light); }
.referral-goc .rf-bxh-dong { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; }
/* Dòng của chính mẹ đang xem (31/08/2026) — tô nổi bằng token, không hex
   cứng: nền tối là mặc định, một mã màu cứng ở đây lặp lại đúng lỗi "chữ
   trắng trên nền trắng ban đêm" đã từng xảy ra (xem test/nen-toi-tuong-
   phan.test.js). */
.referral-goc .rf-bxh-toi {
  border-radius: 10px; padding: 8px 10px; margin: 0 -10px;
  background: var(--primary-light); color: var(--primary-dark); font-weight: 600;
}
.referral-goc .rf-bxh-sdt { font-variant-numeric: tabular-nums; }

/* Đặt tên cho link (Task 9, 01/09/2026). Form ẩn mặc định bằng CSS, JS chỉ
   toggle class "rf-mo" (js/referral.js#noiDatTen) — không dựng lại DOM. */
.referral-goc .rf-dat-ten { margin: 14px 0; }
.referral-goc .rf-dat-ten-nut {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 16px; border: 1px solid var(--primary);
  border-radius: 999px; background: transparent; color: var(--primary-dark);
  font: 700 14px/1.2 inherit; cursor: pointer;
}
.referral-goc .rf-dat-ten-form { display: none; margin-top: 10px; }
.referral-goc .rf-dat-ten-form.rf-mo { display: block; }
.referral-goc .rf-dat-ten-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; margin: 0 0 8px;
  border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit;
  text-transform: uppercase;
}
.referral-goc .rf-dat-ten-canh { color: var(--text-secondary); font-size: .82rem; line-height: 1.5; margin: 0 0 10px; }
.referral-goc .rf-dat-ten-xac-nhan {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 18px; border: 0; border-radius: 999px;
  background: var(--primary); color: var(--surface); font: 700 14px/1.2 inherit;
  cursor: pointer;
}
.referral-goc .rf-dat-ten-xac-nhan:disabled { opacity: .6; cursor: wait; }
.referral-goc .rf-dat-ten-loi { color: var(--danger-dark); min-height: 1.2em; margin: 8px 0 0; font-size: .85rem; }
.referral-goc .rf-dat-ten-da { color: var(--primary-dark); font-weight: 600; }

@media (max-width: 600px) {
  .referral-goc { width: auto; margin: 82px 12px 18px; padding: 18px; border-radius: 18px; }
  .referral-goc .rf-gui, .referral-goc .rf-mo-zalo, .referral-goc .rf-hd-chep { width: 100%; }
}

/* Dải tiến trình referral ở trang chủ (01/09/2026). Cả dải là MỘT nút. */
.rf-home-banner:empty { display: none; }
.rf-home-banner { width: min(92vw, 680px); margin: 14px auto; }
.rf-banner-mo {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 16px; border: 1px solid rgba(70,159,76,.22); border-radius: 18px;
  background: var(--surface); color: var(--ink); font: inherit;
  box-shadow: 0 10px 30px rgba(34,45,58,.10);
}
.rf-banner-hang { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; }
.rf-banner-ten { font-weight: 700; font-size: .95rem; }
.rf-banner-so { font-weight: 800; font-size: .95rem; color: var(--primary);
  white-space: nowrap; }
/* Thanh 3 nấc — mỗi nấc một mẹ, nấc đạt sáng lên. */
.rf-banner-mo .rf-thanh { display: flex; gap: 6px; margin: 0 0 8px;
  background: none; height: auto; overflow: visible; }
.rf-banner-mo .rf-nac { flex: 1; height: 10px; border-radius: 999px;
  background: var(--primary-light); }
.rf-banner-mo .rf-nac-dat { background: var(--primary); }
.rf-banner-chu { display: block; color: var(--text-secondary); font-size: .8rem; line-height: 1.45; }

/* Game "Cuộc đua tháng 9" — khối giải thưởng trong mục Mời khách. */
.referral-goc .rf-game {
  margin: 22px 0; padding: 16px; border-radius: 18px;
  border: 1px solid rgba(212, 175, 55, .45);
  background: linear-gradient(160deg, rgba(212,175,55,.10), rgba(70,159,76,.08));
}
.rf-game-han { margin: 4px 0 10px; font-weight: 700; color: var(--primary); }
.rf-game-giai { margin: 0 0 12px; padding-left: 20px; line-height: 1.7;
  color: var(--text-secondary); }
.rf-game-giai b { color: var(--ink); }
.rf-game-toi {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--primary-light); color: var(--primary-dark); font-weight: 700;
}
.rf-game-bxh-ten { margin: 12px 0 4px; color: var(--ink); }
.rf-game-the-le { margin: 12px 0 0; font-size: .82rem; line-height: 1.5;
  color: var(--text-secondary); }

/* Mục "Mời khách nhận quà khủng" (31/08/2026) — phần tĩnh của section. */
.rf-hero-img {
  /* height:auto BẮT BUỘC: thẻ img có width/height attr (chống nhảy layout) —
     chỉ đặt width thì height attr 759px vẫn ăn → ảnh bị kéo dọc (05/09 tối). */
  display: block; width: min(92vw, 680px); height: auto; margin: 0 auto 18px;
  border-radius: 24px; box-shadow: 0 18px 50px rgba(34,45,58,.12);
}
.rf-huong-dan {
  width: min(92vw, 680px); margin: 0 auto; color: var(--text-secondary);
  line-height: 1.65;
}
.rf-huong-dan h3 { color: var(--ink); margin: 0 0 8px; }

/* 3 card "Bước 1/2/3" (tối 01/09/2026) — mỗi bước kèm một màn hình minh hoạ
   thu nhỏ dựng bằng token theme, không ảnh bitmap: theme sáng/tối tự khớp. */
.rf-cac-buoc { display: grid; gap: 12px; margin: 0 0 12px; }
.rf-buoc {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border-light);
  border-radius: var(--radius-md, 14px); background: var(--surface-warm);
}
.rf-buoc-loi { flex: 1 1 auto; min-width: 0; }
.rf-buoc-so {
  display: inline-block; margin: 0 0 4px; padding: 2px 10px;
  border-radius: 999px; background: var(--primary-light);
  color: var(--primary-dark); font: 700 .78rem/1.6 inherit;
}
.rf-buoc-loi strong { display: block; color: var(--ink); }
.rf-buoc-loi p { margin: 6px 0 0; font-size: .97rem; line-height: 1.55; }
.rf-buoc-anh {
  flex: 0 0 132px; width: 132px; height: 132px;
  border-radius: 12px; object-fit: cover; cursor: zoom-in;
}
@media (max-width: 430px) {
  .rf-buoc { flex-direction: column; align-items: stretch; }
  .rf-buoc-anh { width: 100%; height: auto; aspect-ratio: 16/9; flex-basis: auto; }
}

/* Ảnh hướng dẫn chạm phóng to (mục 26, 05/09/2026) — lightbox tự chế
   (js/anh-phong-to.js), không thư viện. z-index cao hơn mọi overlay khác
   trong app (2100 là mức cao nhất trước đây) vì ảnh phóng to phải nổi trên
   tất cả, kể cả khi mở từ trong một overlay khác. */
.rf-hero-img { cursor: zoom-in; }
.pt-overlay {
  position: fixed; inset: 0; z-index: 2200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 15, 12, .82); padding: 20px;
}
.pt-anh {
  display: block; max-width: min(92vw, 720px); max-height: 86vh;
  width: auto; height: auto; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.pt-dong {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 999px; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  font: 400 26px/1 inherit; cursor: pointer;
}
.rf-qua {
  padding: 12px 14px; border-radius: 14px;
  background: var(--primary-light); color: var(--primary-dark);
}
/* Trong section thì khối động không cần tự đẩy mình xuống khỏi header nữa. */
.app-section .referral-goc { margin: 18px auto 24px; }

/* Nút đóng khối giới thiệu. Vùng chạm 44px theo chuẩn chạm của app; đặt tuyệt
   đối ở góc để không đẩy tiêu đề lệch khỏi trục. */
.referral-goc { position: relative; }
.referral-goc .rf-dong {
  position: absolute; top: 10px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--text-light); font: 300 26px/1 inherit; cursor: pointer;
}
.referral-goc .rf-dong:hover { color: var(--ink); }
.referral-goc .rf-tieude { padding-right: 46px; }

/* Danh sách từng người mẹ A đã mời (Task 7, 31/08/2026). Token, không hex
   cứng: app bật nền tối mặc định, một mã màu cứng ở đây là chữ trắng trên
   nền trắng ban đêm (xem test/nen-toi-tuong-phan.test.js). */
.referral-goc .rf-ds { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-light); }
.referral-goc .rf-ds-h { margin: 0 0 8px; font-size: .95rem; color: var(--ink); }
.referral-goc .rf-ds-dong { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: .88rem; color: var(--text-secondary); }
.referral-goc .rf-ds-ngay { font-variant-numeric: tabular-nums; }
/* Thanh tiến trình riêng cho MỖI mẹ (01/09/2026) — cùng tông thanh tổng
   .rf-thanh/.rf-thanh-trong ở trên, chỉ nhỏ hơn vì đây là một dòng phụ. */
.referral-goc .rf-ds-thanh {
  height: 6px; margin: 0 0 10px; overflow: hidden;
  border-radius: 999px; background: var(--primary-light);
}
.referral-goc .rf-ds-thanh-trong {
  /* --chu-nhan đã khai báo ở :root (đầu file) nên không cần fallback hex ở
     đây — khối CSS này nằm sau mốc "THẺ MÓN ĂN MỞ ĐƯỢC..." bị test
     the-mon-an-mo-duoc quét cấm MỌI mã màu viết cứng, kể cả trong fallback. */
  height: 100%; border-radius: inherit; background: var(--chu-nhan);
}

/* Báo cáo admin (01/09/2026) — js/referral.js#veAdmin/noiAdmin. CHỈ tài
   khoản admin thấy khối này (client che theo me.la_admin, server tự kiểm
   lại quyền ở /api/referral/admin — client chỉ là gợi ý UI). Toàn token,
   không hex cứng: khối CSS này cũng nằm sau mốc "THẺ MÓN ĂN MỞ ĐƯỢC..." bị
   test the-mon-an-mo-duoc quét cấm mọi mã màu viết cứng (xem chú thích ở
   rf-ds-thanh-trong ngay trên). */
.referral-goc .rf-admin {
  margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--border-light);
}
.referral-goc .rf-admin-nut {
  width: 100%; padding: 12px 16px; border-radius: 12px; border: none;
  background: var(--primary-light); color: var(--primary-dark);
  font-weight: 700; font-size: .92rem; cursor: pointer;
}
.referral-goc .rf-admin-nut:disabled { opacity: .6; cursor: wait; }
.referral-goc .rf-admin-ket:empty { display: none; }
.referral-goc .rf-admin-bc { margin-top: 14px; }
.referral-goc .rf-admin-tong { font-weight: 600; color: var(--ink); margin: 0 0 10px; font-size: .9rem; }
.referral-goc .rf-admin-trong { color: var(--text-secondary); font-size: .88rem; }
.referral-goc .rf-admin-loi { color: var(--danger-dark); font-size: .88rem; }
.referral-goc .rf-admin-ds { list-style: none; margin: 0; padding: 0; }
.referral-goc .rf-admin-dong {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--border-light);
  font-size: .85rem; color: var(--text-secondary);
}
.referral-goc .rf-admin-dong:last-child { border-bottom: none; }
.referral-goc .rf-admin-ten { font-weight: 600; color: var(--ink); }
.referral-goc .rf-admin-sdt { font-variant-numeric: tabular-nums; }
.referral-goc .rf-admin-diem { font-weight: 700; color: var(--primary-dark); margin-left: auto; }

/* ==========================================================================
   Máy card khoe (js/card-ui.js, Task 2 — 01/09/2026)

   Modal full màn hình vẽ card 1080×1350 (LoloCardGhep) lên canvas thu nhỏ.
   Mọi màu qua token để nền tối tự lật (xem test/nen-toi-tuong-phan.test.js).
   ========================================================================== */
.cardg-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5, 15, 12, .6);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.cardg-hop {
  width: min(94vw, 420px); max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-hover);
  display: flex; flex-direction: column; gap: 12px;
}
.cardg-hang-tieu { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cardg-tieude { margin: 0; color: var(--ink); font-size: 1.05rem; }
.cardg-dong {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-secondary); font-size: 18px; line-height: 1; cursor: pointer;
}
.cardg-dong:hover { background: var(--border-light); color: var(--ink); }
.cardg-canvas {
  width: 100%; height: auto; aspect-ratio: 1080 / 1350; display: block;
  border-radius: var(--radius-md); background: var(--bg-soft); box-shadow: var(--shadow-sm);
}
.cardg-anh-nhan {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border: 1px dashed var(--border); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: .88rem; text-align: center; cursor: pointer;
}
.cardg-anh-nhan:hover { border-color: var(--gold); color: var(--ink); }
.cardg-anh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; opacity: 0; }
.cardg-hang-nut { display: flex; flex-wrap: wrap; gap: 10px; }
.cardg-hang-nut button {
  flex: 1 1 auto; min-width: 100px; padding: 12px 10px; border: 0; border-radius: var(--radius-md);
  font: 700 .88rem/1.2 inherit; cursor: pointer;
}
.cardg-doi-mau { background: var(--bg-soft); color: var(--ink); }
.cardg-doi-mau:hover { background: var(--border-light); }
.cardg-luu { background: var(--primary-light); color: var(--primary-dark); }
.cardg-luu:hover { background: var(--primary); color: var(--surface); }
.cardg-share { background: var(--primary); color: var(--surface); }
.cardg-share:hover { background: var(--primary-hover); }

/* ==========================================================================
   TAB HUY HIỆU + THẺ LIFETIME (js/huy-hieu-ui.js) — Task 6, 01/09/2026

   Overlay của tab và overlay của modal chúc mừng là hai lớp riêng — modal
   chúc mừng z-index cao hơn để nổi lên trên tab khi cả hai cùng mở.
   ========================================================================== */
.hh-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5, 15, 12, .6);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.hh-hop {
  width: min(94vw, 560px); max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-hover);
  display: flex; flex-direction: column; gap: 12px;
}
.hh-hang-tieu { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hh-tieude { margin: 0; color: var(--ink); font-size: 1.05rem; }
.hh-dong {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-secondary); font-size: 18px; line-height: 1; cursor: pointer;
}
.hh-dong:hover { background: var(--border-light); color: var(--ink); }
.hh-dem { margin: 0; color: var(--text-secondary); font-size: .92rem; font-weight: 700; }

.hh-lifetime {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, hsl(150, 30%, 14%), hsl(150, 26%, 22%));
}
.hh-lifetime-so { margin: 0; color: var(--gold-light); font-weight: 700; font-size: 1rem; }
/* Khối Thành Viên Sáng Lập (13/09/2026) — cùng nền tối + vàng như Lifetime,
   đứng trên nó; tên một dòng, số thứ tự "#N/1.000" to hơn một chút. */
.hh-sang-lap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 14px 16px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, hsl(150, 30%, 14%), hsl(150, 26%, 22%));
}
.hh-sang-lap-ten { margin: 0; flex: 1 1 100%; color: var(--gold-light); font-weight: 700; font-size: .9rem; }
.hh-sang-lap-so { margin: 0; color: var(--surface); font-weight: 800; font-size: 1.25rem; }
.hh-khoe-sang-lap,
.hh-khoe-the {
  flex: 0 0 auto; padding: 10px 16px; border: 0; border-radius: var(--radius-md);
  background: var(--gold); color: hsl(150, 30%, 14%); font: 700 .86rem/1.2 inherit; cursor: pointer;
}
.hh-khoe-sang-lap:hover,
.hh-khoe-the:hover { background: var(--gold-dark); color: var(--surface); }

.hh-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px;
}
.hh-o {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 10px 6px; border-radius: var(--radius-md); background: var(--bg-soft);
}
.hh-o.hh-xam { opacity: .5; filter: grayscale(1); }
.hh-icon { font-size: 1.6rem; line-height: 1; }
.hh-ten { color: var(--ink); font-size: .74rem; font-weight: 700; line-height: 1.15; }
.hh-mota { color: var(--text-light); font-size: .66rem; line-height: 1.2; }

.hh-chuc-overlay {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(5, 15, 12, .65);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.hh-chuc-hop {
  width: min(92vw, 360px); background: var(--surface); border-radius: var(--radius-lg);
  padding: 26px 22px; box-shadow: var(--shadow-hover);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.hh-chuc-icon { font-size: 3rem; line-height: 1; }
.hh-chuc-tieude { margin: 4px 0 0; color: var(--ink); font-size: 1.05rem; }
.hh-chuc-ten { margin: 0; color: var(--primary-dark); font-size: 1.15rem; font-weight: 700; }
.hh-chuc-them { margin: 0; color: var(--text-secondary); font-size: .84rem; }
.hh-chuc-hang-nut { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }
.hh-chuc-hang-nut button {
  padding: 12px 10px; border: 0; border-radius: var(--radius-md);
  font: 700 .9rem/1.2 inherit; cursor: pointer;
}
.hh-chuc-tao-card { background: var(--primary); color: var(--surface); }
.hh-chuc-tao-card:hover { background: var(--primary-hover); }
.hh-chuc-de-sau { background: var(--bg-soft); color: var(--text-secondary); }
.hh-chuc-de-sau:hover { background: var(--border-light); color: var(--ink); }

/* Chấm đỏ trên nút "Huy hiệu" trong màn Tài khoản (js/auth-gate.js) khi
   LoloHuyHieu.coChamDo() báo có huy hiệu mới chưa xem. */
#agHuyHieu { position: relative; }
.ag-cham-do {
  position: absolute; top: 6px; right: 10px; width: 9px; height: 9px;
  border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 2px var(--surface);
}

/* ==========================================================================
   Màn "tiếc quá" — trượt trial (js/auth-gate.js#veManTruotTrial, Task 10,
   01/09/2026). Mẹ B hết 7 ngày dùng thử mà chưa mở app đủ 3 ngày trong trial
   — trước màn nộp tiền, mời mẹ tự mời 3 mẹ khác để lấy Pro miễn phí.

   Overlay riêng (không dùng chung #agOverlay của moOverlay() — xem lý do
   trong js/auth-gate.js), cùng z-index tầng với .ag-zalo-overlay (1600).
   ========================================================================== */
.ag-truot-overlay {
  position: fixed; inset: 0; z-index: 1600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(41, 61, 51, .5); padding: 20px;
}
.ag-truot-overlay[hidden] { display: none; }
.ag-truot-hop {
  position: relative; width: min(94vw, 392px); box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hover);
  padding: 26px 22px 22px; text-align: center;
}
.ag-truot-dong {
  position: absolute; top: 6px; right: 8px; width: 44px; height: 44px;
  display: grid; place-items: center; background: none; border: none;
  font-size: 1.6rem; line-height: 1; color: var(--text-secondary); cursor: pointer;
}
.ag-truot-tieude { margin: 6px 0 10px; color: var(--ink); font-size: 1.1rem; }
.ag-truot-mo { margin: 0 0 18px; color: var(--text-secondary); font-size: .92rem; line-height: 1.55; }
.ag-truot-cta {
  display: block; width: 100%; border: none; border-radius: 12px;
  background: var(--primary); color: var(--surface);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem;
  padding: 13px; cursor: pointer;
}
.ag-truot-cta:hover { background: var(--primary-hover); }

/* ==========================================================================
   POPUP "Cuộc đua tháng 9" — hiện khi vừa vào web (js/game-popup.js, 01/09/2026)

   Cùng khuôn modal với .hh-overlay/.ag-truot-hop: overlay nền tối translucent
   + hộp bo tròn nổi giữa màn. Mọi màu qua token var(--...) để nền tối tự lật
   (xem test/nen-toi-tuong-phan.test.js) — không có màu nào ở đây cần đè riêng
   trong css/nen-toi.css vì token đã đúng ý nghĩa ở cả hai chế độ.
   ========================================================================== */
.gpop-overlay {
  position: fixed; inset: 0; z-index: 1900;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(5, 15, 12, .6); overflow-y: auto;
}
.gpop-hop {
  position: relative; width: min(94vw, 380px);
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 26px 22px 22px; box-shadow: var(--shadow-hover);
  text-align: center; animation: gpopUp .28s ease;
}
@keyframes gpopUp { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.gpop-dong {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  border: 0; border-radius: 999px; background: var(--bg-soft); color: var(--text-secondary);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.gpop-dong:hover { background: var(--border-light); color: var(--ink); }
.gpop-icon { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.gpop-tieude { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.gpop-demnguoc { margin: 0 0 14px; font-size: .94rem; font-weight: 600; color: var(--primary-dark); }
.gpop-giai {
  list-style: none; margin: 0 0 14px; padding: 0; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
}
.gpop-giai li {
  font-size: .86rem; line-height: 1.4; color: var(--text-primary);
  padding: 8px 10px; border-radius: 10px; background: var(--bg-soft);
}
.gpop-giai li b { color: var(--gold-dark); }
.gpop-giai li.gpop-them { text-align: center; color: var(--text-light); background: transparent; padding: 0; }
.gpop-moi { margin: 0 0 16px; font-size: .86rem; line-height: 1.55; color: var(--text-secondary); }
.gpop-cta {
  display: block; width: 100%; border: 0; border-radius: 14px; padding: 14px;
  font-size: 16px; font-weight: 700; background: var(--primary); color: var(--surface);
  cursor: pointer; margin-bottom: 8px;
}
.gpop-cta:hover { background: var(--primary-hover); }
.gpop-sau {
  display: block; width: 100%; border: 0; background: none; padding: 8px;
  font-size: .86rem; color: var(--text-light); cursor: pointer; text-decoration: underline;
}

/* ───────────────────────────────────────────────────────────────────────────
   Thẻ NHẬP MÃ XÁC THỰC EMAIL (04/09/2026) — js/referral.js#veXacThucEmail.

   Nằm ngay đầu màn giới thiệu, trên mã QR: đây là việc mẹ B cần làm để người
   mời mẹ nhận được quà. Viền primary + nền primary-light để tách hẳn khỏi
   phần công cụ bên dưới, mẹ không lướt qua mất.
   ─────────────────────────────────────────────────────────────────────────── */
.referral-goc .rf-xt {
  margin: 0 0 18px; padding: 16px; border-radius: 14px;
  border: 1px solid var(--primary); background: var(--primary-light);
  text-align: left;
}
.referral-goc .rf-xt-tieude {
  margin: 0 0 6px; color: var(--primary-dark); font: 700 16px/1.35 inherit;
}
.referral-goc .rf-xt-loi {
  margin: 0 0 12px; color: var(--text-secondary); line-height: 1.6; font-size: 14px;
}
/* 12/09/2026: ô mã 6 số + nút Xác thực đã gỡ (link trong thư thay mã). Chỉ
   còn nút "Gửi lại thư" — nút phụ: viền, không nền, vì việc chính (bấm nút
   trong thư) không nằm trên màn này. */
.referral-goc .rf-xt-sua,
.referral-goc .rf-xt-lai {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; margin: 0 8px 8px 0; padding: 11px 18px;
  border: 1px solid var(--primary); border-radius: 999px;
  background: transparent; color: var(--primary-dark);
  font: 600 15px/1.2 inherit; cursor: pointer;
}
.referral-goc .rf-xt-tin {
  margin: 12px 0 0; min-height: 1.4em; line-height: 1.55; font-size: 14px;
  color: var(--primary-dark);
}
/* Nút "Gửi Lolool cho một mẹ bầu khác" (Task 6, 05/09/2026) — ích lợi THUẦN,
   đứng ngay trên mã QR, dưới thẻ xác thực email (nếu có). Cố ý dùng viền
   thay vì nền đặc như .rf-gui/.rf-chep: đây là hành động PHỤ, không cạnh
   tranh với nút "Sao chép link" bên dưới. */
.referral-goc .rf-chia-se-thuan {
  display: flex; width: 100%; box-sizing: border-box; align-items: center;
  justify-content: center; min-height: 48px; margin: 0 0 6px; padding: 12px 18px;
  border: 1px solid var(--primary); border-radius: 999px;
  background: var(--primary-light); color: var(--primary-dark);
  font: 700 15px/1.2 inherit; cursor: pointer;
}
.referral-goc .rf-chia-se-note {
  margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.6;
  text-align: center;
}
/* Dòng sức khoẻ đường email trên báo cáo admin (04/09/2026). */
.referral-goc .rf-admin-email { margin: 6px 0 0; color: var(--text-secondary); font-size: 14px; }
.referral-goc .rf-admin-keu { color: var(--danger-dark); font-weight: 700; }
/* Dòng nhắc nhỏ dưới nút "Tạo tài khoản" ở màn tiếp đón ?ref= (04/09/2026).
   Nói trước việc phải nhập email + mã 6 số, để mẹ không bất ngờ ở bước sau. */
.referral-goc .rf-mota-nho {
  margin: 12px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6;
}
.referral-goc .rf-moi-dangky {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 4px; padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--primary); color: var(--surface); font: 700 16px/1.2 inherit; cursor: pointer;
}
/* Nút GIÁ TRỊ TRƯỚC (Task 2, 05/09/2026) — tra cân nặng, không cần tài
   khoản. Đứng trước .rf-moi-dangky trong DOM và phải NHẸ hơn về mặt hình
   ảnh (viền, không nền đặc) để không cạnh tranh với nút "Tạo tài khoản"
   phía dưới — đây là bước lót đường, không phải điểm chuyển đổi chính. */
.referral-goc .rf-moi-tra {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 4px; padding: 12px 24px;
  border: 1px solid var(--primary); border-radius: 999px;
  background: var(--surface); color: var(--primary-dark);
  font: 700 16px/1.2 inherit; cursor: pointer;
}
/* Dải trang chủ khi mẹ chưa xác thực email (04/09/2026) — lối vào thứ hai cho
   mẹ đã đăng ký từ trước, không gặp màn phủ ngay sau đăng ký. Viền vàng để
   tách khỏi dải tiến trình xanh thường ngày: đây là VIỆC CẦN LÀM, không phải
   thông tin. */
.rf-home-banner .rf-banner-xt {
  border: 1px solid var(--warning);
  background: var(--warning-light);
}
.rf-home-banner .rf-banner-xt .rf-banner-ten { color: var(--warning-dark); }

/* Dải lối tắt cuối màn "Các chỉ số thai nhi" (Task 1, cải thiện T9, 05/09/2026)
   — mẹ vừa xem xong kết quả, bấm 1 cái là quay lại hồ sơ / cẩm nang / hành
   trình, không phải tự tìm menu trên cùng. */
.lolo-loi-tat {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--primary-light);
}
.lolo-loi-tat a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .95rem; color: var(--text-primary);
  background: var(--primary-light); border-radius: 999px;
  padding: 10px 18px; text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.lolo-loi-tat a:hover { background: var(--primary); color: var(--surface); transform: translateY(-1px); }

/* ==========================================================================
   Sổ khám của con (js/so-kham.js, 05/09/2026)
   Mỗi lần khám một thẻ gập; mở ra là "trang" của lần khám đó. Mobile-first:
   một cột, chạm ≥44px, số đo xuống dòng gọn trên màn hẹp.
   ========================================================================== */
#sokhamHost { max-width: 640px; margin: 0 auto; }
.sk-ds { display: flex; flex-direction: column; gap: 12px; }

.sk-lan {
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.sk-lan-dau {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  padding: 14px 16px; min-height: 44px; border: none; background: none;
  text-align: left; cursor: pointer; font-family: inherit;
}
.sk-lan-dau:hover { background: var(--surface-warm); }
.sk-lan-ngay { font-size: 1rem; font-weight: 700; color: var(--ink); }
.sk-lan-tom { font-size: .88rem; color: var(--text-secondary); line-height: 1.5; }

.sk-trang { padding: 0 16px 16px; border-top: 1px dashed var(--border-light); }
.sk-h3 { font-size: 1rem; color: var(--ink); margin: 0 0 10px; }
.sk-h4 { font-size: .92rem; color: var(--text-secondary); margin: 16px 0 8px; }

.sk-bang { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.sk-do {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--border-light);
}
.sk-do-ten { font-size: .92rem; color: var(--text-secondary); }
.sk-do-val { font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.sk-do-pct { font-size: .85rem; color: var(--chu-nhan); min-width: 34px; text-align: right; }

.sk-ghi-chu, .sk-hoi-input, .sk-moc-form input, .sk-moc-form select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border-light);
  border-radius: 10px; background: var(--surface-warm); color: var(--text-primary);
  font-size: .95rem; font-family: inherit;
}
.sk-ghi-chu { resize: vertical; min-height: 62px; }
.sk-ghi-chu:focus, .sk-hoi-input:focus { outline: none; border-color: var(--primary); background: var(--surface); }

.sk-cau-hoi { list-style: none; padding: 0; margin: 0 0 8px; }
.sk-cau-hoi-i {
  font-size: .92rem; color: var(--text-primary); line-height: 1.5;
  padding: 7px 0 7px 18px; position: relative; word-break: break-word;
}
.sk-cau-hoi-i::before { content: "•"; position: absolute; left: 4px; color: var(--chu-nhan); }
.sk-hoi-hang { display: flex; flex-direction: column; gap: 8px; }
.sk-hoi-them, .sk-anh-them, .sk-moc-them, .sk-trong-nut {
  min-height: 44px; padding: 11px 16px; border: none; border-radius: 12px;
  background: var(--primary); color: var(--chu-tren-nut); font-size: .95rem; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background .15s ease;
}
.sk-hoi-them:hover, .sk-anh-them:hover, .sk-moc-them:hover, .sk-trong-nut:hover { background: var(--primary-hover); }
.sk-anh-them { background: var(--surface-warm); color: var(--chu-nhan); border: 1px solid var(--border-light); }
.sk-anh-them:hover { background: var(--primary-light); }

.sk-anh-luoi { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sk-anh-thumb {
  width: 78px; height: 104px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--border-light); background: var(--surface-warm);
}
.sk-anh-note { font-size: .85rem; color: var(--text-light); line-height: 1.5; margin: 8px 0 0; }

.sk-doc-bai {
  display: block; width: 100%; min-height: 44px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--primary-light); color: var(--primary-dark);
  font-size: .95rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
.sk-doc-bai:hover { background: var(--surface); }

.sk-moc {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 14px; padding: 16px; box-shadow: var(--shadow-sm);
}
.sk-moc-ds { list-style: none; padding: 0; margin: 0 0 14px; }
.sk-moc-i { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--border-light); }
.sk-moc-ten-i { font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.sk-moc-phu { font-size: .85rem; color: var(--text-secondary); word-break: break-word; }
.sk-moc-form { display: flex; flex-direction: column; gap: 8px; }

.sk-trong {
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 14px; padding: 20px 16px; text-align: center; box-shadow: var(--shadow-sm);
}
.sk-trong-chu { font-size: .95rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 14px; }
.sk-trong-nho { font-size: .88rem; color: var(--text-light); line-height: 1.5; }

@media (min-width: 560px) {
  .sk-hoi-hang { flex-direction: row; align-items: center; }
  .sk-hoi-them { flex: 0 0 auto; }
}

/* ---------- "Đưa bác sĩ xem" — in gọn + gửi tóm tắt (mục 29, 05/09/2026) ---------- */
.sk-hanh { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sk-bac-si, .sk-chia-se {
  flex: 1 1 160px; padding: 12px 14px; border-radius: 12px; font-size: .92rem; font-weight: 700;
  text-align: center; cursor: pointer;
}
.sk-bac-si { background: var(--primary); color: var(--chu-tren-nut); border: none; }
.sk-bac-si:hover { background: var(--primary-hover); }
.sk-chia-se { background: var(--surface-warm); color: var(--chu-nhan); border: 1px solid var(--border-light); }
.sk-chia-se:hover { background: var(--primary-light); }

/* #skPrint gắn thẳng dưới <body>, mặc định ẩn — chỉ hiện khi in (body có lớp
   sk-printing). Khuôn theo js/giodo.js (#gdPrint/gd-printing), xem js/so-kham.js.
   Màu dùng token --muc-in/--vien-in/--nen-in (khai ở :root, đầu file), không
   viết cứng mã màu ở đây — giấy in phải luôn trắng-đen bất kể app đang bật
   nền tối. --nen-in ép nền trắng bằng !important vì html body { background:
   var(--bg-main) } (css/nen-toi.css) có độ ưu tiên cao hơn .sk-printing thường —
   thiếu !important thì chữ đen nằm trên nền tối, không đọc được (bắt được lúc
   chụp màn hình sanity, xem báo cáo Task 7).
   QUAN TRỌNG: luật ẩn mặc định PHẢI nằm NGOÀI @media print (giống #gdPrint của
   js/giodo.js) — thiếu dòng này thì #skPrint không có display nào cả nên sau
   lần đầu bấm "Đưa bác sĩ xem" cả bản tóm tắt ở lại NGUYÊN VĨNH VIỄN dưới cùng
   trang, ai cuộn xuống cũng thấy (fix round 1, review Task 7). */
#skPrint { display: none; }

@media print {
  body.sk-printing > * { display: none !important; }
  body.sk-printing { background: var(--nen-in) !important; }
  body.sk-printing > #skPrint {
    display: block !important; background: var(--nen-in); font-family: Georgia, serif; color: var(--muc-in);
  }
  /* h1/h4 có luật riêng "h1, h2, h3, h4, h5, h6 { color: var(--ink); }" ở đầu
     file — luật trên MỘT thẻ luôn thắng màu kế thừa từ #skPrint dù #skPrint có
     chọn lọc chặt hơn, nên phải ghi đè thẳng vào chính hai thẻ này, không nhờ
     kế thừa được (bắt được lúc chụp màn hình sanity — tiêu đề mờ gần như mất
     chữ trên nền tối trước khi có dòng này). */
  #skPrint h1, #skPrint h4 { color: var(--muc-in); }
  #skPrint table { width: 100%; border-collapse: collapse; }
  #skPrint td, #skPrint th { border-bottom: 1px solid var(--vien-in); padding: 4px 6px; font-size: 12px; }
}