:root { --primary: #004e9a; --accent: #e74c3c; --bg: #f8f9fa; --text: #333; --white: #fff; }
        
        /* --- BỔ SUNG CSS CHỐNG ZOOM & COPY --- */
        html, body { 
             /* Chống bôi đen text */
            -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
             /* Chặn zoom bằng cử chỉ chạm */
            touch-action: pan-x pan-y;
             /* Chặn hiệu ứng kéo nảy ngang nhưng cho phép dọc (Pull-to-refresh) */
            overscroll-behavior-x: none;
            overscroll-behavior-y: auto;
        }

        body { font-family: 'Montserrat', sans-serif; background: var(--bg); color: var(--text); margin: 0; }
        p { line-height: 1.6; margin-bottom: 15px; }
        a { text-decoration: none; color: inherit; transition: 0.3s; }
        ul { list-style: none; padding: 0; margin: 0; }

        

        /* HERO SECTION */
        .hero { background: linear-gradient(135deg, #004e9a 0%, #002855 100%); color: white; padding: 120px 20px 100px; text-align: center; border-radius: 0 0 50px 50px; }
        .hero h1 { font-size: 3rem; margin-bottom: 20px; font-weight: 800; line-height: 1.2; }
        .hero p { font-size: 1.1rem; max-width: 700px; margin: 0 auto 40px; opacity: 0.9; font-weight: 500; }

        .intro-section { max-width: 1200px; margin: -60px auto 60px; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        .intro-card { background: white; padding: 40px; border-radius: 25px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); text-align: center; border: 1px solid #eee; transition: 0.3s; }
        .intro-card:hover { transform: translateY(-10px); border-color: var(--primary); }
        .intro-card i { font-size: 3rem; color: var(--primary); margin-bottom: 20px; }
        .intro-card h3 { font-size: 1.3rem; margin-bottom: 10px; color: #333; }
        .intro-card p { font-size: 0.95rem; color: #666; }
        
        /* CONTENT BLOCKS */
        .content-block { max-width: 1100px; margin: 100px auto; padding: 0 20px; display: flex; align-items: center; gap: 60px; }
        .content-text { flex: 1; }
        .content-text h2 { font-size: 2.2rem; color: var(--primary); margin-bottom: 25px; font-weight: 800; position: relative; }
        .content-text h2::after { content: ''; display: block; width: 60px; height: 4px; background: var(--accent); margin-top: 10px; border-radius: 2px; }
        .content-text p { color: #555; font-size: 1.05rem; margin-bottom: 15px; text-align: justify; }
        .content-image { flex: 1; background: #eef4ff; height: 350px; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; color: var(--primary); border: 2px dashed #ccdcf5; padding: 20px; text-align: center; }
        .content-image i { font-size: 4rem; margin-bottom: 15px; color: var(--accent); }

        /* THỐNG KÊ */
        .stats-section { background: white; padding: 60px 20px; text-align: center; margin-top: 80px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
        .stats-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .stat-item h3 { font-size: 2rem; color: var(--primary); margin: 0; font-weight: 800; }
        .stat-item p { color: #666; font-weight: 600; margin-top: 5px; font-size: 0.9rem; text-transform: uppercase; }

        /* CTA & CATEGORIES */
        .cta-box { text-align: center; padding: 80px 20px; margin-top: 40px; }
        .cta-box h2 { font-size: 2rem; color: #333; font-weight: 800; }
        .cat-container { display: flex; justify-content: center; gap: 30px; margin-top: 40px; flex-wrap: wrap; }
        .cat-btn { width: 300px; padding: 50px 20px; border-radius: 25px; color: white; position: relative; overflow: hidden; transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.1); text-align: center; }
        .cat-btn:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
        .cat-btn h3 { font-size: 1.5rem; margin-bottom: 10px; font-weight: 700; }
        .cat-btn p { font-size: 0.9rem; opacity: 0.9; margin: 0; }
        .blue-gradient { background: linear-gradient(135deg, #004e9a, #00c6ff); }
        .red-gradient { background: linear-gradient(135deg, #e74c3c, #f39c12); }

        
        
        /* MEDIA QUERY */
        /* --- MEDIA QUERY CHO IPAD PRO, IPAD MINI & TABLET --- */
        /* Nới rộng mốc ngắt lên 1100px để iPad Pro (1024px) khi không đủ chỗ sẽ tự động chia hàng như iPad Mini */
        @media (max-width: 1100px) {
            .nav-links { gap: 15px; flex-wrap: wrap; justify-content: center; }
        }

        /* --- MEDIA QUERY CHO ĐIỆN THOẠI NHỎ (IPHONE SE, MÀN <= 380px) --- */
        @media (max-width: 380px) {
            .nav-links { gap: 10px; } /* Thu hẹp khoảng cách giữa các nút */
            .nav-links a { font-size: 0.85rem; } /* Giảm nhẹ font chữ để đảm bảo vừa đúng 2 hàng */
        }

        @media (max-width: 768px) {
            .content-block { flex-direction: column; text-align: center; margin: 60px auto; }
            .content-text h2::after { margin: 10px auto; }
            .stats-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
            .hero h1 { font-size: 2.2rem; }
        }