/* ===== HERO ===== */
    .medee-hero {
        background: linear-gradient(135deg, #003a8f 0%, #1a56b0 60%, #2d7dd2 100%);
        color: #fff;
        padding: 60px 24px 76px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .medee-hero::before {
        content: '';
        position: absolute; inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
    }
    .medee-hero::after {
        content: '';
        position: absolute; bottom: -1px; left: 0; right: 0;
        height: 48px;
        background: #f7f8fc;
        clip-path: ellipse(55% 100% at 50% 100%);
    }
    .medee-hero-inner { position: relative; z-index: 1; }
    .medee-hero-badge {
        display: inline-block;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.3);
        font-size: 11px; font-weight: 600;
        letter-spacing: 0.1em; text-transform: uppercase;
        padding: 5px 18px; border-radius: 100px; margin-bottom: 16px;
    }
    .medee-hero h1 {
        font-family: 'Noto Serif', Georgia, serif;
        font-size: 34px; font-weight: 600;
        margin: 0 0 10px; line-height: 1.25;
    }
    .medee-hero p { font-size: 15px; opacity: 0.8; margin: 0; }

    /* ===== FILTER ===== */
    .filter-wrap {
        max-width: 1000px;
        margin: 32px auto 0;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
    .ftab {
        padding: 7px 16px;
        border-radius: 100px;
        border: 1px solid #dde3f0;
        background: #fff;
        font-size: 13px; color: #555;
        cursor: pointer;
        transition: all 0.15s;
    }
    .ftab:hover { background: #e8f0fe; color: #003a8f; border-color: #003a8f; }
    .ftab.active { background: #003a8f; color: #fff; border-color: #003a8f; }

    .search-box {
        display: flex; align-items: center; gap: 8px;
        background: #fff; border: 1px solid #dde3f0;
        border-radius: 100px; padding: 8px 16px;
        min-width: 200px;
    }
    .search-box input {
        border: none; outline: none;
        font-size: 13px; color: #333;
        background: transparent; width: 100%;
    }
    .search-box input::placeholder { color: #aaa; }
    .search-icon { font-size: 16px; opacity: 0.4; }

    /* ===== NEWS LIST ===== */
    .news-wrap {
        max-width: 1000px;
        margin: 28px auto 60px;
        padding: 0 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Мэдээний карт */
    .n-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #dde3f0;
        overflow: hidden;
        display: grid;
        grid-template-columns: 280px 1fr;
        transition: box-shadow 0.2s, transform 0.2s;
        cursor: pointer;
    }
    .n-card:hover {
        box-shadow: 0 8px 28px rgba(0,58,143,0.12);
        transform: translateY(-2px);
    }
    .n-img {
        position: relative;
        overflow: hidden;
    }
    .n-img img {
        width: 100%; height: 100%;
        object-fit: cover; display: block;
        transition: transform 0.3s;
    }
    .n-card:hover .n-img img { transform: scale(1.04); }
    .n-img-placeholder {
        width: 100%; height: 100%; min-height: 180px;
        display: flex; align-items: center; justify-content: center;
        font-size: 48px;
    }
    .n-img-placeholder.blue { background: linear-gradient(135deg, #e8f0fe, #cdddf5); }
    .n-img-placeholder.gold { background: linear-gradient(135deg, #faeeda, #f5d9a8); }
    .n-img-placeholder.green { background: linear-gradient(135deg, #eaf3de, #c3edcf); }
    .n-img-placeholder.pink { background: linear-gradient(135deg, #fbeaf0, #f7c4e1); }

    .n-body {
        padding: 24px 28px;
        display: flex; flex-direction: column; justify-content: center;
        gap: 10px;
    }
    .n-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .n-tag {
        font-size: 11px; font-weight: 600;
        padding: 3px 12px; border-radius: 100px;
        display: inline-block;
    }
    .n-tag.surgalt { background: #e8f0fe; color: #003a8f; }
    .n-tag.medee    { background: #faeeda; color: #633806; }
    .n-tag.arha     { background: #eaf3de; color: #1a6b35; }
    .n-tag.chukhal  { background: #fff3cd; color: #633806; }
    .n-tag.video    { background: #fbeaf0; color: #72243e; }
    .n-date { font-size: 12px; color: #aaa; }

    .n-title {
        font-family: 'Noto Serif', Georgia, serif;
        font-size: 17px; font-weight: 600;
        color: #003a8f; line-height: 1.4; margin: 0;
    }
    .n-desc { font-size: 13.5px; color: #666; line-height: 1.7; margin: 0; }
    .n-link {
        font-size: 13px; font-weight: 600;
        color: #003a8f; text-decoration: none;
        display: inline-flex; align-items: center; gap: 4px;
        align-self: flex-start;
        border-bottom: 1.5px solid transparent;
        transition: border-color 0.15s;
    }
    .n-link:hover { border-bottom-color: #003a8f; }

    /* ===== DETAIL MODAL ===== */
    .modal-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(4px);
        z-index: 2000;
        overflow-y: auto;
        padding: 40px 16px;
    }
    .modal-overlay.open { display: block; }

    .modal-box {
        background: #fff;
        max-width: 760px;
        margin: 0 auto;
        border-radius: 20px;
        overflow: hidden;
        animation: modalIn 0.25s ease;
    }
    @keyframes modalIn {
        from { opacity: 0; transform: translateY(-16px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .modal-close {
        position: absolute;
        top: 16px; right: 16px;
        background: rgba(255,255,255,0.9);
        border: none; border-radius: 50%;
        width: 36px; height: 36px;
        font-size: 20px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        color: #333; transition: background 0.15s;
        z-index: 10;
    }
    .modal-close:hover { background: #fff; }

    .modal-hero {
        position: relative;
        height: 280px; overflow: hidden;
    }
    .modal-hero img {
        width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .modal-hero-placeholder {
        width: 100%; height: 100%;
        display: flex; align-items: center; justify-content: center;
        font-size: 72px;
    }

    .modal-content { padding: 32px 36px 40px; }

    .modal-meta {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 16px; flex-wrap: wrap;
    }
    .modal-tag {
        font-size: 11px; font-weight: 600;
        padding: 4px 14px; border-radius: 100px;
    }
    .modal-tag.surgalt { background: #e8f0fe; color: #003a8f; }
    .modal-tag.medee   { background: #faeeda; color: #633806; }
    .modal-tag.arha    { background: #eaf3de; color: #1a6b35; }
    .modal-tag.chukhal { background: #fff3cd; color: #633806; }
    .modal-date { font-size: 12.5px; color: #aaa; }

    .modal-title {
        font-family: 'Noto Serif', Georgia, serif;
        font-size: 24px; font-weight: 600;
        color: #003a8f; line-height: 1.35;
        margin: 0 0 16px;
    }
    .modal-body {
        font-size: 15px; line-height: 1.85;
        color: #444;
    }
    .modal-body p { margin-bottom: 14px; }
    .modal-body p:last-child { margin-bottom: 0; }

    .modal-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
        margin-top: 24px;
    }
    .modal-gallery img {
        width: 100%; border-radius: 10px;
        object-fit: cover; aspect-ratio: 4/3;
    }

    .modal-divider {
        height: 1px; background: #e8f0fe;
        margin: 24px 0;
    }
    .modal-footer {
        display: flex; align-items: center;
        justify-content: space-between;
    }
    .modal-slogan {
        font-size: 13px; font-style: italic;
        color: #003a8f; font-weight: 600;
    }
    .modal-share { display: flex; gap: 8px; }
    .share-btn {
        width: 32px; height: 32px;
        border-radius: 8px; border: 1px solid #dde3f0;
        background: #f4f7ff;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 14px;
        transition: background 0.15s;
    }
    .share-btn:hover { background: #e8f0fe; }

    /* Empty state */
    .empty-state {
        text-align: center; padding: 60px 20px;
        color: #aaa; display: none;
    }
    .empty-state .e-icon { font-size: 48px; margin-bottom: 12px; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 700px) {
        .n-card { grid-template-columns: 1fr; }
        .n-img { height: 180px; }
        .n-body { padding: 18px 20px; }
        .n-title { font-size: 15px; }
        .modal-content { padding: 24px 20px 32px; }
        .modal-title { font-size: 20px; }
        .modal-hero { height: 200px; }
        .filter-wrap { flex-direction: column; align-items: stretch; }
        .search-box { min-width: auto; }
    }