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

.story-section .timeline-card::before {
  border-color: #9dae82;
}
.story-section .timeline .title::before {
  border-color: #9dae82;
}
.story-section .timeline-1 li {
  border-left-color: #f9f9f9;
}
.story-section .timeline-1 li:before {
  border-color: #9dae82;
  box-shadow: 3px 3px 0px #f9f9f9;
}
.section-bg-affect:nth-child(even) {
  background-color: #f0f5f3;
}
/* .section-bg-affect:nth-child(even) {
  background-color: #f8f2f2;
} */
/* .section-bg-affect {
  background-color: #f6f1f3;
} */
/* .section-bg-affect {
  background-color: #f0f5f3;
} */
.story-section .timeline-card::before {
  border-color: #c9b5b6;
}

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

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

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

.donate-section .donate-box .donate-card {
  width: 100%;
  border: 1px dashed #d3c4a1;
 
}
.donate-card.p-4.rounded.text-center {
  border: 1px dashed #c9b5b6;
}
.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Ỡ (khoảng 150 dòng).
   Nó là CSS CHẾT: không template nào trong repo có markup trỏ tới, và nó trỏ ngược vào hai
   ảnh donor cũng không tồn tại (`intro_bg_top.png`, `intro_bg_bottom.png`). Gỡ vì màn mở
   đầu THẬT của template này 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: #b5b9a3;
  text-align: center;
  color: #fff;
}
.main_area {
  background: url("../img/bg.png");
}
.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: #e1dbc8;
}
.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: #e1dbc8;
}
/* accessibility-btn */
.accessibility-btn {
  background-color: #9dae82;
  border: none;
}
.accessibility-btn:hover {
  opacity: 0.6 !important;
  background-color: #9dae82;
  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: #9dae82;
  border-color: #9dae82;
}
.gallery-item{
  cursor: pointer;
}
/* .lg-backdrop/.lg-outer đã gỡ: lightGallery không còn trong bundle template65
   (đã 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: #9dae82;
}
.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: #9dae82;
}
.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: 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: 'Bellota Text', cursive;
}
.parent-name {
  font-weight: bold;
}
/* event-section */
.event-section .event-item {
  background-color: #f0f5f3;
}
.event-section a {
  background: #9dae82;
  border-color: #9dae82;
}

/* 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 {
  width: 70%;
  margin: 0 auto;
  background: url("../img/groombride.png") no-repeat top center;
  background-size: 250px;
  font-size: 1.5rem;
  color: #fff;
}
.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: #9dae82;
}

/* wishes-section */
.wish-box {
  border-color: #000;
}
.wishes-section button,
.event-section a {
  background-color: #9dae82;
  border: none;
  transition: 0.2s;
}
.wishes-section button:hover,
.event-section a:hover {
  opacity: 0.6 !important;
  background-color: #9dae82 !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: #f0f5f3;
}
.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: #e1dbc8;
  }
  .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: #BDC9AB;
}
button#btn-submit-comment {
  background-color: #7E8672;
  color: #fff;
  text-transform: uppercase;
}
button#btn-submit-comment:hover {
  opacity:0.6;
  color:black;
}
#show-comments {
  background-color: #BDC9AB;
}
.box-comment {
  background-color: white;
}
.reply-comment-box {
  border-top: 1px dashed #7E8672;
}
#show-comments::-webkit-scrollbar {
  width: 8px;
}
#show-comments::-webkit-scrollbar-thumb {
  background-color: #7E8672;
}
.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=#9dae82 cream=#e1dbc8 (mixed; legacy).
   Olive is light -> gradients end on deep olive #6b7853 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: #65714f; }              /* readable deep-olive (~4.7:1) */
#gifts .gift-buy-link        { border-color: #9dae82; color: #65714f; }
#gifts .gift-buy-link:hover  { background: #eff2e8; color: #65714f; }
#gifts .gift-claim-btn       { background: linear-gradient(45deg, #869a68, #6b7853); }
#gifts .gift-header          { background: linear-gradient(135deg, #869a68, #6b7853); }
#gifts .gift-submit          { background: linear-gradient(45deg, #869a68, #6b7853); }
#gifts .gift-info-ic         { background: #e6ead9; color: #65714f; }
#gifts .gift-copy-ic         { color: #65714f; }
#gifts .gift-copy-ic:hover   { color: #55603f; }
#gifts .gift-cta-shopee      { background: linear-gradient(90deg, #869a68, #6b7853);
                               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: #f1f2e8; border-color: #dde3d0; }
#gifts .gift-selfbuy-ic      { background: #e6ead9; color: #65714f; }
#gifts .gift-copyall         { color: #65714f; }
#gifts .gift-copyall:hover   { color: #55603f; }

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

   Đặt CUỐI FILE để đè lên phần donor t6 phía trên — donor là nền SÁNG (sage + hồng),
   nguồn là nền TỐI (slate + vàng). Không sửa xen kẽ ở trên vì như thế phải rà 966 dòng
   và vẫn sót; gom một lớp ở cuối thì đọc được toàn bộ quyết định thẩm mỹ ở một chỗ.
   ══════════════════════════════════════════════════════════════════════════════════════ */

