/* Blog (templates home / category / single + patterns/tin-tuc-*.php). Loaded only on pages with a block of class "nw". */
.nw{--nw-left:248px;--nw-right:300px;--nw-av:40px;--nw-thumb:44px;--nw-ring:48px;--nw-rank:18px;--nw-icon:18px;--nw-edge:3px;--nw-search-min:180px;--nw-sr:1px;--nw-tab-h:32px;--nw-icon-l:22px;--nw-lift:0 1px 3px var(--shadow);--nw-track:.12em;--nw-row-gap:2px;--nw-z-row:1;--nw-focus:0 0 0 var(--nw-edge) var(--accent-tint);--nw-ink-edge:inset var(--nw-edge) 0 0 var(--accent-fill);--nw-top:calc(var(--nav-h) + var(--s-5));--dg-cover-h:176px;padding:var(--s-6) var(--s-4) var(--gap-section)}
.nw__page{max-width:var(--page);margin-inline:auto}
.nw-grid{display:grid;grid-template-columns:var(--nw-left) minmax(0,1fr) var(--nw-right);gap:var(--gap-grid);align-items:start}
.nw-grid > *{margin:0;min-width:0}
.nw-side{position:sticky;top:var(--nw-top);display:grid;gap:var(--gap-grid)}
.nw-side > *{margin:0}
.nw-mid{display:grid;gap:var(--gap-grid)}
.nw-mid > *{margin:0}

/* sidebar modules */
.nw-mod{display:grid;gap:var(--gap-stack);padding:var(--gap-card-s);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card)}
.nw-mod > *{margin:0;min-width:0}
.nw-mod .mono{font-size:var(--t-2xs)}
.nw-mod__p{color:var(--ink-2);font-size:var(--t-s)}
.nw-mod__rss{font-size:var(--t-s)}
/* categories (block digotech/blog-cats): icon · name · count; the sliding highlight follows the current row */
.nw-cats{position:relative;display:grid;gap:var(--nw-row-gap)}
.nw-cats a{position:relative;z-index:var(--nw-z-row);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);min-height:var(--ctl-s);padding:0 var(--s-3);border-radius:var(--r-pill);text-decoration:none;color:var(--ink-2);font:500 var(--t-s)/1.2 var(--font-body);transition:color var(--dur) var(--ease-press)}
.nw-cats a:hover,.nw-cats a[aria-current="true"]{color:var(--ink)}
.nw-cats a svg{width:var(--nw-icon);height:var(--nw-icon);color:var(--ink-3)}
.nw-cats a[aria-current="true"] svg{color:var(--accent)}
.nw-cats a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-cnt{font:500 var(--t-2xs)/1 var(--font-mono);font-style:normal;color:var(--ink-3);min-width:var(--s-6);text-align:center;padding:var(--s-1) var(--s-2);border-radius:var(--r);background:var(--paper-2)}
.nw-ink{position:absolute;left:0;top:0;width:0;height:0;border-radius:var(--r-pill);background:var(--accent-tint);box-shadow:var(--nw-ink-edge);opacity:0;transition:transform var(--dur-m) var(--ease-out),width var(--dur-m) var(--ease-out),height var(--dur-m) var(--ease-out),opacity var(--dur) var(--ease-press)}
.nw-ink.on{opacity:1}
.nw-cats:not(:has(.nw-ink.on)) a[aria-current="true"]{background:var(--accent-tint)} /* before the script runs */

/* reading series (block digotech/blog-series) */
.nw-series-box{display:grid;gap:var(--gap-stack)}
.nw-series{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:center}
.nw-ring{--p:0;width:var(--nw-ring);height:var(--nw-ring);transform:rotate(-90deg)}
.nw-ring circle{fill:none;stroke-width:4}
.nw-ring .bg{stroke:var(--paper-3)}
.nw-ring .fg{stroke:var(--accent-fill);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));stroke-linecap:round;transition:stroke-dashoffset var(--dur-morph) var(--ease-out)}
.nw-series b{display:block;font:600 var(--t-s)/1.3 var(--font-body)}
.nw-series small{color:var(--ink-3);font-size:var(--t-xs)}
.nw-btn-s > .wp-block-button__link{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--ctl-s);padding:0 var(--s-3);font-size:var(--t-xs)}
.nw-btn-s svg{width:var(--icon-s);height:var(--icon-s)}

