::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background-color: #fff;
}
::-webkit-scrollbar-thumb {
  background-color: #94a37e;
}
body {
  font-family: 'Be Vietnam Pro', sans-serif;
  /* Nguồn không có "thẻ" nào: wrapper trắng, tràn hết bề ngang. Repo lại giới hạn 577px,
     nên phần lộ ra hai bên để trung tính rất nhạt — rêu đặc của donor làm trang nặng. */
  background: #eae7e0;
}

.story-section .timeline-card::before {
  border-color: #94a37e;
}
.story-section .timeline .title::before {
  border-color: #94a37e;
}
.story-section .timeline-1 li {
  border-left-color: #f9f9f9;
}
.story-section .timeline-1 li:before {
  border-color: #94a37e;
  box-shadow: 3px 3px 0px #f9f9f9;
}
.section-bg-affect:nth-child(even) {
  /* đo trên nguồn: khối lời mời nền rgb(245,237,231) */
  background-color: #f5ede7;
}
/* .section-bg-affect:nth-child(even) {
  background-color: #f8f2f2;
} */
/* .section-bg-affect {
  background-color: #f6f1f3;
} */
/* .section-bg-affect {
  background-color: #f7f0e9;
} */
.story-section .timeline-card::before {
  border-color: #dfa08b;
}

.story-section .timeline .title::before {
  border-color: #dfa08b;
}

.story-section .timeline-1 li {
  border-left-color: #dfa08b;
}

.story-section .timeline-1 li:before {
  border-color: #dfa08b;
  box-shadow: 3px 3px 0px #dfa08b;
}

.donate-section .donate-box .donate-card {
  width: 100%;
  border: 1px dashed #cfc3a8;
 
}
.donate-card.p-4.rounded.text-center {
  border: 1px dashed #dfa08b;
}
.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 #a89b7f;
}
.offcanvas-menu .nav-link {
  font-size: 1.2rem;
  text-transform: capitalize;
}
.section-title {
  /* Đo trên nguồn: tiêu đề section của theme207 là "LOCATION" — 16px, ls 1px, chữ HOA,
     nét thường, đen, căn giữa. Nguồn KHÔNG có tiêu đề serif cỡ lớn nào; phần chữ trang
     trí do ẢNH đảm nhiệm (002.png, 020b.png). Nên bỏ hẳn serif 2.1rem của donor. */
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #1f2328;
}
.section-sub-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  letter-spacing:.2px;
}
.title {
  font-family: 'Be Vietnam Pro', sans-serif
}
.sub-title {
  font-family: 'Be Vietnam Pro', sans-serif
}
/* Opening Section */
.opening-section {
  position: fixed;
  width: 100%;
  max-width: 577px;
  height: 100vh;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/bg.png") no-repeat top left;
  background-size: cover;
  background-color: #fff;
  opacity: 1;
  visibility: visible;
  transition: visibility 1s ease-in-out, opacity 1s ease-in-out;
  z-index: 9999;
}
.opening-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 185px;
  display: block;
  background: url("../img/sprig-notice.png") no-repeat center bottom;
  background-size: cover;
}
.opening-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 185px;
  display: block;
  background: url("../img/sprig-wide.png") no-repeat center bottom;
  /* contain, không cover: sprig-wide.png là nhánh lá 338×75 nền trong suốt — cover trên
     dải 185px sẽ phóng nó lên nhòe hết. Dải trên (sprig-notice.png 1000×180) thì cover
     đúng vì nó là nền kem đặc, tràn viền mới liền mạch. */
  background-size: 260px auto;
}
.opening-section.hide {
  opacity: 0;
  visibility: hidden;
}
.opening_area {
  /* position: relative; */
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #f2ece1;
  border-radius: 10px;
}
.opening_area_inner {
  background-color: #fff;
  height: 100%;
  border-radius: 10px;
}
.opening-flower {
  width: 200px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5%;
  opacity: 0;
  visibility: hidden;
  transition: all 3s ease-in-out;
}
.opening-flower.show {
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
}
.opening-save {
  width: 200px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40%;
  opacity: 0;
  visibility: hidden;
  transition-delay: 4s;
  transition: all 3s ease-in-out;
}
.opening-save.show {
  bottom: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
}
.opening-title {
  width: 200px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30%;
  opacity: 0;
  visibility: hidden;
  transition-delay: 7s;
  transition: all 3s ease-in-out;
}
.opening-title.show {
  bottom: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
}
.opening_area .sub-intro {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: all 2s ease-in-out;
  transition-delay: 2s;
  font-size: 16px;
  bottom: 5%;
  color: #9a9490;
}
.opening_area .sub-intro.show {
  bottom: 18%;
  opacity: 1;
  visibility: visible;
  font-size: 20px;
}
.opening-date .text-year {
  font-size: 30px;
  color: #fff;
}
.opening-date .text-day {
  line-height: 1;
}
.opening-date .text-day span,
.opening-date .text-month {
  letter-spacing: 1px;
  color: #d5cbb1;
  font-size: 7rem;
  text-align: center;
  line-height: 1;
}
.sub-intro p {
  font-size: 2rem;
  color: #242323;
}
.sub-intro p img {
  width: 25px;
}
.main_area .text-and {
  padding: 0 10px;
}
/* Banner Section */
/* .banner-section .title-head — ĐÃ GỠ khỏi blade: nguồn mở trang bằng chính tấm ảnh,
   không có dải chữ dẫn nào. Rule cũ xoá theo để không để lại CSS chết. */
