/* ============================================================
   HÀNH TRÌNH CỦA MÌNH — diện mạo tạp chí, nền kem, accent xanh rêu (v2)
   ============================================================ */
.journey-box { padding-bottom: 120px; }
.jn-h { font-family: var(--serif); font-weight: 600; font-size: 32px; line-height: 1.12; color: var(--xanh-reu); margin: 10px 0 0; }
.jn-sub { font-size: 16.5px; line-height: 1.6; color: var(--nau-dat); margin-top: 10px; max-width: 330px; }
.backlink { background: none; border: none; padding: 6px 0; cursor: pointer; font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--nau-go); }

/* Tiêu đề nhóm: serif nghiêng + kẻ vàng mảnh */
.jn-group { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; }
.jn-group-t { display: inline-flex; align-items: center; gap: 6px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 20px; color: var(--nau-go); white-space: nowrap; }
.jn-group-l { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(196,155,90,.5), transparent); }
.jn-glist { display: grid; gap: 14px; }

/* Thẻ — bố cục: icon · nội dung · (mũi tên) */
.jn-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; border-radius: 22px; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.jn-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--vien); }
.jn-ic-on { background: rgba(255,255,255,.12); border-color: rgba(216,182,121,.4); }
.jn-cbody { flex: 1; min-width: 0; }
.jn-arrow { flex: 0 0 auto; color: var(--nau-dat-nhat); font-size: 24px; line-height: 1; }

/* Thẻ chưa bắt đầu (gọn): icon + ngày nhỏ + tên serif lớn + › */
.jn-simple { background: var(--trang-nga); border: 1px solid var(--vien); box-shadow: 0 12px 26px -20px var(--bong); }
.jn-simple:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -22px var(--bong); }
.jn-days2 { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--nau-go); }
.jn-simple .jn-name { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.14; color: var(--xanh-reu); margin-top: 2px; }
.jn-done2 { display: inline-block; margin-top: 4px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--xanh-reu-nhat); }

/* Thẻ đang đi (nổi, nền xanh rêu) */
.jn-card.jn-on { align-items: flex-start; background: linear-gradient(165deg, #66785A, #4C5A40); border: 1px solid rgba(216,182,121,.3); box-shadow: 0 22px 44px -24px rgba(82,93,65,.7); }
.jn-tagrow { display: flex; align-items: center; gap: 8px; }
.jn-days { font-size: 13px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; color: var(--vang-sang); background: rgba(255,255,255,.1); border: 1px solid rgba(216,182,121,.35); padding: 3px 10px; border-radius: 20px; }
.jn-with { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--vang-sang); }
.jn-name-on { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.15; color: #FAF9F5; margin-top: 6px; }
.jn-prog { margin-top: 12px; }
.jn-prog-row { font-size: 13px; color: var(--vang-sang); font-weight: 600; margin-bottom: 6px; }
.jn-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.14); overflow: hidden; }
.jn-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--vang-sang), var(--vang)); }

/* ---------- Màn một ngày ---------- */
.jn-day-eyebrow { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--vang); font-weight: 700; margin-top: 6px; }
.jn-day-ic { display: flex; justify-content: center; margin: 16px 0 2px; }
.jn-circle { width: 64px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.jn-day-h { font-family: var(--serif); font-weight: 600; font-size: 36px; line-height: 1.05; color: var(--xanh-reu); margin: 6px 0 0; text-align: center; }

/* Hàng chấm tiến độ */
.jn-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 300px; margin: 16px auto 4px; }
.jn-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(149,110,66,.22); transition: transform .2s; }
.jn-dot-done { background: var(--vang); opacity: .5; }
.jn-dot-cur { background: var(--vang); transform: scale(1.35); box-shadow: 0 0 0 3px rgba(196,155,90,.18); }

/* Câu thầm thì — pull-quote, điểm tựa thị giác */
.jn-quote { margin: 26px 0 4px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--nau-dat); text-align: center; padding: 0 6px; }

.jn-sec { margin-top: 24px; }
.jn-sec-cap { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vang); font-weight: 700; }
.jn-sec-cap svg { stroke: var(--vang); }
.jn-sec-body { font-size: 16px; line-height: 1.65; color: var(--nau-dat); margin-top: 8px; }
.jn-sec-body.jn-ital { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--nau-dat); }

