/**
 * Mobile Responsive Master CSS - DongVon
 * Load cuối cùng để override, cover toàn bộ trang
 * Breakpoints: 768px (tablet), 480px (phone), 380px (small phone)
 */

/* ===================================================
   VIEWPORT META + BASE
   =================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* ===================================================
   WORDPRESS CONTENT CONTAINMENT (toàn cục)
   Fix ảnh/iframe/table có width cứng trong editor
   =================================================== */

/* Tất cả ảnh trong WordPress content — override inline width */
.entry-content img,
.post-content img,
.wp-post-image,
.dv-article-body img,
article img,
.blog-item-text img,
.single-desc img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

/* Iframe/video embed responsive */
.entry-content iframe,
.post-content iframe,
.dv-article-body iframe,
article iframe,
.blog-item-text iframe {
    max-width: 100% !important;
    width: 100% !important;
}

/* Tables responsive scroll */
.entry-content table,
.post-content table,
.dv-article-body table,
article table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* WordPress blocks */
.wp-block-image,
.wp-block-image img,
.wp-block-image figure {
    max-width: 100% !important;
    width: auto !important;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal scroll globally */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* ===================================================
   TABLET (768px - 1024px)
   =================================================== */
@media (max-width: 1024px) {
    .container { width: 95%; }
}

/* ===================================================
   MOBILE (max 768px)
   =================================================== */
@media (max-width: 768px) {

    /* TYPOGRAPHY */
    body { font-size: 15px; }
    h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.3 !important; }
    h2 { font-size: clamp(1.25rem, 5vw, 1.7rem) !important; line-height: 1.35 !important; }
    h3 { font-size: clamp(1.05rem, 4vw, 1.35rem) !important; }
    h4 { font-size: clamp(1rem, 3.5vw, 1.15rem) !important; }

    /* CONTAINER */
    .container { padding: 0 16px !important; width: 100% !important; max-width: 100% !important; }

    /* SECTIONS */
    section, .section, [class*="-section"], [class*="section-"] {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* HERO SECTION - buttons stack vertically */
    .hero-btns, .hero-buttons, .hero-cta-group, .btn-group,
    [class*="hero"] .d-flex, [class*="hero"] .flex {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    [class*="hero"] a.btn,
    [class*="hero"] a[class*="btn"],
    [class*="hero"] .btn-gold,
    [class*="hero"] .btn-outline,
    [class*="hero"] .btn-hero-primary,
    [class*="hero"] .btn-hero-outline {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }

    /* GRIDS - 1 cột hoặc 2 cột */
    .row { flex-direction: column !important; }
    [class*="col-md-"], [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* SERVICES GRID */
    .services-grid, .dv-services-grid, [class*="services"] .grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    /* METRICS / STATS */
    [class*="metrics"] .grid, [class*="stats"] .grid,
    [class*="counter"] .grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    /* TESTIMONIALS */
    .testimonials-grid, [class*="testimonial"] .grid {
        grid-template-columns: 1fr !important;
    }

    /* BLOG */
    .dv-blog-grid { grid-template-columns: 1fr !important; }
    .dv-post-card.featured { flex-direction: column !important; }
    .dv-post-card.featured .dv-post-thumb { min-height: 200px !important; flex: none !important; }
    .dv-single-layout { grid-template-columns: 1fr !important; }
    .dv-related-grid { grid-template-columns: 1fr 1fr !important; }

    /* SIDEBAR: hide on mobile blog (move below) */
    .dv-blog-sidebar { display: none; }

    /* FORMS */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    textarea, select {
        width: 100% !important;
        font-size: 16px !important; /* iOS: prevent auto-zoom */
        min-height: 44px !important;
        box-sizing: border-box !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
        background: #ffffff !important;
        color: #1e293b !important;
        transition: all 0.25s ease-in-out !important;
    }
    input[type="text"]:focus,
    input[type="tel"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    textarea:focus, select:focus {
        border-color: #d4af37 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2) !important;
    }
    textarea { min-height: 100px !important; }
    label { display: block; margin-bottom: 6px; font-weight: 500; color: #334155; }
    .form-group, [class*="form-row"] { width: 100% !important; margin-bottom: 16px !important; }

    /* TABLES - horizontal scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap;
    }
    th, td { min-width: 120px; }

    /* BUTTONS - đủ 44px touch target */
    a.btn, button, .btn, [class*="btn-"],
    input[type="submit"], input[type="button"] {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }

    /* NAVIGATION */
    .nav-menu, .navigation ul { display: none; }
    .mobile-menu-toggle, .hamburger { display: flex !important; }

    /* HEADER */
    header .container {
        flex-wrap: wrap !important;
        padding: 10px 16px !important;
    }
    .site-logo img { max-height: 45px !important; }

    /* FOOTER */
    footer .container { flex-direction: column !important; }
    footer .footer-col, footer [class*="col"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }
    footer .footer-bottom { text-align: center !important; }

    /* EXIT POPUP */
    #dv-exit-popup > div {
        padding: 30px 20px !important;
        margin: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
    }
    #dv-exit-popup h2 { font-size: 1.3rem !important; }
    #dv-exit-popup .popup-fields { flex-direction: column !important; gap: 10px !important; }

    /* BREADCRUMBS */
    .breadcrumbs-wrap { display: none; } /* Hide on mobile to save space */

    /* VIDEO/IFRAME responsive */
    .video-container, .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .video-container iframe, .embed-container iframe {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
    }

    /* CHATBOT WINDOW full width */
    #zw-chatbot-container {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        bottom: 80px !important;
    }

    /* Testimonials rating bar */
    [class*="testimonial"] .rating-bar-wrap { flex-direction: column !important; }
}

/* ===================================================
   SMALL PHONE (max 480px)
   =================================================== */
@media (max-width: 480px) {
    .services-grid, .dv-services-grid { grid-template-columns: 1fr !important; }
    [class*="metrics"] .grid, [class*="stats"] .grid { grid-template-columns: 1fr 1fr !important; }
    .dv-related-grid { grid-template-columns: 1fr !important; }

    /* Popup: smaller padding */
    #dv-exit-popup > div { padding: 20px 16px !important; }

    /* Blog page layout stacks */
    [class*="blog"] > .container > div[style*="grid"] {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ===================================================
   VERY SMALL (max 380px)
   =================================================== */
@media (max-width: 380px) {
    body { font-size: 14px; }
    h1 { font-size: 1.35rem !important; }
    .container { padding: 0 12px !important; }
    [class*="metrics"] .grid { grid-template-columns: 1fr !important; }
}

/* ===================================================
   TOUCH DEVICE OPTIMIZATIONS
   =================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Touch targets >= 44px */
    a, button, [role="button"],
    input[type="submit"], input[type="checkbox"], input[type="radio"],
    label { min-height: 44px; }

    /* Remove hover effects that don't work on touch */
    a:hover { text-decoration: none; }

    /* Larger tap areas for navigation */
    nav a, .menu-item a { padding: 12px 15px !important; }

    /* Better scroll experience */
    * { -webkit-tap-highlight-color: rgba(197,160,89,0.2); }
    body { touch-action: manipulation; }
}

/* ===================================================
   iOS SPECIFIC FIXES
   =================================================== */
@supports (-webkit-touch-callout: none) {
    /* Fix position:fixed on iOS Safari */
    .dv-fab-container { bottom: env(safe-area-inset-bottom, 20px); }
    body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ===================================================
   PRINT (bonus)
   =================================================== */
@media print {
    .dv-fab-container, #zw-chatbot, #dv-exit-popup,
    nav, header, footer { display: none !important; }
    body { font-size: 12pt; color: #000; }
}