/*
 * DailyCalo web — cùng ngôn ngữ thiết kế với app (src/theme/tokens.ts):
 * nền xám rất nhạt + vệt sáng trôi phía sau, mọi khối nổi là kính, màu nhấn là
 * mực, số liệu dùng một màu duy nhất là xanh chanh. Chữ: Be Vietnam Pro cho
 * nội dung, Playfair Display cho tiêu đề, Geist 700 chỉ cho chữ "DailyCalo".
 */
:root {
  --bg: #f5f6f8;
  --glass-from: rgba(255, 255, 255, 0.74);
  --glass-to: rgba(255, 255, 255, 0.38);
  --surface2: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.88);
  --ink: #0b0d12;
  --sub: rgba(11, 13, 18, 0.55);
  --faint: rgba(11, 13, 18, 0.34);
  --accent: #0b0d12;
  --on-accent: #ffffff;
  --track: rgba(11, 13, 18, 0.07);
  --bar-out: rgba(11, 13, 18, 0.22);
  --raised: #ffffff;
  --hairline: rgba(11, 13, 18, 0.12);
  --blob: rgba(11, 13, 18, 0.05);
  --blob-mid: rgba(11, 13, 18, 0.018);
  --data: #85c300;
  --data-soft: #6fa800;
  --data-faint: #5c8e00;
  --shadow-card: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(30, 40, 80, 0.05), 0 16px 36px -16px rgba(30, 40, 80, 0.24);
  --shadow-small: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(30, 40, 80, 0.24);
  --lg-from: rgba(255, 255, 255, 0.34);
  --lg-to: rgba(255, 255, 255, 0.06);
  --lg-sheen: rgba(255, 255, 255, 0.7);
  --lg-rim-hi: rgba(255, 255, 255, 1);
  --lg-rim-lo: rgba(255, 255, 255, 0.25);
  --lg-glow: rgba(255, 255, 255, 0.75);
  --lg-menu-from: rgba(255, 255, 255, 0.62);
  --lg-menu-to: rgba(255, 255, 255, 0.36);

  --r-chip: 999px;
  --r-small: 14px;
  --r-input: 20px;
  --r-tile: 24px;
  --r-card: 26px;

  --ease-enter: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-pop: cubic-bezier(0.3, 1.6, 0.5, 1);

  --sans: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --brand: "Geist", var(--sans);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0b10;
    --glass-from: rgba(255, 255, 255, 0.11);
    --glass-to: rgba(255, 255, 255, 0.03);
    --surface2: rgba(255, 255, 255, 0.07);
    --line: rgba(255, 255, 255, 0.13);
    --ink: #f3f5f8;
    --sub: rgba(243, 245, 248, 0.56);
    --faint: rgba(243, 245, 248, 0.34);
    --accent: #f3f5f8;
    --on-accent: #0b0d12;
    --track: rgba(255, 255, 255, 0.1);
    --bar-out: rgba(255, 255, 255, 0.3);
    --raised: #1c1e25;
    --hairline: rgba(255, 255, 255, 0.16);
    --blob: rgba(243, 245, 248, 0.07);
    --blob-mid: rgba(243, 245, 248, 0.025);
    --data: #b4fc25;
    --data-soft: #79b400;
    --data-faint: #517700;
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 36px -16px rgba(0, 0, 0, 0.6);
    --shadow-small: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
    --lg-from: rgba(255, 255, 255, 0.07);
    --lg-to: rgba(255, 255, 255, 0.01);
    --lg-sheen: rgba(255, 255, 255, 0.1);
    --lg-rim-hi: rgba(255, 255, 255, 0.42);
    --lg-rim-lo: rgba(255, 255, 255, 0.05);
    --lg-glow: rgba(255, 255, 255, 0.1);
  --lg-menu-from: rgba(28, 30, 37, 0.62);
  --lg-menu-to: rgba(20, 22, 28, 0.42);
    --lg-menu-from: rgba(28, 30, 37, 0.62);
    --lg-menu-to: rgba(20, 22, 28, 0.42);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0a0b10;
  --glass-from: rgba(255, 255, 255, 0.11);
  --glass-to: rgba(255, 255, 255, 0.03);
  --surface2: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.13);
  --ink: #f3f5f8;
  --sub: rgba(243, 245, 248, 0.56);
  --faint: rgba(243, 245, 248, 0.34);
  --accent: #f3f5f8;
  --on-accent: #0b0d12;
  --track: rgba(255, 255, 255, 0.1);
  --bar-out: rgba(255, 255, 255, 0.3);
  --raised: #1c1e25;
  --hairline: rgba(255, 255, 255, 0.16);
  --blob: rgba(243, 245, 248, 0.07);
  --blob-mid: rgba(243, 245, 248, 0.025);
  --data: #b4fc25;
  --data-soft: #79b400;
  --data-faint: #517700;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 36px -16px rgba(0, 0, 0, 0.6);
  --shadow-small: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  --lg-from: rgba(255, 255, 255, 0.07);
  --lg-to: rgba(255, 255, 255, 0.01);
  --lg-sheen: rgba(255, 255, 255, 0.1);
  --lg-rim-hi: rgba(255, 255, 255, 0.42);
  --lg-rim-lo: rgba(255, 255, 255, 0.05);
  --lg-glow: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* clip (không phải hidden) để không biến body thành khung cuộn — giữ được
     thanh trên dính (sticky); đặt cả ở html vì Safari iPhone hay bỏ qua body. */
  overflow-x: clip;
}

