/* =======================================================
       CSS TRANG GIỚI THIỆU (ABOUT US)
       ======================================================= */
    .about-page { padding: 40px 0 80px 0; background-color: #FCFCFC; }
    
    /* 1. Hero Banner */
    .about-hero { 
        background: var(--primary-color, #0b2e59); 
        border-radius: 20px; 
        padding: 50px 60px; 
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        color: #fff;
        margin-bottom: 60px;
        position: relative;
        overflow: hidden;
    }
    /* Giả lập cái hình tòa nhà mờ mờ bên phải của Banner */
    .about-hero::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; width: 50%;
        /* Bro có thể thay URL ảnh tòa nhà thật vào đây */
        background: linear-gradient(to right, var(--primary-color) 0%, transparent 100%), url('<?php echo get_template_directory_uri(); ?>/assets/images/about-banner-bg.png') center right/cover no-repeat;
        opacity: 0.8;
        border-radius: 0 20px 20px 0;
    }
    .about-hero-content { position: relative; z-index: 2; }
    .about-hero-title { font-size: 36px; font-weight: 700; margin-bottom: 15px; color: #fff;}
    .about-breadcrumb { font-size: 14px; opacity: 0.9; }
    .about-breadcrumb a { color: #fff; text-decoration: none; transition: 0.2s; }
    .about-breadcrumb a:hover { text-decoration: underline; opacity: 1; }
    .about-breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

    /* 2. Khối Giới Thiệu Chung (Trái chữ - Phải ảnh) */
    .about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 60px; }
    .about-intro-title { font-size: 28px; color: var(--primary-color); font-weight: 700; margin-bottom: 20px; line-height: 1.4; }
    .about-intro-text { font-size: 15px; color: #555; line-height: 1.8; }
    .about-intro-img { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
    .about-intro-img img { width: 100%; height: auto; display: block; object-fit: cover; }

    /* 3. Dải Số Liệu Thống Kê (4 cột) */
    .about-stats { 
        display: grid; 
        grid-template-columns: repeat(4, 1fr); 
        gap: 20px; 
        background: #F8F9FA; 
        padding: 40px; 
        border-radius: 16px; 
        border: 1px solid #EAEAEA;
        margin-bottom: 60px;
    }
    .stat-item { display: flex; align-items: center; gap: 15px; }
    .stat-icon { color: var(--primary-color); flex-shrink: 0; }
    .stat-info { display: flex; flex-direction: column; }
    .stat-num { font-size: 24px; font-weight: 700; color: var(--primary-color); line-height: 1.2; }
    .stat-label { font-size: 13px; color: #666; font-weight: 500; }

    /* 4. Khối Tầm Nhìn & Sứ Mệnh (Trái chữ - Phải ảnh) */
    .about-vision { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .vision-box { margin-bottom: 40px; }
    .vision-box:last-child { margin-bottom: 0; }
    .vision-title { font-size: 20px; color: var(--primary-color); font-weight: 700; margin-bottom: 15px; }
    .vision-text { font-size: 15px; color: #555; line-height: 1.8; }
    .vision-img { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
    .vision-img img { width: 100%; height: auto; display: block; object-fit: cover; }

    /* Responsive Mobile & Tablet */
    @media (max-width: 992px) {
        .about-intro, .about-vision { gap: 40px; }
        .about-stats { grid-template-columns: repeat(2, 1fr); padding: 30px; gap: 30px; }
    }
    @media (max-width: 768px) {
        .about-hero { padding: 40px 30px; text-align: center; justify-content: center; border-radius: 12px; }
        .about-hero::after { display: none; /* Ẩn ảnh nền phụ trên mobile cho đỡ rối */ }
        .about-intro, .about-vision { grid-template-columns: 1fr; gap: 30px; }
        /* Đảo ngược thứ tự trên mobile: Ảnh lên trên, Chữ xuống dưới */
        .about-intro-text-wrap { order: 2; }
        .about-intro-img { order: 1; }
        .about-stats { grid-template-columns: 1fr; gap: 25px; }
    }