/* ===========================================================
   Aura Wellness — app.css
   App người dùng cuối: THƯƠNG HIỆU, không phải công cụ.
   Nền cream · Playfair cho tiêu đề · nhiều khoảng trống ·
   nhịp chậm · chuyển động nhẹ. Đây là mặt khách nhìn thấy.
   =========================================================== */

body.app {
  background: var(--cream);
  color: var(--ink);
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
}

.aframe {
  max-width: var(--maxw-app);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--cream);
  position: relative;
}
@media (min-width: 480px) {
  body.app { background: #EFE9DC; }
  .aframe { box-shadow: 0 0 60px rgba(27,58,47,.09); }
}

/* ---------- Thanh trên: tối giản, không viền ---------- */
.abar {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(var(--cream) 72%, rgba(247,243,234,0));
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-4)) var(--s-5) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.abar .ab-back {
  width: 40px; height: 40px; margin-left: -8px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ink);
}
.abar .ab-back:hover { background: var(--sand); }
.abar h1 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -.01em;
  flex: 1; min-width: 0;
}
.abar .ab-act { display: flex; gap: 4px; }
.abar .ab-act button, .abar .ab-act a {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--ink-soft); text-decoration: none;
}
.abar .ab-act button:hover, .abar .ab-act a:hover { background: var(--sand); color: var(--ink); }

.ascreen { padding: 0 var(--s-5) var(--s-8); }
.ascreen > * + * { margin-top: var(--s-5); }

/* ---------- Bottom nav mềm ---------- */
.anav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(247,243,234,.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--sand);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.anav-in { display: flex; max-width: var(--maxw-app); margin: 0 auto; }
.anav a {
  flex: 1; min-height: var(--bottomnav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-decoration: none; color: var(--ink-soft);
  font-size: var(--fs-2xs); font-weight: var(--fw-med);
  position: relative; padding: 6px 2px;
  transition: color var(--dur) var(--ease);
}
.anav a .ic { font-size: 18px; line-height: 1; transition: transform var(--dur-slow) var(--ease); }
.anav a[aria-current="page"] { color: var(--forest); font-weight: var(--fw-sem); }
.anav a[aria-current="page"] .ic { transform: translateY(-2px); }
.anav a[aria-current="page"]::after {
  content: ""; position: absolute; bottom: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}

/* ---------- Lời chào ---------- */
.hello { padding-top: var(--s-2); }
.hello .eyebrow {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold); font-weight: var(--fw-sem);
}
.hello h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 600; line-height: 1.15; margin-top: var(--s-2);
  letter-spacing: -.015em;
}
.hello p { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: var(--s-2); line-height: 1.6; }

/* ---------- Thẻ mềm ---------- */
.acard {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  border: 1px solid var(--sand);
}
.acard.quiet { background: transparent; border-color: var(--sand); }
.acard.forest {
  background: var(--forest); color: var(--cream); border-color: var(--forest);
}
.acard.forest .muted { color: rgba(247,243,234,.7); }
.acard-h {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600;
  margin-bottom: var(--s-3);
}
.acard-sub { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; }

/* ---------- Chuỗi ngày ---------- */
.streak {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--forest); color: var(--cream);
  border-radius: var(--r-lg); padding: var(--s-5);
  position: relative; overflow: hidden;
}
.streak::after {
  content: ""; position: absolute; right: -30px; top: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,.28), transparent 68%);
  pointer-events: none;
}
.streak .sn {
  font-family: var(--font-display);
  font-size: 3rem; font-weight: 700; color: var(--gold);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.streak .st b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-sem); }
.streak .st span { font-size: var(--fs-xs); color: rgba(247,243,234,.72); line-height: 1.5; display: block; margin-top: 3px; }

/* ---------- Bước routine ---------- */
/* ---------- Buổi sáng còn dở (hiện sau 15h) ----------
   Giữ chỗ tick lại thay vì thay thế hẳn bằng khối tối. Thu gọn để việc
   của buổi hiện tại vẫn là thứ nổi nhất trên màn. */
