/* ============================================================================
   tanro — Kiểu dáng riêng cho từng loại trang
   ============================================================================ */

/* =================================================== Trang chủ: sân khấu - */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 56vw, 560px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

/* Các ảnh nền chồng lên nhau, đổi bằng cách mờ dần */
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Phủ tối để chữ bên trái luôn đọc được, và hoà mép dưới vào nền trang */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6,9,8,.94) 0%, rgba(6,9,8,.8) 34%, rgba(6,9,8,.35) 62%, rgba(6,9,8,.55) 100%),
    linear-gradient(180deg, rgba(6,9,8,.55) 0%, transparent 26%, transparent 74%, rgba(10,13,12,1) 100%);
}

.hero__grid { display: grid; gap: 2rem; align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1040px) { .hero__grid { grid-template-columns: minmax(0, 1fr) 288px; } }

.hero__title {
  font-size: var(--fs-4xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
}
.hero__title em { font-style: normal; color: var(--brand-lift); }
.hero__lead { font-size: var(--fs-base); line-height: 1.66; color: rgba(255,255,255,.74); max-width: 46ch; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(34, 197, 94, .18);
  border: 1px solid rgba(34, 197, 94, .35);
  color: var(--brand-lift);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Chấm chuyển slide */
.hero__dots { display: flex; gap: .4rem; margin-top: .4rem; }
.hero__dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .32);
  cursor: pointer;
  transition: width var(--t) var(--ease-out), background var(--t) var(--ease);
}
.hero__dots button.is-active { width: 26px; background: var(--brand); }

/* ------------------------------------------------ Bảng "Hot Topics" ---- */
.hot-topics {
  display: none;
  padding: 1.1rem;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  background: rgba(12, 16, 14, .58);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--sh-lg);
  color: #fff;
}
@media (min-width: 1040px) { .hot-topics { display: block; } }

.hot-topics__title {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: .9rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgba(255,255,255,.9);
}
.hot-topics__title .icon { width: 1.1em; height: 1.1em; color: var(--c-food); }

