/* ============ Thông tin chi tiết dưới mặt thư (details.js) ============
   Nằm trong tờ giấy .letter.paper (letter.css): cùng vân giấy, khung đôi kéo dài tới mép dưới mới. Mọi cỡ chữ, khoảng cách
   theo --u của lá thư (1u = 1% cạnh ngắn của mặt thư) → điện thoại, iPad, máy tính giống hệt nhau. Ô nhập giữ chữ ≥ 16px
   (iOS không phóng to khi chạm). Chiều cao .l-more do details.js đổi (0 → đủ) khi mở / thu. */
.l-more { position: relative; overflow: hidden; }
.dt-in { padding: 0 calc(8 * var(--u)) calc(13 * var(--u)); text-align: center; }
.letter.wide .dt-in { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(10 * var(--u)); align-items: start;
  padding: 0 calc(16 * var(--u)) calc(11 * var(--u)); }
.letter.wide .dt-sched, .letter.wide .dt-wish, .letter.wide .dt-foot { grid-column: 1 / -1; }

/* tiêu đề mỗi phần: hoa văn ép kim nhỏ + chữ nghiêng đỏ rượu như "Nhà trai", "Nhà gái" */
.dt-sec { padding-top: calc(9 * var(--u)); min-width: 0; }
.dt-sched { padding-top: calc(3 * var(--u)); }   /* ngay dưới hai nút của mặt thư (mặt thư đã chừa lề dưới) */
.letter .l-more .l-orn { width: calc(24 * var(--u)); margin: 0 auto; }
.dt-h { margin: calc(2.2 * var(--u)) 0 0; font: italic 400 calc(6.4 * var(--u))/1.2 var(--f-display); color: var(--head); }
.dt-sub, .dt-p { margin: calc(1.6 * var(--u)) auto 0; max-width: calc(78 * var(--u)); font: 400 calc(3.5 * var(--u))/1.5 var(--f-body); text-wrap: pretty; }
.dt-sub { font-style: italic; letter-spacing: .02em; }
.dt-dim { opacity: .72; font-style: italic; }
.dt-btns { margin: calc(3.6 * var(--u)) 0 0; display: flex; justify-content: center; }
.dt-btn { flex: none; }

/* ---- lịch trình: giờ · chấm · việc, đường chỉ ép kim dọc nối các chấm ---- */
.dt-tls { display: grid; gap: calc(6 * var(--u)); margin-top: calc(4.4 * var(--u)); }
.letter.wide .dt-tls.two { grid-template-columns: 1fr 1fr; column-gap: calc(12 * var(--u)); }
.dt-side { margin: 0; font: 500 calc(4.3 * var(--u))/1.25 var(--f-display); color: var(--head); letter-spacing: .02em; }
.dt-side span { color: var(--fm); }
.dt-at { margin: calc(.6 * var(--u)) 0 0; font: italic 400 calc(3.3 * var(--u))/1.4 var(--f-body); }
.dt-tl ol { list-style: none; margin: calc(3 * var(--u)) 0 0; padding: 0; text-align: left; }
/* giờ bên trái, chấm ở giữa (thẳng trục giữa thư), việc bên phải */
.dt-tl li { position: relative; display: grid; grid-template-columns: 1fr calc(7 * var(--u)) 1fr; align-items: center; min-height: calc(9 * var(--u)); }
.dt-tl time { font: 400 calc(5.2 * var(--u))/1 var(--f-display); font-variant-numeric: lining-nums tabular-nums; text-align: right; color: var(--ink); }
.dt-tl li > i { justify-self: center; width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); border-radius: 50%; position: relative; z-index: 1;
  background: linear-gradient(170deg, var(--fh), var(--fm) 45%, var(--fl)); box-shadow: 0 0 0 calc(.8 * var(--u)) var(--paper); filter: var(--deboss); }
/* đường chỉ nối: từ chấm này xuống chấm sau */
.dt-tl li:not(:last-child)::before { content: ""; position: absolute; left: calc(50% - .13 * var(--u)); top: 50%; height: 100%; width: calc(.26 * var(--u));
  min-width: 1px; background: linear-gradient(180deg, var(--fm), var(--fh)); opacity: .85; }
.dt-tl li span { font: 500 calc(3.9 * var(--u))/1.3 var(--f-body); letter-spacing: .01em; }