.main_area {
  /* Nguồn là nền TRẮNG PHẲNG, không vân giấy. bg.png là vân giấy ngả xám-lạnh của donor,
     chỏi hẳn với tông kem ấm và làm nặng trang. */
  background: #fff;
}
.main_area .wrap-img-title {
  width: 100%;
}
.main_area .wrap-img-title img {
  width: 250px;
}
/* Ô vuông từng ký tự + hai đường kẻ trên/dưới là cơ chế ngày của donor t6.
   Nguồn thegoodday để ngày là CHỮ THƯỜNG một dòng, không viền, không ô.
   Giữ selector nhưng trả về mặc định để không còn dấu vết khung. */
.main_area .wrap-img-title .wrap-text {
  width: auto;
  margin: 0 auto;
  padding: 0;
  border: 0;
}
.main_area .text-sub {
  text-align: center;
  color: #847c74;
  background-color: #ddd2bb;
}
.main_area .text-sub span {
  font-weight: bold;
}
.main_area .invitation_sub p:last-child {
  font-size: 30px;
}
.main_area .text-marriage {
  font-size: 40px;
  color: #272727;
  font-weight: bold;
}
.main_area .day_wrapper {
  width: 100%;
  margin: 0 auto;
  background: url("../img/sprig-line.png") no-repeat top center;
  background-size: 300px;
}
.main_area .day_wrapper p {
  color: #323232;

}
.main_area .name-user {
  font-size: 40px;
  color: #4a3f31;
  align-items: center;
  justify-content: center;
}
.main_area .name-user span {
  line-height: 45px;
  font-size: 26px;
}
.main_area .name-user .text-and {
  font-size: 20px;
  line-height: 20px;
  color: #3b3a36;
}
.main_area .text-desc {
  color: #525252;
  font-size: 20px;
  font-weight: bold;
}
.main_area .text-desc span {
  display: block;
  font-weight: bold;
  font-size: 26px;
}
.main_area .time {
  background: url("../img/leaf-sage.png") no-repeat 100px center;
  background-size: 42px;
  /* nguồn để chữ trên nền trắng, không có khối be đằng sau */
  background-color: transparent;
}
/* accessibility-btn */
.accessibility-btn {
  background-color: #94a37e;
  border: none;
}
.accessibility-btn:hover {
  opacity: 0.6 !important;
  background-color: #94a37e;
  border: none;
}
/* video-section */
.video-section iframe {
  /* đo trên nguồn: cả 15 ảnh đều border-radius 0 — không bo góc ở đâu cả */
  border-radius: 0;
  overflow: hidden;
}
/* gallery-section */
#btn-see-more-gallery{
  /* Nguồn: nút là chữ nhật charcoal GÓC VUÔNG, chữ nhỏ giãn ký tự, bề ngang hẹp
     (xem nút 웨딩홀 전화하기). Bo 50px + nền rêu là ngôn ngữ của donor. */
  border-radius: 0;
  padding: 13px 30px;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gallery-section .btn-secondary.btn-see-more-gallery {
  background: #4a4a4a;
  border-color: #4a4a4a;
}
.gallery-item{
  cursor: pointer;
}
/* .lg-backdrop/.lg-outer đã gỡ: lightGallery không còn trong bundle template64
   (đã 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: #94a37e;
}
.weddingdate-section .mini_calendar {
  padding-bottom: 18px;
  border-bottom: 1px solid #c6c6c6;
}
.weddingdate-section .mini_calendar table th {
  color: #5c5c5c;
  border-top: 1px solid #CFCFD0;
  border-bottom: 1px solid #CFCFD0;
}

.weddingdate-section .mini_calendar td {
  color: #484747;
}
.weddingdate-section .mini_calendar td #today {
  background: #cfa4a4;
  color: #fff;
}
.weddingdate-section #clock > div {
  color: #94a37e;
}
.weddingdate-section .wrap-img {
  width: 150px;
  margin: 0 auto;
}
tion */ .story-section .timeline .title {
  color: #a89b7f;
}
.timeline-card .img-holder {
  border-radius: 20px;
  overflow: hidden;
}
.invitation-couple {
  color: #a89b7f;
}
.invitation-couple p {
  color: #a88290;
  font-size: 2rem;
}
.invitation-couple .text {
  gap: 10px;
  align-items: baseline;
  /* Donor để `d-flex` mà không khai `flex-wrap`, tức `nowrap`. Hàng này có 5 mảnh anh em
     (nhãn + tên + ♥ + tên + nhãn) và tên cỡ 2rem không co xuống dưới min-content, nên nó
     TRÀN thay vì xuống dòng: đo @375px khung rộng 303px mà nội dung 338px -> tràn đều
     hai bên, nhãn `groom`/`bride` bị cắt cụt ở cả hai mép.
     Cho xuống dòng là hết tràn; `justify-content: center` sẵn có lo căn giữa từng dòng. */
  flex-wrap: wrap;
}
/* Tên dài tự xuống dòng thì các dòng bên trong phải cùng ôm vào ♥: vế trái dồn phải, vế
   phải dồn trái — cùng nguyên tắc soi gương với khối tên ở hero (.name-col). Không có nó
   thì dòng thứ hai của tên canh trái trong cả hai vế, nhìn lệch hẳn về một phía. */
