/* Răng Xinh V13: nền xanh dịu, chữ rõ và bề mặt ít trắng. */
:root {
  --blue: #17617b;
  --blue-dark: #0b4159;
  --navy: #123b50;
  --bg: #d9f1e9;
  --surface: #edf8ee;
  --ink: #12394d;
  --muted: #587786;
  --line: #74bdb7;
  --soft: #c8eadf;
  --yellow: #ffda63;
  --yellow-light: #fff1ad;
  --danger: #c83649;
  --radius: 24px;
  --shadow: 0 18px 48px rgba(16, 70, 83, .13);
}

html { background: #d9f1e9; }
body {
  color: var(--ink);
  font-size: 15px;
  background:
    radial-gradient(circle at 82% 5%, rgba(255, 221, 102, .45), transparent 29rem),
    radial-gradient(circle at 3% 76%, rgba(76, 177, 177, .24), transparent 35rem),
    linear-gradient(145deg, #d7f1e8, #eaf5d4 52%, #bae4dd);
}
body::before {
  opacity: .26;
  background: repeating-linear-gradient(119deg, transparent 0 255px, rgba(255,255,255,.7) 258px 271px, transparent 274px 520px);
}

h1, h2, .guest-hero-copy h1, .guest-intro h2, .guest-story h2, .guest-final h2,
.hero-copy h2, .tip-card h2, dialog h2, .result-summary h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--ink);
}
h1 { font-size: clamp(30px, 3.1vw, 43px); line-height: 1.16; letter-spacing: -.035em; }
h2 { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; letter-spacing: -.025em; }
h3 { font-size: 17px; line-height: 1.4; }
p, li, label, input, select, textarea, button, a { line-height: 1.65; }
.eyebrow { color: #17617b; font-size: 10px; letter-spacing: .18em; }
.small { font-size: 12px; }

.brand-v13 { justify-content: center; width: 100%; }
.brand-logo-frame {
  width: 126px;
  aspect-ratio: 1;
  display: block;
  overflow: visible;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.brand-v13 .brand-logo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}
.guest-header .brand-logo-frame { width: 112px; }
.guest-header .brand-v13 { width: auto; }

.guest-header, .topbar {
  background: linear-gradient(105deg, rgba(207,239,228,.98), rgba(236,247,210,.96) 58%, rgba(167,219,212,.96));
}
.sidebar { background: linear-gradient(180deg, #dff3e8, #c7e9de 55%, #a9dad6); }
.mobile-nav { background: linear-gradient(100deg, rgba(227,245,234,.96), rgba(195,232,222,.96)); }
.guest-main { background: transparent; }
.guest-hero {
  background: linear-gradient(135deg, #14536f, #2b8491);
  border: 1px solid rgba(39,132,143,.55);
}
.guest-hero-copy h1, .guest-hero-copy p, .guest-hero-copy > small { color: #f3fbf6; }
.guest-hero-copy h1 { font-size: clamp(43px, 6vw, 72px); }
.guest-hero-copy h1 em { color: #ffda63; }
.guest-intro, .guest-story, .guest-final {
  background: linear-gradient(135deg, #e9f6dd, #c5e9df 64%, #f9e89b);
  border: 1px solid rgba(79,164,163,.55);
}
.guest-feature.blue { background: linear-gradient(145deg, #abdeda, #dbf2e3); }
.guest-feature.yellow { background: linear-gradient(145deg, #ffe177, #fff0b0); }
.guest-feature.cyan { background: linear-gradient(145deg, #b8e6d7, #7ec8c8); }
.guest-feature p, .guest-intro > p:last-child, .guest-story > div > p:last-child { font-size: 15px; }
.guest-feature h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; }
.guest-footer { background: linear-gradient(90deg, #154d69, #2a7f8d); }
.story-card { background: linear-gradient(150deg, #f0f8df, #b9e2d9); border-color: #71bbb7; }

.card, .result-card, .next-card, .finding-card, .healthy-reference, .result-more details,
.maps-ready, .intake-row, .visit-card, details {
  background: linear-gradient(145deg, #edf8e9, #d0ede2 72%, #f9e99b);
  border-color: #78bdb8;
}
.card:nth-of-type(even), .mission-card, .daily-guidance {
  background: linear-gradient(145deg, #bfe7dd, #eaf4d5 58%, #f8e38d);
}
.home-hero { background: linear-gradient(135deg, #154f6c, #2a8190); }
.hero-copy h2 { color: #f4fbf7; font-size: clamp(35px, 4vw, 50px); }
.hero-copy p { color: #d9eeeb; font-size: 14px; }
.hero-copy em { color: #ffdc69; }
.home-action.scan { background: linear-gradient(135deg, #ffdf6b, #f4edb1 52%, #9ed8d0); }
.home-action.diary { background: linear-gradient(135deg, #4aa1aa, #b7e4d9 58%, #f9de76); }

.btn { min-height: 48px; font-size: 13px; border-radius: 999px; padding-inline: 21px; }
.btn-white, .icon-btn { background: #e9f6e9; border-color: #73bcb8; }
.btn-soft { background: #c6e9df; color: #124a62; }
.btn-blue { background: linear-gradient(135deg, #14506d, #2b8792); }
.btn-yellow { background: linear-gradient(135deg, #ffe176, #ffc94f); }
.main-nav a.active { background: linear-gradient(115deg, #a8ddd5, #f4e58c); }
.side-note { background: linear-gradient(145deg, #f9df78, #b9e3d9); }
.notice { background: linear-gradient(135deg, #c9eade, #eaf5d7); }
.notice.yellow { background: linear-gradient(135deg, #ffe583, #f5efbd); }
.drop-zone, .scan-photo-card { background: linear-gradient(145deg, #f9e78d, #eaf4c7 50%, #b4e2d7); }
.shot, .habit, input:not([type=checkbox]):not([type=file]), select, textarea {
  background: #edf8ed;
  border-color: #78bdb8;
}
dialog { background: linear-gradient(145deg, #eff8e8, #c9e9df 58%, #f7e58f); }
.system-notice, .password-message { background: #d6eee4; color: #164d62; }
.mobile-nav a.active { background: #bfe7dc; }

/* Dấu đỏ rõ, gọn; phần trùng lớn chỉ được vẽ một lần bởi analysis.js. */
.result-image svg .focus-highlight polygon,
.result-image svg .focus-highlight rect {
  fill: rgba(218, 45, 61, .035);
  stroke: rgba(218, 45, 61, .58);
  stroke-width: 11;
  filter: drop-shadow(0 2px 2px rgba(129, 20, 31, .22));
}
.result-image svg .focus-edge polygon,
.result-image svg .focus-edge rect {
  fill: none;
  stroke: #c92035;
  stroke-width: 4.5;
}
.finding-swatch { background: rgba(218,45,61,.38); border-bottom-color: #c92035; }
.finding-card > p, .finding-card details p, .result-more li, .result-more p { font-size: 14px; }

@media (max-width: 680px) {
  body { font-size: 14px; }
  .topbar::before {
    content: '';
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: transparent url('../assets/brand/rangxinh-v13-logo-transparent.png') center / contain no-repeat;
    border: 0;
  }
  .guest-header .brand-logo-frame { width: 92px; }
  .guest-hero-copy h1 { font-size: clamp(40px, 12vw, 56px); }
  .guest-feature h3 { font-size: 20px; }
  .hero-copy h2 { font-size: 31px; }
  .hero-copy p { font-size: 12px; }
  .btn { font-size: 12px; }
  .result-summary h3 { font-size: 20px; }
}