/* ===========================================================
   Aura Wellness — base.css
   Reset, typography, layout primitives, component dùng chung
   =========================================================== */

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

html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}
ul[class], ol[class] { list-style: none; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }

/* --- Focus nhìn thấy được (bắt buộc) --- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Trên nền tối, viền vàng vẫn đủ tương phản nên dùng chung */

/* --- Typography helpers --- */
.display { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -.01em; }
.h1 { font-size: var(--fs-2xl); font-weight: var(--fw-sem); line-height: var(--lh-tight); }
.h2 { font-size: var(--fs-xl); font-weight: var(--fw-sem); line-height: var(--lh-snug); }
.h3 { font-size: var(--fs-lg); font-weight: var(--fw-sem); line-height: var(--lh-snug); }
.t-sm { font-size: var(--fs-sm); }
.t-xs { font-size: var(--fs-xs); }
.t-2xs { font-size: var(--fs-2xs); }
.muted { color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.upper { text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-sem); }
.strong { font-weight: var(--fw-sem); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout primitives --- */
.stack > * + * { margin-top: var(--s-3); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }
.row { display: flex; align-items: center; gap: var(--s-2); }
.row-3 { display: flex; align-items: center; gap: var(--s-3); }
.row-top { display: flex; align-items: flex-start; gap: var(--s-3); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: var(--s-3); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .g2-sm1 { grid-template-columns: 1fr; } }

.hr { height: 1px; background: var(--line); border: 0; margin: var(--s-4) 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Card --- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.card-tight { padding: var(--s-3); }
.card-flat { box-shadow: none; }
.card-dark {
  background: var(--forest);
  color: var(--cream);
  border-color: rgba(201, 169, 97, .28);
}
.card-dark .muted { color: rgba(247, 243, 234, .68); }

/* --- Button --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap-sm);
  padding: 0 var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-sem);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  text-decoration: none;
  line-height: 1;
  text-align: center;
}
.btn:active { transform: scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-primary { background: var(--forest); color: var(--cream); }
.btn-primary:hover { background: #23503f; }
.btn-gold { background: var(--gold); color: var(--forest-deep); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--sand); }
.btn-quiet { background: transparent; color: var(--ink-soft); }
.btn-quiet:hover { background: var(--sand); color: var(--ink); }
.btn-risk { background: var(--risk-bg); color: var(--risk-ink); border-color: rgba(163,84,61,.35); }
.btn-risk:hover { background: #eed7cf; }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: var(--tap); padding: 0 var(--s-5); font-size: var(--fs-md); }
.btn-sm { min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.btn-icon { padding: 0; width: var(--tap-sm); min-width: var(--tap-sm); }

/* --- Chip / badge --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-sem);
  background: var(--sand);
  color: var(--ink-soft);
  white-space: nowrap;
  line-height: 1.5;
}
.chip-ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip-warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip-risk { background: var(--risk-bg); color: var(--risk-ink); }
.chip-gold { background: var(--gold-soft); color: #6A5322; }
.chip-forest { background: var(--forest); color: var(--gold-soft); }
.chip-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-soft); }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-risk { background: var(--risk); }

/* Nhãn nguồn đo — dùng chung mọi nơi hiển thị Skin Scan */
.src {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-sem);
  border: 1px solid;
  white-space: nowrap;
}
.src-phone { background: #EDF1F0; color: #35564C; border-color: #C3D2CD; }
.src-device { background: var(--gold-soft); color: #5F4A1D; border-color: #CBB57F; }
/* Nội dung do mô hình sinh ra — cùng kỷ luật nhãn nguồn đã áp cho thẻ thời
   tiết ("mô phỏng") và cho hai nguồn đo da. Máy nói thì phải nói là máy. */
.src-ai { background: #F2EFF7; color: #4A3F63; border-color: #CFC6E0; }

/* --- Form --- */
.field { display: block; }
.field > .label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-sem);
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap-sm);
  padding: 10px var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 90px; resize: vertical; line-height: var(--lh-base); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .22);
  outline: none;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236B6B62' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  padding-right: var(--s-7);
}
.hint { font-size: var(--fs-2xs); color: var(--ink-soft); margin-top: 5px; }