.hot-item {
  display: flex;
  gap: .7rem;
  padding: .55rem;
  margin-inline: -.55rem;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.hot-item:hover { background: rgba(255, 255, 255, .07); }
.hot-item__media { flex: none; width: 62px; aspect-ratio: 4 / 3; border-radius: var(--r-xs); overflow: hidden; background: var(--bg-sunken); }
.hot-item__media img { width: 100%; height: 100%; object-fit: cover; }
.hot-item__body { min-width: 0; display: grid; gap: .2rem; align-content: center; }
.hot-item__title { font-size: var(--fs-sm); font-weight: 650; line-height: 1.35; color: #fff; }
.hot-item__meta { font-size: 11px; color: rgba(255,255,255,.55); }

/* ================================================ Danh mục nổi bật ----- */
/* Đúng 8 chuyên mục: 2 cột trên điện thoại, 4 trên tablet, 8 trên desktop */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (min-width: 620px)  { .topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .topic-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

.topic-tile {
  position: relative;
  display: grid;
  align-content: end;
  gap: .3rem;
  aspect-ratio: 3 / 4;
  padding: .9rem .85rem;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.topic-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

/* Ảnh nền lấy từ bài mới nhất của chính chuyên mục đó */
.topic-tile__media { position: absolute; inset: 0; z-index: -2; background: var(--bg-sunken); }
.topic-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.topic-tile:hover .topic-tile__media img { transform: scale(1.08); }

.topic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.9) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 55%);
}
.topic-tile .icon { width: 1.4rem; height: 1.4rem; }
.topic-tile strong { font-size: var(--fs-sm); font-weight: 700; letter-spacing: -.01em; }
.topic-tile small { font-size: 11px; color: rgba(255,255,255,.62); }

/* ============================================ Lưới bài viết kiểu khảm --- */
/* Nhịp lặp 6 thẻ: 1 thẻ lớn + 2 thẻ hẹp, rồi 1 hẹp + 2 rộng — giống bản
   thiết kế mà vẫn tự xử lý được khi số bài không chia hết cho 6. */
.mosaic { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }

.mosaic > * { min-height: 210px; }

@media (min-width: 720px) {
  .mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .mosaic > *                  { grid-column: span 6; }
  .mosaic > *:nth-child(6n + 1) { grid-column: span 6; min-height: 300px; }
  .mosaic > *:nth-child(6n + 2),
  .mosaic > *:nth-child(6n + 3) { grid-column: span 3; min-height: 300px; }
  .mosaic > *:nth-child(6n + 4) { grid-column: span 4; }
  .mosaic > *:nth-child(6n + 5),
  .mosaic > *:nth-child(6n + 6) { grid-column: span 4; }
}

/* Chế độ xem danh sách (nút chuyển ở đầu khối) */
.mosaic.is-list { grid-template-columns: minmax(0, 1fr); }
.mosaic.is-list > * { grid-column: auto !important; min-height: 0; }
.mosaic.is-list .card--overlay {
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink);
}
.mosaic.is-list .card--overlay .card__media { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.mosaic.is-list .card--overlay .card__media--overlay::after { display: none; }
.mosaic.is-list .card--overlay .card__badges { position: static; margin-bottom: .4rem; }
.mosaic.is-list .card--overlay .card__body { padding: .9rem 1.1rem .9rem 0; }
.mosaic.is-list .card--overlay .card__title { color: var(--ink); }
.mosaic.is-list .card--overlay .meta,
.mosaic.is-list .card--overlay .card__eyebrow { color: var(--ink-3); }

/* ==================================================== Khối âm nhạc ----- */
.music-band {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(120% 140% at 8% 0%, #4c1d95 0%, transparent 58%),
    radial-gradient(110% 130% at 92% 100%, #7c3aed 0%, transparent 55%),
    #16101f;
}
.music-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(60% 60% at 78% 42%, rgba(232, 121, 249, .45), transparent 70%);
}
.music-band .section-head__title { color: #fff; }
.music-band .section-head p { color: rgba(255,255,255,.66); }
.music-band .link-arrow { color: rgba(255,255,255,.85); }
.music-band .link-arrow:hover { color: #fff; }
.music-band .card__title { color: #fff; }
.music-band .card__excerpt, .music-band .meta { color: rgba(255, 255, 255, .62); }
.music-band .rail-nav button {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.music-band .rail-nav button:hover:not(:disabled) { background: #fff; color: #16101f; border-color: #fff; }
.music-band .player__time, .music-band .track__artist, .music-band .track__no { color: rgba(255,255,255,.6); }
.music-band .player__play { background: #fff; color: #16101f; }
.music-band .track.is-playing { background: rgba(255,255,255,.14); }
.music-band .widget__title { color: rgba(255,255,255,.8); }

.music-layout { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .music-layout { grid-template-columns: minmax(0, 1fr) 340px; } }

/* Dải mời gọi gọn, dùng khi chưa có nội dung nhạc nào */
.music-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  justify-content: space-between;
}
.music-cta__text h2 { font-size: var(--fs-2xl); font-weight: 800; color: #fff; }
.music-cta__text p { margin-top: .4rem; font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
.music-cta .btn { background: #fff; color: #16101f; }
.music-cta .btn:hover { background: var(--brand); color: var(--brand-fg); }

/* ============================================ Đăng ký nhận tin (footer) - */
.newsletter-form { display: flex; gap: .5rem; margin-top: 1rem; }
.newsletter-form__field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: .3rem .3rem .3rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  transition: border-color var(--t-fast) var(--ease);
}
.newsletter-form__field:focus-within { border-color: var(--brand); }
.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding-block: .6rem;
  border: 0;
  background: transparent;
  font-size: var(--fs-sm);
  outline: 0;
  color: var(--ink);
}
.newsletter-form input::placeholder { color: var(--ink-4); }
.newsletter-form button {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-fg);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.newsletter-form button:hover { background: var(--brand-lift); transform: scale(1.05); }
.form-note { margin-top: .6rem; font-size: var(--fs-xs); color: var(--ink-3); }

/* ================================================ Đầu trang chuyên mục - */
.cat-hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.cat-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(70% 120% at 8% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%);
}
.cat-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; max-width: 760px; }
.cat-hero h1 { font-size: var(--fs-3xl); font-weight: 800; }
.cat-hero p { font-size: var(--fs-md); color: var(--ink-2); max-width: 62ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.filter-bar__label { margin-right: .25rem; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }

/* ---------------------------------------------------- Trang bài viết - */
.article-hero { padding-block: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem); }
.article-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 820px; }
.article-hero h1 { font-size: var(--fs-3xl); font-weight: 800; }
.article-hero .lede { max-width: 64ch; }

/* Bỏ .byline: trang chi tiết không còn hiển thị tác giả. Ngày tháng dùng .meta--hero */
.meta--hero { padding-top: .5rem; }

.article-cover { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-lg); overflow: hidden; }
.article-cover figcaption { padding: .7rem .2rem 0; font-size: var(--fs-xs); color: var(--ink-3); }

.article-body { max-width: 760px; }

.article-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------------- Công thức món - */
.recipe { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-block: 2rem; }
@media (min-width: 760px) { .recipe { grid-template-columns: 280px minmax(0, 1fr); } }

.ingredients li { display: flex; align-items: baseline; gap: .6rem; padding-block: .5rem; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.ingredients li::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--accent); }
.ingredients .qty { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.steps { counter-reset: step; }
.steps li { position: relative; padding-left: 3rem; padding-block: .85rem; border-bottom: 1px solid var(--line); }
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .95rem;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--accent);
}

.map-embed { aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-sunken); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------- Trang tìm kiếm - */
.search-summary { padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.search-summary h1 { font-size: var(--fs-2xl); font-weight: 800; }
.search-summary mark { background: var(--brand-soft); color: var(--brand-lift); padding: 0 .2em; border-radius: 4px; }

/* ------------------------------------------------------------ Trang 404 - */
.err-page { display: grid; place-items: center; gap: 1.1rem; min-height: 62vh; padding-block: 3rem; text-align: center; }
.err-page__code {
  font-size: clamp(5rem, 20vw, 11rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--line-strong);
}

/* Các đoạn chữ của hero chồng chỗ nhau, chỉ hiện đoạn đang chọn */
.hero__copies { display: grid; align-content: center; min-height: 250px; max-width: 640px; }
.hero__copy { display: none; }
.hero__copy.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem;
  justify-items: start;
  color: #fff;
}

/* ======================================= Khối tiêu điểm của chuyên mục - */
.spotlight { display: grid; gap: var(--gap); }
@media (min-width: 900px) {
  .spotlight { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
  /* Cả hai cột phải là grid thì thẻ con mới giãn hết chiều cao */
  .spotlight__lead { display: grid; min-height: 460px; }
  .spotlight__side { display: grid; gap: var(--gap); grid-template-rows: repeat(2, 1fr); }
  .spotlight__lead .card--overlay,
  .spotlight__side .card--overlay { min-height: 0; }
}
.spotlight__lead .card__title { font-size: var(--fs-2xl); }

/* ---------------------------------------------------- Kết quả tìm kiếm - */
.search-hit { display: grid; gap: .45rem; justify-items: start; }
.search-hit .card__title { font-size: var(--fs-lg); }
.search-hit .card__title a:hover { color: var(--accent); }
.search-hit mark,
.search-hit strong { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); padding: 0 .18em; border-radius: 4px; font-weight: 700; }

/* ============================ Khối mở đầu riêng của từng chuyên mục ===== */

/* --- Thể thao: băng kết quả --------------------------------------------- */
.score-strip { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .score-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.score-card {
  display: grid; gap: .5rem; align-content: start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease);
}
.score-card:hover { transform: translateY(-3px); border-color: var(--line-strong); border-top-color: var(--accent); }
.score-card__tag { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.score-card__line { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); }
.score-card__line b { flex: 1; font-weight: 650; }
.score-card__line b:last-child { text-align: right; }
.score-card__line em {
  font-style: normal; font-weight: 800; font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.score-card__title { font-weight: 650; line-height: var(--lh-snug); color: var(--ink); }
.score-card__meta { font-size: var(--fs-xs); color: var(--ink-3); }

/* --- Du lịch: thẻ điểm đến ---------------------------------------------- */
.dest-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .dest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dest-card {
  position: relative; display: grid; align-content: end; gap: .4rem;
  aspect-ratio: 3 / 4; padding: 1rem;
  border-radius: var(--r-md); overflow: hidden; isolation: isolate; color: #fff;
  transition: transform var(--t) var(--ease-out);
}
.dest-card:hover { transform: translateY(-4px); }
.dest-card__media { position: absolute; inset: 0; z-index: -2; background: var(--bg-sunken); }
.dest-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.dest-card:hover .dest-card__media img { transform: scale(1.07); }
.dest-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 34%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.92) 100%);
}
.dest-card__body { display: grid; gap: .35rem; justify-items: start; }
.dest-card strong { font-size: var(--fs-base); font-weight: 700; }
.dest-card small { font-size: 11px; color: rgba(255,255,255,.72); }

