/**
 * news-page.css — Frontend /tin-tuc/ page
 * Liquid Glass + vestment color system
 */

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.np-page {
    margin: 0 auto;
    padding: 0 0 30px;
    min-height: 100dvh;
}

/* ── Hero block ──────────────────────────────────────────────────────────── */
.np-hero {
    margin: 14px 16px 0;
    border-radius: 20px;
    padding: 18px 20px 16px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(160deg, var(--color-primary-dark, #1a3a6b) 0%, var(--color-primary, #2563eb) 100%);
    box-shadow:
        0 8px 32px rgba(0,0,0,.22),
        0 1px 0 rgba(255,255,255,.18) inset;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.np-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
.np-hero-title {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    line-height: 1.2;
}
.np-hero-sub {
    font-size: .82rem;
    opacity: .82;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.np-hero-sub span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.np-hero-icon {
    position: absolute;
    right: 18px; top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    opacity: .15;
    pointer-events: none;
    line-height: 1;
}

/* ── Category filter strip ───────────────────────────────────────────────── */
.np-cats-wrap {
    margin: 14px 0 0;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 15px 15px 0px 15px;
    border-radius: 5px;
}
.np-cats-strip {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.np-cats-strip::-webkit-scrollbar { display: none; }

.np-cat-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.6);
    color: #374151;
    transition: all .18s;
    white-space: nowrap;
    user-select: none;
}
.np-cat-pill:hover {
    background: rgba(255,255,255,.9);
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
}
.np-cat-pill.active {
    background: linear-gradient(135deg, var(--color-primary-dark, #1a3a6b), var(--color-primary, #2563eb));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(37,99,235,.35);
}

/* ── Search bar ──────────────────────────────────────────────────────────── */
.np-search-wrap {
    padding: 12px 16px 4px;
}
.np-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px 10px 40px;
    border-radius: 14px;
    border: 1.5px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(12px);
    font-size: .9rem;
    color: #1e293b;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 18px;
}
.np-search:focus {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.np-search::placeholder { color: #94a3b8; }

/* ── News grid ───────────────────────────────────────────────────────────── */
.np-section-label {
    padding: 14px 16px 6px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
}
.np-section-label span {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.np-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 16px 0;
}

/* ── News card ───────────────────────────────────────────────────────────── */
.np-card {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.8) inset;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
    position: relative;
    display: flex;
    flex-direction: column;
}
.np-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    z-index: 1;
}
.np-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.8) inset;
}
.np-card:active {
    transform: scale(.97);
}

/* Featured card spans full width */
.np-card.np-card-featured {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
}
.np-card.np-card-featured .np-card-thumb-wrap {
    width: 45%;
    flex-shrink: 0;
    aspect-ratio: unset;
    min-height: 120px;
}
.np-card.np-card-featured .np-card-body {
    flex: 1;
}
.np-card.np-card-featured .np-card-title {
    font-size: .95rem;
    -webkit-line-clamp: 3;
}

.np-card-thumb-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e2e8f0;
    position: relative;
}
.np-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}
.np-card:hover .np-card-thumb {
    transform: scale(1.04);
}
.np-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #94a3b8;
}

.np-card-body {
    padding: 10px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.np-card-top {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.np-card-cat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: .67rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.np-card-featured-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 99px;
    font-size: .67rem;
    font-weight: 800;
    background: #fef3c7;
    color: #92400e;
    line-height: 1.5;
}

.np-card-title {
    font-size: .84rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    flex: 1;
}

.np-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    color: #94a3b8;
    flex-wrap: wrap;
    margin-top: auto;
}
.np-card-source {
    font-weight: 700;
    color: #64748b;
}
.np-card-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}

/* Accent bar at bottom of card – uses category color */
.np-card-accent {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--color-primary, #2563eb), var(--color-primary-light, #93c5fd));
    margin-top: auto;
}

/* ── Load More button ────────────────────────────────────────────────────── */
.np-load-more-wrap {
    padding: 18px 16px 10px;
    text-align: center;
}
.np-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, var(--color-primary-dark, #1a3a6b), var(--color-primary, #2563eb));
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(37,99,235,.35);
    transition: transform .15s, box-shadow .15s;
    width: 100%;
    max-width: 300px;
    justify-content: center;
}
.np-load-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37,99,235,.45);
}
.np-load-more:active {
    transform: scale(.97);
}
.np-load-more:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* ── Loading skeleton ────────────────────────────────────────────────────── */
.np-skeleton {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 16px 0;
}
.np-skel-card {
    background: rgba(255,255,255,.5);
    border-radius: 18px;
    overflow: hidden;
}
.np-skel-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: np-shimmer 1.4s infinite;
}
.np-skel-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.np-skel-line {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: np-shimmer 1.4s infinite;
}
.np-skel-line.short { width: 60%; }
@keyframes np-shimmer {
    to { background-position: -200% 0; }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.np-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
}
.np-empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
    opacity: .5;
}
.np-empty-text {
    font-size: .9rem;
    font-weight: 600;
}

