/* Ellis Post — báo Đại chúng (Newsreader · Brown/Cream/Terracotta). Giọng ấm.
   Chữ theo chuẩn nhà M2W (Brandbook v1.1.0): Newsreader cho tiêu đề, Be Vietnam Pro
   cho nội dung + nhãn, self-host woff2 (xem fonts.css) — không gọi fonts.gstatic.com.
   Cormorant vẫn giữ nguyên ở logo/masthead vì chữ đã outline sẵn thành SVG. */
:root{
  --brown:#4A3324; --cream:#F5EEE2; --paper:#FAF6EE;
  --terra:#A9744F; --tan:#C79A72; --line:#E1D6C6;
  --serif:'Newsreader','Times New Roman',Georgia,serif;
  --body:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --sans:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --maxw:1120px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--brown);font-family:var(--body);font-size:17.5px;line-height:1.72;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1}
img{max-width:100%;display:block}
a{color:var(--brown);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Topbar — min-height chứ không height cứng, để chữ có dấu không bị cắt khi xuống dòng */
.topbar{background:var(--brown);color:var(--cream);font-family:var(--sans);font-size:12px;letter-spacing:.04em}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;padding-block:8px;line-height:1.5}
.topbar__by strong{color:#fff;font-weight:500}

/* Masthead — wordmark là SVG (chỉ chữ "Ellis Post"), kicker + nhịp dọc dựng bằng CSS.
   Bản PNG cũ nhét cả kicker + 2 đường kẻ + khoảng trắng thừa vào 1 ảnh 1668×860
   nên header cao ~308px mà phần lớn là chỗ trống. */
/* Wordmark SVG đã cắt sát nét chữ (viewBox 564×111, tỷ lệ 5,10). Bản kit gốc
   874×255 có 57% chiều cao là viền trắng rỗng — đúng chỗ trống thừa quanh
   măng-sét. Nay khoảng thở do CSS đặt, nên chỉnh được; đừng thay lại bằng file
   trong kit mà không cắt, không thì trống lại như cũ. */
.masthead{background:var(--paper);padding:32px 0 30px}                                    /* cùng nhịp với TLT */
.masthead__in{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.masthead__kicker{font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--terra);margin:0;line-height:1.5}
.masthead__link{display:block;line-height:0}
/* Cỡ khớp với The Legation Times theo CHIỀU CAO CHỮ HOA (hai măng-sét là bộ đôi
   — xem BRAND.md). Không khớp được bề rộng vì "Ellis Post" ngắn (tỷ lệ 5,10) còn
   "THE LEGATION TIMES" dài (15,60). Cap thật: EP 94 / TLT 90,5 đơn vị.
   TLT rộng 600px → cap 37,3px; EP rộng 224px → cap 37,3px. Đổi bề rộng một bên
   thì tính lại bên kia theo: W_ep = cap_tlt × 564,15 ÷ 94. */
.masthead__img{width:clamp(97px,19vw,224px);height:auto;margin:0 auto}

/* Section bar */
.sections{border-top:2px solid var(--brown);border-bottom:1px solid var(--brown);background:var(--paper)}
.sections__in{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 30px;padding:14px 24px}
.sections a{font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brown);line-height:1.6;white-space:nowrap}
.sections a:hover{color:var(--terra)}
.sections a:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
/* Nhóm "Định cư" — menu xổ (hover trên desktop, focus-within cho bàn phím/chạm) */
.sections__group{position:relative;display:inline-flex}
.sections__group::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.sections__top{font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brown);line-height:1.6;white-space:nowrap;background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sections__group:hover .sections__top,.sections__group:focus-within .sections__top,.sections__group.is-active .sections__top{color:var(--terra)}
.sections__caret{font-size:10px;transition:transform .18s ease}
.sections__group:hover .sections__caret,.sections__group:focus-within .sections__caret{transform:rotate(180deg)}
.sections__menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);min-width:190px;max-width:calc(100vw - 32px);background:var(--paper);border:1px solid var(--brown);box-shadow:0 12px 30px rgba(40,26,15,.14);padding:6px 0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:40}
.sections__group:hover .sections__menu,.sections__group:focus-within .sections__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sections__menu a{display:block;padding:9px 22px;line-height:1.5;white-space:nowrap;text-align:left}
.sections__menu a:hover{background:rgba(40,26,15,.05);color:var(--terra)}
.sections__menu a[aria-current]{color:var(--terra)}