/* --- Ẩm thực: thẻ công thức --------------------------------------------- */
.recipe-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recipe-card {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; align-items: center;
  padding-right: 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-elev); overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.recipe-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.recipe-card__media { align-self: stretch; background: var(--bg-sunken); }
.recipe-card__media img { width: 100%; height: 100%; object-fit: cover; }
.recipe-card__body { display: grid; gap: .4rem; justify-items: start; padding-block: .9rem; }
.recipe-card strong { font-size: var(--fs-base); font-weight: 650; line-height: var(--lh-snug); color: var(--ink); }
.recipe-card__facts { display: flex; flex-wrap: wrap; gap: .75rem; font-size: var(--fs-xs); color: var(--ink-3); }
.recipe-card__facts span { display: inline-flex; align-items: center; gap: .3rem; }

/* --- Kiến thức: giải thích nhanh, đánh số -------------------------------- */
.explain-grid { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 820px) { .explain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.explain-item {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem;
  padding: 1.1rem 1.25rem; border-top: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease);
}
.explain-grid > :first-child { border-top: 0; }
@media (min-width: 820px) {
  .explain-grid > :nth-child(2) { border-top: 0; }
  .explain-grid > :nth-child(odd) { border-right: 1px solid var(--line); }
}
.explain-item:hover { background: var(--bg-elev); }
.explain-item__no {
  font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.3px var(--line-strong);
  transition: color var(--t) var(--ease), -webkit-text-stroke-color var(--t) var(--ease);
}
.explain-item:hover .explain-item__no { color: var(--accent); -webkit-text-stroke-color: transparent; }
.explain-item__body { display: grid; gap: .35rem; justify-items: start; }
.explain-item strong { font-size: var(--fs-base); font-weight: 650; line-height: var(--lh-snug); color: var(--ink); }
.explain-item small { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }

