/* Review Dạo Tech — công nghệ tươi trẻ: nền sáng lạnh, xanh điện, bento, nhãn mono. Phẳng, không gradient. */
:root{
	--bg:#f5f7fb;--surface:#fff;--ink:#0b1220;--muted:#4a5568;--faint:#667085;--line:#e1e6f0;--soft:#eaeefa;
	--primary:#2457f5;--primary-ink:#1b45cc;--on-primary:#fff;--mint:#12b886;--lemon:#ffe45c;
	--head:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	--body:'Inter','Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
	--r:16px;--r-sm:10px;--wrap:1200px;--read:72ch;--hh:64px;
}
@media(prefers-color-scheme:dark){
	:root{--bg:#0a0f1c;--surface:#121a2c;--ink:#eef2fb;--muted:#b5bfd3;--faint:#97a3bb;--line:#243049;--soft:#17213a;--primary:#6b8dff;--primary-ink:#8aa5ff;--on-primary:#06102e}
	.chip,.tile,.card__media,.section__title{--tint:#17213a!important;--tintfg:#b8c7ff!important}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video,iframe{max-width:100%;height:auto}
a{color:var(--primary-ink);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
::selection{background:var(--lemon);color:#0b1220}
h1,h2,h3,h4{font-family:var(--head);line-height:1.25;margin:0;font-weight:700;text-wrap:balance}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--r-sm);z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.muted{color:var(--faint)}
.mono{font:600 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--primary-ink)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.site-header__in{max-width:var(--wrap);margin:0 auto;min-height:var(--hh);padding:0 24px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand__name{font:800 19px/1 var(--head);letter-spacing:-.01em}
.nav__list{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.nav__list a{display:block;padding:9px 14px;border-radius:999px;color:var(--muted);text-decoration:none;font:500 14.5px/1.2 var(--head);transition:background-color .16s,color .16s}
.nav__list a:hover{background:var(--soft);color:var(--ink)}
.nav__list a[aria-current]{background:var(--ink);color:var(--bg)}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ink);border-radius:var(--r-sm);cursor:pointer;transition:background-color .16s}
.icon-btn:hover{background:var(--soft)}
.nav-toggle{display:none}

/* Buttons / chips */
.btn{display:inline-block;background:var(--primary);color:var(--on-primary);border:1px solid var(--primary);padding:12px 22px;border-radius:999px;font:600 15px/1.2 var(--head);text-decoration:none;cursor:pointer;transition:background-color .16s,border-color .16s,color .16s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);color:var(--bg)}
.chip{display:inline-block;align-self:flex-start;background:var(--tint,var(--soft));color:var(--tintfg,var(--primary-ink));font:600 11.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-radius:999px}

/* Hero */
.hero{border-bottom:1px solid var(--line);background-image:radial-gradient(var(--line) 1.2px,transparent 1.2px);background-size:22px 22px}
.hero__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:64px;padding-bottom:56px}
.hero__title{font-size:clamp(30px,4.6vw,52px);line-height:1.12;letter-spacing:-.02em;margin-top:16px;max-width:18ch}
.hero__lead{font-size:18px;color:var(--muted);margin-top:16px;max-width:52ch}
.hero__lead strong{color:var(--ink)}
.search{display:flex;gap:10px;margin-top:24px;max-width:520px}
.search input{flex:1;min-width:0;height:48px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:16px var(--body)}
.search input:focus{border-color:var(--primary);outline:3px solid color-mix(in srgb,var(--primary) 25%,transparent)}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tiles li:first-child{grid-column:1 / -1}
.tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico name" "ico n";column-gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--ink);transition:transform .16s,border-color .16s}
.tile:hover{transform:translateY(-2px);border-color:var(--primary);color:var(--ink)}
.tile__ico{grid-area:ico;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--tint);color:var(--tintfg)}
.tile__name{grid-area:name;font:700 16px/1.2 var(--head)}
.tile__n{grid-area:n;font:500 13px/1.4 var(--mono);color:var(--faint)}

/* Sections */
.section{padding-top:56px;padding-bottom:0}
.section__head{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-bottom:20px}
.section__head h2{font-size:26px;letter-spacing:-.01em}
.section__title{display:flex;align-items:center;gap:12px}
.section__ico{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--tint);color:var(--tintfg)}
.more{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--head);text-decoration:none;padding:10px 4px}
.more:hover{text-decoration:underline}

