/* GỌI VỀ NHÀ — xanh lá chuối đậm, ánh đèn vàng ấm trên nền men ngọc nhạt */
:root {
  color-scheme: light;
  /* Homie: đỏ gạch ấm, nâu đỏ đậm, nền hồng phấn nhạt */
  --bg: #fef8f7;
  --card: #ffffff;
  --leaf: #9e2a2b; /* màu chính (logo) */
  --leaf-deep: #540b0e; /* chữ thương hiệu, tiêu đề */
  --leaf-night: #2b0709;
  --leaf-soft: #f8e7e5;
  --lamp: #e9a93b;
  --lamp-soft: #fff3dc;
  --ink: #2e1d1c;
  --ink-2: #6b5651;
  --ink-3: #9d8f8c;
  --line: #f0e2df;
  --ok: #2e8b57;
  --ok-soft: #e3f3ea;
  --warn: #a96f04;
  --warn-soft: #fcefd2;
  --alert: #d93025;
  --alert-soft: #fde4e1;
  --r-lg: 22px;
  --r-md: 14px;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Lora', Georgia, 'Times New Roman', serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 17px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--leaf); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--leaf) 40%, transparent); outline-offset: 2px; }

.view { max-width: 520px; margin: 0 auto; min-height: 100vh; padding: calc(var(--safe-t) + 20px) 18px calc(var(--safe-b) + 108px); }
.view.no-tabs { padding-bottom: calc(var(--safe-b) + 32px); }

/* ---------- Thanh dưới ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 6px 12px calc(var(--safe-b) + 6px);
}
.tabbar a {
  flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 0; border-radius: 14px; text-decoration: none; color: var(--ink-3); font-size: 13px; font-weight: 700;
}
.tabbar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.active { color: var(--leaf); }
.tabbar a.active svg { stroke-width: 2.2; }

/* ---------- Đầu trang ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.page-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
.page-sub { color: var(--ink-2); margin-top: 2px; font-size: 16px; }
.back {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 8px 4px 8px 0;
  color: var(--leaf); font-weight: 700; font-size: 16px; cursor: pointer; margin-bottom: 6px;
}
.back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brand-row { display: flex; align-items: center; gap: 10px; color: var(--leaf-deep); font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.brand-row img { width: 28px; height: 28px; border-radius: 8px; }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font-weight: 800; font-size: 16px; cursor: pointer; text-decoration: none;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.primary { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.btn.primary:active { background: var(--leaf-deep); }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--leaf); }
.btn.danger { color: var(--alert); border-color: var(--alert-soft); }
.btn:disabled { opacity: 0.55; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2);
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Đăng nhập ---------- */
.auth-hero { text-align: center; padding: 28px 0 22px; }
.auth-hero img { width: 88px; height: 88px; border-radius: 24px; box-shadow: 0 10px 30px rgba(158, 42, 43, 0.25); }
.auth-hero h1 { font-size: 34px; font-weight: 800; margin-top: 16px; color: var(--leaf-deep); letter-spacing: -0.02em; }
.auth-hero p { color: var(--ink-2); margin: 8px auto 0; max-width: 30ch; font-size: 17px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--leaf-soft); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 11px 0; font-weight: 800; color: var(--leaf-deep); cursor: pointer; }
.seg button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.how { margin-top: 26px; display: grid; gap: 12px; }
.how li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; color: var(--ink-2); font-size: 16px; }
.card-text.how ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.how .n { width: 30px; height: 30px; border-radius: 50%; background: var(--leaf-soft); color: var(--leaf-deep); font-weight: 800; display: grid; place-items: center; font-size: 15px; }

