/* ============================================================
   TÙY CHỈNH THANH CUỘN (SCROLLBAR) - SANG VÀ DỄ KÉO
   ============================================================ */
/* Lưu ý: Copy đoạn này bỏ vào cả file CSS của trang Sinhlynuoc.html nếu có thể */
::-webkit-scrollbar {
  width: 10px; /* Độ rộng vừa đủ để dễ kéo chuột */
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f8f9fa; /* Nền thanh cuộn nhạt, sạch sẽ */
}

::-webkit-scrollbar-thumb {
  /* Dùng màu xanh chủ đạo của bạn */
  background: #1f7a4d; 
  border-radius: 5px;
  /* Kỹ thuật tạo viền trắng giúp thanh nắm nhìn cực sang và nổi khối */
  border: 2px solid #f8f9fa; 
}

::-webkit-scrollbar-thumb:hover {
  /* Khi hover dùng màu xanh đậm nhất trong gradient của bạn */
  background: #0f3d2e; 
}





/* ===== NÚT MỞ TOOL ===== */
.npk-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 50px 50px; /* Thu gọn chiều cao để trông thanh thoát hơn */
  
  margin-top: 40px;      /* Khoảng cách từ phía trên đến nút */
  margin-bottom: 100px;  /* ĐÂY LÀ DÒNG BẠN CẦN CHỈNH: Khoảng cách từ nút xuống phần tử bên dưới */
  
  /* Nền tối sâu với hiệu ứng mờ kính */
  background: rgba(15, 61, 46, 0.8); 
  backdrop-filter: blur(10px);
  
  color: #ffffff;
  /* Viền cực mảnh (1px) nhưng sắc nét nhờ độ tương phản cao */
  border: 1px solid rgba(46, 204, 113, 0.5); 
  border-radius: 12px;
  
  /* Font chữ mảnh (300-400) nhưng rõ nhờ Letter-spacing */
  font-size: 16px;
  font-weight: 400; 
  text-transform: uppercase;
  letter-spacing: 3px; /* Tăng khoảng cách để trông cực kỳ "high-fashion" */
  
  cursor: pointer;
  position: relative;
  overflow: hidden;
  
  /* Bóng đổ mảnh, dài và mờ ảo */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  
  margin: 40px 0;
}

/* Hiệu ứng viền phát sáng nhẹ khi hover */
.npk-open-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px; /* Độ dày viền sáng */
  background: linear-gradient(90deg, transparent, #2ecc71, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s;
}

.npk-open-btn:hover {
  letter-spacing: 5px; /* Giãn chữ nhẹ khi hover tạo cảm giác sang trọng */
  background: rgba(15, 61, 46, 1);
  border-color: #2ecc71;
  box-shadow: 0 20px 40px rgba(46, 204, 113, 0.15);
}

.npk-open-btn:hover::after {
  opacity: 1;
}

.npk-open-btn:active {
  transform: scale(0.98);
}




/* ===== POPUP FULL MÀN ===== */
#npkPopup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  z-index: 999999;
  backdrop-filter: blur(4px); /* Làm mờ nhẹ nền trang web cho sang */
}

/* ===== KHUNG TOOL ===== */
#npkBox {
  position: absolute;
  inset: 4%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden; /* Iframe sẽ tự quản lý thanh cuộn bên trong */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ===== NÚT ĐÓNG ===== */
.npk-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 22px;
  background: #ffffff;
  color: #0f3d2e;
  border: 1px solid #eee;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.npk-close-btn:hover {
  background: #ff4d4d;
  color: white;
}

/* ===== IFRAME FULL KHUNG ===== */
#npkBox iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* PHẦN THUMBNAIL (GIỮ NGUYÊN GỐC) */
.bloghash-blog-entry-wrapper { overflow: hidden !important; border-radius: 20px; }
.bloghash-blog-entry-wrapper .post-thumb { width: 260px; height: 480px; overflow: hidden; flex-shrink: 0; }
.bloghash-blog-entry-wrapper .post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-post .entry-media.thumbnail { width: 100%; height: 580px; overflow: hidden; border-radius: 18px; margin-bottom: 24px; }
.single-post .entry-media.thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-post .post-thumb-caption {
  position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 14px; font-size: 14px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}



