/* === TKT Blog Archive — ported 1:1 from approved mockup (news-styles.css) ===
   Scope wrapper: .tkt-news-root . DS v2.0 base classes (.container/.btn/.stat-strip/
   .glass/.eyebrow-row/.bg-aurora/.t-*) come from the live design system globally.
   Pink-button guard: plugin reset.css forces #CC3366 border/hover on bare <button>. */
/* NOTE: do NOT put `font:inherit` here — at (0,1,1) it beats component button
   rules like .nx-side-toggle/.nx-side-link/.nx-chip (0,1,0), forcing them to
   inherit the big body font (was the sidebar "font to + wrap + số dính nhãn" bug
   2026-06-02). Each component sets its own font; this guard only kills the plugin
   reset.css pink border/background/appearance. */
.tkt-news-root button{ -webkit-appearance:none; appearance:none; border:0; background:none; color:inherit; border-radius:0; outline:none; cursor:pointer; }
.tkt-news-root button:hover, .tkt-news-root button:focus{ background:none; color:inherit; border-color:transparent; box-shadow:none; }

/* === INTEGRATION FIX — escape Elementor boxed container =====================
   The shortcode sits inside an Elementor section (stretched + BOXED → inner
   .elementor-container max-width ~1140). The mockup is a full-page design with
   full-bleed hero/section backgrounds + its own .container for inner width.
   Break .tkt-news-root out to full viewport width so it behaves like a page.
   (overflow-x:clip on .tkt-news-root — inherited from mockup — kills the
   100vw horizontal scrollbar.) Also neutralise the Elementor widget padding. */
