﻿	<style>
     /* ==========================================================================
   1. ĐỊNH DẠNG FONT CHỮ & KHUNG CHỮA CHÍNH (Layout Nhật Minh)
   ========================================================================== */
.content-page.rte {
    font-family: 'Roboto', Arial, Helvetica, sans-serif; /* Font chuẩn công nghệ hiện đại */
    font-size: 15px;                                      /* Kích thước chữ trang giới thiệu to hơn điều khoản 1 chút */
    line-height: 1.7;                                      /* Khoảng cách dòng thoáng */
    color: #444444;                                        /* Màu chữ xám tối trung tính lịch sự */
    max-width: 1200px;                                     /* Giới hạn độ rộng trang */
    margin: 0 auto;                                        /* Căn giữa trang */
    padding: 20px;
}

/* Clearfix dọn dẹp thuộc tính float */
.content-page.rte::after {
    content: "";
    clear: both;
    display: table;
}

/* Các đoạn văn mô tả */
.content-page.rte p {
    margin-bottom: 15px;
    text-align: justify; /* Căn đều hai bên giống các trang tin chuyên nghiệp */
}

/* ==========================================================================
   2. TIÊU ĐỀ LỚN & ĐIỂM NHẤN (Heading Styles)
   ========================================================================== */
.content-page.rte h1, 
.content-page.rte h2, 
.content-page.rte h3 {
    color: #222222;
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 12px;
    text-transform: uppercase; /* Viết hoa tiêu đề để tăng sự trang trọng */
    letter-spacing: 0.5px;
}