.invitation-couple .couple-name-first  { text-align: right; }
.invitation-couple .couple-name-second { text-align: left; }
.invitation-couple .text small {
  font-size: 1rem;
}
/* Tên dài xuống dòng: hai vế cùng ôm vào ♥ ở giữa thay vì cùng dạt trái. */
.invitation-couple .text .couple-name-first {
  text-align: right;
}
.invitation-couple .text .couple-name-second {
  text-align: left;
}
.invitation-section {
  background: url("../img/bg.png");
}
.invitation-section .invitation_wrapper {
  position: relative;
  width: 100%;
}
.invitation-section .title-parent,
.invitation-section .title-time {
  display: inline-block;
  border-top: 1px solid #B9B8BD;
  border-bottom: 1px solid #B9B8BD;
  color: #545454;
  line-height: 1;
  width: 150px;
}
.invitation-section .parent {
  color: #545454;
  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: #c99591;
  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 {
  width: 50px;
}
.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: #e6dfd0;
  width: 120px;
}
.invitation-section .title-custom .text-right p {
  font-size: 40px;
  line-height: 1;
}
.invitation-content p {
  line-height: 40px;
  color: #bc827e;
}
.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', sans-serif;
}
.parent-name {
  font-weight: bold;
}
/* event-section */
.event-section .event-item {
  background-color: #f7f0e9;
}
/* Nút "Add to Calendar" / "View Map": than chì + chữ trắng — cùng ngôn ngữ với nút
   "SEE ALL PHOTOS" ở gallery (#4a4a4a, đo từ trang nguồn thegoodday). Nền rêu #94a37e là
   màu của donor, lạc quẻ trên nền hồng kem #f5ede7 của section.
   Vì sao phải khai cả `color` VÀ phải nâng bậc chọn lên `.tpl-scrub`: component event gắn
   class `section-sub-title` lên chính thẻ nút, mà `.tpl-scrub .section-sub-title
   { color: #55606c }` (chữ thân bài, bậc 0-2-0) đè mất chữ trắng mặc định của Bootstrap.
   Kết quả cũ: #55606c trên #94a37e = 2,38:1, dưới hẳn ngưỡng WCAG AA 4,5:1.
   Nay #fff trên #4a4a4a = 8,9:1. */
