/* ==========================================================================
   MỤC LỤC - BLOG.CSS (CHUẨN MATERIAL DESIGN 3)
   1. Bề mặt & Khung chứa (Wrapper, Post Cards, Sidebars)
   2. Typography & Liên kết (Headings, Links, Nội dung)
   3. Khu vực Tác giả & Bình luận (Author & Comments)
   4. Hình ảnh & Media (Images, Figures)
   5. RankMath Table Of Content (Mục lục bài viết)
   6. Box Xem thêm (Related Links)
   7. Responsive (Tối ưu thiết bị)
   ========================================================================== */


/* ==========================================================================
   1. BỀ MẶT & KHUNG CHỨA (SURFACES & CONTAINERS)
   ========================================================================== */
.blog-wrapper,
.blog-single {
    background-color: var(--md-sys-color-surface-container); /* Nền tổng thể nhạt */
}

/* Thẻ Card Bài Viết, Cột Sidebar & Khu Bình Luận (M3 Elevated Surface) */
.type-post,
.blog-archive .large-9,
.blog-archive .widget-area,
.blog-single .widget-area,
.comments-area {
    background-color: var(--md-sys-color-surface);
    margin-bottom: 24px;
    border-radius: var(--md-sys-shape-corner-md); /* Bo góc 12px chuẩn M3 */
    box-shadow: var(--md-sys-elevation-level-1); /* Bóng nổi Level 1 */
    transition: all var(--md-sys-duration-short) ease;
}

/* Khoảng cách padding bên trong khung bài viết */
.type-post {
    padding: 0 32px 32px;
    position: relative;
}

/* Tiện ích Box Shadow chung */
.box-shadow-style {
    box-shadow: var(--md-sys-elevation-level-1);
    border-radius: var(--md-sys-shape-corner-md);
    transition: all var(--md-sys-duration-short) ease;
}

.box-shadow-style:hover,
.type-post:hover {
    box-shadow: var(--md-sys-elevation-level-2);
}

/* Vạch phân cách mờ */
.single-post .is-divider,
.box-text-inner .is-divider,
.widget .is-divider {
    background-color: transparent;
    margin: 8px 0;
}


/* ==========================================================================
   2. TYPOGRAPHY & LIÊN KẾT (HEADINGS & LINKS)
   ========================================================================== */
/* Các thẻ Heading trong bài viết */
.type-post h2 {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding: 16px 0 12px;
    color: var(--md-sys-color-primary); /* Nhấn màu cam chủ đạo */
    font: var(--md-sys-typescale-headline-small);
}

.type-post h3 { font: var(--md-sys-typescale-title-large); color: var(--md-sys-color-on-surface); margin-top: 24px; }
.type-post h4, .type-post h5 { font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface); }

/* Liên kết trong bài (Thêm mũi tên điều hướng đặc trưng) */
.type-post a {
    color: var(--md-sys-color-primary);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--md-sys-duration-short) ease;
}

.type-post a:hover {
    color: var(--md-sys-color-primary-container);
    filter: brightness(0.8);
}

.type-post a:after {
    margin-left: 4px;
    content: "↗";
    font-family: system-ui;
}

/* Loại bỏ mũi tên ở các khối sản phẩm/slider chèn trong bài */
.type-post .product a,
.type-post .flickity-viewport a {
    color: var(--md-sys-color-on-surface) !important;
    border-bottom: 0;
}
.type-post .product a:after,
.type-post .flickity-viewport a:after {
    content: "";
    margin-left: 0;
}


/* ==========================================================================
   3. KHU VỰC TÁC GIẢ & BÌNH LUẬN
   ========================================================================== */
.entry-meta .posted-on time,
.entry-meta .meta-author { 
    font-weight: 700; 
    color: var(--md-sys-color-on-surface);
}

/* Box tác giả (Dùng Primary Container M3 thay cho màu cứng #ffdbcc) */
.entry-author {
    padding: 16px 16px 0;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: var(--md-sys-shape-corner-md);
    margin-top: 24px;
}
.author-name { margin-top: -16px; font: var(--md-sys-typescale-title-medium); }

/* Khung Bình luận */
.comments-area { background-color: var(--md-sys-color-surface); }
#comments .comment-respond {
    background-color: var(--md-sys-color-surface);
    margin-top: 16px;
    padding: 16px 24px 0;
    border-radius: var(--md-sys-shape-corner-md);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.comment_container .avatar { width: 36px; height: 36px; border-radius: var(--md-sys-shape-corner-full); }
.comment_container .star-rating { margin: 0 0 8px !important; color: var(--md-sys-color-warning); }
.comment_container .description { font: var(--md-sys-typescale-body-medium); }
.commentlist .children { margin: 0 16px; padding: 0; }
.commentlist .children li { list-style: none; padding: 4px 0 0; }
.woocommerce-review__dash { display: none; }


/* ==========================================================================
   4. HÌNH ẢNH & MEDIA
   ========================================================================== */
.blog-wrapper .entry-content figure,
.entry-content .fullwidth {
    margin: 0 -16px 32px;
    text-align: center;
}
.wp-block-image { margin: 16px auto; text-align: center; }
.wp-block-image img { border-radius: var(--md-sys-shape-corner-md); }
.wp-block-image figcaption { 
    margin: 8px 16px 16px; 
    text-align: center; 
    font-style: italic; 
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-secondary);
}
img.size-full.alignnone { margin: 16px 0; border-radius: var(--md-sys-shape-corner-md); }


/* ==========================================================================
   5. RANKMATH TABLE OF CONTENT (MỤC LỤC BÀI VIẾT)
   ========================================================================== */
#rank-math-toc {
    background: linear-gradient(45deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-error) 100%);
    color: var(--md-sys-color-on-primary);
    padding: 16px;
    margin: 0 -16px 32px;
    border-radius: var(--md-sys-shape-corner-md);
    box-shadow: var(--md-sys-elevation-level-1);
}

@media screen and (min-width: 45rem) {
    #rank-math-toc { padding: 32px; margin: 0 -32px 32px; }
}

#rank-math-toc h2 {
    margin: 0 0 16px;
    padding: 0;
    font: var(--md-sys-typescale-title-large);
    color: var(--md-sys-color-on-primary);
    border-bottom: 0;
}

#rank-math-toc ul, #rank-math-toc ol { margin-bottom: 0; }
#rank-math-toc ul ul, #rank-math-toc ol ol,
#rank-math-toc ul ol, #rank-math-toc ol ul { margin: 10px 0; }
#rank-math-toc li, #rank-math-toc nav { margin-bottom: 10px; font: var(--md-sys-typescale-body-medium); }
#rank-math-toc li:last-child { margin-bottom: 0; }

#rank-math-toc li a, #rank-math-toc nav a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--md-sys-duration-short) ease;
}

#rank-math-toc li a:hover, #rank-math-toc nav a:hover { 
    border-bottom: 1px dotted var(--md-sys-color-on-primary); 
    opacity: 0.8;
}

#rank-math-toc li a:hover:after, #rank-math-toc nav a:hover:after {
    content: "⇲";
    margin-left: 4px;
    font-family: system-ui;
}


/* ==========================================================================
   6. BOX XEM THÊM (RELATED POSTS / LINKS)
   ========================================================================== */
/* Sử dụng M3 Primary Container thay cho nền tĩnh #ffdbcc */
.blog-more-link {
    width: auto;
    padding: 16px 16px 0 16px;
    margin: 0 0 16px 0;
    border-radius: var(--md-sys-shape-corner-md);
    border: 1px solid var(--md-sys-color-outline-variant);
    background-color: var(--md-sys-color-primary-container);
}

.blog-more-link .title { 
    font: var(--md-sys-typescale-title-medium); 
    color: var(--md-sys-color-on-primary-container);
    margin-bottom: 8px; 
}

.blog-more-link ul li { 
    list-style: none; 
    position: relative; 
    padding: 2px 0 2px 24px; 
    margin: 0; 
}

.blog-more-link ul li:before {
    left: 0;
    position: absolute;
    font-size: 16px;
    color: var(--md-sys-color-success); /* Dấu check xanh lá chuẩn M3 */
    content: "✓" !important;
}

.blog-more-link a {
    color: var(--md-sys-color-on-surface) !important;
    cursor: pointer;
    text-decoration: none;
    font: var(--md-sys-typescale-body-medium);
    transition: color var(--md-sys-duration-short) ease;
}
.blog-more-link a:hover {
    color: var(--md-sys-color-primary) !important;
}


/* ==========================================================================
   7. RESPONSIVE & LAYOUT ĐIỀU CHỈNH
   ========================================================================== */
.post-sidebar .widget { margin-top: 16px; }
.post-sidebar .is-divider { display: none; }
.post-sidebar .widget-area .widget a { font: var(--md-sys-typescale-body-small); }
.blog-single .widget-area { padding: 16px; margin: 0 0 54px -40px; }
.blog-archive .large-9 { padding: 16px; margin: 0 0 73px; }
.blog-archive .widget-area { padding: 16px; margin: 0 0 73px -10px; }

@media screen and (min-width: 850px) {
    .archive .blog-wrapper .row-large .large-9 { padding: 30px 30px 0 30px !important; }
    .single-post .blog-wrapper .row-large .large-9 { padding: 0 30px 0 0 !important; }
    .blog-wrapper .row-large { padding: 0 0 0 32px; }
}

@media screen and (max-width: 849px) {
    .blog-wrapper .row-large { padding: 0; }
    .blog-single .widget-area,
    .blog-archive .widget-area { margin: 0 -16px 32px; padding: 16px; }
}

@media screen and (max-width: 549px) {
    .blog-wrapper, .blog-single { background-color: var(--md-sys-color-surface); }
    .type-post { padding: 0 0 24px; margin: 0; box-shadow: none; }
    #rank-math-toc { margin: 0 0 24px; border-radius: 0; }
}