.tpl-scrub {
  /* Đo được trên nguồn */
  --t65-bg: #414c57;          /* nền trang, `background: #414C57 url(bg.png) repeat-y` */
  --t65-ink: #fdfaf3;         /* chữ chính — 52 lần trên nguồn, 8.5:1 trên nền slate */
  --t65-gold: #e5bd6d;        /* nhấn chính (ngày ở hero) — 4.9:1, đủ AA cho chữ thường */
  --t65-gold-bright: #f6c157; /* nhấn ở màn intro — sáng hơn một bậc */
  --t65-gold-deep: #b48a36;   /* CHỈ dùng cho viền/trang trí: 2.8:1, không đạt AA cho chữ */

  /* Suy ra từ nền slate, không có ở nguồn (nguồn không có thẻ/ô nhập nào) */
  --t65-bg-alt: #48535e;      /* section xen kẽ, sáng hơn nền một bậc */
  --t65-surface: #4d5964;     /* mặt thẻ, ô nhập */
  --t65-line: #5e6b77;        /* kẻ mảnh */
  --t65-ink-dim: #bcc5ce;     /* chữ phụ — 4.8:1 */
}

/* ── Nền + chữ ───────────────────────────────────────────────────────────────────────
   Nguồn phủ `bg.png` (vân slate rất nhạt, 1000×150) `repeat-y` + `background-size: contain`
   nên vân giãn theo bề ngang khung rồi lặp dọc. Giữ nguyên cách đó. */
body {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  background: var(--t65-bg, #414c57);
  color: #fdfaf3;
}

.tpl-scrub .wrapper {
  background: var(--t65-bg) url("../img/bg-slate.png") repeat-y;
  background-size: contain;
  color: var(--t65-ink);
}

/* Nguồn KHÔNG có nền xen kẽ — cả trang là một mặt slate liền. Donor t6 tô `#f0f5f3` cho
   section chẵn, để nguyên là ra băng sáng chói giữa nền tối. */
.tpl-scrub .section-bg-affect,
.tpl-scrub .section-bg-affect:nth-child(even) {
  background-color: transparent;
}

.tpl-scrub .section-title {
  font-family: "Quicksand", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: var(--t65-ink);
}

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

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

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

/* letter-spacing ÂM (-1.8px) là của chữ Hàn — không mang sang tiếng Việt, dấu sẽ dính chữ. */
.tpl-scrub * {
  letter-spacing: normal;
}

/* ══ MÀN MỞ ĐẦU ══════════════════════════════════════════════════════════════════════
   Nguồn: `.intro` fixed phủ kín, z-index 9999, nền slate + vân, hai dải lá ở mép trên và
   mép dưới (::before/::after, cao 100px). Ba lớp hiện lần lượt rồi cả màn tắt sau 5s.
   Số đo lấy trên trang sống:
     badge   margin-top 100px, rộng tràn khung, ảnh 430×113
     ô ngày  margin-top 100px, 200×160, padding-top 30, nền save-date-frame.png contain
             số lớn 48px/48px · dòng nhỏ 16px/16px · cả hai màu #f6c157
     tên     margin-top 50px, 24px/30px, màu #fdfaf3, lá vàng cao 30px, cách hai bên 10px
   Nhịp chuyển động nằm ở 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. Hai lý do:
       1. Nó không cần nhận — cú bấm để bỏ qua bắt ở `window`, sự kiện vẫn nổi lên tới đó.
       2. Để nó nhận thì `document.elementFromPoint` trả về chính nó, tức là mọi phép đo
          vùng chạm trong 5 giây đầu đều đo nhầm vào tấm phủ. Phép kiểm vùng chạm 44px
          của `.playerIcon` (chạy ở mốc t=3s) trượt đúng vì lý do này.
     Đánh đổi: cú chạm để bỏ qua màn cũng rơi xuống thứ đang nằm dưới. Đã thử nuốt cú
     click đó nhưng phải bỏ — tấm phủ nuốt input là làm hỏng chính hợp đồng "các thành
     phần dùng chung luôn bấm được" của repo (nút nhạc, ô ảnh đều nằm dưới). Thứ nằm dưới
     trong 5 giây đầu chỉ là hero và mấy nút bật/tắt đảo lại được, nên đánh đổi này rẻ.
     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(--t65-bg, #414c57) url("../img/bg-slate.png") repeat-y;
  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;
  pointer-events: none;
}

.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-leaf-top.png") no-repeat center top;
  background-size: contain;
}

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

/* Nguồn neo nội dung từ MÉP TRÊN (badge ở top:100), không căn giữa dọc — trên màn cao
   thì dưới trống hẳn một khoảng. Giữ đúng vậy, nhưng kẹp theo chiều cao khung để màn
   thấp (SE, màn hình chia đôi) không đẩy tên rơi ra ngoài. */
.tpl-intro__stack {
  position: relative;
  z-index: 2;
  padding-top: clamp(48px, 11vh, 100px);
}

.tpl-intro__badge,
.tpl-intro__date,
.tpl-intro__names {
  opacity: 0;
  transition: opacity 1500ms ease, transform 1500ms ease; /* nguồn: animate(..., 1500) */
}

/* animationDown: nguồn đặt `top:-50px` rồi kéo về 0 */
.tpl-intro__badge {
  transform: translateY(-50px);
}

/* animationUp: nguồn đặt `top:50px` rồi kéo về 0 */
.tpl-intro__names {
  transform: translateY(50px);
}

/* animationIn: chỉ mờ→rõ, không dịch chuyển */
.tpl-intro__date {
  transform: none;
}

.tpl-intro__badge.is-on,
.tpl-intro__date.is-on,
.tpl-intro__names.is-on,
.tpl-intro.is-reduced .tpl-intro__badge,
.tpl-intro.is-reduced .tpl-intro__date,
.tpl-intro.is-reduced .tpl-intro__names {
  opacity: 1;
  transform: translateY(0);
}

.tpl-intro.is-reduced .tpl-intro__badge,
.tpl-intro.is-reduced .tpl-intro__date,
.tpl-intro.is-reduced .tpl-intro__names {
  transition-duration: 1ms;
}

.tpl-intro__badge img {
  display: block;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.tpl-intro__date {
  width: 200px;
  height: 160px;
  margin: clamp(40px, 11vh, 100px) auto 0;
  padding-top: 30px;
  background: url("../img/save-date-frame.png") no-repeat left top; /* xem chú thích ở .hero-save-date */
  background-size: contain;
  color: var(--t65-gold-bright);
  font-family: "Quicksand", system-ui, sans-serif;
}

.tpl-intro__num {
  font-size: 48px;
  line-height: 48px;
  font-weight: 300;
}

.tpl-intro__num small {
  font-size: .5em;
  font-weight: 300;
}

.tpl-intro__when {
  font-size: 16px;
  line-height: 16px;
  font-weight: 300;
  text-transform: uppercase;
}

/* Tên: nguồn để 24px cho tên Hàn 3 ký tự. Tên Latin/Việt dài gấp nhiều lần nên phải co
   theo bề ngang khung và cho xuống dòng, nếu không "Nguyễn Thị Thanh Hương ♥ ..." tràn. */
.tpl-intro__names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  margin-top: clamp(28px, 6vh, 50px);
  padding: 0 16px;
  font-family: "Quicksand", system-ui, sans-serif;
  font-size: clamp(18px, 5.4vw, 24px);
  line-height: 30px;
  color: var(--t65-ink);
}

.tpl-intro__names img {
  height: 30px;
  width: auto;
}

/* Hạt lấp lánh — nguồn rắc bằng $(document).snowfall() trên toàn trang; ở đây gói trong
   màn intro (xem chú thích đầu js/intro-opening.js). */
.tpl-intro__sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.tpl-intro__sparkle {
  position: absolute;
  top: -8%;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  animation-name: t65SparkleFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes t65SparkleFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .7; }
  100% { transform: translateY(112vh) rotate(180deg); opacity: 0; }
}

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

