/* ==========================================================================
   Chi tiết tin · trang nội dung thường · tìm kiếm · 404
   Bổ sung theo phong cách tin-tuc.html (font Open Sans, màu #192f5f / #f27226 / #5d5d5d,
   khung 1200, cột nội dung 776 + cột phải giống trang Tin tức).
   ========================================================================== */

/* ---------- Khung ---------- */
.sg-wrap { padding: 60px 0 80px; font-family: var(--font-2); }
.fsb-page { font-family: var(--font-2); color: #333; }
.fsb-page .fsb-article { padding: 60px 0 80px; }
.fsb-page .sg-content { max-width: 880px; }
.sg-grid { align-items: flex-start; }
.sg-article { width: 776px; flex-shrink: 0; min-width: 0; }

/* ---------- Breadcrumb ---------- */
.sg-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 28px; padding: 0; list-style: none; font-size: 14px; line-height: 21px; color: #5d5d5d; }
.sg-crumb li { display: inline-flex; align-items: center; }
.sg-crumb li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px; border-top: 1.5px solid #9aa3b0; border-right: 1.5px solid #9aa3b0; transform: rotate(45deg); }
.sg-crumb a { color: #192f5f; }
.sg-crumb a:hover { color: #f27226; }
.sg-crumb [aria-current] span { color: #5d5d5d; }

/* ---------- Tiêu đề + meta ---------- */
.sg-title { margin: 0; font-family: var(--font-2); font-weight: 700; font-size: 32px; line-height: 44px; color: #192f5f; }
.sg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 0; }
.sg-meta .nw-date { margin: 0; }
.sg-cats { font-size: 13px; line-height: 19.5px; }
.sg-cats a { display: inline-block; padding: 0 10px; border-radius: 25px; background: #ebfaff; color: var(--blue); }
.sg-cats a:hover { background: #f27226; color: #fff; }
.sg-lead { margin: 24px 0 0; font-size: 18px; line-height: 28px; font-weight: 600; color: #333; }
.sg-thumb { margin: 28px 0 0; }
.sg-thumb img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* ---------- Nội dung bài viết ---------- */
.sg-content { margin-top: 28px; font-size: 16px; line-height: 27px; color: #333; overflow-wrap: anywhere; }
.sg-content > * + * { margin-top: 16px; }
.sg-content p { margin: 0; }
.sg-content p + p { margin-top: 16px; }
.sg-content h2, .sg-content h3, .sg-content h4, .sg-content h5, .sg-content h6 { margin: 32px 0 0; font-family: var(--font-2); font-weight: 700; color: #192f5f; }
.sg-content h2 { font-size: 24px; line-height: 34px; }
.sg-content h3 { font-size: 20px; line-height: 30px; }
.sg-content h4 { font-size: 18px; line-height: 27px; }
.sg-content h5, .sg-content h6 { font-size: 16px; line-height: 24px; }
.sg-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.sg-content a:hover { color: #f27226; }
.sg-content strong, .sg-content b { font-weight: 700; }
.sg-content em, .sg-content i { font-style: italic; }
.sg-content ul, .sg-content ol { margin: 16px 0 0; padding-left: 24px; }
.sg-content ul { list-style: disc; }
.sg-content ol { list-style: decimal; }
.sg-content li + li { margin-top: 6px; }
.sg-content li::marker { color: #f27226; }
.sg-content img { max-width: 100%; height: auto; border-radius: 4px; }
.sg-content figure, .sg-content .wp-caption { max-width: 100%; margin: 24px 0 0; }
.sg-content figcaption, .sg-content .wp-caption-text { margin-top: 8px; font-size: 14px; line-height: 21px; color: #5d5d5d; text-align: center; font-style: italic; }
.sg-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.sg-content .alignleft { float: left; margin: 6px 24px 12px 0; }
.sg-content .alignright { float: right; margin: 6px 0 12px 24px; }
.sg-content blockquote { margin: 24px 0 0; padding: 16px 24px; border-left: 4px solid #f27226; background: var(--bg-soft); font-style: italic; color: #333; }
.sg-content blockquote p + p { margin-top: 8px; }
.sg-content hr { margin: 32px 0; border: 0; border-top: 1px solid #e1e5ea; opacity: 1; }
.sg-content table { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.sg-content th, .sg-content td { padding: 10px 12px; border: 1px solid #dfe3e8; text-align: left; vertical-align: top; }
.sg-content th { background: #192f5f; color: #fff; font-weight: 600; }
.sg-content tr:nth-child(even) td { background: #f7f9fb; }
.sg-content iframe, .sg-content video { display: block; max-width: 100%; margin: 24px auto 0; }
.sg-content iframe[src*="youtube"], .sg-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.sg-content::after { content: ""; display: table; clear: both; }

/* ---------- Thẻ · chia sẻ ---------- */
.sg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #e1e5ea; }
.sg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sg-tags a { display: inline-block; padding: 4px 12px; border-radius: 25px; background: #f2f3f5; font-size: 13px; line-height: 19.5px; color: #464646; }
.sg-tags a:hover { background: #f27226; color: #fff; }
.sg-share { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 14px; color: #5d5d5d; }
.sg-share a, .sg-share button {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: #192f5f; color: #fff; font-size: 15px; cursor: pointer; transition: background .2s, transform .2s;
}
.sg-share a:hover, .sg-share button:hover { background: #f27226; color: #fff; transform: translateY(-2px); }
.sg-share button.is-copied { background: #1e9e5a; }

/* ---------- Bài trước / sau ---------- */
.sg-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.sg-nav a { display: block; padding: 16px 20px; border: 1px solid #e1e5ea; border-radius: 4px; font-weight: 600; font-size: 15px; line-height: 22px; color: #333; transition: border-color .2s; }
.sg-nav a:hover { border-color: #f27226; color: #f27226; }
.sg-nav span { display: block; margin-bottom: 4px; font-weight: 400; font-size: 13px; color: #5d5d5d; }
.sg-nav-next { grid-column: 2; text-align: right; }

/* ---------- Tin liên quan ---------- */
.sg-related { padding: 60px 0 80px; background: #f2f3f5; font-family: var(--font-2); }
.sg-related-title { margin: 0 0 32px; font-family: var(--font-2); font-weight: 700; font-size: 24px; line-height: 28.8px; color: #192f5f; }
.sg-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sg-card-img img { display: block; width: 100%; height: auto; aspect-ratio: 275 / 160; object-fit: cover; }
.sg-card-title { margin: 16px 0 6px; font-family: var(--font-2); font-weight: 600; font-size: 16px; line-height: 24px; color: #333;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sg-card a:hover { color: #f27226; }

/* ---------- Danh sách: tiêu đề chuyên mục / tìm kiếm ---------- */
.nw-list-title { margin: 0 0 40px; font-family: var(--font-2); font-weight: 700; font-size: 24px; line-height: 32px; color: #192f5f; }
.news-archive .nw-main, .news-search .nw-main { padding-top: 60px; }
.nw-empty { margin: 0 0 24px; font-size: 16px; line-height: 24px; color: #5d5d5d; }

/* ---------- Cột phải: widget ---------- */
.nw-widgets { margin-top: 24px; font-size: 15px; line-height: 23px; color: #333; }
.nw-widget + .nw-widget { margin-top: 24px; }
.nw-widget-title { margin: 0 0 12px; font-family: var(--font-2); font-weight: 700; font-size: 18px; line-height: 24px; color: #192f5f; }
.nw-widget ul { margin: 0; padding: 0; list-style: none; }
.nw-widget li + li { margin-top: 10px; }
.nw-widget a:hover { color: #f27226; }

/* ---------- Form tìm kiếm ---------- */
.fsb-search { position: relative; max-width: 420px; }
.fsb-search input[type="search"] { width: 100%; height: 48px; padding: 0 56px 0 14px; border: 1px solid #d5dae1; border-radius: 4px; font-family: var(--font-2); font-size: 16px; color: #333; background: #fff; }
.fsb-search input[type="search"]:focus { outline: 2px solid rgba(242, 114, 38, .4); border-color: #f27226; }
.fsb-search button { position: absolute; right: 4px; top: 4px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px; background: #f27226; }
.fsb-search button img { width: 18px; height: 22px; filter: brightness(0) invert(1); }

/* ---------- 404 ---------- */
.sg-404 { padding: 100px 0 120px; }
.sg-404-code { margin: 0; font-family: var(--font); font-weight: 700; font-size: 120px; line-height: 1; color: #f27226; }
.sg-404 .sg-title { margin-top: 16px; }
.sg-404-text { margin: 12px 0 32px; font-size: 16px; line-height: 24px; color: #5d5d5d; }
.sg-404 .fsb-search { margin: 0 auto; }
.sg-404-actions { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }

/* ---------- Bình luận (nếu bật) ---------- */
.sg-article .comments-area { margin-top: 40px; }

/* ==========================================================================
   TABLET (992 – 1199)
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sg-article { width: 64%; }
  .sg-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   MOBILE (< 992)
   ========================================================================== */
@media (max-width: 991.98px) {
  .sg-wrap { padding: 28px 0 48px; }
  .fsb-page .fsb-article { padding: 32px 0 48px; }
  .sg-article { width: 100%; }
  .sg-crumb ol { margin-bottom: 20px; font-size: 13px; }
  .sg-title { font-size: 24px; line-height: 34px; }
  .sg-lead { font-size: 16px; line-height: 25px; }
  .sg-content .alignleft, .sg-content .alignright { float: none; margin: 16px auto 0; }
  .sg-foot { flex-direction: column; align-items: flex-start; }
  .sg-share { margin-left: 0; }
  .sg-nav { grid-template-columns: 1fr; gap: 12px; }
  .sg-nav-next { grid-column: 1; }
  .sg-grid .nw-aside { margin-top: 40px; }
  .sg-related { padding: 40px 0 56px; }
  .sg-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sg-related-title { margin-bottom: 20px; font-size: 20px; }
  .nw-list-title { margin-bottom: 24px; font-size: 20px; line-height: 28px; }
  .news-archive .nw-main, .news-search .nw-main { padding-top: 32px; }
  .sg-404 { padding: 56px 0 72px; }
  .sg-404-code { font-size: 88px; }
}

@media (max-width: 575.98px) {
  .sg-related-grid { grid-template-columns: 1fr; }
}

/* ---------- Bình luận ---------- */
.sg-article .comments-area, .sg-article .comment-respond { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e1e5ea; font-size: 15px; line-height: 23px; color: #333; }
.comment-reply-title, .comments-title { margin: 0 0 8px; font-family: var(--font-2); font-weight: 700; font-size: 20px; line-height: 28px; color: #192f5f; }
.comment-reply-title small { margin-left: 8px; font-size: 13px; font-weight: 400; }
.comment-notes, .logged-in-as { margin: 0 0 16px; font-size: 13px; color: #5d5d5d; }
.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comment-form > p { margin: 0; }
.comment-form-comment, .comment-form-cookies-consent, .form-submit, .comment-notes, .logged-in-as { grid-column: 1 / -1; }
.comment-form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
  display: block; width: 100%; padding: 10px 12px; border: 1px solid #d5dae1; border-radius: 4px; background: #fff;
  font-family: var(--font-2); font-size: 15px; line-height: 22px; color: #333;
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: 2px solid rgba(242, 114, 38, .4); border-color: #f27226; }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #5d5d5d; }
.comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.comment-form .submit {
  height: 40px; padding: 0 28px; border: 0; border-radius: 25px; cursor: pointer;
  background: linear-gradient(90deg, var(--orange-a), var(--orange-b)); color: #fff; font-family: var(--font); font-size: 16px;
}
.comment-form .submit:hover { filter: drop-shadow(0 6px 8px rgba(251, 118, 0, .35)); }
.comment-list { margin: 16px 0 0; padding: 0; list-style: none; }
.comment-list .children { margin: 16px 0 0 24px; padding: 0; list-style: none; }
.comment-body { padding: 16px 0; border-bottom: 1px solid #eef0f3; }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: 12px; color: #8a8f98; }
.comment-content { margin-top: 8px; }
@media (max-width: 575.98px) { .comment-form { grid-template-columns: 1fr; } }

/* ---------- Danh sách bình luận (comments.php) ---------- */
.comment-list { margin: 16px 0 8px; padding: 0; list-style: none; }
.comment-list .children { margin: 0 0 0 56px; padding: 0; list-style: none; }
.fsb-comment + .fsb-comment, .comment-list .children .fsb-comment { margin-top: 16px; }
.fc-body { display: flex; gap: 12px; padding: 16px; border: 1px solid #e6ebf1; border-radius: 10px; background: #fafbfd; }
.fc-avatar img { display: block; width: 44px; height: 44px; border-radius: 50%; }
.fc-main { flex: 1; min-width: 0; }
.fc-meta { margin: 0; font-size: 14px; line-height: 20px; color: #5d5d5d; }
.fc-meta b { margin-right: 8px; font-weight: 700; color: #192f5f; }
.fc-pending { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid #f27226; border-radius: 4px; background: #fff6ee; font-size: 13px; line-height: 19px; color: #8a4b12; }
.fc-text { margin-top: 6px; font-size: 15px; line-height: 23px; color: #333; overflow-wrap: anywhere; }
.fc-text p + p { margin-top: 8px; }
.fc-reply { margin: 8px 0 0; font-size: 13px; }
.fc-reply a { font-weight: 600; color: var(--blue); }
.comment-form .req, .comment-notes .req { color: #d63638; }
.comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.comment-form-cookies-consent a { color: var(--blue); text-decoration: underline; }
.sg-comment-submit { height: 42px; padding: 0 28px; border: 0; cursor: pointer; }
.comments-area .nav-links { display: flex; gap: 12px; margin-top: 16px; font-size: 14px; }
@media (max-width: 991.98px) { .comment-list .children { margin-left: 20px; } .comment-form { grid-template-columns: 1fr; } }

/* ---------- Khung mời đăng ký cuối bài ---------- */
.sg-cta {
  display: flex; align-items: center; gap: 20px; margin-top: 36px; padding: 22px 24px;
  border-radius: 14px; background: linear-gradient(135deg, #0c2340, #0047af); color: #fff;
}
.sg-cta-text { flex: 1; min-width: 0; }
.sg-cta-kicker { margin: 0; font-size: 13px; line-height: 18px; letter-spacing: .3px; text-transform: uppercase; color: #ffb877; }
.sg-cta-title { margin: 6px 0 0; font-weight: 700; font-size: 18px; line-height: 26px; }
.sg-cta-note { margin: 6px 0 0; font-size: 12px; opacity: .75; }
.sg-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.sg-cta-actions .btn-cta { height: 42px; padding: 0 24px; white-space: nowrap; }
.sg-cta-link { font-weight: 600; font-size: 14px; color: #fff; text-decoration: underline; }
@media (max-width: 767.98px) { .sg-cta { flex-direction: column; align-items: stretch; text-align: center; } }
/* Form bình luận nằm trong khung bình luận → không lặp đường kẻ */
.sg-article .comments-area .comment-respond { margin-top: 24px; padding-top: 0; border-top: 0; }
.sg-article .comments-area > .comment-respond:first-child { margin-top: 0; }