/* ==========================================================================
   ĐÔNG Y GIA TRUYỀN THẾ LONG - RESPONSIVE V2 SUPPLEMENT
   Bổ sung responsive cho các tính năng mới & tối ưu hoàn chỉnh 3 màn hình:
   Desktop (≥1200px) | Tablet/iPad (768-1199px) | Mobile (≤767px)
   Giữ nguyên 100% responsive.css cũ — đây là file bổ sung thêm
   ========================================================================== */

/* ==========================================================================
   GLOBAL RESPONSIVE FOUNDATION
   ========================================================================== */

/* Đảm bảo mọi phần tử dùng box-sizing chuẩn */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Container cơ sở */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Ảnh và media luôn co giãn đúng */
img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   DESKTOP LARGE (≥ 1400px)
   ========================================================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

    .remedies-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   DESKTOP STANDARD (1200px – 1399px)
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1399px) {
    .container {
        max-width: 1160px;
        padding: 0 24px;
    }
}

/* ==========================================================================
   TABLET / IPAD (768px – 1199px)
   ========================================================================== */
@media (max-width: 1199px) {
    /* Container */
    .container {
        padding: 0 18px;
    }

    /* --- REMEDY CARDS --- */
    .remedies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* --- NEWS / ARTICLES --- */
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* --- WHY CHOOSE US --- */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* --- VIDEO TESTIMONIALS (mới) --- */
    #video-testi-grid {
        max-width: 680px !important;
    }

    .vtesti-card {
        width: 280px !important;
    }

    /* --- ADMIN PANEL --- */
    #crm-table {
        font-size: 0.78rem;
    }
}

/* ==========================================================================
   TABLET PORTRAIT / IPAD PORTRAIT (768px – 991px)
   ========================================================================== */
