/* =========================================================================
   AI4Sales Mobile — Trợ lý Sale Thuốc Thú y (Anova)
   Bộ nhận diện Anova (Slate/Muted): xanh #36677D · xanh lá #4C825C · font Be Vietnam Pro
   ========================================================================= */

:root {
  /* Brand */
  --primary: #36677D;
  --primary-dark: #244B5C;
  --primary-deep: #13212C;
  --primary-soft: #E7F2F5;
  --primary-tint: #D6E8EE;
  --primary-line: #94BFCE;
  --green: #4C825C;
  --green-soft: #EDF5F0;
  --purple: #5E537A;
  --purple-soft: #F5F3F9;

  /* Neutrals */
  --bg: #EEF2F5;
  --card: #FFFFFF;
  --text: #16242E;
  --heading: #16242E;
  --muted: #5E6E78;
  --muted-2: #90A0A9;
  --line: #E1E8ED;
  --line-soft: #EDF1F4;

  /* Status */
  --danger: #9E5564;
  --danger-soft: #F8EEF0;
  --warn: #C77700;
  --warn-soft: #FFF6E6;
  --ok: #4C825C;
  --ok-soft: #EDF5F0;

  /* Risk scale */
  --risk-high: #9E5564;
  --risk-high-soft: #F8EEF0;
  --risk-med: #C77700;
  --risk-med-soft: #FFF1D6;
  --risk-low: #4C825C;
  --risk-low-soft: #EDF5F0;

  --radius: 20px;
  --radius-sm: 14px;
  --shadow-card: 0 4px 14px rgba(16, 36, 46, 0.05);
  --shadow-float: 0 18px 42px rgba(16, 36, 46, 0.16);
  --font: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 10% 6%, rgba(54, 103, 125, 0.10), transparent 36%),
    radial-gradient(circle at 92% 14%, rgba(76, 130, 92, 0.10), transparent 32%),
    linear-gradient(160deg, #f6fafc 0%, #e8eff3 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------------- Shell */
.stage {
  min-height: 100vh; min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

/* Khung app không còn viền điện thoại — trên máy tính căn giữa thành cột mobile, trên điện thoại full màn hình */
.device {
  width: 100%;
  max-width: 442px;
  height: 100vh; height: 100dvh;
  background: var(--bg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ----------------------------------------------------------------- Screens */
.screen {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 96px;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: block; animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- Top bars */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.appbar .brand { display: flex; align-items: center; gap: 10px; }
.appbar .brand img { height: 42px; width: auto; display: block; }
.hello h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.hello p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }

.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--primary-dark);
  flex: 0 0 auto;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.icon-btn .badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid var(--card);
}

.screen-header {
  display: flex; gap: 11px; align-items: center;
  margin-bottom: 16px;
}
.back {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 13px; border: 1px solid var(--line);
  background: var(--card); cursor: pointer;
  font-size: 20px; color: var(--primary-dark);
  display: grid; place-items: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.screen-header h2 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.screen-header p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.35; }

/* ----------------------------------------------------------------- Search */
.search {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--muted);
  display: flex; gap: 9px; align-items: center;
  font-size: 13px;
  margin-bottom: 16px;
  cursor: text;
}

/* ----------------------------------------------------------------- Cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.card-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.card-title h3 { margin: 0; font-size: 15.5px; letter-spacing: -0.01em; }
.subtext { color: var(--muted); font-size: 11.5px; line-height: 1.5; margin: -4px 0 12px; }

/* Custom highlighting for AI Assistants card (Core Feature Q&A) */
.card-ai-assistants {
  background: linear-gradient(140deg, #36677D 0%, #244B5C 60%, #13212C 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 24px rgba(54, 103, 125, 0.25);
  position: relative;
  overflow: hidden;
}
.card-ai-assistants::after {
  content: ""; position: absolute; right: -60px; top: -70px;
  width: 170px; height: 170px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.card-ai-assistants .card-title h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}
.subtext-ai {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: -6px 0 16px 0;
  line-height: 1.45;
  position: relative;
  z-index: 1;
}
.card-ai-assistants .feature {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card-ai-assistants .feature h4 {
  color: #ffffff;
  font-weight: 600;
  font-size: 14.5px;
}
.card-ai-assistants .feature p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}
.card-ai-assistants .feature-icon {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.card-ai-assistants .feature-icon.green {
  background: rgba(76, 130, 92, 0.35);
  color: #8ae09f;
}
.card-ai-assistants .feature-icon.amber {
  background: rgba(199, 119, 0, 0.32);
  color: #f4c579;
}
.card-ai-assistants .feature:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.card-ai-assistants .feature:active {
  transform: translateY(0);
}

/* Chat box hiển thị thẳng trên màn hình chính (như bản web) — easy onboarding */
.home-ask {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border-radius: 15px;
  padding: 6px 6px 6px 13px;
  margin: 2px 0 11px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
  position: relative; z-index: 1;
  transition: box-shadow .15s ease;
}
.home-ask:focus-within { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26); }
.home-ask-ico { color: var(--primary); display: inline-flex; flex: 0 0 auto; font-size: 18px; }
.home-ask input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--text); padding: 11px 0;
}
.home-ask input::placeholder { color: var(--muted-2); }
.home-ask-send {
  width: 40px; height: 40px; min-width: 40px; border: 0; border-radius: 12px;
  background: var(--primary); color: #fff; cursor: pointer; padding: 0;
  display: grid; place-items: center; flex: 0 0 auto;
  transition: background .15s ease, transform .12s ease;
}
.home-ask-send:hover { background: var(--primary-dark); }
.home-ask-send:active { transform: scale(.95); }
.home-ask-send .ico { font-size: 18px; }

