/* =====================================================
   CHÍNH SÁCH KHIẾU NẠI - MOBILE OPTIMIZED (FULL)
   Tối ưu toàn bộ card trên mobile
   ===================================================== */

/* ========== RESET & BASE ========== */
* {
    box-sizing: border-box;
}

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

    .dvs-container-wide,
    .dvs-container,
    .dvs-container-narrow {
        padding: 0 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* ========== ALL GRIDS -> 1 COLUMN ========== */
@media (max-width: 768px) {

    .dvs-grid-2,
    .dvs-grid-3,
    .dvs-grid-4,
    .dvs-grid.dvs-grid-2,
    .dvs-grid.dvs-grid-3,
    .dvs-grid.dvs-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .dvs-grid-2 .dvs-card,
    .dvs-grid-3 .dvs-card,
    .dvs-grid-4 .dvs-card,
    .dvs-grid .dvs-card {
        grid-column: span 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-height: auto !important;
    }
}

/* =====================================================
   ICON FIX - TOÀN BỘ TRÊN MOBILE
   ===================================================== */

/* ========== ICON - DESKTOP ========== */
.dvs-icon-large {
    font-size: 3.5rem !important;
    display: block !important;
    line-height: 1 !important;
}

.dvs-icon-medium {
    font-size: 2.5rem !important;
    display: block !important;
    line-height: 1 !important;
}

.dvs-icon-small {
    font-size: 1.8rem !important;
    display: inline-block !important;
    line-height: 1 !important;
}

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

    /* Tất cả icon trong các component */
    .dvs-icon-large {
        font-size: 2.2rem !important;
    }

    .dvs-icon-medium {
        font-size: 1.8rem !important;
    }

    .dvs-icon-small {
        font-size: 1.3rem !important;
    }

    /* Icon trong Banner */
    .dvs-banner-actions .dvs-btn-glow::before,
    .dvs-banner-actions .dvs-btn-outline::before {
        font-size: 1.2rem !important;
    }

    /* Icon trong Card */
    .dvs-card>span[style*="font-size"],
    .dvs-card .dvs-icon-large,
    .dvs-card .dvs-icon-medium,
    .dvs-card .dvs-icon-small {
        font-size: 1.5rem !important;
        margin-bottom: 6px !important;
    }

    /* Icon trong No Card */
    .dvs-no-card>span[style*="font-size"],
    .dvs-no-card .dvs-icon-small {
        font-size: 1.3rem !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
    }

    /* Icon trong AI Card - Search Intent */
    .dvs-ai-card>span[style*="font-size"],
    .dvs-ai-card .dvs-icon-small {
        font-size: 1.8rem !important;
        display: block !important;
        margin-bottom: 6px !important;
    }

    /* Icon trong Pricing Card */
    .dvs-pricing-card>span[style*="font-size"],
    .dvs-pricing-card .dvs-icon-medium {
        font-size: 2rem !important;
        display: block !important;
        margin-bottom: 8px !important;
    }

    /* Icon trong Pillar Item */
    .dvs-pillar-item .dvs-pillar-num {
        font-size: 1.6rem !important;
    }

    /* Icon trong Step */
    .dvs-step-n {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }

    /* Icon trong Principle */
    .dvs-principle>span {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }

    /* Icon trong Stat Box */
    .dvs-stat-box>span[style*="font-size"],
    .dvs-stat-box .dvs-icon-large {
        font-size: 2.5rem !important;
        margin-bottom: 8px !important;
    }

    /* Icon trong Stat Item */
    .dvs-stat-item>span[style*="font-size"] {
        font-size: 1.5rem !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    /* Icon trong Story */
    .dvs-story>span[style*="font-size"] {
        font-size: 1.3rem !important;
    }

    /* Icon trong CTA Contact */
    .dvs-cta-contact>span[style*="font-size"] {
        font-size: 1.1rem !important;
    }

    /* Icon trong FAQ summary */
    .dvs-faq-item summary::after {
        font-size: 1.1rem !important;
    }

    /* Icon trong Alert */
    .dvs-alert>span[style*="font-size"] {
        font-size: 1.2rem !important;
    }

    /* Icon trong Highlight */
    .dvs-highlight>span[style*="font-size"] {
        font-size: 1.2rem !important;
    }

    /* Icon trong Contact Cards */
    .dvs-contact-item .dvs-icon {
        font-size: 1.5rem !important;
    }

    /* Icon trong Final Commit */
    .dvs-grid-2>div>span[style*="font-size"] {
        font-size: 1.5rem !important;
    }
}

/* ========== ICON - MOBILE NHỎ (max-width: 480px) ========== */
@media (max-width: 480px) {
    .dvs-icon-large {
        font-size: 1.8rem !important;
    }

    .dvs-icon-medium {
        font-size: 1.5rem !important;
    }

    .dvs-icon-small {
        font-size: 1.1rem !important;
    }

    /* Icon trong Card */
    .dvs-card>span[style*="font-size"],
    .dvs-card .dvs-icon-large,
    .dvs-card .dvs-icon-medium,
    .dvs-card .dvs-icon-small {
        font-size: 1.3rem !important;
    }

    /* Icon trong No Card */
    .dvs-no-card>span[style*="font-size"],
    .dvs-no-card .dvs-icon-small {
        font-size: 1.1rem !important;
    }

    /* Icon trong AI Card */
    .dvs-ai-card>span[style*="font-size"],
    .dvs-ai-card .dvs-icon-small {
        font-size: 1.5rem !important;
    }

    /* Icon trong Pricing Card */
    .dvs-pricing-card>span[style*="font-size"],
    .dvs-pricing-card .dvs-icon-medium {
        font-size: 1.6rem !important;
    }

    /* Icon trong Pillar */
    .dvs-pillar-item .dvs-pillar-num {
        font-size: 1.3rem !important;
    }

    /* Icon trong Step */
    .dvs-step-n {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    /* Icon trong Principle */
    .dvs-principle>span {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    /* Icon trong Stat Box */
    .dvs-stat-box>span[style*="font-size"],
    .dvs-stat-box .dvs-icon-large {
        font-size: 2rem !important;
    }

    /* Icon trong CTA Contact */
    .dvs-cta-contact>span[style*="font-size"] {
        font-size: 1rem !important;
    }

    /* Icon trong Final Commit */
    .dvs-grid-2>div>span[style*="font-size"] {
        font-size: 1.3rem !important;
    }
}

/* =====================================================
   IMAGE FIX - TOÀN BỘ TRÊN MOBILE
   ===================================================== */

/* ========== IMAGE - DESKTOP ========== */
.dvs-media-img {
    width: 100% !important;
    height: auto !important;
    min-height: 320px !important;
    max-height: 520px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
}

.dvs-featured-image {
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
}

/* ========== IMAGE - TABLET (max-width: 768px) ========== */
@media (max-width: 768px) {
    .dvs-media-img {
        min-height: 160px !important;
        max-height: 220px !important;
        border-radius: 12px !important;
    }

    .dvs-featured-image {
        min-height: 160px !important;
        max-height: 220px !important;
        border-radius: 12px !important;
        object-fit: cover !important;
    }

    /* Ảnh trong Banner */
    .dvs-banner-bg {
        background-size: cover !important;
        background-position: center !important;
    }

    /* Ảnh trong Split Layout */
    .dvs-split-media img {
        min-height: 160px !important;
        max-height: 220px !important;
        border-radius: 12px !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    /* Ảnh trong Stat Box */
    .dvs-stat-box img {
        max-height: 120px !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    /* Ảnh trong Card */
    .dvs-card img {
        max-height: 160px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Ảnh trong Story */
    .dvs-story img {
        max-height: 140px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }
}

/* ========== IMAGE - MOBILE NHỎ (max-width: 480px) ========== */
@media (max-width: 480px) {
    .dvs-media-img {
        min-height: 120px !important;
        max-height: 180px !important;
        border-radius: 10px !important;
    }

    .dvs-featured-image {
        min-height: 120px !important;
        max-height: 180px !important;
        border-radius: 10px !important;
    }

    .dvs-split-media img {
        min-height: 120px !important;
        max-height: 180px !important;
        border-radius: 10px !important;
    }

    .dvs-card img {
        max-height: 140px !important;
    }

    .dvs-stat-box img {
        max-height: 100px !important;
    }
}

/* ========== ALL CARDS - UNIFIED STYLES ========== */
@media (max-width: 768px) {

    .dvs-card,
    .dvs-no-card,
    .dvs-yes-box,
    .dvs-pricing-card,
    .dvs-ai-card,
    .dvs-pillar-item,
    .dvs-principle,
    .dvs-stat-item,
    .dvs-step,
    .dvs-error-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-width: 1px !important;
    }

    .dvs-card h2,
    .dvs-card h3,
    .dvs-card h4,
    .dvs-no-card h4,
    .dvs-pricing-card h3,
    .dvs-ai-card h4,
    .dvs-pillar-item h3,
    .dvs-principle h4,
    .dvs-stat-item h4,
    .dvs-step h4 {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
    }

    .dvs-card p,
    .dvs-no-card p,
    .dvs-pricing-card p,
    .dvs-ai-card p,
    .dvs-pillar-item p,
    .dvs-principle p,
    .dvs-stat-item p,
    .dvs-step p {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        margin-bottom: 4px !important;
    }

    .dvs-card ul,
    .dvs-card ol,
    .dvs-no-card ul,
    .dvs-pricing-card ul {
        padding-left: 16px !important;
        margin: 6px 0 !important;
    }

    .dvs-card li,
    .dvs-no-card li,
    .dvs-pricing-card li {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        padding: 4px 0 !important;
    }
}

/* ========== CARD VARIANTS ========== */
@media (max-width: 768px) {
    .dvs-no-card {
        padding: 16px !important;
        border-radius: 10px !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .dvs-no-card span {
        font-size: 1.3rem !important;
        margin-bottom: 2px !important;
    }

    .dvs-no-card h4 {
        font-size: 0.9rem !important;
        margin: 4px 0 !important;
        color: #fca5a5 !important;
    }

    .dvs-no-card p {
        font-size: 0.8rem !important;
        color: #94a3b8 !important;
        margin: 0 !important;
    }

    .dvs-yes-box {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .dvs-yes-box h4 {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    .dvs-yes-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .dvs-yes-grid span {
        font-size: 0.85rem !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        text-align: center !important;
    }

    .dvs-pricing-card {
        padding: 20px 16px !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    .dvs-pricing-card .dvs-price-amount {
        font-size: 1.8rem !important;
        margin: 6px 0 !important;
    }

    .dvs-pricing-card ul {
        text-align: left !important;
        padding-left: 16px !important;
    }

    .dvs-ai-card {
        padding: 14px !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    .dvs-ai-card span {
        font-size: 1.8rem !important;
    }

    .dvs-ai-card h4 {
        font-size: 0.9rem !important;
        margin: 6px 0 !important;
    }

    .dvs-ai-card p {
        font-size: 0.8rem !important;
        margin: 2px 0 !important;
    }

    .dvs-pillar-item {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 16px !important;
        border-radius: 12px !important;
        align-items: flex-start !important;
    }

    .dvs-pillar-num {
        font-size: 1.8rem !important;
    }

    .dvs-pillar-item h3 {
        font-size: 0.95rem !important;
        margin: 0 0 4px 0 !important;
    }

    .dvs-pillar-item p {
        font-size: 0.85rem !important;
    }

    .dvs-pillar-item ul {
        padding-left: 16px !important;
    }

    .dvs-pillar-item li {
        font-size: 0.8rem !important;
    }

    .dvs-principle {
        padding: 14px 12px !important;
        border-radius: 10px !important;
        text-align: center !important;
        border-top-width: 2px !important;
    }

    .dvs-principle span {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
    }

    .dvs-principle h4 {
        font-size: 0.85rem !important;
        margin: 0 0 4px 0 !important;
    }

    .dvs-principle p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    .dvs-stat-item {
        padding: 14px 12px !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    .dvs-stat-num {
        font-size: 1.2rem !important;
    }

    .dvs-stat-lbl {
        font-size: 0.75rem !important;
        margin-top: 4px !important;
    }

    .dvs-step {
        padding: 14px 12px !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    .dvs-step-n {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
        margin: 0 auto 8px !important;
    }

    .dvs-step h4 {
        font-size: 0.85rem !important;
        margin: 0 0 4px 0 !important;
    }

    .dvs-step p {
        font-size: 0.78rem !important;
        margin: 0 0 6px 0 !important;
    }

    .dvs-step-time {
        font-size: 0.7rem !important;
        padding: 2px 10px !important;
    }
}

/* ========== SPECIAL CARDS ========== */
@media (max-width: 768px) {
    .dvs-callout {
        padding: 16px !important;
        border-radius: 10px !important;
        margin: 0 0 16px 0 !important;
    }

    .dvs-callout p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }

    .dvs-story {
        padding: 14px 16px !important;
        border-radius: 0 8px 8px 0 !important;
        margin: 12px 0 !important;
        border-left-width: 3px !important;
    }

    .dvs-story p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin: 4px 0 !important;
    }

    .dvs-alert {
        padding: 14px 16px !important;
        border-radius: 10px !important;
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        margin: 12px 0 !important;
    }

    .dvs-highlight {
        padding: 16px !important;
        border-radius: 10px !important;
        margin: 12px 0 !important;
    }

    .dvs-mistake {
        grid-template-columns: 1fr !important;
        border-radius: 10px !important;
        margin: 0 0 8px 0 !important;
    }

    .dvs-mistake-head {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }

    .dvs-mistake-fix {
        padding: 10px 14px !important;
        font-size: 0.8rem !important;
    }

    .dvs-vs-wrap {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .dvs-vs-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .dvs-vs-card ul {
        padding-left: 0 !important;
    }

    .dvs-vs-card li {
        font-size: 0.85rem !important;
        padding: 6px 0 !important;
    }

    .dvs-vs-divider {
        padding: 4px 0 !important;
    }

    .dvs-vs-divider span {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.8rem !important;
    }
}

/* ========== TIMELINE FIX ========== */
@media (max-width: 768px) {
    .dvs-timeline {
        padding: 0 !important;
        margin: 16px 0 !important;
    }

    .dvs-timeline::before {
        left: 14px !important;
        transform: none !important;
    }

    .dvs-step-card {
        padding-left: 40px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    .dvs-step-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
        left: 0 !important;
        transform: translateX(-50%) !important;
    }

    .dvs-step-content {
        padding: 14px 16px !important;
        border-radius: 10px !important;
        width: 100% !important;
    }

    .dvs-step-content h3 {
        font-size: 0.9rem !important;
        margin: 4px 0 !important;
    }

    .dvs-step-content p,
    .dvs-step-content li {
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
    }

    .dvs-step-content ul {
        padding-left: 16px !important;
        margin: 4px 0 !important;
    }
}

/* ========== STATISTICS STRIP ========== */
@media (max-width: 768px) {
    .dvs-stat-strip {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }
}

@media (max-width: 480px) {
    .dvs-stat-strip {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ========== PRINCIPLES ROW ========== */
@media (max-width: 768px) {
    .dvs-principle-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .dvs-principle-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ========== STEPS ========== */
@media (max-width: 768px) {
    .dvs-steps {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .dvs-steps {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ========== AI GRID ========== */
@media (max-width: 768px) {
    .dvs-ai-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .dvs-ai-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ========== TABLE ========== */
@media (max-width: 768px) {
    .dvs-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 12px 0 !important;
        border-radius: 10px !important;
    }

    .dvs-table {
        min-width: 420px !important;
        font-size: 0.78rem !important;
    }

    .dvs-table th,
    .dvs-table td {
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }
}

/* ========== BANNER ========== */
@media (max-width: 768px) {
    .dvs-banner-full {
        min-height: 45vh !important;
    }

    .dvs-banner-inner {
        padding: 60px 16px 30px !important;
    }

    .dvs-banner-title {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }

    .dvs-banner-desc {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .dvs-banner-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .dvs-banner-actions a {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }
}

/* ========== SPLIT LAYOUT ========== */
@media (max-width: 768px) {
    .dvs-split {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .dvs-split-content {
        order: 2 !important;
        padding: 0 !important;
    }

    .dvs-split-media {
        order: 1 !important;
        width: 100% !important;
    }

    .dvs-split-media img {
        min-height: 160px !important;
        max-height: 220px !important;
        border-radius: 12px !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    .dvs-split-reverse .dvs-split-media {
        order: 1 !important;
    }

    .dvs-split-reverse .dvs-split-content {
        order: 2 !important;
    }
}

/* ========== CTA BAND ========== */
@media (max-width: 768px) {
    .dvs-cta-band {
        padding: 30px 0 !important;
    }

    .dvs-cta-inner {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 14px !important;
        text-align: center !important;
    }

    .dvs-cta-inner h2 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }

    .dvs-cta-inner p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .dvs-cta-contact {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .dvs-cta-contact span {
        font-size: 0.8rem !important;
    }

    .dvs-cta-action {
        text-align: center !important;
        width: 100% !important;
    }

    .dvs-cta-action .dvs-btn-glow {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ========== SECTION ========== */
@media (max-width: 768px) {
    .dvs-section {
        padding: 30px 0 !important;
    }

    .dvs-section-head {
        margin-bottom: 16px !important;
    }

    .dvs-section-title {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }

    .dvs-section-title::after {
        width: 32px !important;
        height: 2px !important;
        margin: 10px auto 0 !important;
    }

    .dvs-lead {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        padding: 0 4px !important;
        margin-bottom: 12px !important;
    }

    .dvs-subtitle {
        font-size: 1rem !important;
        margin: 16px 0 10px !important;
    }
}

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

    .dvs-btn-glow,
    .dvs-btn-outline {
        display: inline-block !important;
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        border-radius: 8px !important;
    }
}

/* ========== FAQ ========== */
@media (max-width: 768px) {
    .dvs-faq-list.dvs-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .dvs-faq-item {
        border-radius: 10px !important;
    }

    .dvs-faq-item summary {
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    .dvs-faq-content {
        padding: 0 14px 14px !important;
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
    }
}

/* ========== HIDE HOVER EFFECTS ON MOBILE ========== */
@media (max-width: 768px) {

    .dvs-card:hover,
    .dvs-pillar-item:hover,
    .dvs-step-card:hover .dvs-step-content,
    .dvs-principle:hover,
    .dvs-pricing-card:hover,
    .dvs-ai-card:hover,
    .dvs-error-card:hover,
    .dvs-no-card:hover,
    .dvs-yes-box:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: var(--dvs-border) !important;
    }
}

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

    .dvs-page,
    .dvs-policy-page,
    #primary,
    #main,
    .site-main,
    .content-area,
    article,
    .dvs-section,
    .dvs-container-wide,
    .dvs-container {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .site-main {
        margin: 0 !important;
        padding: 0 !important;
    }

    .content-area {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ========== LESSON BADGE ========== */
@media (max-width: 768px) {
    .dvs-lesson {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
        margin-bottom: 12px !important;
    }
}

/* ========== NO CARD - DESKTOP ========== */
.dvs-no-card {
    background: rgba(239, 68, 68, 0.05) !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
    border-radius: 12px !important;
    padding: 20px 18px !important;
    transition: all 0.3s ease !important;
}

.dvs-no-card:hover {
    border-color: rgba(239, 68, 68, 0.4) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    transform: translateY(-2px) !important;
}

.dvs-no-card span {
    font-size: 1.6rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.dvs-no-card h4 {
    color: #fca5a5 !important;
    margin: 0 0 4px 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

.dvs-no-card p {
    color: #94a3b8 !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

/* ========== NO CARD - MOBILE ========== */
@media (max-width: 768px) {
    .dvs-no-card {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 14px 14px !important;
        border-radius: 10px !important;
        width: 100% !important;
        min-height: auto !important;
    }

    .dvs-no-card span {
        font-size: 1.3rem !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
    }

    .dvs-no-card h4 {
        font-size: 0.9rem !important;
        margin: 0 0 3px 0 !important;
        line-height: 1.3 !important;
    }

    .dvs-no-card p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    .dvs-grid-2 .dvs-no-card {
        grid-column: span 1 !important;
    }

    .dvs-grid-2 .dvs-no-card[style*="grid-column:1/-1"] {
        grid-column: span 1 !important;
    }
}

/* ========== NO CARD - MOBILE NHỎ ========== */
@media (max-width: 480px) {
    .dvs-no-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 16px 14px !important;
        gap: 6px !important;
    }

    .dvs-no-card span {
        font-size: 1.2rem !important;
        margin: 0 !important;
    }

    .dvs-no-card h4 {
        font-size: 0.9rem !important;
        text-align: center !important;
    }

    .dvs-no-card p {
        font-size: 0.8rem !important;
        text-align: center !important;
    }
}

/* ========== HOVER EFFECT MOBILE ========== */
@media (max-width: 768px) {
    .dvs-no-card:hover {
        transform: none !important;
        border-color: rgba(239, 68, 68, 0.2) !important;
        background: rgba(239, 68, 68, 0.05) !important;
    }
}

/* ========== DEBUG - Hiển thị breakpoint ========== */
@media (max-width: 480px) {
    body::after {
        content: "📱 Mobile";
        position: fixed;
        bottom: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 9px;
        z-index: 9999;
        opacity: 0.4;
        pointer-events: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    body::after {
        content: "📱 Tablet";
        position: fixed;
        bottom: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 9px;
        z-index: 9999;
        opacity: 0.4;
        pointer-events: none;
    }
}

/* ========== PRINT STYLES ========== */
@media print {

    .dvs-cta-band,
    .dvs-banner-actions,
    .dvs-btn-glow,
    .dvs-btn-outline {
        display: none !important;
    }

    .dvs-page {
        background: #fff !important;
        color: #000 !important;
    }

    .dvs-section {
        padding: 20px 0 !important;
        break-inside: avoid;
    }

    .dvs-card {
        border: 1px solid #ccc !important;
        background: #fff !important;
        color: #000 !important;
    }
}