/* FIX widget danh sách bài viết - Hester / Bloghash */

.hester-posts-list-widget {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.hester-posts-list-widget-thumb {
  flex: 0 0 75px;
  position: relative;
}

.hester-posts-list-widget-thumb img {
  width: 75px;
  height: 75px;
  display: block;
  object-fit: cover;
}

.hester-posts-list-widget-thumb .post-thumb-caption {
  display: none;
}

.hester-posts-list-widget-details {
  flex: 1;
  min-width: 0;
}

.hester-posts-list-widget-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  font-size: 14px;
}

.hester-posts-list-widget-meta {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.7;
}



/* FIX ẢNH ĐẠI DIỆN BỊ NHÔ LÊN TRÊN CONTENT */
.bloghash-article .post-thumb {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative;
  top: 0;
}

.bloghash-article .post-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}



/* ===== FIX ẢNH BÀI VIẾT LƠ LỬNG – ÉP ĐỒNG ĐỀU ===== */

/* Khung ảnh */
.bloghash-blog-entry-wrapper .post-thumb {
    position: relative;
    width: 100%;
    height: 300px;            /* 🔴 CHỈNH CAO TẠI ĐÂY */
    overflow: hidden;
    background: #f2f2f2;
    flex-shrink: 0;
}

/* Link bao ảnh */
.bloghash-blog-entry-wrapper .post-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ảnh */
.bloghash-blog-entry-wrapper .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* 🔥 CHÌA KHÓA */
    object-position: center;
    display: block;
}

/* Card không bị kéo giãn */
.bloghash-blog-entry-wrapper {
    display: flex;
    align-items: stretch;
}

/* Nội dung bên phải luôn thẳng hàng */
.bloghash-entry-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Mobile */
@media (max-width: 768px) {
    .bloghash-blog-entry-wrapper .post-thumb {
        height: 250px;
    }
}


/* ===== FIX ẢNH TRÒN WIDGET – KHÔNG MÉO TRÊN MOBILE ===== */

.hester-posts-list-widget-thumb {
    width: 75px;
    height: 75px;
    min-width: 75px;
    min-height: 75px;
    max-width: 75px;
    max-height: 75px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f2f2f2;
}

/* Link bao ảnh */
.hester-posts-list-widget-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ảnh */
.hester-posts-list-widget-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
}

/* Mobile: KHÓA CỨNG – KHÔNG CHO BÓP */
@media (max-width: 768px) {
    .hester-posts-list-widget-thumb {
        width: 60px;
        height: 60px;
        min-width: 60px;
        min-height: 60px;
        max-width: 60px;
        max-height: 60px;
    }
}


/* ====================================================
   FEATURED GRID – KHÓA KHUNG + ẢNH ĐỒNG ĐỀU
   ==================================================== */

#featured_links .bloghash-post-item {
    height: 100%;
    display: flex;
    flex-direction: column;
  font-size:20px;
}

/* KHUNG ẢNH – KHÓA TỶ LỆ */
#featured_links .bloghash-post-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* vuông – đồng đều tất cả */
    overflow: hidden;
    border-radius: 18px;
}

/* LỚP ẢNH TRONG */
#featured_links .bloghash-post-thumb .inner {
    position: absolute;
    inset: 0;
}

/* ẢNH PHỦ TOÀN KHUNG */
#featured_links .bloghash-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ====================================================
   OVERLAY CAO CẤP – KHÔNG TRẮNG – KHÔNG LỆCH
   ==================================================== */
/* =====================================================
   FEATURED / PYML – FIX OVERLAY + GIỮ NGUYÊN DANH MỤC
   ===================================================== */

/* 1. DIỆT SẠCH OVERLAY GỐC */

#pyml .bloghash-post-thumb::before,
#pyml .bloghash-post-thumb::after,
#pyml .inner::before,
#pyml .inner::after,
#pyml .bloghash-post-item::before,
#pyml .bloghash-post-item::after,
.bloghash-pyml.slider-overlay-1::before,

