::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background-color: #fff;
}
::-webkit-scrollbar-thumb {
  background-color: #756b50;
}
body {
  font-family: "Bellota Text", cursive;
  background: #ced2be;
}

.story-section .timeline-card::before {
  border-color: #756b50;
}
.story-section .timeline .title::before {
  border-color: #756b50;
}
.story-section .timeline-1 li {
  border-left-color: #f9f9f9;
}
.story-section .timeline-1 li:before {
  border-color: #756b50;
  box-shadow: 3px 3px 0px #f9f9f9;
}
.section-bg-affect:nth-child(even) {
  background-color: #fdfbf5;
}
/* .section-bg-affect:nth-child(even) {
  background-color: #fdfbf5;
} */
/* .section-bg-affect {
  background-color: #fdfbf5;
} */
/* .section-bg-affect {
  background-color: #fdfbf5;
} */
.story-section .timeline-card::before {
  border-color: #bfb18e;
}

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

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

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

.donate-section .donate-box .donate-card {
  width: 100%;
  border: 1px dashed #bfb18e;
 
}
.donate-card.p-4.rounded.text-center {
  border: 1px dashed #bfb18e;
}
.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 #bfb18e;
}
.offcanvas-menu .nav-link {
  font-size: 1.2rem;
  text-transform: capitalize;
}
.section-title {
  font-family: 'Grechen Fuemen', cursive;
   letter-spacing:.5px;
  font-size: 2.8rem;
  color: #3e3e3e;
}
.section-sub-title {
  font-family: 'Bellota Text', cursive;
  letter-spacing:.2px;
}
.title {
  font-family: 'Bellota Text', cursive
}
.sub-title {
  font-family: 'Bellota Text', cursive
}
/* Khối `.opening-section` của donor t6 ĐÃ GỠ (152 dòng).
   Là CSS CHẾT: không blade nào trong repo có markup trỏ tới, và nó trỏ ngược vào hai ảnh
   donor không tồn tại. Màn mở đầu THẬT của template68 là `.tpl-intro` ở cuối file — để cả
   hai cạnh nhau thì người đọc sau sẽ sửa nhầm khối chết. */
.main_area .text-and {
  padding: 0 10px;
}
/* Banner Section */
.banner-section .title-head {
  background-color: #756b50;
  text-align: center;
  color: #fff;
}
.main_area {
  background: none; /* nguồn: mặt kem phẳng, không vân giấy */
}
.main_area .wrap-img-title {
  width: 100%;
}
.main_area .wrap-img-title img {
  width: 250px;
}
.main_area .wrap-img-title .wrap-text {
  gap: 1px;
  justify-content: center;
  width: 250px;
  margin: 0 auto;
  padding: 5px 0;
  border-top: 1px solid #dadcdd;
  border-bottom: 1px solid #dadcdd;
}
.main_area .wrap-img-title .wrap-text span {
  width: 20px;
  height: 30px;
  border: 1px solid #e3e4e4;
}
.main_area .text-sub {
  text-align: center;
  color: #847c74;
  background-color: #ddd8c9;
}
.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/main-title-3.png") no-repeat top center;
  background-size: 300px;
}
.main_area .day_wrapper p {
  color: #323232;

}
.main_area .name-user {
  font-size: 40px;
  color: #3e3e3e;
  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/flower.png") no-repeat 100px center;
  background-size: 50px;
  background-color: #ddd8c9;
}
/* accessibility-btn */
.accessibility-btn {
  background-color: #756b50;
  border: none;
}
.accessibility-btn:hover {
  opacity: 0.6 !important;
  background-color: #756b50;
  border: none;
}
/* 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: #756b50;
  border-color: #756b50;
}
.gallery-item{
  cursor: pointer;
}
/* .lg-backdrop/.lg-outer đã gỡ: lightGallery không còn trong bundle template68
   (đã 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: #756b50;
}
.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(--t68-line, #ddd8c9);
  border-bottom: 1px solid var(--t68-line, #ddd8c9);
}

.weddingdate-section .mini_calendar td {
  color: #484747;
}
.weddingdate-section .mini_calendar td #today {
  background: #756b50;
  color: #fff;
}
.weddingdate-section #clock > div {
  color: #756b50;
}
.weddingdate-section .wrap-img {
  width: 150px;
  margin: 0 auto;
}
tion */ .story-section .timeline .title {
  color: #bfb18e;
}
.timeline-card .img-holder {
  border-radius: 20px;
  overflow: hidden;
}
.invitation-couple {
  color: #bfb18e;
}
.invitation-couple p {
  color: #a88290;
  font-size: 2rem;
}
.invitation-couple .text {
  align-items: center;
  gap: 10px;
  align-items: baseline;
}
.invitation-couple .text small {
  font-size: 1rem;
}
.invitation-section {
  background: none; /* nguồn: mặt kem phẳng, không vân giấy */
}
.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: 'Bellota Text', cursive;
}
.parent-name {
  font-weight: bold;
}
/* event-section */
.event-section .event-item {
  background-color: #fdfbf5;
}
.event-section a {
  background: #756b50;
  border-color: #756b50;
}

