/*
Theme Name: boxstory
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 1.0.2
*/
#content .post-sidebar{
	padding: 0 10px 10px !important;
}
/* ==========================================================================
   1. GLOBAL & UTILITIES
   ========================================================================== */
.button.primary {
    background-color: var(--themeColor1, #8daaf8);
    color: var(--themeTextColor, #222);
    font-weight: 700;
    margin: 1rem auto;
    border-radius: 99px;
}

a#daily-fact {
    color: rgb(235, 83, 105);
    font-family: Calistoga, cursive;
    font-size: 14px;
    font-weight: 400;
}
.post-sidebar {
    border-top: 8px solid rgb(102, 69, 221);
}
span.widget-title{
	color: rgb(102, 69, 221);
}
/* ==========================================================================
   2. POST BUZZ & BLOG LAYOUT
   ========================================================================== */
/* Thiết lập box cha ngoài cùng làm gốc tọa độ và tạo khoảng trống bên trái */
.post-buzz .post-item .box-blog-post {
    position: relative;
    padding-left: 45px !important; 
}

.box-blog-post .box-image {
    border-radius: 8px;
}

/* Ẩn is-divider mặc định */
.box-blog-post .is-divider {
    display: none;
}
.widget .is-divider{
	background-color:transparent;
}

/* Gỡ bỏ "chốt chặn" mặc định của Flatsome ở phần text */
.post-buzz .post-item .box-blog-post .box-text,
.post-buzz .post-item .box-blog-post .box-text-inner {
    position: static !important;
}

/* Định vị thẻ cat-label sang khoảng trống bên trái ảnh */
.post-buzz .post-item .box-blog-post .cat-label {
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10;
    opacity: 1 !important;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    color: rgb(82, 70, 245) !important;
    font-weight: 700;
    font-size: 1.4em;
    letter-spacing: 1px;
    white-space: nowrap;
}

.post-buzz .box-text-inner.blog-post-inner {
    display: flex;
    flex-direction: column;
}

.post-buzz .box-text-inner .post-meta {
    order: 1;
    margin-bottom: 5px;
    font-size: 0.9em;
}

.post-buzz .box-text-inner .post-title {
    order: 2;
    margin-bottom: 10px; 
}

/* ==========================================================================
   3. CELEB CORNER
   ========================================================================== */
.celeb-corner-col .cat-label {
    font-family: Calistoga, cursive;
    color: rgb(235, 83, 105);
    font-size: 0.75rem;
    opacity: 1;
}

.celeb-corner-col .box-text {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.celeb-corner-col .row:last-child .col:last-child .box-text {
    border-bottom: none !important;
}

/* ==========================================================================
   4. CUSTOM LIGHTBOX / MENU POPUP
   ========================================================================== */
#custom-menu-dropdown {
    padding: 20px;
}

#bf-menu-overlay {
    background-color: #fff; /* Nền trắng cho toàn bộ popup */
}

/* Tùy chỉnh nút X đóng popup mặc định của Flatsome */
#bf-menu-overlay .mfp-close {
    color: #333;
    font-size: 28px;
    top: 10px;
    left: 10px; /* Đưa nút X sang trái giống BuzzFeed */
    right: auto;
}

/* ==========================================================================
   5. BUZZFEED (BF) TRENDING STYLE
   ========================================================================== */
/* --- Cấu trúc chung --- */
.bf-trending-wrapper {
    position: relative;
    font-family: Arial, sans-serif; /* Hoặc font mặc định theme */
}

.bf-card {
    display: block;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease;
    height: 100%;
}

.bf-card:hover {
    transform: translateY(-3px);
}

/* Ẩn cover image nếu cần */
.bf-hidden-img .image-cover {
    display: none;
}

/* Con số khổng lồ 1, 2, 3, 4 */
.bf-big-number {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 60px;
    font-weight: 900;
    font-family: Georgia, serif;
    color: #d1c4e9; /* Màu tím nhạt Buzzfeed */
    line-height: 1;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Đổ bóng để nổi trên ảnh */
}

/* Meta icon */
.bf-meta {
    font-size: 13px;
    color: #888;
    margin-top: 10px;
}

/* --- BÀI SỐ 1 (Featured Overlay) --- */
.bf-card-featured {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 350px; /* Cố định chiều cao cho bài lớn */
    display: flex;
    align-items: flex-end;
}

.bf-card-featured .bf-bg-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
}

.bf-card-featured .bf-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Hiệu ứng mờ đen từ dưới lên để đọc chữ */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
}

.bf-card-featured .bf-content-featured {
    position: relative;
    z-index: 5;
    padding: 20px 20px 20px 60px; /* Căn lề chừa chỗ cho số 1 */
}

.bf-card-featured .bf-title {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 5px;
}

.bf-content-featured .bf-title, 
.bf-title-yellow a {
    color: rgb(205, 201, 255);
    font-family: Georgia, serif;
    font-size: 1.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* --- BÀI 2, 3, 4 (Card thường) --- */
.bf-card-normal .bf-image-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

.bf-card-normal .bf-image-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Chống méo ảnh */
    display: block;
}

.bf-card-normal .bf-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    color: #111;
    margin: 0;
}

.bf-card-normal:hover .bf-title {
    color: #e53935; /* Đổi màu khi di chuột */
}

/* ==========================================================================
   6. BADGE TRENDING SVG & ANIMATIONS
   ========================================================================== */
.bf-trending-badge {
    background-color: rgb(255, 255, 255);
    border-radius: 100vw;
    outline: rgb(255, 255, 255) solid 11px;
    position: absolute;
    top: -35px;  /* Nhô lên so với khung ảnh */
    left: -35px; /* Thò ra lề trái */
    width: 92px; /* Kích thước SVG */
    height: 92px;
    z-index: 20;
    box-shadow: rgb(255, 255, 255) -2px -2px 2px, rgb(255, 255, 255) 2px 2px 2px;
}

.bf-trending-badge g {
    animation: trendingPosts-rotate-bf 5s cubic-bezier(.85, 1, .85, 1) forwards;
    transform-origin: 50% 50%;
}

.bf-spin-text {
    transform-origin: center;
    transform-box: fill-box;
    animation: rotateText 10s linear infinite;
}

/* Keyframes Definitions */
@keyframes trendingPosts-rotate-bf {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(240deg);
    }
}

@keyframes rotateText {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg); 
    }
}