/* Lead */
.lead{text-align:center;max-width:840px;margin:56px auto 8px}
.lead__eyebrow{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);margin:0 0 16px}
.lead__title{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6vw,64px);line-height:1.22;margin:0 0 18px;text-wrap:balance}
.lead__standfirst{font-size:21px;line-height:1.55;color:#5a4635;margin:0 auto 14px;max-width:62ch}
.lead__note{font-family:var(--sans);font-size:14px;color:var(--terra);max-width:60ch;margin:0 auto}

/* Category grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin:56px 0 0;padding-top:40px}
.col{padding:0 26px;border-left:1px solid var(--line)}
.col:first-child{border-left:0;padding-left:0}
.col__h{font-family:var(--serif);font-weight:500;font-size:30px;margin:0 0 8px;line-height:1.3;text-wrap:balance}
.col__rule{width:36px;height:2px;background:var(--terra);margin-bottom:14px}
.col__d{font-size:16px;line-height:1.6;color:#5a4635;margin:0}

/* Signup */
.signup{text-align:center;background:var(--cream);border:1px solid var(--line);margin:64px 0 72px;padding:48px 24px}
.signup__h{font-family:var(--serif);font-weight:500;font-size:40px;margin:0 0 6px;line-height:1.25}
.signup__d{color:#6b5642;margin:0 0 22px}
.signup__form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.signup__form input{font-family:var(--body);font-size:16px;padding:12px 16px;border:1px solid var(--brown);background:#fff;min-width:280px}
.signup__form button{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:13px 26px;background:var(--terra);color:#fff;border:1px solid var(--terra);cursor:pointer}
.signup__form button:hover{background:#8f5e3d}
.signup__ok{width:100%;font-family:var(--sans);font-size:14px;color:var(--brown);margin-top:12px}

/* Footer */
.foot{background:var(--brown);color:var(--cream)}
.foot__in{text-align:center;padding:52px 24px}
.foot__mark{width:clamp(72px,11vw,127px);height:auto;margin:0 auto 20px;opacity:.96}   /* cap 21,1px — khớp chân trang TLT */
.foot__by{max-width:60ch;margin:0 auto 12px;color:#e7dccb;font-size:17px}
.foot__meta{font-family:var(--sans);font-size:12px;letter-spacing:.05em;color:var(--tan);margin:0}

@media(max-width:820px){
  .grid{grid-template-columns:1fr 1fr}
  .col{border-left:0;padding:0 0 22px}
  .col:nth-child(odd){padding-right:18px}
}
@media(max-width:560px){ .grid{grid-template-columns:1fr} .sections__in{gap:18px} }

/* News — story + headlines (đọc từ DB) */
.story{max-width:860px;margin:52px auto 8px;text-align:center}
.story__eyebrow{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);margin:0 0 14px}
.story__link{display:inline-block}
.story__title{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,52px);line-height:1.22;margin:0 0 18px;text-wrap:balance}
.story__link:hover .story__title{color:var(--terra)}
.story__stand{font-size:20px;line-height:1.55;color:#5b463a;max-width:64ch;margin:0 auto 14px}
.story__meta{font-family:var(--sans);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--terra);margin:0}
.headlines{display:grid;grid-template-columns:1fr 1fr;gap:34px 40px;border-top:1px solid var(--line);margin:52px 0 0;padding-top:40px}
.hl__title{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.3;margin:0 0 8px;text-wrap:balance}
.hl a:hover .hl__title{color:var(--terra)}
.hl__d{font-size:16px;line-height:1.6;color:#5b463a;margin:0 0 8px}
.hl__meta{font-family:var(--sans);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tan);margin:0}
.signup__err{width:100%;font-family:var(--sans);font-size:13px;color:#a23;margin-top:8px}
@media(max-width:820px){ .headlines{grid-template-columns:1fr;gap:26px} }

/* =====================================================================
   FRONT PAGE — bố cục kiểu tờ báo (prefix .fp-). Dùng lại token brand:
   Newsreader tiêu đề · Be Vietnam Pro nhãn · Brown/Cream/Terracotta.
   Weight tối đa 500 (600/700 → trình duyệt giả đậm, nhoè dấu tiếng Việt).
   ===================================================================== */

/* Nhãn chuyên mục (kicker) dùng chung cho lead/rail/card */
.kick{display:inline-block;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin:0 0 8px}
.kick--sm{font-size:10.5px;letter-spacing:.12em;margin:0 0 5px}

/* Hàng lead: bài chủ lực (trái) + cột "Đáng chú ý" (phải) */
.fp-top{display:grid;grid-template-columns:1.65fr 1fr;gap:44px;margin:36px 0 8px;
  padding-bottom:40px;border-bottom:2px solid var(--brown)}
.fp-lead{display:block;color:var(--brown)}
.fp-lead__media{position:relative;overflow:hidden;border:1px solid var(--line);margin:0 0 18px;aspect-ratio:16/9}
.fp-lead__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.fp-lead:hover .fp-lead__media img{transform:scale(1.03)}
.fp-lead__t{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,46px);line-height:1.16;margin:0 0 14px;text-wrap:balance}
.fp-lead:hover .fp-lead__t{color:var(--terra)}
.fp-lead__d{font-size:18px;line-height:1.6;color:#5a4635;margin:0 0 14px;max-width:60ch}
.readmore{font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--terra)}

/* Cột đáng chú ý */
.fp-rail{display:flex;flex-direction:column;justify-content:space-between;border-top:2px solid var(--brown);padding-top:4px}
.fp-rail__h{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin:14px 0 4px}
.fp-rail__item{display:grid;grid-template-columns:1fr 92px;gap:16px;align-items:start;
  padding:18px 0;border-top:1px solid var(--line);color:var(--brown)}
.fp-rail__item:first-of-type{border-top:0}
.fp-rail__img{width:92px;height:70px;object-fit:cover;border:1px solid var(--line)}
.fp-rail__t{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.24;margin:2px 0 0;text-wrap:balance}
.fp-rail__item:hover .fp-rail__t{color:var(--terra)}

/* Tin nhanh (wire feed từ crawler) */
.fp-wire{margin:44px 0 0}
.fp-wire__list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 40px}
.fp-wire__li{border-top:1px solid var(--line);padding:12px 0}
.fp-wire__t{font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.34;margin:0;color:var(--brown)}
.fp-wire__li a:hover .fp-wire__t{color:var(--terra)}
.fp-wire__meta{font-family:var(--sans);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--tan);margin:5px 0 0}

/* Header khối chuyên mục */
.fp-sec{margin:52px 0 0}
.fp-sec__bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-top:2px solid var(--brown);padding-top:12px;margin:0 0 24px}
.fp-sec__h{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2;margin:0}
.fp-sec__h a{color:var(--brown)}.fp-sec__h a:hover{color:var(--terra)}
.fp-sec__more{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--terra);white-space:nowrap}

