/* CSS cho header phần mô tả chi tiết */
#description-content-header {
    background-color: #f8f9fa !important;
    border: none !important;
    padding: 20px !important;
    margin-bottom: 0 !important;
}

.product-info-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    position: relative !important;
    display: inline-block !important;
}

.product-info-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 0 !important;
    width: 60px !important;
    height: 3px !important;
    background-color: #dc3545 !important;
    border-radius: 2px !important;
}

/* CSS mạnh mẽ cho phần mô tả chi tiết - xử lý mọi cấu trúc HTML */
#description-content {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Reset và xử lý tất cả hình ảnh trong description */
#description-content img,
#description-content * img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    border: none !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
}

/* Đảm bảo container của hình ảnh cũng được căn giữa */
#description-content p:has(img),
#description-content div:has(img),
#description-content * p:has(img),
#description-content * div:has(img) {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Xử lý các trường hợp hình ảnh nằm trong các thẻ khác */
#description-content figure,
#description-content * figure {
    text-align: center !important;
    margin: 15px auto !important;
    max-width: 100% !important;
}

#description-content figure img,
#description-content * figure img {
    margin: 0 auto !important;
    display: block !important;
}

/* Xử lý các thẻ HTML phổ biến */
#description-content p,
#description-content * p {
    margin-bottom: 15px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

#description-content h1,
#description-content h2,
#description-content h3,
#description-content h4,
#description-content h5,
#description-content h6,
#description-content * h1,
#description-content * h2,
#description-content * h3,
#description-content * h4,
#description-content * h5,
#description-content * h6 {
    margin-top: 20px !important;
    margin-bottom: 15px !important;
    color: #333 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

#description-content ul,
#description-content ol,
#description-content * ul,
#description-content * ol {
    margin-bottom: 15px !important;
    padding-left: 20px !important;
    max-width: 100% !important;
}

#description-content li,
#description-content * li {
    margin-bottom: 5px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

/* Xử lý bảng */
#description-content table,
#description-content * table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px 0 !important;
    border-collapse: collapse !important;
    overflow-x: auto !important;
    display: block !important;
    white-space: nowrap !important;
}

#description-content table th,
#description-content table td,
#description-content * table th,
#description-content * table td {
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    text-align: left !important;
    max-width: 200px !important;
    overflow-wrap: break-word !important;
}

#description-content table th,
#description-content * table th {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
}

/* Xử lý video */
#description-content video,
#description-content * video {
    max-width: 100% !important;
    height: auto !important;
    margin: 15px auto !important;
    border-radius: 8px !important;
    display: block !important;
}

/* Xử lý iframe */
#description-content iframe,
#description-content * iframe {
    max-width: 100% !important;
    height: auto !important;
    margin: 15px auto !important;
    border-radius: 8px !important;
    display: block !important;
}

/* Xử lý div và các container khác */
#description-content div,
#description-content * div {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

/* Xử lý span và text */
#description-content span,
#description-content * span {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Xử lý các thẻ có thể gây overflow */
#description-content pre,
#description-content code,
#description-content * pre,
#description-content * code {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
}

/* Xử lý các thẻ có width cố định */
#description-content *[style*="width"],
#description-content *[width] {
    max-width: 100% !important;
    width: auto !important;
}

/* Xử lý các thẻ có height cố định cho hình ảnh */
#description-content img[style*="height"],
#description-content img[height] {
    height: auto !important;
}

/* Xử lý các style inline có thể ảnh hưởng đến căn giữa */
#description-content img[style*="float"],
#description-content img[style*="text-align"],
#description-content img[style*="margin"] {
    float: none !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Xử lý các thẻ có style inline */
#description-content *[style*="text-align: left"],
#description-content *[style*="text-align: right"] {
    text-align: center !important;
}

/* Xử lý các thẻ có float */
#description-content *[style*="float: left"],
#description-content *[style*="float: right"] {
    float: none !important;
    text-align: center !important;
}

/* Đảm bảo tất cả hình ảnh đều được căn giữa bằng flexbox cho container */
#description-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#description-content>* {
    width: 100% !important;
    max-width: 100% !important;
}

/* Xử lý các container có thể chứa nội dung rộng */
#description-content * {
    box-sizing: border-box !important;
}

/* Responsive cho mobile */
@media (max-width: 768px) {

    #description-content img,
    #description-content * img {
        margin: 10px auto !important;
    }

    #description-content table,
    #description-content * table {
        font-size: 14px !important;
    }

    #description-content table th,
    #description-content table td,
    #description-content * table th,
    #description-content * table td {
        padding: 6px 8px !important;
        max-width: 150px !important;
    }

    #description-content p,
    #description-content * p {
        font-size: 14px !important;
    }
}

/* Xử lý đặc biệt cho các thẻ có thể copy từ Word hoặc các editor khác */
#description-content *[class*="Mso"],
#description-content *[style*="mso-"] {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

/* Đảm bảo không có element nào vượt quá container */
#description-content * {
    max-width: 100% !important;
}