/* ══ HERO ════════════════════════════════════════════════════════════════════════════
   Số đo trên nguồn @430px (`.main_image_area`, cao 771px):
     .pt50            padding-top 50 · ảnh tiêu đề 200×44
     .pt30.mt40       ô ngày 200×160, margin-top 40, padding-top 30, chữ #e5bd6d
                      số lớn 48/48 · dòng nhỏ 16/16
     .ph20            ảnh đôi 390×260, hai bên chừa 20
     .ts18.mt40       hàng tên 28.8px/30px, #fdfaf3, sprig 15×16
     .ts15.mt50       nơi tổ chức 24px/31.2px, #e5bd6d, trái tim 30×30 */
.tpl-scrub .banner-section .main_area {
  background: none; /* donor phủ bg.png ở đây; nền đã nằm ở .wrapper */
  padding: 0 0 40px;  /* nguồn: `.main_area pb40` */
}

.tpl-scrub .banner-section .wrap-img-title {
  width: 100%;
  padding-top: 50px;
}

.tpl-scrub .banner-section .hero-title-img {
  width: 200px;
  max-width: 62%;
  height: auto;
  margin: 0 auto;
}

.tpl-scrub .banner-section .hero-save-date {
  width: 200px;
  height: 160px;
  margin: 40px auto 0;
  padding-top: 30px;
  /* Vị trí nền là TRÁI-TRÊN, không phải center. Nguồn không khai background-position nên
     nó nhận mặc định `0% 0%`; ảnh khung (490×274) co theo `contain` thành 200×112 rồi bám
     mép trên của hộp 160px. Để `center` là ảnh tụt xuống 24px và đường kẻ ngang của khung
     cắt ngang qua hai con số. */
  background: url("../img/save-date-frame.png") no-repeat left top;
  background-size: contain;
  color: var(--t65-gold);
  font-family: "Quicksand", system-ui, sans-serif;
}

.tpl-scrub .banner-section .hero-save-date__num {
  font-size: 48px;
  line-height: 48px;
  font-weight: 300;
}

.tpl-scrub .banner-section .hero-save-date__num small {
  font-size: .5em;
  font-weight: 300;
}

.tpl-scrub .banner-section .hero-save-date__when {
  font-size: 16px;
  line-height: 16px;
  font-weight: 300;
  text-transform: uppercase;
}

/* Chuỗi ngày đầy đủ: nguồn không in lại ngày dạng chữ ở hero (ô SAVE THE DATE đã nói hết).
   Giữ phần tử cho `data-wedding-date` nhưng ẩn khỏi mắt — vẫn đọc được với trình đọc màn
   hình, nơi hai con số 09/11 tách rời là vô nghĩa. */
.tpl-scrub .banner-section .wrap-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tpl-scrub .banner-section .wrap-img {
  padding: 0 20px;
}

.tpl-scrub .banner-section .wrap-img #main-image {
  width: 100%;
  height: auto;
  border-radius: 0; /* nguồn đo được radius 0 */
}