/* Bento + grid + cards */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bento .card--feat{grid-column:span 2;grid-row:span 2}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .16s,border-color .16s}
.card:hover{transform:translateY(-3px);border-color:var(--primary)}
.card__media{display:block;aspect-ratio:16/10;background:var(--tint,var(--soft));overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__ph{display:grid;place-items:center;height:100%;padding:16px;text-align:center;font:600 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tintfg,var(--primary-ink))}
.card__body{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1}
.card__title{font-size:17px;line-height:1.4}
.card__title a{color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card:hover .card__title a{color:var(--primary-ink)}
.card__excerpt{color:var(--muted);font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__meta{margin-top:auto;font:500 12.5px/1.4 var(--mono);color:var(--faint)}
.card--feat .card__media{aspect-ratio:auto;flex:1;min-height:260px}
.card--feat .card__body{flex:0 0 auto}
.card--feat .card__title{font-size:24px}
.empty{padding:48px 0;color:var(--muted)}

/* Page head */
.page-head{border-bottom:1px solid var(--line);padding:40px 0 32px;background-image:radial-gradient(var(--line) 1.2px,transparent 1.2px);background-size:22px 22px}
.page-head__title{font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;max-width:24ch}
.page-head__sub{color:var(--muted);margin-top:12px;max-width:var(--read)}
.crumbs{font:500 13px/1.4 var(--mono);color:var(--faint);margin-bottom:14px}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 6px}
.notfound{padding-top:64px}
.notfound .btn{margin-top:20px}

/* Pagination */
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:36px 0 8px}
.pager .page-numbers{min-width:44px;height:44px;display:grid;place-items:center;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);text-decoration:none;font:600 14px/1 var(--head)}
.pager a.page-numbers:hover{border-color:var(--primary);color:var(--primary-ink)}
.pager .current{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pager .dots{border:0;background:none}

/* Entry */
.entry{max-width:calc(var(--read) + 48px);margin:0 auto;padding:44px 24px 8px}
.entry__head .chip{margin-bottom:14px}
.entry__title{font-size:clamp(28px,4.4vw,42px);line-height:1.2;letter-spacing:-.02em}
.entry__meta{font:500 13px/1.4 var(--mono);color:var(--faint);margin-top:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.entry__hero{margin:24px 0 0}
.entry__hero img{width:100%;border-radius:var(--r)}
.prose{font-size:17.5px;line-height:1.8;margin-top:28px;overflow-wrap:break-word}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:27px;margin-top:1.9em;letter-spacing:-.01em}
.prose h3{font-size:21px;margin-top:1.6em}
.prose a{color:var(--primary-ink)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.4em}
.prose blockquote{margin-left:0;padding:4px 0 4px 18px;border-left:4px solid var(--lemon);color:var(--muted)}
.prose img{border-radius:var(--r-sm);height:auto}
.prose figure,.prose .wp-caption{margin-left:0;margin-right:0;max-width:100%;width:auto!important}
.prose img{max-width:100%}
.prose figcaption,.prose .wp-caption-text{font-size:13.5px;color:var(--faint);margin-top:8px;text-align:center}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose th{background:var(--soft)}
.prose iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-sm)}
.prose .alignleft,.prose .alignright,.prose .aligncenter{float:none;display:block;margin-left:auto;margin-right:auto}
.page-links{margin-top:20px;font-size:15px}
.postnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.postnav__a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);background:var(--surface);transition:border-color .16s}
.postnav__a:hover{border-color:var(--primary)}
.postnav__a small{display:block;font:500 12px/1 var(--mono);color:var(--faint);margin-bottom:8px}
.postnav__a span{font:600 15px/1.4 var(--head);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.postnav__a--next{text-align:right;grid-column:2}
.hubrel{font-size:16px}
.hubrel__h{font-size:20px!important;margin-bottom:10px}
.hubrel__list{padding-left:1.2em}

/* Footer */
.site-footer{margin-top:88px;background:var(--ink);color:#c5cee0}
.site-footer__in{max-width:var(--wrap);margin:0 auto;padding:40px 24px 28px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px}
.site-footer .brand__name{color:#fff;font-size:20px}
.site-footer__about p{margin-top:10px;font-size:14.5px;max-width:48ch}
.site-footer__nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.site-footer__nav a{display:inline-block;padding:6px 0;color:#c5cee0;text-decoration:none;font-size:14.5px}
.site-footer__nav a:hover{color:var(--lemon);text-decoration:underline}
.site-footer__copy{max-width:var(--wrap);margin:0 auto;padding:16px 24px 28px;border-top:1px solid #243049;font:500 12.5px/1.4 var(--mono);color:#97a3bb}
@media(prefers-color-scheme:dark){.site-footer{background:#060a14}}

/* Responsive */
@media(max-width:1000px){
	.hero__in{grid-template-columns:1fr;gap:32px;padding-top:44px;padding-bottom:40px}
	.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
	.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.site-footer__in{grid-template-columns:1fr}
}
@media(max-width:760px){
	.site-header__in{padding:0 16px;gap:4px}
	.wrap,.entry{padding-left:16px;padding-right:16px}
	.nav-toggle{display:inline-grid}
	.js .nav{display:none;position:absolute;top:var(--hh);left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 14px}
	.js .nav.is-open{display:block}
	.nav__list{flex-direction:column;gap:2px}
	.nav__list a{padding:13px 14px}
	.hero__lead{font-size:16.5px}
	.prose{font-size:17px}
	.postnav{grid-template-columns:1fr}
	.postnav__a--next{grid-column:auto}
	.site-footer__in,.site-footer__copy{padding-left:16px;padding-right:16px}
}
@media(max-width:560px){
	.bento,.grid{grid-template-columns:1fr}
	.bento .card--feat{grid-column:auto;grid-row:auto}
	.tiles{grid-template-columns:1fr}
	.search{flex-direction:column}
	.search input{flex:none;width:100%}
	.search .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.card:hover,.tile:hover{transform:none}}