html {
  overflow-x: clip;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Nền: ba vệt sáng trôi chậm (Ambient trong app) ─────────────────────── */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blob) 0%, var(--blob-mid) 60%, transparent 100%);
  animation: drift1 18s ease-in-out infinite alternate;
}

.blob.b1 {
  left: -220px;
  top: 4vh;
  animation-name: drift1;
}
.blob.b2 {
  right: -200px;
  top: 32vh;
  animation-name: drift2;
  animation-duration: 22s;
}
.blob.b3 {
  left: 12vw;
  top: 66vh;
  animation-name: drift3;
  animation-duration: 16s;
}

/* Không dùng var() trong @keyframes: Safari trên iPhone không đọc được. */
@keyframes drift1 {
  to {
    transform: translate(70px, 96px);
  }
}
@keyframes drift2 {
  to {
    transform: translate(-80px, -66px);
  }
}
@keyframes drift3 {
  to {
    transform: translate(92px, -78px);
  }
}

/* ── Kính: Liquid Glass ────────────────────────────────────────────────
   Trong hơn kính mờ cũ để thấy vệt nền, cành lá, chim phía sau; mép bắt
   sáng chuyển sắc như cạnh miếng kính thật; quầng sáng mỏng trong mép trên
   và đáy cho cảm giác dày như thấu kính; một vệt sáng chạy theo con trỏ
   (--mx/--my, đặt trong main.js). */
.glass {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at var(--mx, 18%) var(--my, 0%), var(--lg-sheen), transparent 55%),
    linear-gradient(150deg, var(--lg-from), var(--lg-to));
  -webkit-backdrop-filter: blur(6px) saturate(190%) brightness(1.05);
  backdrop-filter: blur(6px) saturate(190%) brightness(1.05);
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 1px var(--lg-glow),
    inset 0 12px 22px -16px var(--lg-glow),
    inset 0 -10px 18px -14px var(--lg-glow),
    0 1px 2px rgba(30, 40, 80, 0.05),
    0 18px 40px -18px rgba(30, 40, 80, 0.28);
}

/* Chromium: bẻ cong hình phía sau như thấu kính (bộ lọc riêng từng khối, gắn
   inline trong main.js), chỉ nhoè rất nhẹ cho trong. Khối nhỏ (.small) giữ kính thường
   cho nhẹ máy. */
.refract .glass:not(.small):not(.float) {
  backdrop-filter: blur(2px) saturate(190%) brightness(1.05);
}