/* --- Khám phá: khảm ảnh lớn --------------------------------------------- */
.photo-mosaic { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .photo-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .photo-mosaic > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .photo-mosaic > :nth-child(2),
  .photo-mosaic > :nth-child(3) { grid-column: span 2; }
  .photo-mosaic > * { min-height: 0; }
}

/* --- Văn hoá: bài chủ + danh sách ---------------------------------------- */
.essay-split { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .essay-split { grid-template-columns: 1.6fr 1fr; } }
.essay-lead { display: grid; gap: 1rem; align-content: start; }
.essay-lead__media { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-sunken); }
.essay-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.essay-lead__media:hover img { transform: scale(1.04); }
.essay-lead__body { display: grid; gap: .55rem; justify-items: start; }
.essay-lead h3 { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-snug); }
.essay-lead h3 a:hover { color: var(--accent); }
.essay-lead p { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.65; }

.essay-list { display: grid; align-content: start; }
.essay-item {
  display: grid; gap: .35rem; justify-items: start;
  padding: .95rem 0; border-top: 1px solid var(--line);
  transition: padding-left var(--t) var(--ease-out);
}
.essay-list > :first-child { border-top: 0; padding-top: 0; }
.essay-item:hover { padding-left: .5rem; }
.essay-item strong { font-size: var(--fs-base); font-weight: 650; line-height: var(--lh-snug); color: var(--ink); }
.essay-item:hover strong { color: var(--accent); }
.essay-item small { font-size: var(--fs-xs); color: var(--ink-3); }