@media (max-width: 991px) {
    /* Typography */
    body {
        font-size: 15px;
    }

    .section-title {
        font-size: 1.85rem;
        line-height: 1.3;
    }

    .section-desc {
        font-size: 0.95rem;
    }

    /* --- HEADER / NAV --- */
    .header-container {
        padding: 10px 0;
    }

    /* --- HERO SECTION --- */
    .hero-container {
        gap: 28px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    /* --- GALLERY MEDIA --- */
    .gallery-split-layout {
        gap: 24px;
    }

    /* --- REMEDY GRID --- */
    .remedies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .remedy-card-image {
        height: 200px;
    }

    /* --- TESTIMONIALS --- */
    .testimonial-card {
        padding: 18px 16px;
    }

    /* --- VIDEO TESTIMONIALS (mới) --- */
    #video-testi-grid {
        max-width: 620px !important;
        gap: 16px !important;
    }

    .vtesti-card {
        width: 270px !important;
    }

    /* --- CONTACT --- */
    .contact-box {
        gap: 28px;
    }

    /* --- FOOTER --- */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    /* --- ADMIN PANEL RESPONSIVE --- */
    .dash-sidebar {
        width: 200px !important;
        min-width: 160px !important;
    }

    #crm-table th:nth-child(4),
    #crm-table td:nth-child(4),
    #crm-table th:nth-child(6),
    #crm-table td:nth-child(6) {
        display: none;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* --- Typography Scale --- */
    body {
        font-size: 14.5px;
        line-height: 1.65;
    }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }

    .section-title {
        font-size: 1.65rem;
        line-height: 1.28;
    }

    .section-desc {
        font-size: 0.9rem;
    }

    /* --- Container Mobile --- */
    .container {
        padding: 0 14px;
    }

    /* --- Section Spacing --- */
    .section {
        padding: 28px 0;
    }

    /* --- REMEDY GRID --- */
    .remedies-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .remedy-card-image {
        height: 190px;
    }

    .remedy-card-body {
        padding: 16px 14px;
    }

    .remedy-card-title {
        font-size: 1.1rem;
    }

    /* --- NEWS GRID --- */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* --- WHY GRID --- */
    .why-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* --- SERVICES / SPECIALTY GRID --- */
    .services-grid,
    .specialty-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* --- CONTACT SECTION --- */
    .contact-form-wrap {
        padding: 20px 14px;
        border-radius: 12px;
    }

    .contact-info-box {
        padding: 20px 14px;
    }

    /* --- MODAL --- */
    .modal-box {
        padding: 20px 14px;
        margin: 16px;
        border-radius: 12px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* --- VIDEO TESTIMONIALS (mới thêm) --- */
    #video-testi-grid {
        gap: 14px !important;
        padding: 0 4px;
        max-width: 100% !important;
    }

    .vtesti-card {
        width: calc(100vw - 40px) !important;
        max-width: 380px !important;
    }

    .vtesti-play-icon {
        width: 46px !important;
        height: 46px !important;
        font-size: 1.1rem !important;
    }

    /* Modal YouTube video */
    #ytVideoModal div[style*="aspect-ratio"] {
        width: 96vw !important;
        max-width: 96vw !important;
    }

    /* --- TESTIMONIALS SLIDER --- */
    .testi-customer-img-box {
        height: 150px;
    }

    .testimonial-card {
        padding: 14px 12px;
    }

    .testi-quote {
        font-size: 0.88rem;
        line-height: 1.6;
    }

    /* --- FOOTER --- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom-flex {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .footer-logo-area {
        text-align: center;
    }

    /* --- FLOATING ACTIONS --- */
    .floating-actions {
        bottom: 16px;
        right: 12px;
        gap: 8px;
    }

    .float-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    /* --- SCROLL BUTTON --- */
    #scroll-top-btn {
        width: 40px;
        height: 40px;
        right: 12px;
        bottom: 80px;
        font-size: 0.9rem;
    }

    /* --- SOCIAL PROOF TOAST --- */
    #thelong-social-proof-toast {
        left: 10px !important;
        right: 10px !important;
        bottom: 80px !important;
        font-size: 0.8rem !important;
    }

    /* --- ADMIN PANEL MOBILE --- */
    .dash-layout {
        flex-direction: column !important;
    }

    .dash-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 8px !important;
        gap: 4px !important;
        overflow-x: auto !important;
    }

    .dash-nav-item {
        flex-shrink: 0 !important;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }

    .dash-main {
        padding: 12px !important;
    }

    #crm-table {
        font-size: 0.72rem;
        min-width: 500px;
    }

    #crm-table th:nth-child(3),
    #crm-table td:nth-child(3),
    #crm-table th:nth-child(5),
    #crm-table td:nth-child(5),
    #crm-table th:nth-child(6),
    #crm-table td:nth-child(6) {
        display: none;
    }

    /* Product form 2-col → 1-col on mobile */
    #video-form-wrap > div[style*="grid-template-columns:1fr 1fr"],
    #product-form-wrap > div[style*="grid-template-columns:1fr 1fr"],
    .crm-edit-panel > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   SMALL MOBILE (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
    /* Typography */
    body { font-size: 14px; }
    .section-title { font-size: 1.5rem; }

    /* Container */
    .container {
        padding: 0 12px;
    }

    /* Hero */
    .hero-title { font-size: 1.4rem; }
    .hero-desc { font-size: 0.88rem; }

    /* Buttons stack */
    .hero-buttons,
    .gallery-action-btns,
    .about-action {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .hero-buttons .btn,
    .gallery-action-btns .btn,
    .about-action .btn {
        width: 100%;
        justify-content: center;
    }

    /* Filter buttons scroll */
    .remedy-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        justify-content: flex-start;
    }

    .filter-btn {
        flex-shrink: 0;
        padding: 7px 14px;
        font-size: 0.8rem;
    }

    /* Video cards full width */
    .vtesti-card {
        width: calc(100vw - 28px) !important;
    }

    /* Modal full screen */
    .modal-box {
        margin: 8px;
        border-radius: 10px;
    }

    /* Product card grid 1 col */
    .remedies-grid,
    .news-grid,
    .why-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   SUPER SMALL MOBILE (≤ 360px) — iPhone SE, Galaxy A series nhỏ
   ========================================================================== */
@media (max-width: 360px) {
    body { font-size: 13.5px; }

    .section-title { font-size: 1.35rem; }

    .hero-title { font-size: 1.25rem !important; }

    .btn {
        font-size: 0.82rem;
        padding: 9px 14px;
    }

    .logo-title { font-size: 0.78rem !important; }

    .vtesti-card {
        width: calc(100vw - 20px) !important;
    }
}

/* ==========================================================================
   PRINT MEDIA — Tắt animation, floating buttons khi in
   ========================================================================== */
@media print {
    .floating-actions,
    #scroll-top-btn,
    #thelong-native-chat-window,
    #thelong-social-proof-toast,
    .studio-topbar-dock,
    #studio-topbar-dock,
    #studio-launcher-btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    .hero {
        page-break-inside: avoid;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}

/* ==========================================================================
   LANDSCAPE MOBILE — Điện thoại ngang (height ≤ 500px)
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 10px 0 0 0;
        min-height: auto;
    }

    .hero-slide {
        padding: 10px 0 20px 0;
    }

    .hero-title {
        font-size: 1.3rem;
    }

    .hero-desc {
        font-size: 0.82rem;
        margin-bottom: 12px;
    }

    .hero-buttons {
        flex-direction: row;
        gap: 8px;
    }

    .hero-buttons .btn {
        width: auto;
        padding: 8px 18px;
    }

    .modal-box {
        max-height: 85vh;
        overflow-y: auto;
    }

    /* Thanh Studio toolbar compact khi landscape */
    #studio-topbar-dock {
        padding: 2px 8px !important;
        gap: 3px !important;
    }

    .studio-dock-btn span {
        display: none !important;
    }
}

/* ==========================================================================
   HIGH DPI / RETINA DISPLAY — Ảnh sắc nét trên màn hình 2x+
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-icon img,
    .hero-card-img,
    .remedy-card-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ==========================================================================
   REDUCED MOTION — Tắt animation cho người dùng nhạy cảm với chuyển động
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .vtesti-card,
    .remedy-card,
    .float-btn {
        transition: none !important;
    }
}