/* ---------- Form ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 800; font-size: 15px; color: var(--ink); }
.field small, .hint { color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 52px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card);
  padding: 12px 14px; font-size: 17px;
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 4px var(--leaf-soft); }
.phone-row { display: grid; grid-template-columns: 128px 1fr; gap: 8px; }
.errors { background: var(--alert-soft); color: #8a1f15; border-radius: var(--r-md); padding: 12px 14px; font-size: 15px; }
.errors ul { margin: 4px 0 0; padding-left: 18px; }

.group { background: var(--card); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 16px; }
.group > h2 { font-size: 19px; font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 9px 16px;
  font-weight: 700; font-size: 16px; cursor: pointer; color: var(--ink);
}
.chip-btn.on { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.days button {
  aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card);
  font-weight: 800; font-size: 14px; cursor: pointer; color: var(--ink-2);
}
.days button.on { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.time-input { font-size: 26px !important; font-weight: 800; text-align: center; letter-spacing: 0.02em; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background 0.15s; pointer-events: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform 0.15s; }
.switch input:checked + span { background: var(--leaf); }
.switch input:checked + span::after { transform: translateX(20px); }
.say {
  background: var(--lamp-soft); border-radius: var(--r-md); padding: 14px 16px; color: #5c4307; font-size: 16px; line-height: 1.5;
}
.say b { display: block; font-size: 13px; color: var(--warn); margin-bottom: 2px; }
details.more { background: var(--card); border-radius: var(--r-lg); padding: 4px 18px; }
details.more summary { cursor: pointer; padding: 14px 0; font-weight: 800; list-style: none; display: flex; justify-content: space-between; }
details.more summary::after { content: '+'; color: var(--leaf); font-size: 22px; line-height: 1; }
details.more[open] summary::after { content: '−'; }
details.more .form { padding-bottom: 18px; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 18px 0 calc(var(--safe-b) + 8px); display: grid; gap: 8px; }

/* ---------- Thẻ người thân ---------- */
.family { display: grid; gap: 16px; }
.person { background: var(--card); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 14px; box-shadow: 0 1px 2px rgba(84, 11, 14, 0.05); }
.person-top { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--leaf-soft); color: var(--leaf-deep); font-weight: 800; font-size: 22px;
}
.person-name { font-size: 21px; font-weight: 800; line-height: 1.2; }
.person-meta { color: var(--ink-3); font-size: 14px; }
.person-top .grow { flex: 1; min-width: 0; }
.today { border-radius: var(--r-md); padding: 14px 16px; background: var(--bg); font-size: 16px; line-height: 1.5; color: var(--ink); }
.today small { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.today.l-binh_thuong { background: var(--ok-soft); }
.today.l-can_chu_y { background: var(--warn-soft); }
.today.l-khan_cap { background: var(--alert-soft); }
.today.live { background: var(--leaf-soft); color: var(--leaf-deep); font-weight: 700; }
.sched { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 15px; }
.sched svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.sched b { color: var(--ink); }
.person-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.person-actions .btn { padding: 0 12px; }
.week { display: flex; gap: 5px; align-items: center; }
.week span.lbl { font-size: 12px; color: var(--ink-3); margin-right: 4px; }
.week i { width: 18px; height: 18px; border-radius: 5px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.week i.l-binh_thuong { background: var(--ok); box-shadow: none; }
.week i.l-can_chu_y { background: var(--lamp); box-shadow: none; }
.week i.l-khan_cap { background: var(--alert); box-shadow: none; }

.level { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.level::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.level.l-binh_thuong { background: var(--ok-soft); color: var(--ok); }
.level.l-can_chu_y { background: var(--warn-soft); color: var(--warn); }
.level.l-khan_cap { background: var(--alert-soft); color: var(--alert); }
.level.l-none { background: var(--bg); color: var(--ink-3); }

.empty { text-align: center; padding: 34px 20px; background: var(--card); border-radius: var(--r-lg); }
.empty img { width: 72px; height: 72px; border-radius: 20px; opacity: 0.95; }
.empty h2 { font-size: 21px; font-weight: 800; margin-top: 14px; }
.empty p { color: var(--ink-2); margin: 8px auto 18px; max-width: 32ch; }
.add-more { margin-top: 4px; }
.notice { background: var(--lamp-soft); color: #5c4307; border-radius: var(--r-md); padding: 12px 14px; font-size: 15px; margin-bottom: 14px; }

/* ---------- Báo cáo ---------- */
.list { background: var(--card); border-radius: var(--r-lg); overflow: hidden; }
.row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.row:last-child { border-bottom: 0; }
.row .avatar { width: 44px; height: 44px; font-size: 18px; }
.row .t1 { font-weight: 800; }
.row .t2 { color: var(--ink-3); font-size: 14px; }
.row .t3 { color: var(--ink-2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; grid-column: 2 / 4; }
.filter { margin-bottom: 14px; }

/* ---------- Chi tiết báo cáo ---------- */
.report { display: grid; gap: 14px; }
.verdict { border-radius: var(--r-lg); padding: 20px; background: var(--card); }
.verdict.l-binh_thuong { background: var(--ok-soft); }
.verdict.l-can_chu_y { background: var(--warn-soft); }
.verdict.l-khan_cap { background: var(--alert-soft); }
.verdict .level { background: rgba(255, 255, 255, 0.7); }
.verdict p.big { font-size: 19px; line-height: 1.55; font-weight: 700; margin-top: 12px; }
.verdict p.why { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.facts { background: var(--card); border-radius: var(--r-lg); padding: 4px 18px; }
.fact { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0; }
.fact .ic { font-size: 22px; line-height: 1.3; }
.fact h3 { font-size: 16px; font-weight: 800; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fact h3 em { font-style: normal; font-size: 13px; font-weight: 800; }
.fact h3 em.r-tot { color: var(--ok); }
.fact h3 em.r-binh_thuong { color: var(--warn); }
.fact h3 em.r-kem { color: var(--alert); }
.fact h3 em.r-khong_ro { color: var(--ink-3); }
.fact p { color: var(--ink-2); font-size: 16px; margin-top: 2px; }
.box { border-radius: var(--r-lg); padding: 16px 18px; }
.box h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.box ul { margin: 0; padding-left: 20px; }
.box.warn { background: var(--warn-soft); color: #5c4307; }
.box.msg { background: var(--leaf-soft); color: var(--leaf-deep); font-size: 17px; }
.box.alert { background: var(--alert-soft); color: #7d1a14; }
.meta-line { color: var(--ink-3); font-size: 14px; }
details.convo { background: var(--card); border-radius: var(--r-lg); padding: 4px 18px; }
details.convo summary { cursor: pointer; padding: 14px 0; font-weight: 800; }
.bubbles { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 16px; line-height: 1.45; }
.bubble.ai { align-self: flex-start; background: var(--leaf-soft); color: var(--leaf-deep); border-bottom-left-radius: 6px; }
.bubble.user { align-self: flex-end; background: var(--lamp-soft); color: #4d3806; border-bottom-right-radius: 6px; }

/* Cuộc gọi đang diễn ra */
.live { background: var(--leaf); color: #fff; border-radius: var(--r-lg); padding: 28px 20px; text-align: center; }
.live .pulse {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.14); animation: pulse 1.6s ease-out infinite;
}
.live .pulse svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.live h2 { font-size: 22px; font-weight: 800; }
.live p { opacity: 0.85; margin-top: 4px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(243, 179, 61, 0.55); } 100% { box-shadow: 0 0 0 26px rgba(243, 179, 61, 0); } }
.failed { background: var(--card); border-radius: var(--r-lg); padding: 24px 20px; text-align: center; display: grid; gap: 12px; }
.failed h2 { font-size: 20px; font-weight: 800; }
.failed p { color: var(--ink-2); }

/* ---------- Nghe thử: màn hình cuộc gọi ---------- */
.callscreen {
  position: fixed; inset: 0; z-index: 40; background: radial-gradient(120% 70% at 50% 0%, #8e2a2c 0%, var(--leaf-night) 72%);
  color: #fff; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 24px) 18px calc(var(--safe-b) + 22px);
}
.callscreen .who { text-align: center; }
.callscreen .who .avatar { width: 92px; height: 92px; font-size: 38px; margin: 0 auto; background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: 0 0 0 6px rgba(243, 179, 61, 0.18); }
.callscreen .who h2 { font-size: 26px; font-weight: 800; margin-top: 12px; }
.callscreen .who p { opacity: 0.8; margin-top: 2px; font-size: 16px; }
.callscreen .who .timer { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 15px; }
.callscreen .stream { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 18px 2px; max-width: 520px; width: 100%; margin: 0 auto; }
.callscreen .bubble.ai { background: rgba(255, 255, 255, 0.95); color: var(--leaf-deep); }
.callscreen .bubble.user { background: var(--lamp); color: #3d2b03; }
.callscreen .controls { display: flex; justify-content: center; align-items: center; gap: 22px; max-width: 520px; width: 100%; margin: 0 auto; }
.round { width: 68px; height: 68px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, 0.16); color: #fff; }
.round svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.round.on { background: #fff; color: var(--leaf-deep); }
.round.listening { background: var(--lamp); color: #3d2b03; animation: pulse 1.4s ease-out infinite; }
.round.end { background: #e5483b; width: 76px; height: 76px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28); }
.round.end svg { transform: rotate(135deg); }
.round-label { display: grid; justify-items: center; gap: 6px; font-size: 13px; opacity: 0.9; }
.callscreen .type { display: flex; gap: 8px; max-width: 520px; width: 100%; margin: 0 auto 16px; }
.callscreen .type input { flex: 1; min-width: 0; min-height: 50px; border-radius: 999px; border: 0; padding: 0 18px; font-size: 17px; color: var(--ink); }
.callscreen .type button { min-height: 50px; border-radius: 999px; border: 0; padding: 0 18px; font-weight: 800; background: var(--lamp); color: #3d2b03; }
.callscreen .note { text-align: center; font-size: 14px; opacity: 0.75; margin-bottom: 14px; }

/* ---------- Tôi ---------- */
.me-card { background: var(--card); border-radius: var(--r-lg); padding: 20px; display: flex; gap: 14px; align-items: center; }
.me-card .avatar { width: 60px; height: 60px; font-size: 26px; }
.me-card h2 { font-size: 21px; font-weight: 800; }
.me-card p { color: var(--ink-3); font-size: 15px; }
.stack { display: grid; gap: 14px; }
.kv { background: var(--card); border-radius: var(--r-lg); padding: 6px 18px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.kv div:last-child { border-bottom: 0; }
.kv div span { color: var(--ink-2); }
.kv div b { font-weight: 800; }
.card-text { background: var(--card); border-radius: var(--r-lg); padding: 18px; color: var(--ink-2); font-size: 16px; }
.card-text h3 { color: var(--ink); font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.card-text ol, .card-text ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 90px); z-index: 60;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 15px; font-weight: 700;
  max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); text-align: center;
}
.toast.err { background: var(--alert); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--leaf-soft); border-top-color: var(--leaf); animation: spin 0.8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .live .pulse, .round.listening, .spinner { animation: none; } }
a.today { display: block; text-decoration: none; color: inherit; }
a.chip-btn { text-decoration: none; display: inline-block; }

/* Form v3: gợi ý, bắt buộc, danh sách ưu tiên */
.req { font-size: 12px; font-weight: 800; color: var(--alert); background: var(--alert-soft); border-radius: 999px; padding: 2px 8px; vertical-align: middle; margin-left: 6px; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.suggest .hint { margin-right: 2px; }
.chip-btn.sm { padding: 6px 12px; font-size: 14px; }
.xh-row { grid-template-columns: 1fr 1fr; }
.sm-btn { min-height: 40px; padding: 0 4px; justify-self: start; font-size: 15px; }
.topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.topics li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; background: var(--bg); border-radius: var(--r-md); padding: 8px 8px 8px 10px; }
.topics li.empty-topic { display: block; color: var(--ink-3); font-size: 15px; padding: 12px 14px; }
.topics .num { width: 28px; height: 28px; border-radius: 50%; background: var(--leaf); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.topics li:first-child .num { background: var(--lamp); color: #3d2b03; }
.topics .txt { font-weight: 700; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.topics .ord { display: flex; gap: 4px; }
.mini { width: 34px; height: 36px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--leaf-deep); font-size: 13px; cursor: pointer; }
.mini:disabled { opacity: 0.35; }
.mini.del { color: var(--alert); }
.add-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.add-row .btn { padding: 0 14px; }
.field textarea.greet-box { min-height: 140px; line-height: 1.5; }

/* ---------- Thương hiệu Homie ---------- */
.appbar {
  position: sticky; top: 0; z-index: 15; background: #fff; border-bottom: 1px solid #f3e9e7;
  padding: calc(var(--safe-t) + 12px) 18px 12px;
}
.lockup { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; text-decoration: none; }
.lockup svg { width: 44px; height: 44px; flex: none; }
.lockup b { display: block; font-family: var(--font-brand); font-weight: 700; font-size: 28px; line-height: 1; color: var(--leaf-deep); letter-spacing: -0.01em; }
.lockup span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; font-weight: 600; }
.has-appbar .view { padding-top: 18px; }
.page-head h1, .empty h2, .me-card h2 { font-family: var(--font-brand); color: var(--leaf-deep); font-weight: 700; }
.auth-hero .lockup { flex-direction: column; gap: 14px; }
.auth-hero .lockup svg { width: 92px; height: 92px; filter: drop-shadow(0 10px 24px rgba(158, 42, 43, 0.28)); }
.auth-hero .lockup b { font-size: 44px; }
.auth-hero .lockup span { font-size: 17px; margin-top: 6px; }
.auth-hero p.desc { color: var(--ink-2); margin: 14px auto 0; max-width: 30ch; font-size: 17px; }
.empty .mark { width: 72px; height: 72px; }
.seg { background: var(--leaf-soft); }
.seg button { color: var(--leaf-deep); }
.btn.primary { box-shadow: 0 6px 16px rgba(158, 42, 43, 0.22); }

/* ================= Cảnh báo ================= */
:root {
  --al-red: #c62828;      /* khẩn cấp */
  --al-orange: #e8590c;   /* cấp bách */
  --al-amber: #f59f00;    /* cảnh báo */
  --al-amber-ink: #2b1d00;
  --sev-nhe: #ffd8a8;
  --sev-vua: #ff922b;
  --sev-nang: #e03131;
}
.alert-banner {
  border-radius: var(--r-lg); padding: 18px 18px 14px; margin-bottom: 16px; color: #fff;
  background: var(--al-red); box-shadow: 0 10px 28px rgba(198, 40, 40, 0.28);
}
.alert-banner.a-cap_bach { background: var(--al-orange); box-shadow: 0 10px 28px rgba(232, 89, 12, 0.26); }
.alert-banner.a-canh_bao { background: var(--al-amber); color: var(--al-amber-ink); box-shadow: 0 10px 28px rgba(245, 159, 0, 0.28); }
.alert-banner.a-khan_cap { animation: alarm 1.8s ease-out infinite; }
.alert-banner.acked { animation: none; opacity: 0.88; box-shadow: none; }
@keyframes alarm { 0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(198, 40, 40, 0); } 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); } }
.ab-kicker { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }
.ab-kicker span:last-child { letter-spacing: 0; font-weight: 700; opacity: 0.9; }
.alert-banner h2 { font-size: 22px; font-weight: 800; line-height: 1.3; margin-top: 8px; font-family: var(--font); color: inherit; }
.alert-banner > p { font-size: 16px; line-height: 1.5; margin-top: 6px; }
.ab-list { margin: 8px 0 0; padding-left: 20px; font-size: 15px; font-weight: 700; }
.ab-trend { margin-top: 10px; background: rgba(255, 255, 255, 0.94); color: var(--ink); border-radius: var(--r-md); padding: 10px 12px; }
.ab-trend b { font-size: 16px; }
.ab-trend small { display: block; color: var(--ink-2); font-size: 14px; margin-top: 4px; line-height: 1.4; }
.ab-actions { display: grid; gap: 8px; margin-top: 14px; }
.btn.ab-call { background: #fff; border-color: #fff; color: var(--al-red); font-size: 18px; min-height: 54px; }
.a-cap_bach .btn.ab-call { color: #b23c00; }
.a-canh_bao .btn.ab-call { background: var(--al-amber-ink); border-color: var(--al-amber-ink); color: #fff; }
.btn.ab-ack { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: inherit; padding: 0 14px; font-size: 15px; min-height: 44px; }
.a-canh_bao .btn.ab-ack { border-color: rgba(43, 29, 0, 0.35); }
.ab-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 14px; font-weight: 700; }
.ab-links a { color: inherit; }
.ab-links span { opacity: 0.85; }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.steps .arr { color: var(--ink-3); font-weight: 800; }
.sev-chip { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.sev-chip.s-nhe { background: #fff0d6; color: #8a5a00; }
.sev-chip.s-vua { background: #ffe0c2; color: #a3470c; }
.sev-chip.s-nang { background: #ffd6d6; color: #b3261e; }
.sev-chip.s-het { background: var(--ok-soft); color: var(--ok); }

/* Thẻ người thân đang có cảnh báo */
.person.alerted { box-shadow: inset 0 0 0 2px var(--al-red); }
.person.alerted.a-cap_bach { box-shadow: inset 0 0 0 2px var(--al-orange); }
.person.alerted.a-canh_bao { box-shadow: inset 0 0 0 2px var(--al-amber); }
.level.l-alert { color: #fff; background: var(--al-red); }
.level.l-alert.a-cap_bach { background: var(--al-orange); }
.level.l-alert.a-canh_bao { background: var(--al-amber); color: var(--al-amber-ink); }
.level.l-alert::before { background: currentColor; }
.level.l-miss { background: var(--alert-soft); color: var(--alert); }
.retry-row { display: flex; align-items: center; gap: 8px; background: var(--warn-soft); color: #5c4307; border-radius: var(--r-md); padding: 10px 12px; font-size: 15px; }
.retry-row svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.retry-row span { flex: 1; }
.link-btn { border: 0; background: none; color: var(--leaf); font-weight: 800; cursor: pointer; padding: 4px; }
a.week { text-decoration: none; color: inherit; }
.week .more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--leaf); font-weight: 800; font-size: 14px; }
.week .more svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Báo cáo: vấn đề sức khỏe */
.box.probs { background: var(--card); }
.prob { padding: 10px 0; border-top: 1px solid var(--line); }
.prob:first-of-type { border-top: 0; padding-top: 2px; }
.prob-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.prob-h b { font-size: 17px; }
.prob p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.trend { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.trend.t-nang_hon { color: var(--alert); }
.trend.t-do_hon, .trend.t-da_het { color: var(--ok); }
.more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 800; text-decoration: none; }
.more-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ================= Lịch sử 7 ngày ================= */
.hist-sec { margin-top: 18px; }
.hist-sec > h2 { font-size: 18px; font-weight: 800; margin: 0 0 10px 2px; }
.mini-seg { margin: 0 0 14px; }
.mini-seg button { padding: 8px 0; font-size: 15px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tiles > div { background: var(--card); border-radius: var(--r-md); padding: 12px 10px; text-align: center; }
.tiles b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.tiles b small { font-size: 15px; color: var(--ink-3); }
.tiles span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.3; margin-top: 4px; }
.tiles .t-miss b { color: var(--alert); }
.tiles .t-alert b { color: var(--al-orange); }
.trend-card { background: var(--card); border-radius: var(--r-lg); padding: 16px; border-left: 6px solid var(--al-amber); margin-bottom: 10px; }
.trend-card.a-cap_bach { border-left-color: var(--al-orange); background: #fff6f0; }
.trend-card.a-khan_cap { border-left-color: var(--al-red); background: #fff3f2; }
.tc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tc-head b { font-size: 19px; }
.tc-head .tag { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; border-radius: 999px; padding: 3px 9px; background: var(--al-amber); color: var(--al-amber-ink); }
.a-cap_bach .tc-head .tag { background: var(--al-orange); color: #fff; }
.a-khan_cap .tc-head .tag { background: var(--al-red); color: #fff; }
.tc-head .st { font-size: 14px; font-weight: 800; color: var(--ink-2); margin-left: auto; }
.trend-card p { color: var(--ink-2); font-size: 15px; margin-top: 8px; line-height: 1.45; }
.trend-card p.advice { color: var(--ink); font-weight: 700; }
.btn.sm { min-height: 42px; font-size: 15px; padding: 0 16px; margin-top: 10px; }
.trend-card .btn.ab-call { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.all-good { display: flex; gap: 10px; align-items: center; margin-top: 14px; background: var(--ok-soft); color: #1d5e3a; border-radius: var(--r-md); padding: 12px 14px; font-weight: 700; font-size: 15px; }
.all-good svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cmp { background: var(--card); border-radius: var(--r-lg); padding: 8px 8px 6px; overflow-x: auto; }
.cmp-table { width: 100%; min-width: 300px; border-collapse: collapse; table-layout: fixed; }
.cmp-table th, .cmp-table td { padding: 7px 0; text-align: center; border-bottom: 1px solid var(--line); }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table th.lab { width: 31%; text-align: left; padding-left: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.cmp-table thead th { font-size: 12px; font-weight: 800; color: var(--ink-3); line-height: 1.1; }
.cmp-table thead th small { display: block; font-size: 15px; color: var(--ink); margin-top: 2px; }
.cmp-table thead th a { color: inherit; text-decoration: none; display: block; }
.cmp-table .today { background: var(--leaf-soft); }
.cmp-table thead th.today { border-radius: 10px 10px 0 0; color: var(--leaf); }
.cmp-table thead th.today small { color: var(--leaf-deep); }
.cmp-table tr.sec th { text-align: left; padding: 12px 8px 6px; font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: 0.02em; }
.cmp-table tr.prob-row th.lab { color: var(--ink); font-weight: 800; }
.cmp-table th.lab small { display: block; font-size: 12px; font-weight: 800; color: var(--ink-3); }
.cmp-table th.lab small.st-cap_bach { color: var(--al-orange); }
.cmp-table th.lab small.st-khan_cap { color: var(--al-red); }
.cmp-table th.lab small.st-canh_bao { color: #a96f04; }
.cmp-table th.lab small.st-none { color: var(--ok); }
.c { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 800; }
.c-ok { background: var(--ok-soft); color: var(--ok); }
.c-miss { background: var(--alert); color: #fff; }
.c-other { background: var(--warn-soft); color: var(--warn); }
.c-none { color: var(--ink-3); width: auto; }
.c-al { width: auto; font-size: 15px; }
.dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; }
.dot.l-binh_thuong, .dot.r-tot { background: var(--ok); }
.dot.l-can_chu_y, .dot.r-binh_thuong { background: var(--lamp); }
.dot.l-khan_cap, .dot.r-kem { background: var(--alert); }
.sev { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-style: normal; font-size: 15px; font-weight: 900; text-decoration: none; color: #4a2a00; vertical-align: middle; }
.sev.s-nhe { background: var(--sev-nhe); }
.sev.s-vua { background: var(--sev-vua); color: #fff; }
.sev.s-nang { background: var(--sev-nang); color: #fff; }
.sev.s-het { background: var(--ok-soft); color: var(--ok); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 4px 0; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend .dot { width: 12px; height: 12px; }
.legend .sev { width: 18px; height: 18px; font-size: 11px; border-radius: 5px; }

.daylist .day-row { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.daylist .day-row:last-child { border-bottom: 0; }
.day-row .dh { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.day-row.empty-day .t3 { color: var(--ink-3); font-size: 15px; }
.call-line { display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; align-items: start; padding: 8px 0; text-decoration: none; color: inherit; }
.call-line + .call-line { border-top: 1px dashed var(--line); }
.call-line .tm { font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 15px; }
.call-line .tx { font-size: 15px; color: var(--ink); line-height: 1.4; }
.call-line .tx em { color: var(--ink-3); font-style: normal; font-size: 13px; }
.pchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.keep { margin: 16px 4px 0; }
@media (prefers-reduced-motion: reduce) { .alert-banner.a-khan_cap { animation: none; } }

/* ================= Thông báo đẩy ================= */
.push-card { background: var(--card); border-radius: var(--r-lg); padding: 18px; margin-bottom: 16px; box-shadow: inset 0 0 0 2px var(--leaf-soft), 0 6px 18px rgba(158, 42, 43, 0.08); }
.pc-h { display: flex; align-items: center; gap: 10px; }
.pc-h svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%; background: var(--leaf); stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; box-sizing: content-box; }
.pc-h h2 { font-size: 18px; font-weight: 800; line-height: 1.3; }
.push-card p { color: var(--ink-2); font-size: 15px; margin-top: 10px; line-height: 1.5; }
.pc-a { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.pc-a .btn { flex: 1 1 auto; }
.steps-ol { margin: 10px 0 6px; padding-left: 22px; display: grid; gap: 6px; color: var(--ink); font-size: 15px; }
.steps-ol svg { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: var(--leaf); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.push-card small, .push-settings small { color: var(--ink-3); font-size: 13px; }
.push-settings p { margin-top: 4px; }
.ok-line { display: flex; gap: 8px; align-items: flex-start; color: #1d5e3a; }
.ok-line svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }