/* NP UI 3.1 — header, logo, thẻ bài 16:9, trang chủ, chuyên mục. Tải sau style.css. */
html:root{--np-ratio-card:16 / 9;--np-ui-grad:linear-gradient(120deg,#22d3ee 0%,#818cf8 55%,#e879f9 100%);--np-ui-bg:#0b0f17;--np-ui-panel:#111827;--np-ui-panel-2:#0f1625;--np-ui-line:rgba(148,163,184,.16);--np-ui-line-strong:rgba(148,163,184,.3);--np-ui-text:#e6edf6;--np-ui-soft:#c3cede;--np-ui-muted:#8fa0b5;--np-ui-radius:16px}
body{background:var(--np-ui-bg)}

/* ---------- Header ---------- */
.site-header{background:rgba(9,13,22,.82)!important;-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border-bottom:0!important;box-shadow:none!important}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.45),rgba(129,140,248,.45),rgba(232,121,249,.35),transparent)}
.site-header .h-16{height:64px}
.site-header nav.md\:flex{gap:4px}
.site-header nav.md\:flex>*+*{margin-left:0!important}
.site-header nav.md\:flex a{padding:8px 12px;border-radius:999px;font-size:15px;font-weight:600;color:#cbd5e1!important;transition:background .2s,color .2s}
.site-header nav.md\:flex a:hover{background:rgba(148,163,184,.12);color:#fff!important;text-decoration:none!important}
.site-header input[type=search]{background:rgba(148,163,184,.08)!important;border:1px solid var(--np-ui-line-strong)!important;border-radius:999px!important;padding-left:38px!important;min-height:40px!important;font-size:14px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa0b5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:14px 50%!important;background-size:16px!important;transition:width .25s,border-color .2s}
.site-header input[type=search]:focus{border-color:#38bdf8!important;outline:0}
@media(min-width:768px){.site-header form .md\:w-48:focus{width:15rem}}
#mobile-menu a{color:#e2e8f0!important}

/* ---------- Logo ---------- */
.np-logo{display:inline-flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none!important;line-height:1}
.np-logo__mark{width:38px;height:38px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(99,102,241,.35));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.np-logo:hover .np-logo__mark{transform:rotate(-6deg) scale(1.05)}
.np-logo__text{display:flex;flex-direction:column;gap:4px}
.np-logo__word{font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.np-logo__accent{margin-left:.22em;background:var(--np-ui-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.np-logo__tag{font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--np-ui-muted)}
@media(max-width:380px){.np-logo__tag{display:none}.np-logo__word{font-size:19px}}

/* ---------- Ảnh 16:9 dùng chung ---------- */
.np-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0a1020;border-radius:12px}
.np-media img,.np-media .np-media__img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;object-position:center;margin:0!important;border-radius:0!important;box-shadow:none!important;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.np-media__empty{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 20% 0%,rgba(34,211,238,.22),transparent 55%),radial-gradient(120% 90% at 100% 100%,rgba(232,121,249,.2),transparent 50%),#0a1020}
.np-media__mark{width:56px;height:56px;opacity:.85}

/* Sửa các template cũ: mọi ảnh đại diện giữ đúng 16:9, không cắt chữ */
img.object-cover.h-48,img.object-cover.h-64,.news-card img{height:auto!important;aspect-ratio:16/9;object-fit:cover}
.post-item .w-32.h-20{height:auto!important;aspect-ratio:16/9;width:9rem}
.post-item .w-32.h-20 img{aspect-ratio:16/9;height:100%!important}
.just-watched-card__image{height:auto!important;aspect-ratio:16/9;align-self:center}
.just-watched-card__image img{height:100%}
.featured-post-card__image{align-self:center}
.featured-post-card__image img{height:auto!important;aspect-ratio:16/9}
.game-card__image{height:auto!important;aspect-ratio:16/9}
.product-card__image img{height:auto!important;aspect-ratio:16/9}
.related-card-thumbnail{height:auto!important;aspect-ratio:16/9;background-size:cover!important;background-position:center!important}
.related-post-item .related-post-thumbnail img{width:128px!important;height:72px!important;border-radius:8px!important}
.np-ds-card-image{aspect-ratio:16/9!important}
.np-thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* Khối video dài ở trang chủ: ảnh nhỏ bên phải giữ 16:9 */
.np-video-feature-grid .np-video-card:not(.np-video-card--featured) .np-video-card__link{grid-template-columns:minmax(0,46%) minmax(0,54%)!important;align-items:center;min-height:0!important}
.np-video-feature-grid .np-video-card:not(.np-video-card--featured) .np-video-card__cover{height:auto!important;min-height:0!important;aspect-ratio:16/9!important;align-self:center}
.np-video-card__cover img{object-position:center}

/* ---------- Thẻ bài viết ---------- */
.np-card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.np-card__media{flex-shrink:0;box-shadow:0 0 0 1px var(--np-ui-line)}
.np-card:hover .np-media img{transform:scale(1.035)}
.np-card__badge{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;padding:4px 9px 4px 7px;border-radius:999px;background:rgba(5,8,15,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.np-card__badge svg{width:13px;height:13px}
.np-card__video{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:1px 8px 1px 5px;border-radius:999px;background:rgba(232,121,249,.12);color:#f0abfc;font-weight:700}
.np-card__video svg{width:11px;height:11px}
.np-video-feature-grid .np-video-card:not(.np-video-card--featured) .np-video-card__play{display:none}
.np-card__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.np-card__cat{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#67e8f9!important;text-decoration:none!important}
.np-card__cat:hover{color:#a5f3fc!important}
.np-card__title{margin:0;font-size:1.075rem;line-height:1.38;font-weight:700;letter-spacing:-.005em;color:var(--np-ui-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.np-card__title a{color:inherit!important;text-decoration:none!important;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s}
.np-card:hover .np-card__title a{background-size:100% 1px}
.np-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.np-card__cat{position:relative;z-index:2}
.np-card__excerpt{margin:0;color:var(--np-ui-soft);font-size:.97rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.np-card__meta{margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--np-ui-muted)}
.np-card--lead{gap:18px}
.np-card--lead .np-card__title{font-size:clamp(1.45rem,1rem + 1.4vw,2.1rem);line-height:1.22;letter-spacing:-.02em;-webkit-line-clamp:4}
.np-card--lead .np-card__media{border-radius:18px}
.np-card--row,.np-card--mini{flex-direction:row;align-items:flex-start;gap:14px}
.np-card--row .np-card__media{width:42%;max-width:220px}
.np-card--mini .np-card__media{width:132px}
.np-card--row .np-card__title{font-size:1rem;-webkit-line-clamp:3}
.np-card--mini .np-card__title{font-size:.95rem;-webkit-line-clamp:3}
.np-card--mini .np-card__cat{display:none}

/* ---------- Bố cục trang chủ ---------- */
.np-home{padding-bottom:40px}
.np-wrap{width:100%;max-width:1328px;margin:0 auto;padding:0 24px}
@media(max-width:639px){.np-wrap{padding:0 18px}}
.np-sec{padding:44px 0}
.np-sec+.np-sec{border-top:1px solid var(--np-ui-line)}
.np-sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.np-sec__eyebrow{display:block;margin-bottom:6px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:var(--np-ui-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.np-sec__title{margin:0;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);font-weight:800;letter-spacing:-.02em;color:#fff}
.np-sec__more{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--np-ui-line-strong);border-radius:999px;font-size:13.5px;font-weight:700;color:#e2e8f0!important;text-decoration:none!important;transition:border-color .2s,background .2s}
.np-sec__more:hover{border-color:#38bdf8;background:rgba(56,189,248,.08)}
.np-hero{padding-top:36px}
.np-hero__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:36px;align-items:start}
.np-hero__list{display:flex;flex-direction:column;gap:20px}
.np-hero__list .np-card+.np-card{padding-top:20px;border-top:1px solid var(--np-ui-line)}
@media(max-width:959px){.np-hero__grid{grid-template-columns:1fr;gap:28px}}
.np-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 22px}
@media(max-width:1099px){.np-grid4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:819px){.np-grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}
@media(max-width:519px){.np-grid4{grid-template-columns:1fr}.np-grid4 .np-card--grid{flex-direction:row;gap:14px}.np-grid4 .np-card--grid .np-card__media{width:40%;flex-shrink:0}.np-grid4 .np-card--grid .np-card__title{font-size:.98rem}.np-grid4 .np-card--grid .np-card__cat{font-size:10.5px}}
.np-topics{display:flex;flex-wrap:wrap;gap:10px}
.np-topics a{padding:8px 14px;border:1px solid var(--np-ui-line-strong);border-radius:999px;font-size:14px;font-weight:600;color:#cbd5e1!important;text-decoration:none!important}
.np-topics a:hover{border-color:#a78bfa;color:#fff!important}
.np-home .np-video-section{border-top:1px solid var(--np-ui-line)}

/* ---------- Trang chuyên mục ---------- */
.np-archive-head{padding:48px 0 28px;border-bottom:1px solid var(--np-ui-line);margin-bottom:36px}
.np-archive-head h1{margin:6px 0 0;font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);font-weight:800;letter-spacing:-.03em;color:#fff}
.np-archive-head__desc{max-width:720px;margin-top:12px;color:var(--np-ui-soft);font-size:1.05rem;line-height:1.7}
.np-archive-head__count{margin-top:10px;color:var(--np-ui-muted);font-size:14px}
.np-archive-lead{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--np-ui-line)}
.np-archive-lead .np-card--lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center}
@media(max-width:859px){.np-archive-lead .np-card--lead{grid-template-columns:1fr;gap:18px}}
.np-archive .pagination{margin:48px 0 24px}

.search-results-list .np-card--row{padding-bottom:24px;border-bottom:1px solid var(--np-ui-line)}
.search-results-list .np-card--row .np-card__media{width:34%;max-width:280px}
.search-results-list .np-card--row .np-card__title{font-size:1.15rem}

/* ---------- Footer ---------- */
.site-footer{background:#080c14!important;border-top:1px solid var(--np-ui-line)!important}
.site-footer{padding-top:0!important}
.np-foot{max-width:1328px;margin:0 auto;padding:48px 24px 28px;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px;border-bottom:1px solid var(--np-ui-line)}
.np-foot__brand p{max-width:34ch;margin:16px 0 0;color:var(--np-ui-muted);font-size:14.5px;line-height:1.65}
.np-foot__col{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.np-foot__title{margin:0 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#e2e8f0}
.np-foot__col a{color:var(--np-ui-muted)!important;text-decoration:none!important;width:fit-content}
.np-foot__col a:hover{color:#fff!important}
.site-footer .footer-container{padding-top:18px}
@media(max-width:899px){.np-foot{grid-template-columns:1fr 1fr}.np-foot__brand{grid-column:1/-1}}
@media(max-width:479px){.np-foot{padding:36px 18px 22px;gap:26px}}
.np-intro{padding:34px 0 0}
.np-intro h1{margin:0;max-width:26ch;font-size:clamp(1.6rem,1.1rem + 2vw,2.5rem);line-height:1.18;font-weight:800;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.np-intro h1 span{background:var(--np-ui-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.np-intro p{max-width:62ch;margin:12px 0 0;color:var(--np-ui-soft);font-size:1.02rem;line-height:1.65}
.np-intro__chips{display:flex;gap:8px;margin-top:18px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.np-intro__chips::-webkit-scrollbar{display:none}
.np-intro__chips a{flex-shrink:0;padding:7px 14px;border:1px solid var(--np-ui-line-strong);border-radius:999px;font-size:13.5px;font-weight:700;color:#dbe4ef!important;text-decoration:none!important;transition:border-color .2s,background .2s}
.np-intro__chips a:hover{border-color:#22d3ee;background:rgba(34,211,238,.08)}
.np-intro+.np-hero{padding-top:28px;border-top:0!important}
.np-page .np-article__title{max-width:24ch}