/* --- Công nghệ: bảng điểm đánh giá --------------------------------------- */
.review-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-elev);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.review-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.review-card__score {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums;
}
.review-card__body { display: grid; gap: .4rem; justify-items: start; }
.review-card strong { font-size: var(--fs-base); font-weight: 650; line-height: var(--lh-snug); color: var(--ink); }
.review-card small { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }

/* ================================= Bóng đá: bảng xếp hạng & kết quả ===== */
.football { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); overflow: hidden; }

/* Radio ẩn điều khiển việc chuyển giải — không cần JavaScript */
.fb-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fb-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .6rem; border-bottom: 1px solid var(--line); background: var(--bg-raise); }
.fb-tab {
  padding: .45rem .95rem; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 650; color: var(--ink-3);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fb-tab:hover { color: var(--ink); }

.fb-panel { display: none; padding: 1.15rem 1.25rem 1.35rem; }
.fb-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.fb-panel__head strong { font-size: var(--fs-lg); font-weight: 700; }
.fb-panel__body { display: grid; gap: 1.75rem; }
@media (min-width: 860px) { .fb-panel__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.25rem; } }
.fb-sub {
  margin-bottom: .7rem; font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
}

/* Ghép radio thứ n với nhãn và panel thứ n. Sáu giải là đủ dùng; thêm giải
   thứ bảy thì nối thêm một cặp bộ chọn nữa ở đây. */
.fb-radio:nth-of-type(1):checked ~ .fb-panels .fb-panel:nth-of-type(1),
.fb-radio:nth-of-type(2):checked ~ .fb-panels .fb-panel:nth-of-type(2),
.fb-radio:nth-of-type(3):checked ~ .fb-panels .fb-panel:nth-of-type(3),
.fb-radio:nth-of-type(4):checked ~ .fb-panels .fb-panel:nth-of-type(4),
.fb-radio:nth-of-type(5):checked ~ .fb-panels .fb-panel:nth-of-type(5),
.fb-radio:nth-of-type(6):checked ~ .fb-panels .fb-panel:nth-of-type(6) { display: block; }

