/* ============================================================
   MSM NEWS HUB — Unified style for / and /tin-tuc/ + single
   Phong cách MSN: sạch, lưới tin dày, ảnh 16:9 đồng nhất
   Tự động 100%: bài mới nhất tự lên, không cần nhập ID
   ============================================================ */

:root{
  --msm-max: 1200px;
  --msm-ink: #0f172a;
  --msm-muted: #64748b;
  --msm-line: #e5e7eb;
  --msm-blue: #2563eb;
  --msm-blue-dark: #1d4ed8;
  --msm-bg-soft: #f8fafc;
  --msm-cat-bg: #eff6ff;
  --msm-radius: 12px;
}

/* Khung chung */
.msm-wrap{max-width:var(--msm-max);margin:0 auto;padding:0 20px;}
.msm-main{background:#fff;color:var(--msm-ink);}
.msm-main img{display:block;max-width:100%;}
.msm-main a{color:inherit;text-decoration:none;}
.msm-main a:hover h2,.msm-main a:hover h3,.msm-main a:hover h4{color:var(--msm-blue);}

/* --- Topbar: ngày + search --- */
.msm-topbar{border-bottom:1px solid var(--msm-line);background:#fff;}
.msm-topbar__in{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:10px 0;flex-wrap:wrap;}
.msm-date{font-size:13px;color:var(--msm-muted);font-weight:600;text-transform:capitalize;}
.msm-search{display:flex;flex:1;max-width:420px;min-width:220px;}
.msm-search input{flex:1;height:40px;border:1px solid var(--msm-line);border-right:0;border-radius:8px 0 0 8px;padding:0 12px;font-size:14px;outline:none;}
.msm-search input:focus{border-color:var(--msm-blue);}
.msm-search button{height:40px;padding:0 16px;border:0;border-radius:0 8px 8px 0;background:var(--msm-blue);color:#fff;font-weight:700;cursor:pointer;}
.msm-search button:hover{background:var(--msm-blue-dark);}

/* --- H1 --- */
.msm-masthead{padding:22px 0 6px;text-align:left;}
.msm-kicker{font-size:12px;font-weight:800;letter-spacing:.1em;color:#b91c1c;text-transform:uppercase;margin:0 0 6px;}
.msm-h1{font-size:clamp(26px,3vw,36px);line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;color:var(--msm-ink);}
.msm-sub{color:var(--msm-muted);font-size:14px;margin:0 0 12px;max-width:760px;}

/* --- Category nav kiểu MSN --- */
.msm-catnav{border-top:2px solid var(--msm-ink);border-bottom:1px solid var(--msm-line);background:#fff;position:sticky;top:0;z-index:20;}
.msm-catnav__row{display:flex;gap:4px;overflow-x:auto;white-space:nowrap;padding:0;}
.msm-catnav__row a{padding:12px 14px;font-size:14px;font-weight:700;color:#334155;border-bottom:2px solid transparent;flex-shrink:0;}
.msm-catnav__row a:hover{color:var(--msm-ink);border-bottom-color:var(--msm-blue);}
.msm-catnav__row a.is-cta{margin-left:auto;color:var(--msm-blue);}

/* --- Lead grid --- */
.msm-lead{padding:20px 0 8px;}
.msm-lead__grid{display:grid;grid-template-columns:1.6fr 1fr 320px;gap:20px;align-items:start;}
@media(max-width:1024px){.msm-lead__grid{grid-template-columns:1.4fr 1fr;}.msm-lead__side-list{grid-column:1/-1;}}
@media(max-width:720px){.msm-lead__grid{grid-template-columns:1fr;}}

/* Bài chính */
.msm-hero{border-radius:var(--msm-radius);overflow:hidden;background:#0f172a;position:relative;min-height:340px;display:block;}
.msm-hero img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;}
.msm-hero__overlay{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(180deg,transparent 0%,rgba(2,6,23,.55) 45%,rgba(2,6,23,.92) 100%);color:#fff;}
.msm-tag{display:inline-block;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--msm-cat-bg);color:var(--msm-blue);margin-bottom:8px;}
.msm-hero__overlay .msm-tag{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.25);}
.msm-hero h2{margin:0 0 8px;font-size:clamp(20px,2.2vw,28px);line-height:1.25;color:#fff;}
.msm-meta{font-size:13px;color:var(--msm-muted);display:flex;gap:8px;align-items:center;font-weight:600;}
.msm-hero__overlay .msm-meta{color:rgba(255,255,255,.85);}
.msm-excerpt{font-size:14px;line-height:1.6;color:var(--msm-muted);margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* 2 bài phụ */
.msm-secondary{display:flex;flex-direction:column;gap:16px;}
.msm-sec-card{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:start;}
.msm-sec-card img{width:140px;aspect-ratio:16/10;object-fit:cover;border-radius:8px;}
.msm-sec-card h3{margin:0 0 6px;font-size:16px;line-height:1.35;}
.msm-sec-card:first-child{grid-template-columns:1fr;}
.msm-sec-card:first-child img{width:100%;aspect-ratio:16/9;border-radius:var(--msm-radius);}

/* Cột tin mới */
.msm-side-list{background:var(--msm-bg-soft);border:1px solid var(--msm-line);border-radius:var(--msm-radius);padding:14px;}
.msm-side-list h3{margin:0 0 10px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.msm-side-list ul{list-style:none;margin:0;padding:0;}
.msm-side-list li{padding:10px 0;border-top:1px solid var(--msm-line);}
.msm-side-list li:first-child{border-top:0;padding-top:0;}
.msm-side-list a{font-size:14px;font-weight:600;line-height:1.45;display:block;}
.msm-side-list .msm-meta{margin-top:4px;font-size:12px;}

/* --- Section chuyên mục --- */
.msm-section{padding:18px 0;border-top:1px solid var(--msm-line);margin-top:18px;}
.msm-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;}
.msm-section__head h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;}
.msm-section__head h2::before{content:"";width:4px;height:22px;background:#b91c1c;border-radius:2px;display:inline-block;}
.msm-section__head a.msm-more{font-size:13px;font-weight:700;color:var(--msm-blue);white-space:nowrap;}
.msm-cat-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;}
@media(max-width:800px){.msm-cat-grid{grid-template-columns:1fr;}}
.msm-cat-main img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--msm-radius);}
.msm-cat-main h3{margin:12px 0 8px;font-size:20px;line-height:1.35;}
.msm-cat-list{display:flex;flex-direction:column;gap:14px;}
.msm-cat-item{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:start;}
.msm-cat-item img{width:120px;aspect-ratio:16/10;object-fit:cover;border-radius:8px;}
.msm-cat-item h4{margin:0 0 6px;font-size:15px;line-height:1.4;}

/* --- Layout content + sidebar --- */
.msm-body{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;}
@media(max-width:1024px){.msm-body{grid-template-columns:1fr;}}
.msm-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:60px;}
@media(max-width:1024px){.msm-sidebar{position:static;}}
.msm-box{background:#fff;border:1px solid var(--msm-line);border-radius:var(--msm-radius);padding:16px;}
.msm-box h3{margin:0 0 12px;font-size:16px;font-weight:800;padding-bottom:10px;border-bottom:2px solid var(--msm-ink);}
.msm-rank{list-style:none;margin:0;padding:0;counter-reset:rank;}
.msm-rank li{counter-increment:rank;display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--msm-line);}
.msm-rank li:first-child{border-top:0;padding-top:0;}
.msm-rank li::before{content:counter(rank);font-size:22px;font-weight:800;color:#cbd5e1;line-height:1;min-width:26px;}
.msm-rank li:nth-child(-n+3)::before{color:#b91c1c;}
.msm-rank a{font-size:14px;font-weight:600;line-height:1.45;}
.msm-menu{list-style:none;margin:0;padding:0;}
.msm-menu li{border-top:1px solid var(--msm-line);}
.msm-menu li:first-child{border-top:0;}
.msm-menu a{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-weight:700;font-size:14px;}
.msm-menu a span{color:var(--msm-muted);font-weight:600;font-size:12px;}
.msm-cta-soft{background:var(--msm-bg-soft);text-align:center;font-size:14px;color:var(--msm-muted);}
.msm-cta-soft a{color:var(--msm-blue);font-weight:700;}

/* --- Dải tin mới cuối trang --- */
.msm-timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
@media(max-width:720px){.msm-timeline{grid-template-columns:1fr;}}
.msm-timeline li{padding:12px 0;border-bottom:1px solid var(--msm-line);}
.msm-timeline a{font-size:15px;font-weight:600;line-height:1.45;}
.msm-eat{text-align:center;color:var(--msm-muted);font-style:italic;font-size:13px;padding:20px 0;border-top:1px solid var(--msm-line);margin-top:20px;}

/* --- Single --- */
.msm-article{max-width:860px;margin:0 auto;}
.msm-breadcrumb{font-size:13px;color:var(--msm-muted);margin:14px 0;display:flex;gap:6px;flex-wrap:wrap;}
.msm-breadcrumb a{color:var(--msm-muted);}
.msm-breadcrumb a:hover{color:var(--msm-blue);}
.msm-article h1{font-size:clamp(26px,3vw,34px);line-height:1.25;font-weight:800;margin:0 0 12px;letter-spacing:-.015em;}
.msm-article__meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--msm-muted);padding-bottom:14px;border-bottom:1px solid var(--msm-line);margin-bottom:14px;font-weight:600;}
.msm-article__thumb{margin:0 0 8px;border-radius:var(--msm-radius);overflow:hidden;}
.msm-article__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.msm-article__thumb figcaption{font-size:13px;color:var(--msm-muted);padding:8px 2px;font-style:italic;}
.msm-tldr{background:var(--msm-cat-bg);border:1px solid #bfdbfe;border-radius:var(--msm-radius);padding:14px 16px;margin:0 0 18px;}
.msm-tldr strong{display:block;margin-bottom:8px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;}
.msm-tldr ul{margin:0;padding-left:18px;}
.msm-tldr li{margin:6px 0;font-size:15px;line-height:1.6;}
.msm-content{font-size:17px;line-height:1.8;}
.msm-content p{margin:0 0 1.2em;}
.msm-content h2{font-size:22px;margin:1.6em 0 .6em;padding-top:.4em;border-top:1px solid var(--msm-line);}
.msm-content h3{font-size:19px;margin:1.4em 0 .5em;}
.msm-content img{border-radius:8px;margin:1em 0;}
/* Chuẩn ảnh trong bài: căn giữa, caption */
.msm-content figure{margin:1.4em 0;}
.msm-content figure img{margin:0;}
.msm-content figcaption{text-align:center;font-size:13px;color:var(--msm-muted);font-style:italic;margin-top:6px;}
.msm-info-box{background:var(--msm-bg-soft);border:1px solid var(--msm-line);border-radius:var(--msm-radius);padding:16px;margin:1.6em 0;}
.msm-info-box h3{margin:0 0 10px;font-size:16px;}
.msm-info-box ul{margin:0;padding-left:18px;}
.msm-info-box li{margin:6px 0;font-size:15px;}
.msm-related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:800px){.msm-related__grid{grid-template-columns:repeat(2,1fr);}}
.msm-rel img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;}
.msm-rel h4{margin:8px 0 4px;font-size:14px;line-height:1.4;}
.msm-correct{background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--msm-radius);padding:14px 16px;margin-top:20px;font-size:14px;}