/* couple section */
.couple-section {
  background: none; /* nguồn: mặt kem phẳng, không vân giấy */
}
.couple-section h2 {
  line-height: 1 !important;
}
.couple-section p {
  /* text-transform: uppercase; */
  font-size: 12px;
  letter-spacing: 1px;
}
.couple-section h2 {
  /* Ảnh chữ `-Groom&Bride-` của nguồn đã bỏ: nội dung của nó trùng đúng chuỗi i18n
     `wedding.general.couple_title` + `couple_description`, dùng ảnh là mất bản dịch.
     Style theo nguồn (HOA, nhỏ, giãn ký tự) nằm ở lớp THEME_NEW_01 cuối file. */
  width: 100%;
  margin: 0 auto;
  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 #ddd8c9;
  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: #756b50;
}

/* wishes-section */
.wish-box {
  border-color: #000;
}
.wishes-section button,
.event-section a {
  background-color: #756b50;
  border: none;
  transition: 0.2s;
}
.wishes-section button:hover,
.event-section a:hover {
  opacity: 0.6 !important;
  background-color: #756b50 !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: #fdfbf5;
}
.footer-section .title {
  color: #3e3e3e;
  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: #ddd8c9;
  }
  .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: #f3f1e6;
}
button#btn-submit-comment {
  background-color: #756b50;
  color: #fff;
  text-transform: uppercase;
}
button#btn-submit-comment:hover {
  opacity:0.6;
  color:black;
}
#show-comments {
  background-color: #f3f1e6;
}
.box-comment {
  background-color: white;
}
.reply-comment-box {
  border-top: 1px dashed #756b50;
}
#show-comments::-webkit-scrollbar {
  width: 8px;
}
#show-comments::-webkit-scrollbar-thumb {
  background-color: #756b50;
}
.bride-story, .groom-story{
	font-family:'Bellota Text', cursive;
}

.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=#756b50 cream=#ddd8c9 (mixed; legacy).
   Olive is light -> gradients end on deep olive #5c5346 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: #5c5346; }              /* readable deep-olive (~4.7:1) */
