/* ==========================================================================
   CKEDITOR 4 & LONG CHÂU STYLE RICH TEXT CONTENT SYSTEM
   Chuẩn hóa giao diện & Typography bài viết mô tả sản phẩm phong cách Nhà Thuốc Long Châu
   ========================================================================== */

/* 1. CONTAINER BASE TYPOGRAPHY & CHUẨN ĐỌC LONG CHÂU DESKTOP */
.rich-text-content,
.rich-text-body,
.pdp-description-content,
.pdp-detail-section-content,
.product-detail-intro-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.005em !important;
    color: var(--gray-1000, #111827) !important;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 2. ĐOẠN VĂN P & KHOẢNG CÁCH DÒNG (KHẮC PHỤC LỖI DÍNH DÒNG TRONG RESET) */
.rich-text-content p,
.rich-text-body p,
.pdp-description-content p,
.pdp-detail-section-content p,
.product-detail-intro-content p {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.005em !important;
    color: var(--gray-1000, #111827) !important;
}

.rich-text-content p:last-child,
.rich-text-body p:last-child,
.pdp-description-content p:last-child,
.pdp-detail-section-content p:last-child,
.product-detail-intro-content p:last-child {
    margin-bottom: 0 !important;
}

/* Clearfix cho các đoạn văn chứa hình ảnh float */
.rich-text-content p::after,
.rich-text-body p::after,
.pdp-description-content p::after {
    content: "";
    display: table;
    clear: both;
}

/* 3. TIÊU ĐỀ H1 - H6 TRONG NỘI DUNG */
.rich-text-content h1,
.rich-text-body h1,
.pdp-description-content h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
    padding-bottom: 6px;
    border-bottom: 2px solid #e2e8f0;
}

.rich-text-content h2,
.rich-text-body h2,
.pdp-description-content h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    padding-bottom: 6px;

}

.rich-text-content h3,
.rich-text-body h3,
.pdp-description-content h3 {
    font-size: 17.5px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: #1e293b !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

.rich-text-content h4,
.rich-text-body h4,
.pdp-description-content h4 {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
}

.rich-text-content h5,
.rich-text-body h5,
.rich-text-content h6,
.rich-text-body h6 {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
}

/* 4. CHẤM DÒNG DANH SÁCH UL, OL, LI */
.rich-text-content ol,
.rich-text-body ol,
.pdp-description-content ol,
.pdp-rich-perks-content ol,
.pdp-promotion-perks-body ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
    margin: 12px 0 16px 24px !important;
    padding-left: 4px !important;
}

.rich-text-content ul,
.rich-text-body ul,
.pdp-description-content ul,
.pdp-rich-perks-content ul,
.pdp-promotion-perks-body ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
    margin: 12px 0 16px 24px !important;
    padding-left: 4px !important;
}