[id^="bloghsah-featured-item-"] .bloghash-post-thumb::before,
[id^="bloghsah-featured-item-"] .bloghash-post-thumb::after,
[id^="bloghsah-featured-item-"] .inner::before,
[id^="bloghsah-featured-item-"] .inner::after,
[id^="bloghsah-featured-item-"] .bloghash-post-item::before,
[id^="bloghsah-featured-item-"] .bloghash-post-item::after {

    display:none !important;
    content:none !important;
    background:none !important;
    opacity:0 !important;
}

/* 2. ẢNH NGUYÊN MÀU */

#pyml img,
[id^="bloghsah-featured-item-"] img {
    filter:none !important;
    opacity:1 !important;
}

/* 3. CARD RELATIVE */

#pyml .bloghash-post-item,
[id^="bloghsah-featured-item-"] .bloghash-post-item {
    position:relative;
    overflow:hidden;
}

/* 4. GRADIENT CHỈ Ở CHÂN ẢNH – KHÔNG ĐỘNG CATEGORY */

#pyml .bloghash-post-content,
[id^="bloghsah-featured-item-"] .bloghash-post-content {

    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:40px 16px 18px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.35),
        transparent
    ) !important;

    z-index:10;
}

/* 5. CHỈ SỬA TITLE / BUTTON */

#pyml .bloghash-btn,
[id^="bloghsah-featured-item-"] .bloghash-btn {

    color:#ffffff !important;
    background:transparent !important;
    font-weight:400;
    text-shadow:0 2px 6px rgba(0,0,0,.6);
    line-height:1.35;

}

/* pill glass nhẹ cho title */

[id^="bloghsah-featured-item-"] .bloghash-btn {
    display:inline-block;
    padding:6px 12px !important;
    border-radius:10px;
    background:rgba(0,0,0,.35)!important;
    backdrop-filter:blur(4px);
}

/* 6. KHÓA BLEND MODE */

[id^="bloghsah-featured-item-"] * {
    mix-blend-mode:normal !important;
}



/* ====================================================
   PHẦN NÚT / TEXT
   ==================================================== */

#featured_links .bloghash-post-content {
    margin-top: 12px;
    text-align: center;
}

/* ====================================================
   MOBILE – GIỮ NGUYÊN TỶ LỆ
   ==================================================== */

@media (max-width: 767px) {
    #featured_links .bloghash-post-thumb {
        aspect-ratio: 4 / 3; /* mobile nhìn rộng hơn */
    }
}

/* ====================================================
   ĐƯA TEXT / NÚT LÊN TRÊN ẢNH (OVERLAY)
   ==================================================== */
/* ====================================================
   FEATURED LINKS – GLASS BACKGROUND TRONG SUỐT
   ÁP CHO BLOGHASH – ÉP GHI ĐÈ THEME
   ==================================================== */

/* 1. Khóa vị trí để overlay hoạt động */
#featured_links .bloghash-post-item {
    position: relative;
}

/* 2. Content nằm trên ảnh – KHÔNG nền */
#featured_links .bloghash-post-content {
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 16px;
    text-align: center;
    background: transparent !important; /* ÉP TRONG SUỐT */
    z-index: 3;
}

/* 3. GỠ toàn bộ nền trắng con cháu */
#featured_links .bloghash-post-content,
#featured_links .bloghash-post-content *,
#featured_links .bloghash-post-content a,
#featured_links .bloghash-post-content .bloghash-btn {
    background-color: transparent !important;
    background-image: none !important;
}

/* 4. LỚP GLASS NẰM DƯỚI TEXT */
#featured_links .bloghash-post-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12); /* chỉ để kích hoạt blur */
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    z-index: -1; /* nằm dưới chữ */
}

/* 5. Text & nút nổi rõ */
#featured_links .bloghash-post-content a {
    color: #fff !important;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* 6. Đảm bảo chữ luôn trên nền mờ */