#gifts .gift-buy-link        { border-color: #756b50; color: #5c5346; }
#gifts .gift-buy-link:hover  { background: #f3f1e6; color: #5c5346; }
#gifts .gift-claim-btn       { background: linear-gradient(45deg, #756b50, #5c5346); }
#gifts .gift-header          { background: linear-gradient(135deg, #756b50, #5c5346); }
#gifts .gift-submit          { background: linear-gradient(45deg, #756b50, #5c5346); }
#gifts .gift-info-ic         { background: #efece0; color: #5c5346; }
#gifts .gift-copy-ic         { color: #5c5346; }
#gifts .gift-copy-ic:hover   { color: #4b4438; }
#gifts .gift-cta-shopee      { background: linear-gradient(90deg, #756b50, #5c5346);
                               box-shadow: 0 10px 24px rgba(157,174,130,.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: #f3f1e6; border-color: #ddd8c9; }
#gifts .gift-selfbuy-ic      { background: #efece0; color: #5c5346; }
#gifts .gift-copyall         { color: #5c5346; }
#gifts .gift-copyall:hover   { color: #4b4438; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   THEME_NEW_01 — lớp bám TRANG NGUỒN thegoodday.kr/invitation/view/94726
   ══════════════════════════════════════════════════════════════════════════════════════
   Mọi con số/màu dưới đây ĐO TRÊN TRANG SỐNG @430px (`source-shape.md`), không lấy từ
   `theme.css` của nguồn — theme.css không chứa hệ utility mà markup thật sự dùng.

   Đặt CUỐI FILE để đè phần donor t6 phía trên: donor là sage + hồng phấn trên vân giấy,
   nguồn là kem phẳng + taupe. Gom một lớp ở cuối thì đọc được toàn bộ quyết định thẩm mỹ
   ở một chỗ, thay vì rà 800 dòng và vẫn sót.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* Khai ở `:root` chứ không chỉ ở `.tpl-scrub`: `body` là TỔ TIÊN của `.tpl-scrub`, mà
   custom property chỉ kế thừa xuống — `var(--t68-bg)` dùng trên `body` sẽ không giải được,
   và một khai báo có `var()` không giải được thì VẪN thắng cascade rồi bị coi là `unset`
   (với `background` là `transparent`), tức là giết luôn giá trị donor phía dưới. */
:root,
.tpl-scrub {
  /* Đo được trên nguồn */
  --t68-bg: #f5f6f0;        /* nền chính (.intro, .main_image_area, .invitation_area) */
  --t68-bg-alt: #fdfbf5;    /* section xen kẽ (.guest_area) */
  --t68-ink: #38412f;       /* chữ chính — xanh ô liu sẫm, 9.8:1 trên nền kem */
  --t68-ink-soft: #5c5346;  /* chữ phụ / thân bài — 6.9:1 */

  /* Đẩy đậm hơn nguồn một bậc — BẮT BUỘC, không phải tuỳ chọn.
     Nguồn để chữ trắng trên `#beb397` (2.08:1) và số ngày `#bfb18e` trên kem (1.95:1).
     Chữ tiếng Việt có dấu cần tương phản cao hơn chữ Hàn ở cùng cỡ; giữ nguyên hex nguồn
     là ra trang bạc màu, dấu mờ. */
  --t68-band: #756b50;      /* dải taupe đặc — ĐÓNG CẢ HAI VAI nên phải đủ đậm cho cả hai:
                               chữ trắng trên nó 5.28:1, và chính nó làm chữ trên kem 4.86:1 */
  --t68-gold: #8f7f5b;      /* số ngày + nhấn CÓ CHỮ — 3.61:1, đạt AA cho chữ lớn */
  --t68-gold-soft: #bfb18e; /* CHỈ viền / kẻ / ornament — 1.95:1, KHÔNG bao giờ dưới chữ */
  --t68-line: #ddd8c9;      /* kẻ mảnh */
}

/* ── Nền + chữ ─────────────────────────────────────────────────────────────────────── */
body {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  background: var(--t68-bg, #f5f6f0);  /* fallback: đừng bao giờ để var() trần trên body */
}

.tpl-scrub .wrapper {
  background: var(--t68-bg);
  color: var(--t68-ink);
}

/* Nguồn xen kẽ kem / kem-ấm chứ không phải kem / xanh bạc hà như donor. */
.tpl-scrub .section-bg-affect:nth-child(even) {
  background-color: var(--t68-bg-alt);
}

/* letter-spacing ÂM (-1.8px ở `.wrapper` nguồn) là tracking cho chữ Hàn.
   Mang sang tiếng Việt là dấu dính vào chữ. */
.tpl-scrub * {
  letter-spacing: normal;
}

/* Tiêu đề section: nguồn KHÔNG dùng serif 2.8rem như donor — chữ nhỏ, giãn ký tự nhẹ. */
.tpl-scrub .section-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: 1px;
  color: var(--t68-ink);
  text-align: center;
}

.tpl-scrub .section-sub-title,
.tpl-scrub .title,
.tpl-scrub .sub-title {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  color: var(--t68-ink);
}

.tpl-scrub p,
.tpl-scrub h1, .tpl-scrub h2, .tpl-scrub h3,
.tpl-scrub h4, .tpl-scrub h5, .tpl-scrub h6 {
  color: var(--t68-ink);
}

/* Nguồn để thân bài giãn dòng 35.2px trên cỡ 17.6px (=2.0). Dấu tiếng Việt cần khoảng
   thở đó hơn cả chữ Hàn. */
.tpl-scrub .invitation-content p,
.tpl-scrub .couple-section h3,
.tpl-scrub .wishes-section .section-sub-title {
  line-height: 2;
  color: var(--t68-ink-soft);
}

/* Nguồn không bo góc MỘT ảnh nào (cột `radius` trong source-shape.md toàn 0px). */
.tpl-scrub .wrap-img img,
.tpl-scrub .wrap-img-couple img,
.tpl-scrub .couple-section .wrap-img img {
  border-radius: 0;
}

/* ── Dải chữ dẫn đầu trang (nguồn: `.bgm_area`) ─────────────────────────────────────── */
.tpl-scrub .banner-section .title-head {
  background-color: var(--t68-band);
  color: #fff;
}

.tpl-scrub .banner-section .title-head p {
  /* Nguồn: `.bgm_area { padding: 15px 20px }`, cao 60px. Donor để `py-4` (24px) nên dải
     dày hơn nguồn 18px. */
  padding: 15px 20px !important;
  color: #fff;
  font-size: 15px;
  line-height: 30px;   /* nguồn: `.bgm_area { line-height: 30px }` -> dải cao đúng 60px */
}

/* ── HERO ──────────────────────────────────────────────────────────────────────────────
   Thứ tự lớp của NGUỒN (đã xếp lại trong blade, donor xếp khác):
     dải hoa mép trên (::before, cao 70px)  ->  ngày  ->  main-title.png  ->  tên + "and"
     ->  ảnh đôi full-bleed 430×620
   Số đo: `.mitm` padding 40px 0 0 / 3em / #d5cbb1 · `.mm` margin 50px 0 / 1.8em / 1.3em */
.tpl-scrub .main_area {
  position: relative;
  padding: 0 0 0;
  background: var(--t68-bg);
  text-align: center;
}

.tpl-scrub .main_area::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 70px;
  background: url("../img/intro-top.png") no-repeat center top;
  background-size: cover;
  pointer-events: none;
}

