/*
Theme Name: Giáo Dục 24h
Theme URI: https://giaoduc24h.vn
Author: VNSecurity
Author URI: https://giaoduc24h.vn
Description: Theme tin tức giáo dục — chuyển từ mẫu HTML giaoduc24h. Hỗ trợ responsive (menu hamburger mobile), custom logo, menu, widget, bình luận, post views.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: giaoduc24h
Tags: news, blog, education, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready
*/

:root{
  --blue:#1466c4;
  --blue-dark:#0d4f9e;
  --blue-deep:#0a3d7a;
  --red:#e1141d;
  --gray:#6b7280;
  --line:#e5e7eb;
  --bg:#f1f3f6;
  --text:#1f2937;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
img{display:block;max-width:100%}
.container{width:1100px;max-width:100%;margin:0 auto;padding:0 12px}
.row{display:flex;gap:20px}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- UTILITY STRIP (tầng 1) ---------- */
.utility{background:var(--blue-deep);color:#cfe0f5}
.utility .container{display:flex;align-items:center;justify-content:space-between;height:34px;font-size:12px}
.utility .u-left{display:flex;align-items:center;gap:8px}
.utility .u-left .dot{opacity:.5}
.utility .u-right{display:flex;align-items:center;gap:0}
.utility .u-right a{padding:0 12px;line-height:34px;border-left:1px solid rgba(255,255,255,.12);color:#cfe0f5}
.utility .u-right a:hover{color:#fff;background:rgba(255,255,255,.06)}
.utility .u-right a:first-child{border-left:none}
.utility .btn-login{background:var(--red);color:#fff!important;font-weight:600;border-radius:4px;padding:0 14px!important;margin-left:10px;line-height:34px;border:none!important}
.utility .btn-login:hover{background:#c20f17}

/* ---------- TOPBAR (tầng 2) ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:center;gap:12px;line-height:1}
.logo .mark{
  width:50px;height:50px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),#3aa0e6);
  display:flex;align-items:center;justify-content:center;font-size:26px;
  box-shadow:0 6px 14px rgba(20,102,196,.32)
}
.logo .brand{font-size:30px;font-weight:800;color:var(--blue);letter-spacing:-.5px}
.logo .brand .h{color:var(--red)}
.logo .slogan{font-size:11px;color:var(--gray);margin-top:5px;font-weight:500}
.topbar-ad{
  width:468px;max-width:50%;height:64px;border-radius:8px;overflow:hidden;position:relative;
  background:linear-gradient(100deg,var(--blue) 0%,#1e88d8 55%,#2bb3c9 100%);
  display:flex;align-items:center;color:#fff;padding:0 20px;gap:14px;
  box-shadow:0 6px 16px rgba(20,102,196,.25)
}
.topbar-ad::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;background:rgba(255,255,255,.08);border-radius:50%}
.topbar-ad .ad-badge{font-size:9px;font-weight:700;background:rgba(255,255,255,.2);padding:3px 7px;border-radius:3px;letter-spacing:1px}
.topbar-ad .ad-text{flex:1}
.topbar-ad .ad-text b{display:block;font-size:17px;font-weight:800;letter-spacing:.5px}
.topbar-ad .ad-text span{font-size:11.5px;opacity:.9}
.topbar-ad .ad-btn{background:#ffd400;color:#1a1a1a;font-size:12px;font-weight:800;padding:7px 14px;border-radius:5px;white-space:nowrap;position:relative;z-index:1}

/* ---------- NAV (tầng 3) ---------- */
nav.main{background:linear-gradient(90deg,var(--blue-dark),var(--blue));position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(13,79,158,.25)}
nav.main .container{display:flex;align-items:center;justify-content:space-between}
nav.main ul{list-style:none;display:flex}
nav.main ul li{position:relative}
nav.main ul li a{
  display:block;color:#fff;font-weight:600;font-size:13px;
  padding:14px 15px;text-transform:uppercase;letter-spacing:.3px;transition:background .15s
}
nav.main ul li a::after{
  content:"";position:absolute;left:50%;bottom:8px;width:0;height:3px;border-radius:3px;
  background:#ffd400;transform:translateX(-50%);transition:width .2s
}
nav.main ul li a:hover,nav.main ul li.active a{background:rgba(255,255,255,.1);color:#fff}
nav.main ul li a:hover::after,nav.main ul li.active a::after{width:60%}

/* ---------- BREAKING NEWS TICKER ---------- */
.ticker{background:#fff;border-bottom:1px solid var(--line)}
.ticker .container{display:flex;align-items:center;gap:14px;height:42px;overflow:hidden}
.ticker .label{background:var(--red);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:5px 12px;border-radius:4px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.ticker .label .live{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.ticker .track{flex:1;overflow:hidden;white-space:nowrap}
.ticker .track span{display:inline-block;padding-left:100%;animation:run 26s linear infinite;font-size:13px;color:#374151}
.ticker .track a{margin-right:42px;font-weight:500}
.ticker .track a::before{content:"•";color:var(--blue);margin-right:42px}
@keyframes run{to{transform:translateX(-100%)}}
.ticker-search{display:flex;align-items:center;background:#f1f3f6;border:1px solid var(--line);border-radius:20px;padding:0 4px 0 14px;height:30px;flex-shrink:0;transition:border-color .2s,background .2s}
.ticker-search:focus-within{background:#fff;border-color:var(--blue)}
.ticker-search input{border:none;background:transparent;outline:none;font-size:13px;width:150px;color:var(--text)}
.ticker-search input::placeholder{color:#9aa1ac}
.ticker-search button{border:none;background:var(--blue);color:#fff;cursor:pointer;font-size:13px;width:26px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* ---------- SECTION TITLES ---------- */
.sec-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;border-bottom:2px solid var(--blue);padding-bottom:0}
.sec-title h2{font-size:16px;font-weight:800;text-transform:uppercase;color:#fff;background:var(--blue);padding:8px 18px;border-radius:4px 4px 0 0}
.sec-title.red h2{background:var(--red)}
.sec-title.red{border-bottom-color:var(--red)}
.sec-title .more{font-size:12px;color:var(--gray)}

main{padding:22px 0}
.block{background:#fff;border-radius:6px;padding:16px;margin-bottom:22px;box-shadow:0 1px 2px rgba(0,0,0,.05)}

/* ---------- HERO ---------- */
.hero{display:grid;grid-template-columns:1.55fr 1fr;gap:20px}
.feature{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.feature .img-wrap{position:relative}
.feature img{width:100%;height:320px;object-fit:cover}
.feature .tag{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:3px;text-transform:uppercase}
.feature .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);color:#fff;width:34px;height:46px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}
.feature .arrow.left{left:0}
.feature .arrow.right{right:0}
.feature .body{padding:14px 16px 18px}
.feature .body h3{font-size:21px;font-weight:800;line-height:1.3;margin-bottom:8px}
.feature .body p{color:var(--gray);font-size:13px;margin-bottom:10px}
.feature .meta{font-size:12px;color:#9aa1ac;display:flex;gap:16px}
.dots{display:flex;gap:6px;justify-content:center;padding:10px 0}
.dots i{width:8px;height:8px;border-radius:50%;background:#cdd3da;display:block}
.dots i.on{background:var(--blue);width:20px;border-radius:4px}

/* read list (right of hero) */
.readbox{background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;border:none;background:#fff;padding:11px 0;font-weight:700;font-size:13px;cursor:pointer;color:var(--gray);text-transform:uppercase}
.tabs button.on{color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue)}
.read-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.read-item:last-child{border-bottom:none}
.read-item .num{font-size:22px;font-weight:800;color:var(--blue);min-width:22px}
.read-item img{width:74px;height:54px;object-fit:cover;border-radius:4px;flex-shrink:0}
.read-item h4{font-size:13px;font-weight:600;line-height:1.35}
.read-item .time{font-size:11px;color:#9aa1ac;margin-top:4px}

/* ---------- TOPICS ---------- */
.topics{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.topic{flex:1;min-width:120px;text-align:center;padding:8px}
.topic .ico{width:58px;height:58px;border-radius:50%;background:#eaf2fc;color:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:26px}
.topic span{font-size:12px;font-weight:600;color:#374151}

/* ---------- LIST ARTICLE ---------- */
.art{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.art:last-child{border-bottom:none}
.art img{width:140px;height:92px;object-fit:cover;border-radius:5px;flex-shrink:0}
.art h3{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:6px}
.art p{font-size:12.5px;color:var(--gray)}
.art .time{font-size:11px;color:#9aa1ac;margin-top:6px}

/* tu van box */
.promo{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.promo img{width:100%;height:170px;object-fit:cover}
.promo .body{padding:14px}
.promo .body h3{font-size:16px;font-weight:800;margin-bottom:6px}
.promo .body p{font-size:12.5px;color:var(--gray);margin-bottom:12px}
.promo .body a{display:inline-block;background:var(--blue);color:#fff;font-size:12px;font-weight:600;padding:7px 16px;border-radius:4px}

/* ---------- 3 COLS ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mini{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.mini:last-child{border-bottom:none}
.mini img{width:78px;height:58px;object-fit:cover;border-radius:4px;flex-shrink:0}
.mini h4{font-size:13px;font-weight:600;line-height:1.35}
.mini .time{font-size:11px;color:#9aa1ac;margin-top:4px}
.doc-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.doc-item:last-child{border-bottom:none}
.doc-item .ico{width:38px;height:38px;border-radius:6px;background:#eaf2fc;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.doc-item h4{font-size:13px;font-weight:600;line-height:1.3}
.doc-item .dl{margin-left:auto;font-size:11px;color:var(--blue);font-weight:600;white-space:nowrap}

/* ---------- SUBSCRIBE BAND ---------- */
.band{background:var(--blue);color:#fff;border-radius:8px;padding:22px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;margin-bottom:22px}
.band h3{font-size:18px;font-weight:800;text-transform:uppercase}
.band p{font-size:12.5px;opacity:.9;margin:6px 0 12px}
.band form{display:flex;gap:8px;max-width:520px}
.band input{flex:1;border:none;border-radius:5px;padding:11px 14px;font-size:13px}
.band button{background:#ffd400;color:#222;border:none;font-weight:700;padding:0 22px;border-radius:5px;cursor:pointer}
.band .social{text-align:right}
.band .social b{display:block;font-size:13px;text-transform:uppercase;margin-bottom:10px}
.band .social .ic{display:inline-flex;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);align-items:center;justify-content:center;margin-left:6px}

/* ---------- FOOTER ---------- */
footer{background:#16263c;color:#c2ccd9;padding:34px 0 0;font-size:13px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;padding-bottom:26px;border-bottom:1px solid #29384f}
footer .brand{font-size:26px;font-weight:800;color:#fff}
footer .brand .h{color:var(--red)}
footer p{margin-top:10px;line-height:1.7;color:#94a3b8}
footer h5{color:#fff;font-size:14px;text-transform:uppercase;margin-bottom:12px}
footer ul{list-style:none}
footer ul li{padding:5px 0}
footer ul li a:hover{color:#fff}
footer .copy{text-align:center;padding:16px 0;color:#7d8aa0;font-size:12px}

/* ================================================== */
/*  BREADCRUMB (dùng chung cho category & single)     */
/* ================================================== */
.breadcrumb{background:#fff;border-bottom:1px solid var(--line)}
.breadcrumb .container{padding-top:10px;padding-bottom:10px;font-size:12.5px;color:var(--gray)}
.breadcrumb a{color:var(--blue)}
.breadcrumb .sep{margin:0 7px;color:#c2c8d0}

/* layout 2 cột: nội dung + sidebar */
.page{display:grid;grid-template-columns:1fr 320px;gap:24px}

/* ---------- SIDEBAR WIDGETS ---------- */
.widget{background:#fff;border-radius:6px;padding:16px;margin-bottom:22px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.widget-title{font-size:15px;font-weight:800;text-transform:uppercase;color:var(--text);padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--blue);position:relative}
.widget-title::after{content:"";position:absolute;left:0;bottom:-2px;width:60px;height:2px;background:var(--red)}
.rank-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.rank-item:last-child{border-bottom:none}
.rank-item .n{width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rank-item:nth-child(1) .n{background:var(--red)}
.rank-item h4{font-size:13px;font-weight:600;line-height:1.35}
.rank-item .time{font-size:11px;color:#9aa1ac;margin-top:3px}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px}
.tagcloud a{font-size:12px;background:#eef2f7;color:#475569;padding:5px 12px;border-radius:16px}
.tagcloud a:hover{background:var(--blue);color:#fff}
.ad-box{background:#eef2f7;border:1px dashed #c5ced9;border-radius:6px;height:250px;display:flex;align-items:center;justify-content:center;color:#9aa1ac;font-size:13px}

/* ================================================== */
/*  TRANG CHUYÊN MỤC (category)                       */
/* ================================================== */
.cat-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.cat-head .bar{width:6px;height:34px;background:var(--blue);border-radius:3px}
.cat-head h1{font-size:26px;font-weight:800;text-transform:uppercase;color:var(--text)}
.cat-head p{font-size:13px;color:var(--gray);margin-top:2px}

/* bài nổi bật đầu chuyên mục */
.cat-lead{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05);margin-bottom:22px}
.cat-lead img{width:100%;height:280px;object-fit:cover}
.cat-lead .body{padding:18px 20px}
.cat-lead .cat-tag{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:3px;text-transform:uppercase;margin-bottom:10px}
.cat-lead h2{font-size:23px;font-weight:800;line-height:1.3;margin-bottom:10px}
.cat-lead p{color:var(--gray);font-size:13.5px;margin-bottom:12px}
.cat-lead .meta{font-size:12px;color:#9aa1ac;display:flex;gap:16px}

/* lưới danh sách bài chuyên mục */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:6px}
.card{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 8px 20px rgba(0,0,0,.1);transform:translateY(-2px)}
.card img{width:100%;height:160px;object-fit:cover}
.card .body{padding:14px;flex:1;display:flex;flex-direction:column}
.card .cat-tag{font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;margin-bottom:6px}
.card h3{font-size:15.5px;font-weight:700;line-height:1.4;margin-bottom:8px}
.card p{font-size:12.5px;color:var(--gray);margin-bottom:10px;flex:1}
.card .meta{font-size:11px;color:#9aa1ac;display:flex;gap:14px;border-top:1px solid var(--line);padding-top:9px}

/* phân trang */
.pagination{display:flex;justify-content:center;gap:6px;margin:26px 0 4px}
.pagination a{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:6px;font-weight:600;color:var(--text);padding:0 12px}
.pagination a:hover{border-color:var(--blue);color:var(--blue)}
.pagination a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination a.disabled{opacity:.45;pointer-events:none}

/* ================================================== */
/*  TRANG CHI TIẾT (single)                           */
/* ================================================== */
.article{background:#fff;border-radius:6px;padding:26px 30px;box-shadow:0 1px 2px rgba(0,0,0,.05);margin-bottom:22px}
.article .cat-tag{display:inline-block;background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:3px;text-transform:uppercase;margin-bottom:14px}
.article h1{font-size:30px;font-weight:800;line-height:1.3;margin-bottom:14px;color:#16263c}
.article .sapo{font-size:16px;font-weight:600;color:#374151;line-height:1.6;margin-bottom:18px;padding-left:14px;border-left:4px solid var(--blue)}
.article .post-meta{display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--gray);padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.article .post-meta .author{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text)}
.article .post-meta .author img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.content{font-size:16px;line-height:1.85;color:#2b3440}
.content p{margin-bottom:18px}
.content h2{font-size:21px;font-weight:800;margin:26px 0 12px;color:#16263c}
.content h3{font-size:18px;font-weight:700;margin:22px 0 10px}
.content figure{margin:22px 0}
.content figure img{width:100%;border-radius:6px}
.content figure figcaption{text-align:center;font-size:12.5px;color:#9aa1ac;margin-top:8px;font-style:italic}
.content blockquote{background:#f4f8fd;border-left:4px solid var(--blue);padding:14px 18px;margin:20px 0;font-style:italic;color:#374151;border-radius:0 6px 6px 0}
.content ul,.content ol{margin:0 0 18px 22px}
.content li{margin-bottom:8px}

/* tags + share */
.post-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:24px 0}
.post-tags .lbl{font-weight:700;font-size:13px}
.post-tags a{font-size:12px;background:#eef2f7;color:#475569;padding:5px 12px;border-radius:16px}
.post-tags a:hover{background:var(--blue);color:#fff}
.share{display:flex;align-items:center;gap:10px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}
.share .lbl{font-weight:700;font-size:13px;margin-right:4px}
.share a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.share .fb{background:#1877f2}.share .tw{background:#0f1419}.share .yt{background:#ff0000}.share .tg{background:#229ed9}

/* author box */
.author-box{display:flex;gap:16px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:26px}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-box h4{font-size:15px;font-weight:800;margin-bottom:5px}
.author-box p{font-size:13px;color:var(--gray);line-height:1.6}

/* related */
.related{margin-bottom:26px}
.related .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:14px}

/* comments */
.comments{background:#fff;border-radius:6px;padding:22px 26px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.comments h3{font-size:16px;font-weight:800;text-transform:uppercase;margin-bottom:16px}
.cmt-form textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:12px;font-size:14px;font-family:inherit;min-height:90px;resize:vertical}
.cmt-form .frow{display:flex;gap:10px;margin-top:10px}
.cmt-form input{flex:1;border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:13px}
.cmt-form button{background:var(--blue);color:#fff;border:none;font-weight:700;padding:0 26px;border-radius:6px;cursor:pointer}
.cmt{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.cmt img{width:42px;height:42px;border-radius:50%;flex-shrink:0}
.cmt .name{font-weight:700;font-size:13.5px}
.cmt .when{font-size:11px;color:#9aa1ac;margin-bottom:5px}
.cmt p{font-size:13.5px;color:#374151}

/* ---------- MOBILE NAV (burger - hidden on desktop) ---------- */
.nav-toggle,.nav-burger,.nav-title{display:none}

/* ================================================== */
/*  RESPONSIVE — TABLET (≤880px)                      */
/* ================================================== */
@media(max-width:880px){
  .hero,.grid3,.cat-grid,.cat-lead,.related .grid2{grid-template-columns:1fr}
  .page{grid-template-columns:1fr}
  .row{flex-direction:column;gap:0}
  .band{grid-template-columns:1fr}
  .band .social{text-align:left}
  footer .cols{grid-template-columns:1fr 1fr}
  .topbar-ad{display:none}
  .article{padding:18px}
  .article h1{font-size:24px}

  /* --- hamburger menu --- */
  nav.main .container{position:relative;justify-content:flex-start;gap:12px;min-height:48px}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;cursor:pointer;margin-left:-8px}
  .nav-burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
  .nav-title{display:block;color:#fff;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.3px}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav.main ul{
    display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--blue-dark);box-shadow:0 10px 18px rgba(0,0,0,.22);
    max-height:76vh;overflow-y:auto;z-index:60
  }
  .nav-toggle:checked ~ ul{display:flex}
  nav.main ul li a{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.10);font-size:14px}
  nav.main ul li a::after{display:none}
  nav.main ul li.active a{background:rgba(255,255,255,.14)}
}

/* ================================================== */
/*  RESPONSIVE — PHONE (≤600px)                       */
/* ================================================== */
@media(max-width:600px){
  /* utility: chỉ giữ ngày + nút đăng nhập */
  .utility .u-left span:not(:first-child),.utility .u-left .dot{display:none}
  .utility .u-right a:not(.btn-login){display:none}

  /* topbar gọn lại */
  .topbar .container{padding-top:12px;padding-bottom:12px;gap:12px}
  .logo .mark{width:42px;height:42px;font-size:22px;border-radius:10px}
  .logo .brand{font-size:22px}
  .logo .slogan{display:none}

  /* ticker: ẩn ô tìm kiếm, giữ dòng chạy */
  .ticker .container{height:40px}
  .ticker-search{display:none}

  /* spacing chung gọn hơn */
  main{padding:14px 0}
  .block{padding:14px;margin-bottom:16px}
  .sec-title h2{font-size:14px;padding:7px 14px}

  /* hero / list ảnh nhỏ lại */
  .feature img{height:210px}
  .feature .body h3{font-size:18px}
  .read-item img{width:64px;height:48px}
  .art img{width:118px;height:80px}
  .art h3{font-size:14px}

  /* topics: 3 cột → 3/hàng vẫn ổn nhờ min-width */
  .topic{min-width:88px;padding:6px}
  .topic .ico{width:50px;height:50px;font-size:22px}

  /* category */
  .cat-head h1{font-size:20px}
  .cat-lead img{height:200px}
  .cat-lead h2{font-size:19px}
  .pagination a{min-width:34px;height:34px;padding:0 9px;font-size:13px}

  /* single / bài viết */
  .article{padding:16px 14px}
  .article h1{font-size:21px}
  .article .sapo{font-size:15px}
  .content{font-size:15.5px;line-height:1.8}
  .content h2{font-size:19px}
  .content figure img{border-radius:5px}
  .author-box{flex-direction:column;text-align:center;align-items:center}
  .comments{padding:18px 14px}
  .cmt-form .frow{flex-direction:column}

  /* footer 1 cột */
  footer .cols{grid-template-columns:1fr;gap:22px}
}

/* ================================================== */
/*  RESPONSIVE — NHỎ (≤380px)                         */
/* ================================================== */
@media(max-width:380px){
  body{font-size:13.5px}
  .logo .brand{font-size:19px}
  .feature img{height:180px}
  .feature .body h3{font-size:16px}
  .art img{width:104px;height:72px}
}

/* ================================================== */
/*  WORDPRESS CORE                                    */
/* ================================================== */
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0;overflow:hidden;white-space:nowrap}
.skip-link{position:absolute;left:-9999px;z-index:999;background:#fff;color:var(--blue);padding:10px 16px;border-radius:0 0 6px 0}
.skip-link:focus{left:0;top:0}
.alignleft{float:left;margin:6px 20px 14px 0;max-width:50%}
.alignright{float:right;margin:6px 0 14px 20px;max-width:50%}
.aligncenter{display:block;margin:14px auto}
.alignwide,.alignfull{max-width:100%}
.content img{max-width:100%;height:auto;border-radius:6px}
.wp-caption{max-width:100%}
.wp-caption-text,.content figcaption{text-align:center;font-size:12.5px;color:#9aa1ac;margin-top:8px;font-style:italic}
.content a{color:var(--blue);text-decoration:underline}
.content a:hover{color:var(--blue-dark)}

/* active menu (WP classes) */
nav.main ul li.current-menu-item>a,nav.main ul li.current_page_item>a,nav.main ul li.current-menu-ancestor>a{background:rgba(255,255,255,.1);color:#fff}
nav.main ul li.current-menu-item>a::after{width:60%}

/* pagination từ the_posts_pagination */
.navigation.pagination{margin:26px 0 4px}
.navigation.pagination .nav-links{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.navigation.pagination .page-numbers{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:6px;font-weight:600;color:var(--text);padding:0 12px;text-decoration:none}
.navigation.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.navigation.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.navigation.pagination .page-numbers.dots{border:none;background:transparent}

/* widget mặc định trong sidebar/footer */
.widget select,.widget input[type=text],.widget input[type=search]{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:6px;font-size:13px}
.widget ul{list-style:none}
.widget>ul>li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4}
.widget>ul>li:last-child{border-bottom:none}
.widget ul ul{margin-left:14px;margin-top:6px}
.widget a{color:var(--text)}.widget a:hover{color:var(--blue)}
footer .widget ul li{padding:5px 0;border:none;color:#94a3b8}
footer .widget a{color:#c2ccd9}footer .widget a:hover{color:#fff}

/* comments (WP) */
.comment-list{list-style:none}
.comment-list .children{list-style:none;margin-left:26px}
.comment-respond .comment-reply-title{font-size:16px;font-weight:800;text-transform:uppercase;margin:0 0 14px}
.comment-respond .logged-in-as,.comment-respond .comment-notes{font-size:12px;color:var(--gray);margin-bottom:10px}
.reply{margin-top:6px}
.reply a{font-size:11px;color:var(--blue);font-weight:700}
.comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:8px}
.comment-form-cookies-consent input{flex:none}

@media(max-width:880px){
  nav.main ul li.current-menu-item>a,nav.main ul li.current_page_item>a{background:rgba(255,255,255,.14)}
}