/* Mép kính bắt sáng: viền chuyển sắc, sáng ở hai góc chéo, mờ ở giữa. */
.glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.25px;
  background: linear-gradient(
    135deg,
    var(--lg-rim-hi) 0%,
    var(--lg-rim-lo) 28%,
    transparent 50%,
    var(--lg-rim-lo) 72%,
    var(--lg-rim-hi) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.glass.small {
  box-shadow:
    inset 0 1px 1px var(--lg-glow),
    inset 0 -6px 12px -10px var(--lg-glow),
    0 10px 24px -14px rgba(30, 40, 80, 0.26);
}

:root[data-theme="dark"] .glass,
:root[data-theme="dark"] .glass.small {
  box-shadow:
    inset 0 1px 1px var(--lg-glow),
    inset 0 -10px 18px -14px var(--lg-glow),
    0 18px 40px -18px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glass,
  :root:not([data-theme="light"]) .glass.small {
    box-shadow:
      inset 0 1px 1px var(--lg-glow),
      inset 0 -10px 18px -14px var(--lg-glow),
      0 18px 40px -18px rgba(0, 0, 0, 0.7);
  }
}

/* ── Bố cục ───────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 600px) {
  .wrap {
    padding: 0 16px;
  }
}

.label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--serif);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(42px, 5.4vw, 70px);
  line-height: 1.05;
}

h2 {
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.1;
}

h1 em,
h2 em {
  font-style: italic;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--sub);
  max-width: 34em;
}

/* ── Nút ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px;
  border-radius: var(--r-input);
  font: 600 15px/1 var(--sans);
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.35s var(--ease-pop), opacity 0.2s;
}

.btn:active {
  transform: scale(0.95);
}

.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn.ghost {
  color: var(--ink);
  background: linear-gradient(150deg, var(--lg-from), var(--lg-to));
  -webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.04);
  backdrop-filter: blur(16px) saturate(200%) brightness(1.04);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 1px var(--lg-glow), inset 0 -6px 12px -10px var(--lg-glow), 0 10px 24px -14px rgba(30, 40, 80, 0.26);
}

/* Trên nền kính (khung cuối trang) nút phụ cần viền mực mới tách khỏi nền. */
.glass .btn.ghost {
  border-color: var(--hairline);
  box-shadow: none;
}

.btn svg {
  width: 20px;
  height: 20px;
}

.btn .two {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.btn .two small {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ── Thanh trên ───────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 14px;
  z-index: 20;
  margin-top: 14px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
  padding: 0 10px 0 20px;
  border-radius: var(--r-card);
}

.lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.lockup svg {
  width: 26px;
  height: 26px;
}

.lockup span {
  font: 700 21px/1 var(--brand);
  letter-spacing: -0.045em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  padding: 10px 14px;
  border-radius: var(--r-chip);
  font-size: 14px;
  font-weight: 500;
  color: var(--sub);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav .btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 16px;
  font-size: 14px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--sub);
  cursor: pointer;
  transition: color 0.2s, transform 0.35s var(--ease-pop);
}

.icon-btn:hover {
  color: var(--ink);
}

.icon-btn:active {
  transform: scale(0.88);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Menu theo mục: nằm ngang trên máy tính, gom vào nút ☰ khi màn hẹp. */
.nav-inner {
  position: relative;
}

.menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

.menu a {
  text-decoration: none;
  border-radius: var(--r-chip);
  transition: color 0.2s, background 0.2s;
}

.menu a.on {
  color: var(--ink);
  background: var(--track);
}

.menu-btn {
  display: none;
}

/* Ba gạch → chữ X: gạch trên và dưới xoay về giữa, gạch giữa thu lại. */
.burger {
  position: relative;
  width: 18px;
  height: 14px;
}

.burger i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.7px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease-pop), opacity 0.2s, top 0.25s var(--ease-enter);
}

.burger i:nth-child(1) {
  top: 0;
}
.burger i:nth-child(2) {
  top: calc(50% - 0.85px);
}
.burger i:nth-child(3) {
  top: calc(100% - 1.7px);
}

.menu-btn[aria-expanded="true"] {
  color: var(--ink);
}

.menu-btn[aria-expanded="true"] .burger i:nth-child(1) {
  top: calc(50% - 0.85px);
  transform: rotate(45deg);
}
.menu-btn[aria-expanded="true"] .burger i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.menu-btn[aria-expanded="true"] .burger i:nth-child(3) {
  top: calc(50% - 0.85px);
  transform: rotate(-45deg);
}

/* Link pháp lý chỉ hiện trong menu thả xuống (máy tính đã có ở chân trang). */
.menu-extra {
  display: none;
}

/* Thanh trên cùng dính ở đầu trang: chừa chỗ để không che tiêu đề mục. */
[id] {
  scroll-margin-top: 92px;
}

@media (max-width: 1024px) {
  .menu-btn {
    display: grid;
  }

  /* Trên màn hẹp, main.js đưa menu ra ngoài thanh (ngay dưới) và gắn lớp
     .glass: kính lồng trong kính chỉ thấy phần bên trong lớp ngoài, nên nếu để
     trong thanh thì menu thành mảng phẳng, không thấy trang phía sau. */
  .menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 24px;
    right: 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    border-radius: var(--r-card);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.35s var(--ease-pop);
  }

  /* Menu đè lên chữ của trang: kính đậm hơn card một chút cho dễ đọc. */
  .menu.glass {
    background:
      radial-gradient(120% 90% at var(--mx, 18%) var(--my, 0%), var(--lg-sheen), transparent 55%),
      linear-gradient(150deg, var(--lg-menu-from), var(--lg-menu-to));
    -webkit-backdrop-filter: blur(18px) saturate(200%) brightness(1.05);
    backdrop-filter: blur(18px) saturate(200%) brightness(1.05);
  }

  .refract .menu.glass {
    backdrop-filter: blur(14px) saturate(200%) brightness(1.05);
  }

  .menu.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .menu a {
    padding: 13px 16px;
    border-radius: 16px;
    font-size: 16px;
    color: var(--ink);
  }

  .menu-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--track);
  }

  .menu-extra a {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--sub);
  }

  /* Mục trong menu nảy vào lần lượt khi mở. */
  .menu > a,
  .menu-extra {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s, transform 0.4s var(--ease-enter);
  }

  .menu.open > a,
  .menu.open .menu-extra {
    opacity: 1;
    transform: none;
  }

  .menu.open > a:nth-child(2) { transition-delay: 25ms; }
  .menu.open > a:nth-child(3) { transition-delay: 50ms; }
  .menu.open > a:nth-child(4) { transition-delay: 75ms; }
  .menu.open > a:nth-child(5) { transition-delay: 100ms; }
  .menu.open > a:nth-child(6) { transition-delay: 125ms; }
  .menu.open .menu-extra { transition-delay: 150ms; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
  padding-top: 72px;
  padding-bottom: 96px;
}