#featured_links .bloghash-post-content * {
    position: relative;
    z-index: 2;
}


/* Chinh Có thể bạn đã bỏ lỡ! */
/* TITLE TRONG GRID 4 CỘT - HOMEPAGE / CATEGORY */
.bloghash-flex-row .bloghash-post-item h4.entry-title a{
    font-size:17px;      /* bạn có thể tăng/giảm */
    line-height:0.25;
    font-weight:700;


}
.bloghash-post-item{
    height:480px;
}


/*Tag mỗi tag 1 dòng */
/* TAGS: mặc định giữ nguyên (PC + mobile ngang) */
.entry-footer .post-tags a {
  display: inline-flex;
  align-items: center;
  margin: 4px 6px 4px 0;
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
}

/* CHỈ mobile xoay dọc: mỗi tag thành 1 nút full ngang */
@media (max-width: 768px) and (orientation: portrait) {
  .entry-footer .post-tags {
    display: block;
    width: 100%;
  }

  .entry-footer .post-tags a {
    display: block;
    width: 100%;
    margin: 6px 0;
    padding: 12px 14px;
    border-radius: 12px;
    text-align: left;
  }
}

/* Đêm lược xem */
.post-views-inline{
    margin-left:12px;
    font-size:14px;
    color:#22c55e;
    display:inline-flex;
    align-items:center;
    gap:4px;
}

/* Fix nền đen trong icon meta */
.hester-posts-list-widget-meta svg{
    background:none !important;
    fill:#555 !important;
}

/* Riêng icon view */
.hester-posts-list-widget-views{
    background:none !important;
}

.hester-posts-list-widget-views svg{
    background:none !important;
    fill:#888 !important;
}

/* Nếu theme add pseudo element */
.hester-posts-list-widget-meta span:before,
.hester-posts-list-widget-meta span:after{
    background:none !important;
}



/* META HERO SLIDER - FIX XUỐNG DÒNG */
.bloghash-hero-slider .entry-meta-elements{
    display:flex !important;
    align-items:center;
    flex-wrap:nowrap !important;
}

.bloghash-hero-slider .entry-meta-elements > *{
    display:inline-flex !important;
    align-items:center;
    margin-right:12px;
    width:auto !important;
}

/* VIEW */
.bloghash-hero-slider .trutue-meta-views{
    display:inline-flex !important;
    align-items:center;
    font-size:13px;
    color:#666;
}


/* HERO META FORCE INLINE */
.bloghash-hero-slider .entry-meta{
    display:flex !important;
}

.bloghash-hero-slider .entry-meta-elements{
    display:flex !important;
    align-items:center;
    flex-wrap:nowrap !important;
    gap:12px;
}

.bloghash-hero-slider .entry-meta-elements > div,
.bloghash-hero-slider .entry-meta-elements > span{
    display:inline-flex !important;
    align-items:center;
    width:auto !important;
}

/* REMOVE LINE BREAK */
.bloghash-hero-slider .entry-meta-elements br{
    display:none !important;
}



.bloghash-pyml .entry-meta-elements{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
    color:#eee;
}

.bloghash-pyml .entry-meta-elements span{
    white-space:nowrap;
}



/* =====================
RELATED POSTS (LIGHT)
=====================*/

.trutue-related{
    margin-top:60px;
}

.trutue-related h3{
    font-size:24px;
    margin-bottom:20px;
    border-left:4px solid #10b981;
    padding-left:12px;
    color:#111;
}

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

.related-item{
    background:#ffffff;               /* đổi nền trắng */
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);  /* bóng nhẹ */
    transition:.3s;
    border:1px solid #e5e7eb;
}

.related-item:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 26px rgba(0,0,0,.12);
}

.related-item .thumb img{
    width:100%;
    height:160px;
    object-fit:cover;
    display:block;
}

.related-item h4{
    font-size:16px;
    padding:12px;
    line-height:1.4;
}

.trutue-related .related-item h4 a{
    color:#777 !important;
    text-decoration:none;
    transition:color .25s ease;
}

.trutue-related .related-item h4 a:hover{
    color:#10b981 !important;
}