.leftover {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-2, #FBF8F1); padding: var(--s-3) var(--s-4);
}
.leftover > summary {
  display: flex; align-items: center; gap: var(--s-3);
  cursor: pointer; list-style: none;
}
.leftover > summary::-webkit-details-marker { display: none; }
.leftover > summary b { font-size: var(--fs-sm); font-weight: var(--fw-med); display: block; }
.leftover > summary small { font-size: var(--fs-2xs); color: var(--ink-soft); display: block; margin-top: 2px; }
.leftover .lo-ic { flex: none; font-size: 15px; color: var(--gold); }
.leftover .caret { flex: none; color: var(--line-strong); transition: transform var(--dur) var(--ease); }
.leftover[open] .caret { transform: rotate(90deg); }

.steps { display: flex; flex-direction: column; gap: var(--s-2); }
.step {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--sand);
  border-radius: var(--r-md);
  width: 100%; text-align: left;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  min-height: 60px;
}
.step:hover { border-color: var(--gold-soft); }
.step .tick {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 14px; font-weight: 700;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.step[aria-pressed="true"] { background: #F6F8F5; border-color: #CFE0D4; }
.step[aria-pressed="true"] .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.step[aria-pressed="true"] .sname { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.step .grow { min-width: 0; }
.step .sname { font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: 1.35; display: block; }
.step .shint { font-size: var(--fs-2xs); color: var(--ink-soft); display: block; margin-top: 2px; line-height: 1.4; }
.step .sidx {
  width: 22px; font-size: var(--fs-2xs); color: var(--ink-soft); flex: none;
  font-variant-numeric: tabular-nums; text-align: center;
}

.timeblock + .timeblock { margin-top: var(--s-5); }
.timeblock-h {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.timeblock-h .tb-ic { font-size: 17px; color: var(--gold); }
.timeblock-h b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }
.timeblock-h .tb-n { margin-left: auto; font-size: var(--fs-2xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- Heatmap tuân thủ ---------- */
.heat { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.heat i {
  aspect-ratio: 1; border-radius: 3px; background: var(--sand);
  display: block;
}
.heat i[data-l="1"] { background: #D9E4DA; }
.heat i[data-l="2"] { background: #A9C6B1; }
.heat i[data-l="3"] { background: #6F9E7D; }
.heat i[data-l="4"] { background: var(--ok); }
.heat-legend { display: flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); color: var(--ink-soft); }
.heat-legend i { width: 11px; height: 11px; border-radius: 3px; display: block; }

/* ---------- Chỉ số Skin Scan ---------- */
.metrics { display: flex; flex-direction: column; gap: var(--s-4); }
.metric {
  display: flex; align-items: center; gap: var(--s-4);
}
.metric .mring { flex: none; }
.metric .mtxt { flex: 1; min-width: 0; }
.metric .mtxt b { font-size: var(--fs-sm); font-weight: var(--fw-med); display: block; }
.metric .mtxt small { font-size: var(--fs-2xs); color: var(--ink-soft); display: block; line-height: 1.45; margin-top: 2px; }
.delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: var(--fw-sem);
  font-variant-numeric: tabular-nums;
}
.delta.up { color: var(--ok); }
.delta.down { color: var(--risk); }
.delta.flat { color: var(--ink-soft); }

/* ---------- Thang 5 nấc có tên ----------
   Thay cho vòng tròn 0-100. Năm ô rời nói đúng độ phân giải của dữ liệu:
   đủ tin cho 5 nấc, không đủ cho 100 nấc. */
.lvl { display: flex; align-items: center; gap: var(--s-2); margin-top: 6px; }
.lvl-bars { display: flex; gap: 3px; flex: none; }
.lvl-bars i {
  display: block; width: 13px; height: 7px; border-radius: 2px;
  background: var(--sand);
}
.lvl-bars i.on { background: var(--gold); }
.lvl-name {
  font-size: var(--fs-xs); font-weight: var(--fw-sem); color: var(--ink);
}

/* ---------- Trục cân bằng dầu / khô ----------
   Thang cân bằng không có chiều tăng giảm — ở giữa mới là tốt, cả hai đầu
   đều không. Mũi tên ▲▼ không thể đúng với nó, nên đọc bằng VỊ TRÍ. */
.axis { margin-top: 8px; }
.axis-track {
  position: relative; height: 8px; border-radius: var(--r-full);
  background: linear-gradient(90deg, #DCC9AE 0%, var(--sand) 30%, var(--sand) 70%, #D8CBA6 100%);
}
.axis-mid {
  position: absolute; left: 34%; right: 34%; top: 0; bottom: 0;
  border-radius: var(--r-full); background: rgba(74, 124, 89, .22);
}
.axis-dot {
  position: absolute; top: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--forest); border: 2px solid var(--cream);
  box-shadow: var(--sh-1);
}
.axis-ends {
  display: flex; justify-content: space-between;
  font-size: var(--fs-2xs); color: var(--ink-soft); margin-top: 4px;
}
.axis-ends b { font-weight: var(--fw-sem); color: var(--ink); }

/* ---------- Nhật ký da (U5) ---------- */
.diary-wrap { }
.timeline-rail {
  display: flex; gap: var(--s-2); overflow-x: auto;
  padding: var(--s-2) 0 var(--s-3);
  scrollbar-width: none;
}
.timeline-rail::-webkit-scrollbar { display: none; }
.tnode {
  flex: 0 0 auto; min-width: 66px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--sand);
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 62px; justify-content: center;
}
.tnode .td { font-size: var(--fs-xs); font-weight: var(--fw-sem); font-variant-numeric: tabular-nums; }
.tnode .ts { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.tnode[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.tnode[aria-pressed="true"] .ts { color: var(--gold-soft); }
.tnode.pickA[aria-pressed="true"] { background: var(--ink-soft); border-color: var(--ink-soft); }

.diary-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--fs-2xs); color: var(--ink-soft);
}

/* ---------- Khung chụp ảnh (U3) ---------- */
.capture {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #1a1a18;
  aspect-ratio: 3/4;
}
.capture img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.capture .guide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.capture .oval {
  width: 62%; height: 72%;
  border: 2px dashed rgba(247,243,234,.78);
  border-radius: 50% 50% 46% 46%;
  box-shadow: 0 0 0 2000px rgba(15,36,28,.42);
}
.capture .oval.locked { border-style: solid; border-color: var(--gold); }
.capture .cap-hint {
  position: absolute; left: 0; right: 0; bottom: var(--s-4);
  text-align: center; color: var(--cream);
  font-size: var(--fs-xs); padding: 0 var(--s-5);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.capture .cap-count {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 5rem; color: var(--cream);
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
  animation: countpulse 1s var(--ease);
}
@keyframes countpulse { from { transform: scale(1.35); opacity: .4 } to { transform: scale(1); opacity: 1 } }
.capture .metaline {
  position: absolute; top: var(--s-3); left: var(--s-3); right: var(--s-3);
  display: flex; gap: 5px; flex-wrap: wrap;
}
.capture .metaline span {
  background: rgba(15,36,28,.62); color: var(--cream);
  font-size: 10px; padding: 3px 8px; border-radius: var(--r-full);
  backdrop-filter: blur(4px);
}
.shutter {
  width: 72px; height: 72px; border-radius: 50%;
  border: 4px solid var(--forest);
  background: var(--gold);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-2);
}
.shutter:active { transform: scale(.94); }

/* ---------- Serum (U7) ---------- */
.gauge-wrap { display: flex; align-items: center; gap: var(--s-5); }
.gauge { flex: none; position: relative; }
.gauge .gnum {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge .gnum b { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge .gnum span { font-size: var(--fs-2xs); color: var(--ink-soft); margin-top: 2px; }

.mech {
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.mech-row {
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-size: var(--fs-xs); padding: 5px 0;
}
.mech-row + .mech-row { border-top: 1px solid var(--line); }
.mech-row span:last-child { font-variant-numeric: tabular-nums; font-weight: var(--fw-sem); text-align: right; }

.subcard {
  border: 2px solid var(--gold);
  background: linear-gradient(160deg, #FDFBF5, var(--surface));
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.subcard.on { border-color: var(--ok); background: linear-gradient(160deg, #F4F8F4, var(--surface)); }

/* ---------- Điểm thưởng (U8) ---------- */
.pts-hero {
  background: var(--forest-deep); color: var(--cream);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
  text-align: center; position: relative; overflow: hidden;
}
.pts-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 50% 0%, rgba(201,169,97,.24), transparent 70%);
}
.pts-hero b {
  position: relative;
  font-family: var(--font-display); font-size: 3rem; color: var(--gold);
  display: block; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.pts-hero span { position: relative; font-size: var(--fs-xs); color: rgba(247,243,234,.75); }

.ptrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--sand);
}
.ptrow:last-child { border-bottom: 0; }
.ptrow .pv {
  font-variant-numeric: tabular-nums; font-weight: var(--fw-sem);
  font-size: var(--fs-sm); flex: none;
}

/* ---------- Onboarding / consent (U1) ---------- */
.onb {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-6)) var(--s-5) var(--s-6);
  max-width: var(--maxw-app); margin: 0 auto;
}
.onb-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: var(--s-6); }
.onb-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sand);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.onb-dots i.on { width: 22px; border-radius: var(--r-full); background: var(--gold); }
.onb h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6.5vw, 2.1rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -.015em;
}
.onb p { color: var(--ink-soft); line-height: 1.65; font-size: var(--fs-sm); margin-top: var(--s-3); }
.onb .grow { flex: 1; }

.consent-item {
  border: 1px solid var(--sand); border-radius: var(--r-md);
  padding: var(--s-4); background: var(--surface);
}
.consent-item + .consent-item { margin-top: var(--s-3); }
.consent-item h3 { font-size: var(--fs-sm); font-weight: var(--fw-sem); margin-bottom: 4px; }
.consent-item p { font-size: var(--fs-xs); color: var(--ink-soft); margin: 0; line-height: 1.6; }
.consent-item .req { font-size: var(--fs-2xs); color: var(--gold); font-weight: var(--fw-sem); }

/* ---------- Cộng đồng (U10) ---------- */
.post { border-bottom: 1px solid var(--sand); padding: var(--s-5) 0; }
.post:first-child { padding-top: var(--s-2); }
.post-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.post-head b { font-size: var(--fs-sm); font-weight: var(--fw-sem); }
.post-head small { font-size: var(--fs-2xs); color: var(--ink-soft); display: block; }
.post-cap { font-size: var(--fs-sm); line-height: 1.6; margin-top: var(--s-3); }
.post-acts { display: flex; gap: var(--s-4); margin-top: var(--s-3); align-items: center; }
.post-acts button {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--ink-soft); font-weight: var(--fw-med);
  min-height: 40px;
}
.post-acts button[aria-pressed="true"] { color: var(--risk); }
.post-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--s-3); }

.comment { display: flex; gap: var(--s-2); font-size: var(--fs-xs); padding: 5px 0; }
.comment b { font-weight: var(--fw-sem); flex: none; }

/* ---------- Academy (U12) ---------- */
.lesson {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border: 1px solid var(--sand); border-radius: var(--r-md);
  background: var(--surface); width: 100%; text-align: left;
}
.lesson + .lesson { margin-top: var(--s-2); }
.lesson .lnum {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--surface-2); border: 1px solid var(--sand);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-sem); color: var(--ink-soft);
}
.lesson.done .lnum { background: var(--ok); border-color: var(--ok); color: #fff; }
.lesson b { font-size: var(--fs-sm); font-weight: var(--fw-med); display: block; line-height: 1.4; }
.lesson small { font-size: var(--fs-2xs); color: var(--ink-soft); display: block; margin-top: 3px; line-height: 1.5; }

/* ---------- Liên kết spa (U9) ---------- */
.qrbox {
  aspect-ratio: 1; max-width: 240px; margin: 0 auto;
  border-radius: var(--r-lg); border: 2px solid var(--forest);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); position: relative; overflow: hidden;
}
.qrbox .scanline {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  animation: scanmove 2.4s var(--ease) infinite alternate;
}
@keyframes scanmove { from { top: 12% } to { top: 88% } }