.fb-radio:nth-of-type(1):checked ~ .fb-tabs .fb-tab:nth-of-type(1),
.fb-radio:nth-of-type(2):checked ~ .fb-tabs .fb-tab:nth-of-type(2),
.fb-radio:nth-of-type(3):checked ~ .fb-tabs .fb-tab:nth-of-type(3),
.fb-radio:nth-of-type(4):checked ~ .fb-tabs .fb-tab:nth-of-type(4),
.fb-radio:nth-of-type(5):checked ~ .fb-tabs .fb-tab:nth-of-type(5),
.fb-radio:nth-of-type(6):checked ~ .fb-tabs .fb-tab:nth-of-type(6) { background: var(--accent); color: #08120c; }

.fb-radio:focus-visible ~ .fb-tabs .fb-tab { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Bảng xếp hạng ------------------------------------------------------- */
.league-table-wrap { overflow-x: auto; }
.league-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.league-table th, .league-table td { padding: .5rem .55rem; text-align: center; border-bottom: 1px solid var(--line); }
.league-table th { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-4); }
.league-table tr:last-child td { border-bottom: 0; }
.league-table .lt-team { text-align: left; font-weight: 600; color: var(--ink); white-space: nowrap; }
.league-table .lt-pos { width: 2rem; color: var(--ink-4); }
.league-table .lt-pts { font-weight: 800; color: var(--accent); }
/* Ba đội đầu bảng có vạch màu bên trái */
.league-table tbody tr:nth-child(-n+3) .lt-pos { box-shadow: inset 2px 0 0 var(--accent); }

/* --- Kết quả trận đấu ---------------------------------------------------- */
.match-list { display: grid; gap: .1rem; }
.match {
  display: grid; grid-template-columns: 3.2rem minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: .5rem;
  padding: .5rem .3rem; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.match:last-child { border-bottom: 0; }
.match__date { font-size: var(--fs-xs); color: var(--ink-4); }
.match__team { font-weight: 600; color: var(--ink); }
.match__team--home { text-align: right; }
.match__score {
  padding: .12rem .5rem; border-radius: var(--r-xs);
  background: var(--bg-raise); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap;
}
.match__note { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--ink-3); }

/* ===================== Khối chuyên mục trên trang chủ =================== */
.home-sec { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .home-sec { grid-template-columns: 1.35fr 1fr; align-items: start; } }

/*  Có cột phụ thì thành ba cột: bài lớn | vài bài | cột phụ hẹp.
    Phải đặt SAU luật 900px ở trên, nếu không luật hai cột viết sau sẽ đè lại
    (cùng độ ưu tiên thì cái đứng sau thắng).
    Cột phụ nằm cuối trong HTML nên màn hình hẹp nó tự xuống dưới cùng. */
@media (min-width: 1100px) {
  .home-sec--rail { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) 268px; }
}
.home-sec__rail { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.home-sec__lead { display: grid; }
@media (min-width: 900px) { .home-sec__lead { min-height: 320px; } }
.home-sec__lead .card--overlay { min-height: 260px; }
.home-sec__rest { align-self: start; }

/* ================== Vùng đầu trang chuyên mục: hai cột ================== */
/* Mục tiêu: đưa các vùng thông tin lại gần nhau và tận dụng chiều ngang,
   thay vì xếp thành nhiều băng rộng chồng lên nhau. */
.top-dash { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 1040px) {
  .top-dash { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.25rem, 2.5vw, 2rem); }
}
.top-dash__side { display: grid; gap: var(--gap); position: sticky; top: calc(var(--header-h) + 1.25rem); }
.top-dash__side .panel { padding: 1rem 1.1rem; }
.top-dash__side .widget + .widget { margin-top: 0; }

/* Tiêu đề khối trong vùng này bám sát nội dung bên dưới */
.section-head--flat { margin-bottom: .85rem; }
.section-head--flat .section-head__title { font-size: var(--fs-xl); }

/* Vùng đầu và khối tiếp theo sát nhau hơn mặc định */
.top-dash + * { margin-top: 0; }

/* --- Kiến thức: danh sách giải thích nhanh ------------------------------- */
.explain-grid { display: grid; gap: .1rem; }
@media (min-width: 700px) { .explain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.5rem; } }
.explain-item {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .75rem;
  padding: .8rem .2rem; border-bottom: 1px solid var(--line);
}
.explain-item__no {
  font-size: 1.4rem; font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.2px var(--line-strong);
  transition: color var(--t) var(--ease), -webkit-text-stroke-color var(--t) var(--ease);
}
.explain-item:hover .explain-item__no { color: var(--accent); -webkit-text-stroke-color: transparent; }
.explain-item__body { display: grid; gap: .3rem; justify-items: start; }
.explain-item strong { font-size: var(--fs-base); font-weight: 650; line-height: var(--lh-snug); color: var(--ink); }
.explain-item small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.55; }

/* --- Khám phá: khảm ảnh -------------------------------------------------- */
.photo-mosaic { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .photo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .photo-mosaic > *:first-child { grid-row: span 2; }
}
.photo-mosaic .card--overlay { min-height: 0; height: 100%; }