/* Hàng tên. Nguồn để 28.8px cho tên Hàn 3 ký tự; tên Việt/Latin dài hơn nhiều nên phải
   co theo bề ngang và cho xuống dòng — nếu không thì tràn khỏi khung ở máy 360px. */
.tpl-scrub .banner-section .name-user {
  margin-top: 40px;
  padding: 0 16px;
}

.tpl-scrub .banner-section .hero-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  margin: 0;
  font-family: "Quicksand", system-ui, sans-serif;
  font-size: clamp(20px, 6.7vw, 28.8px);
  line-height: 30px;
  color: var(--t65-ink);
}

.tpl-scrub .banner-section .hero-sprig {
  width: 15px;
  height: auto;
}

.tpl-scrub .banner-section .hero-name-divider {
  width: 10px;
  height: auto;
}

.tpl-scrub .banner-section .hero-venue {
  margin-top: 50px;
  padding: 0 16px;
  font-family: "Quicksand", system-ui, sans-serif;
  font-size: 24px;
  line-height: 31.2px;
  color: var(--t65-gold);
}

.tpl-scrub .banner-section .hero-heart {
  display: block;
  width: 30px;
  height: auto;
  margin: 0 auto 20px; /* nguồn: `.imw30 mb20` */
}

/* Cặp với motion-scrub-hero.js — báo trước cho trình duyệt lớp nào sẽ bị đẩy. */
.tpl-scrub .banner-section .hero-title-img,
.tpl-scrub .banner-section .hero-save-date,
.tpl-scrub .banner-section #main-image,
.tpl-scrub .banner-section .hero-names,
.tpl-scrub .banner-section .hero-venue {
  will-change: transform;
}

/* ══ THÀNH PHẦN DÙNG CHUNG — chuyển sang nền tối ═════════════════════════════════════
   Đây là phần KHÔNG có ở nguồn (nguồn không có RSVP, sổ lời chúc, hộp quà của repo).
   Nguyên tắc: giữ nguyên hình dáng/bố cục của repo, chỉ nói lại bằng bảng màu của nguồn
   — slate làm nền, kem làm chữ, vàng làm nhấn, viền mảnh thay cho khối đặc. */

/* Nút truy cập nhanh. Donor tô nền sage đặc; nguồn không có nút đặc nào — nó dùng khung
   viền mảnh (xem `.btn_view_parent` của nguồn). Icon trong repo là PNG TRẮNG nên trên nền
   tối chúng hiện đúng, không cần filter như template64 phải làm. */
.tpl-scrub .accessibility-btn {
  background-color: transparent;
  border: 1px solid var(--t65-gold-deep);
  border-radius: 0;
  color: var(--t65-ink);
}

.tpl-scrub .accessibility-btn:hover,
.tpl-scrub .accessibility-btn:focus-visible {
  background-color: rgba(229, 189, 109, .12);
  border-color: var(--t65-gold);
  color: var(--t65-ink);
}

.tpl-scrub .btn,
.tpl-scrub .btn-secondary,
.tpl-scrub #btn-see-more-gallery,
.tpl-scrub .gallery-section .btn-secondary.btn-see-more-gallery {
  background-color: transparent;
  border: 1px solid var(--t65-gold-deep);
  border-radius: 0;
  color: var(--t65-ink);
}

.tpl-scrub .btn:hover,
.tpl-scrub .btn:focus-visible {
  background-color: rgba(229, 189, 109, .12);
  border-color: var(--t65-gold);
  color: var(--t65-ink);
}

/* Ô nhập của sổ lời chúc + RSVP */
.tpl-scrub .form-control,
.tpl-scrub .form-select,
.tpl-scrub textarea,
.tpl-scrub input[type="text"],
.tpl-scrub input[type="email"],
.tpl-scrub input[type="tel"] {
  background-color: var(--t65-surface);
  border: 1px solid var(--t65-line);
  color: var(--t65-ink);
}

.tpl-scrub .form-control::placeholder,
.tpl-scrub textarea::placeholder {
  color: #97a2ad;
}

.tpl-scrub .form-control:focus,
.tpl-scrub textarea:focus {
  background-color: var(--t65-surface);
  border-color: var(--t65-gold);
  box-shadow: 0 0 0 .18rem rgba(229, 189, 109, .25);
  color: var(--t65-ink);
}

/* Thẻ: lời chúc, quà, phù dâu/phù rể, chuyển khoản */
.tpl-scrub .card,
.tpl-scrub .wish-item,
.tpl-scrub .gift-item,
.tpl-scrub .donate-section .donate-box .donate-card {
  background-color: var(--t65-surface);
  border: 1px solid var(--t65-line);
  border-radius: 0;
  color: var(--t65-ink);
}

/* Lịch + đồng hồ đếm ngược */
.tpl-scrub .weddingdate-section .mini_calendar,
.tpl-scrub .weddingdate-section .mini_calendar_main {
  background-color: transparent;
  color: var(--t65-ink);
}

.tpl-scrub .weddingdate-section .mini_calendar table th,
.tpl-scrub .weddingdate-section .mini_calendar td {
  color: var(--t65-ink);
  border-color: var(--t65-line);
}

.tpl-scrub .weddingdate-section .mini_calendar td #today {
  background-color: var(--t65-gold);
  color: #2f3841;
}

.tpl-scrub .weddingdate-section #clock > div {
  color: var(--t65-gold);
}

