/* main.css -- Dòng Chảy Ngầm (I站). 1:1 chuyển từ mockup-i.html (đối tượng đối chiếu: Dân Trí,
   xem I站設計規格書.md). Chỉ :hover transition (không keyframe/JS animation). Mobile chrome
   (hamburger/home-icon-row/mobile toolbar) và desktop chrome dùng CÙNG template markup, khác
   nhau bằng @media -- không nhân bản markup cho từng breakpoint như mockup demo. */

:root{
  --bg:#FFFFFF;
  --panel:#F4F4F4;
  --ink:#121212;
  --text:#3A3A3A;
  --muted:#6B6B6B;
  --muted-dark:#4D4D4D;
  --accent:#C8102E;
  --accent-tint:#FBE7EA;
  --risk:#8E0B1F;
  --risk-tint:#F8E1E4;
  --line:#E3E5E8;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:#FFFFFF;font-family:'Mulish',sans-serif;color:var(--text)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4,h5,.wordmark,nav,.chip,.button,.meta,.tag{font-family:'Be Vietnam Pro',sans-serif}
button{font-family:inherit}

.view{background:var(--bg);max-width:1158px;margin:0 auto}

/* ---------- ảnh giữ chỗ (không có ảnh thật, không gây CLS) ---------- */
.img-ph{display:block;width:100%;background:var(--panel);border-radius:2px}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.menu-check{position:absolute;opacity:0;width:1px;height:1px}
.meta-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--line)}
.wordmark{font-weight:800;font-size:26px;letter-spacing:-0.02em;color:var(--ink)}
.wordmark .sub{display:block;font-family:'Mulish',sans-serif;font-style:italic;font-weight:400;font-size:11px;color:var(--muted);letter-spacing:0}
.meta-right{display:flex;align-items:center;gap:18px;font-size:13px;color:var(--muted)}
.search-btn{background:none;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;font-size:14px;color:var(--ink);cursor:pointer}
.hamburger{display:none}

.main-nav{display:flex;gap:28px;padding:0 32px;position:sticky;top:0;background:#fff;z-index:5;overflow-x:auto}
.main-nav a{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);padding:14px 0;border-bottom:2px solid transparent;white-space:nowrap}
.main-nav a:hover{color:var(--accent);border-bottom-color:var(--accent);transition:color .2s ease-out,border-color .2s ease-out}
.main-nav a.active{color:var(--accent);border-bottom-color:var(--accent)}

