/* Cảnh 2–6 của trang chiến dịch: bàn đèn, ba trang mẫu, ba vé, góc của bạn. Giá trị lấy từ shared/tokens.css.
   Mỗi phần tử chuyển động chỉ đổi transform/opacity. */

/* ---------- Cảnh 2–3: bàn đèn ---------- */
.desks { position: relative; overflow-x: clip; }
.desks__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); padding-block: var(--section) var(--sp-8); }
.desks__copy { display: grid; gap: var(--sp-7); width: 100%; max-width: var(--max); margin-inline: auto; }
.desks__say { display: grid; gap: var(--sp-3); align-content: start; }
.desks__say h2 { max-width: 15ch; }
.desks__say .t-lead { color: var(--cr-muted); max-width: 30ch; }
/* Mặt sàn nghiêng: hộp .desks__floor có đúng tỉ lệ của phần nhìn thấy sau khi nghiêng, mặt bàn đặt sát đáy hộp
   (nghiêng quanh mép dưới), nên bố cục không bị khoảng trống thừa phía trên. */
.desks__floor { --fw: min(112vw, 600px); position: relative; width: var(--fw); aspect-ratio: 1 / .86; margin-inline: calc((100% - var(--fw)) / 2); perspective: 900px; perspective-origin: 50% 10%; }
.desks__plane {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2.4vw, 22px);
  padding: 3.5%; border-radius: var(--r-xs);
  transform: rotateX(40deg); transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg, rgb(255 235 199 / .018) 0 1px, transparent 1px 34px), #13100d;
  box-shadow: inset 0 0 0 1px rgb(242 237 227 / .04), 0 40px 80px -30px rgb(0 0 0 / .9);
}
/* Ghim theo cuộn: cả cảnh vừa một màn, hai câu chồng cùng một chỗ và thay nhau. */
.desks[data-mode="scroll"] .desks__stage {
  height: 100svh; overflow: hidden; align-content: start; grid-template-rows: auto minmax(0, 1fr);
  padding-block: max(84px, 11svh) var(--sp-5);
}
.desks[data-mode="scroll"] .desks__copy { grid-template-areas: "say"; }
.desks[data-mode="scroll"] .desks__say { grid-area: say; }
.desks[data-mode="scroll"] .desks__say--b { opacity: 0; }
.desks[data-mode="scroll"] .desks__floor { --fw: min(112vw, 600px, calc((100svh - 350px) / .86)); align-self: center; }
@media (min-width: 1024px) {
  .desks__stage { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
  .desks__copy { padding-inline: 0; }
  .desks__floor { --fw: min(100%, 860px); aspect-ratio: 2 / 1.05; }
  .desks__plane { grid-template-columns: repeat(4, minmax(0, 1fr)); transform: rotateX(42deg); }
  .desks[data-mode="scroll"] .desks__stage { grid-template-rows: none; align-content: center; }
  .desks[data-mode="scroll"] .desks__floor { --fw: min(100%, 860px, calc((100svh - 140px) * 1.9)); }
}

.desk { position: relative; aspect-ratio: 1 / 1.16; }
@media (min-width: 1024px) { .desk { aspect-ratio: 1 / .95; } }
.desk__chair {
  position: absolute; left: 30%; right: 30%; bottom: 0; height: 19%;
  border-radius: 8px 8px 12px 12px; background: #24201b; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .35);
}
.desk__top {
  position: absolute; inset: 6% 4% 17% 4%; border-radius: 5px;
  background: repeating-linear-gradient(100deg, rgb(255 235 199 / .03) 0 2px, transparent 2px 9px), linear-gradient(160deg, #2f2217, #21170f);
  box-shadow: 0 12px 18px -10px rgb(0 0 0 / .85), inset 0 1px 0 rgb(255 235 199 / .05);
}
/* Vũng sáng rọi xuống giữa mặt bàn, đúng chỗ món đồ nằm (không chỉ ôm quanh chụp đèn). */
.desk__pool {
  position: absolute; inset: -14% -16% 2% -16%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 70% 60% at 47% 52%, rgb(255 222 140 / .6) 0%, rgb(242 193 78 / .2) 46%, rgb(242 193 78 / 0) 74%);
}
.desk__lamp { position: absolute; z-index: 2; right: 7%; top: 6%; width: 21%; aspect-ratio: 1; }
.desk__arm { position: absolute; right: 50%; top: -24%; width: 3px; height: 60%; border-radius: 2px; background: #0c0b0a; transform: rotate(32deg); transform-origin: 50% 100%; }
.desk__shade { position: absolute; inset: 6%; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #45403a, #0e0d0b 68%); box-shadow: 0 5px 9px rgb(0 0 0 / .65); }
.desk__bulb {
  position: absolute; inset: -70%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgb(255 244 220) 0 24%, rgb(255 214 120 / .62) 32%, rgb(242 193 78 / .18) 50%, rgb(242 193 78 / 0) 70%);
}
/* Món đồ: bản xám (có sẵn, mờ trong tối) và bản màu chồng lên nhau; đèn bật thì cả món sáng lên, rồi bản màu hiện. */
.desk__thing { position: absolute; z-index: 1; left: 11%; top: 13%; width: 78%; aspect-ratio: 1; opacity: .28; transform: rotate(var(--rot, 0deg)); }
@media (min-width: 1024px) { .desk__thing { left: 16%; top: 9%; width: 66%; } }
.desk__gray, .desk__color { position: absolute; inset: 0; }
.desk__color { opacity: 0; }
.desk__thing svg { width: 100%; height: 100%; overflow: visible; }
.desks[data-mode="static"] :is(.desk__bulb, .desk__pool, .desk__thing, .desk__color) { opacity: 1; }

/* ---------- Cảnh 4: ba trang mẫu ---------- */
.samples { padding-block: var(--section) 0; }
.samples__head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.samples__head h2 { max-width: 17ch; }
.samples__table {
  position: relative; padding-block: var(--sp-8);
  background:
    radial-gradient(ellipse 60% 34% at 50% 18%, rgb(255 214 120 / .16), rgb(255 214 120 / 0) 70%),
    linear-gradient(90deg, rgb(0 0 0 / .5), rgb(0 0 0 / 0) 16%, rgb(0 0 0 / 0) 84%, rgb(0 0 0 / .5)),
    repeating-linear-gradient(90deg, rgb(255 235 199 / .02) 0 1px, transparent 1px 7px),
    linear-gradient(var(--cr-wood), #1d140d);
  box-shadow: inset 0 18px 30px -18px rgb(0 0 0 / .9), inset 0 -18px 30px -18px rgb(0 0 0 / .9);
}
/* Điện thoại: ba tấm rải so le trái/phải và chồng lên nhau một chút, mỗi màn thấy khoảng một tấm rưỡi để so được
   ba trang khác nhau. Chú thích nằm ở khoảng trống bên cạnh tấm, như mẩu giấy ghi kế ảnh trên bàn. */
.samples { overflow-x: clip; } /* tấm xoay nghiêng ở mép phải không tạo thanh cuộn ngang */
.samples__list { --card: min(66vw, 340px); display: grid; }
.samples .samples__list { padding-inline: var(--gut); } /* thắng reset ul[role=list] { padding: 0 } của base.css */
.samples__list > li { display: grid; min-width: 0; }
.samples__list > li:nth-child(odd) { justify-items: start; }
.samples__list > li:nth-child(even) { justify-items: end; }
.samples__list > li + li { margin-top: calc(var(--card) * -0.26); } /* khoảng 18% chiều cao tấm */
.sample { position: relative; display: grid; width: var(--card); color: var(--cr-paper); }
.sample__cap { position: absolute; top: 58%; width: calc(100cqw - var(--card) - var(--sp-4)); }
li:nth-child(odd) > .sample .sample__cap { left: calc(100% + var(--sp-4)); text-align: left; }
li:nth-child(even) > .sample .sample__cap { right: calc(100% + var(--sp-4)); text-align: right; }
.samples__list { container-type: inline-size; }
@media (min-width: 1024px) {
  .samples__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); align-items: start; }
  .samples__list > li, .samples__list > li:nth-child(n) { justify-items: center; }
  .samples__list > li + li { margin-top: 0; }
  .sample { justify-items: center; gap: var(--sp-4); width: 100%; max-width: 360px; }
  .sample .sample__cap, li:nth-child(n) > .sample .sample__cap { position: static; width: auto; text-align: center; }
}
.sample__print { display: block; width: 100%; padding: 6px; border-radius: var(--r-paper); background: var(--cr-print); box-shadow: var(--shadow-lift); transform: rotate(var(--rot, 0deg)); }
.sample__lift { display: block; transition: transform var(--d-ui) var(--ease-out); }
/* Nhấn lún nhanh 140ms; trên máy có chuột thì lún ngay tại chỗ đang nhấc, không rơi về chỗ cũ. */
.sample:active .sample__lift { transform: scale(.97); transition-duration: var(--d-press); }
@media (hover: hover) and (pointer: fine) {
  .sample:hover .sample__lift { transform: translateY(-8px) rotate(calc(var(--rot, 0deg) * -1)); }
  .sample:hover:active .sample__lift { transform: translateY(-8px) rotate(calc(var(--rot, 0deg) * -1)) scale(.97); transition-duration: var(--d-press); }
}
/* Giảm chuyển động: bỏ nhấc và xoay khi rê chuột, chỉ giữ lún nhẹ khi nhấn (như nút chung). */
@media (prefers-reduced-motion: reduce) { .sample:hover .sample__lift { transform: none; } .sample:hover:active .sample__lift { transform: scale(.97); } }
[data-motion="reduce"] .sample:hover .sample__lift { transform: none; }
[data-motion="reduce"] .sample:hover:active .sample__lift { transform: scale(.97); }
.sample__page { position: relative; display: block; aspect-ratio: 3 / 4.3; overflow: hidden; border-radius: 1px; background: var(--you-bg); color: var(--you-text); container-type: inline-size; }
.sample__fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 800 3rem/1 var(--font-display); color: var(--cr-dim); }
.sample__cap { font: 450 var(--fs-label)/1.5 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--cr-muted); text-wrap: balance; }
.sample__cap b { margin-right: .45em; color: var(--cr-lamp); font-weight: 500; }
/* Mỗi mục là một khối không ngắt, dấu "·" đi cuối mục đứng trước: xuống dòng thì dòng mới bắt đầu bằng chữ (cùng cách với dải phiếu ở trang khách). */
.sample__cap span { white-space: nowrap; }
.sample__cap span:first-child { white-space: normal; } /* tên dài (khách gõ cả họ) vẫn được xuống dòng giữa các chữ */
.sample__cap span:not(:last-child)::after { content: "\00a0·"; }
/* Dưới 600px chỗ cạnh tấm chỉ rộng 60–190px: mỗi mục một dòng, bỏ dấu chấm, lấn nửa lề cho rộng thêm.
   Mục dài vẫn được xuống dòng; dòng nối sát hơn khoảng cách giữa hai mục để vẫn đọc ra là một mục. */