/* Dòng thời gian chuyện tình */
.tpl-scrub .story-section .timeline-card,
.tpl-scrub .timeline-card .img-holder {
  background-color: transparent;
}

.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(--t65-gold-deep);
  box-shadow: none;
}

.tpl-scrub .story-section .timeline-1 li {
  border-left-color: var(--t65-line);
}

/* Khối lời mời: nguồn lồng nội dung trong một khung viền mảnh có góc khoét
   (top-bg_2.png trên, bottom-bg_3.png dưới). Dựng lại bằng đúng hai ảnh đó. */
.tpl-scrub .invitation-section .invitation_wrapper {
  position: relative;
  padding: 56px 0;
}

.tpl-scrub .invitation-section .invitation_wrapper::before,
.tpl-scrub .invitation-section .invitation_wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 47px; /* nguồn đo được 387×47 ở khung 430 */
  pointer-events: none;
  opacity: .55;
}

.tpl-scrub .invitation-section .invitation_wrapper::before {
  top: 0;
  background: url("../img/frame-top.png") no-repeat center top;
  background-size: contain;
}

.tpl-scrub .invitation-section .invitation_wrapper::after {
  bottom: 0;
  background: url("../img/frame-bottom.png") no-repeat center bottom;
  background-size: contain;
}

/* Ảnh chữ vàng "I invite you to the Wedding." — nguồn đặt ngay trên tiêu đề khối lời mời.
   Đặt làm TRANG TRÍ phía trên tiêu đề i18n, KHÔNG thay tiêu đề: thay là mất bản dịch. */
.tpl-scrub .invitation-section .invitation-title img {
  width: 150px; /* nguồn đo được 150×61 */
  height: auto;
  margin-bottom: 24px;
}

.tpl-scrub .invitation-couple .text,
.tpl-scrub .invitation-couple p {
  color: var(--t65-ink);
}

.tpl-scrub .invitation-couple .text small {
  color: var(--t65-gold);
}

/* Chân trang */
.tpl-scrub .footer-section {
  color: var(--t65-ink);
}

.tpl-scrub .footer-section .title {
  color: var(--t65-gold);
}

/* Thanh cuộn: donor để trắng/sage, chói trên nền tối */
::-webkit-scrollbar-track { background-color: #38414a; }
::-webkit-scrollbar-thumb { background-color: var(--t65-gold-deep); }

/* ══ DỌN NỐT NHỮNG MẶT CÒN SÁNG ═════════════════════════════════════════════════════
   Tìm bằng phép đo tương phản chạy trên trang sống (không soi mắt thường): 15 nhóm chữ
   dưới ngưỡng WCAG AA, tất cả đều do MỘT nguyên nhân — vài mặt nền vẫn là của donor
   (giấy sáng / thẻ trắng) trong khi chữ đã chuyển sang kem. */

/* Hai section này tự phủ `bg.png` (vân giấy SÁNG của donor) nên nền tối của .wrapper
   không tới được, thành hai băng trắng giữa trang. */
.tpl-scrub .invitation-section,
.tpl-scrub .couple-section {
  background: none;
}

/* Thanh điều hướng dính: donor để `bg-white` ngay trong markup (class Bootstrap), chữ
   tiêu đề màu nhạt -> gần như không đọc được. Không sửa markup dùng chung, đè bằng CSS. */
.tpl-scrub .site-header .navbar {
  background-color: #39434d !important; /* thắng .bg-white của Bootstrap (cùng 0,1,0) */
  border-bottom: 1px solid var(--t65-line);
  box-shadow: none;
}

.tpl-scrub .site-header .navbar-brand,
.tpl-scrub .site-header .navbar-brand.title {
  color: var(--t65-ink);
}

.tpl-scrub .site-header .navbar-toggler i,
.tpl-scrub .site-header .bi {
  color: var(--t65-ink) !important; /* markup gắn cứng .text-black */
}

/* Panel menu trượt ra (`components/menu.blade.php`): Bootstrap đặt `--bs-offcanvas-bg: #fff`
   trong khi chữ bên trong thừa kế màu kem của theme -> chữ kem trên mặt trắng, 1.06:1,
   coi như mất chữ. Kéo cả panel về cùng mặt slate với trang thay vì đổi màu chữ. */
.tpl-scrub .offcanvas-menu {
  --bs-offcanvas-bg: var(--t65-bg-alt);
  --bs-offcanvas-color: var(--t65-ink);
  background-color: var(--t65-bg-alt); /* phòng bản Bootstrap không dùng biến */
  color: var(--t65-ink);
  border-left: 1px solid var(--t65-line);
}

.tpl-scrub .offcanvas-menu .nav-link {
  color: var(--t65-ink); /* 7.1:1 trên nền panel */
}

.tpl-scrub .offcanvas-menu .nav-link:hover,
.tpl-scrub .offcanvas-menu .nav-link:focus-visible {
  color: var(--t65-gold-bright); /* 4.7:1 — `--t65-gold` chỉ được 4.4:1, thiếu AA */
}

/* Gạch dưới mỗi mục: donor để `#bfb18e`, lệch khỏi bảng màu vàng của t65. */
.tpl-scrub .offcanvas-menu li:after {
  border-color: var(--t65-gold-deep);
}

/* Nút đóng: `.btn-close` là SVG dấu X ĐEN nhúng cứng trong Bootstrap -> vô hình trên
   nền tối. Không sửa markup dùng chung, đảo màu bằng filter. */
.tpl-scrub .offcanvas-menu .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.6);
  opacity: 0.85;
}