/* Số ngày dùng SANS, không dùng Cormorant: chữ số "1" của Garamond có chân + cờ đầy đủ
   nên "11" đọc ra "II" — chấp nhận được với chữ, KHÔNG chấp nhận được với ngày cưới.
   Be Vietnam Pro 200 mảnh gần với chữ số Batang của nguồn và không nhập nhằng. */
.tpl-scrub .hero-date {
  position: relative;
  /* Nguồn: `.mitm { padding: 40px 0 0 }`. Dải hoa là `::before` PHỦ LÊN nên không đẩy nội
     dung xuống — dòng năm nằm lẫn vào phần ngọn hoa, đúng như trang nguồn. */
  padding-top: 40px;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  color: var(--t68-gold);
  /* Nguồn cho MỖI dòng một hộp 48px (40 + 48 + 48 = 136, và 60 + 136 = 196 = `top` của
     main_title.png trong source-shape.md). Giữ đúng hai hộp đó thay vì để line-height tự
     tính theo cỡ chữ, nếu không cả phần dưới hero trôi lên ~24px so với nguồn. */
  line-height: 48px;
}

.tpl-scrub .hero-date small {
  /* 20px/400 = chữ thường, ngưỡng 4.5 — màu nhấn `--t68-gold` chỉ 3.61:1 nên KHÔNG dùng
     được ở đây. Số ngày 48px bên dưới thì đủ (ngưỡng chữ lớn là 3). */
  color: var(--t68-ink-soft);
  display: block;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 2px;
}

.tpl-scrub .hero-date__dm {
  display: block;
  font-size: 3rem;      /* nguồn: 3em */
  font-weight: 200;
  line-height: 48px;
  letter-spacing: 1px;
}

/* Dòng ngày đầy đủ. Cặp số lớn phía trên là TRANG TRÍ theo dáng nguồn; dòng này mới là
   cách đọc chính thức — `isoFormat('LL')` cho thứ tự + tên tháng đúng bản ngữ từng locale.
   Nó đẩy main-title.png xuống ~26px so với mốc 196 của source-shape.md: đánh đổi CÓ CHỦ Ý,
   vì cặp số đứng một mình thì không quốc gia nào đọc giống nhau (09.11 = 9/11 hay 11/9?). */
.tpl-scrub .hero-date__full {
  display: block;
  margin-top: 6px;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t68-ink-soft);   /* 6.9:1 trên nền kem */
}

.tpl-scrub .hero-title-img {
  /* Nguồn để `.fw` đi liền sau `.mitm`, không lề: hộp `.mitm` kết thúc ở 196 và đó đúng
     là `top` của main_title.png trong source-shape.md. */
  margin-top: 0;
}

.tpl-scrub .hero-title-img img {
  width: 100%;
  max-width: 430px;
  /* Ảnh này LÀ CHỮ (mực #8d735b trên nền kem = 4.08:1, cao chữ ~9px ở 430px) nên phải đạt
     ngưỡng chữ thường 4.5:1 như mọi chữ khác của trang. Phép đo tương phản không thấy nó:
     nó chỉ duyệt phần tử có nút text trực tiếp, ảnh chữ không bao giờ lọt vào mẫu.
     brightness(.85) đưa mực về ~#785f4f ≈ 5.3:1 mà vẫn giữ nguyên nét chữ của nguồn. */
  filter: brightness(.85);
}

/* Tên: nguồn xếp DỌC, ảnh "and" viết tay ở giữa. Tên Hàn 3 ký tự nên nguồn để 1.8em cố
   định; tên Việt dài gấp nhiều lần -> co theo bề ngang khung để không tràn. */
.tpl-scrub .hero-names {
  margin: 50px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--t68-ink);
}

.tpl-scrub .hero-names p {
  margin: 0;
  font-size: clamp(1.5rem, 6.7vw, 1.8rem);
  line-height: 1.3;
  font-weight: 500;
}

.tpl-scrub .hero-names__and {
  width: 100%;
  max-width: 430px;
  margin: 6px 0;
}

