/* === velvet-night — deep purple × rose pink === */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
    --vn-bg:       #0d0718;
    --vn-surf:     #170c29;
    --vn-surf2:    #1e1137;
    --vn-bdr:      #2d1a4a;
    --vn-txt:      #e8ddf5;
    --vn-muted:    #a99bbe;
    --vn-acc:      #d4548a;
    --vn-acc-h:    #e879a0;
    --vn-acc-soft: rgba(212,84,138,.15);
    --vn-rad:      12px;
    --vn-shadow:   0 4px 24px rgba(0,0,0,.5);
    --vn-font:     'Nunito', system-ui, sans-serif;
}

/* override global vars for shared components */
:root {
    --color-bg:           var(--vn-bg);
    --color-surface:      var(--vn-surf);
    --color-surface-hover:var(--vn-surf2);
    --color-border:       var(--vn-bdr);
    --color-text:         var(--vn-txt);
    --color-text-muted:   #a99bbe;
    --color-accent:       var(--vn-acc);
    --color-accent-hover: var(--vn-acc-h);
    --color-accent-soft:  var(--vn-acc-soft);
    --color-white: #fff;
    --font:               var(--vn-font);
    --radius:             var(--vn-rad);
    --radius-lg:          var(--vn-rad);
    --shadow:             var(--vn-shadow);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--vn-font); background: var(--vn-bg); color: var(--vn-txt); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--vn-acc); text-decoration: none; transition: color .2s; }
a:hover { color: var(--vn-acc-h); }
img { max-width: 100%; height: auto; display: block; }

/* === Global text & headings === */
h1, h2, h3, h4, h5, h6 { color: var(--vn-txt); }
p { color: var(--vn-txt); }

