/* ARTICLES MOBILE MASTER CSS - THỐNG NHẤT TẤT CẢ */
/* Version: 2.0 - Unified mobile CSS for all article types */

/* ===== RESET & BASE MOBILE STYLES ===== */
@media (max-width: 768px) {
    
    /* Force remove horizontal scroll for all content */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Base container styles - applies to ALL article types */
    .technical-consultation-page,
    .tuvan-page,
    .tuvan-detail,
    .dichvu-page,
    .tuyendung-page,
    .news-page,
    .article-page,
    .content-page {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* ===== UNIFIED HEADER STYLES ===== */
    .page-header,
    .tuvan-header,
    .dichvu-header,
    .services-header,
    .tuyendung-header,
    .news-header {
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
        border-radius: 10px !important;
        text-align: center !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    }
    
    /* Unified header text - FORCE WHITE COLOR */
    .page-header h1,
    .tuvan-header h1,
    .dichvu-header h1,
    .services-header h1,
    .tuyendung-header h1,
    .news-header h1,
    html body .page-header h1,
    html body .tuvan-header h1,
    html body .dichvu-header h1,
    html body .services-header h1,
    html body .tuyendung-header h1,
    html body .news-header h1 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        color: white !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
        font-weight: 700 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    .page-header p,
    .tuvan-header p,
    .dichvu-header p,
    .services-header p,
    .tuyendung-header p,
    .news-header p,
    html body .page-header p,
    html body .tuvan-header p,
    html body .dichvu-header p,
    html body .services-header p,
    html body .tuyendung-header p,
    html body .news-header p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        color: white !important;
        opacity: 0.9 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* ===== UNIFIED GRID LAYOUTS ===== */
    .articles-grid,
    .tuvan-grid,
    .dichvu-grid,
    .services-grid,
    .tuyendung-grid,
    .news-grid,
    .content-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-bottom: 25px !important;
        padding: 0 !important;
    }
    
    /* ===== UNIFIED CARD STYLES ===== */
    .article-card,
    .tuvan-card,
    .dichvu-card,
    .service-card,
    .tuyendung-card,
    .news-card,
    .content-card {
        background: white !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
        border: 1px solid #e2e8f0 !important;
        margin-bottom: 15px !important;
        position: relative !important;
    }
    
    .article-card:hover,
    .tuvan-card:hover,
    .dichvu-card:hover,
    .service-card:hover,
    .tuyendung-card:hover,
    .news-card:hover,
    .content-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
    }
    
    /* ===== UNIFIED IMAGE STYLES ===== */
    .article-image,
    .tuvan-image,
    .dichvu-image,
    .service-image,
    .tuyendung-image,
    .news-image,
    .content-image {
        width: 100% !important;
        height: 180px !important;
        overflow: hidden !important;
        position: relative !important;
        background: #f8fafc !important;
    }
    
    .article-image img,
    .tuvan-image img,
    .dichvu-image img,
    .service-image img,
    .tuyendung-image img,
    .news-image img,
    .content-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transition: transform 0.3s ease !important;
        display: block !important;
    }
    
    /* No image placeholders */
    .tuvan-no-image,
    .dichvu-no-image,
    .service-no-image,
    .tuyendung-no-image,
    .news-no-image,
    .content-no-image {
        width: 100% !important;
        height: 180px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        font-size: 32px !important;
    }
    
    /* ===== UNIFIED CONTENT STYLES ===== */
    .article-content,
    .tuvan-content,
    .dichvu-content,
    .service-content,
    .tuyendung-content,
    .news-content,
    .content-main {
        padding: 15px !important;
    }
    
    .article-title,
    .tuvan-title,
    .dichvu-title,
    .service-title,
    .tuyendung-title,
    .news-title,
    .content-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #2d3748 !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .article-title a,
    .tuvan-title a,
    .dichvu-title a,
    .service-title a,
    .tuyendung-title a,
    .news-title a,
    .content-title a {
        color: inherit !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }
    
    .article-title a:hover,
    .tuvan-title a:hover,
    .dichvu-title a:hover,
    .service-title a:hover,
    .tuyendung-title a:hover,
    .news-title a:hover,
    .content-title a:hover {
        color: #667eea !important;
    }
    
    /* ===== UNIFIED EXCERPT STYLES ===== */
    .article-excerpt,
    .tuvan-excerpt,
    .dichvu-excerpt,
    .service-excerpt,
    .tuyendung-excerpt,
    .news-excerpt,
    .content-excerpt {
        font-size: 13px !important;
        color: #4a5568 !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* ===== UNIFIED META STYLES ===== */
    .article-meta,
    .tuvan-meta,
    .dichvu-meta,
    .service-meta,
    .tuyendung-meta,
    .news-meta,
    .content-meta {
        font-size: 12px !important;
        color: #718096 !important;
        margin-bottom: 10px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
    }
    
    .article-date,
    .article-views,
    .tuvan-date,
    .tuvan-views,
    .dichvu-date,
    .service-date,
    .tuyendung-date,
    .news-date {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        font-size: 12px !important;
        color: #718096 !important;
    }
    
    /* ===== UNIFIED DETAIL PAGE STYLES ===== */
    .article-detail,
    .tuvan-detail,
    .dichvu-detail,
    .service-detail,
    .tuyendung-detail,
    .news-detail,
    .content-detail {
        background: white !important;
        border-radius: 12px !important;
        padding: 20px 15px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
        margin-bottom: 30px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .article-detail-title,
    .tuvan-detail-title,
    .dichvu-detail-title,
    .service-detail-title,
    .tuyendung-detail-title,
    .news-detail-title,
    .content-detail-title {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #2d3748 !important;
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .article-detail-meta,
    .tuvan-detail-meta,
    .dichvu-detail-meta,
    .service-detail-meta,
    .tuyendung-detail-meta,
    .news-detail-meta,
    .content-detail-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
        padding: 12px !important;
        background: #f7fafc !important;
        border-radius: 8px !important;
        border-left: 4px solid #667eea !important;
    }
    
    /* ===== UNIFIED CONTENT AREA STYLES ===== */
    .article-detail-content,
    .tuvan-detail-content,
    .dichvu-detail-content,
    .service-detail-content,
    .tuyendung-detail-content,
    .news-detail-content,
    .content-detail-main {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #2d3748 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .article-detail-content p,
    .tuvan-detail-content p,
    .dichvu-detail-content p,
    .service-detail-content p,
    .tuyendung-detail-content p,
    .news-detail-content p,
    .content-detail-main p {
        margin-bottom: 15px !important;
        text-align: justify !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* ===== UNIFIED HEADING STYLES ===== */
    .article-detail-content h1,
    .article-detail-content h2,
    .article-detail-content h3,
    .article-detail-content h4,
    .tuvan-detail-content h1,
    .tuvan-detail-content h2,
    .tuvan-detail-content h3,
    .tuvan-detail-content h4,
    .dichvu-detail-content h1,
    .dichvu-detail-content h2,
    .dichvu-detail-content h3,
    .dichvu-detail-content h4,
    .service-detail-content h1,
    .service-detail-content h2,
    .service-detail-content h3,
    .service-detail-content h4,
    .tuyendung-detail-content h1,
    .tuyendung-detail-content h2,
    .tuyendung-detail-content h3,
    .tuyendung-detail-content h4,
    .news-detail-content h1,
    .news-detail-content h2,
    .news-detail-content h3,
    .news-detail-content h4,
    .content-detail-main h1,
    .content-detail-main h2,
    .content-detail-main h3,
    .content-detail-main h4 {
        margin: 25px 0 15px 0 !important;
        color: #2d3748 !important;
        font-weight: 600 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .article-detail-content h2,
    .tuvan-detail-content h2,
    .dichvu-detail-content h2,
    .service-detail-content h2,
    .tuyendung-detail-content h2,
    .news-detail-content h2,
    .content-detail-main h2 {
        font-size: 18px !important;
    }
    
    .article-detail-content h3,
    .tuvan-detail-content h3,
    .dichvu-detail-content h3,
    .service-detail-content h3,
    .tuyendung-detail-content h3,
    .news-detail-content h3,
    .content-detail-main h3 {
        font-size: 16px !important;
    }
    
    .article-detail-content h4,
    .tuvan-detail-content h4,
    .dichvu-detail-content h4,
    .service-detail-content h4,
    .tuyendung-detail-content h4,
    .news-detail-content h4,
    .content-detail-main h4 {
        font-size: 15px !important;
    }
    
    /* ===== UNIFIED IMAGE STYLES IN CONTENT ===== */
    .article-detail-content img,
    .tuvan-detail-content img,
    .dichvu-detail-content img,
    .service-detail-content img,
    .tuyendung-detail-content img,
    .news-detail-content img,
    .content-detail-main img,
    .post-content img,
    .article-content img,
    .page-content img,
    html body .article-detail-content img,
    html body .tuvan-detail-content img,
    html body .dichvu-detail-content img,
    html body .service-detail-content img,
    html body .tuyendung-detail-content img,
    html body .news-detail-content img,
    html body .content-detail-main img,
    html body .post-content img,
    html body .article-content img,
    html body .page-content img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        border-radius: 8px !important;
        margin: 15px 0 !important;
        display: block !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        box-sizing: border-box !important;
    }
    
    /* Override any inline image styles */
    .article-detail-content img[style],
    .tuvan-detail-content img[style],
    .dichvu-detail-content img[style],
    .service-detail-content img[style],
    .tuyendung-detail-content img[style],
    .news-detail-content img[style],
    .content-detail-main img[style],
    html body .article-detail-content img[style],
    html body .tuvan-detail-content img[style],
    html body .dichvu-detail-content img[style],
    html body .service-detail-content img[style],
    html body .tuyendung-detail-content img[style],
    html body .news-detail-content img[style],
    html body .content-detail-main img[style] {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* ===== UNIFIED TABLE STYLES (NO HORIZONTAL SCROLL) ===== */
    .article-detail-content table,
    .tuvan-detail-content table,
    .dichvu-detail-content table,
    .service-detail-content table,
    .tuyendung-detail-content table,
    .news-detail-content table,
    .content-detail-main table,
    .post-content table,
    .article-content table,
    .page-content table,
    html body .post-content table,
    html body .article-content table,
    html body .page-content table {
        font-size: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        display: table !important;
        overflow-x: visible !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    
    .article-detail-content table th,
    .article-detail-content table td,
    .tuvan-detail-content table th,
    .tuvan-detail-content table td,
    .dichvu-detail-content table th,
    .dichvu-detail-content table td,
    .service-detail-content table th,
    .service-detail-content table td,
    .tuyendung-detail-content table th,
    .tuyendung-detail-content table td,
    .news-detail-content table th,
    .news-detail-content table td,
    .content-detail-main table th,
    .content-detail-main table td,
    .post-content table th,
    .post-content table td,
    .article-content table th,
    .article-content table td,
    .page-content table th,
    .page-content table td {
        padding: 6px 8px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
    }
    
    /* ===== UNIFIED LIST STYLES ===== */
    .article-detail-content ul,
    .article-detail-content ol,
    .tuvan-detail-content ul,
    .tuvan-detail-content ol,
    .dichvu-detail-content ul,
    .dichvu-detail-content ol,
    .service-detail-content ul,
    .service-detail-content ol,
    .tuyendung-detail-content ul,
    .tuyendung-detail-content ol,
    .news-detail-content ul,
    .news-detail-content ol,
    .content-detail-main ul,
    .content-detail-main ol {
        padding-left: 20px !important;
        margin: 15px 0 !important;
    }
    
    .article-detail-content li,
    .tuvan-detail-content li,
    .dichvu-detail-content li,
    .service-detail-content li,
    .tuyendung-detail-content li,
    .news-detail-content li,
    .content-detail-main li {
        margin-bottom: 8px !important;
        line-height: 1.5 !important;
    }
    
    /* ===== UNIFIED VIDEO/IFRAME STYLES ===== */
    .article-detail-content iframe,
    .article-detail-content video,
    .article-detail-content embed,
    .article-detail-content object,
    .tuvan-detail-content iframe,
    .tuvan-detail-content video,
    .tuvan-detail-content embed,
    .tuvan-detail-content object,
    .dichvu-detail-content iframe,
    .dichvu-detail-content video,
    .service-detail-content iframe,
    .service-detail-content video,
    .tuyendung-detail-content iframe,
    .tuyendung-detail-content video,
    .news-detail-content iframe,
    .news-detail-content video,
    .content-detail-main iframe,
    .content-detail-main video {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
        border-radius: 8px !important;
        margin: 15px 0 !important;
    }
    
    /* ===== UNIFIED PAGINATION STYLES ===== */
    .pagination,
    .tuvan-pagination,
    .dichvu-pagination,
    .service-pagination,
    .tuyendung-pagination,
    .news-pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 30px 0 !important;
        padding: 20px 0 !important;
        flex-wrap: wrap !important;
    }
    
    .pagination a,
    .pagination span,
    .tuvan-pagination a,
    .tuvan-pagination span,
    .dichvu-pagination a,
    .dichvu-pagination span,
    .service-pagination a,
    .service-pagination span,
    .tuyendung-pagination a,
    .tuyendung-pagination span,
    .news-pagination a,
    .news-pagination span {
        padding: 8px 12px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        background: white !important;
        color: #4a5568 !important;
        text-decoration: none !important;
        font-size: 13px !important;
        transition: all 0.3s ease !important;
        min-width: 35px !important;
        text-align: center !important;
    }
    
    .pagination a:hover,
    .tuvan-pagination a:hover,
    .dichvu-pagination a:hover,
    .service-pagination a:hover,
    .tuyendung-pagination a:hover,
    .news-pagination a:hover {
        background: #667eea !important;
        color: white !important;
        border-color: #667eea !important;
    }
    
    .pagination .current,
    .tuvan-pagination .current,
    .dichvu-pagination .current,
    .service-pagination .current,
    .tuyendung-pagination .current,
    .news-pagination .current {
        background: #667eea !important;
        color: white !important;
        border-color: #667eea !important;
    }
    
    /* ===== UNIFIED BACK BUTTON STYLES ===== */
    .back-to-list,
    .tuvan-back,
    .dichvu-back,
    .service-back,
    .tuyendung-back,
    .news-back {
        margin-bottom: 20px !important;
    }
    
    .back-btn,
    .tuvan-back-btn,
    .dichvu-back-btn,
    .service-back-btn,
    .tuyendung-back-btn,
    .news-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 15px !important;
        background: #f7fafc !important;
        color: #4a5568 !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        transition: all 0.3s ease !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }
    
    .back-btn:hover,
    .tuvan-back-btn:hover,
    .dichvu-back-btn:hover,
    .service-back-btn:hover,
    .tuyendung-back-btn:hover,
    .news-back-btn:hover {
        background: #667eea !important;
        color: white !important;
        border-color: #667eea !important;
        transform: translateY(-1px) !important;
    }
}

/* ===== EXTRA SMALL MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    
    .technical-consultation-page,
    .tuvan-page,
    .tuvan-detail,
    .dichvu-page,
    .tuyendung-page,
    .news-page,
    .article-page,
    .content-page {
        padding: 8px !important;
    }
    
    .page-header,
    .tuvan-header,
    .dichvu-header,
    .services-header,
    .tuyendung-header,
    .news-header {
        padding: 15px 10px !important;
        margin-bottom: 15px !important;
    }
    
    .page-header h1,
    .tuvan-header h1,
    .dichvu-header h1,
    .services-header h1,
    .tuyendung-header h1,
    .news-header h1 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    .page-header p,
    .tuvan-header p,
    .dichvu-header p,
    .services-header p,
    .tuyendung-header p,
    .news-header p {
        font-size: 13px !important;
    }
    
    .article-image,
    .tuvan-image,
    .dichvu-image,
    .service-image,
    .tuyendung-image,
    .news-image,
    .content-image {
        height: 160px !important;
    }
    
    .article-content,
    .tuvan-content,
    .dichvu-content,
    .service-content,
    .tuyendung-content,
    .news-content,
    .content-main {
        padding: 12px !important;
    }
    
    .article-title,
    .tuvan-title,
    .dichvu-title,
    .service-title,
    .tuyendung-title,
    .news-title,
    .content-title {
        font-size: 15px !important;
    }
    
    .article-detail,
    .tuvan-detail,
    .dichvu-detail,
    .service-detail,
    .tuyendung-detail,
    .news-detail,
    .content-detail {
        padding: 15px 12px !important;
    }
    
    .article-detail-title,
    .tuvan-detail-title,
    .dichvu-detail-title,
    .service-detail-title,
    .tuyendung-detail-title,
    .news-detail-title,
    .content-detail-title {
        font-size: 18px !important;
    }
    
    .article-detail-content,
    .tuvan-detail-content,
    .dichvu-detail-content,
    .service-detail-content,
    .tuyendung-detail-content,
    .news-detail-content,
    .content-detail-main {
        font-size: 13px !important;
    }
}

/* ===== FORCE OVERRIDE EXISTING STYLES ===== */
html body .technical-consultation-page,
html body .tuvan-page,
html body .dichvu-page,
html body .tuyendung-page,
html body .news-page,
html body .article-page {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Force white text for all headers */
html body .page-header h1,
html body .page-header p,
html body .tuvan-header h1,
html body .tuvan-header p,
html body .dichvu-header h1,
html body .dichvu-header p,
html body .services-header h1,
html body .services-header p,
html body .tuyendung-header h1,
html body .tuyendung-header p,
html body .news-header h1,
html body .news-header p {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Force prevent horizontal scroll */
@media (max-width: 768px) {
    .technical-consultation-page *,
    .tuvan-page *,
    .tuvan-detail *,
    .dichvu-page *,
    .tuyendung-page *,
    .news-page *,
    .article-page *,
    .content-page * {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}