.related-item h4 a:hover{
    color:#10b981;
}


.related-item h4 a:hover{
    color:#10b981;
}

.related-item .views{
    display:block;
    padding:0 12px 14px;
    font-size:13px;
    color:#888;
}

/*Chinh mang xh*/
/* ========== KHUNG CHUNG CHO SOCIAL ========== */
.bloghash-socials-menu li a{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(111,111,111,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent !important;
    transition:all .25s ease;
}

/* Hover */
.bloghash-socials-menu li a:hover{
    border-color:#ff0000;
    transform:translateY(-2px);
}

/* ========== ICON SIZE ========== */
.bloghash-socials-menu svg.bloghash-icon{
    width:32px;
    height:32px;
}

/* ========== YOUTUBE ========== */
.bloghash-socials-menu .youtube svg{
    fill:#333;
}

.bloghash-socials-menu li a:hover .youtube svg{
    fill:#ff0000;
}

/* ========== ZALO ========== */

/* Bỏ nền bong bóng trong svg */
.bloghash-socials-menu .zalo svg path{
    fill: #111 !important;
		    width:38px;
    height:38px;
}

/* Màu chữ Z */
.bloghash-socials-menu .zalo svg text{
    fill:#fff;
}

/* Hover Zalo */
.bloghash-socials-menu li a:hover .zalo svg text{
    fill:#fff;
}

/* ========== DARK MODE BUTTON ========== */
.bloghash-darkmode{
    width:38px !important;
    height:38px !important;
    border-radius:50% !important;
    border:1px solid rgba(11,11,11,0.55) !important;
    background:#fff!important;
    transition:all .25s ease;
    fill:#fff;
}

.bloghash-darkmode:hover{
    border-color:#ff0000 !important;
    transform:translateY(-2px);
}
.bloghash-socials-menu li{
    margin:0 3.5px;
}

/* Tiêu đề */
/* CHỈ PHÓNG TO TIÊU ĐỀ TRONG TRANG BÀI VIẾT */
.single-post h4.entry-title a{
    font-size:44px;
    line-height:1.25;
    font-weight:800;
}


/* Tăng cỡ chữ nội dung bài viết trên điện thoại */
@media (max-width: 768px) {
  .entry-content.bloghash-entry,
  .entry-content.bloghash-entry p,
  .entry-content.bloghash-entry li {
    font-size: 18px !important;
    line-height: 1.75 !important;
  }

  .entry-content.bloghash-entry h2 {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  .entry-content.bloghash-entry h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
}

/*XỬ lý  News*/

#ticker{
     margin-top:30px !important;
    margin-bottom:30px !important;
}
/* ===== ÉP KHỐI CHA TICKER FULL NGANG ===== */

/* ===== NỀN XÁM NHẠT CHO TICKER ===== */
#ticker,
.bloghash-ticker,
.ticker-slider-box{
    /*background:#ddd !important;*/
}

#ticker,
.bloghash-ticker,
.bloghash-ticker-container{
    width:100%;
    max-width:none !important;
}

/* ===== MỞ KHÓA CONTAINER BÊN TRONG ===== */
#ticker .bloghash-container{
    width:100%;
    max-width:none !important;
    margin:0;
    padding-left:0px;
    padding-right:0px;
}

/* ===== ĐẢM BẢO SLIDER CHẠY FULL ===== */
#ticker .ticker-slider-box,
#ticker .ticker-slider-wrap{
    width:100%;
}

/* ===== ẨN NEWS + PLAY ===== */
#ticker .widget-title,
#ticker .ticker-slider-controls{
    display:none;
}

#ticker:hover .widget-title,
#ticker:hover .ticker-slider-controls{
    display:block;
}


#ticker *,
.bloghash-ticker,
.bloghash-ticker:before,
.bloghash-ticker:after,
.ticker-slider-box,
.ticker-slider-box:before,
.ticker-slider-box:after{
    border:none !important;
    box-shadow:none !important;
    outline:none !important;
    background:transparent !important;
}