.tpl-scrub .offcanvas-menu .btn-close:hover,
.tpl-scrub .offcanvas-menu .btn-close:focus-visible {
  opacity: 1;
}

/* Lịch: "11 / 2026" còn màu sage `#9dae82` của donor — 3.68:1, dưới ngưỡng. */
.tpl-scrub .calendar-month {
  color: var(--t65-gold);
}

/* Thẻ sự kiện: `libs.css` tô `#e9e2ce` (kem sáng). */
.tpl-scrub .event-section .event-item {
  background-color: var(--t65-surface);
  border: 1px solid var(--t65-line);
}

/* Nút gửi lời chúc: trắng trên trắng (3.79:1). Đổi sang vàng đặc, chữ slate — 8.9:1. */
.tpl-scrub #btn-submit-comment {
  background-color: var(--t65-gold);
  color: #2f3841;
  border: 0;
}

.tpl-scrub #btn-submit-comment:hover,
.tpl-scrub #btn-submit-comment:focus-visible {
  background-color: var(--t65-gold-bright);
  color: #2f3841;
}

/* ── Hộp quà ────────────────────────────────────────────────────────────────────────
   Style gốc nằm trong <style> NGAY TRONG components/gifts.blade.php (file dùng chung của
   mọi template, không sửa). Nó ở trong body nên đứng SAU <link> của template — muốn đè
   phải thắng bằng specificity, không phải bằng thứ tự. Dùng tiền tố `#gifts` (1,1,0) >
   class trần (0,1,0), giống cách template64 đã làm, không cần !important.
   Nguồn không có hộp quà; ở đây chỉ nói lại bằng bảng màu slate + vàng. */
#gifts .gift-card {
  background: var(--t65-surface);
  border: 1px solid var(--t65-line);
  box-shadow: none;
  color: var(--t65-ink);
}

#gifts .gift-card-title { color: var(--t65-ink); }
#gifts .gift-card-note { color: var(--t65-ink-dim); }
#gifts .gift-card-price { color: var(--t65-gold); }
#gifts .gift-card-price-ref { color: var(--t65-ink-dim); }

#gifts .gift-buy-link {
  background: transparent;
  border-color: var(--t65-gold-deep);
  color: var(--t65-gold);
}

#gifts .gift-buy-link:hover {
  background: rgba(229, 189, 109, .14);
  color: var(--t65-gold-bright);
}

/* Dải màu phải sáng ở CẢ HAI đầu: với chữ slate `#2f3841`, đầu tối `#b48a36` chỉ cho
   3.71:1 — chữ nằm vắt qua dải nên phải tính theo đầu tệ nhất, không phải màu trung bình.
   Cặp dưới đây cho 7.6:1 ở đầu sáng và 5.3:1 ở đầu tối. */
#gifts .gift-claim-btn,
#gifts .gift-submit {
  background: linear-gradient(45deg, #f0cb85, #cfa85a);
  color: #2f3841;
}

#gifts .gift-header {
  background: linear-gradient(135deg, #b48a36, #7d5f22);
}

/* Hộp thoại quà giữ NỀN SÁNG: nó là lớp phủ đọc kỹ (nhập tên, địa chỉ nhận) chứ không
   phải một mảng của trang. Chỉ đổi phần nhấn cho hợp tông, không lật nền — lật thì phải
   dò lại toàn bộ chữ/ô nhập bên trong của một component dùng chung. */
#gifts .gift-info-ic { background: #f3ecdd; color: #7d5f22; }
#gifts .gift-copy-ic,
#gifts .gift-copy-ic:hover { color: #7d5f22; }

/* Vòng dọn thứ hai — ba nhóm còn dưới ngưỡng sau vòng một, tất cả đo lại trên trang sống. */

/* `.weddingdate-section .mini_calendar .calendar-month` của donor là (0,3,0), cao hơn
   `.tpl-scrub .calendar-month` (0,2,0) nên vòng trước không đè được. Đi cùng đường dẫn. */
.tpl-scrub .weddingdate-section .mini_calendar .calendar-month,
.tpl-scrub .weddingdate-section .mini_calendar table th {
  color: var(--t65-gold);
}

/* Khối dâu/rể: markup `.wrap-icon` của donor đã bỏ hẳn, xem `.wrap-people` ở cuối file. */
.tpl-scrub .couple-section .member .member-contact a {
  color: var(--t65-gold);
}

/* Mặt thẻ sáng hơn nền một bậc thì chữ vàng `#e5bd6d` chỉ còn 4.04:1 — dưới AA. Hạ mặt
   thẻ xuống `#444f5a` là vàng lên 4.72:1 và chữ phụ lên 4.60:1, vẫn còn tách khỏi nền
   trang `#414c57` đủ để đọc ra hình thẻ (nhờ viền `--t65-line`). */
.tpl-scrub {
  --t65-surface: #444f5a;
}

/* Ornament ngăn khối (nhánh lá vàng, kiểu dấu ngăn của nguồn). Nguồn để cao 28px, căn
   giữa, đứng một mình — xem "Ornament căn giữa" trong source-shape.md. */