.tpl-scrub .event-section a {
  background: #4a4a4a;
  border: none;
  color: #fff;
  transition: 0.2s;
}
.tpl-scrub .event-section a:hover {
  /* Bootstrap đổi nền `.btn-secondary` khi hover nên phải giữ lại bằng !important —
     giống cách nút wishes tự giữ màu của nó ở dưới. Hiệu ứng hover là mờ đi (opacity .6),
     không phải đổi màu. */
  background-color: #4a4a4a !important;
  color: #fff;
}

/* couple section */
.couple-section {
  background: url("../img/bg.png");
}
.couple-section h2 {
  line-height: 1 !important;
}
.couple-section p {
  /* text-transform: uppercase; */
  font-size: 12px;
  letter-spacing: 1px;
}
.couple-section h2 {
  /* Đã gỡ `background: url(../img/groombride.png)` + `color: #fff` của donor. Ảnh đó là
     chữ ĐỐT CỨNG tiếng Anh ("Groom & Bride / A GREAT GROOM AND A BEAUTIFUL BRIDE.") nên
     không dịch được sang 34 locale, mà donor lại bôi trắng chữ h2 thật để nhường chỗ cho
     nó — thành ra `wedding.general.couple_title` đã dịch sẵn thì vô hình, còn người xem
     tiếng Việt đọc phải chữ Anh. Giờ h2 in chữ thật, ăn màu #1f2328 chung với mọi
     .section-title khác. `width: 70%` cũng bỏ: nó cắt theo bề ngang ẢNH, ép tiêu đề
     tiếng Việt xuống dòng vô cớ. */
  font-size: 1.5rem;
}
.couple-section .wrap-img {
  width: 100%;
  margin: 0 auto;
}
.couple-section .wrap-img img {
  border-radius: 50%;
  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: #94a37e;
}

/* wishes-section */
.wish-box {
  border-color: #000;
}
/* `.event-section a` đã tách khỏi cụm dùng chung này: nút sự kiện nay là than chì
   (xem khối event-section ở trên), để lại đây thì nền rêu chỉ là paint chết bị đè. */