@media (max-width: 599px) {
  .sample__cap { width: calc(100cqw - var(--card) - var(--sp-4) + var(--gut) / 2); }
  .sample__cap span, .sample__cap span:first-child { display: block; white-space: normal; line-height: 1.2; }
  .sample__cap span + span { margin-top: .55em; }
  .sample__cap span:not(:last-child)::after { content: none; }
}
.sample.is-waiting [data-jig] { opacity: 0; }

/* Trang thu nhỏ: cỡ tính theo bề rộng tấm (cqw) nên ở khổ nào cũng giữ đúng bố cục. */
.mini { position: absolute; inset: 0; display: block; padding: 7cqw; font-family: var(--font-body); }
.mini__tag { display: block; font: 450 3.2cqw/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--you-muted); }
.mini__name { display: block; margin-top: 3cqw; font-size: 30cqw; color: var(--you-1); }
.mini--poster .mini__name { margin-top: 8cqw; font-size: 31cqw; }
.mini__drops { --drop: 13cqw; margin-top: 4cqw; }
.mini__whisper { display: block; max-width: 52cqw; margin-top: 5cqw; font: italic 400 7cqw/1.2 var(--font-whisper); color: var(--you-text); }
.mini__photo { display: block; padding: 1.8cqw 1.8cqw 5cqw; background: var(--cr-print); box-shadow: 0 2cqw 4cqw rgb(0 0 0 / .3); }
.mini__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mini__photo--poster { position: absolute; right: 7cqw; bottom: 27%; width: 31cqw; transform: rotate(5deg); }
.mini__sky { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; display: flex; flex-direction: column; }
.mini__sky i { flex: var(--h) 1 0; background: var(--c); }
.mini__lock { position: absolute; left: 7cqw; bottom: calc(22% + 4cqw); max-width: 52cqw; line-height: 1.3; padding: 1.6cqw 3cqw; border-radius: var(--r-pill); font: 500 3cqw/1 var(--font-label); letter-spacing: .04em; text-transform: uppercase; background: var(--you-text); color: var(--you-bg); }
.mini--desk .mini__name { font-size: 22cqw; }
.mini__desk { position: absolute; left: 0; right: 0; bottom: 0; height: 63%; background: repeating-linear-gradient(100deg, rgb(255 235 199 / .03) 0 1px, transparent 1px 6px), linear-gradient(170deg, #2e2116, #1b130b); }
/* Vũng đèn phủ cả cuốn sổ lẫn xấp thẻ màu (đồ của khách đều nằm dưới đèn). */
.mini__pool { position: absolute; inset: -14% 0 0; background: radial-gradient(ellipse 74% 64% at 50% 40%, rgb(255 214 120 / .34), rgb(242 193 78 / .1) 50%, rgb(242 193 78 / 0) 76%); }
.mini__book {
  position: absolute; left: 8cqw; top: 8cqw; width: 50cqw; aspect-ratio: 3 / 3.8; padding: 6cqw 4cqw 4cqw 9cqw;
  border-radius: 1cqw 2.4cqw 2.4cqw 1cqw; background: var(--you-1-lit); color: #13110e; transform: rotate(-5deg);
  box-shadow: inset 4.5cqw 0 0 rgb(0 0 0 / .2), 0 3cqw 6cqw rgb(0 0 0 / .5);
  font: 400 5cqw/1.32 var(--font-you);
}
.mini__crt { position: absolute; right: 6cqw; top: 5cqw; width: 34cqw; aspect-ratio: 4 / 3.5; padding: 3cqw; border-radius: 3cqw; background: #cfc6b3; transform: rotate(4deg); box-shadow: 0 3cqw 6cqw rgb(0 0 0 / .55); }
.mini__crt span {
  display: grid; place-items: center; height: 100%; padding: 2cqw; border-radius: 2cqw; text-align: center;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / .28) 0 1px, transparent 1px 3px), radial-gradient(#1e4b45, #0b1d1a);
  font: 400 3.5cqw/1.25 var(--font-label); color: #7fd1c3;
}
/* Xấp thẻ mẫu màu bằng giấy: --x, --y, --a do chips() trong sample-pages-fan.js tính (xoè như trang khách và thẻ 9:16). */
.mini__chips { position: absolute; right: 9cqw; bottom: 8cqw; width: 30cqw; height: 26cqw; }
.mini__chip {
  position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; width: 11cqw; height: 22cqw; margin: -11cqw 0 0 -5.5cqw;
  padding: .9cqw; border-radius: .7cqw; background: var(--cr-print); box-shadow: 0 1.2cqw 2.4cqw rgb(0 0 0 / .45);
  transform: translate(var(--x), var(--y)) rotate(var(--a));
}
.mini__chip i { flex: 0 0 68%; border-radius: .4cqw; background: var(--c); }
.mini__chip b { margin-top: 1.5cqw; font: 500 2.4cqw/1 var(--font-label); letter-spacing: .04em; color: var(--cr-print-ink); }
.mini--wall { background: radial-gradient(ellipse 80% 38% at 50% 0%, rgb(255 214 120 / .16), rgb(255 214 120 / 0) 70%); }
.mini__pins { position: absolute; inset: 47% 6cqw 6cqw; }
.mini__pins .mini__photo { position: absolute; left: 0; top: -4cqw; width: 40cqw; transform: rotate(-6deg); }
.mini__tape { position: absolute; top: -2.4cqw; left: 50%; width: 16cqw; height: 5cqw; margin-left: -8cqw; background: var(--you-2); opacity: .85; transform: rotate(-4deg); }
.mini__stack { position: absolute; right: 1cqw; top: -8cqw; width: 40cqw; display: flex; flex-direction: column; align-items: flex-end; }
.mini__note { width: 38cqw; padding: 4cqw; background: var(--you-1-lit); color: #1b140c; transform: rotate(5deg); box-shadow: 0 2cqw 4cqw rgb(0 0 0 / .35); font: 700 5.2cqw/1.25 var(--font-you); }
/* Mỗi cụm ba chữ bạn bè một dòng không gãy, gạch đầu dòng mảnh; cỡ chữ do fitNote co theo cụm dài nhất. */
.mini__line { display: block; white-space: nowrap; }
.mini__line::before { content: "– "; font-weight: 400; opacity: .55; }
.mini__note.is-wrap .mini__line { padding-left: .9em; text-indent: -.9em; white-space: normal; }
.mini__ticket { margin: -2cqw 4cqw 0 0; max-width: 36cqw; padding: 2.4cqw 4cqw; border: .5cqw dashed var(--cr-print-edge); background: var(--cr-print); color: var(--cr-print-ink); transform: rotate(-3deg); font: 500 4cqw/1.25 var(--font-label); }
.mini__cal { position: absolute; left: 3cqw; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4cqw; width: 56cqw; padding: 2.6cqw; background: rgb(255 255 255 / .06); transform: rotate(2deg); }
.mini__cal i { aspect-ratio: 1; border-radius: calc(.6cqw * var(--r-scale, 1)); background: var(--c); }

/* ---------- Cảnh 5: ba vé ---------- */
.steps { padding-block: var(--section); }
.steps h2 { max-width: 14ch; margin: var(--sp-3) 0 var(--sp-7); }
.steps__list { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stub {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-xs); background: var(--cr-print); color: var(--cr-print-ink); transform: rotate(var(--tilt-stub, 0deg));
  box-shadow: var(--shadow-print);
  /* Hai lỗ bấm vé ở hai mép. */
  -webkit-mask: radial-gradient(circle 9px at 0 62%, transparent 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 62%, transparent 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 62%, transparent 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 62%, transparent 96%, #000) right / 51% 100% no-repeat;
}
.stub__no { font: 450 .8125rem/1 var(--font-label); letter-spacing: .12em; color: #6b6152; }
.stub .lamp-dot { width: 10px; height: 10px; background: #b9ad97; }
.stub .lamp-dot.is-on { background: var(--cr-lamp); box-shadow: 0 0 12px rgb(242 193 78 / .95); }
.stub__art { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; height: 76px; }
.stub__text { grid-column: 1 / -1; padding-top: var(--sp-4); border-top: 1.5px dashed rgb(42 36 28 / .28); font: 700 var(--fs-3)/1.15 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.stub__art--pin i { width: 46px; height: 58px; border: 3px solid #fffaf0; box-shadow: 0 6px 10px -4px rgb(0 0 0 / .45); }
.stub__art--pin i:nth-child(1) { background: linear-gradient(160deg, #e0a458, #6b3f22); transform: rotate(-7deg); }
.stub__art--pin i:nth-child(2) { position: relative; background: linear-gradient(170deg, #3fb8a8, #1f3b45); transform: rotate(3deg) translateY(-4px); }
.stub__art--pin i:nth-child(2)::before { content: ""; position: absolute; top: -10px; left: 50%; width: 30px; height: 11px; margin-left: -15px; background: #ef7a5a; opacity: .85; transform: rotate(-4deg); }
.stub__art--pin i:nth-child(3) { background: linear-gradient(150deg, #a496bf, #3b3352); transform: rotate(-2deg); }
.stub__art--pair i { width: 50px; height: 62px; border-radius: 4px; background: #d8cdb8; }
.stub__art--pair i:first-child { background: #2b2620; box-shadow: 0 0 0 3px var(--cr-print), 0 0 0 5px var(--cr-lamp); }
.stub__art--pair b, .stub__art--open b { font: italic 400 1.25rem/1 var(--font-whisper); color: #6b6152; }
.stub__art--open { gap: 14px; }
.stub__art--open i { position: relative; width: 44px; height: 22px; border-radius: 22px 22px 4px 4px; background: #2a241c; }
.stub__art--open i::after { content: ""; position: absolute; left: -10px; right: -10px; top: 18px; height: 44px; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgb(242 193 78 / .55), rgb(242 193 78 / 0) 70%); }
.stub__art--open b { font: 800 1.6rem/1 var(--font-display); font-style: normal; color: #2a9d8f; letter-spacing: -.02em; }
.steps__under { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-6); }
.steps__lock { position: relative; flex: none; width: 12px; height: 10px; margin-top: 5px; border-radius: 2px; background: var(--cr-muted); }
.steps__lock::before { content: ""; position: absolute; left: 2px; right: 2px; top: -7px; height: 9px; border: 2px solid var(--cr-muted); border-bottom: 0; border-radius: 6px 6px 0 0; }

/* ---------- Cảnh 6: góc của bạn ---------- */
.corner { padding-block: var(--section) var(--sp-9); overflow: hidden; }
.corner__wrap { display: grid; gap: var(--sp-7); }
@media (min-width: 1024px) { .corner__wrap { grid-template-columns: 7fr 5fr; align-items: center; } }
.corner__stage { position: relative; margin-inline: calc(var(--gut) * -1 - 8vw); }
@media (min-width: 1024px) { .corner__stage { margin-inline: 0; } }
.corner__art svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Nhãn đứng trên, lệch phải 18px khỏi ngọn đèn của góc đó; gạch nối mảnh thả xuống vũng sáng, đi bên phải chụp đèn. */
.corner__mine {
  position: absolute; left: var(--x, 20%); top: var(--y, 60%); translate: calc(-50% + 18px) calc(-100% - 52px);
  padding: 6px 11px; border: 1px solid var(--cr-line-strong); border-radius: var(--r-pill);
  background: var(--cr-ink-3); color: var(--cr-paper); white-space: nowrap; pointer-events: none;
}
.corner__mine::after { content: ""; position: absolute; left: calc(50% - 6px); top: 100%; width: 1px; height: 46px; background: var(--cr-line-strong); }
.corner__mine.is-waiting { opacity: 0; }
.corner__copy { display: grid; gap: var(--sp-4); justify-items: start; }
.corner__copy h2 { max-width: 16ch; }
.corner__whisper { color: var(--cr-warm); }
.corner__act { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.corner__copy { min-width: 0; }
.corner__act .btn { max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; } /* màn 320px: nút dài xuống dòng, không bị cắt */
.corner__note { color: var(--cr-muted); }