.tpl-scrub .hero-ornament img {
  /* Khung bọc mang class `.wrap-img` nên dính `.weddingdate-section .wrap-img{width:150px}`
     của donor. Khung đó căn giữa đúng, nhưng ảnh chỉ rộng ~28px và là inline nên nằm sát
     mép trái khung -> lệch trái ~61px. Cho ảnh tự căn giữa trong khung, không phụ thuộc
     bề ngang khung. */
  display: block;
  width: auto;
  height: 40px;
  margin-inline: auto;
}

/* ══ KHỐI DÂU/RỂ — dựng theo `.contact_member_area` của nguồn ═══════════════════════════
   Donor t6/t38 xếp hai khối CHỒNG LÊN NHAU, mỗi khối chiếm trọn bề ngang, ảnh to 350px.
   Nguồn làm ngược lại: HAI CỘT cạnh nhau, ảnh tròn nhỏ, dòng tên có kẻ mảnh bên dưới.
   Số đo trên nguồn @430px: cột 215 · ảnh 175×175 radius 50% · tên 17.6px · nhãn 15.84px ·
   kẻ `1px solid #576069` với `padding-bottom:10 margin-bottom:10` · cột đệm `20px 0`. */
.tpl-scrub .couple-section .wrap-people {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding-top: 20px;
}

.tpl-scrub .couple-section .member {
  flex: 1 1 0;
  min-width: 0; /* cho phép co lại; thiếu dòng này chữ dài sẽ nong cột ra khỏi khung */
  max-width: 215px;
  padding: 20px 8px;
  text-align: center;
  gap: 0;
}

/* Ảnh KHUNG DỌC 2:3, GÓC VUÔNG — cố ý KHÔNG bo tròn như nguồn.
   Nguồn bo tròn 50% được vì ảnh của nó là hai hình vẽ hoạt hoạ VUÔNG 500×500, chân dung
   nằm gọn giữa khung. Ảnh người dùng thật là ảnh DỌC (preview: 750×998 ≈ 3:4; nhiều máy
   xuất 9:16) — ép vào hình tròn thì cắt mất phần trên và dưới, mà cạnh tròn lại kẹp bề
   ngang xuống còn 175px nên mặt người còn rất nhỏ.
   2:3 chính là tỉ lệ ảnh dọc mà nguồn dùng ở khu ảnh của nó (200×299), và góc vuông đúng
   với cách nguồn xử lý ẢNH CHỤP THẬT — mọi ảnh chụp trên trang nguồn đều `radius: 0`, chỉ
   riêng hai avatar hoạt hoạ mới bo tròn. Ở cột 195px thì ảnh cao 292px, gấp ~1.7 lần
   đường kính hình tròn cũ. */
.tpl-scrub .couple-section .wrap-img {
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 2 / 3;
  border-radius: 0;
  overflow: hidden;
}

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

/* Dòng tên + kẻ mảnh bên dưới — chi tiết đặc trưng nhất của khối này ở nguồn. */
.tpl-scrub .couple-section .member-name {
  margin: 20px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--t65-line);
  font-family: "Quicksand", system-ui, sans-serif;
  font-size: 17.6px;
  line-height: 1.5;
  color: var(--t65-ink);
}

.tpl-scrub .couple-section .member-label {
  display: block;
  font-size: 15.84px;
  color: var(--t65-gold);
}

.tpl-scrub .couple-section .member-heart {
  margin-right: 4px;
}

/* Lời giới thiệu: nguồn để icon gọi/nhắn ở vị trí này. Cỡ nhỏ hơn dòng tên để cột hẹp
   215px vẫn đọc được, giãn dòng rộng cho dấu tiếng Việt. */
.tpl-scrub .couple-section .member-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--t65-ink-dim);
}

/* Tiêu đề khối dâu/rể: donor phủ `groombride.png` làm nền — dải ruy băng HỒNG PHẤN kèm
   nhánh hoa xám. Chọi hẳn với slate + vàng, và nguồn KHÔNG có dải nền nào cho tiêu đề
   section: nó dùng chữ hoa trần, giãn ký tự (`LOCATION`, `- C O N T A C T -`). Bỏ nền,
   trả tiêu đề về đúng hệ chữ của trang. */
.tpl-scrub .couple-section h2 {
  width: auto;
  background: none;
}

/* ══ DÒNG TÊN Ở KHỐI LỜI MỜI ═══════════════════════════════════════════════════════════
   Nguồn: `<small>GROOM</small>tên<small>♥</small>tên<small>BRIDE</small>` — một hàng, chữ
   trắng, tên 28.8px/30px, nhãn 8.64px, ♥ 17.28px.
   Donor để tên 32px và nhãn 16px: tên Việt rớt xuống hai dòng, nhãn to gần bằng tên nên
   cả cụm không còn đọc ra là "nhãn nhỏ + tên lớn" nữa. */
.tpl-scrub .invitation-couple .text {
  display: flex;
  flex-wrap: wrap;
  /* flex-end để ♥ ăn theo dòng TÊN, không theo dòng nhãn ở trên */
  align-items: flex-end;
  justify-content: center;
  gap: 0 10px;
  font-family: "Quicksand", system-ui, sans-serif;
  font-size: clamp(19px, 5.6vw, 28.8px);
  line-height: 1.45;
  color: var(--t65-ink);
}

.tpl-scrub .invitation-couple .text small {
  font-size: 10px; /* nguồn 8.64px — quá nhỏ cho chữ Việt có dấu */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t65-gold);
}

