/* =====================================================================
   TRANG TIẾNG ANH (/en/) — cho con cháu ở nước ngoài
   Dùng lại đúng bảng màu + chữ của theme; chỉ thêm 4 khối riêng:
   dải mở đầu tối, dòng thời gian, khối trích câu đối, các bước tra cứu.
   Không JS, không canvas — trang này phải nhẹ vì phần lớn người đọc ở
   nước ngoài mở từ điện thoại qua mạng di động.
   ===================================================================== */

/* ---------- dải mở đầu (ảnh thật + màn tối, không canvas) ---------- */
/* Không chui xuống dưới header như hero trang chủ: trang này không nạp hero.js nên không có ai
   đo chiều cao header thật, dùng số ước lượng sẽ lệch. Cho hero nằm ngay dưới header, chỉ xoá
   khoảng cách mặc định WP thêm vào <main> để hai khối dính liền nhau. */
.td-en-page .wp-site-blocks > main.wp-block-group{margin-block-start:0!important}
.td-enhero{position:relative; isolation:isolate; overflow:clip; background:#0E0C08; color:var(--td-giay-sang);
  min-height:min(66svh, 560px); display:flex; align-items:flex-end}
.td-enhero__photo{position:absolute; inset:0; z-index:-2}
.td-enhero__photo img{width:100%; height:100%; object-fit:cover; object-position:50% 38%; display:block;
  filter:sepia(.35) saturate(.75) brightness(.6) contrast(1.05)}
.td-enhero__veil{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,12,8,.5) 0%, rgba(14,12,8,.34) 26%, rgba(14,12,8,.78) 62%, rgba(14,12,8,.97) 88%, #0E0C08 100%)}
.td-enhero__in{width:100%; max-width:1080px; margin:0 auto;
  padding:3.4rem var(--wp--style--root--padding-left, 1.5rem) clamp(2.6rem, 6vh, 4rem)}
.td-enhero__kicker{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; color:#E9C56A;
  font-size:clamp(1.05rem,2vw,1.4rem); margin:0 0 .5rem; letter-spacing:.02em}
.td-enhero h1{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.08em; line-height:1.02; margin:0; color:var(--td-giay-sang);
  font-size:clamp(2.1rem, 6.2vw, 4.4rem); text-wrap:balance; text-shadow:0 2px 22px rgba(0,0,0,.55)}
.td-enhero h1 em{display:block; font-style:normal; color:#E9C56A; font-size:.62em; letter-spacing:.2em; margin-top:.12em}
.td-enhero__motto{font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--td-giay);
  font-size:clamp(1.15rem,2.2vw,1.55rem); margin:1.1rem 0 0; max-width:46ch; line-height:1.5}
.td-enhero__motto b{font-weight:500; color:#F3DCA4; font-style:normal}
.td-enhero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem}
.td-enhero__cta a{display:inline-flex; align-items:center; gap:.55rem; min-height:52px; padding:.8rem 1.6rem;
  border-radius:2px; text-decoration:none; font-family:'Be Vietnam Pro',sans-serif; font-size:.9rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  transition:transform var(--td-d) var(--td-ease), background var(--td-d) var(--td-ease), border-color var(--td-d) var(--td-ease), color var(--td-d) var(--td-ease)}