.elementor .elementor-widget-shortcode .tkt-news-root,
.elementor .tkt-news-root{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.elementor-widget-shortcode:has(.tkt-news-root) > .elementor-widget-container{ padding:0 !important; }
.elementor-widget-shortcode .elementor-shortcode:has(.tkt-news-root){ margin:0; }

/* Cap inner content to the SITE/FOOTER width (footer .tktf-inner = 1320px) so the
   news columns align with the rest of the page instead of the DS default 1440. */
.tkt-news-root .container{ max-width:1320px !important; }

/* FIX — real post images must fill the media box and sit ABOVE the grid-texture
   overlay (.media-grid::before, 50% white wash). The JS emits <img class="ns-img">;
   the old `image-slot` rules no longer match → images were unstyled + washed out. */
.tkt-news-root .media{ position:relative; }
.tkt-news-root .media img,
.tkt-news-root .media .ns-img{
  position:absolute; inset:0; z-index:1;
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
.tkt-news-root .media .ns-ph{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; color:var(--fg-4); font-family:var(--font-mono); font-size:var(--t-caption); }
.tkt-news-root .nx-ribbon{ z-index:2; }

/* Hide the LEGACY hero (old Elementor widget #tkt-news-hero) — the mockup hero
   is now rendered by the shortcode, so the old one would double up. */
#tkt-news-hero, .tkt-news-root ~ #tkt-news-hero, section#tkt-news-hero{ display:none !important; }

/* Force-hide the horizontal chip nav on desktop sidebar mode (mockup intent). */
#newsRoot[data-filter="sidebar"] .nx-catnav-chips{ display:none !important; }
@media (max-width:1024px){ #newsRoot[data-filter="sidebar"] .nx-catnav-chips{ display:flex !important; } }

/* === RESTORE magazine listing grid (mockup intent) — 3 cols, first card big 2×2 ===
   This was the design: the first article in the listing is a large feature card. */
#newsRoot[data-grid="magazine"] .nx-grid{ grid-template-columns: repeat(3, 1fr); }
/* big feature card (user spec 2026-06-02): spans 2 of 3 cols, HORIZONTAL
   (ảnh trái | chữ phải), 1 hàng, chiều cao linh động theo nội dung bài. */
/* big feature 2×2 (2 cột × 2 hàng) — thẻ lớn nổi bật, ảnh fill chiều cao 2 hàng,
   chữ gọn dưới; cột 3 tự xếp 2 bài theo chiều cao này (magazine cổ điển). */
#newsRoot[data-grid="magazine"] .nx-acard.feat-span{ grid-column: span 2; grid-row: span 2; flex-direction: column; }
#newsRoot[data-grid="magazine"] .nx-acard.feat-span .media{ aspect-ratio: auto; flex: 1 1 auto; min-height: 340px; }
#newsRoot[data-grid="magazine"] .nx-acard.feat-span .body{ flex: 0 0 auto; gap: var(--s-4); }
#newsRoot[data-grid="magazine"] .nx-acard.feat-span .ttl{ font-size: clamp(20px, 1.9vw, 26px); -webkit-line-clamp: 3; }
#newsRoot[data-grid="magazine"] .nx-acard.feat-span .exc{ -webkit-line-clamp: 3; }
@media (max-width: 1180px){
  #newsRoot[data-grid="magazine"] .nx-grid{ grid-template-columns: repeat(2, 1fr); }
  #newsRoot[data-grid="magazine"] .nx-acard.feat-span{ grid-column: span 2; grid-row: auto; }
}
@media (max-width: 640px){
  #newsRoot[data-grid="magazine"] .nx-grid{ grid-template-columns: 1fr; }
  /* stack the big card vertically on phones */
  #newsRoot[data-grid="magazine"] .nx-acard.feat-span{ grid-column: auto; flex-direction: column; }
  #newsRoot[data-grid="magazine"] .nx-acard.feat-span .media{ flex: none; aspect-ratio: 16 / 9; align-self: auto; min-height: 0; }
}

/* =========================================================================
   TKT PUMPS · TRANG TIN TỨC (/tin-tuc/) · page-specific styles
   Import AFTER components.css. Tokens only — no raw hex/px off the scale.
   Body fragment: breadcrumb → hero → featured → filter → grid → newsletter.
   Layout variants driven by data-* on #newsRoot (see news-tweaks.jsx):
     data-grid     = cards | list | magazine
     data-filter   = chips | sidebar
     data-featured = large | medium
     data-density  = airy  | compact
   ========================================================================= */

/* group accent colors (within token family) */
:root {
  --grp-solution: var(--tkt-blue-600);
  --grp-pump:     var(--tkt-blue-400);
  --grp-company:  var(--semantic-success);
}

.tkt-news-root { position: relative; overflow-x: clip; }

/* ─────────────────────────────────────────────────────────────────────────
   BREADCRUMB
   ───────────────────────────────────────────────────────────────────────── */
.tkt-news-root .crumb-bar { position: relative; z-index: 2; border-bottom: 1px solid rgba(0,40,80,0.07); }
.tkt-news-root .crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  /* FIX (2026-06-03): was `padding: var(--s-3) 0` — the shorthand zeroed the
     inline padding inherited from .container (--container-pad-desktop), shifting
     the breadcrumb LEFT by one gutter vs the hero column. Use padding-block so
     .container's left/right gutter is preserved → breadcrumb aligns with hero. */
  padding-top: var(--s-3); padding-bottom: var(--s-3);
  font-size: var(--t-body-sm); color: var(--fg-3);
}
.tkt-news-root .crumb a { color: var(--fg-3); transition: color var(--dur-2) var(--ease-out); }
.tkt-news-root .crumb a:hover { color: var(--tkt-blue-700); }
.tkt-news-root .crumb .sep { color: var(--fg-4); }
.tkt-news-root .crumb .here { color: var(--fg-1); font-weight: var(--w-demi); }

/* ─────────────────────────────────────────────────────────────────────────
   HERO — compact, search-forward
   ───────────────────────────────────────────────────────────────────────── */
.nx-hero { position: relative; }
.nx-hero .bg-aurora, .nx-hero .bg-grid { z-index: 0; }
.nx-hero-inner {
  position: relative; z-index: 1;
  padding-top: var(--s-10);
  padding-bottom: var(--s-9);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--s-10);
  align-items: end;
}
.nx-hero-copy { max-width: 780px; }
/* FIX (2026-06-03): H1 on ONE line. .t-title-1 clamps up to 72px which overflowed
   the old 640px column → wrapped to 2 lines. Cap the size so the full title fits
   one line inside the copy column, and force nowrap (relaxed to wrap ≤640px). */
.nx-hero h1 { margin-top: var(--s-5); font-size: clamp(34px, 4.4vw, 58px); white-space: nowrap; }
.nx-hero .lede { margin-top: var(--s-5); max-width: 600px; color: var(--fg-2); }

/* hero side: "đọc nhiều tuần này" mini-rail on glass */
.nx-hero-rail {
  position: relative;
  padding: var(--s-6);
  border-radius: var(--r-24);
  align-self: center; /* FIX (2026-06-03): center the rail in the hero section instead of bottom-aligning (parent grid align-items:end) */
}
.nx-hero-rail .rl-head {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--tkt-blue-700);
  margin-bottom: var(--s-4);
}
.nx-hero-rail .rl-head .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tkt-orange-500); box-shadow: 0 0 8px var(--tkt-orange-400); }
.nx-rail-item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  padding: var(--s-3) 0; align-items: center;
}
.nx-rail-item + .nx-rail-item { border-top: 1px solid rgba(0,40,80,0.08); }
.nx-rail-item .rk {
  font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-heading-2);
  color: var(--tkt-blue-300); line-height: 1; width: 28px; text-align: center;
}
.nx-rail-item .rt {
  font-family: var(--font-display); font-weight: var(--w-demi); font-size: var(--t-body-sm);
  line-height: 1.3; color: var(--fg-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--dur-2) var(--ease-out);
}
.nx-rail-item:hover .rt { color: var(--tkt-blue-700); }
.nx-rail-item .rm {
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--fg-3); margin-top: 3px;
}

/* ── hero credibility stat strip + topic pills (replaces hero search) ── */
.nx-hero-statstrip { margin-top: var(--s-7); max-width: 600px; }
/* stat-strip wraps to 2×2 on small screens (component is flex space-between →
   4 stats cramp below ~640 once the hero is single-column). */
@media (max-width: 640px) {
  .nx-hero-statstrip { flex-wrap: wrap; gap: var(--s-4); padding: var(--s-4) var(--s-5); }
  .nx-hero-statstrip .stat { flex: 1 1 40%; }
  .nx-hero-statstrip .divider { display: none; }
}
/* FIX (2026-06-03): label inline with pills (gọn hơn) + NOT all-caps.
   Pills are tighter + flatter with a tinted hover for a more refined feel. */
