/* Cây Nấm Nhỏ — chuyển từ /cay-nam-nho/assets/style.css. Mọi class có tiền tố cnn- để không đụng class Flatsome. */
:root{
  --bg:#faf8f2;
  --bg-grad:#f6f3ea;
  --surface:#fffefb;
  --panel:rgba(255,254,250,.85);
  --text:#2f3a29;
  --muted:#8a8f82;
  --green:#4d6a2f;
  --green-dark:#3f5a27;
  --chip:#e9eddc;
  --chip-text:#5b6650;
  --border:#e8e5da;
  --shadow:0 10px 30px rgba(90,100,60,.08);
  --header:rgba(255,254,250,.9);
  --leaf:#d6dfb5;
  --top:0px; /* chiều cao admin bar */
}
:root[data-theme="dark"]{
  --bg:#171b14;
  --bg-grad:#1b2017;
  --surface:#20271c;
  --panel:rgba(32,39,28,.9);
  --text:#e6ead9;
  --muted:#8f9884;
  --green:#a9c57a;
  --green-dark:#b9d38a;
  --chip:#2d3727;
  --chip-text:#b8c4a5;
  --border:#2e3828;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --header:rgba(23,27,20,.9);
  --leaf:#3a4a2c;
}
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg) 0,var(--bg-grad) 100%);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .3s,color .3s;
}
body.admin-bar{--top:32px}
@media (max-width:782px){body.admin-bar{--top:46px}}
@media (max-width:600px){body.admin-bar{--top:0px}}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
[id]{scroll-margin-top:calc(var(--top) + 92px)}
.cnn-display{font-family:'Itim','Nunito',cursive}
.cnn-ico{display:block}
.cnn-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:8px 14px;background:var(--surface);border-radius:0 0 10px 0}
.cnn-skip:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* header */
.cnn-header{
  position:sticky;top:var(--top);z-index:20;
  background:var(--header);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.cnn-header-inner{
  position:relative;
  max-width:1020px;margin:0 auto;height:76px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cnn-brand{flex:none;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green-dark)}
.cnn-brand svg{width:46px;height:46px}
.cnn-brand span{font-size:28px;line-height:1;white-space:nowrap}
/* logo ảnh từ Flatsome: cao tối đa --logo-h (60px, mobile 48px — khớp CNN_LOGO_H trong template-tags.php), rộng tối đa = "Logo container width" */
.cnn-brand--img{--logo-h:60px}
.cnn-brand--img img{display:block;width:auto;height:auto;max-height:var(--logo-h);max-width:min(var(--logo-w,200px),45vw)}
.cnn-brand--img .cnn-logo-dark{display:none}
:root[data-theme="dark"] .cnn-brand--img.has-dark .cnn-logo-light{display:none}
:root[data-theme="dark"] .cnn-brand--img.has-dark .cnn-logo-dark{display:block}
.cnn-tools{display:flex;align-items:center;gap:20px}
.cnn-search{
  display:flex;align-items:center;gap:10px;width:268px;height:38px;padding:0 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.03);
}
.cnn-header-inner .cnn-search{min-width:0}
.cnn-search svg{width:18px;height:18px;flex:none;color:var(--text)}
.cnn-search input{border:0;outline:0;background:transparent;width:100%;font-size:13px;min-width:0;padding:0;height:auto;box-shadow:none}
.cnn-search input::placeholder{color:var(--muted)}
.cnn-search:focus-within{border-color:var(--green)}
.cnn-btn-icon{
  width:38px;height:38px;border:0;border-radius:12px;cursor:pointer;padding:0;
  background:var(--chip);display:grid;place-items:center;
}
.cnn-btn-icon svg{width:20px;height:20px}
.cnn-theme{transition:transform .2s}
.cnn-theme:hover{transform:rotate(20deg)}
.cnn-theme .moon{display:none}
:root[data-theme="dark"] .cnn-theme .sun{display:none}
:root[data-theme="dark"] .cnn-theme .moon{display:block}

/* menu header */
.cnn-menu{margin-right:auto;margin-left:22px}
.cnn-menu-list{display:flex;gap:4px;list-style:none}
.cnn-menu a{
  display:block;padding:7px 12px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;
  color:var(--text);opacity:.8;transition:background .15s,opacity .15s,color .15s;white-space:nowrap;
}
.cnn-menu a:hover{background:var(--chip);opacity:1}
.cnn-menu .current-menu-item>a{background:var(--chip);color:var(--green-dark);opacity:1}
.cnn-burger{display:none}