/* round mark of the writer (block digotech/post-stats, kind avatar) */
.nw-av{width:var(--nw-av);height:var(--nw-av);display:grid;place-items:center;flex:none}
.nw-av svg{width:100%;height:auto}
.nw-mod--author{gap:var(--s-3)}
.nw-author{display:grid;gap:var(--s-1);min-width:0}
.nw-author > *{margin:0}
.nw-author .dg-clock--status{font-size:var(--t-xs)} /* status line of the writer card: small, like the line above (mock-up .nw-status) */
.nw-tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.nw-mod--tags:not(:has(.nw-tags)){display:none} /* no tags yet: the module stays out of the way */
.nw-tags a{margin:0;display:inline-flex;align-items:center;min-height:var(--s-6);padding:0 var(--s-2);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink-2);text-decoration:none;font:500 var(--t-xs)/1 var(--font-body) !important;transition:border-color var(--dur) var(--ease-out)} /* the block sets a size per tag; all topics weigh the same here */
.nw-tags a:hover{border-color:var(--ink-2);color:var(--ink)}
.nw-author__name{font:600 var(--t-s)/1.2 var(--font-body)}
.nw-author__sub{color:var(--ink-3);font-size:var(--t-xs)}
.nw-latest{min-width:0}
.nw-latest__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.nw-latest__list > li{margin:0;display:grid;gap:2px;padding-top:var(--s-3);border-top:1px solid var(--rule)}
.nw-latest__list > li:first-child{padding-top:0;border-top:0}
.nw-latest__title{font:600 var(--t-s)/1.35 var(--font-body);margin:0}
.nw-latest__title a{color:var(--ink);text-decoration:none}
.nw-latest__title a:hover{color:var(--accent)}
.nw-latest__date{font:500 var(--t-2xs)/1 var(--font-mono);color:var(--ink-3);margin:0}

/* card head: mark · writer, category, time, reading time · pinned label */
.nw-card__top{gap:var(--s-3)}
.nw-who{display:grid;gap:var(--s-1);min-width:0;flex:1}
.nw-who > *{margin:0}
.nw-who__line{gap:var(--s-1) var(--s-2);font-size:var(--t-xs);color:var(--ink-3)}
.nw-who__line > *{margin:0}
.nw-who__line > * + *::before{content:"·";margin-right:var(--s-2);color:var(--ink-3)}
.nw-pin{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--accent);font:600 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--nw-track);text-transform:uppercase;white-space:nowrap}
.nw-pin svg{width:var(--icon-s);height:var(--icon-s)}
.nw-stats{display:flex;gap:var(--s-4);flex-wrap:wrap;color:var(--ink-3);font:500 var(--t-xs)/1 var(--font-mono);font-variant-numeric:tabular-nums}
.nw-stats > span{display:inline-flex;align-items:center;gap:var(--s-1)}
.nw-stats svg{width:var(--icon-s);height:var(--icon-s)}
/* views in a card's meta line: same look as the time beside it, with the eye icon */
.nw-views{display:flex;align-items:center} /* the icon + number sit centred like the other meta items, not on the icon's bottom edge (an inline-flex box has no text baseline) */
.nw-views > span{display:inline-flex;align-items:center;gap:var(--s-1)}
.nw-views svg{width:var(--icon-s);height:var(--icon-s)}

/* sort + search bar (block digotech/blog-bar) */
.nw-bar{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.nw-bar .tg{display:inline-flex;padding:var(--s-1);gap:var(--s-1);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper-2)}
.nw-bar .tg a{display:inline-flex;align-items:center;min-height:var(--nw-tab-h);padding:0 var(--s-3);border-radius:var(--r);color:var(--ink-2);text-decoration:none;font:600 var(--t-s)/1 var(--font-body);transition:color var(--dur) var(--ease-press),background var(--dur) var(--ease-press)}
.nw-bar .tg a:hover{color:var(--ink)}
.nw-bar .tg a[aria-current="true"]{background:var(--card);color:var(--ink);box-shadow:var(--nw-lift)}
.nw-search{position:relative;flex:1;min-width:var(--nw-search-min);margin:0}
.nw-search label{display:block;margin:0}
.nw-search input{width:100%;height:var(--ctl-s);padding:0 var(--s-3) 0 var(--s-7);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 var(--t-s)/1 var(--font-body);transition:border-color var(--dur) var(--ease-press)}
.nw-search input:focus{outline:none;border-color:var(--accent-fill);box-shadow:var(--nw-focus)}
.nw-search svg{position:absolute;left:var(--s-3);top:50%;transform:translateY(-50%);width:var(--icon-m);height:var(--icon-m);color:var(--ink-3);pointer-events:none}