/* Cụm chữ đầu trang nằm trong một thẻ kính. */
.hero-card {
  padding: 44px 44px 40px;
  border-radius: 34px;
}

.hero-card h1 {
  font-size: clamp(40px, 4.6vw, 62px);
}

/* "Ghi lại trọn vẹn." luôn nằm riêng một dòng. */
.hero-card h1 em {
  display: block;
}

/* "Ăn, tập, hồi phục." không bao giờ ngắt dòng; trên điện thoại cỡ chữ co
   theo bề ngang màn để câu luôn vừa trong thẻ. */
.hero-card h1 .line {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .hero-card h1 {
    font-size: clamp(28px, 9.8vw, 40px);
  }
}

@media (max-width: 600px) {
  .hero-card {
    padding: 28px 22px 24px;
    border-radius: 28px;
  }
}

.hero .label {
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero .label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--data);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--data) 22%, transparent);
}

.hero h1 {
  margin-bottom: 24px;
}

.hero .lead {
  margin-bottom: 36px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hero-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 40px;
    padding-bottom: 56px;
    gap: 48px;
  }
}

/* ── Mô hình điện thoại ───────────────────────────────────────────────── */
.phone {
  position: relative;
  width: 320px;
  max-width: 100%;
  aspect-ratio: 402 / 874;
  padding: 10px;
  border-radius: 54px;
  background: linear-gradient(160deg, #2a2d35, #0b0d12 60%);
  box-shadow: 0 40px 80px -30px rgba(30, 40, 80, 0.45), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
}

.screen {
  position: relative;
  height: 100%;
  border-radius: 44px;
  overflow: hidden;
  background: var(--bg);
  padding: 50px 16px 0;
  font-size: 12px;
}

.screen .ambient-in {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.screen .ambient-in::before,
.screen .ambient-in::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blob) 0%, transparent 70%);
}

.screen .ambient-in::before {
  left: -120px;
  top: 40px;
}
.screen .ambient-in::after {
  right: -130px;
  bottom: 120px;
}

.island {
  position: absolute;
  top: 12px;
  left: 50%;
  translate: -50% 0;
  width: 96px;
  height: 28px;
  border-radius: 20px;
  background: #000;
  z-index: 3;
}

.statusbar {
  position: absolute;
  top: 16px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  z-index: 2;
}

.scr-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 8px 2px 14px;
}

.scr-head .label {
  font-size: 8.5px;
}

.scr-head h4 {
  margin: 2px 0 0;
  font: 400 26px/1.1 var(--serif);
}

.scr-head .date {
  font-size: 10px;
  color: var(--sub);
}

.card {
  position: relative;
  border-radius: 22px;
  padding: 14px;
  margin-bottom: 10px;
}

.kcal {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ring {
  position: relative;
  flex: none;
  width: 104px;
  height: 104px;
}

.ring svg {
  transform: rotate(-90deg);
}

.ring .center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.ring b {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ring small {
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: var(--sub);
  margin-top: 3px;
}

.arc {
  stroke: var(--data);
  stroke-dasharray: 0 400;
  transition: stroke-dasharray 1.6s var(--ease-enter);
}

.in .arc {
  stroke-dasharray: var(--len) 400;
}

.macros {
  flex: 1;
  display: grid;
  gap: 9px;
}

.macro .row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  margin-bottom: 4px;
}

.macro .row span {
  color: var(--sub);
}

.bar {
  height: 6px;
  border-radius: 6px;
  background: var(--track);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--data);
  transition: width 1.4s var(--ease-enter) 0.2s;
}

.in .bar i {
  width: var(--w);
}

.meal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.meal + .meal {
  border-top: 1px solid var(--track);
}

.thumb {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--track);
  display: grid;
  place-items: center;
  color: var(--sub);
}

.thumb svg {
  width: 20px;
  height: 20px;
}

.meal .name {
  flex: 1;
  min-width: 0;
}

.meal .name b {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meal .name span {
  display: block;
  font-size: 9.5px;
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meal .k {
  font-size: 12px;
  font-weight: 600;
}

.tabbar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 18px;
  height: 56px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  z-index: 2;
}

.tabbar button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: 8px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.5;
}