/* ---------- Danh sách gọn ---------- */
.arow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--sand);
  width: 100%; text-align: left; text-decoration: none; color: inherit;
  min-height: 56px;
}
.arow:last-child { border-bottom: 0; }
.arow .grow { min-width: 0; }
.arow b { font-size: var(--fs-sm); font-weight: var(--fw-med); display: block; }
.arow small { font-size: var(--fs-2xs); color: var(--ink-soft); display: block; margin-top: 2px; line-height: 1.45; }
.arow .chev { color: var(--line-strong); flex: none; }

/* ---------- Nút chính ---------- */
.btn-app {
  min-height: 52px; border-radius: var(--r-full);
  font-size: var(--fs-md); font-weight: var(--fw-sem);
}

/* ---------- Ảnh minh hoạ ghi chú ---------- */
.illus-note {
  font-size: var(--fs-2xs); color: var(--ink-soft);
  text-align: center; line-height: 1.5;
}

/* ===========================================================
   ĐỘNG LỰC — chuỗi ngày, lá chắn, chế độ tối giản, hành trình
   =========================================================== */

/* ---------- Lá chắn trên thẻ chuỗi ngày ---------- */
.streak .grow { min-width: 0; }
.shields { display: flex; align-items: center; gap: 5px; margin-top: var(--s-3); }
.shields i {
  width: 13px; height: 15px; display: block; flex: none;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%);
}
.shields i.off { background: rgba(247, 243, 234, .22); }
.shields span { font-size: var(--fs-2xs); color: rgba(247, 243, 234, .72); margin-left: 3px; }
.streak-meter { height: 3px; border-radius: 2px; background: rgba(247, 243, 234, .2); margin-top: var(--s-3); overflow: hidden; }
.streak-meter i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }

/* ---------- Thông báo đã tiêu lá chắn ---------- */
.shield-note {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: #FDFBF5; border: 1px solid var(--gold-soft);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
}
.shield-note .sh-ic {
  width: 30px; height: 34px; flex: none; background: var(--gold);
  clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; padding-bottom: 5px;
}
.shield-note b { font-size: var(--fs-sm); display: block; }
.shield-note p { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }

/* ---------- Chế độ tối giản ---------- */
.easy-bar {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-3);
}
.easy-btn {
  font-size: var(--fs-2xs); color: var(--ink-soft);
  background: none; border: 1px dashed var(--line-strong);
  border-radius: var(--r-full); padding: 7px 13px; min-height: 34px;
}
.easy-btn:hover { border-color: var(--gold); color: var(--ink); }
.easy-on {
  display: flex; align-items: center; gap: var(--s-3);
  background: #F6F8F5; border: 1px solid #CFE0D4;
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
}
.easy-on b { font-size: var(--fs-xs); font-weight: var(--fw-sem); }
.easy-on small { font-size: var(--fs-2xs); color: var(--ink-soft); display: block; margin-top: 2px; }
.easy-on button { margin-left: auto; flex: none; }
.step.step-core .sidx { color: var(--gold); font-weight: 700; }

/* ---------- Hành trình 8 tuần ---------- */
.jrn-rail { display: flex; align-items: center; gap: 0; margin: var(--s-4) 0 var(--s-3); }
.jrn-seg { flex: 1; height: 4px; background: var(--sand); border-radius: 2px; overflow: hidden; }
.jrn-seg i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.jrn-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 2px solid var(--sand); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.jrn-dot.done { background: var(--gold); border-color: var(--gold); color: #fff; }
.jrn-dot.ready { border-color: var(--gold); color: var(--gold); border-style: solid; animation: pulse-dot 2.4s var(--ease) infinite; }
.jrn-labels { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--ink-soft); }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, .45); }
  55%      { box-shadow: 0 0 0 7px rgba(201, 169, 97, 0); }
}

