:root {
  --container: 1100px;
  --accent: #e50914;
  --gap: 20px;
  --bg: #fff;
  --text: #111;
}

* {
  box-sizing: border-box
}

body {
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: #f6f6f7;
  margin: 0
}

a{
  text-decoration:none;
  color:inherit;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px
}

.site-header {
  background: linear-gradient(90deg, #121212, #1f1f1f);
  border-bottom: 2px solid #e60023;
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 40
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.logo {
  font-weight: 800;
  font-size: 20px;
  color: white;
  text-decoration: none
}

.main-nav a {
  margin-left: 18px;
  color: white;
  text-decoration: none;
  font-weight: 600
}

.hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  margin-top: 18px
}

.hero .hero-card {
  background: var(--bg);
  padding: 14px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(30, 30, 30, 0.03)
}

.hero img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 6px;
  object-position: top center;
}

.hero .small-list .card {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee
}

.hero .small-list img {
  width: 120px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px
}

.content-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--gap);
  align-items: start
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(30, 30, 30, 0.03)
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover
}

.card .card-body {
  padding: 12px
}

.card .cat {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase
}

.card h3 {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.25
}

/* IGN style cards */
.grid .card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
  aspect-ratio: 4/6.5;
}

.grid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.grid .card img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.grid .card:hover img{
  transform: scale(1.08);
}

/* color layer */

.grid .card-color {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  opacity: .9;
  mix-blend-mode: multiply;
}

/* content */

.grid .card-content {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  color: white;
}

.grid .card-content .cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .9;
}

.grid .card-content h3 {
  font-size: 18px;
  line-height: 1.25;
  margin: 6px 0 0;
  font-weight: 700;
}

/* grid spacing */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sidebar .widget {
  background: #fff;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: 6px
}

.ad-box {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  border: 1px dashed #ddd
}

.more-section {
  margin-top: 32px
}

.site-footer {
  padding: 24px 0;
  text-align: center;
  color: #666
}

/* responsive */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr
  }

  .content-wrap {
    grid-template-columns: 1fr
  }

  .grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .sidebar {
    order: 2
  }
}

@media (max-width:640px) {
  .grid {
    grid-template-columns: repeat(1, 1fr)
  }

}

/* top banner ad */

.top-ad{
  margin:24px auto 10px;
}

.ad-banner{
  display:flex;
  justify-content:center;
  align-items:center;
}

.ad-placeholder{
  width:970px;
  height:90px;
  background:#f1f1f1;
  border:1px dashed #ccc;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  font-weight:600;
  letter-spacing:1px;
}

/* responsive */

@media (max-width:1000px){

  .ad-placeholder{
    width:728px;
    height:90px;
  }

}

@media (max-width:760px){

  .ad-placeholder{
    width:320px;
    height:100px;
  }

}

/* CATEGORY BAR */

/* Sticky category bar under the sticky header */
.category-bar-wrapper{
  position: sticky;
  top: 60px;              /* = chiều cao header (điều chỉnh nếu khác) */
  z-index: 39;            /* thấp hơn header (header đang 40) */
  background: #f6f6f7;    /* cùng màu nền để tránh “xuyên” khi sticky */
  padding-top: 8px;       /* giữ khoảng cách đẹp khi dính */
  padding-bottom: 8px;
  margin-top: 40px;
}

/* Khi sticky, thêm bóng nhẹ để tách lớp */
.category-bar-wrapper.stuck{
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.category-bar{
  display:flex;
  gap:0;
  overflow-x:auto;
  border-radius:40px;
  background:#e8e8ea;
  padding:4px;
}

/* tabs */

.cat-tab{
  flex:1;
  padding:14px 26px;
  border:none;
  background:transparent;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  border-radius:30px;
  color:#333;
  transition:all .2s ease;
}

/* hover */

.cat-tab:hover{
  background:#d9d9dc;
}

/* selected */

.cat-tab.active{
  background:#1e2130;
  color:white;
}

/* scrollbar line */

.category-bar-scroll{
  height:6px;
  background:#cfcfd4;
  border-radius:4px;
  margin-top:10px;
  width:100%;
}

@media (max-width:700px){

  .cat-tab{
    flex:unset;
    white-space:nowrap;
  }

}

.latest-section{
  margin-top:40px;
}

.latest-title{
  font-size:34px;
  font-weight:800;
  margin-bottom:20px;
}

.latest-item{
  display:flex;
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid #e6e6e6;
  text-decoration:none;
}

.latest-item:hover{
  background:#f3f4f6;
}

.latest-item:hover h3{
  color:#e50914;
}

.latest-item:hover .latest-thumb{
  transform:scale(1.05);
}

.latest-thumb{
  width:240px;
  height:140px;
  object-fit:cover;
  border-radius:8px;
  transition:transform .35s ease;
  object-position:top center;
}

.latest-content h3{
  font-size:20px;
  margin:0 0 6px;
  transition:color .2s;
}

.latest-meta{
  color:#777;
  font-size:14px;
}

.latest-excerpt{
  margin-top:6px;
  color:#555;
}

.load-more-wrap{
  width:100%;
  margin:30px 0;
  display:flex;
  justify-content:center;
}

.load-more-btn{

  width:100%;
  max-width:760px;

  padding:16px;

  background:linear-gradient(#e31937,#c70e29);

  color:white;

  font-size:18px;
  font-weight:700;

  border:none;
  border-radius:6px;

  cursor:pointer;

  box-shadow:
    inset 0 1px rgba(255,255,255,0.3),
    0 2px 4px rgba(0,0,0,0.2);

}

.load-more-btn:hover{
  background:linear-gradient(#f02040,#d4112f);
}

.ad-300x600{
  height:600px;
}

.bottom-ad{
  margin:40px 0;
  display:flex;
  justify-content:center;
}

.ad-970x250{
  width:970px;
  height:250px;
}

.infeed-ad{
  margin:30px 0;
  display:flex;
  justify-content:center;
}

.ad-728x90{
  width:728px;
  height:90px;
}


#post-thumb{
  width:100%;
  max-height:420px;
  object-fit:cover;
  object-position:top center;
  margin:12px 0;
}

@media (max-width:760px){

  .ad-728x90{
    width:320px;
    height:100px;
  }

}

/* hero small posts */

.small-post{
  padding:10px 0;
  border-bottom:1px solid #eee;
}

.small-post:last-child{
  border-bottom:none;
}

.small-post-link{
  display:flex;
  gap:12px;
}

.small-thumb{
  width:150px;
  height:90px;
  object-fit:cover;
  border-radius:4px;
  flex-shrink:0;
}

.small-content{
  flex:1;
}

.small-title{
  font-size:14px;
  font-weight:700;
  margin:2px 0 4px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

}

.small-excerpt{
  font-size:12px;
  color:#777;
  line-height:1.4;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.read-more{
  color:#999;
  font-weight:500;
}

/* HERO small list category (IGN style) */

.small-content .cat{
  font-size:10px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#e50914;
  margin-bottom:4px;

}

/* ===============================
   MOBILE GRID CAROUSEL
================================ */

@media (max-width:640px){

  #main-grid{

    display:flex;
    overflow-x:auto;
    gap:18px;

    scroll-snap-type:x mandatory;

    padding-left:10px;
    padding-right:40px;

    -webkit-overflow-scrolling:touch;   /* momentum */

    scroll-behavior:smooth;

  }

  #main-grid::-webkit-scrollbar{
    display:none;
  }

  #main-grid .card{
    flex:0 0 75%;
    scroll-snap-align:start;
    aspect-ratio:4/6;
  }

}