.nx-topics {
  margin-top: var(--s-6); display: flex; align-items: center;
  flex-wrap: wrap; gap: var(--s-2) var(--s-3);
}
.nx-topics .lbl {
  display: inline-flex; align-items: center; margin: 0; flex-shrink: 0;
  font-family: var(--font-body); font-size: var(--t-body-sm); font-weight: var(--w-demi);
  letter-spacing: normal; text-transform: none; color: var(--fg-3);
}
.nx-topic-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.nx-topic {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 7px var(--s-3); border-radius: var(--r-pill);
  background: var(--bg-pure); border: 1px solid rgba(0,40,80,0.1);
  font-family: var(--font-display); font-weight: var(--w-demi); font-size: var(--t-body-sm);
  color: var(--fg-2); white-space: nowrap;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.nx-topic:hover { transform: translateY(-1px); background: var(--tkt-blue-050); border-color: var(--tkt-blue-300); color: var(--tkt-blue-700); }
.nx-topic .d { width: 7px; height: 7px; border-radius: 2px; background: var(--tkt-blue-500); }
.nx-topic .d[data-grp="solution"] { background: var(--grp-solution); }
.nx-topic .d[data-grp="pump"]     { background: var(--grp-pump); }
.nx-topic .d[data-grp="company"]  { background: var(--grp-company); }

/* ── search field (in the listing header toolbar) ── */
.nx-tb-search {
  display: flex; align-items: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-4); flex: 0 1 340px; min-width: 180px;
  border-radius: var(--r-pill); background: var(--bg-pure); border: 1px solid rgba(0,40,80,0.12);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.nx-tb-search:focus-within { border-color: var(--tkt-blue-400); box-shadow: 0 0 0 4px rgba(45,141,224,0.14); }
.nx-tb-search svg { color: var(--fg-3); flex-shrink: 0; }
.nx-tb-search input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-size: var(--t-body-sm); color: var(--fg-1); }
.nx-tb-search input::placeholder { color: var(--fg-4); }
/* kill the UA border/decorations of <input type="search"> (base.css only resets font/color) */
.nx-tb-search input::-webkit-search-decoration,
.nx-tb-search input::-webkit-search-cancel-button,
.nx-tb-search input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }
/* hello-elementor reset.css styles input[type=search]{border:1px solid #666;border-radius:3px;
   padding:.5rem 1rem;width:100%} at (0,1,1) and loads AFTER our async CSS → it drew the inner
   box inside the search pill. Override at (0,2,1) so the input is borderless inside the pill. */
.tkt-news-root .nx-tb-search input { border: none; border-radius: 0; padding: 0; width: auto; box-shadow: none; }

/* ─────────────────────────────────────────────────────────────────────────
   FEATURED / EDITOR'S PICK — magazine block
   ───────────────────────────────────────────────────────────────────────── */
/* FIX (2026-06-03): add top padding so the eyebrow isn't flush against the
   hero boundary — gives balanced breathing room above the featured head. */
.nx-featured { position: relative; z-index: 1; padding-top: var(--s-9); padding-bottom: var(--s-11); }
.nx-feat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.nx-feat-head h2 { margin-top: var(--s-3); text-wrap: balance; }
/* magazine grid: 1 big lead (2×2) + 4 cards filling the right 2 cols */
.nx-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--s-6);
}

/* shared featured card chrome */
.nx-feat-lead, .nx-feat-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-pure);
  border: 1px solid rgba(0,40,80,0.08);
  border-radius: var(--r-20);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.nx-feat-lead:hover, .nx-feat-card:hover { transform: translateY(-4px); box-shadow: var(--elev-3); border-color: transparent; }

/* media — 4:3 so standard 4:3 / 1:1 thumbnails are not cropped */
.nx-feat-lead .media, .nx-feat-card .media { position: relative; aspect-ratio: 4 / 3; }
.nx-feat-lead image-slot, .nx-feat-card image-slot { width: 100%; height: 100%; }

/* LEAD — spans 2 cols × 2 rows, the showpiece */
.nx-feat-lead {
  grid-column: span 2; grid-row: span 2;
  border-radius: var(--r-24);
  border-color: rgba(0,80,144,0.14);
  box-shadow: var(--elev-2);
}
.nx-feat-lead .body { padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); flex: 0 0 auto; }
/* lead media flex-grows to fill the 2-row height so the lead bottom aligns with
   the 2-card stack — no dead whitespace; stable if featured count ≠ 5.
   (Responsive blocks below reset aspect-ratio for the full-width lead.) */
.nx-feat-lead { min-height: 0; }
.nx-feat-lead .media { aspect-ratio: auto; flex: 1 1 auto; min-height: 320px; }
.nx-feat-lead .ttl {
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--fg-1); text-wrap: balance; transition: color var(--dur-2) var(--ease-out);
}
.nx-feat-lead:hover .ttl { color: var(--tkt-blue-800); }
.nx-feat-lead .exc {
  color: var(--fg-2); max-width: 60ch; font-size: var(--t-body-lg);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nx-feat-read {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-body-sm);
  color: var(--tkt-blue-700); margin-top: var(--s-2);
}
.nx-feat-read svg { transition: transform var(--dur-2) var(--ease-out); }
.nx-feat-lead:hover .nx-feat-read svg { transform: translateX(4px); }

/* SMALL CARDS */
.nx-feat-card .body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.nx-feat-card .ttl {
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--t-heading-3); line-height: 1.26; letter-spacing: -0.01em; color: var(--fg-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--dur-2) var(--ease-out);
}
.nx-feat-card:hover .ttl { color: var(--tkt-blue-800); }

/* shared card meta + category tag */
.nx-cat {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: var(--w-bold);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-2);
  width: fit-content;
}
.nx-cat::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--cat-accent, var(--tkt-blue-500)); }
.nx-cat[data-grp="solution"] { --cat-accent: var(--grp-solution); color: var(--tkt-blue-700); }
.nx-cat[data-grp="pump"]     { --cat-accent: var(--grp-pump);     color: var(--tkt-blue-600); }
.nx-cat[data-grp="company"]  { --cat-accent: var(--grp-company);  color: var(--semantic-success); }