/* Thẻ mở cặp ảnh — phần thưởng là bằng chứng, không phải điểm */
.unlock {
  position: relative; overflow: hidden; display: block; text-align: left; width: 100%;
  background: var(--forest); color: var(--cream);
  border: 0; border-radius: var(--r-lg); padding: var(--s-5);
}
.unlock::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 85% 10%, rgba(201, 169, 97, .34), transparent 62%);
  pointer-events: none;
}
.unlock .u-eyebrow { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.unlock .u-t { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; margin-top: 5px; display: block; }
.unlock .u-s { font-size: var(--fs-xs); color: rgba(247, 243, 234, .76); margin-top: 6px; line-height: 1.55; }
.unlock .u-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s-4);
  background: var(--gold); color: #2A2A26; font-weight: var(--fw-sem);
  font-size: var(--fs-sm); border-radius: var(--r-full); padding: 10px 18px; min-height: 42px;
}
.unlock .u-thumbs { position: absolute; right: -14px; bottom: -18px; display: flex; gap: 4px; opacity: .3; }
.unlock .u-thumbs img { width: 62px; height: 78px; object-fit: cover; border-radius: 6px; filter: blur(1px); }

.stage-note {
  background: #FDFBF5; border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-4); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--ink); font-style: italic;
}
.stage-note cite { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--ink-soft); margin-top: 7px; }

