/* Ý 38: hộp thư thời gian. Phong bì giấy, dấu sáp hình tim; hiệu ứng chỉ dùng transform và opacity. */
.tc-section { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; }
.tc-section span { font-family: 'Be Vietnam Pro', sans-serif; font-size: .75rem; font-weight: 600; background: var(--fa-soft); color: var(--fa-amber-dark);
  padding: .1rem .55rem; border-radius: 999px; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.6rem 1.4rem; }

.tc-envelope { --env: #F6E7CC; --env-2: #EBD3AC; position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  text-decoration: none; color: #4A3426; background: linear-gradient(160deg, var(--env), var(--env-2));
  box-shadow: 0 14px 26px -16px rgba(110, 60, 20, .6), inset 0 0 0 1px rgba(255, 255, 255, .5); perspective: 800px;
  transition: transform .35s var(--fa-ease); }
.tc-envelope.t1 { --env: #FBE1DE; --env-2: #F2C7C1; } .tc-envelope.t2 { --env: #E4ECF4; --env-2: #CBD9E8; } .tc-envelope.t3 { --env: #E7EEDB; --env-2: #D2DFBF; }
@media (hover: hover) { .tc-envelope:hover { transform: translateY(-5px) rotate(-.8deg); color: #4A3426; } }
.tc-envelope:focus-visible { outline: 3px solid var(--fa-honey); outline-offset: 3px; }
/* hai vạt bên và vạt dưới vẽ bằng gradient chéo, vạt trên là .tc-flap */
.tc-envelope::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, rgba(0, 0, 0, .05) 49.5%, transparent 50%) left bottom / 50% 100% no-repeat,
              linear-gradient(to top left, rgba(0, 0, 0, .05) 49.5%, transparent 50%) right bottom / 50% 100% no-repeat; }
.tc-flap { position: absolute; left: 0; right: 0; top: 0; height: 46%; z-index: 2; transform-origin: top center;
  background: linear-gradient(180deg, var(--env-2), var(--env)); clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 3px 2px rgba(90, 50, 20, .15)); transition: transform .6s var(--fa-ease); }