/* --- Văn hoá: bài chủ + danh sách --------------------------------------- */
.essay-split { display: grid; gap: var(--gap); }
@media (min-width: 820px) { .essay-split { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.essay-lead { display: grid; gap: .85rem; }
.essay-lead__media { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--bg-sunken); }
.essay-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.essay-lead__media:hover img { transform: scale(1.05); }
.essay-lead__body { display: grid; gap: .45rem; justify-items: start; }
.essay-lead h3 { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-snug); }
.essay-lead p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }
.essay-list { display: grid; align-content: start; }
.essay-item {
  display: grid; gap: .3rem; justify-items: start;
  padding: .8rem .2rem; border-bottom: 1px solid var(--line);
  transition: padding-left var(--t) var(--ease-out);
}
.essay-item:last-child { border-bottom: 0; }
.essay-item:hover { padding-left: .45rem; }
.essay-item strong { font-size: var(--fs-base); font-weight: 650; line-height: var(--lh-snug); color: var(--ink); }
.essay-item small { font-size: var(--fs-xs); color: var(--ink-4); }

/* --- Công nghệ: bảng điểm đánh giá --------------------------------------- */
.review-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review-card {
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .9rem; align-items: start;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.review-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.review-card__score {
  display: grid; place-items: center; height: 3.6rem;
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: var(--fs-lg); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums;
}
.review-card__body { display: grid; gap: .3rem; justify-items: start; }
.review-card strong { font-size: var(--fs-base); font-weight: 650; line-height: var(--lh-snug); color: var(--ink); }
.review-card small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.55; }

/* == Sân khấu Âm nhạc ==================================================== */
/* Khối đầu trang /music/: bài nổi bật cỡ lớn cạnh bảng xếp hạng, MV bên dưới.
   Nền tím riêng của chuyên mục, tách khỏi nền trang để trông như một sân khấu. */

.mstage {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.1rem, 2.6vw, 1.9rem);
  border: 1px solid color-mix(in srgb, var(--c-music) 26%, var(--line));
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 130% at 8% 0%, color-mix(in srgb, var(--c-music) 26%, transparent), transparent 62%),
    radial-gradient(70% 120% at 100% 100%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
    var(--bg-elev);
  box-shadow: var(--sh-md);
}
@media (min-width: 900px) {
  .mstage { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
}

/* ---- Bài nổi bật ------------------------------------------------------- */
.mhero { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (min-width: 560px) { .mhero { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); } }
@media (min-width: 900px) { .mhero { grid-template-columns: minmax(0, 1fr); } }

.mhero__art {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-raise);
  box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--c-music) 70%, #000);
}
@media (min-width: 900px) { .mhero__art { aspect-ratio: 16 / 10; } }
.mhero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhero__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.5));
}

.mhero__body { display: grid; gap: .5rem; align-content: start; min-width: 0; }
.mhero__title {
  font-size: var(--fs-2xl); font-weight: 800; line-height: 1.15;
  letter-spacing: -.015em; color: var(--ink);
}
.mhero__artist { font-size: var(--fs-md); font-weight: 600; color: color-mix(in srgb, var(--c-music) 70%, var(--ink)); }
.mhero__desc { font-size: var(--fs-sm); color: var(--ink-2); }
.mhero__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .35rem; }

.mhero__play {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1.25rem;
  border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: #14061f; background: var(--c-music);
  cursor: pointer;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--c-music) 80%, transparent);
  transition: transform .16s ease, filter .16s ease;
}
.mhero__play svg { width: 18px; height: 18px; fill: currentColor; }
.mhero__play:hover { transform: translateY(-1px); filter: brightness(1.08); }
.mhero__play .i-pause,
.mhero__play.is-playing .i-play { display: none; }
.mhero__play.is-playing .i-pause { display: block; }