.wishes-section button {
  background-color: #94a37e;
  border: none;
  transition: 0.2s;
}
.wishes-section button:hover,
.event-section a:hover {
  opacity: 0.6 !important;
  border: none !important;
}
.wishes-section button:hover {
  background-color: #94a37e !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: #f7f0e9;
}
.footer-section .title {
  color: #4a3f31;
  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: 1.9rem;
  }
  .main_area .time {
    text-align: left;
    padding-left: 65px;
    background: url(../img/leaf-sage.png) no-repeat 15px center;
    background-size: 50px;
    background-color: #ddd2bb;
  }
  .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: #b9c4a3;
}
button#btn-submit-comment {
  background-color: #78806a;
  color: #fff;
  text-transform: uppercase;
}
button#btn-submit-comment:hover {
  opacity:0.6;
  color:black;
}
#show-comments {
  background-color: #b9c4a3;
}
.box-comment {
  background-color: white;
}
.reply-comment-box {
  border-top: 1px dashed #78806a;
}
#show-comments::-webkit-scrollbar {
  width: 8px;
}
#show-comments::-webkit-scrollbar-thumb {
  background-color: #78806a;
}
.bride-story, .groom-story{
	font-family:'Be Vietnam Pro', 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 === */
/* Palette: Olive & Cream — olive-sage=#94a37e cream=#ddd2bb (mixed; legacy).
   Olive is light -> gradients end on deep olive #5e6a47 so white text passes ~AA.
   #gifts prefix (1,1,0) beats the component class-only base (0,1,0), no !important. */
#gifts .gift-card-price      { color: #55603f; }              /* readable deep-olive (~4.7:1) */
#gifts .gift-buy-link        { border-color: #94a37e; color: #55603f; }
#gifts .gift-buy-link:hover  { background: #eff2e8; color: #55603f; }
#gifts .gift-claim-btn       { background: linear-gradient(45deg, #7f9068, #5e6a47); }
#gifts .gift-header          { background: linear-gradient(135deg, #7f9068, #5e6a47); }
#gifts .gift-submit          { background: linear-gradient(45deg, #7f9068, #5e6a47); }
#gifts .gift-info-ic         { background: #f1ece0; color: #55603f; }
#gifts .gift-copy-ic         { color: #55603f; }
#gifts .gift-copy-ic:hover   { color: #55603f; }
#gifts .gift-cta-shopee      { background: linear-gradient(90deg, #7f9068, #5e6a47);
                               box-shadow: 0 10px 24px rgba(148,163,126,.36); color: #fff; }
/* Leak defenses (universal): template global a / h* (0,1,1) outrank class-only base (0,1,0). */
#gifts .gift-modal-title     { color: #fff; }
#gifts .gift-release-link    { color: #E8556A; }
#gifts .gift-release-link:hover { color: #d23a51; }
/* Self-buy mixed olive/cream -> soft olive-cream tint */
#gifts .gift-selfbuy         { background: #f1f2e8; border-color: #dde3d0; }
#gifts .gift-selfbuy-ic      { background: #f1ece0; color: #55603f; }
#gifts .gift-copyall         { color: #55603f; }
#gifts .gift-copyall:hover   { color: #55603f; }


/* ==========================================================================
   Dáng nguồn thegoodday theme207 — đo trực tiếp trên trang sống, không đoán
   (https://thegoodday.kr/invitation/view/94564 @430px)

   Khác biệt cốt lõi với donor t6: nguồn PHẲNG TRẮNG, khoảng trắng rất rộng
   (khối lời mời padding-top 130px), chữ nhỏ căn giữa lh 1.8, ảnh full-bleed
   KHÔNG bo góc, cánh hoa nhỏ rải rác, kẻ hairline. Donor thì nhiều khối màu,
   nút bo tròn, vân giấy. Khối này lập lại nhịp của nguồn.

   KHÔNG chép letter-spacing -1.8px của nguồn: đó là tracking âm cho chữ Hàn,
   đè lên dấu tiếng Việt là dính chữ.
   ========================================================================== */

/* Nhịp khoảng trắng: nguồn cho mỗi khối thở rất rộng, py-5 (48px) của Bootstrap là chật */
.tpl-scrub .invitation-section,
.tpl-scrub .couple-section,
.tpl-scrub .gallery-section,
.tpl-scrub .weddingdate-section,
.tpl-scrub .video-section {
  padding-top: 90px !important;
  padding-bottom: 70px !important;
}

/* Chữ thân bài: xám-xanh #55606c, giãn dòng 1.8, nét mảnh — đo trên nguồn */
.tpl-scrub .invitation-content p,
.tpl-scrub .invitation-section .couple p,
.tpl-scrub .section-sub-title {
  color: #55606c;
  line-height: 1.8;
  font-weight: 300;
}

/* Tiêu đề phụ dưới tiêu đề section: nguồn để rất nhỏ, giãn ký tự, xám nhạt */
.tpl-scrub .section-sub-title {
  font-size: .82rem;
  letter-spacing: .06em;
}

/* Lời giới thiệu dâu/rể (#groom-intro / #bride-intro): đây là chữ THÂN BÀI, không phải
   tiêu đề — nhưng blade để nó là <h3> nằm trong `.wrap-people` mang class `.section-title`,
   nên nó ăn hai thứ cùng lúc:
     - cỡ h3 đáp ứng của Bootstrap `calc(1.3rem + .6vw)` = 23,4px @430px
     - UPPERCASE + giãn ký tự .18em thừa hưởng từ .section-title
   Prose viết hoa toàn bộ ở 23px vừa to lấn tiêu đề section (16px) vừa khó đọc. Kéo về
   đúng thang chữ thân bài của template (cùng cỡ .section-sub-title, chữ thường).
   Nhắm vào `.member h3` chứ không phải #id để hai bên dâu/rể luôn cân nhau. */
.tpl-scrub .couple-section .member h3 {
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: none;
  color: #55606c;
  /* KHÔNG khai `line-height` ở đây: libs.css có `h1..h6 { line-height: 1.5 !important }`
     nên mọi giá trị đặt ở đây đều thua và chỉ là rule chết. 1.5 × 13,1px = 19,7px, đọc ổn. */
}

/* Gallery: KHÔNG đè gì cả — để y hệt mọi template khác (ảnh cao tự nhiên, 2 cột co giãn).
   Trước đây chỗ này ép `aspect-ratio: 1/1` + `object-fit: cover` để bắt chước lưới ô vuông
   117×117 của trang nguồn. Đã gỡ vì hai lẽ:
     1. Nguồn xếp 3 cột nên ô vuông nhỏ, xén nhẹ. Component dùng chung ở đây là `col-6`
        (2 cột), ô vuông to gấp đôi -> `cover` xén rất sâu: tấm chân dung 400×738 mất hẳn
        phần mặt. Ảnh cưới bị cắt mặt là hỏng nội dung, không phải chuyện thẩm mỹ.
     2. `border-radius: 0 !important` là rule chết — không có rule nào bo góc ảnh gallery
        (đo computed style: 0px cả khi có lẫn khi không có nó).
   template64 từng là template DUY NHẤT có override này. */

/* Kẻ hairline thay vì viền đậm — nguồn dùng 1px #eee ngăn khối */
.tpl-scrub .invitation-section .parent,
.tpl-scrub .footer-section {
  border-top: 1px solid #ececec;
}

/* Cánh hoa rải rác — chi tiết đặc trưng nhất của nguồn: cánh kem (petal-cream) và lá
   xanh nhạt (leaf-pale) nằm lệch tâm, mờ, không đối xứng. Dùng pseudo-element nên
   không thêm thẻ nào vào blade. */
.tpl-scrub .invitation-section,
.tpl-scrub .couple-section,
.tpl-scrub .weddingdate-section {
  position: relative;
  overflow: hidden;
}
.tpl-scrub .invitation-section::before,
.tpl-scrub .couple-section::before,
.tpl-scrub .weddingdate-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .75;
}
.tpl-scrub .invitation-section::before {
  background-image: url("../img/petal-cream.png");
  width: 26px; height: 30px; top: 8%; right: 11%;
}
.tpl-scrub .couple-section::before {
  background-image: url("../img/petal-cream.png");
  width: 26px; height: 30px; top: 12%; left: 9%;
}
.tpl-scrub .weddingdate-section::after {
  background-image: url("../img/leaf-sage.png");
  width: 30px; height: 25px; bottom: 10%; left: 13%;
  transform: rotate(200deg);
}