.nx-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: 0.02em; color: var(--fg-3);
  margin-top: auto;
}
.nx-meta .mdot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); }
.nx-meta .m-i { display: inline-flex; align-items: center; gap: 5px; }
.nx-meta svg { width: 13px; height: 13px; color: var(--fg-4); }

.nx-card-link { position: absolute; inset: 0; z-index: 3; }

/* media placeholder grid texture behind image-slot empty state */
.tkt-news-root .media-grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(221,235,250,0.5)),
    linear-gradient(rgba(0,80,144,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,80,144,0.05) 1px, transparent 1px);
  background-size: cover, 24px 24px, 24px 24px;
}
.nx-feat-lead .media, .nx-acard .media { background: var(--bg-tint); }

/* small "editor" ribbon on lead */
.nx-ribbon {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: var(--w-bold);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tkt-orange-700);
}
.nx-ribbon .star { width: 6px; height: 6px; border-radius: 50%; background: var(--tkt-orange-500); }

/* ─────────────────────────────────────────────────────────────────────────
   LISTING SHELL — filter + grid arrangement
   ───────────────────────────────────────────────────────────────────────── */
.nx-listing { position: relative; }
.nx-listing .bg-aurora.subtle { z-index: 0; }
.nx-listing-inner { position: relative; z-index: 1; padding-top: var(--s-10); padding-bottom: var(--s-12); }

/* FIX (2026-06-03): listing header is now a single row — eyebrow on the left,
   search + sort on the right (title "Tất cả bài viết" removed). The grid then
   starts directly under the header, top-aligned with the sidebar. */
.nx-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-7);
}

/* GROUPED CATEGORY NAV — chips */
.nx-catnav { display: flex; flex-direction: column; gap: var(--s-4); }
.nx-catgroup { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.nx-catgroup .gl {
  flex-shrink: 0; min-width: 132px;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--w-bold);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2);
  padding-top: var(--s-2);
}
.nx-catgroup .gl .gd { width: 8px; height: 8px; border-radius: 2px; background: var(--g-accent, var(--tkt-blue-500)); }
.nx-catgroup[data-grp="solution"] { --g-accent: var(--grp-solution); }
.nx-catgroup[data-grp="pump"]     { --g-accent: var(--grp-pump); }
.nx-catgroup[data-grp="company"]  { --g-accent: var(--grp-company); }
.nx-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); flex: 1; }

.nx-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--bg-pure);
  border: 1px solid rgba(0,40,80,0.1);
  font-family: var(--font-display); font-weight: var(--w-demi); font-size: var(--t-body-sm);
  color: var(--fg-1); white-space: nowrap; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.nx-chip .n {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: var(--w-bold);
  color: var(--fg-3); letter-spacing: 0.04em;
}
.nx-chip:hover { border-color: var(--g-accent, var(--tkt-blue-300)); color: var(--tkt-blue-700); }
.nx-chip[aria-pressed="true"] {
  background: var(--tkt-blue-800); border-color: var(--tkt-blue-800); color: #fff;
  box-shadow: var(--elev-2);
}
.nx-chip[aria-pressed="true"] .n { color: rgba(255,255,255,0.72); }
/* "Tất cả" pill */
.nx-chip.is-all { background: var(--tkt-blue-050); border-color: rgba(0,80,144,0.16); }
.nx-chip.is-all[aria-pressed="true"] { background: var(--tkt-blue-800); border-color: var(--tkt-blue-800); }

.nx-allrow { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid rgba(0,40,80,0.08); }
.nx-allrow .gl { min-width: 132px; }

/* TOOLBAR — result count + sort */
/* Toolbar now lives INSIDE .nx-list-head (right side) — no own vertical margin.
   FIX (2026-06-03): nowrap + no-shrink so search + sort ALWAYS share one row
   (under .nx-list-head `space-between` the toolbar was shrinking → sort wrapped
   below search). The whole toolbar drops to its own row only on narrow screens. */
.nx-toolbar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: nowrap; flex-shrink: 0;
}
/* FIX (2026-06-03): label was wrapping to 2 lines ("SẮP / XẾP") — add nowrap.
   Toned down to a quieter control (transparent fill, lighter border, book-weight
   value) so it reads as a utility, not a hero button. */