.tabbar button.on,
.tabbar button:hover {
  opacity: 1;
}

.tabbar svg {
  width: 19px;
  height: 19px;
}

/* Bong bóng nổi quanh điện thoại */
.float {
  position: absolute;
  border-radius: 20px;
  padding: 12px 14px;
  font-size: 13px;
  animation: bob 6s ease-in-out infinite alternate;
  z-index: 2;
}

.float.david {
  left: -120px;
  bottom: 8%;
  width: 230px;
}

.float.scan {
  right: -64px;
  top: 14%;
  animation-delay: -3s;
}

.float .who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.float .who .label {
  font-size: 9.5px;
}

.receipt {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: var(--r-chip);
  border: 1px solid var(--hairline);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
}

.float.scan b {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

@keyframes bob {
  to {
    transform: translateY(-10px);
  }
}

@media (max-width: 600px) {
  .phone {
    width: 280px;
  }
  .float {
    display: none;
  }
}

/* Orb của David — gradient nón xoay */
.orb {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--ink), var(--data), var(--faint), var(--ink));
  animation: spin 6s linear infinite;
}

.orb::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--raised);
  filter: blur(2px);
  opacity: 0.85;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Mục ──────────────────────────────────────────────────────────────── */
section {
  padding: 88px 0;
}

.sec-head {
  max-width: 640px;
  margin-bottom: 44px;
}

.sec-head .label {
  display: block;
  margin-bottom: 14px;
}

.sec-head h2 {
  margin-bottom: 16px;
}

/* Lưới tính năng */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tile {
  border-radius: var(--r-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 230px;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.6s var(--ease-enter), transform 0.6s var(--ease-enter);
}

.tile.in {
  opacity: 1;
  transform: none;
}

.tile .ico {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.tile .ico svg {
  width: 24px;
  height: 24px;
}

.tile p {
  color: var(--sub);
  font-size: 15px;
}

.tile .chips {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
}

.chip {
  padding: 5px 11px;
  border-radius: var(--r-chip);
  border: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--sub);
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .tile {
    min-height: 0;
  }
}

/* Mục tách đôi: chữ một bên, minh hoạ một bên */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split.flip > :first-child {
  order: 2;
}

@media (max-width: 900px) {
  .split,
  .split.flip {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .split.flip > :first-child {
    order: 0;
  }
}

.points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.points li {
  display: flex;
  gap: 12px;
  color: var(--sub);
}

.points li b {
  color: var(--ink);
  font-weight: 600;
}

.points svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--ink);
}

/* Minh hoạ: quét món ăn */
.scanner {
  border-radius: 30px;
  padding: 16px;
}

.photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--track);
}

.photo > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.photo .line {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--data);
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--data) 60%, transparent);
  animation: scan 2.4s ease-in-out infinite alternate;
}

@keyframes scan {
  from {
    top: 6%;
  }
  to {
    top: 94%;
  }
}

.photo .tag {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 12px;
  border-radius: var(--r-chip);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.items {
  margin-top: 14px;
  display: grid;
  gap: 2px;
}

.item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
}

.item + .item {
  border-top: 1px solid var(--track);
}

.check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
}

.check svg {
  width: 13px;
  height: 13px;
}

.item .name {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
}

.item .name span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sub);
}

.item .k {
  font-weight: 600;
}

.add {
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}

/* Minh hoạ: trò chuyện với David */
.chat {
  border-radius: 30px;
  padding: 22px;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--track);
}

.chat-head .orb {
  width: 44px;
  height: 44px;
}

.chat-head b {
  display: block;
  font-size: 16px;
}

.msgs {
  display: grid;
  gap: 12px;
}

.msg {
  max-width: 82%;
  padding: 12px 15px;
  font-size: 14.5px;
  line-height: 1.5;
}

.msg.me {
  justify-self: end;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 20px 20px 6px 20px;
}

.msg.ai {
  border-radius: 20px 20px 20px 6px;
}

.receipts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -4px;
}

.composer {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 8px 0 18px;
  border-radius: var(--r-input);
  color: var(--faint);
  font-size: 14.5px;
}

.composer > span:first-child {
  flex: 1;
}

.composer .send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
}

.composer svg {
  width: 17px;
  height: 17px;
}

/* Minh hoạ: biểu đồ năng lượng nạp vs tiêu */
.chart {
  border-radius: 30px;
  padding: 24px;
}

.chart-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.chart .big {
  font-size: 26px;
}

.seg {
  display: flex;
  padding: 3px;
  border-radius: var(--r-chip);
  background: var(--track);
  font-size: 12px;
  font-weight: 600;
}

.seg button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--r-chip);
  color: var(--sub);
  transition: background 0.25s, color 0.25s;
}