/* most viewed (block digotech/blog-top) */
.nw-top{display:grid}
.nw-top a{display:grid;grid-template-columns:var(--nw-thumb) minmax(0,1fr);gap:var(--s-3);align-items:center;padding:var(--s-3) 0;border-top:1px solid var(--rule);text-decoration:none;color:inherit}
.nw-top a:first-child{border-top:0;padding-top:0}
.nw-top a:last-child{padding-bottom:0}
.nw-top .th{position:relative;width:var(--nw-thumb);height:var(--nw-thumb);border-radius:var(--r-pill);display:grid;place-items:center;background:var(--paper-2);color:var(--ink-2)}
.nw-top .th svg{width:var(--nw-icon-l);height:var(--nw-icon-l)}
.nw-top .rk{position:absolute;left:calc(var(--s-2) * -1);top:calc(var(--s-2) * -1);width:var(--nw-rank);height:var(--nw-rank);border-radius:50%;background:var(--ink);color:var(--paper);font:600 var(--t-2xs)/var(--nw-rank) var(--font-mono);text-align:center}
.nw-top b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 var(--t-s)/1.35 var(--font-body);transition:color var(--dur) var(--ease-press)}
.nw-top a:hover b{color:var(--accent)}
.nw-top small{display:block;color:var(--ink-3);font-size:var(--t-2xs);margin-top:var(--s-1)}

/* "Need a website?" */
.nw-mod--cta .wp-block-buttons{margin:0}
.nw-mod--cta .wp-block-button__link{min-height:var(--ctl-s);padding-inline:var(--s-4);font-size:var(--t-s)}

/* "More posts" + count (block digotech/blog-more); the reader's saved posts */
.nw-more{display:grid;justify-items:center;gap:var(--s-3);padding-block:var(--s-3)}
.nw-more > *{margin:0}
.nw-more .wp-block-button__link{display:inline-flex;align-items:center;gap:var(--s-2)}
.nw-more svg{width:var(--icon-s);height:var(--icon-s)}
.nw-count{font-size:var(--t-2xs);letter-spacing:var(--nw-track);text-transform:uppercase;color:var(--ink-3)}
.nw-saved{display:grid;gap:var(--s-2)}
.nw-saved__item{display:block;padding:var(--gap-card-s);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);color:var(--ink);font:600 var(--t-m)/1.35 var(--font-body);text-decoration:none}
.nw-saved__item:hover{color:var(--accent)}

/* heading of the index */
.nw-head{display:grid;gap:var(--gap-text)}
.nw-head > *{margin:0}
.nw-head__title{font-size:var(--t-2xl);max-width:22ch} /* weight, spacing, line height: theme.json styles.elements.h1 */
.nw-head__title strong{font-weight:inherit;color:var(--accent)}
.nw-head__lede{color:var(--ink-2);max-width:var(--measure)}

/* feed */
.nw-feed{min-width:0}
.nw-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap-grid)} /* cards never share an edge */
.nw-list > li{margin:0;min-width:0}
.nw-card{display:grid;gap:var(--gap-stack);padding:var(--gap-card-s);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card)}
.nw-card > *{margin:0;min-width:0}
.nw-card__top{gap:var(--s-2) var(--s-3);font-size:var(--t-xs);color:var(--ink-3)}
.nw-card__top > *{margin:0}
.nw-card__who{font:600 var(--t-s)/1.2 var(--font-body);color:var(--ink)}
.nw-cat{font-size:var(--t-xs)}
.nw-cat a{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink-2);font-weight:500;text-decoration:none}
.nw-cat a::before{content:"";width:var(--s-2);height:var(--s-2);border-radius:50%;background:var(--accent-fill)}
.nw-card__date,.dg-read-time{font-size:var(--t-xs);color:var(--ink-3)}
.nw-meta > * + *::before{content:"·";margin-right:var(--s-3);color:var(--ink-3)}
.nw-card__title{font-size:var(--t-xl);font-weight:700;letter-spacing:-0.02em;line-height:1.2}
.nw-card__title a{text-decoration:none;color:inherit;transition:color var(--dur) var(--ease-press)}
.nw-card__title a:hover{color:var(--accent)}
.nw-card__excerpt{color:var(--ink-2)}
.nw-card__excerpt p{margin:0}
.nw-card__excerpt .wp-block-post-excerpt__more-text{display:none}
.nw-pages{margin-top:var(--s-2);font-size:var(--t-s)}
.nw-pages a,.nw-pages .page-numbers{color:var(--ink-2);text-decoration:none}
.nw-pages .page-numbers.current{color:var(--ink);font-weight:600}
.nw-empty{padding:var(--gap-card);border:1px dashed var(--rule);border-radius:var(--r-card);color:var(--ink-2);text-align:center}