.td-enhero__cta svg{width:18px; height:18px; transition:transform var(--td-d) var(--td-ease)}
.td-enhero__cta a:hover svg{transform:translateX(4px)}
.td-enhero__cta .p{background:#E9C56A; color:#0E0C08; box-shadow:0 14px 34px -14px rgba(233,197,106,.5)}
.td-enhero__cta .p:hover{background:#F3DCA4; transform:translateY(-2px)}
.td-enhero__cta .s{color:var(--td-giay); border:1px solid rgba(203,176,122,.55)}
.td-enhero__cta .s:hover{border-color:#E9C56A; color:#F3DCA4; transform:translateY(-2px)}
.td-enhero__cta a:focus-visible{outline:2px solid #E9C56A; outline-offset:3px}
.td-enhero__sub{margin:1.5rem 0 0; font-size:.95rem; color:#B3A98F; letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums}
.td-enhero__sub b{color:#F3DCA4; font-weight:500}

/* ---------- đoạn mở, chữ to hơn thân bài một nấc ---------- */
.td-en-lead{font-size:clamp(1.12rem,1.6vw,1.28rem); line-height:1.75; color:var(--td-muc)}

/* ---------- dòng thời gian ---------- */
.td-tl{list-style:none; margin:2rem 0 0; padding:0; position:relative}
.td-tl::before{content:""; position:absolute; left:7px; top:.7rem; bottom:.7rem; width:1px;
  background:linear-gradient(180deg, transparent, var(--td-vang-500) 8%, var(--td-vang-500) 92%, transparent)}
.td-tl li{position:relative; padding:0 0 1.9rem 2.4rem}
.td-tl li:last-child{padding-bottom:0}
.td-tl li::before{content:""; position:absolute; left:3px; top:.62rem; width:9px; height:9px; transform:rotate(45deg);
  background:var(--td-giay); border:1px solid var(--td-vang); box-shadow:0 0 0 4px var(--td-giay)}
.td-tl li.is-key::before{background:var(--td-vang); box-shadow:0 0 0 4px var(--td-giay), 0 0 0 6px var(--td-vang-nhat)}
.td-tl b{display:block; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.35rem; font-weight:500;
  letter-spacing:.06em; color:var(--td-vang-dam); line-height:1.2; margin-bottom:.25rem;
  font-variant-numeric:lining-nums tabular-nums}
.td-tl p{margin:0}

/* ---------- câu đối chữ Hán – Nôm ---------- */
.td-en-couplet{margin:2rem 0 0; padding:1.6rem 1.5rem; border:1px solid var(--td-giay-vien);
  border-left:3px solid var(--td-vang); background:var(--td-giay-sang)}
.td-en-couplet p{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:1.2rem;
  line-height:1.65; margin:0; color:var(--td-muc)}
.td-en-couplet p + p{margin-top:.5rem}
.td-en-couplet cite{display:block; margin-top:.9rem; font-family:'Be Vietnam Pro',sans-serif; font-style:normal;
  font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--td-muc-nhat)}

/* ---------- hai nhà thờ / các bước tra cứu ---------- */
.td-en-two{display:grid; gap:1.4rem; margin-top:1.8rem}
@media (min-width:760px){.td-en-two{grid-template-columns:1fr 1fr; gap:2rem}}
/* Cho khối hai nhà thờ rộng hơn cột chữ (720px) trên màn lớn: hai thẻ cạnh nhau ở 720px thì mỗi
   thẻ chỉ còn ~330px, chữ gãy vụn. Phá khung bằng margin-left:50% + translateX thay vì
   width:100vw để không sinh thanh cuộn ngang khi có scrollbar. */
@media (min-width:1160px){
  .td-en-two{width:min(1080px, calc(100vw - 3rem)); margin-left:50%; transform:translateX(-50%)}
}
.td-en-two > div{padding:1.5rem; background:var(--td-giay-sang); border:1px solid var(--td-giay-vien)}
.td-en-two h3{margin:0 0 .2rem; font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:1.4rem;
  letter-spacing:.04em; color:var(--td-vang-dam)}
.td-en-two .yr{display:block; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--td-muc-nhat); margin-bottom:.8rem; font-variant-numeric:lining-nums}
.td-en-two p{margin:0}
.td-en-two p + p{margin-top:.7rem}

.td-steps{list-style:none; counter-reset:s; margin:1.6rem 0 0; padding:0}
.td-steps li{counter-increment:s; position:relative; padding:0 0 1.2rem 3.1rem}
.td-steps li:last-child{padding-bottom:0}
.td-steps li::before{content:counter(s); position:absolute; left:0; top:-.1rem; width:2.1rem; height:2.1rem;
  display:grid; place-items:center; border-radius:50%; border:1px solid var(--td-vang-500);
  font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--td-vang-dam); background:var(--td-giay-sang)}
.td-steps code{font-family:'Be Vietnam Pro',sans-serif; background:var(--td-giay-dam); padding:.1rem .45rem;
  border-radius:2px; font-size:.94em; letter-spacing:.01em}

/* ---------- ghi chú cuối ---------- */
.td-en-note{margin-top:2rem; padding:1.2rem 1.4rem; border-left:3px solid var(--td-giay-vien);
  background:var(--td-giay-sang); font-size:.98rem; color:var(--td-muc-nhat)}

@media (max-width:781px){
  /* Đo trên ảnh chụp thật: dòng kicker vàng #E9C56A trên nền ảnh sáng ở điện thoại chỉ đạt
     6,69:1 — qua AA nhưng dưới sàn 7:1 của site. Vàng nhạt hơn một nấc đưa nó lên trên sàn. */
  .td-enhero__kicker{color:#F3DCA4}
  .td-enhero{min-height:auto}
  .td-enhero__in{padding-top:2.6rem; padding-bottom:2.6rem}
  .td-enhero h1{font-size:1.95rem; letter-spacing:.05em}
  .td-enhero__cta a{flex:1 1 100%; justify-content:center}
  .td-en-couplet{padding:1.2rem 1.1rem}
  .td-en-couplet p{font-size:1.08rem}
  .td-tl li{padding-left:2.1rem}
}

/* Tiêu đề tiếng Anh dài hơn tiếng Việt (TWO ANCESTRAL HOUSES) và .td-ttl có letter-spacing .11em,
   ở 390px chữ chạm sát hai mép. Chỉ hạ cỡ trên trang này, không đụng phần còn lại của site. */
@media (max-width:430px){
  .td-en-page .td-sec__head .td-ttl{font-size:1.3rem}
}