/* Vỏ bọc full-width để đổ màu nền nếu muốn */
.blog-detail-section {
    width: 100%;
    background-color: var(--nau_vua); /* Màu nền nhẹ để nổi bật khối nội dung trắng */
    /* padding-top: 50px; */
    display: flex;
}

.blog-detail-section.kinh-nghiem {
    background-color: var(--nau_dam_2x);
}

/* Ruột nội dung kìm hãm ở 1200px */
.blog-container {
    max-width: 1200px;
    margin: var(--header-height) auto 0;
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; /* Khoảng cách giữa bài viết và sidebar */
    /* padding: 0 20px; */
}

/* Khối nội dung chính (90%) */
.main-blog-content {
    /* Tính toán: 90% trừ đi gap để không bị đẩy xuống dòng */
    flex: 0 0 calc(80% - 30px); 
    /* background: #ffffff; */
    padding: 20px 20px;
    /* border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); */
    line-height: 1.6; /* Giúp bài viết dễ đọc hơn */
    text-align: justify; /* Căn lề đều hai bên */
    text-justify: inter-word; /* Tối ưu việc giãn cách giữa các từ */
    hyphens: auto; /* Tự động ngắt từ nếu dòng quá dài (tùy trình duyệt) */
}


.main-blog-content.tenyear {
    padding: 0;
}


/* Sidebar sản phẩm (10%) */
.blog-sidebar {
    flex: 0 0 20%;
    /* Hiệu ứng trượt theo màn hình */
    position: sticky;
    top: 60px; /* Cách mép trên trình duyệt 100px khi cuộn */
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    align-items: center;
    padding: 0 0px;
}

h1 {
    font-size: 2rem;
    line-height: 1.3;
}


.price-card.sidebar-style {
    max-width: 100%; /* Để nó tự co giãn theo 10% hoặc 25% của sidebar */
    margin: 0px 0;
    border-radius: 0;
}

/* Thu nhỏ Header */
.sidebar-style .price-header {
    padding: 10px 10px;
    border-radius: 0;
}

.sidebar-style .price-header h3 {
    font-size: 1.2rem; /* Nhỏ lại cho vừa chiều ngang hẹp */
}

.sidebar-style .price-header p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 0;
}

/* Thu nhỏ con số giá tiền (Quan trọng nhất) */
.sidebar-style .price-body {
    padding: 10px 10px;
}

/* Chữ chỉ từ */
.sidebar-style .price-body .only-p {
    font-size: 0.9rem;
    color: #555;
}

.sidebar-style .price-amount{
    margin-bottom: 10px;
}

.sidebar-style .price-amount .number {
    font-size: 2.5rem; /* Giảm từ 4.5rem xuống 2.5rem để không tràn */
}

.sidebar-style .price-amount .currency {
    font-size: 0.9rem;
    margin-top: 5px;
}

.sidebar-style .price-sub .unit {
    font-size: 0.9rem;
}

.sidebar-style .btn-order {
    display: inline-block;
    background-color: #a67c41; /* Màu vàng đồng của logo */
    color: white;
    padding: 7px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.3s;
    border: none;
    font-family: var(--main-font), var(--fallback-font);
}

/* Thu nhỏ danh sách ưu điểm */
.sidebar-style .feature-item {
    font-size: 0.85rem;
    margin-bottom: 8px;
}



/* Courasel imgages sidebar */
.sidebar-carousel {
    width: 100%;
    aspect-ratio: 1 / 1; /* Giữ khung hình vuông hoặc tùy chỉnh theo ý bạn */
    overflow: hidden;    /* Ẩn các hình đang chờ ở bên ngoài */
    margin-bottom: 0px;
}

.carousel-track {
    display: flex;
    width: 300%; /* Vì có 3 hình nên chiều dài track bằng 300% */
    animation: slideAnimation 6s infinite; /* 3 hình x (2s xem + 1s trượt) = 9s */
}

.slide {
    width: 100%; /* Mỗi hình chiếm 1/3 track */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo hình không bị méo */
    display: block;
}


.blog-footer-section {
    background-color: var(--nau_dam_2x); /* Nền tối sang trọng */
    padding: 50px 0px;
    text-align: justify;
    color: var(--white)
}

.blog-footer-section .video-wrapper{
    margin-bottom: 50px;
}



/* Tiêu đề lớn nhất H1 (thường là tên bài viết) */
.main-blog-content h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--nau_dam_2x);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Các mục lớn (Chi phí mặt bằng, máy móc...) */
.main-blog-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--nau_dam_2x); /* Màu Amber sẫm thương hiệu */
    margin: 1rem 0 1rem;
    display: flex;
    align-items: center;
}

