/* Tách tự động từ app/Views/blog/detail.php (SEO 2026-10-24) — sửa tại đây, không sửa trong view. */
/* Star Rating Selector CSS */

.star-rating-selector {

  display: inline-flex !important;

  flex-direction: row-reverse !important;

  gap: 4px;

}

.star-rating-selector input {

  display: none !important;

}

.star-rating-selector label {

  font-size: 28px !important;

  color: #cbd5e1 !important;

  cursor: pointer;

  transition: color 0.15s ease-in-out;

  margin: 0 !important;

  padding: 0 2px !important;

}

.star-rating-selector input:checked ~ label,

.star-rating-selector label:hover,

.star-rating-selector label:hover ~ label {

  color: #EBB000 !important;

}

.comment-item-hidden { display: none !important; }

.blog-tag-link-item:hover {

  color: #005A9C !important;

}

.blog-tag-link-item:hover svg {

  color: #005A9C !important;

}

.blog-related-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.05);

  border-color: #cbd5e1 !important;

}

.blog-related-card:hover .blog-related-img {

  transform: scale(1.05);

}

.blog-related-title-link:hover {

  color: #005A9C !important;

}

.sidebar-popular-item:hover .sidebar-popular-img {

  transform: scale(1.05);

}

.sidebar-popular-item:hover .sidebar-popular-title {

  color: #005A9C !important;

}

.sidebar-toc-sticky {

  position: sticky;

  top: 90px;

  z-index: 10;

}

#blog-toc-body::-webkit-scrollbar {

  width: 6px;

}

#blog-toc-body::-webkit-scrollbar-track {

  background: #f1f5f9;

  border-radius: 4px;

}

#blog-toc-body::-webkit-scrollbar-thumb {

  background: #cbd5e1;

  border-radius: 4px;

}

#blog-toc-body::-webkit-scrollbar-thumb:hover {

  background: #94a3b8;

}

.container.blog-detail-page { max-width: 1400px; }

.blog-detail-page { padding-top: 8px; padding-bottom: 60px; }

.blog-detail-layout { display:grid; grid-template-columns:1fr 380px; gap:30px; }

.blog-detail-main { min-width: 0; }

.blog-detail-hero { border-radius:14px; overflow:hidden; margin-bottom:0; aspect-ratio:16/9; }
.blog-detail-hero a { display:block; width:100%; height:100%; }
.blog-detail-hero__img { width:100%; height:100%; object-fit:cover; display:block; }

.blog-detail-content-wrap { padding-top: 0; }

.blog-detail-meta { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }

.blog-detail-cat { background:#EDF4FF; color:#005A9C; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; font-family:'Outfit',sans-serif; }

.blog-detail-title { font-family:'Outfit',sans-serif; font-size:clamp(20px, 4.5vw, 28px); font-weight:700; color:#1a1a2e; line-height:1.4; margin-bottom:16px; }

.blog-detail-lead { font-size:16px; color:#555; line-height:1.7; margin-bottom:20px; font-style:italic; border-left:3px solid #EBB000; padding:12px 16px; border-radius:0 8px 8px 0; background:#FFFBEB; }

.blog-detail-share { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:4px; }

.blog-detail-body { font-size:15px; color:#333; line-height:1.85; overflow-wrap:break-word; word-break:break-word; }

.blog-detail-body h2 { font-family:'Outfit',sans-serif; font-size:20px; font-weight:700; color:#005A9C; margin:28px 0 12px; padding-bottom:8px; border-bottom:2px solid #EDF4FF; scroll-margin-top:90px; }

.blog-detail-body h3 { font-family:'Outfit',sans-serif; font-size:17px; font-weight:600; color:#1a1a2e; margin:20px 0 10px; scroll-margin-top:90px; }

.blog-detail-body p { margin-bottom:14px; }

.blog-detail-body img { max-width:100%; height:auto; border-radius:10px; margin:16px 0; }

.blog-detail-body figure,

.blog-detail-body .wp-caption { max-width:100%; margin:16px 0; }

.blog-detail-body figure img,

.blog-detail-body .wp-caption img { width:100%; height:auto; }

.blog-detail-body table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0; border-collapse:collapse; }

.blog-detail-body iframe[src*="youtube.com/embed"],

.blog-detail-body iframe[src*="youtube-nocookie.com/embed"] {

  display:block;

  width:100%;

  max-width:900px;

  height:auto;

  aspect-ratio:16/9;

  margin:20px auto;

  border:0;

  border-radius:10px;

  background:#000;

}

.blog-detail-body video {

  display:block;

  width:100%;

  max-width:900px;

  height:auto;

  max-height:70vh;

  margin:20px auto;

  border-radius:10px;

  background:#000;

}

.blog-detail-body ul,.blog-detail-body ol { padding-left:24px; margin-bottom:14px; }

.blog-detail-body li { margin-bottom:6px; }

.blog-related-section { margin-top:40px; margin-bottom:20px; }

.blog-related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; }

.blog-comments-section { margin-top:40px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:24px; }

.blog-comment-fields { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:12px; }

.blog-comment-submit-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

.blog-reply-fields { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:8px; }

.blog-cta-box { background:#EDF4FF; border:1.5px solid #C3D9F5; border-radius:12px; padding:20px; display:flex; align-items:center; gap:16px; }

.blog-cta-box__icon { width:52px; height:52px; background:#005A9C; color:#EBB000; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.blog-cta-box__title { font-family:'Outfit',sans-serif; font-size:16px; font-weight:700; color:#005A9C; margin-bottom:4px; }

.blog-cta-box__sub { font-size:13px; color:#555; }

/* Sidebar */

.blog-detail-sidebar { position:relative; }

.sidebar-card { background:white; border:1px solid #E1E4E8; border-radius:12px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }

.sidebar-card__title { font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; color:#1a1a2e; margin-bottom:14px; display:flex; align-items:center; gap:8px; }

.sidebar-posts { display:flex; flex-direction:column; gap:12px; }

.sidebar-post-item { display:flex; align-items:flex-start; gap:10px; text-decoration:none; transition:background 0.15s; padding:6px; border-radius:8px; }

.sidebar-post-item:hover { background:#F0F8FF; }

.sidebar-post-item__img { width:70px; height:52px; border-radius:7px; overflow:hidden; flex-shrink:0; }

.sidebar-post-item__img img { width:100%; height:100%; object-fit:cover; }

.sidebar-post-item__title { font-size:13px; color:#333; font-weight:500; line-height:1.4; margin-bottom:4px; }

.sidebar-post-item:hover .sidebar-post-item__title { color:#005A9C; }

.sidebar-post-item__date { font-size:11px; color:#999; }

@media (max-width:900px) {

  .blog-detail-page { padding-top: 4px; padding-bottom: 48px; }

  .blog-detail-layout { grid-template-columns:1fr; gap:24px; }

  .blog-detail-sidebar { position:static; }

  .sidebar-toc-sticky { position:static !important; width:auto !important; top:auto !important; }

  .blog-detail-hero { margin-bottom:20px !important; border-radius:10px; }

  .blog-detail-lead { font-size:15px; }

  .blog-related-grid { grid-template-columns:1fr; gap:16px; }

  .blog-cta-box { flex-direction:column; text-align:center; }

  .blog-cta-box .btn { width:100%; justify-content:center; }

  .blog-comments-section { padding:16px; margin-top:28px; }

  .blog-comment-fields,

  .blog-reply-fields { grid-template-columns:1fr; }

  .blog-comment-submit-row { flex-direction:column; align-items:stretch; }

  .blog-comment-submit-row .btn { width:100%; justify-content:center; }

  .rating-summary-box { flex-direction:column !important; gap:16px !important; align-items:stretch !important; }

  .rating-summary-box > div:first-child { min-width:0 !important; width:100%; }

  .rating-summary-box > div:last-child { min-width:0 !important; width:100%; }

  .comments-list .replies-list,

  .comments-list [id^="reply-form-"] { margin-left:0 !important; }

  .blog-detail-share a[style*="margin-left:auto"] { margin-left:0 !important; }

}

@media (max-width:560px) {

  .blog-detail-page { padding-top: 0; padding-bottom: 40px; }

  .blog-detail-title { font-size:20px; line-height:1.35; }

  .blog-detail-body { font-size:15px; line-height:1.75; }

  .blog-detail-body h2 { font-size:18px; margin-top:22px; }

  .blog-detail-body h3 { font-size:16px; }

  .blog-detail-body ul,.blog-detail-body ol { padding-left:20px; }

  .blog-detail-meta { gap:6px; }

  .blog-related-section h3 { font-size:18px !important; }

  .blog-comments-section h3 { font-size:18px !important; }

  .sidebar-card { padding:16px !important; }

}