.seg .on {
  background: var(--raised);
  color: var(--ink);
  box-shadow: var(--shadow-small);
}

.bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 10px;
  height: 180px;
}

.day {
  display: grid;
  gap: 8px;
  height: 100%;
  grid-template-rows: 1fr auto;
}

.pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.pair i {
  width: 9px;
  border-radius: 5px;
  height: 0;
  transition: height 1.2s var(--ease-enter);
}

.pair i:first-child {
  background: var(--data);
}

.pair i:last-child {
  background: var(--bar-out);
}

.in .pair i {
  height: var(--h);
}

.day small {
  text-align: center;
  font-size: 11px;
  color: var(--sub);
}

.legend {
  display: flex;
  gap: 18px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--sub);
}

.legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.stat {
  border-radius: 18px;
  padding: 14px;
  background: var(--surface2);
  border: 1px solid var(--line);
}

.stat b {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.stat .label {
  font-size: 9.5px;
}

/* Chuyên gia */
.pros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pro {
  border-radius: var(--r-card);
  padding: 22px;
}

.pro .top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--track);
  font-weight: 600;
}

.pro .top b {
  display: block;
  font-size: 15.5px;
}

.pro .top span {
  font-size: 13px;
  color: var(--sub);
}

.pro p {
  font-size: 14.5px;
  color: var(--sub);
}

.pro .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .pros {
    grid-template-columns: 1fr;
  }
}

/* Kêu gọi cuối trang */
.final {
  text-align: center;
  border-radius: 36px;
  padding: 72px 24px;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.final svg.mark {
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
}

.final .lead {
  margin-bottom: 14px;
}

/* Chân trang */
/* `footer.wrap` để thắng `.wrap` (chỉ đặt lề hai bên). */
footer.wrap {
  margin-top: 56px;
  padding-bottom: 72px;
  color: var(--sub);
  font-size: 14.5px;
}

.foot {
  padding-top: 56px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px 56px;
}

.foot-brand {
  display: grid;
  gap: 14px;
  max-width: 300px;
}

.foot-brand .lockup {
  color: var(--ink);
}

.foot-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
}

.foot-cols div {
  display: grid;
  gap: 12px;
  align-content: start;
}

.foot-cols .label {
  margin-bottom: 4px;
  font-size: 10.5px;
  color: var(--faint);
}

.foot a {
  text-decoration: none;
  transition: color 0.2s;
}

.foot a:hover {
  color: var(--ink);
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--track);
  font-size: 13px;
  color: var(--faint);
}

@media (max-width: 600px) {
  footer.wrap {
    padding-bottom: 56px;
  }
  .foot {
    padding-top: 44px;
  }
  .foot-cols {
    gap: 32px 48px;
  }
}

/* Trang văn bản (chính sách, hỗ trợ) */
.doc {
  max-width: 760px;
  margin: 56px auto 40px;
  border-radius: 32px;
  padding: clamp(28px, 5vw, 56px);
}

.doc h1 {
  font-size: clamp(36px, 5vw, 52px);
  margin: 10px 0 12px;
}

.doc h2 {
  font-size: 26px;
  margin: 40px 0 12px;
}

.doc p,
.doc li {
  color: var(--sub);
}

.doc p + p {
  margin-top: 12px;
}

.doc ul {
  padding-left: 20px;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.doc strong {
  color: var(--ink);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .tile {
    opacity: 1;
    transform: none;
  }
}

/* Mô hình điện thoại trên màn hẹp: vòng nhỏ lại để nhãn macro không xuống dòng. */
.ring svg {
  width: 100%;
  height: 100%;
}

.macro .row {
  gap: 6px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .kcal {
    gap: 12px;
  }
  .ring {
    width: 84px;
    height: 84px;
  }
  .ring b {
    font-size: 18px;
  }
  .macro .row {
    font-size: 9px;
  }
}

/* Điện thoại: mục gần nhau hơn, số lớn nhỏ lại cho khỏi gãy dòng. */
@media (max-width: 600px) {
  section {
    padding: 56px 0;
  }
  .sec-head {
    margin-bottom: 28px;
  }
  .nav-inner {
    padding: 0 8px 0 16px;
  }
  .menu {
    left: 16px;
    right: 16px;
  }
  .nav .btn {
    height: 40px;
    padding: 0 14px;
  }
  .chart {
    padding: 20px;
  }
  .chart .big {
    font-size: 21px;
  }
  .bars {
    gap: 6px;
    height: 150px;
  }
  .final {
    padding: 52px 20px;
  }
  footer.wrap {
    margin-top: 24px;
  }
}

/* ── Demo bấm được ──────────────────────────────────────────────────── */
.try {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 8px 14px;
  border-radius: var(--r-chip);
  border: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--sub);
}

.try i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--data);
  color: var(--data);
  animation: pulse 1.8s ease-in-out infinite;
}