/* Ô ngày trong hero: nguồn dùng ornament nhỏ (005-2) làm dấu ngăn, không phải khối màu */
.tpl-scrub .main_area .day_wrapper {
  background-size: 190px auto;
}

/* Hero scrub — chỉ nâng layer cho ba lớp motion-scrub-hero.js thật sự transform.
   Bật will-change tràn lan là tốn bộ nhớ mobile không đổi lại được gì. */
.tpl-scrub .banner-section #main-image,
.tpl-scrub .banner-section .wrap-img-title .main-title-overlap,
.tpl-scrub .banner-section .wrap-img-title .wrap-text,
.tpl-scrub .banner-section .name-user .name-pair,
.tpl-scrub .banner-section .hero-ornament img {
  will-change: transform;
}

/* --- Hero: bố cục của nguồn (ảnh full-bleed -> tiêu đề đè mép dưới -> ngày -> tên) --- */

/* Ảnh hero nguồn: tràn hết bề ngang, tỉ lệ 2:3 (đo được 430×645), KHÔNG bo góc. */
.tpl-scrub .banner-section .wrap-img {
  width: 100%;
  margin: 0;
  line-height: 0;
}
.tpl-scrub .banner-section #main-image {
  width: 100%;
  border-radius: 0;
  display: block;
}
/* Tỉ lệ 2:3 CHỈ áp cho mobile. Mốc 575px không phải số tròn tùy hứng: `libs.css` cắt
   `.wrapper { max-width: 575px }`, nên
     - dưới mốc  -> khung thiệp ĐÚNG BẰNG bề ngang máy, ảnh full-bleed như trang nguồn
                    (đo trên nguồn @430px: 430×645, tức 2:3) -> giữ nguyên ý đồ.
     - từ 576px  -> khung đứng yên ở 575px, trang chỉ còn là một cột hẹp giữa màn. Ép 2:3
                    ở đó ra khối ảnh cao 863px, cao hơn tầm nhìn của phần lớn màn desktop:
                    phải cuộn mới xem hết MỘT tấm ảnh, mà `object-fit: cover` lại xén mất
                    hai bên (ảnh nguồn 1000×1000 -> mất ~33% bề ngang).
   Từ 576px trở lên để ảnh theo tỉ lệ gốc: không xén, không cao quá. */
