/* ==========================================================================
   SGCo 2026 — Template styles (breadcrumb, archive, single, search, comments)
   Nạp sau main.css
   ========================================================================== */

/* ---------- BREADCRUMB ---------- */
.breadcrumb{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:0;font-size:13.5px}
.breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--ink-400)}
.breadcrumb li+li::before{content:"/";color:var(--ink-400)}
.breadcrumb a{color:var(--ink-500);font-weight:500}
.breadcrumb a:hover{color:var(--blue-600)}
.breadcrumb span[aria-current]{color:var(--ink-900);font-weight:600}

/* ---------- POST GRID ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.post-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow),border-color var(--dur);
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px -28px rgba(10,40,70,.4);border-color:var(--border-strong)}
.post-card__link{display:flex;flex-direction:column;height:100%;color:inherit}
.post-card__imgwrap{position:relative;overflow:hidden;aspect-ratio:16/10;background:#DCE9F3}
.post-card__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease-out)}
.post-card:hover .post-card__img{transform:scale(1.06)}
.post-card__body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-card__meta{font-size:12.5px;color:var(--ink-400);font-weight:600;display:flex;flex-wrap:wrap;gap:12px}
.post-card__cat{color:var(--blue-600)}
.post-card__title{margin-top:10px;font-size:17px;font-weight:700;color:var(--ink-900);line-height:1.4;transition:color var(--dur-fast)}
.post-card:hover .post-card__title{color:var(--blue-600)}
.post-card__excerpt{margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--ink-500);flex:1}
.post-card__more{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--blue-600)}
@media (max-width:1000px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}

/* ---------- SINGLE / PAGE ---------- */
.single__head{
  position:relative;padding:var(--sp-6) 0 var(--sp-5);text-align:center;
  background:linear-gradient(170deg,#EEF8FF 0%,#F8FCFF 60%,#FBFCFD 100%);
  border-bottom:1px solid var(--border);margin-bottom:var(--sp-7);
}
/* Breadcrumb trong hero — căn trái, không theo text-align:center của hero. */
.single__head .hero-crumb{text-align:left;margin-bottom:26px}
.single__head .hero-crumb ol{justify-content:flex-start}
.single__title{margin-top:18px;font-size:clamp(26px,3.6vw,42px);font-weight:700;line-height:1.2;color:var(--ink-900);text-wrap:pretty}
.single__meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;font-size:13.5px;color:var(--ink-400);font-weight:500}
.single__meta span{display:inline-flex;align-items:center;gap:7px}
.single__thumb{margin-bottom:var(--sp-7)}
.single__thumb img{
  width:100%;max-height:520px;object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:var(--sh);
}
.single__body{padding-bottom:var(--sp-7);font-size:17px;line-height:1.85;color:var(--ink-700)}
.single__body > *+*{margin-top:1.25em}
.single__body h2{font-size:clamp(22px,2.4vw,30px);margin-top:1.8em;line-height:1.3}
.single__body h3{font-size:clamp(19px,2vw,24px);margin-top:1.6em;line-height:1.35}
.single__body h4{font-size:18px;margin-top:1.4em}
.single__body ul,.single__body ol{padding-left:1.5em}
.single__body li+li{margin-top:.5em}
.single__body ul{list-style:disc}
.single__body ol{list-style:decimal}
.single__body img{border-radius:var(--radius);margin-left:auto;margin-right:auto}
.single__body blockquote{border-left:3px solid var(--brand-400);padding:4px 0 4px 24px;color:var(--ink-500);font-style:italic}
.single__body table{width:100%;border-collapse:collapse;font-size:15px}
.single__body th,.single__body td{border:1px solid var(--border);padding:12px 14px;text-align:left}
.single__body th{background:var(--surface-2);font-weight:700;color:var(--ink-900)}
.single__body pre{background:var(--blue-800);color:#E6F2FA;padding:20px;border-radius:var(--radius);overflow-x:auto;font-size:14px;line-height:1.6}
.single__body code{background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,"JetBrains Mono",monospace}
.single__body pre code{background:transparent;padding:0}
.single__body a{text-decoration:underline;text-underline-offset:3px}
.single__body figure{margin:0}

.single__tags{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:var(--sp-6)}
.tag-pill{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink-500);
  padding:8px 15px;border-radius:var(--radius-pill);transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.tag-pill:hover{background:var(--blue-50);border-color:var(--border-strong);color:var(--blue-600)}

.single__nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);padding-bottom:var(--sp-8);border-top:1px solid var(--border);padding-top:var(--sp-6)}
.single__nav-item{
  display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color var(--dur),transform var(--dur) var(--ease-out);
}
.single__nav-item:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.single__nav-item span{font-size:12.5px;color:var(--ink-400);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.single__nav-item b{font-size:15.5px;color:var(--ink-900);font-weight:700;line-height:1.45}
.single__nav-item--next{text-align:right}
@media (max-width:640px){.single__nav{grid-template-columns:1fr}.single__nav-item--next{text-align:left}}

/* ---------- SEARCH FORM ---------- */
.search-form{display:flex;gap:10px}
.search-form__input{
  flex:1;padding:13px 16px;font-family:inherit;font-size:15px;color:var(--ink-800);
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
}
.search-form__input:focus{outline:0;border-color:var(--brand-400);box-shadow:0 0 0 3px rgba(31,169,130,.18)}
.search-form__btn{
  display:inline-flex;align-items:center;justify-content:center;width:48px;
  background:var(--blue-600);color:#fff;border:0;border-radius:10px;cursor:pointer;
  transition:background var(--dur-fast);
}
.search-form__btn:hover{background:var(--blue-700)}

/* ---------- PAGINATION ---------- */
.sgco-pagination,.navigation.pagination{margin-top:var(--sp-7)}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  padding:0 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  font-weight:600;font-size:14.5px;color:var(--ink-700);
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast);
}
.page-numbers:hover{border-color:var(--border-strong);color:var(--blue-600)}
.page-numbers.current{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.page-numbers.dots{border:0;background:transparent}

/* ---------- EMPTY STATE ---------- */
.empty-state{
  text-align:center;padding:var(--sp-8) var(--sp-5);background:var(--surface);
  border:1px dashed var(--border-strong);border-radius:var(--radius-lg);
}
.empty-state p{font-size:16.5px;color:var(--ink-500);margin-bottom:var(--sp-5)}
.empty-state .search-form{max-width:420px;margin:0 auto}

/* ---------- WIDGETS ---------- */
.widget{margin-bottom:var(--sp-6)}
.widget-title{font-size:17px;font-weight:700;color:var(--ink-900);margin-bottom:var(--sp-4)}
.widget ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.widget a{color:var(--ink-500);font-size:14.5px}
.widget a:hover{color:var(--blue-600)}

/* ---------- COMMENTS ---------- */
.comment-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-5)}
.comment-body{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.comment-author{font-weight:700;color:var(--ink-900);font-size:15px}
.comment-metadata{font-size:12.5px;color:var(--ink-400);margin-top:4px}
.comment-content{margin-top:12px;font-size:15px;line-height:1.75}
.comment-respond{margin-top:var(--sp-6)}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;padding:13px 15px;font-family:inherit;font-size:15px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);
}
.comment-form textarea{resize:vertical;min-height:120px}
.comment-form .submit{
  background:var(--blue-600);color:#fff;border:0;border-radius:var(--radius);
  padding:14px 30px;font-weight:600;font-size:15px;cursor:pointer;font-family:inherit;
}
.comment-form .submit:hover{background:var(--blue-700)}

/* ---------- PAGE LINKS ---------- */
.page-links{margin-top:var(--sp-5);display:flex;gap:8px;align-items:center;font-weight:600;font-size:14.5px}
.page-links a{
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;
  border:1px solid var(--border);border-radius:8px;
}