/* hero */
.cnn-hero{
  position:relative;min-height:216px;display:flex;overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 20%,#fbe9bf 0,transparent 55%),
    radial-gradient(ellipse at 45% 90%,#e9efc9 0,transparent 60%),
    linear-gradient(100deg,#f6efd6 0,#e5ecc5 50%,#b9cf8d 100%);
}
:root[data-theme="dark"] .cnn-hero{
  background:
    radial-gradient(ellipse at 18% 20%,#4a4a2a 0,transparent 55%),
    linear-gradient(100deg,#232a1b 0,#2c3a22 55%,#3d5229 100%);
}
.cnn-bokeh{position:absolute;border-radius:50%;filter:blur(14px);opacity:.55;background:#fff8d8}
/* giao diện tối: đốm sáng mờ đi để không làm chìm chữ tiêu đề xanh nhạt (ghi đè opacity inline) */
:root[data-theme="dark"] .cnn-bokeh{opacity:.1!important}
.cnn-trunk{
  position:absolute;right:-30px;top:-30px;width:330px;height:240px;
  background:linear-gradient(120deg,#6b5a3f,#4a3f2c);
  border-radius:40% 0 0 70%;transform:skewX(-8deg);opacity:.85;filter:blur(1.5px);
}
.cnn-log{
  position:absolute;right:0;bottom:-10px;width:600px;height:88px;
  background:linear-gradient(180deg,#8a9a4f,#5f6e35 60%,#4a4a2d);
  border-radius:100% 0 0 0 / 100% 0 0 0;transform:rotate(-3deg);transform-origin:right bottom;
}
.cnn-moss{
  position:absolute;right:0;bottom:0;width:640px;height:60px;
  background:radial-gradient(circle at 20% 100%,#7a9a3a 0,transparent 55%),
             radial-gradient(circle at 60% 100%,#8aad45 0,transparent 50%),
             radial-gradient(circle at 90% 100%,#6a8a30 0,transparent 55%);
}
.cnn-hero .cnn-leaf{position:absolute;width:56px;height:26px;border-radius:0 100% 0 100%;background:#9bb866;opacity:.8}
/* hero tự giãn theo nội dung (tiêu đề/khẩu hiệu lấy từ Cài đặt nên độ dài không cố định);
   chữ luôn chừa chỗ bên phải cho cây nấm */
.cnn-hero-inner{position:relative;flex:1;max-width:1020px;margin:0 auto;padding:0 20px;display:flex;align-items:center}
.cnn-hero-text{position:relative;z-index:1;margin-left:40px;padding:40px 0;max-width:min(560px,calc(100% - 340px))}
.cnn-hero h1{font-size:56px;line-height:1.05;color:var(--green);font-weight:400;text-shadow:0 2px 0 rgba(255,255,255,.4)}
.cnn-hero-title,.cnn-hero-kicker{display:block}
.cnn-hero-kicker{margin-top:8px;font-size:22px;line-height:1.25;color:var(--green-dark);text-shadow:none}
.cnn-hero p{margin-top:10px;display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#55603f}
.cnn-hero p span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:root[data-theme="dark"] .cnn-hero p{color:#c3cfa8}
.cnn-hero p svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--green)}
.cnn-mascot{position:absolute;right:130px;bottom:30px;width:150px;height:auto;filter:drop-shadow(0 6px 6px rgba(60,70,30,.25))}
.cnn-flower{position:absolute;width:34px;height:34px}
.cnn-hero.small{min-height:150px}
.cnn-hero.small .cnn-hero-text{padding:30px 0;max-width:calc(100% - 290px)}
.cnn-hero.small h1{font-size:42px}
.cnn-hero.small .cnn-mascot{width:110px;bottom:14px;right:120px}
.cnn-hero.small .cnn-trunk,.cnn-hero.small .cnn-flower{display:none}

/* khung + danh sách */
.cnn-container{max-width:880px;margin:10px auto 60px;padding:0 20px;position:relative;z-index:2}
.cnn-container--flush{margin-top:0}
.cnn-panel{
  margin-top:-4px;padding:22px 16px 18px;border-radius:22px;
  background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--border);
}
.cnn-panel + .cnn-panel{margin-top:28px}
.cnn-panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 12px;padding:0 6px 16px}
.cnn-panel-head h2{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:600;color:var(--text);font-family:'Nunito',sans-serif;line-height:1.3}
.cnn-panel-head h2 svg{width:26px;height:26px;flex:none}
.cnn-sort{position:relative;flex:none}
.cnn-sort select{
  appearance:none;-webkit-appearance:none;cursor:pointer;margin:0;
  height:36px;padding:0 36px 0 38px;border-radius:10px;font-size:13px;
  background:var(--surface);border:1px solid var(--border);outline:0;box-shadow:none;
}
.cnn-sort svg{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none}
.cnn-sort .l{left:12px}.cnn-sort .r{right:12px;width:14px;height:14px;color:var(--muted)}
.cnn-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.cnn-item a{
  display:flex;align-items:center;gap:14px;min-height:40px;padding:6px 14px 6px 13px;
  text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.cnn-item a:hover{transform:translateX(3px);box-shadow:0 4px 12px rgba(90,100,60,.12);border-color:#cfd8b8}
.cnn-badge{
  flex:none;width:93px;height:24px;display:grid;place-items:center;
  background:var(--chip);color:var(--chip-text);font-size:12px;border-radius:999px;
  white-space:nowrap;overflow:hidden;
}
.cnn-item-title{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnn-chev{width:16px;height:16px;flex:none;color:var(--text)}
.cnn-empty{text-align:center;color:var(--muted);padding:30px 0;font-size:14px}
.cnn-more{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--green);text-decoration:none;font-weight:600}
.cnn-more:hover{text-decoration:underline}
.cnn-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted);margin:18px 6px 14px}
.cnn-crumbs a{text-decoration:none}.cnn-crumbs a:hover{color:var(--green)}

/* video */
.cnn-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;list-style:none}
.cnn-video{
  display:block;width:100%;height:100%;text-align:left;cursor:pointer;padding:0;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  transition:transform .15s,box-shadow .15s;
}
.cnn-video:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(90,100,60,.15)}
.cnn-thumb{
  position:relative;aspect-ratio:16/9;display:block;overflow:hidden;
  background:linear-gradient(135deg,#cfdca3,#8aa354);
}
.cnn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cnn-play{
  position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,254,250,.9);display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,.2);transition:transform .15s;
}
.cnn-video:hover .cnn-play{transform:translate(-50%,-50%) scale(1.1)}
.cnn-play svg{width:20px;height:20px;margin-left:3px;color:#4d6a2f}
.cnn-vinfo{display:block;padding:10px 12px 12px}
.cnn-vtitle{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cnn-modal{position:fixed;inset:0;z-index:100000;display:none;place-items:center;background:rgba(20,26,15,.75);padding:20px}
.cnn-modal.open{display:grid}
.cnn-modal-box{position:relative;width:min(900px,100%)}
.cnn-frame{aspect-ratio:16/9;width:100%;border-radius:14px;overflow:hidden;background:#000}
.cnn-frame iframe{width:100%;height:100%;border:0;display:block}
.cnn-modal-close{
  position:absolute;right:0;top:-44px;width:36px;height:36px;border:0;border-radius:50%;padding:0;
  background:var(--surface);cursor:pointer;font-size:20px;line-height:1;
}

/* lá rơi */
.cnn-fall{position:fixed;z-index:1;pointer-events:none;border-radius:0 100% 0 100%;background:var(--leaf);opacity:.8}

/* trang danh sách chương */
.cnn-filters{display:flex;gap:10px;flex-wrap:wrap;padding:0 6px 14px}
.cnn-filters .cnn-search{flex:1;min-width:200px;width:auto;height:36px}
.cnn-count{font-size:12.5px;color:var(--muted);padding:0 8px 12px}
.cnn-count:empty{display:none}
.cnn-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:18px}
.cnn-pager:empty{display:none}
.cnn-pager button,.cnn-pager a,.cnn-pager .current{
  min-width:34px;height:34px;padding:0 10px;border-radius:10px;cursor:pointer;font-size:13px;
  background:var(--surface);border:1px solid var(--border);
  display:inline-grid;place-items:center;text-decoration:none;text-indent:0;
}
.cnn-pager button:hover:not(:disabled),.cnn-pager a:hover{border-color:var(--green)}
.cnn-pager button.on,.cnn-pager .current{background:var(--green);border-color:var(--green);color:var(--surface)}
.cnn-pager button:disabled{opacity:.4;cursor:default}
.cnn-pager span:not(.current){align-self:center;color:var(--muted)}

/* trang đọc */
.cnn-progress{position:fixed;left:0;top:var(--top);height:3px;width:0;background:var(--green);z-index:30}
.cnn-reader{
  padding:30px 34px 28px;border-radius:22px;background:var(--panel);
  border:1px solid var(--border);box-shadow:var(--shadow);
}
.cnn-reader--center{text-align:center}
.cnn-reader .cnn-badge{width:auto;padding:0 14px;display:inline-block;line-height:24px}
.cnn-reader h1{margin:12px 0 0;font-size:34px;font-weight:400;color:var(--green);line-height:1.2}
.cnn-meta{margin-top:8px;font-size:13px;color:var(--muted)}
.cnn-meta a{color:var(--green);font-weight:600;text-decoration:none}
.cnn-meta a:hover{text-decoration:underline}
/* trang tác giả */
.cnn-profile{display:flex;align-items:center;gap:24px;padding-bottom:22px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.cnn-profile-img{flex:none;width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--chip);box-shadow:var(--shadow)}
.cnn-profile h1{margin-top:8px}
.cnn-profile-name,.cnn-profile-kicker{display:block}
.cnn-profile-kicker{margin-top:4px;font-size:17px;line-height:1.35;color:var(--green-dark)}
.cnn-profile-desc{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.cnn-toolbar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0 8px;padding:10px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:13px;
}
.cnn-toolbar .grow{flex:1}
.cnn-toolbar button{
  height:32px;min-width:32px;padding:0 10px;border-radius:9px;cursor:pointer;margin:0;
  background:var(--surface);border:1px solid var(--border);
}
.cnn-toolbar button:hover{border-color:var(--green)}
.cnn-jump select{
  height:32px;padding:0 10px;border-radius:9px;background:var(--surface);margin:0 0 0 4px;
  border:1px solid var(--border);font-size:13px;max-width:180px;
}

/* nội dung bài viết */
.cnn-content{margin-top:20px;font-size:var(--fs,17px);line-height:1.8;max-width:680px;margin-inline:auto;overflow-wrap:break-word}
.cnn-content--chapter{font-size:var(--fs,18px);line-height:1.85}
.cnn-content p,.cnn-content ul,.cnn-content ol,.cnn-content figure,.cnn-content blockquote,.cnn-content table{margin-bottom:1.1em}
.cnn-content--chapter p{text-indent:1.5em}
.cnn-content h2,.cnn-content h3,.cnn-content h4{margin:1.4em 0 .6em;line-height:1.3;color:var(--green-dark)}
.cnn-content h2{font-size:1.35em}.cnn-content h3{font-size:1.15em}
.cnn-content a{color:var(--green);text-underline-offset:2px}
.cnn-content ul,.cnn-content ol{padding-left:1.4em}
.cnn-content li{margin-bottom:.3em}
.cnn-content blockquote{padding:.4em 1em;border-left:3px solid var(--leaf);color:var(--muted)}
.cnn-content img{border-radius:12px;display:block}
.cnn-content .aligncenter{margin-inline:auto}
.cnn-content .alignleft{float:left;margin:.3em 1.2em 1em 0}
.cnn-content .alignright{float:right;margin:.3em 0 1em 1.2em}
.cnn-content .wp-caption-text,.cnn-content figcaption{font-size:.8em;color:var(--muted);text-align:center;margin-top:.4em}
.cnn-content iframe,.cnn-content video,.cnn-content embed{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:14px;margin:0 auto 1.1em}
.cnn-content table{width:100%;border-collapse:collapse;font-size:.9em}
.cnn-content th,.cnn-content td{border:1px solid var(--border);padding:6px 10px}
.cnn-content hr{border:0;text-align:center;margin:1.6em 0;color:var(--muted)}
.cnn-content hr::before{content:'· · ·';letter-spacing:.5em}
.cnn-content::after{content:'';display:table;clear:both}
.cnn-chapnav{display:flex;gap:10px;margin-top:28px;padding-top:22px;border-top:1px solid var(--border)}
.cnn-nbtn{
  flex:1;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);text-decoration:none;font-size:14px;
  transition:transform .15s,border-color .15s;
}
a.cnn-nbtn:hover{border-color:var(--green);transform:translateY(-2px)}
.cnn-nbtn.disabled{opacity:.4;pointer-events:none}
.cnn-nbtn.next{justify-content:flex-end}
.cnn-nbtn.mid{flex:none;justify-content:center;color:var(--green);font-weight:600}
.cnn-nbtn svg{width:16px;height:16px;flex:none}
.cnn-nbtn.prev svg{transform:rotate(180deg)}

/* footer */
.cnn-footer{position:relative;z-index:2;border-top:1px solid var(--border);background:var(--header)}
.cnn-footer-main{
  max-width:1020px;margin:0 auto;padding:36px 20px 28px;
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:28px 40px;
}
.cnn-footer-brand .cnn-brand{display:inline-flex}
.cnn-footer-desc{margin-top:12px;max-width:420px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.cnn-footer-title{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-dark);margin-bottom:12px}
.cnn-footer-menu{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px}
.cnn-footer-menu a,.cnn-social a{text-decoration:none;color:var(--text);opacity:.85;transition:color .15s,opacity .15s}
.cnn-footer-menu a:hover{color:var(--green);opacity:1}
.cnn-footer-more{margin-top:20px}
.cnn-footer-more summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;user-select:none;margin-bottom:0}
.cnn-footer-more[open] summary{margin-bottom:8px}
.cnn-footer-more summary::-webkit-details-marker{display:none}
.cnn-footer-more summary svg{width:10px;height:10px;transition:transform .2s}
/* khối phụ: chữ 10px, mục xếp ngang & tự xuống dòng để menu nhiều mục vẫn gọn */
.cnn-footer-more summary,.cnn-footer-more .cnn-footer-menu{font-size:10px}
.cnn-footer-more .cnn-footer-menu{flex-direction:row;flex-wrap:wrap;gap:4px 12px;line-height:1.5}
.cnn-footer-more[open] summary svg{transform:rotate(180deg)}
.cnn-footer-more summary:hover{color:var(--green)}
.cnn-footer-more summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.cnn-social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cnn-social a{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--chip);color:var(--chip-text);font-size:12.5px;font-weight:600}
.cnn-social a:hover{opacity:1;color:var(--green-dark)}
.cnn-footer-bottom{
  max-width:1020px;margin:0 auto;padding:14px 20px 18px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--muted);text-align:center;
}
.cnn-footer-bottom a{color:inherit}
@media (max-width:760px){
  .cnn-header-inner{height:64px}
  .cnn-brand--img{--logo-h:48px}
  .cnn-footer-main{grid-template-columns:1fr 1fr;padding:28px 20px 22px;gap:24px 20px}
  .cnn-footer-brand{grid-column:1/-1}
}
@media (max-width:420px){
  .cnn-footer-main{grid-template-columns:1fr}
}

/* responsive */
@media (max-width:980px){.cnn-search{width:200px}}
@media (max-width:860px){
  .cnn-burger{display:grid}
  .cnn-menu{
    display:none;position:absolute;left:0;right:0;top:100%;margin:0;
    padding:10px 16px 14px;background:var(--header);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);box-shadow:0 10px 20px rgba(0,0,0,.06);
  }
  .cnn-menu.open{display:block}
  .cnn-menu-list{flex-direction:column;gap:2px}
  .cnn-menu a{padding:11px 12px}
  .cnn-tools{margin-left:auto}
}
@media (max-width:760px){
  .cnn-search{width:auto;flex:1;min-width:0}
  .cnn-brand span{font-size:22px}
  .cnn-brand svg{width:38px;height:38px}
  .cnn-tools{gap:10px;flex:1;justify-content:flex-end}
  .cnn-hero{min-height:200px}
  .cnn-hero-text{margin-left:0;padding:30px 0;max-width:calc(100% - 100px)}
  .cnn-hero h1{font-size:34px}
  .cnn-trunk{width:150px;right:-50px;opacity:.6}
  .cnn-hero-kicker{font-size:17px;margin-top:6px}
  .cnn-hero p{font-size:13px}
  .cnn-mascot{right:10px;width:100px;bottom:20px}
  .cnn-panel-head h2{font-size:19px;white-space:nowrap}
  .cnn-badge{width:84px}
  .cnn-reader{padding:22px 18px}
  .cnn-reader h1{font-size:26px}
  .cnn-profile{flex-direction:column;text-align:center;gap:14px}
  .cnn-profile-img{width:96px;height:96px}
  .cnn-hero.small h1{font-size:27px}
  .cnn-hero.small .cnn-hero-text{padding:26px 0;max-width:calc(100% - 88px)}
  .cnn-hero.small .cnn-mascot{right:10px;width:80px}
  .cnn-chapnav{flex-wrap:wrap}.cnn-nbtn.mid{order:3;flex-basis:100%}
}
@media (max-width:560px){
  .cnn-header-inner{padding:0 12px;gap:8px}
  .cnn-tools{gap:8px}
  .cnn-header-inner .cnn-search{padding:0 10px;gap:6px}
  .cnn-brand span{font-size:20px}
  .cnn-brand svg{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}