/*
 * Kiểu cho nội dung soạn thảo (Rich Text Editor).
 * - Nạp trong trình soạn thảo backoffice (gắn vào kiểu dữ liệu Rich Text Editor, xem Migrations/RteStylesheetMigration.cs)
 *   và trên website (Master/AgreementMaster) để ảnh trong trình soạn thảo hiển thị giống ngoài website.
 * - Mỗi quy tắc có chú thích "umb_name:" hiện thành một mục trong menu Formats của trình soạn thảo.
 *   Selector dạng "p.ten-lop" để định dạng gán lớp cho đoạn văn chứa ảnh (dạng ".ten-lop" sẽ bọc thẻ <span>).
 *   Selector có chú thích umb_name không được chứa dấu phẩy.
 * - Có stylesheet thì Umbraco thay danh sách kiểu mặc định (Page header, Normal, Quote...) bằng các quy tắc dưới đây,
 *   nên phải khai báo lại tiêu đề/đoạn văn. Thân quy tắc để trống: dùng kiểu sẵn có của website.
 * - Tên umb_name viết bằng tiếng Anh và là khóa dịch của TinyMCE: trình soạn thảo tiếng Việt hiển thị bản dịch
 *   (tên có sẵn như "Paragraph", "Heading 2" dùng bản dịch của TinyMCE; tên riêng dịch ở
 *   App_Plugins/RichTextEditor/rte-styles.js). Đổi/thêm tên ở đây thì cập nhật bản dịch ở đó.
 */

/**umb_name:Paragraph*/
p {
}

/**umb_name:Heading 2*/
h2 {
}

/**umb_name:Heading 3*/
h3 {
}

/**umb_name:Heading 4*/
h4 {
}

/**umb_name:Blockquote*/
blockquote {
}

/**umb_name:Process image (70% width, shadow)*/
p.anh-quy-trinh {
    text-align: center;
    margin: 1.5rem 0;
}

/**umb_name:Full-width image*/
p.anh-toan-khung {
    text-align: center;
    margin: 1.5rem 0;
}

/**umb_name:Small image, right*/
p.anh-ben-phai {
    margin: 0;
}

/**umb_name:Small image, left*/
p.anh-ben-trai {
    margin: 0;
}

/**umb_name:Image caption*/
p.chu-thich-anh {
    text-align: center;
    font-size: 0.875rem;
    font-style: italic;
    color: #6c757d;
    margin-top: -0.75rem;
}

/* Ảnh bên trong các kiểu trên */
p.anh-quy-trinh img,
p.anh-toan-khung img,
p.anh-ben-phai img,
p.anh-ben-trai img {
    height: auto;
    border-radius: 12px;
}

p.anh-quy-trinh img {
    display: block;
    width: 70%;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

p.anh-toan-khung img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

p.anh-ben-phai img {
    float: right;
    width: 40%;
    margin: 0.25rem 0 1rem 1.5rem;
}

p.anh-ben-trai img {
    float: left;
    width: 40%;
    margin: 0.25rem 1.5rem 1rem 0;
}

@media (max-width: 767.98px) {
    p.anh-quy-trinh img {
        width: 100%;
    }

    p.anh-ben-phai img,
    p.anh-ben-trai img {
        float: none;
        display: block;
        width: 100%;
        margin: 0 0 1rem;
    }
}

/* Bảng trong nội dung soạn thảo (gồm bảng dán từ Word, đã bỏ viền/độ rộng của Word):
   .rte-content trên website, .umb-rte trong trình soạn thảo */
.rte-content table,
.umb-rte table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.rte-content th,
.rte-content td,
.umb-rte th,
.umb-rte td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    vertical-align: top;
}

.rte-content th,
.umb-rte th {
    background-color: #f1f5f9;
}

.rte-content td > p:last-child,
.rte-content th > p:last-child {
    margin-bottom: 0;
}

/* Bảng rộng trên điện thoại: cuộn ngang trong bảng thay vì tràn trang */
@media (max-width: 767.98px) {
    .rte-content table {
        display: block;
        overflow-x: auto;
    }
}