/* template67 "SCRUB" — style bám TRANG NGUỒN thegoodday theme_93
(https://thegoodday.kr/invitation/view/94627).
Ngôn ngữ thị giác của nguồn: giấy dó ngà, hoạ tiết truyền thống Hàn — sóng seigaiha,
sọc saekdong, hồi văn (dải kẻ ô vuông) — cùng bảng màu hanbok nhạt: xanh rêu, hồng đất,
nâu tím. Donor template6 (olive/kem) chỉ cho phần cơ học; toàn bộ màu và nhịp ở đây
lấy từ token-map.json + source-shape.md của theme_93.
Sắc NHẠT của nguồn (#6da899 #cf8b84 #dabebb #a7977e) chỉ dùng làm VIỀN / KẺ / NỀN DẢI —
không bao giờ làm nền đặc dưới chữ, và không bao giờ làm chữ trên nền giấy: đo được
2.6–2.9:1. Mỗi sắc có một biến `-deep` đi kèm, dùng cho chữ và nền nút. */
:root {
--t67-paper: #fbfaf7; /* nền giấy bg.png */
--t67-mist: #f5f6f0; /* .invitation_area */
--t67-band: #dabebb; /* .bgm_area — dải hồng đầu trang */
--t67-sage: #6da899; /* 신랑 của nguồn — viền/kẻ */
--t67-sage-deep: #457062; /* chữ + nền nút — 5.4:1 giấy · 4.7:1 nền #ececec · 5.6:1 dưới chữ trắng */
--t67-sage-dark: #3f6a5d; /* đáy gradient nút */
--t67-rose: #cf8b84; /* 신부 của nguồn — viền/kẻ */
--t67-rose-deep: #9d5952; /* chữ + chấm ngày cưới — 4.9:1 trên #f5f6f0 */
--t67-mauve: #8f6663; /* .invitation của nguồn (#a37976) đậm thêm một bậc */
--t67-slate: #5f6b6e; /* .dd / .mdd của nguồn (#818e91) đậm thêm một bậc */
--t67-gold: #7d6f58; /* tên người chúc (#a7977e) đậm thêm một bậc */
--t67-ink: #2e2e2e;
--t67-ink-soft: #636363;
--t67-line: #dadad9;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: #fff;
}
::-webkit-scrollbar-thumb {
background-color: var(--t67-sage-deep);
}
body {
font-family: "Be Vietnam Pro", system-ui, sans-serif;
/* Nguồn KHÔNG đặt letter-spacing dương cho thân chữ — nó để -1.8px cho chữ Hàn. Chữ
Việt có dấu nên bỏ hẳn, không chuyển dấu âm sang (dấu sẽ dính vào chữ bên cạnh). */
letter-spacing: normal;
background: #cfd8d4;
}
.wrapper {
background: var(--t67-paper) url("../img/paper-bg.png") repeat-y center center;
background-size: contain;
}
.story-section .timeline-card::before {
border-color: var(--t67-sage);
}
.story-section .timeline .title::before {
border-color: var(--t67-sage);
}
.story-section .timeline-1 li {
border-left-color: #f9f9f9;
}
.story-section .timeline-1 li:before {
border-color: var(--t67-sage);
box-shadow: 3px 3px 0px #f9f9f9;
}
.section-bg-affect:nth-child(even) {
background-color: var(--t67-mist);
}
/* .section-bg-affect:nth-child(even) {
background-color: var(--t67-mist);
} */
/* .section-bg-affect {
background-color: var(--t67-mist);
} */
/* .section-bg-affect {
background-color: var(--t67-mist);
} */
.story-section .timeline-card::before {
border-color: var(--t67-rose);
}
.story-section .timeline .title::before {
border-color: var(--t67-rose);
}
.story-section .timeline-1 li {
border-left-color: var(--t67-rose);
}
.story-section .timeline-1 li:before {
border-color: var(--t67-rose);
box-shadow: 3px 3px 0px var(--t67-rose);
}
.donate-section .donate-box .donate-card {
width: 100%;
border: 1px dashed var(--t67-band);
}
.donate-card.p-4.rounded.text-center {
border: 1px dashed var(--t67-rose);
}
.donate-section .donate-box .donate-card p:last-child {
margin-bottom: 0 !important;
}
.donate-section .donate-box .donate-card .qr-code-image {
max-width: 150px;
display: block;
cursor: zoom-in;
}
.donate-modal {
display: none;
position: fixed;
z-index: 199;
padding-top: 100px;
padding-bottom: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0)!important;
background-color: rgba(0,0,0,0.5)!important;
}
.donate-modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 750px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetopfordonatemodal;
-webkit-animation-duration: 0.4s;
animation-name: animatetopfordonatemodal;
animation-duration: 0.4s
}
@-webkit-keyframes animatetopfordonatemodal {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetopfordonatemodal {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.donate-modal strong, .donate-modal h3{font-family:inherit!important;}
.donate-modal-close {color: red;font-size: 28px;font-weight: bold;text-decoration: none;cursor: pointer;position: absolute;right: 15px;z-index: 999;}
.donate-modal-header {padding: 8px 16px;background-color: #f23b43;color: #fff;font-size:30px;text-align:center;line-height: 40px;}
.donate-modal-header strong{display:flex;align-items:center;justify-content: center;flex-wrap: wrap;color:#fff;}
.donate-modal-header strong span{margin-left:10px;}
.donate-modal-body {padding: 0 15px;}
/* .donate-box{display: flex;justify-content: space-evenly;flex-wrap: wrap;} */
.donate-box .donate-card:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
.donate-box .donate-card h3{padding:0;margin:0;margin-bottom: 20px;font-weight: bold;font-size: 18px;line-height: 30px;}
.donate-box .donate-card p {margin: 10px 0!important;font-size: 16px;}
.donate-box .donate-card p:last-child {margin-bottom:0!important;}
@media (max-width: 699px) {
.donate-box .donate-card{width:100%;}
.donate-wrap{
width: 100%;
}
.qr-code-image {
max-width: 200px;
}
}
.donate-box .donate-card {position:relative;}
.donate-box .donate-card .qr-code-image{max-width: 150px;border: 1px solid #ccc;padding: 3px;margin: auto;display: block;cursor: zoom-in;}
.donate-box .cryptos-box .cryptos-items {display: flex;flex-wrap: wrap;justify-content: center;margin-right: -10px;margin-left: -10px;margin-top: 10px;}
.donate-box .cryptos-box .cryptos-items .crypto-item {padding:10px 10px 0;}
.donate-box .cryptos-box .cryptos-items .crypto-item img {width:30px;max-width:100%;min-width:35px;cursor:pointer;}
.donate-box .cryptos-box-view {display:none;position: absolute;top: 0;left: 0;background: #ffffff;width: 100%;height: 100%;border-radius: 7px;padding:10px;text-align: center;}
.donate-box .cryptos-box-view h5 {font-weight: bold;font-size: 18px;display: flex;align-items: center;justify-content: center;margin-bottom: 15px;}
.donate-box .cryptos-box-view h5 img{width:25px;}
.donate-box .cryptos-box-view h5 .coin-img {margin-right: 5px;}
.donate-box .cryptos-box-view h5 .coin-id {margin-left: 5px;}
.donate-box .cryptos-box-view .coin-address {display: block;padding: 10px;background: #ffe2e4;margin-bottom: 15px;word-break: break-word;color: #201f1f;}
.donate-box .cryptos-box-view .cryptos-box-view-close {margin-top: 15px;background: #f23b43;color: #fff;padding: 5px 15px;border-radius: 5px;border: 1px solid #e3252d;}
.donate-box .cryptos-box-view .cryptos-box-view-close:hover{background: #e3252d;}
.offcanvas-menu li {
position: relative;
}
.offcanvas-menu li:after {
content: "";
position: absolute;
width: 50px;
height: 1px;
bottom: 0;
left: 0;
border: 1px solid var(--t67-gold);
}
.offcanvas-menu .nav-link {
font-size: 1.2rem;
text-transform: capitalize;
}
.section-title {
font-family: "Dancing Script", cursive;
letter-spacing: .5px;
font-size: 2.6rem;
color: var(--t67-ink);
}
.section-sub-title {
font-family: "Be Vietnam Pro", system-ui, sans-serif;
letter-spacing:.2px;
}
.title {
font-family: "Be Vietnam Pro", system-ui, sans-serif
}
.sub-title {
font-family: "Be Vietnam Pro", system-ui, sans-serif
}
/* ══ HERO ═══════════════════════════════════════════════════════════════════════════
Bám TRANG NGUỒN thegoodday theme_93 (đo ở source-shape.md, khung 430px):
.bgm_area dải hồng #dabebb chữ trắng, cao 60px, đệm 15px
ảnh đôi 430×538 full-bleed (tỉ lệ 0.799 — KHOÁ Ở KHUNG, xem chú thích dưới)
main-bottom dải sóng + hồi văn 430×258, khối tên/ngày đè lên: absolute bottom 20px,
padding-left 30px, chữ 2.3em #323232, nhãn vai 0.7em (#6da899/#cf8b84)
.padding ornament pattern-icon-01 rộng 20px, căn giữa, đệm 40px trên dưới
Donor template6 xếp NGƯỢC (tiêu đề + ngày trước, ảnh sau) — đã đảo lại theo nguồn. */
.banner-section .title-head {
/* Nguồn để chữ TRẮNG trên dải #dabebb — đo được 1.74:1, không đọc nổi. Giữ đúng màu
dải (nó là chữ ký thị giác của nguồn) và đổi chữ sang mực nâu đậm: 6.1:1. */
background-color: var(--t67-band);
text-align: center;
color: #4a3b39;
letter-spacing: .4px;
}
/* Nguồn chỉ phải chứa "성민우♥정수인 결혼합니다." — 13 ký tự. Câu tương ứng ở đây mang
HAI họ tên đầy đủ nên dài gấp ba; để nguyên cỡ chữ của donor là chữ chạm sát hai mép. */
.banner-section .title-head #title-head {
padding-left: 16px;
padding-right: 16px;
font-size: 15px;
line-height: 1.5;
}
.main_area {
background: var(--t67-paper) url("../img/paper-bg.png") repeat-y center center;
background-size: contain;
text-align: center;
}
/* Tỉ lệ khoá Ở KHUNG chứ không ở ![]()
: `aspect-ratio` trên thẻ ![]()
mất tác dụng ngay
khi thẻ có thuộc tính width/height, và ảnh dọc 9:16 người dùng tải lên sẽ kéo hero cao
gấp đôi rồi đẩy cả thiệp xuống dưới màn hình. `object-position: center top` vì ảnh chân
dung dọc cắt giữa là mất mặt người. */
.main_area .hero-photo {
position: relative;
width: 100%;
aspect-ratio: 430 / 538;
overflow: hidden;
font-size: 0;
}
.main_area .hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.main_area .hero-band {
position: relative;
width: 100%;
font-size: 0;
/* Dải kéo lên đè mép dưới ảnh — nguồn xếp hai khối liền nhau, dải trong suốt phần trên
nên phần sóng bắt đầu ngay dưới ảnh. */
margin-top: -1px;
}
.main_area .hero-band__bg {
display: block;
width: 100%;
height: auto;
}
.main_area .hero-band__text {
position: absolute;
left: 0;
/* Nguồn đặt 20px. Ở repo thì `#access-dock` (fixed, bottom 82px trên mobile, cao ~72px)
nổi đè đúng chỗ đó: đo được chồng 54px ở khung 430×932. Nâng khối chữ lên 78px là vừa
đủ để dòng cuối kết thúc trên mép dock, và khối vẫn nằm TRỌN trong dải hoạ tiết
(139px chữ + 78px = 217px < 258px chiều cao dải). Đây là khác biệt BUỘC PHẢI có so
với nguồn — nguồn không có capsule truy cập. */
bottom: 78px;
padding-left: 30px;
padding-right: 20px;
text-align: left;
font-size: 16px;
}
.main_area .hero-person {
margin: 0;
font-family: "Dancing Script", "Be Vietnam Pro", cursive;
font-size: clamp(26px, 8vw, 34px);
line-height: 1.25;
color: #323232;
}
.main_area .hero-person > img {
width: 20px;
vertical-align: middle;
}
/* Nguồn: nhãn vai = 0.7em của tên (2.3em) -> ~26px, tức 70% cỡ tên. Chuỗi Việt/Anh dài
hơn 신랑 (2 ký tự) nhiều lần nên không giữ nổi tỉ lệ đó mà không tràn khung 430px;
15px giữ được thứ bậc "nhãn nhỏ hơn tên" mà vẫn đọc thoải mái. */
.main_area .hero-person__role {
padding: 0 10px;
font-family: "Be Vietnam Pro", system-ui, sans-serif;
font-size: 15px;
font-weight: 500;
vertical-align: middle;
white-space: nowrap;
}
/* Nguồn tô 신랑 #6da899 và 신부 #cf8b84 — cả hai chỉ 2.6:1 trên nền giấy. Đẩy xuống một
bậc đậm giữ nguyên sắc: 4.5:1. Sắc nhạt của nguồn vẫn dùng, nhưng làm viền/kẻ. */
.main_area .hero-person__role.is-groom { color: var(--t67-sage-deep); }
.main_area .hero-person__role.is-bride { color: var(--t67-rose-deep); }
.main_area .hero-when {
margin-top: 8px;
font-family: "Cormorant Garamond", serif;
font-size: 18px;
line-height: 1.4;
color: #3d3d3d;
letter-spacing: .3px;
}
.main_area .hero-when small {
display: block;
font-size: 15px;
color: var(--t67-ink-soft);
}
.main_area .hero-knot {
padding: 40px 0;
text-align: center;
font-size: 0;
}
.main_area .hero-knot img {
width: 20px;
}
/* ── nút truy cập ───────────────────────────────────────────────────────────────
`.wrapper` tối đa 577px -> từ bề rộng 576px ba nút `col-sm-4` chỉ còn ~173px mỗi cái.
Lỗi nhãn xuống dòng CHỈ hiện ở màn RỘNG và CHỈ ở locale có chuỗi dài ("Xác nhận tham
dự" 16 ký tự vs "RSVP" 4) — đo một bề rộng hay một locale là xanh giả.
`!important` là BẮT BUỘC: nhóm tiện ích khoảng cách của Bootstrap (`m-1`, `px-2`) đều
khai `!important`, specificity thường không thắng. Ba chỗ giành lại bề ngang:
1. bỏ lề NGANG của `m-1` — khe giữa ba nút đã do gutter `gx-2` của row lo;
2. đệm ngang về 8px cho ĐỀU — markup donor thiếu `px-2` ở nút mừng cưới nên nó ăn
đệm mặc định 12px của `.btn`, hẹp hơn hai nút kia;
3. cỡ chữ 14px thay vì 15px của `libs.css`.
Và KHÔNG giãn ký tự: nguồn chỉ giãn ở TIÊU ĐỀ section (chữ ngắn, HOA); `.6px` trên nhãn
cộng ~10px cho chuỗi 16 ký tự — vừa đủ tràn cột 173px. */
.tpl-scrub .accessibilities-section .accessibility-btn {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
min-height: 48px; /* đồng thời đủ vùng chạm 48px */
white-space: normal;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 8px !important;
padding-left: 8px !important;
padding-right: 8px !important;
background: linear-gradient(180deg, var(--t67-sage-deep), var(--t67-sage-dark));
border: none;
border-radius: 2px;
font-size: 14px;
letter-spacing: normal;
color: #fff;
}
.tpl-scrub .accessibilities-section .row > [class*="col-"] { display: flex; }
.tpl-scrub .accessibilities-section .accessibility-btn:hover {
opacity: 0.85 !important;
background: linear-gradient(180deg, var(--t67-sage-dark), var(--t67-sage-dark));
border: none;
color: #fff;
}
/* Icon không được tách khỏi chữ khi chữ xuống dòng: cả cụm là một inline-flex thì chữ
xuống dòng NGAY BÊN CẠNH icon, không chui xuống dưới icon. `text-wrap: balance` chia
hai dòng cho đều ở locale dài hẳn thay vì để rơi một chữ xuống dòng dưới. */
.tpl-scrub .accessibilities-section .accessibility-btn .content-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
text-wrap: balance;
top: 0; /* libs.css đẩy `.content-button` xuống 3px */
}
.tpl-scrub .accessibilities-section .access-section-icon {
flex-shrink: 0;
width: 18px;
}
/* video-section */
.video-section iframe {
border-radius: 20px;
overflow: hidden;
}
/* gallery-section */
#btn-see-more-gallery{
border-radius: 50px;
padding: 12px 24px;
}
.gallery-section .btn-secondary.btn-see-more-gallery {
background: var(--t67-sage-deep);
border-color: var(--t67-sage-deep);
}
.gallery-item{
cursor: pointer;
}
/* .lg-backdrop/.lg-outer đã gỡ: lightGallery không còn trong bundle template67
(đã cắt khỏi libs.js). Trình xem ảnh thay thế: components/photo_viewer. */
/* weddingdate-section */
.weddingdate-section .mini_calendar_main {
display: flex;
justify-content: center;
}
.weddingdate-section .mini_calendar .calendar-month,
.weddingdate-section .mini_calendar table th {
color: var(--t67-sage-deep);
}
.weddingdate-section .mini_calendar {
padding-bottom: 18px;
border-bottom: 1px solid #c6c6c6;
}
.weddingdate-section .mini_calendar table th {
color: #5c5c5c;
border-top: 1px solid var(--t67-line);
border-bottom: 1px solid var(--t67-line);
}
.weddingdate-section .mini_calendar td {
color: #484747;
}
.weddingdate-section .mini_calendar td #today {
background: var(--t67-rose);
color: #fff;
}
.weddingdate-section #clock > div {
color: var(--t67-sage-deep);
}
.weddingdate-section .wrap-img {
width: 150px;
margin: 0 auto;
}
tion */ .story-section .timeline .title {
color: var(--t67-gold);
}
.timeline-card .img-holder {
border-radius: 20px;
overflow: hidden;
}
/* ── Dòng tên đôi ở khối lời mời ────────────────────────────────────────────────
Nguồn xếp `* 신랑 성민우 * 신부 정수인` — nhãn vai nhỏ, tô theo vai (#5884b1 / #dc7276),
đứng cạnh tên cỡ 2.1em; giữa hai bên là hoa `icon-01.png` (`.bcm .cm`).
Bố cục hai cột + nhãn TRÊN tên lấy theo template66: chuỗi Việt/Anh dài hơn 신랑/신부
nhiều lần, để nhãn nằm cùng dòng với tên là cả cụm tràn hoặc xuống dòng lộn xộn. */
.invitation-couple p#couple-name {
display: flex;
/* KHÔNG cho xuống dòng: `flex-wrap: wrap` làm cặp tên Latin ("James William" +
"Emily Grace" ở 26px) rớt thành hai hàng chồng nhau và ornament trôi ra giữa khoảng
trống. Hai cột phải LUÔN đứng cạnh nhau; tên dài thì xuống dòng BÊN TRONG cột. */
flex-wrap: nowrap;
align-items: flex-end; /* ornament ăn theo dòng TÊN, không theo dòng nhãn */
justify-content: center;
gap: 0 10px;
/* 5vw: ở 430px mỗi cột rộng 159px, "James William" phải ≤ ~21px mới nằm một dòng.
Tên dài hơn vẫn xuống dòng trong cột — đó là hành vi đúng, không phải lỗi. */
font-size: clamp(18px, 5vw, 24px);
line-height: 1.3;
color: var(--t67-ink);
}
.invitation-couple .couple-name__side {
display: flex;
flex-direction: column;
/* Chia đôi phần còn lại sau ornament. `min-width: 0` là bắt buộc — mặc định flex item
không co xuống dưới bề rộng nội dung, tên dài sẽ đẩy cột kia hẹp lại rồi tràn. */
flex: 1 1 0;
min-width: 0;
line-height: 1.3;
overflow-wrap: break-word;
}
/* Tên dồn SÁT ornament ở giữa: cột trái căn phải, cột phải căn trái. Nhãn vai nằm trên
tên và bám cùng mép, nên cặp nhãn ôm lấy ornament thay vì trôi ra hai bên. */
.couple-name_left_side { align-items: flex-end; text-align: right; }
.couple-name_right_side { align-items: flex-start; text-align: left; }
.invitation-couple .couple-name__side small {
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Cùng quy ước với hero: nhãn đi theo VAI, sắc nhạt của nguồn đậm thêm một bậc cho đủ
tương phản trên nền `#f5f6f0`. */
.invitation-couple .couple-name__side small.is-groom { color: var(--t67-sage-deep); }
.invitation-couple .couple-name__side small.is-bride { color: var(--t67-rose-deep); }
.invitation-couple .couple-name__ornament {
width: 20px; /* nguồn: `.cm small img { width: 20px }` */
height: auto;
margin-bottom: 8px;
}
.invitation-section {
background: var(--t67-mist);
}
.invitation-section .invitation_wrapper {
position: relative;
width: 100%;
}
.invitation-section .title-parent,
.invitation-section .title-time {
display: inline-block;
border-top: 1px solid var(--t67-line);
border-bottom: 1px solid var(--t67-line);
color: var(--t67-ink-soft);
line-height: 1;
width: 150px;
}
.invitation-section .parent {
color: var(--t67-ink-soft);
margin-top: 40px;
letter-spacing: 1px;
font-size: 1.3rem;
line-height: 2rem;
}
.invitation-section .good-day {
width: 250px;
margin: 0 auto;
}
.invitation-section .main_dday_area {
color: var(--t67-rose);
margin-bottom: 20px;
font-size: 1.5rem;
letter-spacing: 0px;
line-height: 3rem;
}
.invitation-section .main_dday_area .time p {
font-size: 4rem;
}
.invitation-section .main_dday_wrapper {
color: #383838;
}
.invitation-section .invitation-title img.invitation-ornament {
display: block;
width: 100%;
max-width: 300px;
height: auto;
margin: 0 auto 6px;
}
.invitation-section .couple-img {
border-radius: 20px;
overflow: hidden;
}
.invitation-section .title-custom {
justify-content: space-between;
align-items: center;
}
.invitation-section .title-custom h2 {
font-size: 30px;
line-height: 1 !important;
}
.invitation-section .title-custom .text-right {
color: var(--t67-mist);
width: 120px;
}
.invitation-section .title-custom .text-right p {
font-size: 40px;
line-height: 1;
}
.invitation-content p {
line-height: 40px;
color: var(--t67-rose-deep);
}
.invitation-section .couple p {
color: #9a9a9a;
font-size: 1rem;
}
.invitation-section .couple p span {
color: #000;
font-size: 2rem;
}
.invitation-section .couple p:nth-child(2) {
width: 30px;
margin: 0 auto;
}
.invitation-section .wrap-img img {
border-radius: 50%;
width: 80%;
}
.invitation-groom-parent {
font-size: 16px;
font-family: "Be Vietnam Pro", system-ui, sans-serif;
}
.parent-name {
font-weight: bold;
}
/* event-section */
.event-section .event-item {
background-color: var(--t67-mist);
}
.event-section a {
background: var(--t67-sage-deep);
border-color: var(--t67-sage-deep);
}
/* couple section */
.couple-section {
background: var(--t67-paper) url("../img/paper-bg.png") repeat-y center center;
background-size: contain;
}
.couple-section h2 {
line-height: 1 !important;
}
.couple-section p {
/* text-transform: uppercase; */
font-size: 12px;
letter-spacing: 1px;
}
.couple-section h2 {
width: 100%;
margin: 0 auto;
font-size: 1.5rem;
color: var(--t67-ink);
}
.couple-section .wrap-img {
width: 100%;
margin: 0 auto;
}
.couple-section .wrap-img img {
border-radius: 0;
max-width: 350px;
}
.couple-section .member {
gap: 20px;
}
.couple-section .member .wrap-icon {
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: #747474;
}
.couple-section .member .wrap-icon ul {
border-top: 1px dashed #B5B6B8;
width: 250px;
margin: 0 auto;
justify-content: center;
}
.couple-section .member .wrap-icon > span > span {
color: #424242;
}
.couple-section .member .member-contact a {
color: #b6b6b6;
font-size: 35px;
}
.couple-section .member-groom {
/*background: url(../img/contact_groom2.png) -30px top no-repeat;*/
/*background-size: 110%;*/
}
.couple-section .member-bride {
/*background: url(../img/contact_bride2.png) -30px top no-repeat;*/
/*background-size: 110%;*/
}
/* people-section */
.people-section .rounded-circle {
overflow: hidden;
}
.people-section .title {
}
.people-section a {
color: var(--t67-sage-deep);
}
/* wishes-section */
.wish-box {
border-color: #000;
}
.wishes-section button,
.event-section a {
background-color: var(--t67-sage-deep);
border: none;
transition: 0.2s;
}
.wishes-section button:hover,
.event-section a:hover {
opacity: 0.6 !important;
background-color: var(--t67-sage-dark) !important;
border: none !important;
}
/* donate-section */
.donate-section .donate-card {
background: #fff;
}
.donate-card .sub-title {
color: #000;
font-size: 1.3rem;
}
/* footer-section */
.footer-section {
background-color: var(--t67-mist);
}
.footer-section .title {
color: var(--t67-ink);
font-size: 2.6em;
}
.footer-section .sub-title {
font-size: 1.2em;
}
@media screen and (max-width: 640px) {
.modal-donate {
height: 70%;
overflow-y: scroll;
}
.modal-donate h2 {
gap: 10px;
font-size: 32px;
padding-block: 10px;
}
.modal-donate h2 span {
width: 24px;
}
.modal-donate button,
.popup-video button {
/* right: 10px; */
font-size: 24px;
}
.modal-donate .donate-box {
flex-wrap: wrap;
}
.modal-donate .donate-box > div {
width: 100%;
}
.modal-donate .donate-box .donate-card p {
font-size: 14px;
line-height: 20px;
margin-bottom: 15px !important;
}
}
@media (max-width: 414px) {
.section-title {
font-size: 2.5rem;
}
.main_area .time {
text-align: left;
padding-left: 65px;
background: url(../img/flower.png) no-repeat 15px center;
background-size: 50px;
background-color: var(--t67-mist);
}
.main_area .time p:first-child {
margin-bottom: 0 !important;
}
.couple-section .member .wrap-icon {
font-size: 1.5rem;
}
.couple-section .member .member-contact a {
font-size: 20px;
}
.invitation-section .parent,
.invitation-section .main_dday_area {
font-size: 1.2rem;
}
}
#wish-form {
background-color: var(--t67-mist);
border: 1px solid var(--t67-line);
}
button#btn-submit-comment {
background-color: var(--t67-sage-deep);
color: #fff;
text-transform: uppercase;
}
button#btn-submit-comment:hover {
opacity:0.6;
color:black;
}
#show-comments {
background-color: var(--t67-mist);
}
.box-comment {
background-color: white;
}
.reply-comment-box {
border-top: 1px dashed var(--t67-slate);
}
#show-comments::-webkit-scrollbar {
width: 8px;
}
#show-comments::-webkit-scrollbar-thumb {
background-color: var(--t67-slate);
}
.bride-story, .groom-story{
font-family: "Be Vietnam Pro", system-ui, sans-serif;
}
.text-story{
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.weddingplan-footer {
margin: auto;
max-width: 575px;
}
.weddingplan-footer a {
text-decoration: none;
}
.emoji-picker{max-width:100%;display:none;position: absolute;user-select: none!important;background: #fff;right: 0px;z-index: 9999;bottom: -355px;-webkit-box-shadow: 0 1px 2px 0 rgb(60 64 67 / 35%), 0 2px 6px 2px rgb(60 64 67 / 35%);box-shadow: 0 1px 2px 0 rgb(60 64 67 / 35%), 0 2px 6px 2px rgb(60 64 67 / 35%);border-radius: 0.5rem;overflow: hidden;}
.emoji-picker > emoji-picker{--emoji-size:22px;}
@media screen and (max-width: 400px){
.emoji-picker > emoji-picker{ --num-columns: 6;}
}
#wish-form textarea:focus {box-shadow: none;}
#wish-form textarea{margin-bottom:0;border-radius:0!important;resize: none;}
#wish-form .textAreaIcons{position:relative;text-align:right;background: #fff;padding: 10px;border-top: none;border-top: 1px solid #f3f1f1;}
#wish-form .textAreaIcons span{color: #333;cursor:pointer;margin-right:4px;}
.tooltip{ width: 160px;}
.tooltip .tooltip-inner{padding: 8px 12px;font-size: 16px;}
#wish-form .wishes-autocomplete-content{position: absolute;top: 50px;width: 100%;left: 0;z-index: 333;background: #fff;-webkit-box-shadow: 0 1px 2px 0 rgb(60 64 67 / 35%), 0 2px 6px 2px rgb(60 64 67 / 35%);box-shadow: 0 1px 2px 0 rgb(60 64 67 / 35%), 0 2px 6px 2px rgb(60 64 67 / 35%);}
#wish-form .wishes-autocomplete-content input{
background-image: url('../img/searchicon.png')!important;
background-position: 10px!important;
background-repeat: no-repeat!important;
width: 100%!important;
font-size: 16px!important;
padding: 12px 20px 12px 40px!important;
border: 1px solid #ddd!important;
margin-bottom: 0!important;
border-radius:0!important;
}
#wish-form .wishes-autocomplete-content ul{list-style-type: none;margin: 0;padding: 0;max-height: 300px;overflow: auto;display: block;height: auto;text-align:left;}
#wish-form .wishes-autocomplete-content ul li a {
border: 1px solid #ddd!important;
margin-top: -1px!important;
padding: 12px!important;
text-decoration: none!important;
font-size: 15px!important;
color: black!important;
display: block!important;
}
#wish-form .wishes-autocomplete-content ul li a:hover{background-color: #eee!important;}
#wish-form .tooltip-custom {
position: relative;
display: inline-block;
}
/* dresscode */
.event-section .dresscode-colors-event{
position: relative;
display: flex;
align-items: center;
gap: 4px;
background: rgb(246 246 246 / 70%);
padding: 4px;
width:36%;
justify-content: center;
}
.event-section .dresscode-colors-event > .dresscode-colors-item{
border-radius: 50%;
width: 25px;
height: 25px;
}
.event-section .dresscode-colors-wrap{
position: absolute;
bottom: 0;
width: 100%;
}
.event-section .event-item:hover .tooltip-dresscode{
display: block;
}
.event-section .event-item .tooltip-dresscode {
width: 130px;
font-family: sans-serif;
font-size: 14px;
background-color: rgb(255 255 255);
border: 1px solid #eee;
color: #000;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 40px;
display: none;
}
.event-section .event-item .tooltip-dresscode::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: rgb(255 255 255) transparent transparent transparent;
}
@media (max-width:449px){
.event-section .dresscode-colors-event{width: 100%!important;gap: 10px!important;}
.event-section .dresscode-colors-wrap{bottom: 189px!important;}
}
.contact-validation-active .error-handling-messages {
width: 100% !important;
margin-top: 15px !important;
}
.contact-validation-active #success,
.contact-validation-active #c-success,
.contact-validation-active #c-error,
.contact-validation-active #error {
width: 100%;
color: #fff;
padding: 5px 10px;
font-size: 16px;
text-align: center;
display: none;
}
@media (max-width: 767px) {
.contact-validation-active #success,
.contact-validation-active #c-success,
.contact-validation-active #c-error,
.contact-validation-active #error {
font-size: 15px;
}
}
.contact-validation-active #c-success,
.contact-validation-active #success {
background-color: #009a00;
border-left: 5px solid green;
margin-bottom: 5px;
}
.contact-validation-active #c-error,
.contact-validation-active #error {
background-color: #ff1a1a;
border-left: 5px solid red;
}
/* === Gift registry theme === */
/* Bảng màu: Rêu & Hồng đất của theme_93 — sage=#6da899 rose=#cf8b84, cả hai NHẠT.
Nền đặc dưới chữ trắng phải kết ở sắc đậm (#4f7d71/#3f6a5d) mới qua ~AA; sắc nhạt của
nguồn chỉ làm viền và nền hover.
Tiền tố #gifts (1,1,0) thắng class-only base (0,1,0) của component, không cần !important. */
#gifts .gift-card-price { color: var(--t67-sage-deep); } /* 4.5:1 trên nền giấy */
#gifts .gift-buy-link { border-color: var(--t67-sage); color: var(--t67-sage-deep); }
#gifts .gift-buy-link:hover { background: #eaf1ee; color: var(--t67-sage-deep); }
#gifts .gift-claim-btn { background: linear-gradient(45deg, var(--t67-sage-deep), var(--t67-sage-dark)); }
#gifts .gift-header { background: linear-gradient(135deg, var(--t67-sage-deep), var(--t67-sage-dark)); }
#gifts .gift-submit { background: linear-gradient(45deg, var(--t67-sage-deep), var(--t67-sage-dark)); }
#gifts .gift-info-ic { background: #e2ede9; color: var(--t67-sage-deep); }
#gifts .gift-copy-ic { color: var(--t67-sage-deep); }
#gifts .gift-copy-ic:hover { color: var(--t67-sage-dark); }
#gifts .gift-cta-shopee { background: linear-gradient(90deg, var(--t67-sage-deep), var(--t67-sage-dark));
box-shadow: 0 10px 24px rgba(79,125,113,.34); color: #fff; }
/* Chắn rò rỉ (chung): a / h* toàn cục của template (0,1,1) thắng base class-only (0,1,0). */
#gifts .gift-modal-title { color: #fff; }
#gifts .gift-release-link { color: var(--t67-rose-deep); }
#gifts .gift-release-link:hover { color: #8f4f49; }
/* Tự mua: pha rêu + hồng đất của nguồn -> nền ngà phớt hồng */
#gifts .gift-selfbuy { background: #f7f1ef; border-color: #e6d5d1; }
#gifts .gift-selfbuy-ic { background: #f0e2df; color: var(--t67-rose-deep); }
#gifts .gift-copyall { color: var(--t67-sage-deep); }
#gifts .gift-copyall:hover { color: var(--t67-sage-dark); }
/* ══ NGÔN NGỮ THỊ GIÁC CỦA NGUỒN Ở CÁC SECTION ══════════════════════════════════════
Không chỉ hero mới phải bám nguồn. Mỗi khối dưới đây có khối tương ứng trong theme_93,
số đo lấy từ theme.css của nguồn — ghi kèm ở từng chỗ. */
/* Tiêu đề section — nguồn đóng khung tiêu đề bằng CẶP GÓC (ô + mái) lệch chéo nhau:
góc trên-trái và góc dưới-phải (map-title.png, groombride-title.png). Chỉ áp cho `h2`:
`.section-title` còn được dùng cho một `div` bọc lưới người (couple-section) và cho
tiêu đề trong modal mừng cưới — thêm góc vào đó là khung ôm nhầm cả lưới ảnh. */
h2.section-title {
position: relative;
display: block;
padding: 30px 0 26px;
color: var(--t67-ink);
}
.donate-modal h2.section-title {
padding: 0;
}
h2.section-title::before,
h2.section-title::after {
content: "";
position: absolute;
width: 118px;
height: 42px;
pointer-events: none;
}
.donate-modal h2.section-title::before,
.donate-modal h2.section-title::after {
display: none;
}
h2.section-title::before {
left: 0;
top: 0;
background: url("../img/corner-tl.png") no-repeat left top;
background-size: contain;
}
h2.section-title::after {
right: 0;
bottom: 0;
background: url("../img/corner-br.png") no-repeat right bottom;
background-size: contain;
}
/* Lời ngỏ — nguồn `.invitation_area`: nền #f5f6f0, hai dải hồi văn dọc ép hai bên
(`.reception_area::before/::after`, rộng 20px, cách mép 20px), thân chữ #a37976
line-height 200%, gạch dưới 2px #E2CECA. */
.invitation-section {
position: relative;
background: var(--t67-mist);
}
.invitation-section::before,
.invitation-section::after {
content: "";
position: absolute;
top: 0;
width: 14px;
height: 100%;
background: url("../img/fret-vertical.png") repeat-y center top;
background-size: contain;
opacity: .55;
pointer-events: none;
}
.invitation-section::before { left: 10px; }
.invitation-section::after { right: 10px; }
.invitation-content p {
color: var(--t67-mauve);
line-height: 2;
letter-spacing: normal;
}
.invitation-section .invitation-content {
margin: 0 8px 10px;
padding-bottom: 30px;
border-bottom: 2px solid #e2ceca;
}
/* Nguồn đặt đôi uyên ương (sub-icon.png, rộng 100px) ngay trên dòng tên đôi. */
.invitation-couple::before {
content: "";
display: block;
width: 100px;
height: 47px;
margin: 0 auto 16px;
background: url("../img/ducks.png") no-repeat center center;
background-size: contain;
}
/* Lịch cưới — nguồn `.main_dday_area`: nền #ececec, dải sọc saekdong bám mép TRÊN
(day-topbg.png, cao 17px ở khung 430), kẻ bảng #dadad9, ngày cưới là chấm tròn đặc. */
.weddingdate-section {
position: relative;
background: #ececec !important;
padding-top: 34px !important;
}
.weddingdate-section::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 17px;
background: url("../img/saekdong-thin.png") no-repeat center top;
background-size: cover;
}
/* Donor khoá `width` cho khung ornament theo cỡ ảnh CŨ của nó; thả ảnh nguồn nhỏ hơn vào
là ornament dạt về mép trái. Trả về khối căn giữa. */
.weddingdate-section .wrap-img {
width: 100%;
text-align: center;
}
.weddingdate-section .wrap-img img {
width: 46px;
margin: 0 auto;
}
.weddingdate-section .mini_calendar td #today {
background-color: var(--t67-rose-deep);
color: #fff;
}
/* Thư viện ảnh — nguồn `.gallery_area` mở đầu bằng cụm hoa (gallery-title.png). */
.gallery-section h2.section-title::before,
.wishes-section h2.section-title::before {
width: 56px;
height: 52px;
left: 50%;
transform: translateX(-50%);
background-position: center top;
}
.gallery-section h2.section-title::after,
.wishes-section h2.section-title::after {
display: none;
}
.gallery-section h2.section-title {
padding-top: 62px;
}
.gallery-section h2.section-title::before {
background-image: url("../img/flower-cluster.png");
}
/* Sổ lưu bút — nguồn `.guest_area`: cụm hoa xanh rêu, tên người chúc màu #a7977e. */
.wishes-section h2.section-title {
padding-top: 62px;
}
.wishes-section h2.section-title::before {
background-image: url("../img/flower-teal.png");
}
.wishes-section .box-comment strong,
.wishes-section .box-comment .name {
color: var(--t67-gold);
}
/* Cô dâu & chú rể — nguồn `.bcm` đặt hoa nhỏ (icon-01.png, 20px) GIỮA hai tên. */
.couple-section .member .wrap-icon > span {
color: var(--t67-ink);
}
.couple-section .member-groom .wrap-icon::after,
.couple-section .member-bride .wrap-icon::after {
content: "";
display: block;
width: 20px;
height: 20px;
margin: 14px auto 0;
background: url("../img/flower.png") no-repeat center center;
background-size: contain;
}
/* Chân trang — nguồn đóng trang bằng dải sọc saekdong dày (bottom-bg.png) rồi mới tới
dòng cảm ơn. */
.footer-section {
position: relative;
background: var(--t67-paper) !important;
padding-top: 60px !important;
}
.footer-section::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 36px;
background: url("../img/saekdong.png") no-repeat center top;
background-size: cover;
}
/* ══ MÀN MỞ ĐẦU ══════════════════════════════════════════════════════════════════════
Nguồn `.intro`: fixed phủ kín, z-index 9999, nền giấy bg.png repeat-y/contain, dải
hoạ tiết bám mép trên (top-bg.png) và mép dưới (intro-bottom-bg.png). Số đo trên trang
sống @430px:
dải trên 430×122 · dải dưới 430×138, cả hai KHÔNG có class animation (hiện ngay)
hai cột tên .intro_dday cao 200px, margin 240px auto 60px, chữ 3.5em (56px),
letter-spacing 1px, màu #555; .t1 ở 50%-70px, .t2 ở 50%+20px, mỗi cột
rộng 50px + word-break -> tên Hàn 3 ký tự xếp DỌC thành hai cột hẹp
dòng mời .intro_img padding 0 60px, ảnh invitation.png ("초대합니다") rộng 150px
Nhịp chuyển động ở js/intro-opening.js (đọc từ front.js của nguồn). */
.tpl-intro {
position: fixed;
inset: 0;
/* Nguồn để 9999 vì trên trang nó không có gì cao hơn. Ở repo thì `.player` (99999,
dựng bởi assets/js/config.js) và `.weddingplan-logo` (99998, trong layouts/app.blade.php)
nổi lên trên — cả hai là tài sản dùng chung của mọi template, không được sửa. Nên
nâng màn intro lên trên chúng; cả hai hiện lại ngay khi màn tắt ở giây thứ 5. */
z-index: 100000;
/* Màn chỉ CHE bằng mắt, không nhận sự kiện chuột. Để nó nhận thì `elementFromPoint`
trả về chính nó -> mọi phép đo vùng chạm trong 5 giây đầu đo nhầm vào tấm phủ (phép
kiểm nút nhạc chạy đúng ở mốc t=3s), và cú click thật đầu tiên của người xem bị nuốt
mất. Cú chạm bỏ qua màn bắt ở `window` — sự kiện vẫn nổi lên tới đó.
Cũng vì vậy màn KHÔNG khoá cuộn — nguồn cũng không khoá, và cú cuộn tự đóng màn. */
pointer-events: none;
overflow: hidden;
background: var(--t67-paper) url("../img/paper-bg.png") repeat-y center center;
background-size: contain;
text-align: center;
opacity: 1;
transition: opacity 500ms ease-in-out; /* jQuery fadeOut() của nguồn mặc định 400ms */
}
.tpl-intro.is-gone {
opacity: 0;
}
.tpl-intro__top,
.tpl-intro__bottom {
position: absolute;
left: 0;
width: 100%;
font-size: 0;
z-index: 1;
}
.tpl-intro__top { top: 0; }
.tpl-intro__bottom { bottom: 0; }
.tpl-intro__top img,
.tpl-intro__bottom img {
width: 100%;
height: auto;
}
/* Nguồn neo hai cột tên từ MÉP TRÊN (margin-top 240px), không căn giữa dọc. Giữ đúng vậy
nhưng kẹp theo chiều cao khung để màn thấp (SE, cửa sổ chia đôi) không đẩy dòng mời rơi
xuống dưới dải hoạ tiết đáy. */
.tpl-intro__names {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 40px; /* nguồn: khe giữa .t1 và .t2 đúng 40px */
margin-top: clamp(120px, 30vh, 240px);
min-height: 150px;
}
/* Nguồn ép cột rộng 50px để tên Hàn 3 ký tự rơi mỗi ký tự một dòng. Tên Việt xuống dòng
theo TỪ nên ra đúng nhịp cột dọc đó mà không cần cắt giữa từ — chỉ phải nới bề ngang
cho vừa từ dài nhất ("Nguyễn") và hạ cỡ chữ từ 56px xuống. */
.tpl-intro__name {
width: clamp(92px, 32vw, 132px);
font-family: "Be Vietnam Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(24px, 7vw, 34px);
line-height: 1.25;
letter-spacing: 1px; /* nguồn: .intro_dday letter-spacing 1px */
color: #555555; /* nguồn */
overflow-wrap: break-word;
}
.tpl-intro__invite {
position: relative;
z-index: 2;
margin-top: clamp(28px, 7vh, 60px);
padding: 0 60px; /* nguồn: .intro_img padding 0 60px */
font-family: "Cormorant Garamond", serif;
font-size: 20px;
letter-spacing: .28em;
text-transform: uppercase;
color: #4a4a4a;
}
/* Nguồn kẹp dòng mời giữa hai dấu hoa thị (nằm trong invitation.png). */
.tpl-intro__invite span::before,
.tpl-intro__invite span::after {
content: "✻";
margin: 0 .5em;
font-size: .8em;
color: var(--t67-rose);
letter-spacing: normal;
}
.tpl-intro__name,
.tpl-intro__invite {
opacity: 0;
transform: translateY(50px); /* animationUp: nguồn đặt top:50px */
transition: opacity 1500ms ease, transform 1500ms ease; /* nguồn: animate(..., 1500) */
}
.tpl-intro__name.is-on,
.tpl-intro__invite.is-on,
.tpl-intro.is-reduced .tpl-intro__name,
.tpl-intro.is-reduced .tpl-intro__invite {
opacity: 1;
transform: translateY(0);
}
.tpl-intro.is-reduced .tpl-intro__name,
.tpl-intro.is-reduced .tpl-intro__invite {
transition-duration: 1ms;
}
/* Mưa cánh hoa — nguồn gọi $(document).snowfall() trên TOÀN TRANG với f-01.png/f-02.png;
ở đây gói trong màn intro rồi tắt cùng nó (xem chú thích đầu js/intro-opening.js). */
.tpl-intro__petals {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
}
.tpl-intro__petal {
position: absolute;
top: -40px;
display: block;
background-repeat: no-repeat;
background-size: contain;
animation-name: tpl67-petal-fall;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
}
@keyframes tpl67-petal-fall {
from { transform: translate3d(0, 0, 0) rotate(0deg); }
to { transform: translate3d(24px, 108vh, 0) rotate(320deg); }
}
/* Người đã tắt chuyển động: không rắc cánh hoa (JS cũng không dựng), khoá keyframe phòng
trường hợp DOM đã dựng xong trước khi class kịp áp. */
.tpl-intro.is-reduced .tpl-intro__petals {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.tpl-intro__petal {
animation: none;
display: none;
}
}
/* Cặp với js/motion-scrub-hero.js — báo trước cho trình duyệt ba lớp sẽ bị ghi transform
liên tục theo cuộn, để nó tách sẵn thành lớp hợp thành riêng. */
.banner-section #main-image,
.banner-section .hero-band,
.banner-section .hero-knot img {
will-change: transform;
}
/* ══ KHOÁ TỈ LỆ ẢNH NGƯỜI DÙNG TẢI LÊN ═══════════════════════════════════════════════
Ảnh demo của trang xem thử là ảnh VUÔNG / 4:3, nên `height: auto` vẫn "trông đúng"
suốt quá trình dựng; một tấm dọc 9:16 thật kéo khung thành 1.78 và đẩy cả khối xuống
dưới màn hình. Khoá ở KHUNG chứ không ở `![]()
`: `aspect-ratio` trên `![]()
` mất tác
dụng ngay khi thẻ có thuộc tính `width`/`height`.
`object-position: center top` vì ảnh chân dung dọc cắt giữa là mất mặt người. */
.couple-section #groom-image,
.couple-section #bride-image,
.invitation-section #couple-image,
.invitation-section .wrap-img-couple {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1; /* nguồn cắt ảnh dâu/rể theo khung vuông (/crop/) */
overflow: hidden;
}
.couple-section #groom-image img,
.couple-section #bride-image img,
.invitation-section #couple-image img,
.invitation-section .wrap-img-couple img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* Dòng giá tham khảo của sổ quà: base component để #999 trên nền trắng — 2.85:1.
(t65/t66 cũng phải đè ở phạm vi template vì lý do này.) */
#gifts .gift-card-price-ref { color: #767676; }
/* Đếm ngược — nguồn `.dd`: khối chữ nằm trong KHUNG NGOẶC hai đầu (dday-bg.png, 803×338,
`background-size: contain`, căn giữa), chữ #859692 với con số đậm hơn. */
.weddingdate-section #clock {
padding: 26px 10px;
background: url("../img/dday-frame.png") no-repeat center center;
background-size: contain;
}
/* Khối lời mời — nguồn ép hoạ tiết hồi văn ở CẢ BỐN cạnh: hai dải dọc (`.reception_area
::before/::after`) cộng dải ngang `.reception_line`. Hai dải dọc ở khối trên; đây là
hai dải ngang khép kín khung. */
.invitation-section .invitation_wrapper::before,
.invitation-section .invitation_wrapper::after {
content: "";
display: block;
height: 14px;
margin: 0 -4px;
background: url("../img/fret-horizontal.png") repeat-x center center;
background-size: auto 100%;
opacity: .55;
}
.invitation-section .invitation_wrapper::before { margin-bottom: 34px; }
.invitation-section .invitation_wrapper::after { margin-top: 34px; }
/* Dòng tên đôi — nguồn gạch chân bằng dải hoạ tiết (groombride_line02.png) chứ không
phải kẻ 1px. */
.invitation-couple::after {
content: "";
display: block;
width: 70%;
height: 8px;
margin: 14px auto 0;
background: url("../img/name-underline.png") no-repeat center center;
background-size: 100% 100%;
}
/* Chân trang — nguồn khép trang bằng dải sóng seigaiha (bottom-bg2.png) bám mép dưới. */
.footer-section::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 70px;
background: url("../img/wave-bottom.png") no-repeat center bottom;
background-size: cover;
pointer-events: none;
}
.footer-section .container-fluid {
position: relative;
z-index: 1;
}
/* Dòng cảm ơn cuối trang đi cùng hệ chữ viết tay của các tiêu đề section. */
.footer-section .title {
font-family: "Dancing Script", cursive;
font-size: 2.4rem;
color: var(--t67-ink);
}
/* Lời giới thiệu dâu/rể — nguồn để phần chữ nhỏ dưới ảnh ở `0.9em` (≈14.4px), màu
`#636363`, căn giữa (`.bcm .contact_inner > div`). Ở đây nó đang thừa hưởng 23.4px
chữ viết tay từ `.section-title` bọc ngoài (`div.section-title.wrap-people`) — cỡ đó
hợp với một dòng tên, KHÔNG hợp với đoạn tự giới thiệu dài mà người dùng tự nhập.
Hạ về cỡ thân chữ và đổi sang font thân: chữ viết tay đọc kém hẳn khi qua vài dòng. */
.couple-section .member #groom-intro,
.couple-section .member #bride-intro {
max-width: 320px; /* kẹp độ dài dòng ~45-55 ký tự cho dễ đọc */
margin: 12px auto 0;
font-family: "Be Vietnam Pro", system-ui, sans-serif;
font-size: clamp(13.5px, 3.4vw, 15px);
font-weight: 300;
line-height: 1.75;
letter-spacing: normal;
color: var(--t67-ink-soft); /* #636363 của nguồn — 5.8:1 trên nền giấy */
overflow-wrap: break-word; /* bio dán từ chỗ khác có thể chứa chuỗi không khoảng trắng */
}