/* ---- Bảng xếp hạng ----------------------------------------------------- */
.mstage__chart { min-width: 0; display: grid; gap: .7rem; align-content: start; }
.mstage__head { display: grid; gap: .12rem; }
.mstage__title { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.mstage__sub { font-size: var(--fs-xs); color: var(--ink-3); }

.chart { display: grid; gap: 2px; counter-reset: chart; }

.chart-row {
  display: grid;
  grid-template-columns: 26px 48px minmax(0, 1fr) auto;
  align-items: center; gap: .7rem;
  width: 100%; padding: .4rem .55rem;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  transition: background .16s ease;
}
.chart-row:hover { background: color-mix(in srgb, var(--c-music) 14%, transparent); }
.chart-row.is-current { background: color-mix(in srgb, var(--c-music) 20%, transparent); }

.chart-row__no {
  font-size: var(--fs-md); font-weight: 800; text-align: center;
  color: color-mix(in srgb, var(--c-music) 55%, var(--ink-4));
  font-variant-numeric: tabular-nums;
}
/* Đánh số bằng counter: template chỉ cần lặp, không phải đếm */
.chart-row__no::before { counter-increment: chart; content: counter(chart); }
.chart-row:nth-child(-n+3) .chart-row__no { color: var(--c-music); }

.chart-row__art {
  position: relative; width: 48px; height: 48px;
  border-radius: 10px; overflow: hidden; background: var(--bg-raise);
}
.chart-row__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chart-row__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.5); opacity: 0;
  transition: opacity .16s ease;
}
.chart-row__play svg { width: 20px; height: 20px; fill: #fff; }
.chart-row:hover .chart-row__play { opacity: 1; }
.chart-row.is-playing .chart-row__play { opacity: 0; }

.chart-row__body { display: grid; gap: .1rem; min-width: 0; }
.chart-row__title { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.chart-row__artist { font-size: var(--fs-xs); color: var(--ink-3); }
.chart-row__len { font-size: var(--fs-xs); color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* Ba vạch nhún nhảy, chỉ hiện ở dòng đang phát.
   Tên riêng .ceq vì components.css đã có .eq cho dải nhạc trang chủ, và rule
   đó ép height:14px — dùng chung sẽ đè mất kích thước ở đây. */
.ceq {
  position: absolute; inset: 0;
  display: none; align-items: flex-end; justify-content: center; gap: 3px;
  padding-bottom: 13px; background: rgba(0,0,0,.55);
}
.chart-row.is-playing .ceq { display: flex; }
.ceq i {
  width: 3px; height: 8px; border-radius: 2px; background: var(--c-music);
  animation: ceq-bounce .9s ease-in-out infinite;
}
.ceq i:nth-child(2) { animation-delay: .18s; }
.ceq i:nth-child(3) { animation-delay: .36s; }
@keyframes ceq-bounce { 0%, 100% { height: 6px } 50% { height: 18px } }

/* ---- Lưới MV ----------------------------------------------------------- */
.mstage__mv { display: grid; gap: .9rem; margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
/* Số MV thay đổi theo dữ liệu, nên để lưới tự co thay vì cố định 3 cột */
.mstage__mv .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

@media (prefers-reduced-motion: reduce) {
  .ceq i { animation: none; height: 12px; }
  .mhero__play:hover { transform: none; }
}
/* Nhãn nằm trong lưới nên bị kéo giãn hết hàng — ép co lại đúng chữ */
.mhero__body > .tag { justify-self: start; }

/* Thẻ nghe nhạc trên trang chi tiết — bấm là nạp vào thanh phát dưới cùng */
.track-card {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  align-items: center; gap: 1rem;
  width: 100%; margin-bottom: 2rem; padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.track-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev)); }

.track-card__art {
  position: relative; width: 84px; height: 84px;
  border-radius: var(--r-sm); overflow: hidden; background: var(--bg-raise);
}
.track-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track-card__badge {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .42);
}
.track-card__badge svg { width: 30px; height: 30px; fill: #fff; }
.track-card .i-pause,
.track-card.is-playing .i-play { display: none; }
.track-card.is-playing .i-pause { display: block; }

.track-card__body { display: grid; gap: .2rem; min-width: 0; }
.track-card__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.track-card__title { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.track-card__artist { font-size: var(--fs-sm); color: var(--ink-3); }