.main-blog-content h2::before {
    content: "";
    width: 6px;
    height: 1.5rem;
    background: var(--nau_dam_2x);
    margin-right: 12px;
    border-radius: 4px;
}

.main-blog-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--nau_dam_2x); /* Màu Amber sẫm thương hiệu */
    margin: 0.5rem 0 0.5rem;
}

/* Bài kinh nghiệm */
.kinh-nghiem .main-blog-content h3 {
    color: var(--white);
}

/* Đoạn văn bản */
.main-blog-content p {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.main-blog-content a {
    color: var(--nau_dam_2x);
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}

/* Hình ảnh bài viết */
.main-blog-content img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    margin: 1rem 0 1rem;
    /* box-shadow: 0 10px 25px rgba(0,0,0,0.05); */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* Chú thích ảnh */
.main-blog-content em {
    display: block;
    text-align: center;
    color: #718096;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

/* Định dạng các danh sách giá cả */
/* .main-blog-content ul, .main-blog-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
} */


.main-blog-content ol {
    list-style-type: decimal; /* Hiện số 1, 2, 3... */
    margin-left: 1.5rem;      /* Tạo khoảng trống bên trái để hiện số */
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.main-blog-content ol li {
    margin-bottom: 0.75rem;   /* Khoảng cách giữa các dòng cho thoáng */
    line-height: 1.6;         /* Độ cao dòng giúp dễ đọc hơn */
    padding-left: 0.5rem;
}

/* Tương tự cho danh sách dấu chấm (nếu có) */
.main-blog-content ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
}



/* Tinh chỉnh phần liệt kê máy móc (trong thẻ p hoặc ul) */
.main-blog-content strong {
    color: #1a202c;
    font-weight: 700;
}


/* Phần thông báo cuối bài */
.quality-commitment {
    border-left: 10px solid var(--nau_dam_2x);
    display: flex;
    margin: 2rem 0;
    background-color: #fdf6e3; /* Màu kem nhạt rất sang */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.03);
}

.commitment-border {
    width: 20px;
    background-color: var(--nau_dam_2x); /* Màu nâu Windows Coffee */
}

.commitment-content {
    padding: 1.5rem;
}

.brand-line {
    font-weight: 700;
    color: var(--nau_dam_2x);
    font-size: 1.2rem !important;
    margin-bottom: 0.5rem;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
}

.highlight-line {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--black);
    margin-bottom: 0;
    text-align: justify;
}

.highlight-line strong {
    color: var(--nau_dam_2x);
    font-weight: 800;
}



.related-post-soft {
    border-left: 10px solid var(--nau_dam_2x);
    background-color:var(--nau_nhat); /* Màu kem sữa */
    padding: 5px 10px;
    /* border-radius: 15px; */
    margin: 10px 0;
    font-style: italic;
}


/* KHỐI BAO QUANH ĐỂ XỬ LÝ MẢNG TRẮNG */
.tiktok-clean-wrapper {
    width: 100%;
    /* Độ rộng vàng để clip dọc không lộ nền trắng của TikTok */
    max-width: 325px; 
    margin: 0 auto;
    /* Bo góc để clip trông hiện đại hơn */
    /* border-radius: 15px; */
    overflow: hidden; 
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
    background-color: #000; /* Nền đen để nếu có hở cũng không bị chói */
}

/* Ghi đè CSS mặc định của thẻ blockquote TikTok */
.tiktok-embed {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
}

/* Hiệu ứng trượt */
@keyframes slideAnimation {
    /* Hình 1 dừng 2s */
    0%, 22% { transform: translateX(0); }
    
    /* Trượt sang Hình 2 (mất 1s) */
    33%, 55% { transform: translateX(-33.3333%); }
    
    /* Trượt sang Hình 3 (mất 1s) */
    66%, 88% { transform: translateX(-66.6666%); }
    
    /* Quay về Hình 1 */
    100% { transform: translateX(0); }
}




@media (max-width: 768px) {
    .main-blog-content, 
    .blog-sidebar {
        flex: 0 0 100%; /* Chiếm trọn bề ngang */
    }

    .blog-container {
        margin: var(--header-height-mobile) auto 0;
    }

    .blog-detail-section {
        padding: 0px 0;
    }

    .blog-sidebar {
        position: static; /* Tắt chế độ trượt trên mobile */
        padding: 20px 20px 0px;
        top: 0px;
    }

    .kinh-nghiem .main-blog-content h3 {
    color: var(--white);
    }

    .tiktok-embed {
        min-width: 100% !important;
        max-width: 100% !important;
    }

}