/* Nút mic ghost trong chat box màn hình chính — hỏi bằng giọng nói */
.home-ask-mic {
  width: 40px; height: 40px; min-width: 40px; border: 0; border-radius: 12px;
  background: transparent; color: var(--muted); cursor: pointer; padding: 0;
  display: grid; place-items: center; flex: 0 0 auto;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.home-ask-mic:hover { background: var(--line-soft); color: var(--primary); }
.home-ask-mic:active { transform: scale(.95); }
.home-ask-mic .ico { font-size: 18px; }
.home-ask-mic.listening {
  background: var(--danger-soft); color: var(--danger);
  animation: pulse-listening 1.5s infinite;
}

/* Gợi ý câu hỏi mẫu ngay dưới chat box — người dùng tự biết hỏi gì mà không cần hướng dẫn */
/* Chip gợi ý: lưới đều, trải đúng bằng chiều rộng ô input (2 cột mobile, 4 cột tablet/desktop) */
.home-ask-hints {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  position: relative; z-index: 1; margin-bottom: 14px;
}
.home-ask-hints .quick { text-align: center; display: flex; align-items: center; justify-content: center; }
@media (min-width: 760px) and (min-height: 600px) {
  .home-ask-hints { grid-template-columns: repeat(4, 1fr); }
}
.home-ask-hints .quick {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.home-ask-hints .quick:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.34);
}

.feature-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 12px; position: relative; z-index: 1;
}
.feature-divider::before, .feature-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.18);
}
.feature-divider span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: rgba(255, 255, 255, 0.62); white-space: nowrap;
}