.tc-seal { position: absolute; z-index: 3; left: 50%; top: 46%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  display: grid; place-items: center; color: #FFD9C9; font-size: 1.1rem;
  background: radial-gradient(circle at 35% 30%, #E8584A, #B3261E 60%, #8A1A14); box-shadow: 0 3px 6px rgba(90, 20, 10, .45), inset 0 0 0 3px rgba(255, 255, 255, .12); }
.tc-env-body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: .6rem 1rem .7rem; display: flex; flex-direction: column; gap: .1rem; }
.tc-env-body b { font-family: 'Patrick Hand', cursive; font-weight: 400; font-size: 1.3rem; line-height: 1.15; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tc-env-body small { color: #7A5A48; font-size: .78rem; }
.tc-when { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; font-weight: 600; color: #9A4A1C; }
/* thư đã mở: vạt trên lật ngược lên, lộ mép lá thư */
.tc-envelope.is-open { overflow: visible; margin-top: 2.2rem; }
/* vạt đã mở thì ẩn đi, chỉ để mép lá thư nhô lên (vạt lật ngược sẽ che tiêu đề phía trên) */
.tc-envelope.is-open .tc-flap { opacity: 0; }
.tc-letter-peek { position: absolute; z-index: 0; left: 8%; right: 8%; top: -18%; height: 60%; border-radius: 4px; background:
  repeating-linear-gradient(180deg, #FFFDF7 0 13px, rgba(214, 160, 96, .3) 13px 14px); box-shadow: 0 -2px 6px rgba(90, 50, 20, .15); }
.tc-envelope.is-open .tc-env-body { background: linear-gradient(180deg, transparent, var(--env) 35%); padding-top: 1.6rem; z-index: 2; }
.tc-new { position: absolute; z-index: 3; top: -10px; right: 10px; font-size: .7rem; font-weight: 700; color: #fff; padding: .15rem .55rem;
  border-radius: 999px; background: linear-gradient(135deg, var(--fa-coral), #E0562F); }

/* trang một lá thư còn niêm phong */
.tc-sealed { max-width: 560px; margin: 1.5rem auto 0; text-align: center; }
.tc-big-envelope { --env: #F6E7CC; --env-2: #EBD3AC; position: relative; width: min(100%, 420px); aspect-ratio: 16 / 10; margin: 0 auto; border-radius: 12px;
  background: linear-gradient(160deg, var(--env), var(--env-2)); box-shadow: 0 22px 40px -20px rgba(110, 60, 20, .7); perspective: 900px; }
.tc-big-envelope .tc-seal { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 1.5rem; }
.tc-big-envelope.is-sealing .tc-flap { animation: tc-close .8s var(--fa-ease) both; }
.tc-big-envelope.is-sealing .tc-seal { animation: tc-stamp .5s .75s var(--fa-ease) both; }
@keyframes tc-close { from { transform: rotateX(180deg); } to { transform: rotateX(0); } }
@keyframes tc-stamp { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tc-countdown { display: inline-flex; align-items: baseline; gap: .4rem; margin: .4rem 0 .6rem; padding: .5rem 1.2rem; border-radius: 16px;
  background: var(--fa-soft); color: var(--fa-amber-dark); }
.tc-countdown .n { font-family: 'Playfair Display', Georgia, serif; font-size: 2.4rem; font-weight: 600; line-height: 1; }
.tc-countdown .l { font-weight: 600; }

/* giấy viết thư (trang viết và lá thư đã mở) */
.tc-paper { --fa-ink: #4A3426; --fa-muted: #86695A; --fa-amber-dark: #B85E1E; position: relative; max-width: 760px; margin: 0 auto; padding: 2rem 2.2rem;
  color: #4A3426; border-radius: 6px; background: var(--tc-paper, #FFFDF7); box-shadow: 0 18px 40px -24px rgba(120, 80, 40, .55), 0 1px 0 #fff inset; }
.tc-paper .form-control, .tc-paper .form-select { background-color: #fff; color: #4A3426; }
.tc-lines { font-family: 'Patrick Hand', cursive; font-size: 1.25rem; line-height: 2rem;
  background: repeating-linear-gradient(180deg, #fff 0 calc(2rem - 1px), rgba(214, 160, 96, .3) calc(2rem - 1px) 2rem) !important; background-attachment: local !important; }
.tc-warn { font-size: .9rem; padding: .6rem .9rem; border-radius: 10px; background: #FFF4DE; color: #7A5210; }
.tc-message { font-family: 'Patrick Hand', cursive; font-size: 1.35rem; line-height: 2.1rem; white-space: pre-line; margin: 1rem 0 1.4rem;
  background: repeating-linear-gradient(180deg, transparent 0 calc(2.1rem - 1px), rgba(214, 160, 96, .28) calc(2.1rem - 1px) 2.1rem); }
.tc-photos { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.2rem; }
.tc-photos img { width: 200px; max-width: 45%; height: auto; padding: 6px 6px 18px; background: #fff; box-shadow: 0 8px 16px -10px rgba(80, 45, 15, .55); transform: rotate(-2deg); }
.tc-photos img:nth-child(even) { transform: rotate(2.4deg); }
.tc-sign { font-family: 'Patrick Hand', cursive; font-size: 1.5rem; text-align: right; margin: 0; color: #9A4A1C; }
.tc-sign::before { content: '— '; }

/* mở thư: phong bì mở ra, lá thư trượt lên */
.tc-opened { position: relative; padding-top: 1rem; }
.tc-open-anim { --env: #F6E7CC; --env-2: #EBD3AC; position: relative; width: min(100%, 420px); height: 120px; margin: 0 auto -40px; perspective: 900px;
  animation: tc-fade-away .6s 1.5s var(--fa-ease) forwards; }
/* phong bì mở xong thì mờ dần, chỉ còn lá thư */
@keyframes tc-fade-away { to { opacity: 0; transform: translateY(-14px); } }
.tc-open-anim .tc-flap { height: 100%; transform: rotateX(180deg); animation: tc-open .9s var(--fa-ease) both; }
.tc-open-anim .tc-pocket { position: absolute; inset: 0; border-radius: 0 0 12px 12px; background: linear-gradient(160deg, var(--env), var(--env-2)); opacity: 0; }
@keyframes tc-open { from { transform: rotateX(0); } to { transform: rotateX(180deg); } }
.tc-letter { animation: tc-rise 1s .5s var(--fa-ease) both; }
@keyframes tc-rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 575px) { .tc-paper { padding: 1.4rem 1.1rem; } }
@media (prefers-reduced-motion: reduce) {
  .tc-open-anim { display: none; }
  .tc-letter, .tc-open-anim .tc-flap, .tc-big-envelope.is-sealing .tc-flap, .tc-big-envelope.is-sealing .tc-seal { animation: none; }
}
html[data-theme="dark"] { --tc-paper: #EFE6D6; }