/* Ảnh đôi: full-bleed, KHÔNG khoá tỉ lệ.
   Nguồn đo được 430×620 (1.44) nhưng ảnh cặp đôi của repo là ảnh VUÔNG — ép 43/62 lên nó
   là `object-fit: cover` cắt mất ~30% chiều ngang, thực tế cắt cụt đầu người. Ảnh cưới là
   nội dung chính của thiệp, không phải hoạ tiết nền, nên để nó tự quyết chiều cao.
   ĐÁNH ĐỔI ĐÃ BIẾT: một tấm dọc 9:16 sẽ kéo hero cao hơn — `check-legibility` báo đỏ đúng
   phần tử này, đó là hệ quả có chủ ý chứ không phải lỗi bỏ sót. Kèm theo: bỏ luôn parallax
   cho ảnh trong motion-scrub-hero.js — không có khung cắt thì mọi cú đẩy đều hở nền. */
.tpl-scrub .main_area .wrap-img {
  width: 100%;
  margin: 0;
}

.tpl-scrub .main_area .wrap-img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Cặp với motion-scrub-hero.js — khai báo trước để trình duyệt tách lớp hợp thành. */
.tpl-scrub .hero-date,
.tpl-scrub .hero-title-img,
.tpl-scrub .hero-names,
.tpl-scrub .main_area .wrap-img img {
  will-change: transform;
}

/* ── Nút truy cập nhanh ────────────────────────────────────────────────────────────────
   `.wrapper` tối đa 577px -> từ 576px ba nút `col-sm-4` chỉ còn ~173px. Lỗi CHỈ hiện ở
   màn RỘNG và CHỈ ở locale có chuỗi dài (vi "Xác nhận tham dự" 16 ký tự vs en "RSVP" 4).
   `letter-spacing` phải là `normal`: giãn .6px cộng thêm ~10px cho nhãn 16 ký tự, vừa đủ
   tràn cột — đã cắn ở t66 sau khi đã áp đủ mọi thứ khác. */
.tpl-scrub .accessibilities-section .row > [class*="col-"] {
  display: flex;
}

.tpl-scrub .accessibility-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 44px;         /* vẫn đạt vùng chạm 44px */
  margin: 3px 0 !important;
  padding: 8px !important;
  border-radius: 0;
  border: 1px solid var(--t68-gold-soft);
  background-color: var(--t68-band);
  color: #fff;
  font-size: 14px;
  letter-spacing: normal;
}

.tpl-scrub .accessibility-btn:hover,
.tpl-scrub .accessibility-btn:focus {
  background-color: #6d6449;
  border-color: var(--t68-gold-soft);
  color: #fff;
}

.tpl-scrub .accessibility-btn .content-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-wrap: balance;
}

.tpl-scrub .accessibilities-section .access-section-icon {
  flex-shrink: 0;
}

/* ── Khối lời mời ──────────────────────────────────────────────────────────────────────
   Nguồn: tiêu đề căn TRÁI, dấu hán tự 百年佳約 mờ ở góc phải, đoạn chữ căn giữa, rồi một
   nhánh hoa căn giữa làm dấu ngăn. */
.tpl-scrub .invitation-section {
  background: var(--t68-bg);
}

.tpl-scrub .invitation-title {
  position: relative;
  padding-top: 40px;
  text-align: left;
}

.tpl-scrub .invitation-hanja {
  position: absolute;
  right: 8px;
  top: 0;
  width: 110px;
  height: 120px;
  background: url("../img/hanja-mark.png") no-repeat center top;
  background-size: contain;
  opacity: .85;
}

.tpl-scrub .invitation-sprig {
  height: 220px;
  margin: 10px auto 30px;
  background: url("../img/invite-sprig.png") no-repeat center center;
  background-size: contain;
}

/* Nhãn + tên gom vào CÙNG MỘT CỘT rồi căn giữa theo cột. Nguồn để nhãn và tên chung một
   hàng — đẹp vì tên Hàn 3 ký tự; với "Nguyễn Văn Quyết" thì nhãn dạt hết về phía ♥ và đọc
   ra như chú thích sai người. */
.tpl-scrub .invitation-couple .text {
  align-items: flex-end;
  gap: 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
}

.tpl-scrub .invitation-couple__one {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.65rem;
  line-height: 1.35;
  color: var(--t68-ink);
}

.tpl-scrub .invitation-couple__one small {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: .75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t68-ink-soft);
}

.tpl-scrub .invitation-couple__heart {
  padding-bottom: 4px;
  font-size: 1.1rem;
  color: var(--t68-ink-soft); /* 17.6px = chữ thường, ngưỡng 4.5 */
}

/* ── Lịch / ngày cưới ──────────────────────────────────────────────────────────────────
   Nguồn: "06 / 14" 28.8px giãn 1px màu be, dòng giờ 16px giãn 1px xám.
   Donor khoá `width` cho khung ornament theo cỡ ảnh CŨ của nó -> ảnh nguồn nhỏ hơn thả
   vào là dạt về mép. Trả khung về 100% rồi căn giữa bằng chính ảnh. */
