/*
Theme Name: WanNews TNN Style
Theme URI: https://www.wannewsonline.com/
Author: WanNews
Description: ธีมข่าวภาษาไทยสไตล์โมเดิร์นสำหรับข่าววันนิวส์
Version: 6.0.4
Text Domain: wannews-tnn
*/

:root{
  --orange:#f15a24;
  --red:#e51b23;
  --deep:#07355b;
  --ink:#171717;
  --muted:#777;
  --line:#e5e7eb;
  --soft:#f4f7fa;
  --dark:#111;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1180px,calc(100% - 32px));margin:auto}

.topline{
  background:#fff;
  color:#666;
  border-bottom:1px solid #eee;
  font-size:13px;
  padding:8px 0;
}
.topline .wrap{display:flex;justify-content:space-between;gap:15px}

.masthead{padding:20px 0 17px}
.brand{
  font-size:46px;
  font-weight:900;
  letter-spacing:-2px;
  line-height:1;
}
.brand span{color:var(--orange)}
.tagline{color:#777;margin-top:7px;font-size:14px}

.nav{
  background:#fff;
  color:#222;
  border-top:1px solid #eee;
  border-bottom:1px solid #ddd;
  position:relative;
  z-index:20;
}
.nav .wrap{
  display:flex;
  gap:25px;
  align-items:center;
  overflow-x:auto;
}
.nav a{
  padding:13px 0;
  white-space:nowrap;
  font-weight:700;
  font-size:15px;
}
.nav a:hover,.nav a:first-child{color:var(--orange)}

.ad{
  min-height:90px;
  background:#f0f3f6;
  color:#9299a3;
  display:grid;
  place-items:center;
  margin:22px auto;
  border-radius:5px;
  text-align:center;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px;
  border-bottom:1px solid #ddd;
  margin:32px 0 18px;
  padding-bottom:9px;
}
.section-head h2{
  margin:0;
  font-size:28px;
  font-weight:900;
}
.section-head h2 span{color:var(--orange)}
.section-head>a{font-size:13px;color:#777}
.section-head>a:hover{color:var(--orange)}

.hero{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:18px;
}
.hero-main,.story-card{
  position:relative;
  overflow:hidden;
  background:#222;
  border-radius:12px;
}
.hero-main{min-height:410px}
.hero-main>.wn-thumb,.story-card>.wn-thumb{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  min-height:0;
  overflow:hidden;
  background:#edf0f3;
  border-radius:11px;
  position:relative;
}
.hero-main .wn-thumb img,.story-card .wn-thumb img{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
}
.hero-side{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.story-card{min-height:198px}
.shade{
  position:absolute;
  inset:25% 0 0;
  background:linear-gradient(transparent,rgba(0,0,0,.9));
}
.hero-copy{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  color:#fff;
}
.hero-copy h1{
  font-size:34px;
  line-height:1.25;
  margin:8px 0;
}
.story-card .hero-copy{left:14px;right:14px;bottom:13px}
.story-card h3{
  margin:7px 0 0;
  font-size:18px;
  line-height:1.35;
}
.badge{
  display:inline-block;
  background:var(--orange);
  color:#fff;
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
}

.wn-thumb{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  overflow:hidden;
  background:#edf0f3;
  border-radius:11px;
  position:relative;
}
.wn-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.wn-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#9aa2ad;
  font-weight:800;
  font-size:14px;
  letter-spacing:.5px;
}
.wn-thumb.is-placeholder{
  display:grid;
  place-items:center;
}
.wn-thumb.is-placeholder:after{
  content:"WANNEWS";
  color:#9aa2ad;
  font-weight:800;
  font-size:14px;
}
.news-item>a>.wn-thumb{
  aspect-ratio:16/9;
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px 18px;
}
.news-item{min-width:0}

.news-item h3{
  font-size:18px;
  line-height:1.4;
  font-weight:800;
  margin:9px 0 7px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.meta{
  color:var(--muted);
  font-size:12px;
}
.pill{
  display:inline-block;
  border:1px solid var(--orange);
  color:var(--orange);
  border-radius:20px;
  padding:1px 8px;
  margin-left:6px;
  font-size:11px;
}

.split{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);
  gap:34px;
}
.top-list{counter-reset:item}
.top-row{
  counter-increment:item;
  display:grid;
  grid-template-columns:34px 108px 1fr;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.top-row:before{
  content:counter(item);
  font-size:25px;
  font-weight:900;
}
.top-row .wn-thumb{
  width:108px;
  height:72px;
  aspect-ratio:auto;
  border-radius:8px;
}
.top-row .wn-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.top-row strong{font-size:14px;line-height:1.4}

.category-band{
  background:#eef6ff;
  padding:35px 0;
  margin-top:40px;
}
.category-band .news-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.category-band .news-item:first-child{grid-column:span 2}
.category-band .news-item:first-child h3{font-size:23px}

.yt-auto{
  background:#242424;
  color:#fff;
  padding:45px 0;
  margin-top:0;
}
.yt-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-bottom:1px solid #555;
  margin-bottom:20px;
}
.yt-head h2{
  font-size:28px;
  margin:0;
  padding-bottom:12px;
}
.yt-head h2 span{color:#ff2d2d}
.yt-head a{
  font-size:13px;
  color:#ddd;
  border:1px solid #666;
  border-radius:20px;
  padding:7px 14px;
}
.yt-layout{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);
  gap:24px;
}
.yt-frame{aspect-ratio:16/9;background:#000}
.yt-frame iframe{width:100%;height:100%;border:0}
.yt-main h3{font-size:23px;line-height:1.35;margin:12px 0 5px}
.yt-date{font-size:13px;color:#aaa}
.yt-list{display:grid;gap:12px}
.yt-card{
  display:grid;
  grid-template-columns:145px 1fr;
  gap:12px;
  border-bottom:1px solid #444;
  padding-bottom:12px;
}
.yt-card img{width:145px;aspect-ratio:16/9;object-fit:cover}
.yt-card strong{font-size:14px;line-height:1.35;display:block}
.yt-card small{display:block;color:#aaa;margin-top:6px}
.yt-empty{padding:30px;text-align:center;background:#1b1b1b;color:#bbb}

.video-zone{
  background:#111;
  color:#fff;
  padding:48px 0;
}
.video-zone .section-head{border-color:#444}
.video-box{
  aspect-ratio:16/9;
  background:#1b1b1b;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:70px;
}
.latest-dark .top-row{border-color:#444}

.footer{
  background:#071e31;
  color:#aaa;
  padding:38px 0;
}
.footer strong{color:#fff}
.footer a:hover{color:#fff}


@media(max-width:900px){
  .hero,.split,.yt-layout{grid-template-columns:1fr}
  .hero-main{min-height:390px}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-band .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yt-list{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .wrap{width:min(100% - 22px,1180px)}
  .brand{font-size:36px}
  .hero-side,.news-grid,.category-band .news-grid,.yt-list{grid-template-columns:1fr}
  .hero-main{min-height:330px}
  .hero-copy h1{font-size:27px}
  .story-card{min-height:210px}
  .category-band .news-item:first-child{grid-column:auto}
  .category-band .news-item:first-child h3{font-size:20px}
  .top-row{grid-template-columns:32px 92px 1fr}
  .top-row .wn-thumb{width:92px;height:64px}.top-row .wn-thumb img{width:100%;height:100%;object-fit:cover}
  .ad{min-height:70px}
  .section-head h2{font-size:24px}
}