/* 
TERMS PAGE - MOBILE FONT SIZE OPTIMIZATION
Tối ưu font size cho mobile trên trang Điều Khoản
Giữ nguyên tất cả hiệu ứng và chỉ điều chỉnh font size
*/

/* ===== MOBILE FONT OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Header title optimization with controlled line breaks */
    .header h1 {
        font-size: 1.8rem !important; /* Giảm từ 2rem */
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        text-align: center !important;
        word-wrap: break-word !important;
    }
    
    /* Better line break control for header title on mobile */
    .header h1 br {
        display: inline !important; /* Keep existing breaks */
    }
    
    /* Alternative: If you want to control breaks manually */
    .header h1 .mobile-break {
        display: block !important;
    }
    
    /* Option: Auto break for very small screens */
    .header h1 {
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
    }
    
    .header p {
        font-size: 0.95rem !important; /* Giảm từ 1.1rem */
        line-height: 1.4 !important;
    }
    
    /* Tab buttons optimization */
    .tab {
        font-size: 0.85rem !important; /* Giảm font cho tab */
        padding: 12px 8px !important; /* Điều chỉnh padding */
    }
    
    .tab i {
        font-size: 1.3rem !important; /* Giảm từ 1.5rem */
        margin-bottom: 8px !important;
    }
    
    /* Main content optimization */
    .section h2 {
        font-size: 1.3rem !important; /* Giảm từ 1.5rem */
        margin-bottom: 12px !important;
    }
    
    .section h3 {
        font-size: 1.1rem !important; /* Giảm từ 1.2rem */
        margin: 15px 0 8px !important;
    }
    
    .section p {
        font-size: 0.9rem !important; /* Giảm font cho paragraph */
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    
    .section ul li {
        font-size: 0.9rem !important; /* Giảm font cho list items */
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }
    
    /* Highlight box optimization */
    .highlight-box h2 {
        font-size: 1.25rem !important; /* Giảm từ 1.5rem */
        margin-bottom: 8px !important;
    }
    
    .highlight-box p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    /* Card button optimization */
    .btn-card .card-title {
        font-size: 1.15rem !important; /* Giảm từ 1.3rem */
        margin-bottom: 6px !important;
    }
    
    .btn-card .card-desc {
        font-size: 0.85rem !important; /* Giảm từ 0.95rem */
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    .btn-card .card-cta {
        font-size: 0.9rem !important; /* Giảm từ 1rem */
    }
    
    /* Booking note optimization */
    .booking-note p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .booking-note strong {
        font-size: 0.9rem !important;
    }
    
    /* Benefits section optimization */
    .benefit-title {
        font-size: 1.05rem !important; /* Giảm từ 1.2rem */
        margin-bottom: 8px !important;
    }
    
    .benefit-desc {
        font-size: 0.8rem !important; /* Giảm từ 0.9rem */
        line-height: 1.4 !important;
    }
    
    .benefit-icon {
        font-size: 2.2rem !important; /* Giảm từ 2.5rem */
        margin-bottom: 12px !important;
    }
    
    /* Navigation breadcrumb optimization */
    .breadcrumb {
        font-size: 0.8rem !important; /* Giảm từ 14px (0.875rem) */
    }
    
    .breadcrumb a,
    .breadcrumb-current {
        font-size: 0.8rem !important;
    }
    
    /* Back home link optimization */
    .back-home a {
        font-size: 0.9rem !important;
    }
}

/* ===== EXTRA SMALL MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    /* Further optimization for very small screens */
    .header h1 {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
    }
    
    /* Option: Even shorter title for very small screens */
    .header h1 {
        /* You can use this to replace the title completely on very small screens */
        /* font-size: 1.5rem !important; */
    }
    
    /* Alternative short title - can be toggled with JavaScript */
    .header h1 .mobile-short {
        display: none !important;
    }
    
    .header h1 .mobile-short.active {
        display: block !important;
    }
    
    .header h1 .desktop-title {
        display: none !important;
    }
    
    .header p {
        font-size: 0.9rem !important;
    }
    
    .tab {
        font-size: 0.8rem !important;
        padding: 10px 6px !important;
        min-width: 100px !important;
    }
    
    .tab i {
        font-size: 1.2rem !important;
        margin-bottom: 6px !important;
    }
    
    .section h2 {
        font-size: 1.2rem !important;
    }
    
    .section h3 {
        font-size: 1.05rem !important;
    }
    
    .section p,
    .section ul li {
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
    }
    
    .main-card {
        padding: 15px !important; /* Giảm padding để tiết kiệm không gian */
    }
    
    .btn-card {
        padding: 20px !important; /* Giảm padding cho card */
    }
    
    .btn-card .card-title {
        font-size: 1.1rem !important;
    }
    
    .btn-card .card-desc {
        font-size: 0.8rem !important;
    }
    
    .btn-card .card-cta {
        font-size: 0.85rem !important;
    }
    
    .benefit-icon {
        font-size: 2rem !important;
    }
    
    .benefit-title {
        font-size: 1rem !important;
    }
    
    .benefit-desc {
        font-size: 0.75rem !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Ensure text remains readable with better line spacing */
    body {
        line-height: 1.6 !important;
    }
    
    /* Improve touch targets */
    .tab {
        min-height: 60px !important;
        touch-action: manipulation !important;
    }
    
    .btn-card {
        min-height: 80px !important;
        touch-action: manipulation !important;
    }
    
    /* Better contrast for small text */
    .section p,
    .section ul li {
        color: #333 !important;
    }
    
    /* Ensure important text stands out */
    .booking-note {
        border-left-width: 3px !important;
    }
    
    .booking-note strong {
        font-weight: 700 !important;
    }
}

/* ===== TABLET ADJUSTMENTS (769px - 1024px) ===== */
@media (max-width: 1024px) and (min-width: 769px) {
    .header h1 {
        font-size: 2.2rem !important;
    }
    
    .section h2 {
        font-size: 1.4rem !important;
    }
    
    .section p,
    .section ul li {
        font-size: 0.95rem !important;
    }
    
    .tab {
        font-size: 0.9rem !important;
        padding: 13px 10px !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile for better performance */
    .tab,
    .btn-card,
    .benefit-card {
        transition: transform 0.2s ease !important;
    }
    
    /* Optimize text rendering */
    .section p,
    .section ul li,
    .header p {
        text-rendering: optimizeSpeed !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* ===== MAINTAIN VISUAL HIERARCHY ===== */
@media (max-width: 768px) {
    /* Ensure headings still maintain proper hierarchy */
    .header h1 {
        font-weight: 700 !important;
    }
    
    .section h2 {
        font-weight: 600 !important;
        border-bottom: 2px solid #f8bbd0 !important;
        padding-bottom: 8px !important;
    }
    
    .section h3 {
        font-weight: 600 !important;
        color: #ad1457 !important;
    }
    
    /* Maintain brand consistency */
    .highlight-box h2 {
        font-weight: 600 !important;
        color: white !important;
    }
    
    /* Keep CTA elements prominent */
    .btn-card .card-title {
        font-weight: 600 !important;
        color: #e91e63 !important;
    }
    
    .btn-card .card-cta {
        font-weight: 600 !important;
        color: #e91e63 !important;
    }
}