.tpl-scrub .weddingdate-section .wrap-img {
  width: 100%;
  text-align: center;
}

.tpl-scrub .weddingdate-section .wrap-img img {
  width: auto;
  max-width: 120px;
  margin: 0 auto;
}

.tpl-scrub .weddingdate-section .section-title {
  color: var(--t68-gold);
  letter-spacing: 1px;
}

/* ── Khối dâu/rể ───────────────────────────────────────────────────────────────────────
   Nguồn không có dải ruy băng nào sau tiêu đề; chữ HOA trần, giãn ký tự. Ảnh không bo
   tròn, và dòng tên có kẻ mảnh bên dưới. */
.tpl-scrub .couple-section h2 {
  color: var(--t68-ink);
}

.tpl-scrub .couple-section .wrap-img img {
  max-width: 260px;
  border-radius: 0;
}

.tpl-scrub .couple-section .member .wrap-icon {
  font-size: 1.35rem;
  color: var(--t68-ink);
}

.tpl-scrub .couple-section .member .wrap-icon > span {
  display: inline-block;
  padding-bottom: 10px;
  background: url("../img/divider-line.png") no-repeat center bottom;
  background-size: 180px auto;
}

.tpl-scrub .couple-section .member .wrap-icon span span {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem;
  /* Chỉ NHÃN ("Chú rể"/"Cô dâu") viết HOA — tên người thì không. `text-transform` kế thừa
     xuống nên phải trả lại tường minh, nếu không "Văn Quyết" thành "VĂN QUYẾT". */
  text-transform: none;
  letter-spacing: normal;
  color: var(--t68-ink);
}

/* Nhãn "Chú rể" / "Cô dâu" là chữ nhỏ HOA, giãn ký tự — theo lối tiêu đề của nguồn. */
.tpl-scrub .couple-section .member .wrap-icon > span {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t68-ink-soft);
}

/* Đoạn giới thiệu dâu/rể là <h3> KHÔNG class, nên nhận nguyên cỡ h3 của Bootstrap
   (1.75rem) — bằng đúng cỡ tiêu đề section, và thừa kế serif giãn ký tự từ `.section-title`
   trên `.wrap-people`. Giới thiệu dài vì thế trải kín bề ngang và đọc như tiêu đề. Kéo về
   chữ thân bài, và chặn bề ngang dòng để câu dài không chạy hết khung. */
.tpl-scrub .couple-section .member h3 {
  max-width: 30ch;
  margin: 10px auto 0;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.8;
  color: var(--t68-ink-soft);
}

/* ── Dấu ngăn chung: nguồn rải các <img> nhỏ căn giữa giữa các khối ─────────────────── */
.tpl-scrub .story-section .section-title,
.tpl-scrub .event-section .section-title,
.tpl-scrub .wishes-section .section-title,
.tpl-scrub .donate-section .section-title,
.tpl-scrub .footer-section .title {
  position: relative;
  padding-bottom: 18px;
}

.tpl-scrub .story-section .section-title::after,
.tpl-scrub .event-section .section-title::after,
.tpl-scrub .wishes-section .section-title::after,
.tpl-scrub .donate-section .section-title::after,
.tpl-scrub .footer-section .title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150px;
  height: 10px;
  transform: translateX(-50%);
  background: url("../img/divider-dot.png") no-repeat center center;
}

/* ── Nút / viền / kẻ theo tông nguồn ───────────────────────────────────────────────── */
.tpl-scrub .event-section a,
.tpl-scrub .btn-primary,
.tpl-scrub .wishes-section .btn {
  border-radius: 0;
  background-color: var(--t68-band);
  border-color: var(--t68-band);
  color: #fff;
}

.tpl-scrub .event-section a:hover,
.tpl-scrub .btn-primary:hover,
.tpl-scrub .wishes-section .btn:hover {
  background-color: #6d6449;
  border-color: #6d6449;
  color: #fff;
}

.tpl-scrub .story-section .timeline-card::before,
.tpl-scrub .story-section .timeline .title::before,
.tpl-scrub .story-section .timeline-1 li:before {
  border-color: var(--t68-gold-soft);
}

.tpl-scrub .donate-section .donate-box .donate-card,
.tpl-scrub .donate-card.p-4.rounded.text-center {
  border: 1px dashed var(--t68-gold-soft);
  border-radius: 0;
}

.tpl-scrub .offcanvas-menu li:after {
  border-color: var(--t68-line);
}

.tpl-scrub .footer-section,
.tpl-scrub .footer-section.section-bg-affect:nth-child(even) {
  background-color: var(--t68-band);
}