/* ---------- Chai serum như thanh tiến độ ---------- */
.bottle-wrap { display: flex; align-items: center; gap: var(--s-5); }
.bottle {
  width: 46px; height: 92px; flex: none; position: relative;
  border: 2px solid var(--line-strong); border-radius: 8px 8px 11px 11px;
  background: var(--surface); overflow: hidden;
}
.bottle::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: -9px; width: 17px; height: 9px;
  background: var(--line-strong); border-radius: 3px 3px 0 0;
}
.bottle i {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  transition: height var(--dur-slow) var(--ease);
}
.bottle.low i { background: linear-gradient(180deg, #D9A96B, #B8894A); }
.bottle b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; mix-blend-mode: luminosity;
}

/* ---------- Chọn cách xưng hô ---------- */
.tonepick {
  display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--sand);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tonepick:hover { border-color: var(--gold-soft); }
.tonepick.on { border-color: var(--gold); background: #FDFBF5; }
.tonepick .tp-head { display: flex; align-items: baseline; gap: var(--s-3); }
.tonepick .tp-head b { font-size: var(--fs-md); font-weight: var(--fw-sem); }
.tonepick .tp-head small { font-size: var(--fs-2xs); color: var(--ink-soft); }
.tonepick .tp-sample {
  display: block; margin-top: 6px;
  font-size: var(--fs-sm); color: var(--ink-soft);
  font-style: italic; line-height: 1.55;
}
.tonepick.on .tp-head b::after { content: " ✓"; color: var(--gold); }

/* ---------- Bối cảnh thời tiết ---------- */
.wx {
  display: flex; align-items: flex-start; gap: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--sand);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
}
.wx .grow { min-width: 0; }
.wx .wx-ic {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: #FBF3DF; color: #B8894A;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.wx b { font-size: var(--fs-sm); font-weight: var(--fw-sem); display: block; }
.wx > .grow > p { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 3px; line-height: 1.55; }
.wx .wx-src {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: var(--s-3); font-size: var(--fs-2xs); color: var(--ink-soft);
}
.wx .wx-note {
  font-size: var(--fs-2xs); color: var(--ink-soft);
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--sand);
  line-height: 1.5;
}
.src-wx { background: #FBF3DF; color: #8A6A33; border-color: #E8D9AE; }

/* ---------- Fade vào nhẹ nhàng ---------- */
.ascreen > * { animation: rise var(--dur-slow) var(--ease) backwards; }
.ascreen > *:nth-child(1) { animation-delay: 0ms }
.ascreen > *:nth-child(2) { animation-delay: 40ms }
.ascreen > *:nth-child(3) { animation-delay: 80ms }
.ascreen > *:nth-child(4) { animation-delay: 120ms }
.ascreen > *:nth-child(n+5) { animation-delay: 150ms }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .ascreen > * { animation: none; }
  .qrbox .scanline { animation: none; top: 50%; }
  .jrn-dot.ready { animation: none; box-shadow: 0 0 0 3px rgba(201, 169, 97, .25); }
  .bottle i { transition: none; }
}