@media (max-width: 575px) {
  .tpl-scrub .banner-section #main-image {
    aspect-ratio: 2 / 3;
    object-fit: cover;
  }
}

/* Tiêu đề "- Wedding day -" đè lên mép dưới ảnh: nguồn dùng position absolute
   bottom:-25px + z-index 9. Ở đây ảnh và tiêu đề là hai khối anh em nên kéo lên
   bằng margin âm — cùng hiệu quả thị giác mà không phải bọc thêm thẻ định vị. */
.tpl-scrub .banner-section .wrap-img-title {
  position: relative;
  z-index: 9;
  /* Nguồn: bottom:-25px trên khối cao 38px -> tiêu đề nằm PHẦN LỚN DƯỚI mép ảnh, chỉ
     liếm vào ~13px. Kéo -30px là đẩy hẳn vào giữa ảnh, chữ script tối chìm vào áo. */
  margin-top: -14px;
}
.tpl-scrub .banner-section .wrap-img-title .main-title-overlap {
  width: 80%;           /* nguồn: class w80p */
  max-width: 344px;     /* đo được 344px trên khung 430px */
  height: auto;
}

/* Ngày: nguồn pt40, cỡ .9rem, màu #55606C, giãn ký tự 0 */
/* Ngày: nguồn `pt40 tac fs09` màu #55606C -> ~14.5px, căn giữa, thoáng phía trên */
.tpl-scrub .banner-section .wrap-img-title .wrap-text {
  display: block;
  padding-top: 38px;
  color: #55606c;
  font-size: .92rem;
  font-weight: 300;
  letter-spacing: .01em;
}

/* Tên cô dâu chú rể: nguồn để nhỏ và thoáng, không phải khối chữ lớn */
.tpl-scrub .banner-section .name-user {
  /* Khoảng chờ rộng là điều kiện để parallax không cho hai khối chữ chạm nhau:
     .wrap-img-title và .name-user trôi lệch tốc độ nên gap phải lớn hơn hiệu số dịch. */
  padding-top: 52px;
  padding-bottom: 72px;
  color: #55606c;
  font-weight: 300;
}

/* Chữ dẫn trên cùng nằm TRƯỚC ảnh trong nguồn -> giữ mảnh, không thành dải màu */
.tpl-scrub .banner-section {
  background: #fff;
}



/* Tên dâu/rể: donor để 40px/26px — nguồn để fs14 (~14px), nhỏ và mảnh, hai bên
   một cột. Chữ to cỡ donor kéo hero thành khối chữ, mất vẻ thoáng của nguồn. */
.tpl-scrub .main_area .name-user,
.tpl-scrub .banner-section .name-user {
  font-size: 15px;
}
.tpl-scrub .banner-section .name-user p {
  margin-bottom: 14px;
  letter-spacing: .02em;
}
.tpl-scrub .banner-section .name-user span {
  font-size: 15px;
  line-height: 1.7;
}
.tpl-scrub .banner-section .name-user .pe-2 {
  color: #8b939c;   /* nhãn *groom/*bride mờ hơn tên thật, như nguồn */
}

/* Ba nút chức năng của app (wishes · RSVP · gift box) — KHÔNG có trong nguồn, nhưng
   phải nói cùng thứ tiếng: nguồn chỉ dùng một kiểu nút là chữ nhật GÓC VUÔNG, chữ nhỏ
   giãn ký tự. Ba khối rêu bo tròn full-width là ngôn ngữ của donor t6.
   Dùng viền hairline thay vì ba khối đặc: ba nút đặc cạnh nhau quá nặng cho trang này. */