/* ---- form hồi âm / lời chúc (replies.js) trên giấy: cỡ theo --u thay vì px của bảng trượt ---- */
.l-more .dt-form { max-width: calc(80 * var(--u)); margin: calc(1.4 * var(--u)) auto 0; text-align: left; }
.l-more .sheet-p { margin: 0; font: 400 calc(3.5 * var(--u))/1.5 var(--f-body); text-align: center; text-wrap: pretty; }
.l-more .sheet-note { margin: calc(3 * var(--u)) 0 0; padding: calc(2.4 * var(--u)) calc(3 * var(--u)); border-radius: calc(2 * var(--u)); font: 400 calc(2.9 * var(--u))/1.5 var(--f-ui);
  background: rgba(150,100,40,.1); color: inherit; opacity: .85; }
.l-more .rp-fld { gap: calc(.6 * var(--u)); margin-top: calc(4 * var(--u)); }
.l-more .rp-fld > span, .l-more .rp-choice legend, .l-more .rp-guests { font: 500 calc(3 * var(--u))/1.3 var(--f-ui); letter-spacing: .03em; color: var(--ink); }
.l-more .rp-fld > span, .l-more .rp-choice legend { opacity: .78; }
.l-more .rp-fld input, .l-more .rp-fld textarea { font: 400 max(16px, calc(4 * var(--u)))/1.45 var(--f-body); color: var(--ink);
  border-color: color-mix(in srgb, var(--fm) 75%, transparent); padding: calc(1.2 * var(--u)) calc(.4 * var(--u)); }