/* Lưới card bài (dùng chung trang chủ + trang chuyên mục + bài liên quan) */
.fp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 28px}
.fp-cards--3{grid-template-columns:repeat(3,1fr)}
.fp-cards--2{grid-template-columns:repeat(2,1fr)}
.fp-card{display:block;color:var(--brown)}
.fp-card__media{overflow:hidden;border:1px solid var(--line);margin:0 0 12px;aspect-ratio:16/10}
.fp-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.fp-card:hover .fp-card__media img{transform:scale(1.04)}
.fp-card__t{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.24;margin:0 0 7px;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fp-card:hover .fp-card__t{color:var(--terra)}
.fp-card__d{font-size:15px;line-height:1.55;color:#6b5642;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Hovercard "bóng chat": rê vào card hiện đủ tiêu đề + preview (excerpt) không bị cắt */
.fp-card__th{position:relative}
.fp-card__pop{position:absolute;left:0;right:0;top:calc(100% + 9px);z-index:60;
  background:var(--paper);border:1px solid var(--brown);border-radius:5px;
  box-shadow:0 16px 38px rgba(40,26,15,.20);padding:13px 15px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.fp-card__pop::before{content:"";position:absolute;left:24px;bottom:100%;
  border:8px solid transparent;border-bottom-color:var(--brown)}
.fp-card__pop::after{content:"";position:absolute;left:25px;bottom:100%;
  border:7px solid transparent;border-bottom-color:var(--paper)}
.fp-card:hover .fp-card__pop,.fp-card:focus-visible .fp-card__pop{opacity:1;visibility:visible;transform:translateY(0)}
.fp-card__pop-t{display:block;font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.3;color:var(--brown);margin:0 0 6px}
.fp-card__pop-d{display:block;font-family:var(--sans);font-size:13px;line-height:1.5;color:#6b5642}
@media(hover:none){.fp-card__pop{display:none}}

/* Card ngang cho chuyên mục 1 bài (đỡ trống hàng khi chưa nhiều nội dung) */
.fp-feats{max-width:820px}
.fp-feat{display:grid;grid-template-columns:320px 1fr;gap:30px;align-items:center;color:var(--brown)}
.fp-feat__media{overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.fp-feat__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.fp-feat:hover .fp-feat__media img{transform:scale(1.04)}
.fp-feat__t{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.2;margin:6px 0 10px;text-wrap:balance}
.fp-feat:hover .fp-feat__t{color:var(--terra)}
.fp-feat__d{font-size:16px;line-height:1.6;color:#6b5642;margin:0 0 14px;max-width:60ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.fp-feat{grid-template-columns:1fr;gap:14px}}

@media(max-width:900px){
  .fp-top{grid-template-columns:1fr;gap:8px;border-bottom:1px solid var(--brown)}
  .fp-rail{border-top:0;margin-top:8px}
  .fp-rail__h{border-top:2px solid var(--brown);padding-top:14px}
  .fp-cards{grid-template-columns:repeat(2,1fr);gap:26px 22px}
  .fp-cards--3{grid-template-columns:repeat(2,1fr)}
  .fp-wire__list{grid-template-columns:1fr}
}
@media(max-width:560px){
  .fp-cards,.fp-cards--3{grid-template-columns:1fr}
  .fp-sec__more{font-size:11px}
}

/* =====================================================================
   TRANG CHUYÊN MỤC + TRANG GIỚI THIỆU (about) — dùng chung .pagehead
   ===================================================================== */
.pagehead{border-top:1px solid var(--line);border-bottom:2px solid var(--brown);
  padding:40px 0 28px;margin:0 0 36px;text-align:center}
.pagehead__eye{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);margin:0 0 12px}
.pagehead__t{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,50px);line-height:1.16;margin:0 0 14px;text-wrap:balance}
.pagehead__d{font-size:19px;line-height:1.6;color:#5a4635;max-width:62ch;margin:0 auto}
.cat-empty{text-align:center;color:#6b5642;max-width:56ch;margin:8px auto 0;font-size:17px}

/* Bài liên quan (cuối trang bài) */
.related{margin:56px 0 0;border-top:2px solid var(--brown);padding-top:28px}
.related__h{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin:0 0 22px}

/* Trang about — nội dung đọc */
.about{max-width:760px;margin:0 auto;padding:0 24px}
.about h2{font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.28;margin:38px 0 12px}
.about p{margin:0 0 16px}
.about ul{margin:0 0 16px;padding-left:22px}.about li{margin:7px 0}
.about a{text-decoration:underline;text-decoration-color:var(--terra)}

/* Footer — thêm hàng điều hướng */
.foot__nav{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:0 0 20px;padding:0}
.foot__nav a{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.foot__nav a:hover{color:var(--tan)}