:root{
  --black:#141414; --ink:#1c1c1c; --red:#e10600; --red-d:#b40500;
  --white:#ffffff; --bg:#f4f4f5; --line:#e6e6e8; --muted:#8a8a90;
  --radius:14px; --shadow:0 2px 14px rgba(0,0,0,.07); --shadow-lg:0 14px 40px rgba(0,0,0,.16);
  --ff:'Sarabun','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--ff);background:var(--bg);color:var(--ink);line-height:1.6;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1180px;margin:0 auto;padding:0 18px;}

/* ---------- Header ---------- */
.topbar{background:var(--black);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.25);}
.topbar__row{display:flex;align-items:center;gap:16px;height:64px;position:relative;}
.slogan{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-weight:800;font-size:19px;color:#fff;white-space:nowrap;letter-spacing:.3px;pointer-events:none;}
.slogan__dot{color:var(--red);}
/* On smaller screens, drop absolute-centering and let it sit centered in the
   flex row (search is hidden there) so it never overlaps the logo/menu. */
@media(max-width:960px){
  .slogan{position:static;left:auto;top:auto;transform:none;flex:1;min-width:0;
    text-align:center;font-size:15px;overflow:hidden;text-overflow:ellipsis;}
}
@media(max-width:400px){.slogan{font-size:13px;letter-spacing:0;}}
/* เป็นข่าว logo (original artwork on a white badge) */
.logo-img{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:5px 9px;line-height:0;}
.logo-img img{height:40px;width:auto;display:block;}
@media(max-width:520px){.logo-img img{height:33px;}}
.search{margin-left:auto;display:flex;align-items:center;background:#242424;border-radius:999px;padding:6px 8px 6px 14px;}
.search input{background:none;border:none;color:#fff;font:inherit;outline:none;width:170px;}
.search input::placeholder{color:#8a8a90;}
.search button{background:var(--red);border:none;color:#fff;border-radius:999px;width:32px;height:32px;cursor:pointer;font-size:14px;}
.burger{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;margin-left:auto;}
/* nav */
.nav{background:#1c1c1c;border-top:2px solid var(--red);}
.nav__row{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;}
.nav__row::-webkit-scrollbar{display:none;}
.nav a{color:#eaeaea;padding:12px 16px;font-weight:700;font-size:14px;white-space:nowrap;border-bottom:3px solid transparent;}
.nav a:hover,.nav a.active{color:#fff;border-bottom-color:var(--red);background:#111;}
.nav a.home{color:var(--red);}

/* ---------- Bits ---------- */
.tag{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;}
.tag--ghost{background:rgba(225,6,0,.1);color:var(--red);}
.meta{color:var(--muted);font-size:12.5px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.meta .views::before{content:"👁 ";}
.section-head{display:flex;align-items:center;gap:12px;margin:28px 0 14px;}
.section-head h2{font-size:20px;margin:0;position:relative;padding-left:14px;}
.section-head h2::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;background:var(--red);border-radius:3px;}
.section-head a.more{margin-left:auto;color:var(--red);font-weight:700;font-size:13px;}

/* ---------- Cards ---------- */
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;height:100%;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.card__img{aspect-ratio:16/10;background:#e9e9ec center/cover no-repeat;position:relative;}
.card__img .tag{position:absolute;left:10px;top:10px;}
.card__body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1;}
.card__title{font-weight:800;font-size:16px;line-height:1.35;}
.card:hover .card__title{color:var(--red);}
.card__sum{color:#555;font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.grid{grid-template-columns:1fr;}}

/* Hero (featured) */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:20px;}
.hero__main{position:relative;border-radius:var(--radius);overflow:hidden;min-height:380px;box-shadow:var(--shadow);}
.hero__main .bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.hero__main .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.05) 60%);}
.hero__main .txt{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff;}
.hero__main h1{font-size:28px;margin:8px 0 6px;line-height:1.25;}
.hero__side{display:flex;flex-direction:column;gap:12px;}
.mini{display:flex;gap:12px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);}
.mini .mini__img{width:104px;flex:none;background:#e9e9ec center/cover no-repeat;}
.mini .mini__body{padding:10px 12px 10px 0;display:flex;flex-direction:column;gap:5px;justify-content:center;}
.mini h3{font-size:14px;margin:0;font-weight:700;line-height:1.35;}
.mini:hover h3{color:var(--red);}
@media(max-width:820px){.hero{grid-template-columns:1fr;}.hero__main{min-height:300px;}}

/* Popular list */
.rank{display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.rank a{display:flex;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);}
.rank a:last-child{border-bottom:none;}
.rank a:hover{background:#fafafa;}
.rank .n{font-weight:900;font-size:20px;color:var(--red);width:26px;text-align:center;flex:none;}
.rank h4{margin:0;font-size:14px;font-weight:700;}

/* ---------- Article page ---------- */
.layout{display:grid;grid-template-columns:1fr 320px;gap:30px;margin-top:22px;align-items:start;}
@media(max-width:900px){.layout{grid-template-columns:1fr;}}
.article{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px 34px;}
.article h1{font-size:30px;line-height:1.25;margin:10px 0 12px;}
.article .cover{border-radius:12px;overflow:hidden;margin:14px 0;}
.article .cover img{width:100%;}
.article__body{font-size:17px;color:#222;line-height:1.85;}
.article__body p{margin:0 0 16px;}
.article__body img{border-radius:10px;margin:14px 0;}
.article__body h2,.article__body h3{margin:22px 0 10px;}
.embed{position:relative;padding-bottom:56.25%;height:0;border-radius:12px;overflow:hidden;margin:18px 0;background:#000;}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;}
.gallery figcaption{font-size:11px;color:var(--muted);margin-top:3px;}
@media(max-width:520px){.gallery{grid-template-columns:repeat(2,1fr);}}

/* share bar */
.sharebar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sharebar__label{font-weight:800;font-size:14.5px;color:var(--ink);}
.sharebar__btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex:1;}
.sbtn{width:42px;height:42px;flex:none;border-radius:50%;border:none;cursor:pointer;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 3px 10px rgba(20,20,20,.14);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;}
.sbtn svg{width:18px;height:18px;fill:currentColor;display:block;}
.sbtn:hover{transform:translateY(-3px);box-shadow:0 9px 20px rgba(20,20,20,.22);filter:brightness(1.06);}
.sbtn:active{transform:translateY(-1px);}
.sbtn--fb{background:#1877f2;}
.sbtn--x{background:#0f1419;}
.sbtn--line{background:#06c755;}
.sbtn--copy{background:#5b6270;}
.sbtn--print{background:var(--red);margin-left:auto;}
.sbtn--copied{background:#22a06b !important;}
@media(max-width:520px){.sbtn--print{margin-left:0;}}

/* sidebar */
.side{display:flex;flex-direction:column;gap:18px;position:sticky;top:132px;}
.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 0;}
.panel h3{margin:0;padding:12px 16px;font-size:14px;border-bottom:2px solid var(--red);}

.comments{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 26px;margin-top:22px;}
.comments h3{margin:0 0 14px;font-size:18px;padding-left:12px;border-left:5px solid var(--red);}

/* pagination */
.pager{display:flex;gap:6px;justify-content:center;margin:26px 0;}
.pager a,.pager span{padding:8px 14px;border-radius:8px;background:#fff;box-shadow:var(--shadow);font-weight:700;font-size:14px;}
.pager .cur{background:var(--red);color:#fff;}

/* footer */
.footer{background:var(--black);color:#bdbdbd;margin-top:40px;padding:30px 0;}
.footer .brand{color:#fff;margin-bottom:8px;}
.footer a:hover{color:var(--red);}
.footer .cols{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;}
.footer .foot-links{display:flex;gap:16px;flex-wrap:wrap;}
.socials{display:flex;gap:10px;margin-top:14px;}
.social{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#242424;color:#fff;transition:background .15s,transform .15s;}
.social svg{width:19px;height:19px;fill:currentColor;display:block;}
.social:hover{background:var(--red);color:#fff;transform:translateY(-2px);}
.copy{border-top:1px solid #2a2a2a;margin-top:20px;padding-top:16px;font-size:12.5px;color:var(--muted);}

.empty{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:40px;text-align:center;color:var(--muted);}

/* mobile nav drawer */
@media(max-width:760px){
  .search{display:none;}
  .burger{display:block;}
  .nav__row{flex-direction:column;display:none;}
  .nav__row.open{display:flex;}
  .nav a{border-bottom:1px solid #2a2a2a;}
}

/* ---------- Radio widget (homepage top) ---------- */
.radiocard{position:relative;display:flex;align-items:center;gap:16px;overflow:hidden;
  background:linear-gradient(135deg,#262626 0%,#161616 55%,#1e1011 100%);
  color:#fff;border-radius:18px;padding:15px 20px;margin:18px 0 8px;
  box-shadow:0 14px 38px rgba(20,10,10,.28);}
.radiocard::before{content:"";position:absolute;right:-50px;top:-60px;width:210px;height:210px;
  background:radial-gradient(circle,rgba(225,6,0,.38),transparent 70%);pointer-events:none;}
.radiocard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--red),var(--red-d));}
.radiocard > *{position:relative;z-index:1;}

/* play button — glossy red with a pulsing ring while live */
.radiocard__btn{width:56px;height:56px;flex:none;border:none;border-radius:50%;cursor:pointer;
  color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%,#ff4b44,#e10600 58%,#b40500);
  box-shadow:0 8px 22px rgba(225,6,0,.55),inset 0 1px 3px rgba(255,255,255,.35);
  transition:transform .15s;}
.radiocard__btn:hover{transform:scale(1.07);}
.radiocard__btn:active{transform:scale(.96);}
.radiocard__ico{line-height:1;transform:translateX(1px);}
.radiocard.is-playing .radiocard__btn{animation:rcRing 1.9s infinite;}
@keyframes rcRing{0%{box-shadow:0 8px 22px rgba(225,6,0,.55),0 0 0 0 rgba(225,6,0,.5);}
  70%{box-shadow:0 8px 22px rgba(225,6,0,.55),0 0 0 15px rgba(225,6,0,0);}
  100%{box-shadow:0 8px 22px rgba(225,6,0,.55),0 0 0 0 rgba(225,6,0,0);}}

.radiocard__mid{flex:1;min-width:0;}
.radiocard__top{display:flex;align-items:center;gap:9px;}
.radiocard__live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:1px;color:#ff8a83;text-transform:uppercase;
  background:rgba(225,6,0,.16);padding:3px 9px;border-radius:999px;}
.radiocard__dot{width:7px;height:7px;border-radius:50%;background:#ff2a22;flex:none;}
.radiocard.is-playing .radiocard__dot{animation:radioPulse 1.1s infinite;}
@keyframes radioPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(1.5);}}
.radiocard__tag{font-size:12px;color:#b9b0b0;font-weight:600;}
/* animated equalizer */
.radiocard__eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:15px;}
.radiocard__eq span{width:3px;height:5px;background:var(--red);border-radius:2px;opacity:.55;}
.radiocard.is-playing .radiocard__eq span{opacity:1;animation:rcEq .9s ease-in-out infinite;}
.radiocard.is-playing .radiocard__eq span:nth-child(2){animation-delay:.2s;}
.radiocard.is-playing .radiocard__eq span:nth-child(3){animation-delay:.05s;}
.radiocard.is-playing .radiocard__eq span:nth-child(4){animation-delay:.3s;}
.radiocard.is-playing .radiocard__eq span:nth-child(5){animation-delay:.12s;}
@keyframes rcEq{0%,100%{height:4px;}50%{height:15px;}}

.radiocard__name{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:5px;}
.radiocard__sel{margin-top:8px;background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.15);border-radius:9px;padding:7px 11px;
  font:inherit;font-weight:700;font-size:13.5px;max-width:100%;cursor:pointer;}
.radiocard__sel option{color:#141414;}

/* volume */
.radiocard__volwrap{display:flex;align-items:center;gap:8px;flex:none;}
.radiocard__volico{font-size:15px;opacity:.85;}
.radiocard__vol{width:96px;height:4px;-webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.22);border-radius:999px;cursor:pointer;}
.radiocard__vol::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--red);box-shadow:0 2px 6px rgba(225,6,0,.6);cursor:pointer;}
.radiocard__vol::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--red);cursor:pointer;}

@media(max-width:640px){
  .radiocard{gap:13px;padding:13px 15px;border-radius:16px;}
  .radiocard__volwrap{display:none;}
  .radiocard__name{font-size:16px;}
  .radiocard__btn{width:50px;height:50px;}
}

/* ---------- Cookie consent banner ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--black);color:#fff;
  padding:15px 20px calc(15px + env(safe-area-inset-bottom));border-top:3px solid var(--red);
  box-shadow:0 -8px 26px rgba(0,0,0,.32);display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  justify-content:center;transform:translateY(115%);transition:transform .35s ease;}
.cookie.show{transform:translateY(0);}
.cookie__text{font-size:13.5px;line-height:1.6;max-width:780px;flex:1;min-width:240px;color:#e8e8ea;}
.cookie__text b{color:#fff;}
.cookie__text a{color:#ff7a73;font-weight:700;text-decoration:underline;}
.cookie__btns{display:flex;gap:10px;flex:none;}
.cookie__btn{border:none;border-radius:999px;padding:11px 24px;font:inherit;font-weight:800;font-size:14px;
  cursor:pointer;transition:.15s;}
.cookie__btn--accept{background:var(--red);color:#fff;box-shadow:0 5px 14px rgba(225,6,0,.45);}
.cookie__btn--accept:hover{background:var(--red-d);}
.cookie__btn--ghost{background:transparent;color:#cfcfcf;border:1.5px solid #454548;}
.cookie__btn--ghost:hover{border-color:#8a8a90;color:#fff;}
@media(max-width:600px){
  .cookie{flex-direction:column;gap:12px;text-align:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom));}
  .cookie__btns{width:100%;}
  .cookie__btn{flex:1;}
}