.l-more .rp-fld textarea { padding: calc(2 * var(--u)) calc(2.4 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(255,252,244,.5); }
.l-more .rp-fld input:focus { border-color: var(--head); box-shadow: 0 1px 0 var(--head); }
.l-more .rp-fld textarea:focus { border-color: var(--head); box-shadow: 0 0 0 1px var(--head); }
.l-more .rp-count { font: 400 calc(2.6 * var(--u))/1.3 var(--f-ui); color: inherit; opacity: .7; }
.l-more .rp-choice { margin-top: calc(4.6 * var(--u)); }
.l-more .rp-choice legend { margin-bottom: calc(2 * var(--u)); }
.l-more .rp-opts { gap: calc(2 * var(--u)); }
.l-more .rp-opts label { min-height: max(44px, calc(10 * var(--u))); padding: calc(1.4 * var(--u)) calc(2 * var(--u)); border: calc(.3 * var(--u)) solid #6E0F1C;
  font: 500 calc(3.2 * var(--u))/1.25 var(--f-ui); color: var(--head); }
.l-more .rp-opts label:has(input:checked) { background: linear-gradient(170deg, #7A1422, #6E0F1C 45%, #600D19); border-color: #6E0F1C; color: #F7ECD8; }
.l-more .rp-guests { margin-top: calc(3.6 * var(--u)); }
.l-more .rp-step { gap: calc(1.6 * var(--u)); }
.l-more .rp-step button { width: max(40px, calc(9 * var(--u))); height: max(40px, calc(9 * var(--u))); border: calc(.3 * var(--u)) solid #6E0F1C; color: var(--head); font-size: calc(4.6 * var(--u)); }
.l-more .rp-step output { font: 400 calc(5.4 * var(--u))/1 var(--f-display); color: var(--ink); }
.l-more .rp-msg { margin-top: calc(2 * var(--u)); font: 400 calc(3 * var(--u))/1.45 var(--f-ui); color: inherit; }
.l-more .rp-msg.err { color: var(--head); }
.l-more .rp-msg:empty { margin: 0; }
/* nút gửi: viên thuốc đỏ rượu có chỉ ép kim như nút trên mặt thư */
.l-more .rp-send, .l-more .rp-acts .btn { min-height: max(44px, calc(10.4 * var(--u))); padding: 0 calc(5 * var(--u)); border-radius: 99em;
  font: 600 calc(3.6 * var(--u))/1.2 var(--f-body); letter-spacing: .04em; outline: calc(.3 * var(--u)) solid var(--fm); outline-offset: calc(-1.1 * var(--u)); }
.l-more .rp-send { width: 100%; margin-top: calc(5 * var(--u)); }
.l-more .btn.solid { color: #F7ECD8; border: 0; background: linear-gradient(170deg, #7A1422, #6E0F1C 45%, #600D19);
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) calc(-1.4 * var(--u)) rgba(60,10,15,.6); }
.l-more .btn.ghost { color: var(--head); border: 0; background: transparent; box-shadow: inset 0 0 0 calc(.32 * var(--u)) #6E0F1C; }
.l-more .btn:focus-visible, .l-more .rp-opts label:has(input:focus-visible) { outline: 2px solid #E2B866; outline-offset: 3px; }
.l-more .rp-done { padding: calc(2 * var(--u)) 0 0; }
.l-more .rp-done-h { margin: 0 0 calc(1.6 * var(--u)); font: 400 calc(9.6 * var(--u))/1.15 var(--f-script); color: #6E0F1C; }
.l-more .rp-sum { margin-top: calc(2.4 * var(--u)); font: 500 calc(3.1 * var(--u))/1.4 var(--f-ui); color: inherit; opacity: .8; }
.l-more .rp-acts { gap: calc(2 * var(--u)); margin-top: calc(4 * var(--u)); }
.l-more .rp-acts .btn { min-width: 0; }

/* ---- mừng cưới: chỗ hộp quà 3D (gift.js) nằm trên lớp vân giấy để màu và mã QR không bị vân phủ ---- */
.dt-gift { position: relative; z-index: 4; margin-top: calc(1.4 * var(--u)); }

/* ---- lời chúc: form + lời chúc mới nhất (trích ngắn, có tên) ---- */
.letter.wide .dt-wish-in { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(10 * var(--u)); align-items: start; }
.letter.wide .dt-wish .dt-form { margin-top: calc(3 * var(--u)); }
.dt-wishes { max-width: calc(80 * var(--u)); margin: calc(6 * var(--u)) auto 0; }
.letter.wide .dt-wishes { margin-top: calc(3 * var(--u)); }
.dt-wishes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(4 * var(--u)); }
.dt-wishes li { position: relative; padding-top: calc(4 * var(--u)); }
.dt-wishes li::before { content: ""; position: absolute; top: 0; left: 50%; width: calc(10 * var(--u)); height: calc(.26 * var(--u)); min-height: 1px; margin-left: calc(-5 * var(--u));
  background: linear-gradient(90deg, transparent, var(--fm), transparent); }
.dt-wishes li:first-child { padding-top: 0; }
.dt-wishes li:first-child::before { content: none; }
.dt-wq { margin: 0; font: italic 400 calc(3.6 * var(--u))/1.5 var(--f-body); quotes: "“" "”"; text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.dt-wq::before { content: open-quote; } .dt-wq::after { content: close-quote; }
.dt-wn { margin: calc(1.2 * var(--u)) 0 0; font: 600 calc(2.7 * var(--u))/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--head); }

/* ---- cuối thư: lời cảm ơn, tên hai bạn, ghi công nhạc + tiếng động (link vẫn bấm được) ---- */
.dt-foot { padding-top: calc(10 * var(--u)); }
.dt-thanks { margin: calc(3 * var(--u)) auto 0; max-width: calc(76 * var(--u)); font: italic 400 calc(3.7 * var(--u))/1.5 var(--f-body); text-wrap: balance; }
.dt-sign { margin: calc(1.4 * var(--u)) 0 0; font: 400 calc(7.4 * var(--u))/1.2 var(--f-script); color: #6E0F1C; }
.dt-sign .amp { font: italic 400 .55em/1 var(--f-display); color: var(--fm); }
.dt-credit { margin: calc(5 * var(--u)) auto 0; max-width: calc(80 * var(--u)); font: 400 calc(2.5 * var(--u))/1.55 var(--f-ui); opacity: .72; text-wrap: balance; position: relative; z-index: 4; }
.letter.wide .dt-credit { max-width: calc(120 * var(--u)); }
.dt-credit > span { display: inline-block; max-width: 100%; }
.letter.tall .dt-names { display: none; }   /* thư dọc: bỏ tên người thu tiếng động cho gọn (CC0 không bắt buộc ghi) */
.dt-credit a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }

/* ---- lớp thư khi đang mở: cuộn dọc (iOS cuộn có quán tính), không kéo trôi trang phía sau ---- */
.info.more { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* cuộn hết thì chừa lề dưới bằng lề trên (shell.js đặt --fill-gap) */
.info.more > .letter { margin-bottom: var(--fill-gap, 0px); }