/*
Theme Name: Trung Đồng
Theme URI: https://trungdong.net
Author: trungdong.net
Description: Theme riêng cho trang tin cộng đồng Tổ dân phố Trung Đồng, phường Nếnh, Bắc Ninh. Ba trụ cột: Tin tức – Kết nối – Ký ức.
Version: 1.0.7
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trungdong
*/

/* ---------- Nền chung ---------- */
:root{
  --td-radius:10px;
  --td-line:var(--wp--preset--color--line);
}
body{ -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ text-wrap:balance; }
a{ text-underline-offset:.18em; }
:where(.wp-site-blocks) :focus-visible{ outline:2px solid var(--wp--preset--color--accent); outline-offset:2px; }
img{ height:auto; }

/* ---------- Thanh tiện ích ---------- */
.td-util{ font-size:13px; color:var(--wp--preset--color--muted); border-bottom:1px solid var(--td-line); }
.td-util p{ margin:0; }
.td-util a{ color:inherit; }

/* ---------- Đầu trang ---------- */
.td-brand .td-logo{ width:64px; height:64px; display:block; }
.td-brand .wp-block-site-title a{ text-decoration:none; }
.td-tagline{ margin:2px 0 0; font-size:13px; color:var(--wp--preset--color--muted); }
.td-nav{ background:var(--wp--preset--color--accent); border-radius:8px; }
.td-nav a{ color:#fff !important; text-decoration:none; font-weight:600; }
.td-nav .wp-block-navigation-item__content{ padding:10px 4px; }
.td-nav .wp-block-navigation__responsive-container-open{ color:#fff; }
.td-nav .wp-block-navigation__responsive-container.is-menu-open{ background:var(--wp--preset--color--accent); }

/* ---------- Thẻ tin ---------- */
.td-cat a, .td-cat{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wp--preset--color--accent); text-decoration:none; }
.td-card .wp-block-post-featured-image img{ border-radius:8px; aspect-ratio:16/10; object-fit:cover; }
.td-card .wp-block-post-title a{ text-decoration:none; }
.td-card .wp-block-post-title a:hover{ text-decoration:underline; }
.td-noimg{ margin:0; }
.td-noimg a{ display:grid; place-items:center; aspect-ratio:16/10; border-radius:8px; background:var(--wp--preset--color--accent-soft); }
.td-noimg img{ width:72px; height:72px; opacity:.9; border-radius:50%; }
.td-memory .td-noimg a{ background:#f3e2bd; }
.td-thumb-ph{ aspect-ratio:16/10; border-radius:8px; background:repeating-linear-gradient(135deg,var(--wp--preset--color--wire),var(--wp--preset--color--wire) 8px,var(--wp--preset--color--line) 8px,var(--wp--preset--color--line) 9px); }

.td-box{ border:1px solid var(--td-line); border-radius:var(--td-radius); background:var(--wp--preset--color--surface); }
.td-box-h{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.td-box-h a{ font-size:13px; font-weight:600; }

.td-list .wp-block-post{ border-top:1px dashed var(--td-line); padding-top:10px; }
.td-list .wp-block-post:first-child{ border-top:0; padding-top:0; }
.td-list .wp-block-post-title{ margin:0; }
.td-list .wp-block-post-title a{ text-decoration:none; }
.td-list .wp-block-post-date{ font-size:12px; color:var(--wp--preset--color--muted); }

.td-empty{ font-size:14px; color:var(--wp--preset--color--muted); background:var(--wp--preset--color--wire); border-radius:8px; padding:12px 14px; margin:0; }
.td-badge{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--wp--preset--color--accent-soft); color:var(--wp--preset--color--accent); }

/* ---------- Ký ức ---------- */
.td-memory{ background:var(--wp--preset--color--gold-soft); border-radius:var(--td-radius); }
.td-memory .td-cat, .td-memory .td-cat a{ color:var(--wp--preset--color--gold); }
.td-memory .wp-block-post-featured-image img{ filter:sepia(.35); }

/* ---------- Cột phải ---------- */
.td-sponsor{ border:1px dashed var(--wp--preset--color--gold); border-radius:var(--td-radius); }
.td-sponsor .td-lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wp--preset--color--gold); margin:0; }
.td-sos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.td-sos p{ margin:0; background:var(--wp--preset--color--wire); border-radius:6px; padding:8px 10px; font-size:13px; }
.td-sos strong{ display:block; font-size:18px; font-variant-numeric:tabular-nums; color:var(--wp--preset--color--ink); }
.td-newsletter{ background:var(--wp--preset--color--accent); color:#fff; border-radius:var(--td-radius); }
.td-newsletter a{ color:#fff; }
.td-newsletter .wp-block-button__link{ background:#fff !important; color:var(--wp--preset--color--accent) !important; }

/* ---------- Bài viết ---------- */
.td-article .wp-block-post-content{ font-size:18px; line-height:1.75; }
.td-article .wp-block-post-content > *{ max-width:68ch; margin-left:auto; margin-right:auto; }
.td-article .wp-block-post-content blockquote{ border-left:3px solid var(--wp--preset--color--gold); padding-left:16px; font-style:italic; }
.td-meta{ font-size:14px; color:var(--wp--preset--color--muted); }

/* ---------- Chân trang ---------- */
.td-footer{ background:var(--wp--preset--color--ink); color:#dfe6e1; }
.td-footer a{ color:#fff; }
.td-footer h3{ color:#fff; font-size:16px; }
.td-footer .td-small{ font-size:13px; color:#a9b8b0; }

/* ---------- Thanh tab trên điện thoại ---------- */
.td-tabbar{ display:none; }
@media (max-width:781px){
  .td-nav{ border-radius:0; }
  .td-tabbar{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--wp--preset--color--surface); border-top:1px solid var(--td-line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .td-tabbar a{ display:grid; justify-items:center; gap:2px; font-size:11px; color:var(--wp--preset--color--muted); text-decoration:none; }
  .td-tabbar svg{ width:22px; height:22px; }
  .td-tabbar a:hover, .td-tabbar a:focus-visible{ color:var(--wp--preset--color--accent); }
  body{ padding-bottom:64px; }
  .td-hide-mobile{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; transition:none !important; } }

/* ---------- Đầu trang gọn trên điện thoại (1.0.3) ---------- */
@media (max-width:781px){
  header.wp-block-template-part > .wp-block-group:not(.td-util){ position:relative; }
  .td-util{ height:30px; overflow:hidden; display:flex; align-items:center; padding-top:0 !important; padding-bottom:0 !important; font-size:12px; }
  .td-util .wp-block-group{ flex-wrap:nowrap !important; }
  .td-util .wp-block-group > p{ margin:0; }
  .td-util .wp-block-group > p:not(:first-child){ display:none; }
  .td-util .td-ngay{ white-space:nowrap; }
  .td-brand + .wp-block-buttons, .td-hide-mobile{ display:none !important; }
  header.wp-block-template-part > .wp-block-group:not(.td-util) > .wp-block-group:first-child{ padding-top:10px !important; padding-bottom:10px !important; padding-right:64px; }
  .td-brand{ gap:10px; }
  .td-brand .td-logo{ width:44px; height:44px; }
  .td-brand .wp-block-site-title{ font-size:22px !important; line-height:1.1; }
  .td-tagline{ font-size:12px; margin-top:0; }
  .td-nav{ position:absolute; top:10px; right:16px; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; border-radius:10px; z-index:20; }
  .td-nav .wp-block-navigation__responsive-container-open{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; }
}

/* ---------- Menu mở trên điện thoại: nền xanh, chữ trắng ---------- */
.td-nav .wp-block-navigation__responsive-container.is-menu-open{ background-color:var(--wp--preset--color--accent) !important; color:#fff !important; padding:20px !important; }
.td-nav .is-menu-open .wp-block-navigation__responsive-container-close{ color:#fff; }
.td-nav .is-menu-open .wp-block-navigation__container{ gap:2px !important; }
.td-nav .is-menu-open .wp-block-navigation-item__content{ font-size:20px; padding:12px 0 !important; }
.td-nav .is-menu-open .wp-block-navigation-item{ border-bottom:1px solid rgba(255,255,255,.18); width:100%; }