.tpl-scrub .invitation-couple .couple-name-heart {
  font-size: .6em; /* nguồn: 17.28 / 28.8 = 0.6 */
  color: var(--t65-gold);
}

.tpl-scrub .invitation-couple .couple-name-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tpl-scrub .invitation-couple .couple-name-col small {
  display: block;
  margin-bottom: 2px;
}

/* ══ KHỐI LỜI CHÚC (#section-comment) ═══════════════════════════════════════════════════
   Donor tô hai tấm nền SAGE `#bdc9ab` (`#wish-form`, `#show-comments`) và bong bóng bình
   luận màu TRẮNG. Trên nền slate thì hai tấm sage thành hai mảng xanh lạ ôm lấy ô nhập
   tối — chọi cả về màu lẫn về chất.

   Phép đo tương phản trước đó KHÔNG bắt được chỗ này: chữ trên hai tấm đó nằm ở
   `placeholder` chứ không phải nút text, mà phép đo chỉ duyệt phần tử có nút text trực
   tiếp. Ghi lại để lần sau đo cả placeholder.

   Nguồn không có sổ lời chúc. Nói lại bằng ngôn ngữ của nguồn: bỏ mảng đặc, dùng KHUNG
   VIỀN MẢNH (cách nguồn phân khối — xem `.invitation_wrapper` với hai mép kẻ). */
.tpl-scrub #wish-form,
.tpl-scrub #show-comments {
  background-color: transparent;
  border: 1px solid var(--t65-line);
}

/* Bong bóng bình luận: nổi lên một bậc so với nền, viền mảnh cho ra hình thẻ — cùng cách
   xử lý với thẻ quà, để hai khối "người dùng nhập" nói cùng một thứ tiếng. */
.tpl-scrub .box-comment {
  background-color: var(--t65-surface);
  border: 1px solid var(--t65-line);
  color: var(--t65-ink);
}

.tpl-scrub .box-comment p,
.tpl-scrub .box-comment .m-0 {
  color: var(--t65-ink);
}

.tpl-scrub .reply-comment-box {
  border-top: 1px dashed var(--t65-line);
}

.tpl-scrub #show-comments::-webkit-scrollbar-thumb {
  background-color: var(--t65-gold-deep);
}

/* Ô nhập nằm trên nền trong suốt nên cần viền mới thấy mép ô — nền ô `#444f5a` chỉ hơn
   nền trang `#414c57` đúng một bậc, không đủ để tự phân định.
   `!important` là bắt buộc, không phải cẩu thả: markup dùng chung gắn class Bootstrap
   `.border-0` (`border: 0 !important`), specificity thường không thắng được. */
.tpl-scrub #wish-form .form-control,
.tpl-scrub #wish-form textarea,
.tpl-scrub #wish-form input {
  border: 1px solid var(--t65-line) !important;
}

/* ══ BA NÚT TRUY CẬP NHANH ══════════════════════════════════════════════════════════════
   Ở khung hẹp ba nút xếp chồng, mỗi nút chiếm trọn bề ngang nên nhãn dài vẫn nằm một dòng.
   Từ 576px (`col-sm-4`) chúng đứng thành HÀNG BA, mỗi nút còn ~173px — nhãn dài rớt xuống
   hai dòng và nút đó CAO HƠN hai nút bên cạnh (đo được 61px vs 38px), hàng thành ra so le.
   Không phải lỗi hiếm: chỉ riêng tiếng Việt đã vỡ ("Xác nhận tham dự"), tiếng Swahili
   ("Sanduku la Zawadi za Harusi", 27 ký tự) và Telugu còn dài hơn.

   Không rút ngắn chữ dịch (34 locale, không phải việc của template). Chữa ở bố cục:
   cho ba nút CAO BẰNG NHAU và để nhãn xuống dòng gọn gàng bên cạnh icon. */
.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: 48px; /* đồng thời đủ vùng chạm 48px */
  white-space: normal;

  /* Ba chỗ giành lại bề ngang cho nhãn — đo cụ thể ở cột 181px (viewport 768, wrapper 575):
     1. bỏ lề NGANG của `m-1`. Khoảng cách giữa ba nút đã do gutter `gx-2` của row lo rồi;
        `m-1` chỉ làm hẹp nút thêm 8px. (template1 không mất 8px này vì ở đó nút là block
        `w-100` nên lề tràn ra ngoài cột thay vì co nút lại — nút t1 rộng 173px, t65 165px.)
     2. đệm ngang về 8px cho ĐỀU: markup donor cho nút "Mừng cưới" thiếu class `px-2` 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`: Be Vietnam Pro rộng hơn Bellota Text (font
        template1 dùng) ~11% ở cùng cỡ — "Xác nhận tham dự" đo được 129.2px vs 116.2px. Hạ
        1px là bù đúng phần chênh đó, và vì Be Vietnam Pro có chiều cao chữ thường lớn hơn
        nên nhìn vẫn không nhỏ hơn t1. */
  /* `!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 được. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-size: 14px;
}

/* 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. */
.tpl-scrub .accessibility-btn .content-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* khe icon–chữ; 8px là rộng hơn cả dấu cách thường của template1 */
  text-align: center;
  /* `balance` chia hai dòng cho đều — không có nó thì ra "Xác nhận tham / dự".
     Chỉ còn dùng cho locale dài hẳn (Swahili 27 ký tự): tiếng Việt nay đủ chỗ một dòng. */
  text-wrap: balance;
  top: 0px;
}

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