.tpl-scrub .footer-section .title,
.tpl-scrub .footer-section .sub-title,
.tpl-scrub .footer-section h3,
.tpl-scrub .footer-section h5 {
  color: #fff;
}

.tpl-scrub .footer-section .title::after {
  filter: brightness(0) invert(1) opacity(.7);
}

/* Icon nút truy cập là ảnh TRẮNG dùng chung của 62 template — trên nền taupe đặc chúng
   vẫn hiện, nên giữ nguyên. (Chỉ phải đảo màu khi bỏ nền đặc.) */

/* ══ MÀN MỞ ĐẦU ════════════════════════════════════════════════════════════════════════
   Nguồn: `.intro` fixed phủ kín, nền `#f5f6f0`, hai dải hoa ở mép trên/dưới cao 100px
   (::before/::after), hai lớp hiện lần lượt rồi cả màn `fadeOut()` ở 4000ms.
   Số đo trên trang sống:
     lớp 1 `.intro_dday`  margin 150px auto 120px · cao 200 · padding-top 100 · 5em (80px)
                          · màu #d5cbb1 · nền intro-sprig.png center top / cover
                          · `small` 0.3em màu #646055 · `.t2` margin-top -20px · span 0.8em
     lớp 2 `.intro_img`   ảnh rộng 100%
   Nhịp (1000ms / 2000ms / tắt 4000ms) nằm ở js/intro-opening.js, đọc từ front.js của
   nguồn. Ba luật bắt buộc: pointer-events none · z-index trên 99999 · reduced-motion. */
.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 dùng chung cho 62 template, không được sửa. */
  z-index: 100000;
  /* Màn chỉ CHE bằng mắt, KHÔNG nhận sự kiện: để nó nhận thì `elementFromPoint` trả về
     chính nó và mọi phép đo vùng chạm trong 4 giây đầu đo nhầm vào tấm phủ (phép kiểm
     nút nhạc probe đúng ở mốc t=3s). Cú chạm để bỏ qua bắt ở `window` — sự kiện từ phần
     tử nằm dưới vẫn nổi lên tới đó. Cũng KHÔNG khoá cuộn: nguồn không khoá, và khoá là
     làm `scrollIntoView` của trình xem ảnh tính sai. */
  pointer-events: none;
  overflow: hidden;
  background-color: var(--t68-bg, #f5f6f0);
  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::before,
.tpl-intro::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
}

.tpl-intro::before {
  top: 0;
  background: url("../img/intro-top.png") no-repeat center bottom;
  background-size: cover;
}

.tpl-intro::after {
  bottom: 0;
  background: url("../img/intro-bottom.png") no-repeat center bottom;
  background-size: cover;
}

/* Nguồn neo nội dung từ MÉP TRÊN (margin-top 150px), 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 không đẩy dòng chữ rơi ra ngoài. */
.tpl-intro__stack {
  position: relative;
  z-index: 2;
  padding-top: clamp(60px, 17vh, 150px);
}

.tpl-intro__dday,
.tpl-intro__caption {
  opacity: 0;
  /* animationUp của nguồn: đặt `top: 50px` rồi animate về 0 trong 1500ms */
  transform: translateY(50px);
  transition: opacity 1500ms ease, transform 1500ms ease;
}

.tpl-intro__dday.is-on,
.tpl-intro__caption.is-on,
.tpl-intro.is-reduced .tpl-intro__dday,
.tpl-intro.is-reduced .tpl-intro__caption {
  opacity: 1;
  transform: translateY(0);
}

.tpl-intro.is-reduced .tpl-intro__dday,
.tpl-intro.is-reduced .tpl-intro__caption {
  transition-duration: 1ms;
}

.tpl-intro__dday {
  height: 200px;
  padding-top: 100px;
  margin: 0 auto 120px;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;  /* xem chú thích ở .hero-date */
  font-weight: 200;
  font-size: 5rem;              /* nguồn: 5em */
  line-height: 1;
  color: var(--t68-gold);       /* nguồn #d5cbb1 = 1.49:1, quá nhạt cho chữ */
  background: url("../img/intro-sprig.png") no-repeat center top;
  background-size: cover;
}

/* Thứ Hàn "SUN" gọn 3 ký tự; "Chủ Nhật" dài gấp đôi -> nhỏ hơn nguồn một bậc và cho
   xuống dòng thay vì đẩy số ngày lệch tâm. */
.tpl-intro__dday small {
  /* `width: 0` + `overflow: visible`: chữ thứ vẫn nằm bên phải số ngày như nguồn, nhưng
     KHÔNG còn tính vào bề ngang dòng — nếu tính thì phép căn giữa căn cả cụm "số + thứ"
     và số ngày lệch trái nửa bề ngang chữ thứ. Nguồn không lộ vì "SUN" ngắn; đã đo lệch
     34px với "thứ hai", 68px với "segunda-feira". */
  display: inline-block;
  width: 0;
  overflow: visible;
  white-space: nowrap;
  text-align: left;
  padding-left: 6px;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: .18em;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: super;
  color: var(--t68-ink-soft);
}