.rich-text-content ol li,
.rich-text-body ol li,
.pdp-description-content ol li,
.pdp-rich-perks-content ol li,
.pdp-promotion-perks-body ol li,
.rich-text-content ul li,
.rich-text-body ul li,
.pdp-description-content ul li,
.pdp-rich-perks-content ul li,
.pdp-promotion-perks-body ul li {
    display: list-item !important;
    list-style: inherit !important;
    margin-bottom: 8px !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.005em !important;
    color: var(--gray-1000, #111827) !important;
}

/* Thẻ p lồng bên trong li */
.rich-text-content li p,
.rich-text-body li p,
.pdp-description-content li p {
    display: inline !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Ẩn các thẻ rỗng không có nội dung thực */
.rich-text-content li:empty,
.rich-text-body li:empty,
.pdp-description-content li:empty,
.rich-text-content p:empty,
.rich-text-body p:empty,
.pdp-description-content p:empty {
    display: none !important;
}

.rich-text-content ol li::marker,
.rich-text-body ol li::marker,
.pdp-description-content ol li::marker,
.pdp-rich-perks-content ol li::marker,
.pdp-promotion-perks-body ol li::marker,
.rich-text-content ul li::marker,
.rich-text-body ul li::marker,
.pdp-description-content ul li::marker {
    font-weight: 700 !important;
    color: #2563eb !important;
    /* Xanh Long Châu Accent */
}

/* Nested lists */
.rich-text-content ul ul,
.rich-text-content ol ol,
.rich-text-content ul ol,
.rich-text-content ol ul {
    margin: 6px 0 6px 20px !important;
}

/* 5. ĐỊNH DẠNG HÌNH ẢNH & CAPTION (FIGURE, FIGCAPTION) */
.rich-text-content img:not(.reviewer-avatar-img),
.rich-text-body img:not(.reviewer-avatar-img),
.pdp-description-content img:not(.reviewer-avatar-img) {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    margin: 16px auto;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rich-text-content figure,
.rich-text-body figure,
.pdp-description-content figure {
    display: block;
    margin: 20px auto !important;
    max-width: 100% !important;
    text-align: center;
}

.rich-text-content figure img,
.rich-text-body figure img,
.pdp-description-content figure img {
    margin: 0 auto !important;
}

.rich-text-content figcaption,
.rich-text-body figcaption,
.pdp-description-content figcaption {
    display: block;
    font-size: 13.5px !important;
    color: #64748b !important;
    text-align: center !important;
    margin-top: 8px !important;
    font-style: italic !important;
    line-height: 1.45 !important;
}

/* Image Alignments & Floats from CKEditor 4 */
.rich-text-content img.align-left,
.rich-text-content img.left,
.rich-text-content img[style*="float: left"],
.rich-text-content img[style*="float:left"],
.rich-text-content figure.align-left,
.rich-text-content figure.image-style-side {
    float: left !important;
    margin: 6px 20px 16px 0 !important;
    max-width: 50% !important;
}

.rich-text-content img.align-right,
.rich-text-content img.right,
.rich-text-content img[style*="float: right"],
.rich-text-content img[style*="float:right"],
.rich-text-content figure.align-right {
    float: right !important;
    margin: 6px 0 16px 20px !important;
    max-width: 50% !important;
}

.rich-text-content img.align-center,
.rich-text-content figure.align-center,
.rich-text-content figure.image {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    clear: both !important;
}

.rt-image-left {
    float: left !important;
    margin: 6px 20px 16px 0 !important;
}

.rt-image-right {
    float: right !important;
    margin: 6px 0 16px 20px !important;
}

.rt-image-center {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* 6. BẢNG DỮ LIỆU TABLE (TABLE, TH, TD) */
.rich-text-content table,
.rich-text-body table,
.pdp-description-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 20px 0 !important;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.rich-text-content table th,
.rich-text-body table th,
.pdp-description-content table th,
.rich-text-content table td,
.rich-text-body table td,
.pdp-description-content table td {
    padding: 11px 15px !important;
    border: 1px solid #e2e8f0 !important;
    line-height: 1.6 !important;
    font-size: 14.5px !important;
    text-align: left;
}

.rich-text-content table th,
.rich-text-body table th,
.pdp-description-content table th {
    background-color: #f1f5f9 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.rich-text-content table tr:nth-child(even),
.rich-text-body table tr:nth-child(even),
.pdp-description-content table tr:nth-child(even) {
    background-color: #f8fafc;
}

.rt-table-full {
    width: 100% !important;
}

/* 7. BLOCKQUOTE & HIGHLIGHT BOXES */
.rich-text-content blockquote,
.rich-text-body blockquote,
.pdp-description-content blockquote {
    border-left: 4px solid #2563eb !important;
    background-color: #f8fafc !important;
    padding: 14px 20px !important;
    margin: 18px 0 !important;
    border-radius: 0 8px 8px 0;
    color: #334155 !important;
    font-style: italic !important;
    line-height: 1.65 !important;
}

.rich-text-content blockquote p,
.rich-text-body blockquote p {
    margin-bottom: 8px !important;
}

/* 8. CKEDITOR 4 ALIGNMENT CLASSES & INLINE ATTRIBUTES */
.rt-align-left,
[align="left"],
[style*="text-align: left"],
[style*="text-align:left"] {
    text-align: left !important;
}

.rt-align-center,
[align="center"],
[style*="text-align: center"],
[style*="text-align:center"] {
    text-align: center !important;
}

.rt-align-right,
[align="right"],
[style*="text-align: right"],
[style*="text-align:right"] {
    text-align: right !important;
}

.rt-align-justify,
[align="justify"],
[style*="text-align: justify"],
[style*="text-align:justify"] {
    text-align: justify !important;
}

/* 9. INDENTATION CLASSES */
.rt-indent-1 {
    margin-left: 24px !important;
}

.rt-indent-2 {
    margin-left: 48px !important;
}

.rt-indent-3 {
    margin-left: 72px !important;
}

.rt-indent-4 {
    margin-left: 96px !important;
}

.rt-indent-5 {
    margin-left: 120px !important;
}

.rt-indent-6 {
    margin-left: 144px !important;
}

.rt-indent-7 {
    margin-left: 168px !important;
}

.rt-indent-8 {
    margin-left: 192px !important;
}

.rt-indent-9 {
    margin-left: 216px !important;
}

.rt-indent-10 {
    margin-left: 240px !important;
}

/* 10. TEXT COLORS & BACKGROUND HIGHLIGHTS */
.rt-text-red {
    color: #dc2626 !important;
}

.rt-text-blue {
    color: #2563eb !important;
}

.rt-text-gray {
    color: #64748b !important;
}

.rt-text-yellow {
    color: #d97706 !important;
}

.rt-text-light-gray {
    color: #94a3b8 !important;
}

.rt-bg-red {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    padding: 2px 6px;
    border-radius: 4px;
}

.rt-bg-blue {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    padding: 2px 6px;
    border-radius: 4px;
}

.rt-bg-gray {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    padding: 2px 6px;
    border-radius: 4px;
}

.rt-bg-yellow {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    padding: 2px 6px;
    border-radius: 4px;
}

.rt-bg-light-gray {
    background-color: #f8fafc !important;
    color: #475569 !important;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 11. RICH TEXT FONT SIZES & FONTS */
.rt-size-12,
[class*="rt-size-12"] {
    font-size: 12px !important;
}

.rt-size-13,
[class*="rt-size-13"] {
    font-size: 13px !important;
}

.rt-size-small,
.rt-size-14,
[class*="rt-size-14"] {
    font-size: 14px !important;
}

.rt-size-15,
[class*="rt-size-15"] {
    font-size: 15px !important;
}

.rt-size-medium,
.rt-size-16,
[class*="rt-size-16"] {
    font-size: 16px !important;
}

.rt-size-18,
[class*="rt-size-18"] {
    font-size: 18px !important;
}

.rt-size-large,
.rt-size-20,
[class*="rt-size-20"] {
    font-size: 20px !important;
}

.rt-size-22,
[class*="rt-size-22"] {
    font-size: 22px !important;
}

.rt-size-24,
[class*="rt-size-24"] {
    font-size: 24px !important;
}

.rt-size-28,
[class*="rt-size-28"] {
    font-size: 28px !important;
}

.rt-size-32,
[class*="rt-size-32"] {
    font-size: 32px !important;
}

.rt-size-36,
[class*="rt-size-36"] {
    font-size: 36px !important;
}

.rt-font-arial {
    font-family: Arial, Helvetica, sans-serif !important;
}

.rt-font-georgia {
    font-family: Georgia, serif !important;
}

.rt-font-tahoma {
    font-family: Tahoma, Geneva, sans-serif !important;
}

.rt-font-times {
    font-family: "Times New Roman", Times, serif !important;
}

/* 12. EMBEDDED MEDIA / VIDEO CONTAINER */
.rich-text-content iframe,
.rich-text-body iframe,
.pdp-description-content iframe,
.rich-text-content embed,
.rich-text-body embed,
.ck-media-embed,
.rt-video-container {
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    border: none;
    margin: 20px 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* 13. HORIZONTAL RULE (HR) */
.rich-text-content hr,
.rich-text-body hr,
.pdp-description-content hr {
    border: none !important;
    border-top: 1px solid #e2e8f0 !important;
    margin: 24px 0 !important;
}

/* 14. RESPONSIVE MOBILE ADJUSTMENTS */
@media (max-width: 640px) {

    .rich-text-content,
    .rich-text-body,
    .pdp-description-content,
    .pdp-detail-section-content,
    .product-detail-intro-content {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
    }

    .rich-text-content p,
    .rich-text-body p,
    .pdp-description-content p {
        font-size: 14.5px !important;
        margin-bottom: 12px !important;
    }

    .rich-text-content h2,
    .rich-text-body h2 {
        font-size: 18px !important;
        margin-top: 20px !important;
    }

    .rich-text-content h3,
    .rich-text-body h3 {
        font-size: 16.5px !important;
        margin-top: 16px !important;
    }

    .rich-text-content h4,
    .rich-text-body h4 {
        font-size: 15px !important;
    }

    .rich-text-content img.align-left,
    .rich-text-content img.left,
    .rich-text-content img[style*="float: left"],
    .rich-text-content img.align-right,
    .rich-text-content img.right,
    .rich-text-content img[style*="float: right"] {
        float: none !important;
        max-width: 100% !important;
        margin: 14px auto !important;
    }

    [class*="rt-indent-"] {
        margin-left: 14px !important;
    }
}

/* ==========================================================================
   LONG CHÂU STYLE NOTICE / WARNING BOX (HỘP LƯU Ý NỀN VÀNG KEM)
   ========================================================================== */
.rt-notice-box,
.rt-warning-box,
.pdp-notice-box,
blockquote.rt-warning,
div.rt-notice-box,
.rich-text-content .notice-box,
.rich-text-content .warning-box {
    background-color: #fffbeb !important;
    /* Vàng kem dịu mắt chuẩn Long Châu */
    border: 1px solid #fde68a !important;
    /* Viền vàng ấm nhẹ */
    border-radius: 12px !important;
    padding: 20px 24px !important;
    margin: 20px 0 !important;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.05) !important;
    color: #1e293b !important;
}

.rt-notice-box-title,
.rt-warning-box-title,
.rt-notice-box h2,
.rt-notice-box h3,
.rt-warning-box h2,
.rt-warning-box h3,
.rich-text-content .notice-box-title,
.rich-text-content .warning-box-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #d97706 !important;
    /* Màu cam vàng nổi bật */
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.rt-notice-box-title::before,
.rt-warning-box-title::before,
.rt-notice-box h2::before,
.rt-notice-box h3::before,
.rt-warning-box h2::before,
.rt-warning-box h3::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d97706'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.rt-notice-box p,
.rt-warning-box p,
.pdp-notice-box p,
.rich-text-content .notice-box p,
.rich-text-content .warning-box p {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
}

.rt-notice-box ul,
.rt-warning-box ul,
.pdp-notice-box ul,
.rich-text-content .notice-box ul,
.rich-text-content .warning-box ul {
    margin: 10px 0 14px 20px !important;
}

.rt-notice-box li,
.rt-warning-box li,
.pdp-notice-box li,
.rich-text-content .notice-box li,
.rich-text-content .warning-box li {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
}

.rt-notice-box li::marker,
.rt-warning-box li::marker,
.pdp-notice-box li::marker {
    color: #d97706 !important;
    /* Dấu chấm tròn màu cam vàng */
}