/* ============================================================
   MOBILE V2 — điều chỉnh bản mobile theo doc khách 6/08
   CHỈ tác động ≤767px, desktop giữ nguyên.
   Phạm vi: trang Khóa học (hero + tên khóa) + trang Tin tức (2 cột)
   ============================================================ */

@media (max-width: 767px) {

    /* ── III. KHÓA HỌC — hero đỏ gọn lại, nhường chỗ cho danh sách khóa ── */
    .docs-hero.course-hero-banner {
        min-height: 0;
        padding: 18px 16px 16px;
        gap: 0;
        grid-template-columns: 100%;
    }
    /* Ảnh 2 học viên + nút play chiếm quá nửa màn hình → ẩn trên mobile */
    .docs-hero.course-hero-banner .course-hero-visual { display: none; }
    .docs-hero.course-hero-banner h1 {
        font-size: 30px;
        line-height: 38px;
        margin-bottom: 6px;
    }
    .docs-hero.course-hero-banner p { font-size: 13.5px; line-height: 20px; }
    /* 4 tag lợi ích: chip 2 cột cho gọn + sinh động */
    .docs-hero.course-hero-banner .docs-hero-tags {
        margin-top: 14px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .docs-hero.course-hero-banner .docs-hero-tag {
        height: auto;
        min-height: 36px;
        padding: 6px 10px;
        font-size: 12.5px;
        background: rgba(255, 255, 255, .14);
        border-color: rgba(255, 255, 255, .26);
        animation: mbv2FadeUp .5s ease backwards;
    }
    .docs-hero.course-hero-banner .docs-hero-tag:nth-child(2) { animation-delay: .1s; }
    .docs-hero.course-hero-banner .docs-hero-tag:nth-child(3) { animation-delay: .2s; }
    .docs-hero.course-hero-banner .docs-hero-tag:nth-child(4) { animation-delay: .3s; }
    /* Icon tag nhún nhẹ cho sinh động */
    .docs-hero.course-hero-banner .docs-hero-tag span:first-child {
        background: #fff;
        color: #d7261e;
        animation: mbv2Pulse 2.6s ease-in-out infinite;
    }

    /* Tên khóa học: hiện ĐẦY ĐỦ, không cắt chữ (doc mục III) */
    .course-item .course-item-head { flex-wrap: wrap; }
    .course-item .course-item-head h3 { width: 100%; }
    .course-item .course-item-head h3 a,
    .course-item .course-content h3 a {
        display: block;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        -webkit-line-clamp: unset;
        height: auto;
        max-height: none;
        line-height: 1.45;
    }

    /* ── V. TIN TỨC — bài viết 2 cột dọc (doc mục V; block đã set mobile_column=6) ── */
    #list-posts .post-body { padding: 10px 10px 12px; }
    #list-posts .post-body h3,
    #list-posts .post-body h3 a { font-size: 13px; line-height: 1.4; }
    #list-posts .post-meta { font-size: 11px; flex-wrap: wrap; gap: 4px; }
}

@keyframes mbv2FadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes mbv2Pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .docs-hero.course-hero-banner .docs-hero-tag,
    .docs-hero.course-hero-banner .docs-hero-tag span:first-child { animation: none !important; }
}