/* ================= LỜI CHÚC CHÍNH — 5 kiểu để chọn =================
   Thẻ của engine bị tắt (`set({wish:0})`), app tự vẽ để còn đổi kiểu nhanh.
   Chốt kiểu nào thì bê vào photo-fx3.template.html rồi build lại player.html. */
.mywish{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  padding:0 4.6cqw 14cqh;container-type:inline-size}
.mywish::before{content:'';position:absolute;left:0;right:0;bottom:0;height:62cqh;z-index:-1;
  background:linear-gradient(to top,rgba(6,5,8,.88),rgba(6,5,8,.5) 42%,transparent)}
/* Cỡ tấm mờ sau chữ để ở ba biến này, đừng viết số thẳng vào inset: lằn quét lúc
   đổi lời chúc (.mw-sweep, app-bling.css) phải trùm ĐÚNG bằng tấm. Lệch một chút
   là lúc quét thấy hai mép sáng thò ra ngoài tấm, hoặc vệt sáng cụt trước khi tới
   mép tấm. Kiểu nào đổi cỡ tấm thì đổi ba biến, cả hai đi theo.
   --mw-mask là hình mép tan, cũng phải dùng chung nốt: đổi hình mặt nạ ở một bên
   thôi là lằn quét lại lệch khỏi tấm y như lần trước. */
/* --mw-blur là độ nhoè NỀN sau chữ. Để 0 là tấm chỉ còn hạ sáng, ảnh sau chữ giữ
   nguyên nét — đổi bằng một số ở trang dùng, khỏi chép lại cả khối backdrop-filter. */
.mywish{--mw-pt:3cqw;--mw-px:4cqw;--mw-pb:3cqw;--mw-blur:2.4cqw;
  --mw-mask:radial-gradient(118% 104% at 50% 58%,#000 34%,rgba(0,0,0,.6) 66%,transparent 100%)}
.mywish .mw-msg{margin:0;overflow:hidden;position:relative}   /* mặc định 4 dòng, trang LED có thể nới bằng JS */
.mywish .mw-tx{display:block;text-wrap:pretty}
.mywish .mw-en{display:block;margin-top:.45em;font-size:.5em;line-height:1.28;font-style:normal;font-family:var(--sans);
  font-weight:400;letter-spacing:.02em;color:rgba(247,242,232,.8);text-wrap:pretty}
.mywish .mw-en[hidden]{display:none}
/* dài hơn khung thì tự trôi lên rồi trôi về, --sc = phần dôi ra (px), --sd = thời gian một vòng.
   Trang tự tính --sd theo --sc bằng JS. Đừng viết lại kiểu calc(7s + var(--sc) * .07): giây cộng px
   là calc hỏng, cả khai báo animation rơi về none — câu dài bị cắt cụt ở dòng cuối, không cuộn
   (app khách dính đúng lỗi này từ 19/09 tới 24/09). */
.mywish .mw-msg.scrolling .mw-tx,
.mywish .mw-msg.scrolling .mw-en{animation:mw-scroll var(--sd,12s) ease-in-out infinite}
/* Lên và về phải cân nhau, bản cũ lên 40% mà về có 28% nên lúc về bị giật. */
@keyframes mw-scroll{
  0%,14%{transform:translateY(0)}
  50%,64%{transform:translateY(calc(var(--sc,0px) * -1))}
  100%{transform:translateY(0)}}

.mywish .mw-who{display:flex;align-items:center;gap:2.4cqw;margin-top:2.6cqw}
.mywish .mw-who .ln{height:1px;width:7cqw;background:var(--gold);flex:none}
.mywish .mw-who b{font:500 2.1cqw var(--sans);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2)}

/* 01 · Tấm mờ cục bộ — chữ vẫn nằm trần trên ảnh, nhưng ngay sau chữ có một tấm
   hạ sáng + làm nhoè, mép tan hết nên không thấy khung.
   Phần NHOÈ mới là chỗ ăn tiền: đá đính trên váy và kim tuyến của engine là nhiễu
   tần số cao, cắt vụn nét chân Cormorant — chỉ làm tối thôi thì không đủ.
   Đo trên ảnh Trevi (xem app-wish-readable.html): tương phản sau nét chữ 2.9 lên 9.9,
   phần diện tích chữ dưới ngưỡng đọc được 67% xuống 0%.
   Tấm nằm trong .mywish (z-10) nên nó mờ luôn cả tim vàng bay ở lớp z-8 phía sau chữ. */
.mywish.w1{--mw-pt:7cqw;--mw-px:6cqw;--mw-pb:5cqw}
.mywish.w1 .mw-in{position:relative}
.mywish.w1 .mw-in::before{content:'';position:absolute;z-index:-1;
  inset:calc(var(--mw-pt) * -1) calc(var(--mw-px) * -1) calc(var(--mw-pb) * -1);
  backdrop-filter:blur(var(--mw-blur)) brightness(var(--mw-dim,.42)) saturate(.88);
  -webkit-backdrop-filter:blur(var(--mw-blur)) brightness(var(--mw-dim,.42)) saturate(.88);
  -webkit-mask:var(--mw-mask);mask:var(--mw-mask)}
.mywish.w1 .mw-msg{font:italic 400 6cqw/1.34 var(--serif);color:var(--ink);
  text-shadow:0 .2cqw 1cqw rgba(0,0,0,.6)}
/* Máy không có backdrop-filter thì thay bằng vệt mực: vẫn tối đúng chỗ, mất phần nhoè. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mywish.w1{--mw-pt:5cqw;--mw-px:3cqw;--mw-pb:4cqw}
  .mywish.w1 .mw-in::before{
    background:radial-gradient(76% 128% at 50% 56%,rgba(5,4,8,.95),rgba(5,4,8,.62) 56%,transparent 78%);
    filter:blur(2.2cqw)}
}

/* 02 · Thẻ kính — bản hiện tại, bỏ nhãn + avatar */
.mywish.w2 .mw-in{padding:4.4cqw 4.8cqw;border-radius:4cqw;
  background:rgba(16,13,20,.42);border:1px solid rgba(243,222,163,.3);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 5cqw 10cqw -5cqw rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1)}
