/* Thiết kế gốc rộng 375px. 1rem = 10px thiết kế, co giãn theo bề rộng màn hình (tối đa 450px). */
html {
  font-size: calc(min(100vw, 450px) / 37.5);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p { margin: 0; }

body {
  min-height: 100vh;
  background: #efece7;
  color: #111;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; }
button, input, textarea { font: inherit; color: inherit; }

/* Nền mờ khi xem trên máy tính */
.backdrop { display: none; position: fixed; inset: 0; overflow: hidden; z-index: 0; }
@media (min-width: 480px) { .backdrop { display: block; } }
.backdrop img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(28px) saturate(.9); transform: scale(1.15); opacity: .55; will-change: transform;
}
.backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(245, 242, 237, .55); }

.card {
  position: relative; z-index: 1;
  width: 37.5rem; margin: 0 auto;
  background: #fff;
  overflow: hidden; overflow: clip;
  box-shadow: 0 0 40px rgba(0, 0, 0, .12);
}

.load-error {
  position: fixed; z-index: 100; left: 1rem; right: 1rem; top: 1rem; padding: 1.2rem 1.4rem;
  background: #fff3f3; color: #a30000; border: 1px solid #f3c2c2; border-radius: .8rem;
  font: 500 1.4rem/1.5 "Quicksand", system-ui, sans-serif;
}