/* === Layout === */
.grev9 { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.ahob6 { min-height: 60vh; padding: 2rem 0; }

/* === Header === */
.qvir9 { background: rgba(13,7,24,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--vn-bdr); position: sticky; top: 0; z-index: 100; }
.ixik0 { display: flex; align-items: center; gap: 1.25rem; height: 56px; }
.pzik1 { font-weight: 900; font-size: 1.3rem; letter-spacing: -.02em; color: var(--vn-acc); white-space: nowrap; }
.pzik1:hover { color: var(--vn-acc-h); }
.sbok0 { display: flex; gap: 0; }
.sbok0 a { padding: .5rem .9rem; font-weight: 600; color: var(--vn-muted); font-size: .85rem; border-left: 1px solid var(--vn-bdr); }
.sbok0 a:last-child { border-right: 1px solid var(--vn-bdr); }
.sbok0 a:hover { color: #fff; background: var(--vn-surf2); }
.iwil0 { display: inline-block; background: var(--vn-acc); border-radius: 999px; font-weight: 800; color: #fff; padding: .45rem 1.2rem; font-size: .82rem; white-space: nowrap; transition: background .2s; }
.iwil0:hover { background: var(--vn-acc-h); color: #fff; }
.wcok9 { position: relative; margin-left: auto; }
.yfoa5 { background: var(--vn-surf2); border: 1px solid var(--vn-bdr); color: var(--vn-txt); padding: .4rem .75rem; border-radius: var(--vn-rad); font-size: .85rem; font-family: var(--vn-font); outline: none; width: 180px; transition: border-color .2s; }
.yfoa5:focus { border-color: var(--vn-acc); }
.yfoa5::placeholder { color: var(--vn-muted); }
.mdoh4 { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--vn-muted); }
.qnor4 { position: absolute; top: 100%; left: 0; right: 0; background: var(--vn-surf); border: 1px solid var(--vn-bdr); border-radius: 0 0 8px 8px; display: none; z-index: 200; max-height: 300px; overflow-y: auto; }
.qnor4 a { display: block; padding: .6rem .8rem; color: var(--vn-txt); border-bottom: 1px solid var(--vn-bdr); font-size: .84rem; }
.qnor4 a:last-child { border-bottom: none; }
.qnor4 a:hover { background: var(--vn-surf2); color: var(--vn-acc); }

/* === Cards — portrait with gradient overlay === */
.bqeq1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.odeg8 {
    background: var(--vn-surf);
    border: 1px solid var(--vn-bdr);
    border-radius: var(--vn-rad);
    overflow: hidden;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
}
.odeg8:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(212,84,138,.2); }
.kked6 { display: block; position: absolute; inset: 0; }
.tjew4 { width: 100%; height: 100%; object-fit: cover; display: block; }
.odeg8::after {
    content: '';
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(to bottom, transparent, rgba(13,7,24,.92));
    pointer-events: none;
}
.efec6 {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1rem;
    z-index: 2;
}
.aneh5 { font-size: 1rem; font-weight: 800; margin-bottom: .2rem; }
.aneh5 a { color: #fff; }
.rleh4 { font-size: .78rem; color: rgba(255,255,255,.7); margin-bottom: .15rem; }
.npei1 { font-size: .75rem; color: var(--vn-acc); font-weight: 700; }
.cgeh5 { font-size: .74rem; color: rgba(255,255,255,.75); margin-top: .2rem; }
.xmeh6 { color: var(--vn-acc); }

/* card without image */
.odeg8:not(:has(.kked6)) { aspect-ratio: unset; min-height: 140px; }
.odeg8:not(:has(.tjew4)) .efec6 { position: static; padding: 1rem; }
.odeg8:not(:has(.tjew4)) .aneh5 a { color: var(--vn-txt); }
.odeg8:not(:has(.tjew4)) .rleh4 { color: var(--vn-muted); }
.odeg8:not(:has(.tjew4)) .cgeh5 { color: var(--vn-muted); }

/* === Footer === */
.aqib7 { background: var(--vn-surf); border-top: 1px solid var(--vn-bdr); }
.ttic2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; padding: 2.5rem 0; }
.rsio1 h4 { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--vn-muted); margin-bottom: 1rem; }
.rsio1 a { display: block; font-size: .85rem; color: var(--vn-muted); margin-bottom: .35rem; transition: color .2s; }
.rsio1 a:hover { color: var(--vn-acc-h); }
.rsio1 p { font-size: .85rem; color: #c4b8d9; }
.rriu3 { text-align: center; padding: 1rem 0; border-top: 1px solid var(--vn-bdr); font-size: .78rem; color: var(--vn-muted); }

/* === Pagination === */
.ajot0 { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.ajot0 a, .ajot0 span {
    display: inline-block; padding: .45rem .85rem; border-radius: 999px;
    font-size: .85rem; font-weight: 700;
    background: var(--vn-surf); border: 1px solid var(--vn-bdr); color: #c4b8d9;
}
.ajot0 a:hover { border-color: var(--vn-acc); color: var(--vn-acc); }
.ajot0 .rtes4 { background: var(--vn-acc); border-color: var(--vn-acc); color: #fff; }

/* === Search form === */
.qpoh1 { display: flex; gap: .5rem; margin-bottom: 2rem; }
.erof9 { flex: 1; background: var(--vn-surf); border: 1px solid var(--vn-bdr); border-radius: var(--vn-rad); padding: .65rem 1rem; color: var(--vn-txt); font-size: .95rem; outline: none; }
.erof9:focus { border-color: var(--vn-acc); }
.erof9::placeholder { color: var(--vn-muted); }
.zqox5 { background: var(--vn-acc); color: #fff; border: none; border-radius: var(--vn-rad); padding: .65rem 1.5rem; font-weight: 800; cursor: pointer; font-family: var(--vn-font); }
.zqox5:hover { background: var(--vn-acc-h); }

/* === Blog list === */
.hwr0 { display: grid; gap: 1.5rem; }
.eny0 { display: grid; grid-template-columns: 200px 1fr; gap: 1.25rem; background: var(--vn-surf); border: 1px solid var(--vn-bdr); border-radius: var(--vn-rad); overflow: hidden; }
.xse0 { width: 100%; height: 100%; object-fit: cover; }
.qps7 { padding: 1.25rem; }
.tqw6 { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--vn-acc); }
.eny0 h2 { font-size: 1.1rem; font-weight: 800; margin: .4rem 0; }
.eny0 h2 a { color: var(--vn-txt); }
.eny0 h2 a:hover { color: var(--vn-acc); }
.ork5 { font-size: .78rem; color: var(--vn-muted); }
.eny0 p { font-size: .88rem; color: #c4b8d9; margin: .5rem 0; }
.lvm5 { font-size: .82rem; font-weight: 700; color: var(--vn-acc); }
@media (max-width: 600px) { .eny0 { grid-template-columns: 1fr; } .vtb3 { height: 160px; display: block; } }

/* === Article === */
.chm1 { width: 100%; border-radius: var(--vn-rad); margin: 1rem 0; max-height: 420px; object-fit: cover; }
.ygm9 h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; }
.ajs4 { display: flex; gap: 1rem; align-items: center; margin-top: .5rem; font-size: .82rem; color: var(--vn-muted); }
.act5 { color: var(--vn-acc); font-weight: 700; }
.fsed1 { line-height: 1.75; color: var(--vn-txt); }
.fsed1 h2 { font-size: 1.25rem; font-weight: 800; color: var(--vn-acc-h); margin: 1.5rem 0 .75rem; }
.fsed1 h3 { color: var(--vn-txt); }
.fsed1 p { margin-bottom: 1rem; color: var(--vn-txt); }
.fsed1 a { color: var(--vn-acc); }
.fsed1 a:hover { color: var(--vn-acc-h); }
.fsed1 li { color: var(--vn-txt); }

/* === Blog categories nav === */
.qkb8 { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.jlr7 { padding: .35rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--vn-surf); border: 1px solid var(--vn-bdr); color: #c4b8d9; }
.umf9, .jlr7:hover { background: var(--vn-acc-soft); border-color: var(--vn-acc); color: var(--vn-acc); }

/* === Breadcrumb === */
.vxp7 { font-size: .8rem; color: var(--vn-muted); margin-bottom: 1.5rem; }
.vxp7 a { color: var(--vn-muted); }
.vxp7 a:hover { color: var(--vn-acc); }

/* === Empty state === */
.tbig6 { text-align: center; padding: 3rem 1rem; color: #c4b8d9; font-size: .95rem; }

@media (max-width: 700px) { .bqeq1 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .bqeq1 { grid-template-columns: 1fr; } }