/* ============================================================
   THƯ MỜI QUÝ THẦY CÔ — trang trọng, sắc hè tươi
   Dùng chung palette/font với styles.css (bản mùa hè),
   thêm khung thư mời & thư ngỏ tri ân.
   ============================================================ */

/* Cormorant cho thân thư (thanh nhã) · Playfair cho chữ "THƯ MỜI" */
.page-thayco{--serif2:"Cormorant Garamond","Playfair Display",Georgia,serif}

/* ---------- HERO trang trọng ---------- */
.hero--formal{padding:120px 20px 90px}
.hero--formal .hero__bg{filter:saturate(1.2) contrast(1.03) brightness(.8)}
.hero--formal .hero__overlay{
  background:
    linear-gradient(180deg,rgba(96,30,20,.85),rgba(194,42,27,.56) 52%,rgba(18,77,51,.88)),
    radial-gradient(80% 55% at 50% 40%,rgba(239,166,44,.26),transparent 62%);
}

/* khung viền trắng đôi kiểu thiệp */
.frame{
  position:relative;max-width:720px;margin:0 auto;text-align:center;color:#fff;
  padding:clamp(38px,6vw,64px) clamp(24px,5vw,58px);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 30px 70px -30px rgba(0,0,0,.4);
  background:rgba(255,255,255,.1);backdrop-filter:blur(3px);border-radius:8px;
  text-shadow:0 2px 14px rgba(0,0,0,.25);
}
.frame::before{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.5);border-radius:5px;pointer-events:none}
.frame__corner{position:absolute;width:26px;height:26px;border:3px solid var(--gold-2);opacity:.95}
.frame__corner--tl{top:-3px;left:-3px;border-right:0;border-bottom:0}
.frame__corner--tr{top:-3px;right:-3px;border-left:0;border-bottom:0}
.frame__corner--bl{bottom:-3px;left:-3px;border-right:0;border-top:0}
.frame__corner--br{bottom:-3px;right:-3px;border-left:0;border-top:0}

.hero--formal .hero__eyebrow{margin-bottom:14px}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 14px}
.orn::before,.orn::after{content:"";height:2px;width:64px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent)}
.orn span{color:var(--gold-2);font-size:1.1rem}
.orn--dark span{color:var(--red)}
.orn--dark::before,.orn--dark::after{background:linear-gradient(90deg,transparent,var(--red),transparent)}

.fm-title{
  font-family:var(--serif);font-weight:800;letter-spacing:5px;text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,4.6rem);color:var(--gold-2);line-height:1;
  text-shadow:0 4px 22px rgba(0,0,0,.35);margin-bottom:16px;
}
.fm-kinh{font-family:var(--serif2);font-style:italic;font-size:clamp(1.1rem,2.6vw,1.5rem);color:#fff;margin-bottom:2px}
.fm-salute{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,4.2vw,2.3rem);color:#fff;margin-bottom:18px}
.fm-sub{font-size:clamp(1rem,2.2vw,1.15rem);color:#fff;line-height:1.6;margin-bottom:20px;font-weight:500}
.fm-sub b{color:var(--gold-2);font-weight:700}
.fm-meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:1px;font-size:.84rem;font-weight:600;
  color:#fff;padding:12px 0;border-top:1.5px solid rgba(255,255,255,.55);border-bottom:1.5px solid rgba(255,255,255,.55);margin-bottom:18px;
}
.fm-meta i{color:var(--gold-2);font-style:normal}
.hero--formal .hero__script{font-size:clamp(1.9rem,5.5vw,2.9rem);margin-bottom:20px}
.hero--formal .countdown .cd{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.hero--formal .countdown .cd__lab{color:var(--gold-2)}

/* ---------- THƯ NGỎ (letter) ---------- */
.thumoi{background:
  radial-gradient(120% 90% at 0 0,rgba(47,143,99,.14),transparent 42%),
  radial-gradient(100% 80% at 100% 100%,rgba(239,166,44,.16),transparent 45%),
  var(--cream);}
.thu{
  position:relative;max-width:780px;margin:0 auto;background:#fff;
  border:1px solid var(--line);border-radius:10px;
  padding:clamp(30px,5vw,58px) clamp(24px,5vw,60px);
  box-shadow:0 30px 66px -30px rgba(35,50,64,.4);
}
.thu::after{content:"";position:absolute;left:0;right:0;top:0;height:8px;border-radius:10px 10px 0 0;background:linear-gradient(90deg,var(--red),var(--gold),var(--green))}
.thu::before{content:"";position:absolute;inset:14px;border:1px solid var(--line);border-radius:6px;pointer-events:none}
.thu__head{text-align:center;margin-bottom:22px;padding-top:6px}
.thu__badge{font-family:var(--display);text-transform:uppercase;letter-spacing:3px;font-weight:600;font-size:.8rem;color:var(--red);margin-bottom:6px}
.thu__title{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.6vw,2.7rem);color:var(--green-deep)}
.thu__salute{font-family:var(--serif2);font-size:1.35rem;color:var(--ink);margin-bottom:18px}
.thu__salute b{color:var(--red-deep);font-weight:600}
.thu__body{font-family:var(--serif2);font-size:clamp(1.14rem,2.4vw,1.34rem);line-height:1.85;color:var(--ink)}
.thu__body p{margin-bottom:16px}
.thu__body b{color:var(--red-deep);font-weight:600}
.thu__lines{
  display:flex;flex-direction:column;gap:8px;margin:22px 0;padding:20px 24px;
  background:var(--cream-2);border-left:5px solid var(--gold);border-radius:10px;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
}
.thu__lines i{font-style:normal;font-weight:700;color:var(--green-deep);min-width:132px;display:inline-block}
.thu__foot{text-align:center;margin-top:26px;padding-top:20px;border-top:1px dashed var(--line)}
.thu__close{font-family:var(--serif2);font-style:italic;font-size:1.4rem;color:var(--red-deep);margin-bottom:8px}
.thu__by{font-family:var(--display);text-transform:uppercase;letter-spacing:1px;font-weight:600;font-size:.85rem;color:var(--ink-soft)}
.thu__sign{font-family:var(--script);font-size:2rem;color:var(--red);margin-top:2px}

/* ---------- điểm nhấn phần tri ân ---------- */
.pitem--hi{background:linear-gradient(180deg,#fff8e6,#fff0cf);border-left-color:var(--gold)!important;box-shadow:0 12px 26px -20px rgba(255,176,32,.7)}
.pitem--hi .pitem__no{color:var(--red)!important}
.pitem--hi h3{color:var(--red-deep)}

@media (max-width:640px){
  .thu__lines i{min-width:0;display:block}
  .fm-title{letter-spacing:3px}
}