/*Thư Hang cho web*/
/* GRID CHUNG */
/* ===== TOP 3 PREMIUM PODIUM ===== */
/* ===== TỔNG HỢP CSS: ĐỒNG NHẤT PC & MOBILE - PHÂN CẤP TOP 5 ===== */

/* 1. KHUNG BAO CHUNG (Luôn hàng dọc) */
.top3-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    padding: 0 5px;
    margin: 10px 0;
}

/* 2. CẤU TRÚC MỖI BÀI VIẾT (Dạng List ngang) */
.top3-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 5px 5px 5px 5px !important; /* Chừa chỗ cho Rank Number lấn ra ngoài */
    position: relative;
    text-decoration: none !important;
    transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    height: auto !important;
}

.top3-item:hover {
    transform: translateX(5px); /* Hiệu ứng đẩy nhẹ sang phải khi di chuột */
    box-shadow: 0 6px 5px rgba(0,0,0,0.08);
    background: #fafafa;
}

/* 3. SỐ THỨ HẠNG MẶC ĐỊNH (Dành cho số 4, 5...) */
.rank-number {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #777; /* Số 4, 5 chữ màu xám */
    background: #e0e0e0; /* Số 4, 5 nền màu xám nhạt */
    z-index: 10;
    border: 2px solid #fff;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.05);
}

