/* Răng Xinh V14: xanh tím, camera mở trực tiếp, khung hình không có vòng quét. */
:root {
  --blue: #5363d8;
  --blue-dark: #27347c;
  --navy: #242b68;
  --bg: #e8ebff;
  --surface: #f1f3ff;
  --ink: #20285e;
  --muted: #68719d;
  --line: #aeb8ef;
  --soft: #dce2ff;
  --yellow: #ffd766;
  --yellow-light: #fff1b8;
  --shadow: 0 18px 48px rgba(51, 62, 138, .16);
  --font-vietnamese-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-vietnamese-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html { background: #e8ebff; }
body {
  font-family: var(--font-vietnamese-sans);
  background:
    radial-gradient(circle at 88% 5%, rgba(150, 126, 255, .28), transparent 32rem),
    radial-gradient(circle at 2% 78%, rgba(80, 182, 220, .23), transparent 36rem),
    linear-gradient(145deg, #e7edff, #e8e5ff 52%, #d8f0fa);
}

/* Font hệ thống giữ đầy đủ dấu tiếng Việt trên Windows, Android và iOS. */
button, input, select, textarea, nav, .tag, .chip,
.guest-feature p, .guest-intro p, .guest-story p, .story-card span {
  font-family: var(--font-vietnamese-sans);
}
h1, h2, h3,
.guest-hero-copy h1, .guest-intro h2, .guest-feature h3,
.guest-story h2, .guest-final h2, .hero-copy h2,
.tip-card h2, dialog h2, .result-summary h3,
.calendar-motif h3, .hero-v14-camera strong {
  font-family: var(--font-vietnamese-display);
  letter-spacing: 0;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
body::before {
  opacity: .18;
  background: repeating-linear-gradient(122deg, transparent 0 265px, rgba(255,255,255,.78) 268px 278px, transparent 282px 540px);
}

.guest-header, .topbar {
  background: linear-gradient(105deg, rgba(229,235,255,.98), rgba(226,222,255,.96) 58%, rgba(207,238,250,.96));
}
.sidebar {
  color: #f4f6ff;
  background:
    radial-gradient(circle at 10% 8%, rgba(116, 203, 255, .28), transparent 15rem),
    radial-gradient(circle at 90% 86%, rgba(164, 110, 255, .34), transparent 18rem),
    linear-gradient(160deg, #252f75 0%, #4658c8 56%, #7558c6 100%);
  border-right-color: rgba(205, 214, 255, .42);
  box-shadow: 12px 0 34px rgba(38, 45, 116, .14);
}
.sidebar .nav-label, .sidebar .version { color: #cbd4ff; }
.sidebar .main-nav a, .sidebar .profile-link { color: #e3e8ff; }
.sidebar .main-nav a:hover { color: #fff; background: rgba(255,255,255,.11); }
.sidebar .main-nav a.active {
  color: #fff;
  background: linear-gradient(115deg, rgba(139, 207, 255, .32), rgba(194, 150, 255, .38));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.sidebar .main-nav a.active::before { background: #ffdc71; }
.sidebar .nav-badge { color: #283477; background: #ffdc71; }
.sidebar .side-note {
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}
.sidebar .side-note p { color: #d9e0ff; }
.mobile-nav { background: linear-gradient(100deg, rgba(237,240,255,.97), rgba(218,229,255,.97)); }
.guest-hero { background: linear-gradient(135deg, #27347c, #5363d8 54%, #7d62d8); border-color: #8491e7; }
.guest-footer { background: linear-gradient(90deg, #27347c, #5965d5 58%, #6f54c7); }
.guest-story .story-card {
  color: #fff;
  background: linear-gradient(145deg, #27347c 0%, #4859c9 55%, #7558c6 100%);
  border: 1px solid rgba(192, 202, 255, .72);
  box-shadow: 0 22px 52px rgba(39, 52, 124, .28);
}
.guest-story .story-card svg { color: #ffdc71; }
.guest-story .story-card b,
.guest-story .story-card span { color: #fff; }

.card, .result-card, .next-card, .finding-card, .healthy-reference, .result-more details,
.maps-ready, .intake-row, .visit-card, details {
  background: linear-gradient(145deg, #f1f3ff, #e2e8ff 72%, #e0f4fa);
  border-color: var(--line);
}
.card:nth-of-type(even), .mission-card, .daily-guidance {
  background: linear-gradient(145deg, #e3e8ff, #eae5ff 58%, #d9f1f8);
}
.main-nav a.active { background: linear-gradient(115deg, #cfd8ff, #e4d8ff); }
.side-note { background: linear-gradient(145deg, #e1dcff, #d3ebfa); }
.notice { background: linear-gradient(135deg, #dce3ff, #e8e3ff); color: #3a4785; }
.drop-zone, .scan-photo-card { background: linear-gradient(145deg, #ecefff, #e5e2ff 54%, #d7eff8); }
.shot, .habit, input:not([type=checkbox]):not([type=file]), select, textarea { background: #f4f5ff; border-color: #adb7eb; }
dialog { background: linear-gradient(145deg, #f3f5ff, #e5e8ff 58%, #dceff8); }
.btn-blue { background: linear-gradient(135deg, #34469f, #5d6cdd 60%, #7357c7); }
.btn-soft { background: #dce3ff; color: #2c3a83; }
.btn-white, .icon-btn { background: #f1f3ff; border-color: #a8b3eb; }

.home-hero-v14 {
  position: relative;
  min-height: 330px;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 20%, rgba(137, 211, 255, .38), transparent 31%),
    radial-gradient(circle at 67% 92%, rgba(169, 122, 255, .45), transparent 38%),
    linear-gradient(135deg, #252f75 0%, #4658c8 52%, #7558c6 100%);
  border: 1px solid rgba(190, 202, 255, .7);
  box-shadow: 0 24px 60px rgba(42, 49, 121, .24);
}
.home-hero-v14::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .42;
  background: repeating-linear-gradient(125deg, transparent 0 120px, rgba(255,255,255,.08) 122px 124px, transparent 126px 245px);
}
.home-hero-v14 .hero-copy { align-self: center; padding: 38px 42px; }
.home-hero-v14 .hero-copy h2 { color: #fff; }
.home-hero-v14 .hero-copy p { color: #e5eaff; }
.home-hero-v14 .hero-copy em { color: #ffdc71; }
.home-hero-v14 .hero-foot { color: #d4dcff; }
.home-hero-v14 .chip.light { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.home-hero-v14 .btn-yellow { box-shadow: 0 12px 28px rgba(18, 24, 77, .26); }

.hero-v14-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(28,37,103,.3), rgba(132,105,223,.34));
}
.hero-v14-orb { position: absolute; display: block; border-radius: 50%; filter: blur(.2px); }
.hero-v14-orb.orb-one {
  width: 270px;
  height: 270px;
  right: -44px;
  top: -62px;
  background: linear-gradient(145deg, rgba(138,218,255,.85), rgba(92,108,223,.2));
}
.hero-v14-orb.orb-two {
  width: 210px;
  height: 210px;
  left: -40px;
  bottom: -96px;
  background: linear-gradient(145deg, rgba(255,219,111,.64), rgba(154,102,240,.45));
}
.hero-v14-camera {
  position: relative;
  z-index: 1;
  width: min(78%, 330px);
  min-height: 190px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  box-shadow: 0 25px 55px rgba(22, 29, 93, .34), inset 0 1px rgba(255,255,255,.28);
  backdrop-filter: blur(12px);
}
.hero-v14-camera svg { width: 58px; height: 58px; padding: 13px; margin-bottom: 20px; border-radius: 18px; color: #283477; background: #ffdc72; }
.hero-v14-camera strong {
  font-family: var(--font-vietnamese-display);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.hero-v14-camera span { margin-top: 9px; color: #e7ebff; font-size: 12px; }

.camera-guide { display: none !important; }
#cameraDialog { width: min(96vw, 760px); }
.camera-stage-v14 {
  height: clamp(300px, 58dvh, 620px);
  aspect-ratio: auto;
  border: 2px solid #9aa8ee;
  border-radius: 22px;
  background: #171d49;
  box-shadow: 0 18px 45px rgba(31, 38, 102, .23);
}
.camera-stage-v14 video { width: 100%; height: 100%; object-fit: cover; }
.camera-launch-zone { min-height: 285px; border-color: #8e9de4; }
.camera-launch-zone #uploadEmpty > svg { width: 54px; height: 54px; padding: 12px; border-radius: 17px; background: #d9e1ff; }
.camera-launch-zone .scan-capture-actions { width: min(100%, 510px); justify-content: center; }
.camera-launch-zone .scan-capture-actions .btn { flex: 1 1 190px; }

.ai-feedback-panel {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid #9daaf0;
  border-radius: 20px;
  background: linear-gradient(145deg, #e3e8ff, #eee8ff 58%, #dff2fa);
}
.ai-feedback-panel h3 { margin: 3px 0 0; }
.ai-feedback-panel form { margin-top: 15px; }
.ai-feedback-panel textarea { min-height: 92px; }
.feedback-status { color: #304494; font-weight: 750; }
.feedback-review-card { margin-top: 24px; }
.feedback-review-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.feedback-review-row:last-child { border-bottom: 0; }
.feedback-review-row h3 { margin: 12px 0; font-size: 18px; }
.feedback-review-images { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 12px; margin-top: 12px; }
.feedback-review-images figure { margin: 0; }
.feedback-review-images img { width: 100%; max-height: 230px; object-fit: contain; border-radius: 14px; background: #20275d; }
.feedback-review-images figcaption { margin-top: 5px; color: var(--muted); font-size: 12px; }

@media (max-width: 680px) {
  .home-hero-v14 { grid-template-columns: 1fr; min-height: 0; }
  .home-hero-v14 .hero-copy { padding: 28px 24px 22px; }
  .hero-v14-panel { min-height: 190px; padding: 22px; }
  .hero-v14-camera { width: 100%; min-height: 140px; padding: 22px; border-radius: 22px; }
  .hero-v14-camera svg { width: 46px; height: 46px; margin-bottom: 12px; }
  .hero-v14-camera strong { font-size: 24px; }
  .camera-stage-v14 { height: min(58dvh, 500px); }
  #cameraDialog { padding: 18px; }
  .camera-launch-zone .scan-capture-actions { grid-template-columns: 1fr; }
  .camera-launch-zone .scan-capture-actions .btn:first-child { grid-column: auto; }
}
.sidebar{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sidebar-bottom{flex-shrink:0}