.nx-sort {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: 38px; padding: 0 var(--s-2) 0 var(--s-4);
  border-radius: var(--r-pill);
  background: transparent; border: 1px solid rgba(0,40,80,0.12);
}
.nx-sort .lbl { white-space: nowrap; font-family: var(--font-body); font-size: var(--t-body-sm); letter-spacing: normal; text-transform: none; color: var(--fg-3); }
.nx-sort select {
  border: none; background: transparent; outline: none; cursor: pointer;
  font-family: var(--font-display); font-weight: var(--w-book); font-size: var(--t-body-sm);
  color: var(--fg-1); padding: var(--s-1) var(--s-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   ARTICLE GRID + CARD (default "cards")
   ───────────────────────────────────────────────────────────────────────── */
.nx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
@media (max-width: 1180px) { .nx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .nx-grid { grid-template-columns: 1fr; } }

.nx-acard {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-pure);
  border: 1px solid rgba(0,40,80,0.08);
  border-radius: var(--r-20);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.nx-acard:hover { transform: translateY(-4px); box-shadow: var(--elev-3); border-color: transparent; }
.nx-acard:focus-within { box-shadow: var(--elev-3); }
.nx-acard .media { position: relative; aspect-ratio: 16 / 10; }
.nx-acard image-slot { width: 100%; height: 100%; }
.nx-acard .body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.nx-acard .ttl {
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--t-heading-3); line-height: 1.26; letter-spacing: -0.01em; color: var(--fg-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--dur-2) var(--ease-out);
}
.nx-acard:hover .ttl { color: var(--tkt-blue-800); }
.nx-acard .exc {
  font-size: var(--t-body-sm); color: var(--fg-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────────────────
   GRID FOOTER — count + load more / empty
   ───────────────────────────────────────────────────────────────────────── */
.nx-grid-foot { margin-top: var(--s-9); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.nx-count-line { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--fg-3); letter-spacing: 0.04em; }
.nx-count-line b { color: var(--tkt-blue-700); }
.nx-progress { width: 200px; height: 4px; border-radius: var(--r-pill); background: rgba(0,40,80,0.1); overflow: hidden; }
.nx-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tkt-blue-500), var(--tkt-blue-700)); transition: width var(--dur-4) var(--ease-out); }
/* FIX (2026-06-03 v1.6.14): impressive solid CTA + text/icon on ONE row.
   Root cause of the wrapped icon: hello-elementor reset.css `[type=button]`
   (0,1,0) loads AFTER this file → TIE with bare `.nx-loadmore` (0,1,0) → reset
   wins → `display:inline-block` overrode our inline-flex, killing the flex row
   (gap/nowrap), so the <svg> dropped to a 2nd line. Scope to .tkt-news-root
   (0,2,0) + !important to out-rank reset and restore inline-flex. */
.tkt-news-root .nx-loadmore {
  display: inline-flex !important; align-items: center; justify-content: center; gap: var(--s-2);
  flex-wrap: nowrap; white-space: nowrap;
  padding: var(--s-4) var(--s-9);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--tkt-blue-600), var(--tkt-blue-800));
  border: 1px solid transparent;
  font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-body);
  color: #fff; box-shadow: 0 8px 22px rgba(0,80,144,0.28);
  transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.tkt-news-root .nx-loadmore:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(0,80,144,0.36); }
.tkt-news-root .nx-loadmore span { white-space: nowrap; }
.tkt-news-root .nx-loadmore svg { flex-shrink: 0; }
.nx-loadmore[hidden] { display: none; }

.nx-empty {
  grid-column: 1 / -1; text-align: center;
  padding: var(--s-11) var(--s-6);
  border: 1px dashed rgba(0,40,80,0.18); border-radius: var(--r-24);
  background: rgba(255,255,255,0.4);
}
.nx-empty .ico { width: 56px; height: 56px; margin: 0 auto var(--s-5); border-radius: 50%; background: var(--semantic-info-bg); display: flex; align-items: center; justify-content: center; color: var(--tkt-blue-600); }
.nx-empty h3 { margin-bottom: var(--s-2); }
.nx-empty p { color: var(--fg-3); max-width: 42ch; margin: 0 auto var(--s-5); }

/* ─────────────────────────────────────────────────────────────────────────
   NEWSLETTER STRIP — compact (footer already carries the full one)
   ───────────────────────────────────────────────────────────────────────── */
.nx-news-wrap { position: relative; z-index: 1; padding-bottom: var(--s-12); }
.nx-news {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s-9); align-items: center;
  padding: var(--s-9) var(--s-9);
  border-radius: var(--r-28);
  background: var(--bg-dark); color: var(--fg-on-dark-2);
}
.nx-news .bg-aurora-dark, .nx-news .bg-grid-dark { z-index: 0; }
.nx-news > * { position: relative; z-index: 1; }
.nx-news .nl-eye {
  font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--tkt-blue-300);
}
.nx-news h3 { color: #fff; margin-top: var(--s-3); text-wrap: balance; }
.nx-news .nl-sub { color: rgba(255,255,255,0.72); margin-top: var(--s-3); max-width: 46ch; }
.nx-news .nl-form { display: flex; flex-direction: column; gap: var(--s-3); }
.nx-news .nl-form .field {
  padding: 5px 5px 5px var(--s-4);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); height: 52px;
}
.nx-news .nl-form .field input { color: #fff; }
.nx-news .nl-form .field input::placeholder { color: rgba(255,255,255,0.45); }
.nx-news .nl-note { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: 0.04em; color: rgba(255,255,255,0.5); }

/* =========================================================================
   VARIANT · FILTER = SIDEBAR
   ========================================================================= */
#newsRoot[data-filter="sidebar"] .nx-catnav-chips { display: none; }

.nx-layout { display: grid; grid-template-columns: 1fr; gap: var(--s-9); }
#newsRoot[data-filter="sidebar"] .nx-layout { grid-template-columns: 288px 1fr; }
.nx-sidebar { display: none; }
#newsRoot[data-filter="sidebar"] .nx-sidebar { display: block; }
.nx-sidebar-inner { position: sticky; top: var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); }

/* nav card (carded, professional) */
.nx-side-card {
  background: var(--bg-pure); border: 1px solid rgba(0,40,80,0.08);
  border-radius: var(--r-20); padding: var(--s-4); box-shadow: var(--elev-1);
}
.nx-side-card-head {
  font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-3);
  padding: var(--s-2) var(--s-3) var(--s-3);
}
.nx-side-link.is-all { width: 100%; margin-bottom: var(--s-2); }