.tpl-intro__t2 {
  margin-top: -20px;   /* nguồn: .t2 { margin-top: -20px } */
}

.tpl-intro__t2 span {
  font-size: .8em;     /* nguồn: .intro_dday span { font-size: .8em } */
}

/* Cùng lý do như `.hero-date__full`: hai số 14 / 06 xếp chồng ở màn mở đầu cũng không tự
   nói được cái nào là ngày. Đặt trên dòng "Our Wedding March" để cả cụm chữ đi cùng một lớp. */
.tpl-intro__caption .tpl-intro__full {
  /* Đặc hiệu (0,2,0): `.tpl-intro__caption p` ngay dưới là (0,1,1) và sẽ thắng (0,1,0),
     kéo dòng ngày về Cormorant — mà chữ số `1` của Cormorant lại đọc ra `I`, đúng cái
     mơ hồ dòng này sinh ra để dẹp. */
  margin: 0 0 14px;
  padding: 0 20px;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t68-ink-soft);
}

.tpl-intro__caption img {
  width: 100%;
  max-width: 430px;
}

.tpl-intro__caption p {
  margin: 6px 0 0;
  padding: 0 20px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 2px;
  color: var(--t68-ink);
}

/* Cánh hoa rơi — nguồn gọi $(document).snowfall() HAI lần (f01/f02, mỗi lần 15 hạt,
   10–20px) trên TOÀN TRANG và chạy mãi. Ở đây gói trong màn intro rồi tắt cùng nó: giữ
   đúng ấn tượng lúc mở page mà không để animation chạy suốt 8370px cuộn trên máy yếu.
   Khác biệt CÓ CHỦ ĐÍCH so với nguồn. */
.tpl-intro__petals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.tpl-intro__petal {
  position: absolute;
  top: -40px;
  background-repeat: no-repeat;
  background-size: contain;
  animation: t68PetalFall linear infinite;
}

@keyframes t68PetalFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translate3d(24px, 105vh, 0) rotate(220deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tpl-intro__petals { display: none; }
}

/* ── Khoá tỉ lệ mọi ảnh NGƯỜI DÙNG TẢI LÊN ─────────────────────────────────────────────
   Ảnh demo của trang xem thử là ảnh VUÔNG (hoặc 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 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 ở <img>: `aspect-ratio` trên chính <img> mất tác dụng
   ngay khi thẻ mang 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. */
.tpl-scrub .couple-section .wrap-img,
.tpl-scrub .wrap-img-couple {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.tpl-scrub .couple-section .wrap-img {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3 / 4;
}

.tpl-scrub .wrap-img-couple {
  width: 100%;
  aspect-ratio: 43 / 62; /* cùng tỉ lệ ảnh đôi của nguồn */
}

.tpl-scrub .couple-section .wrap-img img,
.tpl-scrub .wrap-img-couple img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}

/* ── Sổ lời chúc: nguồn KHÔNG có khối này ──────────────────────────────────────────────
   Donor phủ hai tấm sage ĐẶC. Nguồn không có tấm màu đặc nào ngoài dải taupe, nên dịch
   sang ngôn ngữ nguồn: mặt kem + kẻ mảnh. (Chữ trên hai tấm này nằm ở `placeholder` nên
   phép đo tương phản không duyệt tới — phải quyết bằng mắt, không chờ script báo.) */
.tpl-scrub #wish-form,
.tpl-scrub #show-comments {
  border: 1px solid var(--t68-line);
  border-radius: 0;
}

/* Kẻ trên/dưới hàng thứ của lịch: `libs.css` (bundle donor) khoá #CFCFD0 xám lạnh.
   Nguồn dùng kẻ ấm cùng tông kem — đè ở đây thay vì sửa libs.css dùng chung. */
.tpl-scrub .weddingdate-section .mini_calendar table th {
  border-top-color: var(--t68-line);
  border-bottom-color: var(--t68-line);
}

/* Bo góc donor còn sót ở ba khối dùng component chung. Cột `radius` trong source-shape.md
   toàn 0px, và source-fidelity.md xếp "khối đặc bo 50px" vào nhóm ngôn ngữ donor phải BỎ
   chứ không phải tô lại màu. Đè trong style.css của template, không đụng component. */
.tpl-scrub .timeline-card .img-holder,
.tpl-scrub .video-section iframe,
.tpl-scrub #btn-see-more-gallery {
  border-radius: 0;
}