/* Heading Icons CSS - Tương ứng với 8 icon trong thư mục newpost */
/* CHỈ áp dụng cho headings TRONG NỘI DUNG bài viết, KHÔNG áp dụng cho tiêu đề bài viết */

/* Base styling for headings with icons - CHỈ trong article-content */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    position: relative;
    margin: 25px 0 15px 0;
    font-weight: bold;
    line-height: 1.4;
}

/* Icon positioning - sử dụng size gốc của hình ảnh */
.article-content h1:before,
.article-content h2:before,
.article-content h3:before,
.article-content h4:before,
.article-content h5:before,
.article-content h6:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-size: auto; /* Sử dụng size gốc của hình ảnh */
    background-repeat: no-repeat;
    background-position: left center;
}

/* H1 - Icon p1.png (38x38px) */
.article-content h1 {
    font-size: 28px !important;
    color: #d4af37 !important;
    padding-left: 48px !important; /* 38px icon + 10px spacing */
}

.article-content h1:before {
    background-image: url('/newpost/p1.png') !important;
    width: 38px !important;
    height: 38px !important;
    display: block !important;
}

/* H2 - Icon p2.png (25x25px) */
.article-content h2 {
    font-size: 24px !important;
    color: #c84223 !important;
    padding-left: 35px !important; /* 25px icon + 10px spacing */
}

.article-content h2:before {
    background-image: url('/newpost/p2.png') !important;
    width: 25px !important;
    height: 25px !important;
    display: block !important;
}

/* H3 - Icon p3.png (25x25px) */
.article-content h3 {
    font-size: 22px !important;
    color: #2c5530 !important;
    padding-left: 35px !important; /* 25px icon + 10px spacing */
}

.article-content h3:before {
    background-image: url('/newpost/p3.png') !important;
    width: 25px !important;
    height: 25px !important;
    display: block !important;
}

/* H4 - Icon p4.jpg (10x10px) */
.article-content h4 {
    font-size: 20px;
    color: #8b4513;
    padding-left: 20px; /* 10px icon + 10px spacing */
}

.article-content h4:before {
    background-image: url('/newpost/p4.jpg');
    width: 10px;
    height: 10px;
}

/* H5 - Icon p5.png (9x9px) */
.article-content h5 {
    font-size: 18px;
    color: #4682b4;
    padding-left: 19px; /* 9px icon + 10px spacing */
}

.article-content h5:before {
    background-image: url('/newpost/p5.png');
    width: 9px;
    height: 9px;
}

/* H6 - Icon p6.png (6x6px) */
.article-content h6 {
    font-size: 16px;
    color: #9932cc;
    padding-left: 16px; /* 6px icon + 10px spacing */
}

.article-content h6:before {
    background-image: url('/newpost/p6.png');
    width: 6px;
    height: 6px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .article-content h1 { font-size: 24px; padding-left: 43px; } /* Giảm padding một chút cho mobile */
    .article-content h2 { font-size: 22px; padding-left: 30px; }
    .article-content h3 { font-size: 20px; padding-left: 30px; }
    .article-content h4 { font-size: 18px; padding-left: 18px; }
    .article-content h5 { font-size: 16px; padding-left: 17px; }
    .article-content h6 { font-size: 14px; padding-left: 14px; }
}

/* XÓA BỎ styling cho headings NGOÀI article-content */
/* Đảm bảo tiêu đề bài viết KHÔNG có icon */

/* Special classes for p7.png and p8.png - CHỈ sử dụng khi cần thiết */
.special-heading-7 {
    position: relative;
    padding-left: 15px; /* 5px icon + 10px spacing */
    margin: 25px 0 15px 0;
    font-weight: bold;
    line-height: 1.4;
    font-size: 18px;
    color: #ff6347;
}

.special-heading-7:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url('/newpost/p7.png');
}

.special-heading-8 {
    position: relative;
    padding-left: 20px; /* 10px icon + 10px spacing */
    margin: 25px 0 15px 0;
    font-weight: bold;
    line-height: 1.4;
    font-size: 16px;
    color: #20b2aa;
}

.special-heading-8:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 9px;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url('/newpost/p8.png');
}