/* Khung dàn trang tuyệt đối như bản thiết kế */
.sec { position: relative; }
.a { position: absolute; }
.ph { object-fit: cover; background: #ece9e4; }

/* Mallong: file font riêng trong assets/fonts/ (không có trên Google Fonts) */
@font-face {
  font-family: "Mallong";
  src: url("../assets/fonts/Mallong-Regular.ttf") format("truetype");
  font-display: swap;
}

/* Signora & Moon Light: trỏ thẳng tới file font trên máy chủ cinelove (theo yêu cầu của chủ thiệp).
   Nếu cinelove chặn hoặc đổi đường dẫn, trang tự dùng font thay thế đứng sau trong font-family. */
@font-face {
  font-family: "Signora";
  src: url("https://assets.cinelove.me/fonts/webfonts/signora/signora.woff2") format("woff2"),
       url("https://assets.cinelove.me/fonts/webfonts/signora/signora.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Moon Light";
  src: url("https://assets.cinelove.me/fonts/webfonts/moon-light/moon-light.woff2") format("woff2"),
       url("https://assets.cinelove.me/fonts/webfonts/moon-light/moon-light.woff") format("woff");
  font-display: swap;
}

/* Các font còn lại của mẫu, cũng trỏ tới máy chủ cinelove */
@font-face { font-family: "Katty Diona"; src: url("https://assets.cinelove.me/fonts/webfonts/katty-diona/katty-diona.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Belinda Avenue"; src: url("https://assets.cinelove.me/fonts/webfonts/belinda-avenue/belinda-avenue.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Gillastone"; src: url("https://assets.cinelove.me/fonts/webfonts/gillastone/gillastone.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Madam Ghea"; src: url("https://assets.cinelove.me/fonts/webfonts/madam-ghea/madam-ghea.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "BethanWhite"; src: url("https://assets.cinelove.me/fonts/webfonts/bethanwhite/bethanwhite.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Soul Note Display"; src: url("https://assets.cinelove.me/fonts/webfonts/soul-note-display/soul-note-display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Faugllin Balseyn"; src: url("https://assets.cinelove.me/fonts/webfonts/faugllin-balseyn/faugllin-balseyn.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfect Beloved"; src: url("https://assets.cinelove.me/fonts/webfonts/perfect-beloved/perfect-beloved.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "The Hamstter"; src: url("https://assets.cinelove.me/fonts/webfonts/the-hamstter/the-hamstter.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PlayfairDisplay"; src: url("https://assets.cinelove.me/fonts/webfonts/playfairdisplay/playfairdisplay.woff2") format("woff2"); font-display: swap; }
/* Đặt tên khác để không lẫn với Quicksand của Google (dùng làm dự phòng) */
@font-face { font-family: "Quicksand CL"; src: url("https://assets.cinelove.me/fonts/webfonts/quicksand/quicksand.woff2") format("woff2"); font-display: swap; }

/* Typography — font và cỡ chữ theo đúng mẫu cinelove; font Google đứng sau để dự phòng */
.f-mallong { font-family: "Mallong", "Cormorant Garamond", serif; font-variant-numeric: lining-nums; }
.f-signora { font-family: "Signora", "Instrument Serif", "Cormorant Garamond", serif; font-weight: 500; }
.f-moon    { font-family: "Moon Light", "Bodoni Moda", "Playfair Display", serif; font-weight: 700; }
.f-katty   { font-family: "Katty Diona", "Mrs Saint Delafield", cursive; }
.f-belinda { font-family: "Belinda Avenue", "Cormorant Garamond", serif; font-weight: 500; }
.f-gilla   { font-family: "Gillastone", "Mr Dafoe", cursive; }
.f-madam   { font-family: "Madam Ghea", "Cormorant Garamond", serif; font-weight: 500; }
.f-bethan  { font-family: "BethanWhite", "Great Vibes", cursive; }
.f-soul    { font-family: "Soul Note Display", "Cormorant Garamond", serif; font-weight: 500; }
.f-faug    { font-family: "Faugllin Balseyn", "Great Vibes", cursive; font-weight: 500; }
.f-beloved { font-family: "Perfect Beloved", "Great Vibes", cursive; }
.f-hamster { font-family: "The Hamstter", "Mrs Saint Delafield", cursive; font-weight: 500; }
/* Trên cinelove, font "Scarlet Bradley" của dòng ngày giờ không tải được nên hiện bằng Times New Roman */
.f-times   { font-family: "Times New Roman", Times, serif; }
.f-serif { font-family: "Cormorant Garamond", "Times New Roman", serif; font-weight: 500; font-variant-numeric: lining-nums; }
.f-play  { font-family: "PlayfairDisplay", "Playfair Display", Georgia, serif; font-weight: 500; }
.f-quick { font-family: "Quicksand CL", "Quicksand", system-ui, sans-serif; font-weight: 500; }
.f-vibes { font-family: "Great Vibes", cursive; }
.f-dafoe { font-family: "Mr Dafoe", cursive; }
.f-sign  { font-family: "Mrs Saint Delafield", cursive; }

.white { color: #fff; }
.red { color: #c91212; }
.darkred { color: #b70000; }
.gray { color: #9a9a9a; }
.center { text-align: center; }
.right { text-align: right; }
.italic { font-style: italic; }
.nowrap { white-space: nowrap; }
.shadow { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.t-12 { font-size: 1.2rem; line-height: 1.5; }
.t-15 { font-size: 1.5rem; }
.t-body { font-size: 1.125rem; line-height: 2.2rem; }
.t-name { font-size: 1.95rem; font-weight: 500; }
.t-role { font-size: 1.95rem; }
.flip { transform: scaleX(-1); }

.hy {
  display: flex; align-items: center; justify-content: center;
  color: #c91212; font-size: 5rem; line-height: 1; font-weight: 700;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", "Microsoft YaHei", serif;
}

.row { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; }
.lined { border-top: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9; }
.mint { background: #ebefe8; }
.framed { border: .4rem solid #fff; }
.photo-frame { background: #fff; padding: 1rem; }
.photo-frame img { width: 100%; height: 100%; }

.shade-hero {
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.1) 24%, rgba(0,0,0,0) 45%, rgba(0,0,0,.1) 66%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.shade-bottom { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); pointer-events: none; }
.shade-top { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 30%); pointer-events: none; }

/* Hiệu ứng xuất hiện khi cuộn */
[data-anim] {
  opacity: 0;
  transition: opacity 1.3s ease-out, translate 1.3s ease-out;
  transition-delay: var(--d, .2s);
}
[data-anim="up"] { translate: 0 5rem; }
[data-anim="left"] { translate: 5rem 0; }
[data-anim="right"] { translate: -5rem 0; }
[data-anim].in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; translate: none; transition: none; }
}

/* Lịch */
.cal {
  padding: 1.2rem 1.2rem 1rem;
  background: rgba(40, 40, 40, .32);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: #fff; font-family: Arial, Helvetica, sans-serif;
}
.cal-title { text-align: center; font-size: 1.3rem; letter-spacing: .25rem; margin-bottom: .8rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .15rem; text-align: center; }
.cal-wd { font-size: .95rem; opacity: .75; padding-bottom: .4rem; }
.cal-day { position: relative; height: 2.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.cal-day.is-day span { position: relative; z-index: 1; font-weight: 700; }
.cal-day.is-day svg {
  position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem;
  margin: -1.6rem 0 0 -1.6rem; fill: #d81f26;
  animation: beat 1.4s ease-in-out infinite;
}
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }

/* Đếm ngược */
.countdown { display: flex; justify-content: space-between; }
.countdown > div {
  width: 4.4rem; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #940000; color: #fff; border-radius: .3rem;
  font-family: "Times New Roman", Times, serif;
}
.countdown b { font-size: 2rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.countdown span { font-size: 1.1rem; font-style: italic; margin-top: .15rem; }

/* Album */
.album { padding: 7rem 1.5rem 2rem; }
.album-grid { columns: 3; column-gap: .5rem; margin-top: 2.4rem; }
.album-grid button {
  display: block; width: 100%; padding: 0; border: 0; background: #ece9e4;
  margin-bottom: .5rem; break-inside: avoid; cursor: zoom-in; overflow: hidden;
}
.album-grid img { width: 100%; height: auto; transition: transform .6s ease; }
.album-grid button:hover img { transform: scale(1.05); }

/* Xác nhận tham dự */
.closing { padding: 6rem 0 12rem; display: flex; flex-direction: column; align-items: center; }
.rsvp {
  width: 29rem; padding: 2.2rem 2rem;
  background: #fff; border: 1px solid #e0e0e0; border-radius: .6rem;
  box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .08);
  font-family: Arial, Helvetica, sans-serif; font-size: 1.25rem; color: #333;
}
.rsvp h3 { text-align: center; font-size: 1.7rem; font-weight: 700; margin-bottom: 1.6rem; }
.fld { display: block; margin-bottom: 1.4rem; }
.fld > span { display: block; margin-bottom: .6rem; font-weight: 600; }
.fld em { font-weight: 400; color: #999; font-style: normal; }
.rsvp input[type="text"], .rsvp textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid #ddd; border-radius: .5rem;
  background: #fff; font-size: max(1.3rem, 16px); outline: none; resize: vertical;
}
.rsvp input[type="text"]:focus, .rsvp textarea:focus { border-color: #940000; box-shadow: 0 0 0 .25rem rgba(148, 0, 0, .1); }
.radio { display: flex; align-items: center; gap: .7rem; margin: .5rem 0; cursor: pointer; }
.radio input { accent-color: #940000; width: 1.5rem; height: 1.5rem; margin: 0; flex: none; }
.chips { display: flex; gap: .8rem; }
.chips label { flex: 1; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips i {
  display: block; text-align: center; font-style: normal; padding: .7rem 0;
  border: 1px solid #ddd; border-radius: 2rem; transition: .2s;
}
.chips input:checked + i { background: #940000; border-color: #940000; color: #fff; }
.chips input:focus-visible + i { outline: 2px solid #940000; outline-offset: 2px; }
.rsvp button[type="submit"] {
  width: 100%; padding: 1.1rem; border: 0; border-radius: .5rem;
  background: #5c5c5c; color: #fff; font-weight: 600; cursor: pointer; transition: background .2s;
}
.rsvp button[type="submit"]:hover { background: #940000; }
.rsvp button[disabled] { opacity: .6; cursor: wait; }
.form-error { color: #c91212; margin: -.4rem 0 1rem; font-size: 1.15rem; }
.rsvp-done { text-align: center; padding: 1rem 0; }
.done-heart { width: 4rem; height: 4rem; fill: #d81f26; margin-bottom: 1rem; animation: beat 1.4s ease-in-out infinite; }
.rsvp-done h3 { margin-bottom: .6rem; }
.link-btn { margin-top: 1.2rem; background: none; border: 0; color: #940000; text-decoration: underline; cursor: pointer; }

.final-img { width: 22rem; height: 22rem; object-fit: contain; margin-top: 4rem; }
.thanks { font-size: 4.8rem; line-height: 1.2; margin-top: 1rem; }
.couple { font-size: 1.6rem; letter-spacing: .1rem; color: #555; margin-top: .6rem; }

/* Nút nổi */
.fab {
  position: fixed; z-index: 20;
  right: calc(max(0px, (100vw - 37.5rem) / 2) + 1.2rem);
  width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 .3rem 1.2rem rgba(0, 0, 0, .25);
}
.fab[hidden] { display: none; }
.fab svg { width: 50%; height: 50%; }
/* Nút nhạc dạng đĩa: nền đen, viền trắng, xoay khi đang phát */
.fab-music {
  top: calc(.8rem + env(safe-area-inset-top));
  right: calc(max(0px, (100vw - 37.5rem) / 2) + .8rem);
  width: 3.4rem; height: 3.4rem;
  background: #111; color: #fff;
  border: .18rem solid #fff; box-shadow: 0 0 0 .1rem #111, 0 .2rem .8rem rgba(0, 0, 0, .3);
}
.fab-music svg { width: 58%; height: 58%; }
.fab-music.playing { animation: spin 3s linear infinite; }
.fab-music:not(.playing) { opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Thanh dưới cùng */
.bottom-bar {
  position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 37.5rem; display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
.bottom-bar > * { pointer-events: auto; }
body.bar-off .bottom-bar { transform: translate(-50%, 120%); opacity: 0; }
body.bar-off .bottom-bar > * { pointer-events: none; }
.bottom-bar button {
  flex: none; height: 4.4rem; border: 0; color: #fff; cursor: pointer;
  display: flex; align-items: center;
  background: rgba(60, 60, 60, .4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .12);
  font: 600 1.35rem "Quicksand", system-ui, sans-serif;
}
.bottom-bar button[hidden] { display: none; }
.bb-wish { flex: 1 1 auto !important; min-width: 0; border-radius: 2.2rem; padding: 0 1.2rem 0 1.6rem; justify-content: space-between; gap: .6rem; }
.bb-wish span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-wish svg { flex: none; width: 2.1rem; height: 2.1rem; }
.bb-heart { border-radius: 2.2rem; padding: 0 1.4rem 0 .6rem; gap: .4rem; }
.bb-heart svg { width: 3.3rem; height: 3.3rem; }
.bb-heart:active svg { transform: scale(.9); }
.bb-round { position: relative; width: 4.4rem; border-radius: 50%; justify-content: center; font-size: 2.1rem !important; }
.bb-badge {
  position: absolute; top: -.6rem; right: -.5rem; min-width: 2rem; height: 2rem; padding: 0 .5rem;
  border-radius: 1rem; background: #f0506e; color: #fff; font: 700 1.05rem/2rem "Quicksand", sans-serif;
}
.bb-badge[hidden] { display: none; }
#likeBtn.liked { background: rgba(240, 80, 110, .6); }
#likeBtn.pop { animation: pop .45s ease; }
@keyframes pop { 40% { transform: scale(1.25); } }

/* Lời chúc chạy */
.wish-feed {
  position: fixed; z-index: 29;
  left: calc(50% - 17.75rem); bottom: calc(6.4rem + env(safe-area-inset-bottom));
  width: 26rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  pointer-events: none;
}
.wish-feed[hidden] { display: none; }
.wish-chip {
  max-width: 100%; padding: .55rem 1rem; border-radius: .7rem;
  background: rgba(236, 120, 134, .62); color: #fff;
  font: 500 1.2rem/1.45 "Quicksand", system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  animation: chip-in .45s ease-out both;
}
.wish-chip b { font-weight: 700; }
.wish-chip.out { animation: chip-out .45s ease-in both; }
@keyframes chip-in { from { opacity: 0; transform: translateY(1.2rem); } }
@keyframes chip-out { to { opacity: 0; transform: translateY(-1rem); } }

.wish-toggle {
  position: fixed; z-index: 30;
  right: calc(50% - 17.75rem); bottom: calc(6.8rem + env(safe-area-inset-bottom));
  width: 4.6rem; padding: .35rem .35rem .9rem; border: 0; border-radius: 2.3rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .7rem; color: #fff;
  background: linear-gradient(180deg, #ff93a3, #f0506e);
  box-shadow: 0 .3rem 1rem rgba(240, 80, 110, .35);
  transition: bottom .35s ease;
}
body.bar-off .wish-toggle { bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
.wish-toggle img { width: 3.9rem; height: 3.9rem; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #f7c5ce; }
.wish-toggle svg { width: 2.2rem; height: 2.2rem; }
.wish-toggle .wt-chat, .wish-toggle.off .wt-x { display: none; }
.wish-toggle.off .wt-chat { display: block; }

.fly-heart { position: fixed; z-index: 40; pointer-events: none; }
.fly-heart svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* Khung gửi lời chúc */
.sheet { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s; }
.sheet[hidden] { display: none; }
.sheet.open { opacity: 1; }
.sheet-card {
  position: absolute; left: 50%; bottom: 0; width: 37.5rem;
  transform: translate(-50%, 100%); transition: transform .35s cubic-bezier(.2, .8, .3, 1);
  padding: 5.6rem 2rem calc(2.4rem + env(safe-area-inset-bottom));
  border-radius: 1.8rem 1.8rem 0 0; text-align: center;
  background:
    radial-gradient(circle at 0% 25%, rgba(255, 190, 202, .55), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(255, 214, 222, .7), transparent 42%),
    #fff9fa;
  font-family: "Quicksand", system-ui, sans-serif;
}
.sheet.open .sheet-card { transform: translate(-50%, 0); }
.sheet-icon { position: absolute; left: 50%; top: -4.2rem; width: 12rem; height: 9rem; margin-left: -6rem; }
.sheet-x {
  position: absolute; top: 1.2rem; right: 1.6rem; padding: .4rem; border: 0; background: none;
  color: #999; font: 700 1.7rem/1 "Quicksand", sans-serif; cursor: pointer;
}
.sheet-card h3 { font-size: 2.1rem; font-weight: 700; color: #333; margin-bottom: 2.2rem; }
#wishForm input, #wishForm textarea {
  display: block; width: calc(100% - 3.6rem); margin: 0 auto 1.6rem; padding: 1.1rem 1.2rem;
  border: 1px solid #f5c2cd; border-radius: .9rem; background: #fff; color: #333;
  font-family: inherit; font-size: max(1.4rem, 16px); outline: none;
}
#wishForm textarea { min-height: 8rem; resize: vertical; }
#wishForm input:focus, #wishForm textarea:focus { border-color: #f0506e; box-shadow: 0 0 0 .3rem rgba(240, 80, 110, .12); }
#wishForm .form-error { margin: -.6rem 0 1.2rem; }
#wishForm button[type="submit"] {
  width: 100%; height: 4.8rem; margin-top: 1rem; border: 0; border-radius: 2.4rem;
  background: #ef5566; color: #fff; font: 600 1.55rem "Quicksand", sans-serif; cursor: pointer;
  box-shadow: 0 .4rem 1.2rem rgba(239, 85, 102, .3);
}
#wishForm button[disabled] { opacity: .7; cursor: wait; }

/* Hộp mừng cưới */
.modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; padding: 1.6rem;
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative; width: min(34rem, 100%); max-height: 90vh; overflow: auto;
  background: #fff; border-radius: 1rem; padding: 2.4rem 2rem;
  font-family: "Quicksand", sans-serif; font-size: 1.3rem; color: #333;
}
.modal-card h3 { text-align: center; font-size: 2.4rem; font-weight: 700; margin-bottom: 1.2rem; }
.modal-x { position: absolute; top: .6rem; right: 1rem; border: 0; background: none; font-size: 2.8rem; line-height: 1; cursor: pointer; color: #888; }
.gift-item { padding: 1.4rem 0; border-top: 1px solid #eee; text-align: center; }
.gift-item h4 { margin: 0 0 .8rem; font-size: 1.45rem; color: #940000; }
.gift-item img { width: 16rem; height: 16rem; object-fit: contain; margin: 0 auto 1rem; }
.gift-item p { margin: .3rem 0; }
.gift-num { font-size: 1.7rem; font-weight: 700; letter-spacing: .1rem; }
.copy-btn {
  margin-top: .8rem; padding: .6rem 1.6rem; border: 1px solid #940000; border-radius: 2rem;
  background: #fff; color: #940000; cursor: pointer; font-size: 1.15rem;
}

/* Xem ảnh lớn */
.lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .94);
  display: flex; align-items: center; justify-content: center; touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lb-btn {
  position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff;
  width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer;
}
.lb-x { top: 14px; right: 14px; }
.lb-prev { left: 12px; top: 50%; margin-top: -22px; }
.lb-next { right: 12px; top: 50%; margin-top: -22px; }
.lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #ddd; font: 13px/1 system-ui, sans-serif; }