/* ==========================================================================
   📱 MOBILE VIEWPORT FIT & DOPPELRAND HARDWARE ARCHITECTURE (<= 992px)
   ========================================================================== */

@media (max-width: 992px) {

    /* 1. CONTAINER & TOUCH SAFETY */
    .container {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* 2. DETAIL GRID: Prevent CSS Grid 1fr expansion bug */
    .detail-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px 0 !important;
        gap: 20px !important;
    }

    /* Grid Items Safety */
    .detail-grid > div,
    .detail-grid > aside {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    .detail-grid .heritage-tab-buttons,
    .detail-grid .trust-tab-buttons,
    .detail-grid .menu-slider-wrapper,
    .detail-grid [style*="overflow-x: auto"],
    .detail-grid [style*="overflow-x:auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    /* 3. DOPPELRAND (DOUBLE-BEZEL) CARDS ARCHITECTURE */
    .detail-section,
    .heritage-museum-card,
    .trust-hub-card,
    .sidebar-widget,
    .glass-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: var(--bg-card, rgba(255, 255, 255, 0.85)) !important;
        border: var(--border-bezel, 1px solid rgba(6, 182, 212, 0.12)) !important;
        border-radius: var(--radius-outer-mobile, 22px) !important;
        box-shadow: var(--shadow-bezel, 0 10px 30px -8px rgba(6, 182, 212, 0.1)) !important;
        transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease !important;
        overflow: hidden !important;
    }

    .detail-section {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }

    .heritage-museum-card {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }

    .trust-hub-card {
        padding: 20px !important;
    }

    /* 4. HERITAGE CARD & DOSSIER HEADER */
    .heritage-museum-card > div > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .heritage-museum-card h2 {
        font-family: var(--font-heading) !important;
        font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
        line-height: 1.25 !important;
        letter-spacing: -0.02em !important;
        text-wrap: balance !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .heritage-museum-card p {
        font-family: var(--font-body) !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }

    .ocop-star-badge {
        text-align: left !important;
        align-self: flex-start !important;
        max-width: 100% !important;
    }

    /* Audio Storyteller Double-Bezel Inner Core */
    .audio-storyteller-widget {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px !important;
        border-radius: var(--radius-inner-mobile, 14px) !important;
        background: rgba(14, 165, 233, 0.05) !important;
        border: 1px solid rgba(14, 165, 233, 0.12) !important;
    }

    .audio-storyteller-widget > div {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 5. HERITAGE & TRUST TAB PILL BARS */
    .heritage-tab-buttons,
    .trust-tab-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
        padding: 4px 2px 10px 2px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .heritage-tab-buttons::-webkit-scrollbar,
    .trust-tab-buttons::-webkit-scrollbar {
        display: none !important;
    }

    .heritage-tab-btn,
    .trust-tab-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-family: var(--font-heading) !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        padding: 8px 16px !important;
        border-radius: var(--radius-pill, 9999px) !important;
        background: rgba(14, 165, 233, 0.05) !important;
        border: 1px solid rgba(14, 165, 233, 0.12) !important;
        color: var(--text-main) !important;
        transition: all 0.25s var(--ease-spring) !important;
        cursor: pointer;
    }

    .heritage-tab-btn:active,
    .trust-tab-btn:active {
        transform: scale(0.95) !important;
    }

    .heritage-tab-btn.active,
    .trust-tab-btn.active {
        background: var(--primary-grad) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.35) !important;
    }

    .heritage-tab-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .heritage-tab-content p,
    .heritage-tab-content div {
        max-width: 100% !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    #tab-ingredients > div {
        grid-template-columns: 1fr !important;
    }

    /* 6. TRIVIA WIDGET */
    .trivia-widget {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 16px !important;
        border-radius: var(--radius-inner-mobile, 14px) !important;
        background: rgba(16, 185, 129, 0.06) !important;
        border: 1px solid rgba(16, 185, 129, 0.15) !important;
    }

    .trivia-widget p {
        max-width: 100% !important;
        word-break: break-word !important;
    }

    /* 7. TRUST CERT & TABLE OVERRIDES */
    #trust-cert > div {
        flex-direction: column !important;
        gap: 14px !important;
    }

    .cert-image-preview {
        width: 140px !important;
        height: 190px !important;
        border-radius: 12px !important;
    }

    table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    table td {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 0;
    }

    table td:first-child {
        width: 38% !important;
    }

    .trust-shield-banner {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: var(--radius-inner-mobile, 14px) !important;
    }

    /* 8. SLIDER THỰC ĐƠN MOBILE */
    .menu-slider-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
    }

    .menu-slider-content .dish-card {
        flex: 0 0 calc(85vw - 32px) !important;
        min-width: 0 !important;
        max-width: calc(85vw - 32px) !important;
        border-radius: var(--radius-inner-mobile, 14px) !important;
    }

    /* 9. HERO SECTION MOBILE */
    .detail-hero {
        height: auto !important;
        min-height: 160px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .detail-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 72px !important;
        padding-bottom: 24px !important;
    }

    .detail-hero-content h1 {
        font-family: var(--font-heading) !important;
        font-size: clamp(1.3rem, 5.5vw, 2rem) !important;
        letter-spacing: -0.03em !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        text-wrap: balance !important;
    }

    .detail-hero-content p {
        font-family: var(--font-body) !important;
        font-size: 0.9rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    /* 10. SIDEBAR FULL WIDTH MOBILE */
    aside,
    .sidebar-widget {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 11. INLINE MIN-WIDTH OVERRIDES */
    [style*="min-width: 4"],
    [style*="min-width: 3"],
    [style*="min-width: 28"],
    [style*="min-width: 26"],
    [style*="min-width: 25"],
    [style*="min-width: 22"],
    [style*="min-width: 20"] {
        min-width: 0 !important;
    }

    /* 12. TYPOGRAPHY SAFEGUARDS */
    p, h1, h2, h3, h4, h5, h6,
    span:not(.heritage-tab-btn):not(.trust-tab-btn):not(.modal-tab-btn),
    li, td, th, label, blockquote {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    p [style*="white-space: nowrap"],
    div:not(.heritage-tab-buttons):not(.trust-tab-buttons):not(.menu-slider-wrapper) > [style*="white-space: nowrap"] {
        white-space: normal !important;
    }

    /* 13. MEDIA RESPONSIVE FIT */
    img, video, iframe, svg, canvas {
        max-width: 100% !important;
        height: auto;
    }

    /* 14. SECTION TITLES */
    .section-title {
        font-family: var(--font-heading) !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        max-width: 100% !important;
    }

    /* 15. FLEX WRAP SAFEGUARDS */
    .detail-section > div[style*="display: flex"],
    .heritage-museum-card > div > div[style*="display: flex"],
    .trust-hub-card > div[style*="display: flex"] {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Màn hình rất nhỏ (< 400px) — iPhone SE, Galaxy A
   ========================================================================== */
@media (max-width: 400px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .detail-section,
    .heritage-museum-card,
    .trust-hub-card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .detail-hero-content h1 {
        font-size: 1.2rem !important;
    }

    .heritage-tab-btn,
    .trust-tab-btn {
        font-size: 0.74rem !important;
        padding: 6px 12px !important;
    }

    .dish-card {
        flex-direction: column !important;
        align-items: center !important;
    }

    .dish-img {
        width: 100% !important;
        height: 150px !important;
        max-width: 100% !important;
    }

    .menu-slider-content .dish-card {
        flex: 0 0 calc(92vw - 24px) !important;
        max-width: calc(92vw - 24px) !important;
    }
}