/* Khung "cùng nhau tối nay" + "câu tự nhủ" = nền xanh rêu (điểm nhấn) */
.jn-together, .jn-mantra { margin-top: 24px; border-radius: 20px; padding: 20px 20px; background: linear-gradient(165deg, #66785A, #4C5A40); box-shadow: 0 20px 40px -26px rgba(82,93,65,.7); }
.jn-together-cap, .jn-mantra-cap { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vang-sang); font-weight: 700; }
.jn-together p { font-size: 16px; line-height: 1.6; color: #FAF9F5; margin-top: 8px; }
.jn-mantra { text-align: center; padding: 22px 20px; }
.jn-mantra-q { display: block; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.5; color: #FAF9F5; margin-top: 10px; }

.jn-practice { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; margin-top: 26px;
  background: linear-gradient(135deg, #7E9067, var(--xanh-reu)); box-shadow: 0 14px 26px -12px rgba(82,93,65,.6); }
.jn-donenote { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; font-size: 15.5px; color: var(--xanh-reu-nhat); font-style: italic; }
.jn-nav { display: flex; justify-content: space-between; margin-top: 22px; }
.jn-navbtn { background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--nau-dat-nhat); padding: 6px 2px; }
.jn-navbtn:hover { color: var(--xanh-reu); }

/* Lối vào trong "Cho mình" + Hôm Nay */
.jn-entry { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; margin: 10px 0 16px; padding: 13px 16px; border-radius: 20px; cursor: pointer;
  background: linear-gradient(160deg, #66785A, #4C5A40); border: 1px solid rgba(216,182,121,.3); box-shadow: 0 16px 32px -22px rgba(82,93,65,.7); }
.jn-entry .je-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(150,168,120,.32); border: 1px solid rgba(150,168,120,.55); }
.jn-entry .je-tx { flex: 1; min-width: 0; }
.jn-entry .je-t { display: block; font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.15; color: #FAF9F5; }
.jn-entry .je-s { display: block; font-size: 13px; line-height: 1.55; color: var(--vang-sang); margin-top: 3px; }
.jn-entry .je-ar { margin-left: auto; color: var(--vang-sang); font-size: 19px; }

/* Dải nhắc "đang đi" trên màn Hôm Nay (mảnh, không tranh chỗ việc hằng ngày) */
.jn-strip { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 14px 0 4px; padding: 12px 16px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(160deg, #fbf7ee, #f1e6d2); border: 1px solid rgba(196,155,90,.4); box-shadow: 0 12px 24px -18px var(--bong); transition: transform .18s; }
.jn-strip:active { transform: scale(.99); }
.jn-strip-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); border: 1px solid var(--vien); }
.jn-strip-tx { flex: 1; min-width: 0; }
.jn-strip-l { display: block; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vang); font-weight: 700; }
.jn-strip-n { display: block; font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--xanh-reu); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-strip-go { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--nau-go); }

/* Biểu tượng khoá trên thẻ hành trình chưa mở (trả phí) */
.jn-lock { flex: 0 0 auto; display: flex; color: var(--nau-dat-nhat); opacity: .65; }

/* iOS Safari: ép cỡ icon trong lối vào "Hành trình của mình" + dải nhắc */
.jn-entry .je-ic svg { width: 22px; height: 22px; stroke: #CBD7AE; }
.jn-strip-ic svg { width: 18px; height: 18px; }

/* Xem trước hành trình trước khi trả hạt (2026-07-07) */
.jn-toc{margin-top:4px;border:1px solid var(--vien);border-radius:14px;overflow:hidden}
.jn-toc-row{display:flex;gap:10px;align-items:baseline;padding:9px 13px;font-size:14px;color:var(--nau-dat);border-bottom:1px solid var(--vien)}
.jn-toc-row:last-child{border-bottom:none}
.jn-toc-days{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--xanh-reu);letter-spacing:.02em;min-width:80px}
.jn-preview{margin-top:16px;padding:14px 15px;border:1px solid var(--vien);border-radius:16px;background:var(--kem)}
.jn-preview-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--nau-go);margin-bottom:6px}
.jn-freehint{text-align:center;font-size:12.5px;color:var(--nau-dat-nhat);margin-top:9px;line-height:1.5}

/* 02/09/2026 — hạt táo & nhập mã cũng là MỘT CÁCH TRẢ THẬT, không phải chữ nhỏ
   dễ bỏ qua. Anh Phúc: "trân trọng... sau này bán mã thẻ cũng thanh toán được
   dễ dàng, tránh người ta thấy khó thấy." Vay khuôn nút viền đã có (.vc-ghiten-nut
   bên vochong.css) — đậm, bo tròn, không đặc — cho hai lựa chọn này một chỗ đứng
   đàng hoàng ngay dưới nút tiền thật, không còn là dòng chữ gạch chân bé tí. */
.jn-phu-nut{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:10px;padding:14px 16px;min-height:52px;background:none;border:1.6px solid rgba(149,110,66,.55);border-radius:30px;color:#6E4A1E;font-family:var(--sans);font-size:15.5px;font-weight:700;cursor:pointer;text-align:center}
.jn-phu-nut svg{flex:0 0 auto;width:19px;height:19px}
.jn-phu-nut:active{transform:scale(.985);background:rgba(149,110,66,.08)}

/* ══════════════════════════════════════════════════════════════════════
   THẺ NGÀY CỦA HÀNH TRÌNH — dùng lại khuôn .vc-* của bộ Tình Thân
   (28/08/2026, anh Phúc: "làm giống như cấu trúc của tình thân luôn").

   Bên Tình Thân .vc-detail là một thẻ NỔI đè lên màn hình: có đổ bóng,
   có viền, cao tối đa 88vh và tự cuộn bên trong. Thẻ ngày của hành trình
   thì nằm THẲNG trong trang, nên phải gỡ mấy tính chất đó ra — để nguyên
   là sinh ra ô cuộn lồng trong ô cuộn, ngón tay kéo không biết trúng cái
   nào. Khối này CHỈ gỡ, không vẽ lại gì mới.

   🔴 Ăn được là nhờ journey.css nạp SAU vochong.css trong index.html.
   Đổi thứ tự hai thẻ <link> đó thì thẻ ngày vỡ ngay.
   ══════════════════════════════════════════════════════════════════════ */
.jn-detail {
  max-width: 100%;
  max-height: none;          /* bỏ ô cuộn lồng nhau */
  overflow-y: visible;
  box-shadow: none;
  border: 1px solid var(--vien);
  margin-top: 14px;
}
/* Chấm tiến độ và hai nút lật ngày phải lùi vào bằng phần nội dung,
   vì .vc-detail đã bỏ hết lề trong (padding: 0 0 34px). */
.jn-detail .jn-dots { margin: 16px 22px 2px; }
.jn-detail .jn-nav { margin: 18px 22px 0; }

/* Tiêu đề mục bên Tình Thân đi kèm nhãn tiếng Anh nên có khoảng cách hai
   bên; ở đây chỉ có tiếng Việt, bỏ khoảng trống thừa cho chữ đứng sát vạch. */
.jn-detail .vc-sec-h { gap: 0; }

/* Trong lúc đang đọc một thẻ ngày thì giấu hai nút tròn nổi đi.
   Vì sao: hai nút đó neo cố định ở góc phải dưới màn (skin2.css:1418-1419),
   nên chữ trong thẻ CUỘN NGANG QUA DƯỚI chúng — chừa lề bao nhiêu cũng
   không cứu được, dòng nào trôi tới đó cũng bị che. Đo thật 28/08/2026:
   .msg-btn rộng 109px, ăn mất 105px bên phải của thẻ rộng 436px.

   Đây KHÔNG phải tắt nút nổi cho tiện: bộ Tình Thân đang làm y hệt, chỉ là
   nó làm bằng cách khác — thẻ ngày của nó là lớp phủ toàn màn nên nằm ĐÈ
   lên hai nút đó. Thẻ này nằm thẳng trong trang nên phải nói rõ ra bằng CSS.
   Rời thẻ ngày là hai nút trở lại ngay, vì luật chỉ ăn khi màn hành trình
   đang mở VÀ trong đó đang có một thẻ ngày.

   🔴 05/09/2026 — thêm #s-garden vào cùng luật (xem bản thật trong
   App_Aura/src/styles/aocu/07-journey.css — file NÀY đã chết, chỉ chép lại
   cho khỏi lệch, xem [[reference-app-moi-va-cu-dung-chung-js-rieng-css]]).
   vochong.js (Tình Thân) đã bỏ lớp phủ toàn màn, nay vẽ thẳng thẻ ngày vào
   #deckTinhThan BÊN TRONG #s-garden chứ không phải #s-journey. */
body:has(#s-journey.active .jn-detail) .msg-btn,
body:has(#s-journey.active .jn-detail) .sos-btn,
body:has(#s-garden.active .jn-detail) .msg-btn,
body:has(#s-garden.active .jn-detail) .sos-btn { display: none; }