/* Quầng lấy màu từ `color` (= màu số liệu) để keyframes khỏi phải dùng var(). */
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 0 5px currentColor;
  }
}

/* Quét món */
.scanning .photo .line {
  display: block;
}

.photo > svg {
  transition: opacity 0.3s, transform 0.5s var(--ease-enter);
}

.scanning .photo > svg {
  opacity: 0.55;
  transform: scale(0.97);
}

button.item {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  transition: opacity 0.25s, background 0.2s;
}

button.item:hover {
  background: var(--track);
}

button.item + button.item {
  border-top: 1px solid var(--track);
}

.item .name {
  display: block;
}

.item .check {
  transition: transform 0.35s var(--ease-pop), background 0.2s;
}

.item.off {
  opacity: 0.45;
}

.item.off .check {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--faint);
  transform: scale(0.88);
}

.item.off .check svg {
  opacity: 0;
}

.item.off .k {
  text-decoration: line-through;
}

.items.loading .item {
  opacity: 0.25;
  pointer-events: none;
}

.items .item {
  animation: rise 0.45s var(--ease-enter) both;
}

.items .item:nth-child(2) {
  animation-delay: 60ms;
}
.items .item:nth-child(3) {
  animation-delay: 120ms;
}
.items .item:nth-child(4) {
  animation-delay: 180ms;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.scan-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.scan-actions .btn.primary {
  flex: 1;
  min-width: 0;
  justify-content: center;
  /* Chữ dài ("Thêm 578 kcal vào nhật ký") được xuống dòng trên điện thoại
     thay vì đẩy cả thẻ rộng ra ngoài màn. */
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  height: auto;
  min-height: 52px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.scan-actions .btn.ghost {
  flex: none;
}

@media (max-width: 600px) {
  .scan-actions .long {
    display: none;
  }
  .scan-actions .btn {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Cột trong lưới không phình theo nội dung (mặc định của lưới là phình). */
.split > *,
.hero > *,
.grid > *,
.pros > * {
  min-width: 0;
}

.btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.btn.primary.done {
  opacity: 1;
  background: var(--data);
  color: #0b0d12;
}

/* Món mới trong điện thoại */
.meal.new {
  animation: rise 0.5s var(--ease-enter) both;
}

.meal.new .k {
  color: var(--data-faint);
}

/* David */
.msgs {
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.msgs > * {
  animation: rise 0.4s var(--ease-enter) both;
}

.typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
}

.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sub);
  animation: blink 1s ease-in-out infinite;
}

.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes blink {
  50% {
    opacity: 0.25;
    transform: translateY(-2px);
  }
}

.orb.thinking {
  animation-duration: 1.2s;
}

.suggest {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-top: 16px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.suggest::-webkit-scrollbar {
  display: none;
}

button.chip {
  appearance: none;
  flex: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, transform 0.35s var(--ease-pop);
}

button.chip:hover {
  background: var(--track);
}

button.chip:active,
.send:active,
.tabbar button:active,
.seg button:active {
  transform: scale(0.92);
}

.composer {
  margin-top: 10px;
  color: var(--ink);
}

.composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  /* 16px để Safari trên iPhone không tự phóng to khi bấm vào ô. */
  font-size: 16px;
  color: var(--ink);
}

.composer input::placeholder {
  color: var(--faint);
}

.composer:focus-within {
  border-color: var(--hairline);
}

.composer .send {
  border: 0;
  cursor: pointer;
  transition: transform 0.35s var(--ease-pop);
}

/* ── Cành lá và chim ở lớp nền (theo Foliage / Birds của app) ──────── */
.branch {
  position: absolute;
  pointer-events: none;
  /* Mở trang: cành trượt từ ngoài mép vào và rõ dần. Dùng thuộc tính
     `translate` riêng để không đè lên transform lật gương của cành phải. */
  animation: branch-slide-l 1.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s both;
  width: 190px;
  height: 250px;
}

.branch.left {
  left: -14px;
  top: 10vh;
}

.branch.right {
  right: -14px;
  top: 76vh;
  animation-name: branch-slide-r;
  animation-delay: 0.45s;
  /* Cành phải là bản lật gương của cành trái. */
  transform: scaleX(-1);
}

.branch svg {
  display: block;
}

.sway,
.kick {
  position: absolute;
  inset: 0;
  transform-origin: 0 225px;
}

.sway {
  animation:
    sway 5.2s ease-in-out infinite alternate,
    branch-unfurl 2s cubic-bezier(0.3, 1.25, 0.45, 1) 0.15s both;
}

.branch.right .sway {
  animation:
    sway 6.1s ease-in-out infinite alternate,
    branch-unfurl 2s cubic-bezier(0.3, 1.25, 0.45, 1) 0.45s both;
}

@keyframes branch-slide-l {
  from {
    opacity: 0;
    translate: -160px 0;
  }
}

@keyframes branch-slide-r {
  from {
    opacity: 0;
    translate: 160px 0;
  }
}

/* Cùng lúc trượt vào, cành còn ngả ra ngoài rồi uốn vào chỗ, hơi nảy như
   cành được thả ra. Thuộc tính `rotate` riêng, chồng lên nhịp gió (transform). */
@keyframes branch-unfurl {
  from {
    rotate: -20deg;
  }
}

@keyframes sway {
  from {
    transform: rotate(-2.5deg);
  }
  to {
    transform: rotate(2.5deg);
  }
}

.leaf {
  position: absolute;
  transform-origin: 50% 100%;
}

/* Rung quanh góc của lá (góc đặt sẵn ở .leaf). Không dùng var() trong
   @keyframes: Safari trên iPhone không đọc được, lá sẽ dựng đứng hết. */
.flutter {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: flutter-5 2s ease-in-out infinite alternate both;
}

.flutter.a1 {
  animation-name: flutter-7;
}
.flutter.a2 {
  animation-name: flutter-9;
}

@keyframes flutter-5 { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes flutter-7 { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes flutter-9 { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

.flock {
  position: absolute;
  left: 0;
  width: 120px;
  height: 70px;
}

.bird {
  position: absolute;
  animation: bird-bob 280ms ease-in-out infinite alternate;
}

/* Thân nhấp nhô ngược nhịp cánh (≈ 0,04 lần cỡ chim, tức 6,7% chiều cao). */
@keyframes bird-bob {
  from {
    transform: translateY(6.7%);
  }
  to {
    transform: translateY(-6.7%);
  }
}

.wing {
  position: absolute;
  transform-origin: 50% 100%;
  animation: flap 280ms ease-in-out infinite alternate;
}

/* Nhìn ngang: cánh giương hết lên rồi lật qua thân đập xuống. */
@keyframes flap {
  from {
    transform: rotate(-14deg) scaleY(1);
  }
  to {
    transform: rotate(-14deg) scaleY(-0.7);
  }
}

.bird svg,
.wing svg {
  display: block;
}

/* ── Kính "gương" cho Safari / Firefox (xem mirrorGlass trong main.js) ── */
.glass.mirrored {
  /* Nền đặc như trang để không lộ trang thật (không méo) phía sau bản sao. */
  background: var(--bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.mirror {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.mirror-lens {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: blur(2px) saturate(1.9) brightness(1.05);
}

/* Menu nằm ngang trên máy tính không phải kính: bỏ gương. */
.menu:not(.glass) > .mirror {
  display: none;
}

/* Menu thả xuống đè lên chữ: nhoè hơn để các mục menu dễ đọc. */
.menu-tint .mirror-lens {
  filter: blur(6px) saturate(1.9) brightness(1.05);
}

/* Lớp màu và vệt sáng của kính, nằm trên bản sao. */
.mirror::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at var(--mx, 18%) var(--my, 0%), var(--lg-sheen), transparent 55%),
    linear-gradient(150deg, var(--lg-from), var(--lg-to));
}

.mirror.menu-tint::after {
  background:
    radial-gradient(120% 90% at 18% 0%, var(--lg-sheen), transparent 55%),
    linear-gradient(150deg, var(--lg-menu-from), var(--lg-menu-to));
}

.mirror-lens > .ambient {
  position: absolute;
  inset: auto;
  left: 0;
  top: 0;
  z-index: 0;
}

.mirror-page {
  position: absolute;
  left: 0;
  top: 0;
}

/* Kính nằm trong bản sao không cần tự nhoè nữa (nặng máy). */
.mirror .glass {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Dòng đổi sáng / tối trong menu thả xuống: chỉ hiện khi màn rất hẹp, lúc
   icon trên thanh bị ẩn cho đủ chỗ. */
.menu-theme {
  display: none;
}

@media (max-width: 400px) {
  #theme {
    display: none;
  }

  .menu-theme {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--track);
    border-radius: 0 0 16px 16px;
    background: none;
    font: 500 15px/1 var(--sans);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }

  .menu-theme svg {
    width: 20px;
    height: 20px;
  }

  .menu.open .menu-theme {
    opacity: 1;
  }
}

/* Bong bóng nổi đè lên viền đen của mô hình điện thoại: kính đậm hơn để viền
   phía sau không nhoè thành vệt xám. */
.float.glass {
  background:
    radial-gradient(120% 90% at var(--mx, 18%) var(--my, 0%), var(--lg-sheen), transparent 55%),
    linear-gradient(150deg, var(--lg-menu-from), var(--lg-menu-to));
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  backdrop-filter: blur(18px) saturate(190%);
}