/* article */
.nw-post{display:grid;gap:var(--gap-card-s);padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card)}
.nw-post > *{margin:0;min-width:0} /* grid items default to min-width:auto: a wide code block would widen every sibling */
.nw-crumb{gap:var(--s-2);color:var(--ink-3);font-size:var(--t-xs)}
.nw-crumb > *{margin:0}
.nw-crumb a{color:var(--ink-2);text-decoration:none}
.nw-crumb a:hover{color:var(--accent)}
.nw-crumb > * + *::before{content:"›";margin-right:var(--s-2);color:var(--ink-3)}
.nw-post__title{font-size:var(--t-2xl);font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.nw-meta{gap:var(--s-2) var(--s-3);color:var(--ink-3);font-size:var(--t-xs)}
.nw-meta > *{margin:0}
.nw-meta__who{font:600 var(--t-xs)/1.2 var(--font-body);color:var(--ink)}
.nw-meta__date::after{content:" (đăng)"}
.nw-meta__mod::after{content:" (cập nhật)"}
:lang(en) .nw-meta__date::after{content:" (published)"}
:lang(en) .nw-meta__mod::after{content:" (updated)"}
/* A side box whose block has nothing to show in this language (a series or tags written in another one) */
.nw-mod:has(> p.mono:only-child){display:none}
.nw-post__image{margin:0}
.nw-post__image img{border-radius:var(--r-pill)}
.nw-body{display:grid;gap:var(--gap-text);font-size:var(--t-m);line-height:1.7}
.nw-body > *{margin:0;min-width:0;max-width:none}
.nw-body h2{font-size:var(--t-xl);font-weight:700;letter-spacing:-0.02em;margin-top:var(--s-4);scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
.nw-body h3{font-size:var(--t-l);font-weight:700;margin-top:var(--s-2);scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
.nw-body h4{font-size:var(--t-m);font-family:var(--font-display);font-weight:700}
.nw-body ul,.nw-body ol{padding-left:1.25em;display:grid;gap:var(--s-2)}
.nw-body li::marker{color:var(--accent)}
.nw-body a{color:var(--accent)}
.nw-body img{max-width:100%;height:auto;border-radius:var(--r-pill)}
.nw-body pre{padding:var(--s-4);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper-2);overflow-x:auto;overflow-y:hidden;font:400 var(--t-xs)/1.6 var(--font-mono)}
.nw-body code{font-family:var(--font-mono);font-size:.92em;padding:1px var(--s-1);border-radius:var(--r);background:var(--paper-2)}
.nw-body pre code{padding:0;background:none}
.nw-body blockquote{padding:var(--s-3) var(--s-4);border-left:3px solid var(--accent-fill);border-radius:0 var(--r-pill) var(--r-pill) 0;background:var(--accent-tint)}
.nw-body table{border-collapse:collapse;width:100%;font-size:var(--t-s)}
.nw-body th,.nw-body td{padding:var(--s-2) var(--s-3);border:1px solid var(--rule);text-align:left;vertical-align:top}
.nw-body figure{margin:0}
.nw-body iframe{max-width:100%}
.nw-tags-line{font-size:var(--t-xs)}
.nw-tags-line a{display:inline-flex;align-items:center;min-height:var(--s-6);padding:0 var(--s-2);margin:0 var(--s-1) var(--s-1) 0;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink-2);text-decoration:none;font:500 var(--t-xs)/1 var(--font-body)}
.nw-tags-line .wp-block-post-terms__separator{display:none}
.nw-post .dg-acts{border-bottom:1px solid var(--rule);padding-bottom:var(--s-2)}
.nw-cta{display:grid;gap:var(--s-3);padding:var(--gap-card-s);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper-2)}
.nw-cta > *{margin:0}
.nw-cta__h{font-size:var(--t-l);font-weight:700}
.nw-cta__p{color:var(--ink-2);font-size:var(--t-s)}
.nw-cta__row{gap:var(--s-2)}
.nw-cta__row .wp-block-button__link{min-height:var(--ctl-s);padding-inline:var(--s-4);font-size:var(--t-s)}
.nw-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid)}
.nw-pn > *{margin:0}
.nw-pn > :empty{display:none}
.nw-pn .nw-pn__next{text-align:right}
.nw-sub__form{min-width:0}
.nw-mod--sub .dn-kit-form__field > label{position:absolute;width:var(--nw-sr);height:var(--nw-sr);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nw-mod--sub .dn-kit-form__actions{margin:0}
.nw-mod--sub .dn-kit-form__actions .wp-element-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%}
.nw-mod--sub .dn-kit-form__actions .wp-element-button::before{content:"";flex:none;width:var(--icon-s);height:var(--icon-s);background:currentColor;-webkit-mask:url(../../../icons/mail.svg?ver=82f4d804) center / contain no-repeat;mask:url(../../../icons/mail.svg?ver=82f4d804) center / contain no-repeat}