/* Light, soft danger-styled warning card for diseases below */
.hero-warning {
  background: var(--danger-soft);
  color: var(--text);
  border: 1px solid rgba(158, 85, 100, 0.25);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.hero-warning::after {
  content: ""; position: absolute; right: -60px; top: -70px;
  width: 170px; height: 170px; border-radius: 50%;
  background: rgba(158, 85, 100, 0.04);
}
.hero-warning:hover {
  border-color: rgba(158, 85, 100, 0.4);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.hero-warning:active {
  transform: translateY(0);
}
.hero-warning .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--danger);
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
}
.hero-warning h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.hero-warning p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.hero-warning .hero-foot {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.hero-warning .hero-pill {
  background: rgba(158, 85, 100, 0.08);
  color: var(--danger);
  border: 1px solid rgba(158, 85, 100, 0.15);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* ----------------------------------------------------------------- Feature buttons */
.feature-grid { display: grid; gap: 11px; grid-auto-rows: 1fr; }
.feature {
  border: 1px solid var(--line); border-radius: 18px; background: #fff;
  padding: 14px; display: flex; gap: 13px; align-items: flex-start;
  cursor: pointer; text-align: left; width: 100%; font-family: inherit;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.feature > div { min-width: 0; }
.feature:hover { border-color: var(--primary-line); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.feature:active { transform: translateY(0); }
.feature-icon {
  width: 44px; height: 44px; min-width: 44px; border-radius: 14px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--primary-soft); color: var(--primary-dark);
  flex-shrink: 0;
}
.feature-icon.green { background: var(--green-soft); color: var(--green); }
.feature-icon.purple { background: var(--purple-soft); color: var(--purple); }
.feature-icon.amber { background: var(--warn-soft); color: var(--warn); }
.feature h4 { margin: 0 0 4px; font-size: 14px; letter-spacing: -0.01em; }
.feature p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }

/* ----------------------------------------------------------------- Stats */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.stat {
  border: 1px solid var(--line); border-radius: 15px; padding: 11px 12px; background: #FBFCFD;
}
.stat strong { display: block; font-size: 18px; margin-bottom: 3px; letter-spacing: -0.02em; color: var(--primary-dark); }
.stat.warnval strong { color: var(--danger); }
.stat span { color: var(--muted); font-size: 11px; line-height: 1.34; }

/* ----------------------------------------------------------------- Buttons */
.btn {
  border: 1px solid transparent; border-radius: 14px; padding: 12px 14px;
  font-weight: 700; cursor: pointer; width: 100%; font-size: 13.5px;
  font-family: inherit; transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(54, 103, 125, 0.22); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-line); }
.btn-ghost { background: #fff; color: var(--primary-dark); border-color: var(--line); }
.btn + .btn { margin-top: 9px; }
.btn-row { display: flex; gap: 9px; }
.btn-row .btn { margin-top: 0; }

/* ----------------------------------------------------------------- Segmented / chips */
.seg {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
  margin-bottom: 14px;
}
.seg::-webkit-scrollbar { display: none; }
/* Dòng hướng dẫn sử dụng ngắn cho người dùng (đặt tại các điểm chọn) */
.usehint {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
  background: var(--primary-soft); border-radius: 10px;
  padding: 8px 11px; margin: -6px 0 14px;
}
.usehint .ico { flex: 0 0 auto; color: var(--primary); font-size: 15px; margin-top: 1px; }
.usehint b { color: var(--primary-dark); font-weight: 600; }
.seg-btn {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 8px 13px; border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer; font-family: inherit; flex: 0 0 auto;
  transition: all .14s ease;
}
.seg-btn.active {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}

.quick-row { display: flex; flex-wrap: wrap; gap: 7px; }
.quick {
  border: 1px solid var(--primary-line); background: var(--primary-soft);
  color: var(--primary-dark); padding: 8px 11px; border-radius: 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  text-align: left; line-height: 1.35; transition: background .14s ease;
}
.quick:hover { background: var(--primary-tint); }

/* ----------------------------------------------------------------- Chat */
.chat { display: flex; flex-direction: column; gap: 11px; }
.bubble {
  padding: 12px 13px; border-radius: 16px; font-size: 12.5px; line-height: 1.55; max-width: 92%;
}
.bubble.ai { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 5px; }
.bubble.user { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.bubble.typing { color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.bubble.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); display: inline-block;
  animation: blink 1.2s infinite both;
}
.bubble.typing i:nth-child(2) { animation-delay: .2s; }
.bubble.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* Ảnh Sale đính kèm trong hội thoại (chụp/tải từ nút cạnh mic) */
.bubble.img-bubble { padding: 5px; }
.bubble .chat-img { display: block; width: 190px; max-width: 62vw; border-radius: 11px; }
/* Menu Thêm ảnh + khung camera trực tiếp (bottom sheet) */
.photo-choice { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.photo-choice .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.photo-choice .btn .ico { font-size: 18px; }
.cam-wrap { border-radius: 14px; overflow: hidden; background: #0c1418; aspect-ratio: 4 / 3; margin: 6px 0 12px; }
.cam-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sheet chụp ảnh: chiều cao cố định, video co giãn lấp giữa, nút Chụp luôn ghim đáy (khỏi cuộn) */
.sheet.sheet-cam { height: 84%; display: flex; flex-direction: column; overflow: hidden; }
.sheet.sheet-cam .grip,
.sheet.sheet-cam h3,
.sheet.sheet-cam .sub,
.sheet.sheet-cam .photo-choice { flex: 0 0 auto; }
.sheet.sheet-cam .cam-wrap { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }

/* Rich answer blocks inside an AI bubble */
.ans-lead { margin: 0 0 4px; }
.panel {
  border: 1px solid var(--primary-line); background: var(--primary-soft);
  border-radius: 13px; padding: 11px 12px; margin-top: 10px;
}
.panel.green { border-color: #CADDCF; background: var(--green-soft); }
.panel.danger { border-color: #E8C8CE; background: var(--danger-soft); }
.panel h5 {
  margin: 0 0 7px; font-size: 12px; color: var(--primary-dark);
  display: flex; align-items: center; gap: 6px; letter-spacing: -0.01em;
}
.panel.green h5 { color: #426119; }
.panel.danger h5 { color: var(--danger); }
.panel ul { margin: 0; padding-left: 17px; color: #2c3a42; font-size: 12px; line-height: 1.55; }
.panel ul li { margin-bottom: 3px; }
.panel p { margin: 0; color: #2c3a42; font-size: 12px; line-height: 1.55; }

.kv { display: flex; gap: 8px; font-size: 12px; margin: 4px 0; }
.kv b { color: var(--primary-dark); min-width: 96px; flex: 0 0 auto; font-weight: 700; }
.kv span { color: #2c3a42; }

.confidence {
  height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 7px 0 3px;
}
.confidence > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }

.product-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px dashed var(--line);
}
.product-line:first-of-type { border-top: 0; }
.product-line[data-prod] { cursor: pointer; border-radius: 9px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; transition: background .14s ease; }
.product-line[data-prod]:hover { background: var(--primary-soft); }
.product-line[data-prod] .pl-price::after { content: " ›"; color: var(--muted-2); font-weight: 800; }
.product-line .pl-main { min-width: 0; }
.product-line .pl-main b { font-size: 12.5px; display: block; }
.product-line .pl-main small { color: var(--muted); font-size: 11px; line-height: 1.4; display: block; }
.product-line .pl-price { font-weight: 800; color: var(--primary-dark); font-size: 12.5px; white-space: nowrap; }

.role-tag {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; background: var(--primary-tint); color: var(--primary-dark); margin-bottom: 3px;
}

.src-row { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.src {
  font-size: 10px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; background: #fafbfc;
  display: inline-flex; align-items: center; gap: 5px;
}
.src::before { content: "📄"; font-size: 9px; }
.src.approved { color: var(--green); border-color: #CADDCF; background: var(--green-soft); }
.src.approved::before { content: "✓"; }

.warning {
  background: var(--warn-soft); border: 1px solid #f3dca6; color: #8a5300;
  border-radius: 13px; padding: 10px 12px; font-size: 11px; line-height: 1.5; margin-top: 10px;
}
.flag-expert {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--danger-soft); border: 1px solid #E8C8CE; color: var(--danger);
  border-radius: 13px; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; margin-top: 10px; font-weight: 600;
}

/* Composer */
.composer {
  position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 0 2px;
  background: linear-gradient(transparent, var(--bg) 28%);
}
.composer input {
  flex: 1; height: 48px; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px;
  font: inherit; font-size: 13px; background: #fff; outline: none; color: var(--text);
}
.composer input:focus { border-color: var(--primary-line); box-shadow: 0 0 0 3px rgba(54, 103, 125, 0.10); }
.send {
  width: 48px; min-width: 48px; height: 48px; border: 1px solid transparent; border-radius: 14px;
  background: var(--primary); color: #fff; font-size: 18px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; margin: 0;
}
.send:hover { background: var(--primary-dark); }

/* ----------------------------------------------------------------- Forms */
label.lbl { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; color: #23323B; }
input.in, textarea.in {
  width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 12px;
  font: inherit; font-size: 13px; color: var(--text); background: #fff; outline: none;
}
select.in {
  width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 12px 36px 12px 12px;
  font: inherit; font-size: 13px; color: var(--text); background: #fff; outline: none;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235E6E78' stroke-width='2.5'><path stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
input.in:focus, textarea.in:focus, select.in:focus { border-color: var(--primary-line); box-shadow: 0 0 0 3px rgba(54, 103, 125, 0.10); }
textarea.in { min-height: 88px; resize: vertical; }
.field { margin-bottom: 13px; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row > .field { min-width: 0; }

.toggle-group { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle {
  border: 1px solid var(--line); background: #fff; color: #23323B; border-radius: 999px;
  padding: 9px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .14s ease;
}
.toggle.on { color: #fff; background: var(--primary); border-color: var(--primary); }

/* ----------------------------------------------------------------- Push-sale */
.customer-pick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 4px; }
.customer-pick::-webkit-scrollbar { display: none; }
.cust-chip {
  flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 14px;
  padding: 10px 12px; cursor: pointer; text-align: left; min-width: 152px; font-family: inherit;
  transition: all .14s ease;
}
.cust-chip.active { border-color: var(--primary); background: var(--primary-soft); }
.cust-chip b { display: block; font-size: 13px; letter-spacing: -0.01em; }
.cust-chip small { color: var(--muted); font-size: 11px; }

.history-bars { display: flex; align-items: flex-end; gap: 7px; height: 88px; padding-top: 6px; }
.hbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: flex-end; height: 100%; }
.hbar .bar {
  width: 100%; max-width: 26px; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #548CA5, #36677D); min-height: 5px;
}
.hbar small { font-size: 9.5px; color: var(--muted); font-weight: 600; }

.tier { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 10px; }
.tier.safe { border-left: 4px solid var(--ok); }
.tier.suggest { border-left: 4px solid var(--primary); }
.tier.grow { border-left: 4px solid var(--purple); }
.tier h5 { margin: 0 0 6px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.tier .tier-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.tier.safe .tier-tag { background: var(--ok-soft); color: var(--ok); }
.tier.suggest .tier-tag { background: var(--primary-soft); color: var(--primary-dark); }
.tier.grow .tier-tag { background: var(--purple-soft); color: var(--purple); }

.insight {
  border: 1px solid var(--line); background: #fff; border-radius: 15px; padding: 12px; margin-bottom: 9px;
  cursor: pointer; transition: border-color .14s ease;
}
.insight:hover { border-color: var(--primary-line); }
.insight h4 { margin: 0 0 4px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.insight p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }

/* ----------------------------------------------------------------- Disease map */
.map-shell {
  position: relative; height: 340px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,.7), transparent 12%),
    linear-gradient(160deg, #e4ebef 0%, #d5e1e7 48%, #c5d8e0 100%);
}
#mapLeaflet { position: absolute; inset: 0; z-index: 0; background: #dde7ec; }
.map-shell .leaflet-container { font: inherit; background: #dde7ec; }
.map-shell .leaflet-bottom.leaflet-right { z-index: 1002; }
.map-shell .leaflet-control-attribution {
  font-size: 8px; line-height: 1.5; color: var(--muted);
  background: rgba(255,255,255,.78); padding: 0 5px; border-radius: 6px;
  margin: 0 7px 78px 0;   /* nâng lên trên hộp chú thích */
}
.map-shell .leaflet-control-attribution a { color: var(--primary); }
.map-offline { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); font-size: 12px; }
.map-layer { position: absolute; inset: 0; transition: transform .32s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.map-layer.panning { cursor: grab; touch-action: none; }
.map-layer.panning:active { cursor: grabbing; }
.map-graticule { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.map-region-band {
  position: absolute; left: 0; right: 0; display: flex; align-items: center;
  padding-left: 10px; font-size: 9.5px; font-weight: 800; color: rgba(19,33,44,.45);
  text-transform: uppercase; letter-spacing: .06em; pointer-events: none;
}
.heat {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
  pointer-events: none; filter: blur(3px); mix-blend-mode: multiply;
}
.pin {
  position: absolute; transform: translate(-50%, -50%); width: 13px; height: 13px;
  border-radius: 999px; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(16,36,46,.3);
  cursor: pointer; z-index: 3; transition: transform .12s ease; touch-action: manipulation;
}
.pin::after { content: ''; position: absolute; inset: -11px; border-radius: 50%; }  /* vùng chạm rộng hơn cho ngón tay */
.pin:hover, .pin.sel { transform: translate(-50%, -50%) scale(1.45); z-index: 5; }
.pin.high { background: var(--risk-high); }
.pin.med { background: var(--risk-med); }
.pin.low { background: var(--risk-low); }
.pin-label {
  position: absolute; transform: translate(-50%, -140%); white-space: nowrap;
  font-size: 9px; font-weight: 800; color: #16242E; background: rgba(255,255,255,.82);
  padding: 2px 6px; border-radius: 7px; box-shadow: 0 2px 8px rgba(16,36,46,.1);
  pointer-events: none; z-index: 4;
}
.map-tools { position: absolute; right: 10px; top: 10px; display: grid; gap: 7px; z-index: 1000; }
.map-tool {
  width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.94);
  border-radius: 10px; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(16,36,46,.12);
  font-weight: 900; color: var(--primary-dark); cursor: pointer; font-size: 15px;
}
.map-legend {
  position: absolute; left: 10px; bottom: 10px; right: 10px;
  background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.9);
  border-radius: 13px; padding: 9px 11px; box-shadow: 0 10px 26px rgba(16,36,46,.12); z-index: 1000;
  pointer-events: none;   /* chú thích chỉ để xem, không chặn kéo/zoom bản đồ bên dưới */
}
.map-legend .ml-top { display: flex; justify-content: space-between; font-size: 9.5px; font-weight: 700; color: var(--muted); }
.heat-scale { height: 8px; border-radius: 999px; margin: 6px 0 5px;
  background: linear-gradient(90deg, #4C825C 0%, #C77700 55%, #9E5564 100%); }
.scale-labels { display: flex; justify-content: space-between; font-size: 9px; font-weight: 700; color: var(--muted); }

.map-callout {
  position: absolute; left: 10px; top: 10px; max-width: 200px; z-index: 1001;
  background: rgba(255,255,255,.96); border: 1px solid var(--line);
  border-radius: 13px; padding: 10px 11px; box-shadow: 0 12px 28px rgba(16,36,46,.18);
  font-size: 11px; display: none; pointer-events: none;
}
.map-callout.show { display: block; }
.map-callout h5 { margin: 0 0 3px; font-size: 12px; color: var(--primary-dark); }
.map-callout p { margin: 0; color: var(--muted); line-height: 1.45; }
.map-callout .mc-meta { margin-top: 5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.alert-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 11px; margin-bottom: 9px;
  cursor: pointer; transition: border-color .14s ease;
}
.alert-row:hover { border-color: var(--primary-line); }
.alert-dot { width: 10px; height: 10px; border-radius: 999px; }
.alert-dot.high { background: var(--risk-high); }
.alert-dot.med { background: var(--risk-med); }
.alert-dot.low { background: var(--risk-low); }
.alert-row h4 { margin: 0 0 2px; font-size: 12.5px; }
.alert-row p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }

.risk-badge { padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.risk-badge.high { background: var(--risk-high-soft); color: var(--risk-high); }
.risk-badge.med { background: var(--risk-med-soft); color: var(--risk-med); }
.risk-badge.low { background: var(--risk-low-soft); color: var(--risk-low); }

/* ----------------------------------------------------------------- Bottom nav */
.tabbar {
  flex: 0 0 auto; height: 74px;
  background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px 12px; gap: 2px; z-index: 20;
}
.tab {
  border: 0; background: transparent; border-radius: 14px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.tab .tab-ico { font-size: 19px; line-height: 1; }
.tab.active { background: var(--primary-tint); color: var(--primary-dark); font-weight: 600; }

/* ----------------------------------------------------------------- Toast / modal */
.toast {
  position: absolute; left: 18px; right: 18px; bottom: 86px;
  background: #16242E; color: #fff; padding: 12px 14px; border-radius: 14px;
  font-size: 12px; line-height: 1.4; transform: translateY(12px); opacity: 0;
  pointer-events: none; transition: .22s ease; z-index: 40;
}
.toast.show { opacity: 1; transform: translateY(0); }

.sheet-backdrop {
  position: absolute; inset: 0; background: rgba(11, 22, 32, 0.42);
  opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 50;
}
.sheet-backdrop.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 84%;
  background: var(--card); border-radius: 22px 22px 0 0; padding: 8px 16px 20px;
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); z-index: 51;
  overflow-y: auto; scrollbar-width: none;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet.show { transform: translateY(0); }
.sheet .grip { width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 6px auto 12px; }
.sheet h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.02em; }
.sheet .sub { color: var(--muted); font-size: 12px; margin: 0 0 12px; }

/* ----------------------------------------------------------------- Misc helpers */
.spacer-8 { height: 8px; }
.spacer-12 { height: 12px; }
.muted-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.pill-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-dark);
}
.pill.green { background: var(--green-soft); color: #426119; }
.pill.amber { background: var(--warn-soft); color: var(--warn); }
.empty { text-align: center; color: var(--muted); font-size: 12px; padding: 18px 8px; }

/* ----------------------------------------------------------------- Responsive
   Giao diện TỰ điều chỉnh theo kích thước màn hình (không phụ thuộc cảm ứng):
   • Điện thoại (hẹp)          → cột mobile, full màn hình
   • Tablet dọc / cửa sổ vừa   → dùng bề ngang, lưới 2 cột, bản đồ to hơn
   • Tablet ngang / desktop    → thanh điều hướng dọc bên trái (kiểu app tablet)
   html.touch chỉ lo safe-area (tai thỏ / home bar) của thiết bị thật. */

/* Safe-area cho thiết bị thật */
html.touch .app { padding-top: env(safe-area-inset-top); }
html.touch .tabbar { padding-bottom: max(12px, env(safe-area-inset-bottom)); height: auto; min-height: 74px; }
html.touch .screen { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* Thiết bị thật: app tràn viền màn hình (máy tính giữ cột căn giữa) */
html.touch .device { max-width: 100%; }

/* TABLET dọc & cửa sổ trung bình — min-height tránh kích hoạt khi điện thoại xoay ngang */
@media (min-width: 760px) and (min-height: 600px) {
  .device { max-width: 860px; }
  .screen { padding-left: clamp(22px, 7%, 120px); padding-right: clamp(22px, 7%, 120px); }
  /* Tablet: 3 thẻ trợ lý xếp chồng 1 cột, đồng đều kích thước (2 cột sẽ lẻ 1 thẻ) */
  .feature-grid { grid-template-columns: 1fr; }
  .feature p, .bubble { font-size: 13px; }
  .map-shell { height: 460px; }
  .bubble { max-width: 84%; }
}

/* TABLET ngang / DESKTOP rộng — điều hướng dọc bên trái */
@media (min-width: 1024px) and (min-height: 600px) {
  .device { max-width: 1180px; }
  .app { flex-direction: row; }
  .tabbar {
    position: relative; order: -1;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
    width: 112px; flex: 0 0 112px; height: auto; min-height: 0;
    border-top: 0; border-right: 1px solid var(--line);
    padding: 18px 10px; background: var(--card);
  }
  html.touch .tabbar { padding-bottom: 18px; }      /* nav sang bên → bỏ chừa đáy */
  .tab { padding: 14px 4px; border-radius: 16px; font-size: 11px; gap: 5px; }
  .tab .tab-ico { font-size: 23px; }
  .app > .screen { padding: 18px clamp(28px, 6%, 150px) 32px; }
  html.touch .app > .screen { padding-bottom: 32px; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .map-shell { height: 520px; }
  .bubble { max-width: 72%; }
  .toast { bottom: 24px; }
}

/* Custom inline SVG vector icons */
.ico {
  width: 1em; height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}
.tab-ico .ico {
  font-size: 20px;
  margin-bottom: 2px;
}
.feature-icon .ico {
  font-size: 22px;
  stroke-width: 2.2;
}
.panel h5 .ico {
  margin-right: 7px;
  font-size: 1.15em;
  vertical-align: -0.15em;
}
.seg-btn .ico {
  margin-right: 6px;
  font-size: 1.05em;
  vertical-align: -0.15em;
}

/* Voice-to-Text Button */
.voice-btn {
  width: 48px; min-width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; margin: 0;
  transition: all 0.2s ease;
}
.voice-btn:hover { background: var(--line-soft); color: var(--primary); }
.voice-btn.listening {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
  animation: pulse-listening 1.5s infinite;
}
@keyframes pulse-listening {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(158, 85, 100, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(158, 85, 100, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(158, 85, 100, 0); }
}

/* Multi-turn Diagnosis styles */
.diag-matches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.diag-match-card {
  background: var(--primary-soft);
  border: 1px solid var(--primary-line);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.dm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--primary-dark);
}
.dm-rank {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
}
.dm-name {
  flex: 1;
  font-size: 13px;
}
.dm-conf {
  color: var(--primary-dark);
  font-size: 12px;
}
.dm-body {
  font-size: 11px;
  color: var(--muted);
  border-top: 1px dashed rgba(54, 103, 125, 0.15);
  padding-top: 4px;
}
.question-panel {
  border-left: 4px solid var(--primary);
  background: #f7f9fa;
  margin-top: 10px !important;
  text-align: left;
}
.question-panel h5 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--primary-dark);
}
.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse-dot-anim 1.5s infinite;
}
@keyframes pulse-dot-anim {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}
.quick-reply-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-start;
}
.qr-btn {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.qr-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary-line);
}


/* =========================================================================
   SỔ CA BỆNH — case management (tạo ca · chẩn đoán & hỏi đáp · nhật ký điều
   trị · đánh giá kết quả · theo dõi hiệu quả sản phẩm). Tự giải thích, không
   cần hướng dẫn người dùng.
   ========================================================================= */

/* 7 tab — thu gọn nhãn để thanh dưới mobile vẫn vừa; desktop nav dọc nên thoải mái */
.tabbar { grid-template-columns: repeat(7, 1fr); padding-left: 3px; padding-right: 3px; }
.tabbar .tab { font-size: 8.5px; gap: 3px; padding: 0 1px; line-height: 1.15; }
.tabbar .tab .tab-ico .ico { font-size: 18px; }
@media (min-width: 760px) and (min-height: 600px) { .tabbar .tab { font-size: 11px; } }

/* --- Card "Sổ ca bệnh" trên Home --- */
.case-home-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.case-home-list:empty { display: none; }
.chm {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px;
  background: #FBFCFD; cursor: pointer; text-align: left; width: 100%; font-family: inherit;
  transition: border-color .15s ease, transform .12s ease;
}
.chm:hover { border-color: var(--primary-line); transform: translateY(-1px); }
.chm:active { transform: translateY(0); }
.chm-main { min-width: 0; }
.chm-main b { font-size: 12.5px; display: block; color: var(--heading); letter-spacing: -0.01em; }
.chm-main small { font-size: 11px; color: var(--muted); }

/* --- Trạng thái ca --- */
.case-status { font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.case-status.ok { background: var(--ok-soft); color: var(--ok); }
.case-status.warn { background: var(--warn-soft); color: var(--warn); }
.case-status.med { background: var(--risk-med-soft); color: var(--risk-med); }
.case-status.danger { background: var(--danger-soft); color: var(--danger); }

/* --- Danh sách ca bệnh --- */
.case-card {
  display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px;
  margin-bottom: 11px; box-shadow: var(--shadow-card);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.case-card:hover { border-color: var(--primary-line); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.case-card:active { transform: translateY(0); }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cc-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--heading); }
.cc-sym { color: var(--muted); font-size: 12px; line-height: 1.45; margin-bottom: 9px; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted-2); font-size: 10.5px; font-weight: 600; }
.cc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.cc-meta .ico { font-size: 13px; }

/* --- Empty state (tự dạy luồng dùng) --- */
.case-empty {
  text-align: center; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 20px; box-shadow: var(--shadow-card);
}
.case-empty .ce-ico {
  width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px;
  background: var(--primary-soft); color: var(--primary-dark);
  display: grid; place-items: center; font-size: 28px;
}
.case-empty .ce-ico .ico { font-size: 28px; }
.case-empty h3 { margin: 0 0 6px; font-size: 16px; }
.case-empty p { margin: 0 auto 14px; max-width: 300px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.case-flow { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; text-align: left; }
.case-flow span {
  font-size: 11.5px; font-weight: 600; color: var(--primary-dark);
  background: var(--primary-soft); border: 1px solid var(--primary-line);
  border-radius: 10px; padding: 8px 11px;
}

/* --- Chi tiết ca: tiêu đề section --- */
.case-section-title {
  display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
  color: var(--primary-dark); margin: 0 0 11px; letter-spacing: -0.01em;
}
.case-section-title .ico { font-size: 16px; }
.case-section-title .step { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--muted-2); letter-spacing: .04em; text-transform: uppercase; }

/* Tiêu đề bước trong luồng xử lý ca: số tròn + tên + mô tả — đọc như quy trình 1→2→3 */
.case-step { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 14px; }
.case-step-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-dark); border: 1px solid var(--primary-line);
  font-size: 13px; font-weight: 800; display: grid; place-items: center;
}
.case-step-h h4 { margin: 3px 0 0; font-size: 14px; font-weight: 700; color: var(--primary-dark); letter-spacing: -0.01em; }
.case-step-h p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* Thẻ bước thu/mở — Nhật ký & Đánh giá thu gọn (tiêu đề hiện tóm tắt), nhường chỗ cho chat */
.case-fold { padding: 0; overflow: hidden; }
.case-fold-head {
  width: 100%; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 11px; padding: 15px 16px; text-align: left;
  transition: background .14s ease;
}
.case-fold-head .case-step-h { flex: 1; min-width: 0; }
.case-fold-head .case-step-h h4 { margin: 0; }
.case-fold-chev { flex: 0 0 auto; color: var(--muted-2); display: grid; place-items: center; }
.case-fold-chev .ico { font-size: 20px; transition: transform .24s ease; }
.case-fold.collapsed .case-fold-chev .ico { transform: rotate(-90deg); }
.case-fold-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .26s ease; }
.case-fold.collapsed .case-fold-body { grid-template-rows: 0fr; }
.case-fold-inner { overflow: hidden; min-height: 0; }
.case-fold-pad { padding: 0 16px 16px; }

/* --- Hồ sơ ca --- */
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cp-id { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--muted-2); background: var(--line-soft); padding: 2px 7px; border-radius: 6px; }
.cp-dx {
  display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 4px; padding: 11px 12px;
  border-radius: 13px; background: var(--primary-soft); border: 1px solid var(--primary-line);
}
.cp-dx .ico { color: var(--primary-dark); font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.cp-dx b { color: var(--primary-dark); font-size: 12.5px; }
.cp-dx small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; line-height: 1.4; }
.cp-complete { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.cp-complete .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.cp-complete .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }

/* Dải chỉ số đàn — Tổng đàn / Mắc / Chết, đọc nhanh mức độ nặng của ca */
.cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.cp-stat { background: var(--line-soft); border-radius: 12px; padding: 10px 6px; text-align: center; }
.cp-stat b { display: block; font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; }
.cp-stat span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.cp-stat.warn { background: var(--warn-soft); }
.cp-stat.warn b { color: var(--warn); }
.cp-stat.danger { background: var(--danger-soft); }
.cp-stat.danger b { color: var(--danger); }

.cp-meta { margin-top: 14px; }

/* Triệu chứng — nhãn trên, nội dung dưới: không nén trong cột nhãn hẹp */
.cp-symptoms { margin-top: 12px; padding: 10px 12px; background: var(--line-soft); border-radius: 12px; }
.cp-symptoms b { display: block; font-size: 11px; font-weight: 700; color: var(--primary-dark); margin-bottom: 4px; }
.cp-symptoms p { margin: 0; font-size: 12.5px; color: #2c3a42; line-height: 1.5; }

/* --- Chat hỏi đáp trên ca (cuộn trong card, không sticky) --- */
.case-chat { display: flex; flex-direction: column; gap: 10px; max-height: clamp(360px, 56vh, 680px); overflow-y: auto; scrollbar-width: none; }
.case-chat::-webkit-scrollbar { display: none; }
.case-composer { display: flex; gap: 8px; margin-top: 11px; }
.case-composer input {
  flex: 1; min-width: 0; height: 46px; border: 1px solid var(--line); border-radius: 14px;
  padding: 0 14px; font: inherit; font-size: 13px; background: #fff; outline: none; color: var(--text);
}
.case-composer input:focus { border-color: var(--primary-line); box-shadow: 0 0 0 3px rgba(54, 103, 125, 0.10); }
.case-mic {
  width: 46px; min-width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--muted); cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, color .15s ease;
}
.case-mic:hover { background: var(--line-soft); color: var(--primary); }
.case-mic .ico { font-size: 18px; }
.case-mic.listening { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); animation: pulse-listening 1.5s infinite; }
.case-send {
  width: 46px; min-width: 46px; height: 46px; border: 0; border-radius: 14px;
  background: var(--primary); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.case-send:hover { background: var(--primary-dark); }
.case-send .ico { font-size: 18px; }

/* --- Nhật ký điều trị (timeline) --- */
.tl { position: relative; margin: 2px 0 0; padding-left: 20px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 5px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 14px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -18px; top: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--primary-line);
}
.tl-date { font-size: 10.5px; font-weight: 700; color: var(--muted-2); }
.tl-prod { font-size: 13px; font-weight: 700; color: var(--heading); margin: 1px 0 2px; letter-spacing: -0.01em; }
.tl-meta { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.tl-resp { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.tl-resp.up { background: var(--ok-soft); color: var(--ok); }
.tl-resp.mid { background: var(--warn-soft); color: var(--warn); }
.tl-resp.down { background: var(--danger-soft); color: var(--danger); }

/* --- Đánh giá kết quả --- */
.outcome-badge { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 13px; font-weight: 800; font-size: 13.5px; }
.outcome-badge .ico { font-size: 18px; }
.outcome-badge.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #CADDCF; }
.outcome-badge.med { background: var(--warn-soft); color: var(--warn); border: 1px solid #f3dca6; }
.outcome-badge.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #E8C8CE; }
.outcome-prompt { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 12px; }
.eff-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* --- Hiệu quả sản phẩm (rollup) --- */
.eff-row { margin-bottom: 13px; }
.eff-row:last-child { margin-bottom: 0; }
.eff-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.eff-name { font-size: 12.5px; font-weight: 700; color: var(--heading); cursor: pointer; min-width: 0; }
.eff-name .pl-price::after { content: ""; }
.eff-stat { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.eff-stat b { color: var(--primary-dark); }
.eff-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.eff-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width .4s ease; }
.eff-bar.warn > i { background: var(--warn); }
.eff-bar.low > i { background: var(--danger); }

/* --- Form trong bottom sheet (tạo ca / điều trị / đánh giá) --- */
.sheet-actions { display: flex; gap: 9px; margin-top: 4px; }
.sheet-actions .btn { margin-top: 0; }
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt {
  flex: 1; min-width: 92px; border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 12px; padding: 11px 8px; font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; text-align: center; transition: all .14s ease;
}
.opt.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.opt.active.ok { border-color: #CADDCF; background: var(--ok-soft); color: var(--ok); }
.opt.active.danger { border-color: #E8C8CE; background: var(--danger-soft); color: var(--danger); }
.chip-pick {
  border: 1px solid var(--primary-line); background: #fff; color: var(--primary-dark);
  border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .14s ease;
}
.chip-pick:hover { background: var(--primary-soft); }
.chip-pick.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.sheet-err { font-size: 12px; color: var(--danger); margin: 2px 0 10px; font-weight: 600; }

/* =========================================================================
   Nav icon/label scale theo breakpoint — phải đặt SAU '.tab-ico .ico{20px}'
   để thắng cascade. Mobile giữ 20px; tablet/desktop to & rõ hơn cho dễ chạm.
   ========================================================================= */
@media (min-width: 760px) and (min-height: 600px) {
  .tab-ico .ico { font-size: 24px; }
  .tabbar .tab { font-size: 12px; gap: 5px; }
}
@media (min-width: 1024px) and (min-height: 600px) {
  .tab-ico .ico { font-size: 25px; }
  .tabbar .tab { font-size: 11.5px; gap: 6px; }
}

/* =========================================================================
   HOVER rõ ràng — chỉ áp cho thiết bị có chuột (tablet/desktop), không dính
   trạng thái hover trên cảm ứng. Phản hồi nhất quán cho mọi phần tử bấm được.
   ========================================================================= */
@media (hover: hover) {
  /* Điều hướng (tab dưới & sidebar): hover = pill xanh nhạt thương hiệu,
     active = pill xanh đậm hơn → cùng tông, phân cấp rõ & đẹp */
  .tab:hover { background: var(--primary-soft); color: var(--primary-dark); }
  .tab.active:hover { background: var(--primary-tint); color: var(--primary-dark); }

  /* Header thẻ thu/mở: hover làm rõ vùng bấm + mũi chevron */
  .case-fold-head:hover { background: var(--line-soft); }
  .case-fold-head:hover .case-fold-chev { color: var(--primary); }

  /* Nút hành động bán hàng */
  .act-btn:hover { background: var(--primary-tint); border-color: var(--primary); }
  .act-btn.primary:hover { background: var(--primary-dark); }
  .act-btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

  /* Nút icon tròn: chuông, nút quay lại */
  .icon-btn:hover, .back:hover { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary-dark); }

  /* Segmented (Chẩn đoán/Phác đồ/SP/KM · bộ lọc bản đồ) */
  .seg-btn:hover { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary-dark); }
  .seg-btn.active:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

  /* Nút phụ / ghost */
  .btn-secondary:hover { background: var(--primary-tint); }
  .btn-ghost:hover { border-color: var(--primary-line); background: var(--line-soft); }

  /* Toggle đánh giá kết quả & chip chọn sản phẩm */
  .opt:hover { border-color: var(--primary-line); color: var(--primary-dark); }
  .opt.active:hover { filter: brightness(0.98); }

  /* Chip khách hàng (Push-sale) */
  .cust-chip:hover { border-color: var(--primary-line); background: var(--primary-soft); }

  /* Link sản phẩm trong "Hiệu quả sản phẩm" */
  .eff-name[data-prod] { transition: color .15s ease; }
  .eff-name[data-prod]:hover { color: var(--primary); text-decoration: underline; }
}

/* =========================================================================
   CÔNG CỤ BÁN HÀNG — nút hành động · đơn nháp · hub công việc
   ========================================================================= */
/* Hàng nút hành động dưới câu trả lời */
.act-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.act-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--primary-line); background: var(--primary-soft); color: var(--primary-dark);
  border-radius: 11px; padding: 8px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.act-btn .ico { font-size: 15px; }
.act-btn:active { transform: scale(.97); }
.act-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.act-btn.danger { background: var(--danger-soft); border-color: #E8C8CE; color: var(--danger); }
.act-btn.sm { padding: 6px 10px; font-size: 11px; border-radius: 9px; margin-top: 8px; }

/* Đơn nháp (form) */
.ord-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--line); }
.ord-line:first-child { border-top: 0; }
.ord-main { min-width: 0; flex: 1; }
.ord-main b { display: block; font-size: 12.5px; letter-spacing: -0.01em; }
.ord-main small { color: var(--muted); font-size: 11px; }
.ord-qty {
  width: 86px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  font: inherit; font-size: 12.5px; text-align: center; outline: none; background: #fff; color: var(--text);
}
.ord-qty:focus { border-color: var(--primary-line); box-shadow: 0 0 0 3px rgba(54, 103, 125, 0.10); }
.ar-body { min-width: 0; }

/* =========================================================================
   HỒ SƠ SALE — profile tab (tài khoản · bảo mật · quyền truy cập).
   Tối giản, tự giải thích bằng icon + nhãn + mô tả ngắn.
   ========================================================================= */

/* --- Thẻ hero: avatar + tên + vai trò (tông slate thương hiệu) --- */
.pf-hero {
  position: relative; overflow: hidden; border: 0; color: #fff;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #3D7088 0%, var(--primary-dark) 100%);
}
.pf-hero::after {
  content: ''; position: absolute; right: -34px; top: -34px;
  width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, 0.07);
}
.pf-avatar {
  flex: 0 0 60px; width: 60px; height: 60px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff;
}
.pf-hero-id { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pf-hero-id h3 { margin: 0; font-size: 18px; color: #fff; letter-spacing: -0.02em; }
.pf-hero-id .role { margin: 3px 0 9px; font-size: 12px; color: rgba(255, 255, 255, 0.82); }
.pf-hero-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-hero-pills .pill { background: rgba(255, 255, 255, 0.16); color: #fff; }
.pf-edit {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pf-edit .ico { font-size: 16px; }
.pf-edit:active { background: rgba(255, 255, 255, 0.24); }

/* --- Danh sách cài đặt (icon tròn + nhãn + mô tả + chevron) --- */
.pf-list { display: flex; flex-direction: column; }
.pf-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 4px; border: 0; border-top: 1px solid var(--line-soft);
  background: transparent; cursor: pointer; text-align: left; font-family: inherit;
  transition: background .12s ease;
}
.pf-row:first-child { border-top: 0; }
.pf-row:active { background: var(--primary-soft); border-radius: 12px; }
.pf-row-ico {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.pf-row-ico .ico { font-size: 18px; }
.pf-row-ico.green { background: var(--green-soft); color: var(--green); }
.pf-row-ico.amber { background: var(--warn-soft); color: var(--warn); }
.pf-row-ico.purple { background: var(--purple-soft); color: var(--purple); }
.pf-row-ico.danger { background: var(--danger-soft); color: var(--danger); }
.pf-row-txt { flex: 1; min-width: 0; }
.pf-row-txt h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--heading); letter-spacing: -0.01em; }
.pf-row-txt p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.pf-row-val { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.pf-row-chev { flex: 0 0 auto; color: var(--muted-2); display: flex; }
.pf-row-chev .ico { font-size: 18px; }
.pf-row.danger .pf-row-txt h4 { color: var(--danger); }
.pf-row.danger .pf-row-chev { color: var(--danger); }

/* --- Công tắc bật/tắt --- */
.pf-switch {
  flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px;
  background: var(--line); position: relative; transition: background .18s ease;
}
.pf-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 36, 46, 0.25);
  transition: transform .18s ease;
}
.pf-switch.on { background: var(--green); }
.pf-switch.on::after { transform: translateX(18px); }

.pf-version { text-align: center; color: var(--muted-2); font-size: 11px; padding: 4px 0 2px; }

/* --- Nội dung trong bottom sheet của Hồ sơ --- */
.pf-field { display: block; margin-bottom: 11px; }
.pf-field > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.pf-field input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 13px; color: var(--text); background: #FBFCFD;
}
.pf-field input:focus { outline: 0; border-color: var(--primary-line); background: #fff; }