/* accordion group toggle */
.nx-side-toggle {
  width: 100%; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3); border-radius: var(--r-12);
  /* user 2026-06-02: bỏ UPPERCASE + bold; chỉ hoa chữ đầu (giữ case của label),
     dùng font display, size cân đối với sub-link (group hơi lớn hơn để phân cấp). */
  font-family: var(--font-display); font-size: var(--t-body); font-weight: var(--w-medium);
  letter-spacing: 0; text-transform: none; color: var(--fg-1);
  cursor: pointer; transition: background var(--dur-2) var(--ease-out);
}
.nx-side-toggle:hover { background: rgba(0,80,144,0.05); }
.nx-side-toggle .gd { width: 8px; height: 8px; border-radius: 2px; background: var(--g-accent, var(--tkt-blue-500)); flex-shrink: 0; }
.nx-side-toggle .gt { flex: 1; text-align: left; }
.nx-side-toggle .gt { min-width: 0; }
.nx-side-toggle .gn { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--fg-3); }

/* ── BUGFIX (user 2026-06-02 sidebar) ────────────────────────────────────────
   reset.css `[type=button],...,button{display:inline-block; font-size:1rem;
   font-weight:400; padding:.5rem 1rem}` is (0,1,0) via [type=button] and loads
   AFTER our CSS → on the toggle (<button type="button">) it tied & beat our
   .nx-side-toggle (0,1,0): toggle became inline-block (count dính nhãn, chevron
   rớt dòng) + weight 400 (nhạt hơn sub-link không có type). Re-assert at (0,2,0):
   1 hàng flex thẳng, title đậm hơn sub (phân cấp đúng). */
.tkt-news-root .nx-side-toggle {
  display: flex !important; flex-wrap: nowrap; align-items: center; gap: var(--s-2);
  width: 100%; padding: var(--s-3);
  font-family: var(--font-display); font-size: var(--t-body); font-weight: var(--w-demi);
}
.tkt-news-root .nx-side-toggle .gt   { flex: 1 1 auto; min-width: 0; text-align: left; }
.tkt-news-root .nx-side-toggle .gn   { flex: 0 0 auto; margin-left: var(--s-2); }
.tkt-news-root .nx-side-toggle .chev { flex: 0 0 auto; margin-left: var(--s-2); }
.nx-side-toggle .chev { color: var(--fg-3); transition: transform var(--dur-3) var(--ease-out); }
.nx-side-group[data-grp="solution"] { --g-accent: var(--grp-solution); }
.nx-side-group[data-grp="pump"]     { --g-accent: var(--grp-pump); }
.nx-side-group[data-grp="company"]  { --g-accent: var(--grp-company); }
.nx-side-group[data-open="false"] .nx-side-toggle .chev { transform: rotate(-90deg); }
.nx-side-group .nx-side-list { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-4) var(--ease-out); }
.nx-side-group[data-open="false"] .nx-side-list { grid-template-rows: 0fr; }
.nx-side-inner { overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--s-2); }
.nx-side-group + .nx-side-group { border-top: 1px solid rgba(0,40,80,0.07); margin-top: var(--s-1); padding-top: var(--s-1); }

.nx-side-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-12);
  font-size: var(--t-body-sm); font-weight: var(--w-medium); color: var(--fg-1); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nx-side-link .n { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-micro); font-weight: var(--w-bold); color: var(--fg-3); }
.nx-side-link:hover { background: rgba(0,80,144,0.05); color: var(--tkt-blue-700); }
.nx-side-link[aria-pressed="true"] { background: var(--semantic-info-bg); color: var(--tkt-blue-800); font-weight: var(--w-demi); }
.nx-side-link[aria-pressed="true"] .n { color: var(--tkt-blue-700); }

/* promo · internal-link banner */
.nx-side-promo {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-6); border-radius: var(--r-20);
  background: linear-gradient(160deg, rgba(168,210,247,0.55) 0%, rgba(255,200,140,0.32) 100%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), var(--elev-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.nx-side-promo:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), var(--elev-3); }
.nx-side-promo::before { content:""; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background: radial-gradient(circle, rgba(91,174,245,0.45), transparent 70%); filter: blur(18px); }
.nx-side-promo > * { position: relative; }
.nx-side-promo .pl { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tkt-orange-700); }
.nx-side-promo .pt { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-heading-3); line-height: 1.2; color: var(--fg-1); }
.nx-side-promo .pd { font-size: var(--t-caption); color: var(--fg-2); line-height: 1.5; }
.nx-side-promo .pc { margin-top: var(--s-1); display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-body-sm); color: var(--tkt-blue-700); }
.nx-side-promo:hover .pc { color: var(--tkt-blue-800); }

