:root{
--primary-color:#2a5298;
--secondary-color:#FE7214;
--gray:#4c4a4a;
--wp-blue-dark:#1F5F8B;
--wp-blue:#2F7EA8;
--wp-blue-light:#4FA3C7;
/* Accent – Color grading */
--wp-accent-yellow:#FFC700;
--wp-accent-cyan:#1EC9FF;
--wp-accent-red: #FF3B30;
--wp-accent-green: #32E132;
/* Background */
--wp-bg-dark:#0B0F14; 
--wp-bg-section:#0E1A22; 
--wp-bg-light: #FFFFFF;
/* Text */
--wp-text-main:#FFFFFF;
--wp-text-muted:#B6C2CC;
--wp-text-dark:#1C1C1C;	
}
.page-banner {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.page-banner picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-banner-inner {
    bottom: 20px;
    left: 0;
}

.page-banner-inner span {
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 3px;
    display: inline-block;
}

.sperator {
    padding: 0 4px;
}

/* ===========================
   LAYOUT
=========================== */
.single-blog-main {
    padding-top: 60px;
    padding-bottom: 80px;
}

.single-blog__content h1.section__title {
    font-size: 34px;
    line-height: 1.25;
    color: #111;
}

.single-blog__content .ws-sgct img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.single-blog__content p,
.single-blog__content li {
    font-size: 17px;
    line-height: 1.7;
    color: #333;
}

.single-blog__content a {
    color: #0d6efd;
}

/* ===========================
   SHARE BUTTONS
=========================== */
.single-blog__share {
    position: sticky;
    top: 110px;
}

.single-blog__share-title {
    font-size: 14px;
    letter-spacing: 1px;
}

.single-blog__share ul li {
    margin-bottom: 10px;
}

.single-blog__share a {
    width: 38px;
    height: 38px;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: 0.25s;
    font-size: 18px;
}

.single-blog__share a:hover {
    border-color: #000;
    transform: translateY(-3px);
}

/* ===========================
   TAGS
=========================== */
.single-blog__tags .tag-item {
    background: #f1f1f1;
    padding: 6px 14px;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 20px;
    font-size: 14px;
    display: inline-block;
    transition: 0.25s;
}

.single-blog__tags .tag-item:hover {
    background: #000;
    color: #fff;
}

/* ===========================
   COMMENT SECTION
=========================== */
.single-blog__comment-title {
    font-size: 22px;
    color: #111;
}

.comments-area {
    margin-top: 20px;
}

.comments-area textarea,
.comments-area input[type="text"],
.comments-area input[type="email"] {
    width: 100%;
    border-radius: 6px;
    padding: 12px;
    border: 1px solid #ddd;
}

/* ===========================
   SIDEBAR
=========================== */
#secondary {
    padding-left: 10px;
}

#secondary .widget {
    margin-bottom: 40px;
}

#secondary .widget-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1024px) {
    .page-banner {
        height: 220px;
    }

    .single-blog__share {
        display: flex;
        position: static;
        margin-bottom: 20px;
        justify-content: center;
    }

    .single-blog__share ul {
        display: flex !important;
        gap: 15px;
    }
}

@media (max-width: 767px) {
    .page-banner {
        height: 180px;
    }

    .single-blog__content h1.section__title {
        font-size: 26px;
    }

    .single-blog-main {
        padding-top: 40px;
        padding-bottom: 50px;
    }
}
/* Sidebar recent post */
/* ===== RELATED POSTS (SINGLE) ===== */
.single-blog__related {
  margin-top: 40px;
}

.single-blog__related .related-title {
  font-size: 18px;
  color: #111827;
}

/* Grid 3 cột */
.single-blog__related .related-posts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Item */
.single-blog__related .related-post-item {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover */
.single-blog__related .related-post-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.12);
}

/* Link */
.single-blog__related .related-post-item a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Image */
.single-blog__related .related-post-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Title */
.single-blog__related .related-post-title {
  font-size: 14px;
  font-weight: 600;
  padding: 12px 14px 14px;
  margin: 0;
  line-height: 1.4;
  color: #111827;

  /* giới hạn 2 dòng */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Hover title */
.single-blog__related .related-post-item:hover .related-post-title {
  color: #3e6bbf;
}
@media (max-width: 991px) {
  .single-blog__related .related-posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .single-blog__related .related-posts {
    grid-template-columns: 1fr;
  }
}