.menu-panel{display:none;padding:10px 20px 18px;border-bottom:1px solid var(--line);background:#fff}
.menu-panel a{display:block;padding:10px 0;font-size:15px;font-weight:600;border-bottom:1px solid var(--line)}
.menu-panel .menu-note{font-size:12px;color:var(--muted);font-family:'Mulish',sans-serif;font-style:italic;margin-top:10px;border:none}

.home-icon-row-wrap,.mobile-article-crumb,.mobile-toolbar-sticky{display:none}

/* ---------- trending bar ---------- */
.trending-bar{display:flex;align-items:center;gap:12px;padding:12px 32px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.trending-label{font-size:13px;font-weight:700;color:var(--risk);display:flex;align-items:center;gap:6px}
.trending-label::before{content:"•";color:var(--risk);font-size:18px;line-height:0}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.chip small{color:var(--muted);font-weight:400;margin-left:6px}
.chip:hover{border-color:var(--accent);color:var(--accent);transition:border-color .2s ease-out,color .2s ease-out}

/* ---------- trang chủ: 3 cột đầu trang ---------- */
.home-main{padding:28px 32px;display:grid;grid-template-columns:234px 1fr 300px;gap:24px}
.side-col-left{display:flex;flex-direction:column;gap:20px}
.mini-card img,.mini-card .img-ph{aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.mini-card h4{font-size:14px;font-weight:600;line-height:1.4;margin:8px 0 0}
.hero-main a{display:block}
.hero-main img,.hero-main .img-ph{aspect-ratio:16/10;object-fit:cover;border-radius:2px;width:100%}
.hero-main .tag{display:inline-block;background:var(--risk);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:2px;margin:14px 0 8px}
.hero-main h3{font-size:24px;line-height:1.35;font-weight:700;margin:0 0 10px;color:var(--ink)}
.hero-main .dek{font-size:15px;color:var(--muted);line-height:1.5;font-family:'Mulish',sans-serif;margin:0}

.side-col-right{display:flex;flex-direction:column;gap:20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px}
.panel h5{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 10px}
.fx-row{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.fx-row:last-child{border-bottom:none}
.fx-row .label{color:var(--text);flex:1 1 auto;min-width:0}
.fx-row .val{font-family:'JetBrains Mono',monospace;font-weight:500;white-space:nowrap;flex-shrink:0}
.fx-row .val.up{color:var(--risk)}
.fx-source{font-size:11px;color:var(--muted);font-style:italic;font-family:'Mulish',sans-serif;margin:10px 0 0;line-height:1.5}
.readlist{list-style:none;margin:0;padding:0;counter-reset:read}
.readlist li{counter-increment:read;display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.readlist li:last-child{border-bottom:none}
.readlist li::before{content:counter(read);font-family:'JetBrains Mono',monospace;color:var(--risk);font-weight:500;flex:0 0 16px}
.readlist a:hover{color:var(--accent);transition:color .2s ease-out}

/* ---------- khối phân loại (3 cột, dùng lại trên trang chủ) ---------- */
.cat-block{padding:24px 32px;border-top:1px solid var(--line)}
.cat-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;border-bottom:2px solid var(--ink);padding-bottom:8px}
.cat-block-head h2{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin:0}
.cat-block-head a{font-size:12px;font-weight:600;color:var(--accent)}
.cat-grid{display:grid;grid-template-columns:234px 1fr 300px;gap:24px}
.cat-feature{display:block}
.cat-feature img,.cat-feature .img-ph{aspect-ratio:16/9;object-fit:cover;border-radius:2px;width:100%}
.cat-feature h3{font-size:20px;margin:12px 0 6px;color:var(--ink);font-weight:700;line-height:1.35}
.cat-feature .dek,.cat-feature p{font-size:14px;color:var(--muted);margin:0;line-height:1.5;font-family:'Mulish',sans-serif}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.cat-list li:last-child{border-bottom:none}
.cat-list img,.cat-list .img-ph{width:72px;height:54px;object-fit:cover;border-radius:2px;flex:0 0 72px}
.cat-list h4{font-size:13px;font-weight:600;line-height:1.4;margin:0}
.cat-list a:hover,.cat-feature:hover h3{color:var(--accent);transition:color .2s ease-out}

/* ---------- spotlight (Đọc sâu) ---------- */
.spotlight{padding:24px 32px;border-top:1px solid var(--line);background:var(--panel)}
.spotlight-track{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px}
.spotlight-card{flex:0 0 220px;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:block}
.spotlight-card img,.spotlight-card .img-ph{aspect-ratio:3/4;object-fit:cover}
.spotlight-card h4{font-size:13px;font-weight:600;padding:10px;margin:0;line-height:1.4}

/* ---------- footer ---------- */
.site-footer{padding:28px 32px;border-top:3px solid var(--accent);background:var(--ink);color:#d8d8d8;font-size:13px;line-height:1.7}
.site-footer .wordmark-footer{font-family:'Be Vietnam Pro',sans-serif;font-weight:800;font-size:23px;color:#fff;margin-bottom:10px}
.site-footer a{color:#e8c98a}
.site-footer .legal-note{color:#9a9a9a;margin-top:12px;font-style:italic;font-family:'Mulish',sans-serif}

/* ---------- trang phân loại ---------- */
.list-head{padding:24px 32px 0}
.list-head h1{font-size:24px;font-weight:700;color:var(--ink);margin:0 0 4px}
.list-head .dek{font-size:15px;color:var(--muted);margin:8px 0 0}
.subcats{display:flex;gap:20px;padding:12px 32px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;flex-wrap:wrap}
.subcats a:hover{color:var(--accent);transition:color .2s ease-out}
.subcat-heading{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin:28px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.list-main{display:grid;grid-template-columns:1fr 300px;gap:28px;padding:24px 32px}
.article-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.article-row img,.article-row .img-ph{width:220px;height:140px;object-fit:cover;border-radius:2px;flex:0 0 220px}
.article-row h3{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.35}
.article-row h3:hover{color:var(--accent);transition:color .2s ease-out}
.article-row .dek{font-size:14px;color:var(--muted);line-height:1.55;font-family:'Mulish',sans-serif;margin:0}
.pagination{display:flex;gap:8px;padding:12px 0}
.pagination a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:13px}
.pagination a.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination a:hover{border-color:var(--accent);color:var(--accent);transition:border-color .2s ease-out,color .2s ease-out}
.pagination a.active:hover{color:#fff}

/* ---------- trang bài viết ---------- */
.article-wrap{display:grid;grid-template-columns:64px minmax(0,680px) minmax(220px,300px);gap:28px;padding:24px 32px;max-width:1158px;margin:0 auto;align-items:start}
.tool-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:60px;align-self:start;width:64px}
.tool-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.tool-rail button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:16px;cursor:pointer;color:var(--ink)}
.tool-rail button:hover{border-color:var(--accent);color:var(--accent);transition:border-color .2s ease-out,color .2s ease-out}
.tool-label{font-size:10px;color:var(--muted);font-family:'Mulish',sans-serif;text-align:center;line-height:1.2}
.article-main .eyebrow{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:12px;gap:12px;flex-wrap:wrap}
.article-main .eyebrow .cat{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-family:'Be Vietnam Pro',sans-serif;font-size:12px}
.article-main h1{font-size:36px;line-height:1.3;font-weight:700;color:var(--ink);margin:0 0 16px}
.publisher-tag{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:18px}
.publisher-tag .badge{background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:2px;font-family:'Be Vietnam Pro',sans-serif;text-transform:uppercase;letter-spacing:.03em}
.art-body > p{font-size:18px;line-height:1.6;margin:0 0 20px;font-family:'Mulish',sans-serif}
.art-body > p:first-of-type{font-weight:400}
.art-body > p:first-of-type::first-letter{font-weight:600}
.art-body h2{font-size:22px;font-weight:700;color:var(--ink);margin:32px 0 14px}
.art-body h3{font-size:18px;font-weight:700;color:var(--ink);margin:24px 0 10px}
.art-body a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-tint)}
.art-body a:hover{color:var(--risk);transition:color .2s ease-out}
.art-body > ul,.art-body > ol{font-size:18px;line-height:1.6;font-family:'Mulish',sans-serif;padding-left:22px}
.art-body table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:15px}
.art-body table th,.art-body table td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.art-body table th{background:var(--panel);font-family:'Be Vietnam Pro',sans-serif;font-weight:600}
.article-figure{margin:0 0 24px}
.article-figure img{border-radius:2px;width:100%}
.article-figure figcaption{font-size:12px;color:var(--muted);font-style:italic;font-family:'Mulish',sans-serif;margin-top:6px;line-height:1.5}

.chart-block{border:1px solid var(--line);border-radius:4px;padding:20px;margin:0 0 24px;background:var(--panel)}
.chart-block h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:0 0 14px}
.bar-row{display:grid;grid-template-columns:170px 1fr 90px;align-items:center;gap:10px;margin-bottom:10px}
.bar-row .bar-label{font-size:13px;font-family:'Be Vietnam Pro',sans-serif;font-weight:600}
.bar-track{background:#fff;border:1px solid var(--line);border-radius:3px;height:18px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent)}
.bar-fill.risk{background:var(--risk)}
.bar-row .bar-val{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;text-align:right}
.chart-source{font-size:12px;color:var(--muted);font-style:italic;font-family:'Mulish',sans-serif;margin-top:4px}

.flow-block{display:flex;align-items:stretch;gap:0;margin:0 0 24px;width:100%}
.flow-step{flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:4px;padding:12px;font-size:13px;background:#fff;position:relative}
.flow-step .num{font-family:'JetBrains Mono',monospace;color:var(--accent);font-weight:500;font-size:12px}
.flow-step p{font-size:13px;line-height:1.5;margin:6px 0 0;font-family:'Mulish',sans-serif}
.flow-arrow{flex:0 0 20px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px}
.flow-block > .flow-arrow:last-child{display:none}

.cite-list{border:1px solid var(--line);border-radius:4px;padding:16px;background:var(--panel);margin:0 0 24px}
.cite-list h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:0 0 10px}
.cite-list ol{margin:0;padding-left:18px;font-size:13px;line-height:1.7;font-family:'Mulish',sans-serif}
.cite-list a{color:var(--accent)}

.related-box{background:var(--panel);border-radius:4px;padding:16px;margin:0 0 24px;display:flex;flex-direction:column}
.related-box a{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;align-items:center}
.related-box a:last-child{border-bottom:none}
.related-box img,.related-box .img-ph{width:60px;height:44px;object-fit:cover;border-radius:2px;flex:0 0 60px}
.related-box a:hover{color:var(--accent);transition:color .2s ease-out}

.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.tag-row a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600}
.tag-row a:hover{border-color:var(--accent);color:var(--accent);transition:border-color .2s ease-out,color .2s ease-out}

.sidebar h5{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 12px}

/* ---------- trang tĩnh (giới thiệu/liên hệ/nguyên tắc biên tập/chính sách bảo mật) ---------- */
.page-wrap{padding:24px 32px 56px;max-width:760px}
.page-wrap h1{font-size:28px;font-weight:700;color:var(--ink);margin:0 0 20px}
.page-body p{font-size:17px;line-height:1.65;margin:0 0 18px;font-family:'Mulish',sans-serif}
.page-body h2{font-size:20px;font-weight:700;color:var(--ink);margin:28px 0 12px}

/* ---------- khung bổ sung: num-highlight / skip-box / budget-table (§十二) ---------- */
.num-highlight{display:flex;gap:16px;margin:0 0 24px}
.num-cell{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px 20px;flex:1}
.num-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:6px}
.num-value{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:500;color:var(--accent)}
.num-unit{font-size:13px;color:var(--text);margin-top:2px}
.num-note{font-size:12px;color:var(--muted);font-style:italic;margin-top:6px;font-family:'Mulish',sans-serif}

.skip-box{border:1px solid var(--risk);background:var(--risk-tint);border-radius:4px;padding:16px 18px;margin:0 0 24px}
.skip-box-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.skip-box-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--risk);color:#fff;font-size:13px;font-weight:700;font-family:'Be Vietnam Pro',sans-serif}
.skip-box-title{font-size:14px;font-weight:700;color:var(--risk);font-family:'Be Vietnam Pro',sans-serif}
.skip-box-body{font-size:15px;line-height:1.6;color:var(--text);font-family:'Mulish',sans-serif}
.skip-box-body p:last-child{margin-bottom:0}

.budget-table-wrap{border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:0 0 24px}
.budget-table-head{background:var(--ink);color:#fff;padding:12px 16px}
.budget-table-head-title{font-size:14px;font-weight:700;font-family:'Be Vietnam Pro',sans-serif}
.budget-table-head-sub{display:block;font-size:12px;color:#bbb;font-family:'Mulish',sans-serif;font-style:italic;margin-top:2px}
.budget-table-inner{padding:0}
.budget-table-inner table{width:100%;border-collapse:collapse;margin:0;font-size:14px}
.budget-table-inner th,.budget-table-inner td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.budget-table-inner th{background:var(--panel);font-family:'Be Vietnam Pro',sans-serif;font-weight:600}

/* ============================================================
   Mobile (≤900px): hamburger + home-icon-row/mobile toolbar,
   các khối nhiều cột gộp 1 cột, cỡ chữ theo mockup .phone.
   ============================================================ */
@media (max-width:900px){
  .main-nav{display:none}
  .meta-bar{padding:12px 16px;display:grid;grid-template-columns:40px 1fr 40px;align-items:center}
  .hamburger{display:flex;flex-direction:column;gap:5px;width:22px;cursor:pointer;position:relative}
  .hamburger span{display:block;height:2px;background:var(--ink);width:100%}
  .wordmark{font-size:19px;margin:0 auto;text-align:center}
  .wordmark .sub{display:none}
  .search-btn{justify-self:end}
  .meta-right{gap:0}
  .meta-right .today{display:none}

  .menu-check:checked ~ .meta-bar .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-check:checked ~ .meta-bar .hamburger span:nth-child(2){opacity:0}
  .menu-check:checked ~ .meta-bar .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu-check:checked ~ .home-icon-row-wrap,.menu-check:checked ~ .mobile-article-crumb,.menu-check:checked ~ .mobile-toolbar-sticky{display:none}
  .menu-check:checked ~ .menu-panel{display:block}

  .home-icon-row-wrap{display:block;position:relative}
  .home-icon-row{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);overflow-x:auto}
  .home-icon-row .home-btn{width:28px;height:28px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;flex:0 0 28px}
  .home-icon-row .cat-chip{font-size:15px;font-weight:600;color:var(--muted-dark);white-space:nowrap;font-family:'Be Vietnam Pro',sans-serif}
  .home-icon-row .cat-chip.active{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:4px}
  .home-icon-row-wrap::after{content:"\203A";position:absolute;right:0;top:0;bottom:1px;width:34px;display:flex;align-items:center;justify-content:center;background:linear-gradient(to right, rgba(255,255,255,0), #fff 55%);color:var(--muted-dark);font-size:20px;font-weight:700;pointer-events:none}

  .mobile-article-crumb{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
  .mobile-article-crumb .home-btn{width:28px;height:28px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;flex:0 0 28px;font-size:14px}
  .mobile-article-crumb .crumb-cat{font-size:14px;font-weight:700;color:var(--accent)}
  .mobile-toolbar-sticky{display:flex;gap:20px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:9}
  .mobile-toolbar-sticky button,.mobile-toolbar-sticky a{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;font-size:15px;color:var(--ink);font-family:'Be Vietnam Pro',sans-serif;font-weight:700;padding:0}
  .mobile-toolbar-sticky .mt-label{font-size:9px;font-weight:400;color:var(--muted);font-family:'Mulish',sans-serif}

  /* review fix #3: bai dau (hero) phai hien truoc tren mobile -- .home-top dua ca khoi
     home-main len truoc trending-bar; trong home-main, hero-main len truoc 2 cot con lai. */
  .home-top{display:flex;flex-direction:column}
  .home-top > .home-main{order:1}
  .home-top > .trending-bar{order:2}
  .home-main{grid-template-columns:1fr;padding:0;display:flex;flex-direction:column}
  .home-main .hero-main{order:1}
  .home-main .side-col-left{order:2;flex-direction:row;padding:0 16px 12px;gap:12px;margin-top:12px}
  .home-main .side-col-left .mini-card{flex:1 1 0;min-width:0}
  .home-main .side-col-right{order:3}
  .hero-main{padding:0}
  .hero-main .tag,.hero-main h3,.hero-main .dek{margin-left:16px;margin-right:16px}
  .hero-main h3{font-size:26px;line-height:36px}
  .hero-main .dek{font-size:16px;color:var(--text)}
  .side-col-right{padding:0 16px 16px;gap:16px;margin-top:16px}

  /* review fix #3b: trending chips thanh 1 dong cuon ngang tren mobile, khong bi wrap nhieu dong */
  .trending-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 16px}
  .trending-bar .chip{flex:0 0 auto}
  .trending-label{flex:0 0 auto}

  .cat-block{padding:16px 0;border-top-width:3px}
  .cat-block-head{padding:0 16px 12px}
  .cat-grid{grid-template-columns:1fr;gap:0}
  .cat-grid .side-col-left{flex-direction:row;padding:0 16px 12px;gap:12px}
  .cat-grid .side-col-left .mini-card{flex:1 1 0;min-width:0}
  .cat-feature{padding:0 16px;margin-bottom:12px}
  .cat-feature h3{font-size:20px;line-height:28px}
  .cat-list{padding:0 16px}

  .spotlight{padding:16px;border-top-width:3px}
  .spotlight-card{flex:0 0 140px}

  .list-main{grid-template-columns:1fr;padding:16px}
  .article-row img,.article-row .img-ph{width:88px;height:66px;flex:0 0 88px}
  .article-row h3{font-size:16px}

  .article-wrap{grid-template-columns:1fr;padding:0;max-width:none}
  .tool-rail{display:none}
  .article-main{padding:16px}
  .article-main h1{font-size:28px;line-height:38.5px}
  .article-main .eyebrow{font-size:12px}
  .art-body p{font-size:17px}
  .flow-block{flex-direction:column}
  .flow-block .flow-arrow{flex:0 0 24px;transform:rotate(90deg)}
  .flow-block > .flow-arrow:last-child{display:none}
  .bar-row{grid-template-columns:96px 1fr 60px;gap:8px}
  .bar-row .bar-label,.bar-row .bar-val{font-size:12px}
  .num-highlight{flex-direction:column}
  .sidebar{padding:0 16px 16px}

  .page-wrap{padding:16px 16px 40px;max-width:none}
}