.check {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.check:hover { background: var(--surface-2); }
.check input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--forest); }
.check.on { border-color: var(--gold); background: #FDFBF5; }

.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 46px; height: 27px; border-radius: var(--r-full);
  background: var(--line-strong); position: relative; flex: none;
  transition: background var(--dur) var(--ease);
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease);
}
.switch input:checked + .track { background: var(--forest); }
.switch input:checked + .track::after { transform: translateX(19px); }
.switch input:focus-visible + .track { outline: 3px solid var(--gold); outline-offset: 2px; }

/* --- Segmented control --- */
.seg {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--sand); border-radius: var(--r-full);
}
.seg button {
  min-height: 34px; padding: 0 var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--fw-sem);
  color: var(--ink-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* --- Table --- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: 10px var(--s-3); text-align: left; border-bottom: 1px solid var(--line); }
.table th {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); font-weight: var(--fw-sem); background: var(--surface-2);
  position: sticky; top: 0; z-index: 1;
}
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: #FCFAF5; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; background: var(--surface); }

/* --- Empty state --- */
.empty {
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.empty .icon { font-size: 28px; opacity: .5; margin-bottom: var(--s-2); }

/* --- Modal / sheet --- */
.modal-root {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.modal-root[hidden] { display: none; }
.modal-scrim {
  position: absolute; inset: 0;
  background: var(--overlay);
  animation: fade var(--dur) var(--ease);
}
.modal-box {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  width: 100%; max-width: 460px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  animation: pop var(--dur) var(--ease);
}
.modal-box.wide { max-width: 720px; }
.modal-head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
}
.modal-body { padding: var(--s-5); overflow-y: auto; }
.modal-foot {
  padding: var(--s-3) var(--s-5) var(--s-5);
  display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap;
}
.modal-foot .btn { flex: 1 1 auto; }
@media (min-width: 520px) { .modal-foot .btn { flex: 0 0 auto; } }

/* Sheet — trượt từ đáy, dùng ở console spa mobile */
@media (max-width: 600px) {
  .modal-root.sheet { align-items: flex-end; padding: 0; }
  .modal-root.sheet .modal-box {
    max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 92vh;
    animation: slideup var(--dur-slow) var(--ease);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes slideup { from { transform: translateY(100%) } to { transform: none } }

/* --- Toast --- */
.toast-root {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottomnav-h) + var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  display: flex; flex-direction: column; gap: var(--s-2);
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  background: var(--forest-deep);
  color: var(--cream);
  border: 1px solid rgba(201,169,97,.4);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  box-shadow: var(--sh-3);
  animation: toastin var(--dur) var(--ease);
  display: flex; align-items: flex-start; gap: var(--s-2);
}
.toast.out { animation: toastout var(--dur) var(--ease) forwards; }
.toast .tico { color: var(--gold); flex: none; }
@keyframes toastin { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes toastout { to { opacity: 0; transform: translateY(8px) } }

/* --- Skeleton / progress --- */
.bar { height: 8px; border-radius: var(--r-full); background: var(--sand); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gold); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }
.bar.ok > i { background: var(--ok); }
.bar.warn > i { background: var(--warn); }
.bar.risk > i { background: var(--risk); }

/* --- Banner cảnh báo dùng chung --- */
.alert {
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  display: flex; gap: var(--s-3); align-items: flex-start;
  border: 1px solid;
}
.alert-risk { background: var(--risk-bg); border-color: rgba(163,84,61,.32); color: var(--risk-ink); }
.alert-warn { background: var(--warn-bg); border-color: rgba(184,137,74,.32); color: var(--warn-ink); }
.alert-info { background: #EEF2F1; border-color: #CBD8D4; color: #33544A; }
.alert-ok { background: var(--ok-bg); border-color: rgba(74,124,89,.32); color: var(--ok-ink); }
.alert-gold { background: #FBF6E9; border-color: rgba(201,169,97,.45); color: #6A5322; }
.alert .aico { flex: none; font-size: var(--fs-lg); line-height: 1.2; }

/* Miễn trừ y tế — bắt buộc kèm mọi kết quả Skin Scan */
.disclaimer {
  font-size: var(--fs-2xs);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
  padding: var(--s-3);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
}

/* --- Demo banner --- */
.demo-flag {
  background: var(--gold-soft);
  color: #5F4A1D;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-sem);
  padding: 5px var(--s-4);
  text-align: center;
  letter-spacing: .02em;
}

/* --- Chart helpers (SVG tự vẽ) --- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .gridline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .lbl { font-size: 10px; fill: var(--ink-soft); font-family: var(--font-ui); }
.chart .val { font-size: 11px; fill: var(--ink); font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Utilities --- */
.pad { padding: var(--s-4); }
.pad-5 { padding: var(--s-5); }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.hide { display: none !important; }
.gold { color: var(--gold); }
.c-ok { color: var(--ok); }
.c-warn { color: var(--warn); }
.c-risk { color: var(--risk); }
.bg-sand { background: var(--sand); }

/* Avatar chữ cái */
.ava {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--forest); color: var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-sem); font-size: var(--fs-sm);
  flex: none;
}
.ava-lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
.ava-sm { width: 30px; height: 30px; font-size: var(--fs-2xs); }

/* ===========================================================
   Thanh trượt so sánh ảnh — signature element
   =========================================================== */
/* Giá trị thật do UI.CMP_START đặt inline; đây chỉ là lưới an toàn */
.cmp { --cmp-pos: 28%; user-select: none; }
.cmp-stage {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--sh-2);
  touch-action: none;
  cursor: ew-resize;
}
.cmp-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Dùng clip-path để ảnh lớp trên luôn giữ đúng kích thước khung */
.cmp-clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--cmp-pos)) 0 0);
  will-change: clip-path;
}
.cmp-tag {
  position: absolute; bottom: var(--s-3);
  background: rgba(15, 36, 28, .82);
  color: var(--cream);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-sem);
  padding: 5px 10px;
  border-radius: var(--r-full);
  backdrop-filter: blur(6px);
  pointer-events: none;
  line-height: 1.4;
  max-width: 44%;
}
.cmp-tag-l { left: var(--s-3); }
.cmp-tag-r { right: var(--s-3); }
.cmp-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--cmp-pos);
  transform: translateX(-50%);
  width: 44px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.cmp-line {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: var(--cream);
  box-shadow: 0 0 0 1px rgba(15,36,28,.25);
}
.cmp-grip {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: -1px;
  box-shadow: var(--sh-2), 0 0 0 1px rgba(15,36,28,.18);
}
.cmp-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  margin: 0;
  cursor: ew-resize;
}
.cmp-range:focus-visible { opacity: .001; }
.cmp-range:focus-visible ~ .cmp-handle .cmp-grip { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ===========================================================
   TRỢ LÝ AI — bong bóng chat (dùng chung app khách & console spa)
   =========================================================== */
.chat { display: flex; flex-direction: column; gap: var(--s-4); }
.cmsg { max-width: 84%; display: flex; flex-direction: column; gap: 5px; }
.cmsg.me { align-self: flex-end; align-items: flex-end; }
.cmsg.them { align-self: flex-start; }
.cwho {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-2xs); color: var(--ink-soft); font-weight: var(--fw-sem);
}
.cbub {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cmsg.me .cbub { background: var(--forest); color: var(--cream); border-bottom-right-radius: 5px; }
.cmsg.them .cbub { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
/* Bong bóng bàn giao đổi nền sang kem. Ở console spa, tin của bot nằm bên
   `.me` — nền rừng, CHỮ KEM. Đổi nền mà quên đổi chữ là chữ kem trên nền
   kem: bong bóng trông rỗng hoàn toàn. Luôn đặt lại cả `color` cùng lúc. */
.cmsg.handoff .cbub {
  background: #F8F4EA;
  color: var(--ink);
  border: 1px solid rgba(201,169,97,.5);
}
.ctime { font-size: var(--fs-2xs); color: var(--line-strong); }

/* Dữ kiện bot đã dùng — để nhân viên soi lại trước khi gửi. Không có khối
   này thì "duyệt bản nháp" chỉ là đọc lại văn phong, không kiểm được số. */
.cfacts { display: flex; flex-wrap: wrap; gap: 4px; }
.cfacts i {
  font-style: normal;
  font-size: var(--fs-2xs);
  background: var(--sand); color: var(--ink-soft);
  border-radius: var(--r-full); padding: 2px 8px;
  overflow-wrap: anywhere;
}
/* Vết bộ lọc đã chặn — chỉ hiện ở phía spa, khách không bao giờ thấy */
.cblock {
  font-size: var(--fs-2xs);
  background: var(--risk-bg); color: var(--risk-ink);
  border: 1px solid rgba(163,84,61,.3);
  border-radius: var(--r-sm); padding: 5px 9px;
  overflow-wrap: anywhere;
}
/* Chỉ báo đang soạn tin — ba giây im lặng trông như hỏng */
.ctyping { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.ctyping i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong);
  animation: cdot 1.1s infinite ease-in-out;
}
.ctyping i:nth-child(2) { animation-delay: .16s; }
.ctyping i:nth-child(3) { animation-delay: .32s; }
@keyframes cdot { 0%,60%,100% { opacity: .28; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) { .ctyping i { animation: none; opacity: .5 } }

/* ===========================================================
   THẺ TƯ VẤN (advise) — bản nháp có cấu trúc cho nhân viên tiệm.
   Cố ý viền đậm và có đầu thẻ: nó KHÔNG phải một tin nhắn, mà là một
   thứ đang chờ người đọc quyết định. Trông giống bong bóng chat là
   nhân viên bấm Gửi mà chưa đọc.
   =========================================================== */
.advice { border: 1px solid var(--forest); border-radius: var(--r-md); overflow: hidden; }
.advice-head {
  background: var(--forest); color: var(--cream);
  font-size: var(--fs-2xs); font-weight: var(--fw-sem);
  padding: 7px 12px;
}
.advice-body { padding: var(--s-3); }
.advice-note {
  font-size: var(--fs-xs); background: var(--sand); color: var(--ink-soft);
  border-radius: var(--r-sm); padding: 8px 10px;
}
.advice-note b { color: var(--ink); }
.needs { display: flex; flex-wrap: wrap; gap: 5px; }
.needs span {
  font-size: var(--fs-2xs); font-weight: var(--fw-sem);
  background: var(--gold-soft); color: #5F4A1D;
  border-radius: var(--r-full); padding: 3px 10px;
}
.prodrow {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; margin-bottom: 6px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
}
.prodrow b { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.prodrow .num { font-size: var(--fs-xs); font-weight: var(--fw-sem); white-space: nowrap; }
.prodrow small { grid-column: 1 / -1; font-size: var(--fs-2xs); color: var(--ink-soft); }

/* Ô soạn tin */
.compose { display: flex; gap: var(--s-2); align-items: flex-end; }
.compose .textarea { min-height: var(--tap); max-height: 140px; }
.cquick { display: flex; flex-wrap: wrap; gap: 6px; }
.cquick button {
  font-size: var(--fs-2xs); font-weight: var(--fw-sem);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  border-radius: var(--r-full); padding: 6px 11px; cursor: pointer;
}
.cquick button:hover { background: var(--sand); color: var(--ink); }

/* Section header dùng chung */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.sec-head h2, .sec-head h3 { margin: 0; }