.mywish.w2 .mw-msg{font:400 5.4cqw/1.34 var(--serif);color:var(--ink)}

/* 03 · Băng giấy — dải thiệp ngà vắt ngang */
.mywish.w3{padding-left:0;padding-right:0}
.mywish.w3 .mw-in{position:relative;padding:5cqw 6cqw;text-align:center;
  background:linear-gradient(168deg,#f7f0e2,#ece0c9);
  box-shadow:0 5cqw 10cqw -6cqw rgba(0,0,0,.85)}
.mywish.w3 .mw-in::after{content:'';position:absolute;inset:1.6cqw;border:1px solid rgba(160,126,60,.45);pointer-events:none}
.mywish.w3 .mw-msg{font:italic 400 5.2cqw/1.38 var(--serif);color:#2f2619}
.mywish.w3 .mw-who{justify-content:center;margin-top:3cqw}
.mywish.w3 .mw-who .ln{background:rgba(47,38,25,.4)}
.mywish.w3 .mw-who b{color:rgba(47,38,25,.6)}

/* 04 · Trích dẫn — dấu ngoặc vàng, chữ canh giữa, không khung */
.mywish.w4{text-align:center}
.mywish.w4 .mw-in::before{content:'“';display:block;font:400 15cqw/.62 var(--serif);color:var(--gold2);opacity:.7}
.mywish.w4 .mw-msg{font:400 6.2cqw/1.3 var(--serif);color:var(--ink);
  text-shadow:0 .3cqw 1.4cqw rgba(0,0,0,.8)}
.mywish.w4 .mw-who{justify-content:center;margin-top:3.4cqw}
.mywish.w4 .mw-who .ln{width:5cqw}
.mywish.w4 .mw-who::after{content:'';height:1px;width:5cqw;background:var(--gold)}

/* 05 · Dải mảnh — kiểu lower-third, chừa hình nhiều nhất */
.mywish.w5{padding:0 0 12cqh}
.mywish.w5 .mw-in{display:flex;align-items:center;gap:4cqw;padding:3.4cqw 5cqw;
  background:rgba(8,7,10,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(243,222,163,.5)}
.mywish.w5 .mw-msg{flex:1;min-width:0;font:400 4.4cqw/1.32 var(--serif);color:var(--ink);order:2}
.mywish.w5 .mw-who{order:1;flex:none;margin:0;max-width:26cqw;padding-right:4cqw;border-right:1px solid rgba(243,222,163,.3)}
.mywish.w5 .mw-who .ln{display:none}
.mywish.w5 .mw-who b{font-size:2.3cqw;line-height:1.35;white-space:normal}

/* 06 · Khung vàng mảnh — chữ trong khung chỉ có nét viền, không nền */
.mywish.w6 .mw-in{position:relative;padding:5.4cqw 5.6cqw;text-align:center}
.mywish.w6 .mw-in::before{content:'';position:absolute;inset:0;border:1px solid rgba(243,222,163,.55)}
.mywish.w6 .mw-in::after{content:'';position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:26cqw;height:2px;background:linear-gradient(90deg,transparent,rgba(243,222,163,.9),transparent)}
.mywish.w6 .mw-msg{font:400 5cqw/1.36 var(--serif);color:var(--ink);
  text-shadow:0 .2cqw 1cqw rgba(0,0,0,.7)}
.mywish.w6 .mw-who{justify-content:center;margin-top:3cqw}

/* 07 · Chữ lớn — tên nhỏ nằm trên, chữ to tràn, không khung */
.mywish.w7 .mw-in{display:flex;flex-direction:column}
.mywish.w7 .mw-who{order:-1;margin:0 0 2.6cqw}
.mywish.w7 .mw-who .ln{display:none}
.mywish.w7 .mw-who b{font-size:2.3cqw}
.mywish.w7 .mw-msg{font:400 7.4cqw/1.18 var(--serif);color:var(--ink);letter-spacing:-.01em;
  text-shadow:0 .4cqw 1.6cqw rgba(0,0,0,.85)}

/* 08 · Cột trái — nép hẳn vào dải trống bên trái, chừa trọn cô dâu */
.mywish.w8{padding:0 4.6cqw 22cqh;display:flex}
.mywish.w8::before{background:linear-gradient(to top,rgba(6,5,8,.8),rgba(6,5,8,.35) 46%,transparent)}
.mywish.w8 .mw-in{width:44cqw;padding:4cqw 4.2cqw;border-radius:1cqw;
  background:linear-gradient(150deg,rgba(16,13,20,.5),rgba(16,13,20,.28));
  border-left:2px solid var(--gold);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mywish.w8 .mw-msg{font:italic 400 4.6cqw/1.4 var(--serif);color:var(--ink)}
.mywish.w8 .mw-who{margin-top:2.6cqw}
.mywish.w8 .mw-who .ln{width:4cqw}

/* 09 · Vệt mực — mảng tối mềm loang sau chữ, không có mép khung */
.mywish.w9 .mw-in{position:relative;padding:5cqw 5.4cqw;text-align:center}
.mywish.w9 .mw-in::before{content:'';position:absolute;inset:-2cqw -1cqw;z-index:-1;
  background:radial-gradient(70% 120% at 50% 55%,rgba(6,5,8,.92),rgba(6,5,8,.55) 62%,transparent);
  filter:blur(1.4cqw)}
.mywish.w9 .mw-msg{font:italic 400 5.6cqw/1.34 var(--serif);color:var(--ink)}
.mywish.w9 .mw-who{justify-content:center;margin-top:3cqw}

/* 10 · Hai dòng — tên trên, kẻ mảnh, lời chúc dưới, canh giữa */
.mywish.w10 .mw-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.mywish.w10 .mw-who{order:-1;margin:0 0 2.4cqw;flex-direction:column;gap:2cqw}
.mywish.w10 .mw-who .ln{width:16cqw;order:2;opacity:.75}
.mywish.w10 .mw-who b{order:1;font-size:2.4cqw;letter-spacing:.34em}
.mywish.w10 .mw-msg{font:400 5.8cqw/1.32 var(--serif);color:var(--ink);
  text-shadow:0 .3cqw 1.4cqw rgba(0,0,0,.8)}