@media (max-width:640px){

  .latest-item{
    gap:14px;
    padding:16px 0;

  }

  .latest-thumb{
    width:120px;
    height:78px;
    border-radius:6px;
    object-position:top center;
  }

  .latest-content{
    flex:1;
  }

  .latest-content h3{
    font-size:16px;
    line-height:1.35;
    margin:0 0 4px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

  }

  .latest-meta{
    font-size:12px;
    margin-bottom:4px;
  }

  .latest-excerpt{
    font-size:13px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

  }

  .latest-title{

    font-size:26px;
    margin-bottom:12px;

  }

  .category-bar-wrapper{

    top:68px;           /* header height + khoảng cách */

    padding-top:15px;

  }

  .category-bar-scroll{
    display:none;
  }

  .post-container{
    padding:16px;
  }

  .post{
    max-width:100%;
  }

  .post-body{
    font-size:16px;
    line-height:1.65;
  }

  .post-body img{
    max-width:100%;
    height:auto;
    display:block;
    margin:28px auto;
    border-radius:8px;
  }

  .article-ad{
    margin:28px auto;
  }

}

.ad-box-wrapper{
  margin-bottom:18px;
}

/* ===============================
   POST ARTICLE
================================ */

.post-container{
  max-width:1100px;
  margin:auto;
}

.post{
  max-width:760px;
  margin:auto;
}

.post h1{
  font-size:42px;
  line-height:1.2;
  margin-bottom:10px;
}

.post .meta{
  color:#777;
  font-size:14px;
  margin-bottom:20px;
}

/* article content */

.post-body{
  font-size:18px;
  line-height:1.75;
}

/* responsive images */

.post-body img{
  max-width:100%;
  height:auto;

  display:block;
  margin:26px auto;

  border-radius:6px;
}

/* paragraphs spacing */

.post-body p{
  margin:20px 0;
}

/* headings */

.post-body h2{
  margin-top:40px;
  font-size:28px;
}

.post-body h3{
  margin-top:30px;
  font-size:22px;
}

/* video embeds */

.post-body iframe{
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  border:none;
  margin:24px 0;
}

.article-ad{
  margin:36px auto;
  max-width:728px;
  text-align:center;
}

.article-top-ad{
  margin:24px 0 30px;
  text-align:center;
}

.article-bottom-ad{
  margin:40px auto;
  text-align:center;
}

/* ===============================
   STICKY SIDE ADS
================================ */

.sticky-ad{

  position:fixed;

  top:120px;

  width:160px;
  height:600px;

  z-index:10;

}

.sticky-left{
  left:20px;
}

.sticky-right{
  right:20px;
}

@media (max-width:1400px){

  .sticky-ad{
    display:none;
  }

}

/* latest meta row */

.latest-meta-row{

  display:flex;
  align-items:center;
  gap:10px;

  font-size:14px;
  margin-top:4px;

}

/* category giống small-post */

.latest-cat{

  font-size:10px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;

  color:#e50914;

}

/* date */

.latest-meta{

  color:#777;
  font-size:13px;

}

/* excerpt inline */

.latest-excerpt-inline{

  color:#555;
  font-size:14px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

}

/* subtitle giống IGN */
.latest-subtitle{
  margin:6px 0 6px;
  color:#555;
  font-size:15px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:640px){

  .post h1{
    font-size:28px;
  }

}