/* cta box · engineer on duty */
.nx-side-cta { position: relative; overflow: hidden; padding: var(--s-6); border-radius: var(--r-20); background: var(--bg-dark); color: var(--fg-on-dark-2); }
.nx-side-cta .bg-aurora-dark { z-index: 0; }
.nx-side-cta > *:not(.bg-aurora-dark) { position: relative; z-index: 1; }
.nx-side-cta .cta-eng { display: flex; align-items: center; gap: var(--s-3); }
.nx-side-cta .cta-eng .av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(160deg, var(--tkt-blue-500), var(--tkt-blue-700)); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-body-sm); color:#fff; position: relative; }
.nx-side-cta .cta-eng .av .live { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#4ADE80; border:2px solid var(--bg-dark); box-shadow:0 0 8px #4ADE80; }
.nx-side-cta .cta-eng .who { display:flex; flex-direction:column; }
.nx-side-cta .cta-eng .who .nm { font-weight: var(--w-demi); font-size: var(--t-body-sm); color:#fff; }
.nx-side-cta .cta-eng .who .mt { font-size: var(--t-caption); color: rgba(255,255,255,0.6); }
.nx-side-cta .cta-hotline { margin-top: var(--s-5); display:flex; align-items:center; justify-content:space-between; padding: var(--s-3) var(--s-4); border-radius: var(--r-12); background: var(--glass-dark-fill); border:1px solid var(--glass-dark-stroke); }
.nx-side-cta .cta-hotline .lbl { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing:0.14em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.nx-side-cta .cta-hotline .num { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-heading-3); color:#fff; }
.nx-side-cta .btn-primary { width:100%; margin-top: var(--s-4); }

/* =========================================================================
   VARIANT · DENSITY = COMPACT
   ========================================================================= */
#newsRoot[data-density="compact"] .nx-grid { gap: var(--s-4); }
#newsRoot[data-density="compact"] .nx-acard .body { padding: var(--s-4); gap: var(--s-2); }
#newsRoot[data-density="compact"] .nx-acard .exc { display: none; }
#newsRoot[data-density="compact"] .nx-acard .ttl { font-size: var(--t-heading-3); }
#newsRoot[data-density="compact"] .nx-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { #newsRoot[data-density="compact"] .nx-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { #newsRoot[data-density="compact"] .nx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { #newsRoot[data-density="compact"] .nx-grid { grid-template-columns: 1fr; } }

/* ── BUGFIX (user 2026-06-02 "lưới vẫn 4 thẻ") ──────────────────────────────
   The compact rule above (repeat(4,1fr), specificity (1,1,1)) sits AFTER the
   magazine 3-col rule (also (1,1,1)) → source order makes compact win, so the
   LOCKED magazine layout rendered 4 cols + hid excerpts whenever a user had
   toggled "compact" (persisted in localStorage). Magazine must stay 3-col and
   keep excerpts regardless of density — re-assert at (2,1,1) per breakpoint. */
#newsRoot[data-density="compact"][data-grid="magazine"] .nx-grid { grid-template-columns: repeat(3, 1fr); }
#newsRoot[data-density="compact"][data-grid="magazine"] .nx-acard .exc { display: -webkit-box; }
@media (max-width: 1180px){ #newsRoot[data-density="compact"][data-grid="magazine"] .nx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { #newsRoot[data-density="compact"][data-grid="magazine"] .nx-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .nx-hero-inner { grid-template-columns: 1fr; gap: var(--s-8); align-items: start; }
  .nx-hero-rail { max-width: 560px; }
  /* large: lead full-width on top, 4 cards in a 2-col grid below */
  .nx-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .nx-feat-lead { grid-column: span 2; grid-row: span 1; }
  .nx-feat-lead .media { aspect-ratio: 16 / 9; }
  #newsRoot[data-filter="sidebar"] .nx-layout { grid-template-columns: 1fr; }
  #newsRoot[data-filter="sidebar"] .nx-sidebar { display: none; }
  #newsRoot[data-filter="sidebar"] .nx-catnav-chips { display: flex; }
}
@media (max-width: 640px) {
  .nx-feat-grid { grid-template-columns: 1fr; }
  .nx-feat-lead { grid-column: span 1; }
  .nx-feat-lead .media { aspect-ratio: 4 / 3; }
  /* toolbar wraps under the eyebrow on phones — let search take a full row and
     sort drop below so it never overflows narrow screens (FIX 2026-06-03). */
  .nx-list-head { gap: var(--s-3); }
  .nx-toolbar { flex-wrap: wrap; width: 100%; gap: var(--s-3); }
  .nx-tb-search { flex: 1 1 100%; }
  .nx-sort { flex: 1 1 auto; }
}
@media (max-width: 720px) {
  .nx-news { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-7); }
  .nx-catgroup { flex-direction: column; gap: var(--s-2); }
  .nx-catgroup .gl, .nx-allrow .gl { min-width: 0; }
}

/* === INTEGRATION FIX — beat the site-wide "universal heading rule" =========
   The Elementor kit (kit-28192, LAYER 4) injects, to stop Vietnamese diacritic
   clipping on headings:
       h1,h2,h3,h4,h5,h6,.elementor-heading-title,.entry-title{
         line-height:1.12 !important; overflow:visible !important; }
   Our card titles are <h3 class="ttl"> (JS-rendered), so that !important rule
   (a) forces overflow:visible → KILLS -webkit-line-clamp (every title line shows,
   no 2-line clamp) and (b) forces line-height:1.12 → stacked TV diacritics from
   the next line collide with the line above. Re-assert clamp + comfortable
   leading, scoped to .tkt-news-root with !important so we out-specify the global
   bare-h3 rule ((0,3,0) > (0,0,1) when both are !important). We do NOT touch the
   global rule — hero/section headings keep their anti-clip fix. */
.tkt-news-root .nx-acard .ttl,
.tkt-news-root .nx-feat-card .ttl,
.tkt-news-root .nx-feat-lead .ttl {
  display: -webkit-box !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.tkt-news-root .nx-acard .ttl,
.tkt-news-root .nx-feat-card .ttl { line-height: 1.3 !important; }
.tkt-news-root .nx-feat-lead .ttl,
.tkt-news-root #newsRoot[data-grid="magazine"] .nx-acard.feat-span .ttl { line-height: 1.18 !important; }

/* Empty/blank excerpts (some posts have no real excerpt — known data gap) leave a
   dead gap under the title; collapse them so cards stay tidy. */
.tkt-news-root .nx-acard .exc:empty,
.tkt-news-root .nx-feat-card .exc:empty,
.tkt-news-root .nx-feat-lead .exc:empty { display: none; }

/* =========================================================================
   USER FIXES 2026-06-03 (v1.6.12) — image fit, featured excerpt, h1 wrap
   ========================================================================= */

/* (#9/#14) Show the FULL thumbnail with no crop on the showcase cards (featured
   lead, featured side cards, and the big magazine card). object-fit:contain +
   a light tinted background → infographics/portrait images are never cut; the
   media box keeps a stable aspect so the grid stays aligned. The small 3-col
   grid cards keep cover (they're thumbnails, look fine cropped). */
.tkt-news-root .nx-feat-lead .ns-img,
.tkt-news-root .nx-feat-card .ns-img,
.tkt-news-root #newsRoot[data-grid="magazine"] .nx-acard.feat-span .ns-img {
  object-fit: contain !important;
}
.tkt-news-root .nx-feat-lead .media,
.tkt-news-root .nx-feat-card .media,
.tkt-news-root #newsRoot[data-grid="magazine"] .nx-acard.feat-span .media {
  background: var(--bg-tint);
}
/* lead + big card media keep flex-grow (fill the 2-row card height) — contain
   centers the full image in that area (letterbox top/bottom), no crop, no white
   gap at the card bottom. */

/* (#8) featured side cards now carry a category tag + 2-line excerpt (views
   removed from meta). Clamp the excerpt so card heights stay even. */
.tkt-news-root .nx-feat-card .body { gap: var(--s-2); }
.tkt-news-root .nx-feat-card .exc {
  font-size: var(--t-body-sm); color: var(--fg-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* (#1) relax H1 nowrap on phones so the title can wrap instead of overflowing. */
@media (max-width: 640px) {
  .nx-hero h1 { white-space: normal; }
}

/* =========================================================================
   MOBILE OPTIMIZATION 2026-06-03 (v1.6.17) — comprehensive
   Desktop spacing tokens (s-9..s-12 = 48..96px) were applied unchanged on
   phones → sections felt enormous (excessive scroll + whitespace). Scale the
   vertical rhythm down, tighten card padding, lower the lead-image floor,
   enlarge tap targets, and turn the category filter into swipeable strips
   instead of a tall pill wall.
   ========================================================================= */
@media (max-width: 768px) {
  /* section vertical rhythm — roughly halve desktop padding */
  .nx-hero-inner    { padding-top: var(--s-7); padding-bottom: var(--s-7); gap: var(--s-6); }
  .nx-featured      { padding-top: var(--s-6); padding-bottom: var(--s-8); }
  .nx-listing-inner { padding-top: var(--s-7); padding-bottom: var(--s-9); }
  .nx-news-wrap     { padding-bottom: var(--s-9); }

  /* tighter grids + card padding */
  .nx-feat-grid { gap: var(--s-4); }
  .nx-grid { gap: var(--s-4); }
  .tkt-news-root .nx-feat-lead .body { padding: var(--s-5); }
  .nx-feat-card .body, .nx-acard .body { padding: var(--s-4); }

  /* lead/big image floor down so it doesn't eat the whole viewport */
  .tkt-news-root .nx-feat-lead .media { min-height: 200px; }
  .tkt-news-root #newsRoot[data-grid="magazine"] .nx-acard.feat-span .media { min-height: 200px; }

  /* tap targets ≥40–44px */
  .nx-topic { min-height: 40px; padding: var(--s-2) var(--s-4); }
  .nx-chip  { min-height: 40px; }
  .tkt-news-root .nx-side-toggle, .nx-side-link { min-height: 44px; }

  /* category filter (chips nav shows once the sidebar hides ≤1024) → ONE compact
     swipeable strip. v1.6.19 FIX: the v1.6.18 `display:contents` flatten was
     fragile — .nx-chips didn't flatten consistently, so each group stayed a
     wrapping flex box → 3 vertical chip columns (broken). Use DETERMINISTIC
     flex row-nowrap on every level instead (no contents): container + groups +
     chip-rows are all `flex; row; nowrap; flex:0 0 auto` → groups concatenate
     into one continuous horizontal scroll row; labels hidden. */
  #newsRoot[data-filter="sidebar"] .nx-catnav-chips {
    display: flex !important; flex-flow: row nowrap; align-items: center; gap: var(--s-2);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: var(--s-5) calc(-1 * var(--container-pad-mobile)) 0;
    padding: 0 var(--container-pad-mobile) var(--s-3);
  }
  #newsRoot[data-filter="sidebar"] .nx-catnav-chips::-webkit-scrollbar { display: none; }
  #newsRoot[data-filter="sidebar"] .nx-catnav-chips .nx-allrow,
  #newsRoot[data-filter="sidebar"] .nx-catnav-chips .nx-catgroup,
  #newsRoot[data-filter="sidebar"] .nx-catnav-chips .nx-chips {
    display: flex; flex-flow: row nowrap; align-items: center; flex: 0 0 auto;
    gap: var(--s-2); margin: 0; padding: 0; border: 0; min-width: 0;
  }
  #newsRoot[data-filter="sidebar"] .nx-catnav-chips .gl { display: none; }
  #newsRoot[data-filter="sidebar"] .nx-catnav-chips .nx-chip { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .nx-hero-inner    { padding-top: var(--s-6); }
  .nx-hero .lede    { font-size: var(--t-body); }
  .nx-hero-rail     { padding: var(--s-5); }
  /* topic pills: let the label sit on its own line so pills get full width */
  .nx-topics .lbl   { flex: 1 1 100%; }
}