/* ── Article popup ───────────────────────────────────────────────────────── */
.np-article-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.np-article-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.np-article-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 901;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.2), 0 -1px 0 rgba(255,255,255,.9) inset;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    max-height: 96dvh;
    overflow: hidden;
}
.np-article-sheet.open {
    transform: translateY(0);
}

.np-article-handle {
    width: 40px;
    height: 4px;
    background: rgba(0,0,0,.15);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
}

.np-article-header {
    padding: 12px 16px 14px;
    border-bottom: 1px solid rgba(0,0,0,.07);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}
.np-article-info {
    flex: 1;
    min-width: 0;
}
.np-article-title {
    font-size: .95rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 4px;
}
.np-article-source-link {
    font-size: .75rem;
    color: var(--color-primary, #2563eb);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.np-article-source-link:hover {
    text-decoration: underline;
}
.np-article-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.07);
    color: #374151;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.np-article-close:hover {
    background: rgba(0,0,0,.14);
}

.np-article-iframe-wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.np-article-iframe {
    width: 100%;
    flex: 1;
    height: calc(96dvh - 120px);
    border: none;
    background: #fff;
}

/* Loading bar at top of iframe */
.np-article-loading {
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary, #2563eb), var(--color-primary-light, #93c5fd), var(--color-primary, #2563eb));
    background-size: 200% 100%;
    animation: np-loadbar 1.2s linear infinite;
    flex-shrink: 0;
}
@keyframes np-loadbar {
    to { background-position: -200% 0; }
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark1) {
    .np-cats-strip {
        background: rgba(10,20,50,.72);
        border-bottom-color: rgba(255,255,255,.08);
    }
    .np-cat-pill {
        background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.12);
        color: #cbd5e1;
    }
    .np-cat-pill:hover {
        background: rgba(255,255,255,.14);
        border-color: var(--color-primary, #2563eb);
        color: #e2e8f0;
    }
    .np-search {
        background: rgba(10,20,50,.5);
        border-color: rgba(255,255,255,.1);
        color: #e2e8f0;
    }
    .np-search::placeholder { color: #475569; }
    .np-card {
        background: rgba(10,20,50,.65);
        border-color: rgba(255,255,255,.08);
        box-shadow: 0 4px 18px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.04) inset;
    }
    .np-card-title { color: #e2e8f0; }
    .np-card-meta { color: #475569; }
    .np-card-source { color: #94a3b8; }
    .np-card-thumb-placeholder {
        background: linear-gradient(135deg, #1e293b, #0f172a);
        color: #475569;
    }
    .np-skel-card { background: rgba(10,20,50,.4); }
    .np-skel-thumb,
    .np-skel-line {
        background: linear-gradient(90deg, #1e293b 25%, #0f172a 50%, #1e293b 75%);
        background-size: 200% 100%;
    }
    .np-article-sheet {
        background: rgba(10,20,50,.88);
        box-shadow: 0 -8px 40px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.05) inset;
    }
    .np-article-title { color: #e2e8f0; }
    .np-article-close {
        background: rgba(255,255,255,.08);
        color: #cbd5e1;
    }
    .np-article-close:hover { background: rgba(255,255,255,.15); }
    .np-article-header { border-bottom-color: rgba(255,255,255,.07); }
    .np-article-iframe { background: #0f172a; }
    .np-article-handle { background: rgba(255,255,255,.15); }
    .np-empty { color: #475569; }
    .np-section-label { color: #475569; }
    .np-section-label span { background: #1e293b; }
}

/* body-level dark class (JS-toggled) */
body.dark-mode .np-cats-strip {
    background: rgba(10,20,50,.72);
    border-bottom-color: rgba(255,255,255,.08);
}
body.dark-mode .np-cat-pill {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
    color: #cbd5e1;
}
body.dark-mode .np-cat-pill:hover {
    background: rgba(255,255,255,.14);
    color: #e2e8f0;
}
body.dark-mode .np-search {
    background: rgba(10,20,50,.5);
    border-color: rgba(255,255,255,.1);
    color: #e2e8f0;
}
body.dark-mode .np-card {
    background: rgba(10,20,50,.65);
    border-color: rgba(255,255,255,.08);
}
body.dark-mode .np-card-title { color: #e2e8f0; }
body.dark-mode .np-card-source { color: #94a3b8; }
body.dark-mode .np-card-thumb-placeholder {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #475569;
}
body.dark-mode .np-skel-card { background: rgba(10,20,50,.4); }
body.dark-mode .np-skel-thumb,
body.dark-mode .np-skel-line {
    background: linear-gradient(90deg, #1e293b 25%, #0f172a 50%, #1e293b 75%);
    background-size: 200% 100%;
}
body.dark-mode .np-article-sheet {
    background: rgba(10,20,50,.88);
}
body.dark-mode .np-article-title { color: #e2e8f0; }
body.dark-mode .np-article-close {
    background: rgba(255,255,255,.08);
    color: #cbd5e1;
}
body.dark-mode .np-article-header { border-bottom-color: rgba(255,255,255,.07); }
body.dark-mode .np-article-iframe { background: #0f172a; }
body.dark-mode .np-empty { color: #475569; }
body.dark-mode .np-section-label { color: #475569; }
body.dark-mode .np-section-label span { background: #1e293b; }