@media (max-width: 1239px){
  .nw{--nw-left:216px;--nw-right:256px}
}
@media (max-width: 1023px){
  .nw-grid{grid-template-columns:minmax(0,1fr)}
  .nw-mid{order:-1} /* phone and tablet: the posts come first, the side modules after */
  .nw-side{position:static}
  .nw-side--left{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nw-side--left .nw-mod--author{grid-column:1 / -1}
  .nw-side--right{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 767px){
  .nw{padding-top:var(--s-4)}
  .nw-side--left,.nw-side--right{grid-template-columns:minmax(0,1fr)}
  .nw-post{padding:var(--gap-card-s)}
  .nw-pn{grid-template-columns:minmax(0,1fr)}
  .nw-pn .nw-pn__next{text-align:left}
}

/* boxes used inside articles (Group blocks with these classes): nw-sum = "Tóm lại", nw-note = aside/tip, nw-box = offer */
.nw-body .nw-sum,.nw-body .nw-note,.nw-body .nw-box{display:grid;gap:var(--s-2);padding:var(--s-4) var(--s-5);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper-2);font-size:var(--t-s)}
.nw-body .nw-sum > *,.nw-body .nw-note > *,.nw-body .nw-box > *{margin:0}
.nw-body .nw-sum{border-left:3px solid var(--accent-fill)}
.nw-body .nw-sum > .mono,.nw-body .nw-box > .mono{font-size:var(--t-2xs)}
.nw-body .nw-sum ul{padding-left:1.1em;gap:var(--s-1)}
.nw-body .nw-box{background:var(--accent-tint);border-color:transparent}
.nw-body .nw-box .wp-block-buttons{margin-top:var(--s-1)}
.nw-body .nw-box .wp-block-button__link{min-height:var(--ctl-s);padding-inline:var(--s-4);font-size:var(--t-s)}
.nw-body .nw-table{font-size:var(--t-s)}
.nw-body .nw-table table{border-collapse:separate;border-spacing:0;border:1px solid var(--rule);border-radius:var(--r-pill);overflow:hidden}
.nw-body .nw-table th{background:var(--paper-2);font-weight:600;text-align:left}
.nw-body .nw-table th,.nw-body .nw-table td{border:0;border-bottom:1px solid var(--rule);padding:var(--s-2) var(--s-3);vertical-align:top}
.nw-body .nw-table tr:last-child td{border-bottom:0}

/* Kit "Checklist" list style lays each <li> out as a 2-column grid; a list item with bold + text (several inline
   nodes) then splits into several grid cells. In articles the tick is positioned instead, so any inline mix wraps normally. */
.nw-body .wp-block-list.is-style-checklist{padding-left:0;list-style:none}
.nw-body .wp-block-list.is-style-checklist > li{display:block;position:relative;padding-left:calc(var(--s-4) + var(--s-2))}
.nw-body .wp-block-list.is-style-checklist > li::before{position:absolute;left:0;top:0;color:var(--accent)}

@media (max-width: 479px){
  .nw-body .nw-table th,.nw-body .nw-table td{padding:var(--s-2);font-size:var(--t-xs)} /* 4-column tables on a phone: tighter cells, words stay whole; a table still too wide scrolls inside its figure (core .wp-block-table overflow-x:auto), never the page */
}