.content-page.rte h1 { font-size: 26px; border-bottom: 2px solid #e1e1e1; padding-bottom: 8px; }
.content-page.rte h2 { font-size: 20px; color: #333; }
.content-page.rte h3 { font-size: 16px; }

/* Khối nội dung nổi bật (Ví dụ: Cam kết, Tầm nhìn, Sứ mệnh) */
.content-page.rte .highlight-box {
    background-color: #f9f9f9;     /* Nền xám nhạt */
    border-left: 4px solid #d9121f; /* Tạo vạch màu đỏ tạo điểm nhấn (hoặc đổi thành màu xanh thương hiệu của bạn) */
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   3. TÍNH NĂNG ẢNH BÊN PHẢI - CHỮ BAO QUANH TRÁI
   ========================================================================== */
.content-page.rte img {
    float: right;          /* Đẩy ảnh sang phải */
    width: 45%;            /* Chiếm khoảng 45% (Nhật Minh thường để dưới 50% để chữ rộng rãi) */
    height: auto;
    margin-left: 25px;     /* Khoảng cách rộng ra tạo khoảng thở cho mắt */
    margin-bottom: 20px;
    border-radius: 6px;    /* Bo góc nhẹ cho hình ảnh đẹp mắt */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Tạo bóng đổ mờ cho ảnh nổi bật lên trên nền trắng */
}

/* ==========================================================================
   4. RESPONSIVE - TỰ ĐỘNG CÂN CHỈNH TRÊN ĐIỆN THOẠI
   ========================================================================== */
@media (max-width: 767px) {
    .content-page.rte {
        font-size: 14px;
        padding: 15px;
    }
    
    .content-page.rte h1 { font-size: 22px; }
    .content-page.rte h2 { font-size: 18px; }

    .content-page.rte img {
        float: none;       /* Hủy bao quanh chữ khi xem trên mobile */
        width: 100%;       /* Ảnh bung full màn hình điện thoại */
        margin-left: 0;    /* Xóa thụt lề */
        margin-bottom: 15px;
    }
}
	</style>	
    <style>

        /* ==========================================================================
   1. CẤU HÌNH FONT CHỮ & BỐ CỤC CHUNG (Giống Tin Học Ngôi Sao)
   ========================================================================== */
.content-page.rte {
    font-family: Arial, Helvetica, sans-serif; /* Hệ font không chân hiện đại, dễ đọc */
    font-size: 14px;                           /* Kích thước chữ cơ bản */
    line-height: 1.6;                          /* Khoảng cách dòng thoáng, dễ nhìn */
    color: #333333;                            /* Màu chữ xám đen giảm mỏi mắt */
}

/* Đảm bảo khung cha không bị co rúm layout khi các phần tử con dùng float */
.content-page.rte::after {
    content: "";
    clear: both;
    display: table;
}

/* Định dạng các đoạn văn bản */
.content-page.rte p {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.6;
}

/* Định dạng các tiêu đề lớn (Heading) */
.content-page.rte h1, .content-page.rte h2, .content-page.rte h3, .content-page.rte h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.4;
}
.content-page.rte h1 { font-size: 24px; }
.content-page.rte h2 { font-size: 20px; }
.content-page.rte h3 { font-size: 16px; }
.content-page.rte h4 { font-size: 14px; }

/* Định dạng danh sách nếu có */
.content-page.rte ul, .content-page.rte ol {
    padding-left: 20px;
    margin-bottom: 15px;
}
.content-page.rte li {
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.6;
}

/* ==========================================================================
   2. TÍNH NĂNG ĐẨY HÌNH ẢNH SANG PHẢI, CHỮ BAO QUANH BÊN TRÁI
   ========================================================================== */
/* Cấu hình mặc định áp dụng cho Desktop (Máy tính) và Tablet (Máy tính bảng) */
.content-page.rte img {
    float: right;          /* Đẩy tất cả hình ảnh trong bài viết sang bên phải */
    width: 50%;            /* Chiếm đúng 50% chiều ngang vùng chứa */
    height: auto;          /* Giữ nguyên tỷ lệ, chống méo hình */
    margin-left: 20px;     /* Khoảng cách đệm bên trái để chữ không dính vào ảnh */
    margin-bottom: 15px;   /* Khoảng cách đệm bên dưới ảnh với các dòng tiếp theo */
}

/* ==========================================================================
   3. TỰ ĐỘNG TỐI ƯU TRÊN ĐIỆN THOẠI (MOBILE < 768px)
   ========================================================================== */
@media (max-width: 767px) {
    .content-page.rte img {
        float: none;       /* Hủy tính năng bao quanh chữ (vì màn hình dọc rất hẹp) */
        width: 100%;       /* Cho hình ảnh phóng to 100% full bề ngang điện thoại */
        margin-left: 0;    /* Xóa bỏ khoảng thụt lề trái */
        margin-bottom: 10px; /* Giữ khoảng cách nhẹ bên dưới với chữ */
    }
}

/* ==========================================================================
   2. TÍNH NĂNG ĐẨY HÌNH ẢNH SANG PHẢI (CHỈ ÁP DỤNG CHO ẢNH CHÍNH)
   ========================================================================== */
/* Cấu hình cho Desktop & Tablet */
.content-page.rte img.img-main-content {
    float: right;          /* Chỉ đẩy ảnh chính sang phải */
    width: 45%;            /* Chỉ ảnh chính chiếm 45% */
    height: auto;
    margin-left: 25px;     
    margin-bottom: 20px;
    border-radius: 6px;    
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
    display: block;        /* Đảm bảo render chuẩn khối */
}

/* Các hình ảnh icon hệ thống hoặc ảnh khác (ví dụ ảnh crossed-out của bạn) giữ nguyên kích thước gốc */
.content-page.rte img.crossed-out {
    float: none !important;
    width: auto !important;
    box-shadow: none !important;
}

/* ==========================================================================
   3. RESPONSIVE TRÊN ĐIỆN THOẠI
   ========================================================================== */
@media (max-width: 767px) {
    .content-page.rte img.img-main-content {
        float: none;       /* Hủy bao quanh */
        width: 100%;       /* Bung full trên mobile */
        margin-left: 0;    
        margin-bottom: 15px;
    }
}
    </style>