/* 4. MÀU HUY CHƯƠNG NỔI BẬT CHO TOP 3 */
.rank-1 .rank-number { 
    background: linear-gradient(135deg,#ffd700,#b8860b); 
    color: #fff;
    width: 30px; 
    height: 30px;
    font-size: 15px;
}
.rank-2 .rank-number { 
    background: linear-gradient(135deg,#c0c0c0,#7a7a7a); 
    color: #fff;
    width: 28px;
    height: 28px;
}
.rank-3 .rank-number { 
    background: linear-gradient(135deg,#cd7f32,#8b4513); 
    color: #fff;
    width: 28px;
    height: 28px;
}

/* 5. ẢNH ĐẠI DIỆN (Tròn xoe) */
.top3-item img {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px;
    border-radius: 50% !important;
    object-fit: cover;
    margin-right: 5px;
    margin-bottom: 0 !important;
    border: 1px solid #f0f0f0;
}

/* 6. TIÊU ĐỀ (Giãn rộng và giới hạn 2 dòng) */
.top3-item h3 {
    flex: 1 !important; /* Chiếm toàn bộ khoảng trống ở giữa */
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
    margin: 0 5px 0 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal !important;
    text-align: left;
}

/* 7. LƯỢT VIEW (Sát mép phải, căn giữa theo title) */
.views {
    flex-shrink: 0 !important; /* Không cho view bị bóp méo */
    font-size: 11px !important;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    margin-left: auto !important;
    align-self: right !important;
    display: flex;
    align-items: right;
    gap: 3px;
}

/* Loại bỏ hoàn toàn bục vinh quang cũ của PC */
@media (min-width: 768px) {
    .rank-1, .rank-2, .rank-3 { 
        height: auto !important; 
        border-bottom: none !important; 
        order: unset !important;
    }
}


/* ===== CARD HẠNG 1: FULL NGANG WIDGET ===== */

.top3-item.rank-1 {
    flex-direction: column !important;
    align-items: flex-start !important; /* Căn lề trái cho nội dung bên dưới ảnh */
    padding: 0 0 15px 0 !important; /* QUAN TRỌNG: Bỏ padding trái/phải/trên để ảnh chạm mép */
    overflow: hidden; /* Để ảnh không bị lòi góc nhọn ra ngoài bo góc của card */
    gap: 0 !important; /* Xóa gap mặc định để ảnh dính sát đỉnh */
}

/* 1. Ảnh tràn viền */
.rank-1 .thumb {
    width: 100% !important;
    margin: 0 !important;
}

.rank-1 img {
    width: 100% !important;
    height: auto !important; 
    aspect-ratio: 16/9 !important; /* Tỉ lệ vàng cho ảnh lớn tràn ngang */
    border-radius: 0 !important; /* Xóa bo tròn riêng của ảnh để nó khớp với card cha */
    margin-right: 0 !important;
    border: none !important;
}

/* 2. Số 1 nằm đè lên ảnh (Góc trái trên) */
.rank-1 .rank-number {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    transform: none !important;
    z-index: 5;
    width: 35px;
    height: 35px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* 3. Phần chữ (Tiêu đề & View) - Cần padding lại để không dính lề */
.rank-1 h3 {
    padding: 15px 15px 5px 15px !important; /* Tạo khoảng cách cho chữ so với mép card */
    font-size: 17px !important;
    width: 100%;
    margin: 0 !important;
}

.rank-1 .views {
    padding: 0 15px 5px 15px !important;
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start !important; /* Căn view theo lề trái của tiêu đề */
}

/* ===== GIỮ NGUYÊN CÁC HẠNG 2, 3, 4, 5 DẠNG LIST NGANG ===== */
.top3-item:not(.rank-1) {
    /* Code cũ bạn đang dùng cho các hàng ngang */
    padding: 5px 10px 5px 20px !important;
}



/* CHỉnh hình trang chu*/
/* FIX CHIỀU CAO ẢNH CHO HERO THUMB LEFT */
.bloghash-thumb-hero.bloghash-thumb-left .post-thumb{
    height:480px !important;   /* giảm xuống */
}
@media (max-width:768px){
    .bloghash-thumb-hero.bloghash-thumb-left .post-thumb{
        height:380px !important;
    }
}
.bloghash-thumb-hero.bloghash-thumb-left .post-thumb img{
    height:100%;
    width:100%;
    object-fit:cover;
}




/* Huy hiêu cho thanh viên comment nhiều nhất*/
/* Container bọc ngoài */
.top-commenters-wrapper {
    background: transparent;
    padding: 10px 0;
}

.top-commenters {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 500px;
}

/* Từng dòng thành viên */
.top-commenters li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    margin-bottom: 12px;
    background: #ffffff;
    border-radius: 20px;
    /* Đổ bóng tầng thấp tạo chiều sâu */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hiệu ứng Hover cực mượt */
.top-commenters li:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.08);
}

/* AVATAR TRÒN SANG TRỌNG */
.avatar-col {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    position: relative;
    padding: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.avatar-col img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid #fff;
    display: block;
}

/* INFO COLUMN */
.info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top-commenters .name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

.top-commenters .count {
    font-size: 12px;
    color: #a0a0a0;
    font-weight: 500;
    text-transform: uppercase;
}

/* BADGE COLUMN (Huy hiệu) */
.badge-col {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfcfc;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 300;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
}

/* Highlight cho Top 1 */
.top-commenters li:nth-child(1) {
    background: linear-gradient(to right, #ffffff, #fafafa);
}

.top-commenters li:nth-child(1) .badge-col {
    background: #1a1a1a; /* Badge đen cho số 1 cực sang */
    color: #fff;
    border: none;
    font-weight: 600;
}
/* Badge cơ bản cho tất cả các thứ hạng */
.badge-col {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    transition: all 0.3s ease;
}

/* Hạng 1: Đen sâu (Deep Black) - Quyền lực tuyệt đối */
.top-commenters li:nth-child(1) .badge-col {
    background: #1a1a1a;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hạng 2: Xám đậm (Charcoal) - Sang trọng */
.top-commenters li:nth-child(2) .badge-col {
    background: #555555;
    color: #ffffff;
    font-weight: 500;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hạng 3: Xám nhạt (Silver/Light Gray) - Tinh tế */
.top-commenters li:nth-child(3) .badge-col {
    background: #e0e0e0;
    color: #333333;
    font-weight: 500;
    font-size: 15px;
}

/* Các hạng còn lại (4-10): Rất nhạt, chỉ có viền mờ */
.top-commenters li:nth-child(n+4) .badge-col {
    background: #f8f8f8;
    color: #999;
    font-weight: 400;
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}
/* Kr6 thúc Huy hiêu cho thanh viên comment nhiều nhất*/