.tpl-scrub .accessibilities-section .accessibility-btn.btn.btn-secondary {
  background-color: transparent;
  border: 1px solid #cfd2cb;
  border-radius: 0;
  color: #3f4650;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .03em;
  padding-top: 12px;
  padding-bottom: 12px;
}
.tpl-scrub .accessibilities-section .accessibility-btn.btn.btn-secondary:hover {
  background-color: #f5ede7;
  border-color: #94a37e;
  color: #3f4650;
  opacity: 1 !important;
}
.tpl-scrub .accessibilities-section .access-section-icon {
  /* icon nhỏ lại cho cân với chữ .8rem */
  max-height: 17px;
  margin-right: 7px;
  /* assets/img/{wishes,rsvp4,money_bag}.png là icon TRẮNG — vẽ cho nền rêu đặc của donor.
     Nút ở đây nền trắng nên chúng tàng hình. brightness(0) đảo hình trắng thành đen mà
     giữ nguyên alpha; opacity hạ xuống cho ra xám mảnh như icon của nguồn.
     Lọc bằng CSS trong phạm vi template64, KHÔNG sửa file asset dùng chung của 62 template. */
  filter: brightness(0) opacity(.5);
}

/* --- Tên dâu/rể: mỗi cột tự gom NHÃN + TÊN, ♥ đứng giữa hai cột --------------
   Hai cột SOI GƯƠNG ôm vào đường giữa: cột trái dồn phải (`flex-end`), cột phải dồn trái
   (`flex-start`) — đúng như nguồn xếp (`w50p tar` | `w50p tal`). Nhãn và tên trong cùng
   một cột nên vẫn luôn thẳng hàng với nhau, không có chuyện nhãn chú thích sai người. */
.tpl-scrub .banner-section .name-user .name-pair {
  display: flex;
  align-items: flex-end;      /* ♥ ăn theo dòng TÊN, không theo dòng nhãn */
  justify-content: center;
  gap: 4px;
}
.tpl-scrub .banner-section .name-user .name-col {
  display: flex;
  flex-direction: column;
  gap: 10px;                  /* nguồn: pb15 giữa nhãn và tên */
  min-width: 0;
}
/* `text-align` đi kèm `align-items` chứ không thừa: `align-items` chỉ đặt vị trí cả khối
   nhãn/tên trong cột, còn tên dài tự xuống dòng thì các dòng bên trong vẫn cần biết dồn
   về đâu — thiếu nó là tên hai dòng canh trái trong một cột đang dồn phải. */
.tpl-scrub .banner-section .name-user .name-col:first-child {
  align-items: flex-end;
  text-align: right;
}
.tpl-scrub .banner-section .name-user .name-col:last-child {
  align-items: flex-start;
  text-align: left;
}
.tpl-scrub .banner-section .name-user .name-label {
  font-size: .74rem;          /* nguồn fs05 ~ 11.2px */
  font-weight: 300;
  letter-spacing: .06em;
  color: #8b939c;
  white-space: nowrap;
}
/* Tên thật: nguồn `fs16` màu #2c2c2c */
.tpl-scrub .banner-section .name-user .name-value {
  font-size: 1.8rem;
  font-weight: 400;
  color: #2c2c2c;
  letter-spacing: .01em;
}
/* ♥ giữa hai tên: nguồn dùng đúng màu cam đào #f1a993 */
.tpl-scrub .banner-section .name-user .name-heart {
  color: #f1a993;
  padding: 0 7px;
  font-size: 1.06rem;
  line-height: 2.7;
}

/* Ornament 005-2.png trước đoạn chữ lời mời — nguồn: `pv30 tac` + ảnh `h20` */
.tpl-scrub .invitation-section .invitation-ornament {
  padding: 18px 0 6px;
}
.tpl-scrub .invitation-section .invitation-ornament img {
  height: 20px;
  width: auto;
}

/* Ornament 005-1.png sau khối tên — nguồn: `pv30 tac` + ảnh `h35` */
.tpl-scrub .banner-section .hero-ornament {
  padding: 30px 0 0;
}
.tpl-scrub .banner-section .hero-ornament img {
  height: 35px;
  width: auto;
}