:root {
  --navy: #2f2f4c;
  --orange: #ff9900;
  --orange-soft: #fff4df;
  --ink: #23243a;
  --muted: #687083;
  --paper: #f7f8fb;
  --line: #e7e9f0;
  --white: #ffffff;
  --green-soft: #eef7f1;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
}

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

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-shell {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, 330px);
  align-items: center;
  gap: 18px;
  padding-block: 14px;
}

.brand-link {
  display: flex;
  align-items: center;
  font-weight: 800;
}

.brand-logo-img {
  width: 156px;
  height: auto;
  object-fit: contain;
}

.main-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  display: inline-flex;
  border-radius: 999px;
  padding: 9px 12px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.main-nav a:hover {
  background: var(--orange-soft);
  color: #b46700;
}

.header-search,
.hero-search {
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.header-search input,
.hero-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 11px 15px;
  color: var(--navy);
  outline: none;
}

.header-search button,
.hero-search button {
  border: 0;
  background: var(--orange);
  color: var(--navy);
  padding: 0 16px;
  font-weight: 900;
}

.magazine-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 153, 0, 0.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
  border-bottom: 1px solid var(--line);
}

.hero-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: end;
  padding: 54px 0 26px;
}

.hero-kicker,
.section-heading span,
.category-label,
.latest-feed article > span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: var(--orange-soft);
  color: #a75d00;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
}

.hero-editorial h1 {
  max-width: 780px;
  margin: 18px 0;
  color: var(--navy);
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.hero-editorial p,
.story-card p,
.process-steps p,
.ribbon-grid p,
.site-footer p,
.entry-content,
.archive-description {
  color: var(--muted);
  line-height: 1.7;
}

.hero-note {
  border-radius: 28px;
  background: var(--navy);
  padding: 24px;
  color: #fff;
  box-shadow: 0 24px 50px rgba(47, 47, 76, 0.2);
}

.hero-note strong {
  display: block;
  margin-bottom: 10px;
  color: var(--orange);
  font-size: 34px;
  letter-spacing: -0.05em;
}

.hero-note span {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.topic-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 0 34px;
}

.topic-cloud a {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 10px 14px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.topic-cloud a:hover {
  border-color: var(--orange);
  color: #a75d00;
}

.editorial-board,
.process-section,
.category-ribbon {
  padding-block: 42px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 20px;
}

.section-heading.compact {
  max-width: 620px;
}

.section-heading h2 {
  margin: 12px 0 0;
  color: var(--navy);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.cell-news-layout,
.news-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.72fr) minmax(260px, 0.72fr);
  gap: 18px;
  align-items: stretch;
}

.lead-news-card,
.side-news-card,
.latest-news-box,
.story-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(47, 47, 76, 0.08);
}

.lead-news-card {
  overflow: hidden;
}

.lead-news-image {
  display: block;
  height: 335px;
  background: var(--green-soft);
}

.lead-news-copy {
  padding: 18px;
}

.lead-news-copy h3 {
  margin: 12px 0 10px;
  color: var(--navy);
  font-size: 28px;
  line-height: 1.15;
}

.lead-news-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.side-news-list {
  display: grid;
  gap: 12px;
}

.side-news-card {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px;
  padding: 12px;
}

.side-news-image {
  display: block;
  overflow: hidden;
  height: 94px;
  border-radius: 14px;
  background: var(--green-soft);
}

.side-news-card span,
.latest-news-box span {
  color: #a75d00;
  font-size: 12px;
  font-weight: 900;
}

.side-news-card h3 {
  margin: 6px 0 0;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.3;
}

.latest-news-box {
  padding: 16px;
}

.latest-news-box h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 20px;
}

.latest-news-box article {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.latest-news-box article:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.latest-news-box a {
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.lead-news-card a:hover,
.side-news-card a:hover,
.latest-news-box a:hover,
.ribbon-grid a:hover {
  color: #b46700;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 18px;
  color: #8991a3;
  font-size: 13px;
  font-weight: 800;
}

.story-card {
  display: grid;
  grid-template-columns: 42% 1fr;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(47, 47, 76, 0.08);
}

.story-image {
  display: block;
  min-height: 100%;
  background: var(--green-soft);
}

.story-card > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.category-label.small {
  font-size: 11px;
}

.story-card h3 {
  margin: 12px 0 10px;
  color: var(--navy);
  font-size: 23px;
  line-height: 1.18;
}

.process-section {
  border-top: 1px solid var(--line);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  counter-reset: process;
}

.process-steps article {
  position: relative;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  min-height: auto;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 16px 36px rgba(47, 47, 76, 0.08);
}

.process-steps article::after {
  display: none;
}

.process-steps article:nth-child(3n)::after,
.process-steps article:last-child::after {
  display: none;
}

.process-steps strong {
  display: inline-flex;
  margin-top: 10px;
  color: var(--orange);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.process-steps h3 {
  margin: 8px 0 10px;
  color: var(--navy);
  font-size: 21px;
  line-height: 1.18;
}

.process-steps p {
  margin-bottom: 0;
}

.step-icon,
.menu-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: var(--orange-soft);
  border: 1px solid rgba(255, 153, 0, 0.34);
}

.step-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.step-icon::before,
.step-icon::after,
.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  border-color: var(--navy);
}

.icon-login::before {
  width: 18px;
  height: 22px;
  border: 3px solid var(--navy);
  border-radius: 4px;
}

.icon-login::after {
  width: 14px;
  height: 3px;
  background: var(--orange);
  transform: translateX(10px);
}

.icon-package::before {
  width: 24px;
  height: 20px;
  border: 3px solid var(--navy);
  border-radius: 5px;
}

.icon-package::after {
  width: 16px;
  height: 3px;
  background: var(--orange);
  transform: translateY(-7px);
}

.icon-template::before,
.icon-design::before {
  width: 24px;
  height: 28px;
  border: 3px solid var(--navy);
  border-radius: 4px;
}

.icon-template::after {
  width: 16px;
  height: 3px;
  background: var(--orange);
  box-shadow: 0 7px 0 var(--orange);
}

.icon-design::after {
  width: 18px;
  height: 18px;
  border-right: 4px solid var(--orange);
  border-bottom: 4px solid var(--orange);
  transform: rotate(35deg);
}

.icon-roll::before {
  width: 28px;
  height: 28px;
  border: 4px solid var(--navy);
  border-radius: 50%;
}

.icon-roll::after {
  width: 10px;
  height: 10px;
  border: 3px solid var(--orange);
  border-radius: 50%;
}

.icon-print::before {
  width: 28px;
  height: 18px;
  border: 3px solid var(--navy);
  border-radius: 4px;
}

.icon-print::after {
  width: 20px;
  height: 12px;
  border: 3px solid var(--orange);
  background: #fff;
  transform: translateY(12px);
}

.category-ribbon {
  background: #fff;
  border-block: 1px solid var(--line);
}

.category-ribbon .section-heading h2 {
  font-size: clamp(24px, 2.5vw, 34px);
}

.category-ribbon .section-heading {
  display: none;
}

.ribbon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ribbon-grid article {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  padding: 18px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.ribbon-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(47, 47, 76, 0.1);
}

.ribbon-grid h3 {
  margin: 14px 0 8px;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.18;
}

.ribbon-grid p {
  font-size: 14px;
  line-height: 1.62;
}

.ribbon-grid a {
  color: #a75d00;
  font-size: 14px;
  font-weight: 900;
}

.menu-icon::before {
  width: 22px;
  height: 22px;
}

.icon-book::before {
  border-left: 4px solid var(--navy);
  border-bottom: 4px solid var(--navy);
  transform: skewY(-8deg);
}

.icon-book::after {
  width: 16px;
  height: 3px;
  background: var(--orange);
  transform: translateY(5px);
}

.icon-tech::before {
  border: 3px solid var(--navy);
  border-radius: 6px;
}

.icon-tech::after {
  width: 12px;
  height: 12px;
  border: 3px solid var(--orange);
  border-radius: 50%;
}

.icon-guide::before {
  width: 24px;
  height: 16px;
  border: 3px solid var(--navy);
  border-radius: 5px;
}

.icon-guide::after {
  width: 14px;
  height: 14px;
  border-right: 4px solid var(--orange);
  border-bottom: 4px solid var(--orange);
  transform: translateY(8px) rotate(45deg);
}

.icon-solution::before {
  width: 26px;
  height: 26px;
  border: 3px solid var(--navy);
  border-radius: 50%;
}

.icon-solution::after {
  width: 12px;
  height: 20px;
  border-right: 4px solid var(--orange);
  border-bottom: 4px solid var(--orange);
  transform: rotate(40deg);
}

.site-footer {
  background: var(--navy);
  color: #fff;
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}

.footer-logo {
  display: block;
  width: 130px;
  height: auto;
  object-fit: contain;
  margin-bottom: 8px;
  filter: brightness(0) invert(1);
}

.site-footer .eyebrow {
  margin: 0 0 8px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer h2 {
  margin: 0;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.22;
  font-weight: 700;
}

.site-footer h2 a {
  color: var(--orange);
  font-weight: 900;
}

.site-footer p {
  max-width: 430px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
}

.archive-hero,
.single-article {
  padding-block: 42px;
}

.single-article {
  max-width: 900px;
  margin-block: 28px 40px;
  border-radius: 28px;
  background: #fff;
  padding: 28px;
}

.archive-hero h1,
.single-article h1 {
  max-width: 900px;
  margin: 12px 0;
  color: var(--navy);
  font-size: clamp(25px, 5vw, 30px);
  line-height: 1.05;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0 14px;
  color: #a75d00;
  font-weight: 900;
}

.single-label {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.single-barcode {
  height: 80px;
  margin: 22px 0;
  border-radius: 18px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 4px, transparent 4px 9px, var(--navy) 9px 16px, transparent 16px 22px);
}

.single-cover {
  overflow: hidden;
  margin: 24px 0;
  border-radius: 22px;
}

.entry-content {
  font-size: 18px;
}

.entry-content h2,
.entry-content h3 {
  color: var(--navy);
  line-height: 1.2;
}

@media (max-width: 1040px) {
  .header-inner,
  .hero-editorial,
  .process-steps {
    grid-template-columns: 1fr;
  }

  .main-nav ul {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .cell-news-layout,
  .news-showcase {
    grid-template-columns: 1fr 1fr;
  }

  .lead-news-card,
  .latest-news-box {
    grid-column: 1 / -1;
  }

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

  .process-steps article::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .news-showcase,
  .cell-news-layout,
  .ribbon-grid {
    grid-template-columns: 1fr;
  }

  .side-news-card,
  .process-steps article {
    grid-template-columns: 1fr;
  }

  .step-head {
    align-items: flex-start;
  }

  .lead-news-image {
    height: 230px;
  }

  .footer-grid {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Final VNlabel refinement */
.brand-link {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.brand-logo-img {
  width: 132px;
  display: block;
  mix-blend-mode: normal;
}

.hero-editorial {
  padding: 42px 0 24px;
}

.hero-editorial h1 {
  max-width: 720px;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.12;
}

.category-ribbon {
  padding-block: 30px 8px;
  border-top: 0;
  background: #fff;
}

.ribbon-grid article {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 153, 0, 0.12), transparent 26%),
    #fff;
}

.ribbon-grid article::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(47, 47, 76, 0.08);
  border-radius: 50%;
}

.update-news-section {
  padding-block: 42px;
}

.update-news-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
}

.news-heading {
  margin-bottom: 18px;
}

.news-heading h2 {
  display: inline-block;
  margin: 0;
  border-bottom: 4px solid var(--orange);
  padding-bottom: 8px;
  color: var(--navy);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  text-transform: uppercase;
}

.news-heading.small h2 {
  font-size: clamp(24px, 2.6vw, 34px);
}

.update-list {
  display: grid;
  gap: 24px;
}

.update-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: center;
}

.update-thumb {
  display: block;
  overflow: hidden;
  height: 168px;
  border-radius: 12px;
  background: var(--green-soft);
}

.update-row h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.22;
}

.update-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: #8a93a4;
  font-size: 13px;
  font-weight: 800;
}

.news-meta span:first-child {
  color: #1674bd;
}

.weekly-popular {
  align-self: start;
}

.popular-feature {
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(47, 47, 76, 0.08);
}

.popular-feature img {
  height: 170px;
}

.popular-feature h3 {
  margin: 0;
  padding: 12px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.28;
}

.popular-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.popular-list article {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px;
  align-items: center;
}

.popular-list a {
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.popular-list img {
  height: 74px;
  border-radius: 10px;
}

.process-section .section-heading {
  max-width: 100%;
}

.process-steps {
  grid-template-columns: 1fr;
  gap: 12px;
}

.process-steps article {
  grid-template-columns: 120px 1fr;
  gap: 20px;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(255, 153, 0, 0.08), transparent 36%),
    #fff;
  padding: 18px 22px;
  box-shadow: 0 10px 24px rgba(47, 47, 76, 0.06);
}

.step-head {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-right: 1px dashed rgba(47, 47, 76, 0.16);
}

.process-steps strong {
  margin-top: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.site-footer {
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 153, 0, 0.14), transparent 24%),
    var(--navy);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-block: 18px;
}

.footer-logo {
  width: 118px;
  filter: none;
}

@media (max-width: 1040px) {
  .update-news-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .update-row,
  .process-steps article {
    grid-template-columns: 1fr;
  }

  .step-head {
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px dashed rgba(47, 47, 76, 0.16);
    padding-bottom: 12px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Typography polish */
body {
  font-size: 15px;
}

.hero-editorial h1 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.16;
}

.hero-editorial p {
  font-size: 15px;
}

.section-heading {
  max-width: 100%;
}

.section-heading h2,
.news-heading h2 {
  font-size: clamp(23px, 2.5vw, 32px);
  line-height: 1.18;
}

.news-heading.small h2 {
  font-size: clamp(22px, 2.2vw, 30px);
}

.lead-news-copy h3 {
  font-size: 23px;
  line-height: 1.22;
}

.side-news-card h3 {
  font-size: 14px;
}

.latest-news-box h3 {
  font-size: 18px;
}

.story-card h3 {
  font-size: 20px;
  line-height: 1.22;
}

.process-steps h3 {
  font-size: 18px;
  line-height: 1.24;
}

.ribbon-grid h3 {
  font-size: 17px;
  line-height: 1.24;
}

.update-row h3 {
  font-size: 21px;
}

.popular-feature h3 {
  font-size: 16px;
}

.popular-list a {
  font-size: 14px;
}

.footer-grid {
  grid-template-columns: 1fr auto;
}

.site-footer .footer-grid > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.footer-logo {
  width: 108px;
  margin: 0;
}

.site-footer h2 {
  font-size: clamp(12px, 1.05vw, 14px);
}

@media (max-width: 760px) {
  .site-footer .footer-grid > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Single article layout */
.single-main {
  background: var(--paper);
}

.single-shell {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 30px 50px;
}

.article-hero {
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
}

.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.article-breadcrumb a:hover {
  color: #a75d00;
}

.article-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 34px;
  align-items: center;
}

.article-hero-copy h1 {
  max-width: 780px;
  margin: 14px 0;
  color: var(--navy);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.article-summary {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 18px;
  color: #7a8496;
  font-size: 13px;
  font-weight: 800;
}

.article-cover {
  overflow: hidden;
  height: 290px;
  margin: 0;
  border-radius: 22px;
  background: var(--green-soft);
  box-shadow: 0 18px 42px rgba(47, 47, 76, 0.12);
}

.article-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding-top: 34px;
}

.article-sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
}

.toc-card,
.contact-card,
.article-intro-box,
.article-note-grid > div,
.related-posts {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(47, 47, 76, 0.06);
}

.toc-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.toc-card strong {
  color: var(--navy);
  font-size: 15px;
}

.toc-card a {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.contact-card {
  padding: 18px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 153, 0, 0.12), transparent 30%),
    #fff;
}

.contact-card span {
  color: var(--orange);
  font-weight: 900;
}

.contact-card p {
  color: var(--muted);
  line-height: 1.6;
}

.contact-card a {
  display: inline-flex;
  border-radius: 999px;
  background: var(--orange);
  color: var(--navy);
  padding: 10px 14px;
  font-weight: 900;
}

.article-content {
  min-width: 0;
}

.article-intro-box {
  padding: 20px;
  margin-bottom: 22px;
}

.article-intro-box h2,
.article-note-grid h2,
.entry-content h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.25;
}

.article-intro-box p,
.article-note-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.entry-content {
  border-radius: 24px;
  background: #fff;
  padding: clamp(22px, 4vw, 42px);
  color: #3b4253;
  font-size: 17px;
  line-height: 1.82;
  box-shadow: 0 12px 28px rgba(47, 47, 76, 0.06);
}

.entry-content p {
  margin: 0 0 18px;
}

.entry-content h2,
.entry-content h3 {
  margin-top: 28px;
}

.entry-content ul,
.entry-content ol {
  padding-left: 22px;
}

.article-note-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.article-note-grid > div {
  padding: 20px;
}

.related-posts {
  margin-top: 34px;
  padding: 22px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.related-thumb {
  display: block;
  overflow: hidden;
  height: 130px;
  border-radius: 14px;
  background: var(--green-soft);
}

.related-grid h3 {
  margin: 10px 0 0;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .article-hero-grid,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 640px) {
  .article-sidebar,
  .article-note-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .article-cover {
    height: 230px;
  }
}

/* Redesigned detail page */
.detail-page {
  background: var(--paper);
}

.detail-hero {
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 153, 0, 0.16), transparent 24%),
    linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
  padding: 26px 0 34px;
}

.detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.detail-breadcrumb a:hover {
  color: #a75d00;
}

.detail-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(47, 47, 76, 0.1);
}

.detail-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px);
}

.detail-category {
  width: fit-content;
  border-radius: 999px;
  background: var(--orange-soft);
  color: #a75d00;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
}

.detail-hero-content h1 {
  max-width: 760px;
  margin: 16px 0 12px;
  color: var(--navy);
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.detail-hero-content p {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 18px;
  color: #7f8899;
  font-size: 13px;
  font-weight: 800;
}

.detail-cover {
  overflow: hidden;
  min-height: 330px;
  margin: 0;
  border-radius: 22px;
  background: var(--green-soft);
}

.detail-body-wrap {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  justify-content: start;
  padding-block: 36px;
}

.detail-rail {
  position: sticky;
  top: 92px;
}

.detail-rail-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(47, 47, 76, 0.06);
}

.detail-rail-card span {
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.detail-rail-card a {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.detail-category-menu {
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--line);
  padding: 8px 18px 8px 0;
}

.detail-category-menu a {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 12px;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border-radius: 14px;
  padding: 7px 9px;
  color: #252d3a;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.detail-category-menu a::after {
  content: "›";
  color: #252d3a;
  font-size: 22px;
  line-height: 1;
}

.detail-category-menu a:first-child::after,
.detail-category-menu a:nth-last-child(1)::after {
  content: "";
}

.detail-category-menu a:hover {
  background: #fff;
  color: #a75d00;
  box-shadow: 0 10px 22px rgba(47, 47, 76, 0.06);
}

.cat-icon {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  color: currentColor;
}

.cat-icon::before,
.cat-icon::after {
  content: "";
  position: absolute;
  border-color: currentColor;
}

.cat-home::before {
  inset: 8px 5px 4px;
  border: 3px solid currentColor;
  border-radius: 5px;
}

.cat-home::after {
  width: 18px;
  height: 18px;
  left: 6px;
  top: 0;
  border-left: 3px solid currentColor;
  border-top: 3px solid currentColor;
  transform: rotate(45deg);
}

.cat-tech::before,
.cat-book::before,
.cat-guide::before {
  inset: 3px 6px;
  border: 3px solid currentColor;
  border-radius: 7px;
}

.cat-tech::after {
  width: 14px;
  height: 3px;
  left: 8px;
  top: 13px;
  background: currentColor;
  box-shadow: 0 7px 0 currentColor;
}

.cat-book::after {
  width: 12px;
  height: 16px;
  left: 9px;
  top: 5px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.cat-guide::after {
  width: 13px;
  height: 13px;
  left: 9px;
  top: 8px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}

.cat-solution::before {
  width: 26px;
  height: 18px;
  left: 2px;
  top: 6px;
  border: 3px solid currentColor;
  border-radius: 12px;
}

.cat-solution::after {
  width: 12px;
  height: 8px;
  left: 9px;
  top: 20px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.cat-sale::before {
  inset: 4px;
  border: 3px solid currentColor;
  border-radius: 8px;
  transform: rotate(45deg);
}

.cat-sale::after {
  width: 4px;
  height: 4px;
  left: 13px;
  top: 13px;
  border-radius: 50%;
  background: currentColor;
}

.cat-contact::before {
  width: 18px;
  height: 18px;
  left: 5px;
  top: 2px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.cat-contact::after {
  width: 24px;
  height: 12px;
  left: 3px;
  bottom: 0;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

.detail-article {
  min-width: 0;
}

.detail-summary-card,
.detail-content,
.detail-insight-strip article,
.detail-cta,
.detail-related {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(47, 47, 76, 0.06);
}

.detail-summary-card {
  margin-bottom: 18px;
  padding: 20px;
}

.detail-summary-card strong {
  color: var(--navy);
  font-size: 18px;
}

.detail-summary-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.72;
}

.detail-content {
  padding: clamp(24px, 4vw, 44px);
  color: #333b4c;
  font-size: 17px;
  line-height: 1.86;
}

.detail-content p {
  margin: 0 0 18px;
}

.detail-content h2,
.detail-content h3 {
  margin: 30px 0 12px;
  color: var(--navy);
  line-height: 1.25;
}

.detail-content h2 {
  font-size: 25px;
}

.detail-content h3 {
  font-size: 21px;
}

.article-inline-image {
  overflow: hidden;
  margin: 28px 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(47, 47, 76, 0.06);
}

.article-inline-image img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}

.article-inline-image figcaption {
  padding: 12px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.detail-insight-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.detail-insight-strip article {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.detail-insight-strip article::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(47, 47, 76, 0.08);
  border-radius: 50%;
}

.detail-insight-strip span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
}

.detail-insight-strip h2 {
  margin: 8px 0;
  color: var(--navy);
  font-size: 20px;
}

.detail-insight-strip p {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.detail-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin-top: 18px;
  padding: 22px;
  background:
    radial-gradient(circle at 95% 20%, rgba(255, 153, 0, 0.18), transparent 28%),
    var(--navy);
  color: #fff;
}

.detail-cta h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.detail-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.65;
}

.detail-cta a {
  display: inline-flex;
  border-radius: 999px;
  background: var(--orange);
  color: var(--navy);
  padding: 12px 16px;
  font-weight: 900;
  white-space: nowrap;
}

.detail-related {
  padding: 22px;
  margin-bottom: 48px;
}

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

.detail-related-thumb {
  display: block;
  overflow: hidden;
  height: 150px;
  border-radius: 14px;
  background: var(--green-soft);
}

.detail-related h3 {
  margin: 10px 0 0;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .detail-hero-card,
  .detail-body-wrap {
    grid-template-columns: 1fr;
  }

  .detail-rail {
    position: static;
  }

  .detail-rail-card {
    grid-template-columns: repeat(4, auto);
    align-items: center;
    overflow-x: auto;
  }

  .detail-rail-card a {
    border-top: 0;
    padding-top: 0;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .detail-insight-strip,
  .detail-related-grid,
  .detail-cta {
    grid-template-columns: 1fr;
  }

  .detail-cover {
    min-height: 230px;
  }
}

/* Detail page refinements */
.detail-inline-toc {
  position: relative;
  display: block;
  margin: 18px 0 22px;
  border: 1px solid rgba(255, 153, 0, 0.48);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffefa, #fffaf0);
  padding: 16px 24px 18px 34px;
  box-shadow: 0 12px 30px rgba(47, 47, 76, 0.06);
  overflow: hidden;
}

.detail-inline-toc::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: linear-gradient(180deg, var(--orange), #ffb13d);
}

.detail-inline-toc strong {
  display: block;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
  margin: 0 42px 10px 0;
}

.toc-collapse {
  position: absolute;
  top: 13px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: var(--navy);
  cursor: pointer;
}

.toc-collapse::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  top: 13px;
  left: 10px;
  transform: rotate(45deg);
  transition: transform 0.18s ease, top 0.18s ease;
}

.detail-inline-toc ol {
  margin: 0;
  padding-left: 24px;
}

.detail-inline-toc li {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  padding: 8px 0;
  border-top: 1px dashed rgba(255, 153, 0, 0.28);
}

.detail-inline-toc li:first-child {
  border-top: 0;
  padding-top: 0;
}

.detail-inline-toc li:last-child {
  padding-bottom: 0;
}

.detail-inline-toc a {
  color: #126cc5;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

.detail-inline-toc a:hover {
  color: var(--orange);
}

.detail-inline-toc.is-collapsed {
  padding-bottom: 16px;
}

.detail-inline-toc.is-collapsed ol {
  display: none;
}

.detail-inline-toc.is-collapsed .toc-collapse::before {
  top: 9px;
  transform: rotate(225deg);
}

.detail-summary-card {
  display: none;
}

.detail-cta {
  margin-top: 18px;
}

.detail-cta p a {
  display: inline;
  border-radius: 0;
  background: transparent;
  color: #ffb13d;
  padding: 0;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: normal;
}

.detail-insight-strip {
  grid-template-columns: repeat(3, 1fr);
}

.detail-insight-strip article {
  background:
    linear-gradient(180deg, #fff, rgba(255, 244, 223, 0.58)),
    #fff;
}

.detail-insight-strip h2 {
  font-size: 18px;
}

.detail-after-news {
  display: block;
  margin-bottom: 48px;
}

.detail-support-panel {
  min-width: 0;
  margin-bottom: 22px;
}

.detail-support-panel .detail-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  margin-top: 0;
  padding: 20px 22px;
}

.detail-support-panel .detail-cta h2 {
  font-size: 20px;
}

.detail-support-panel .detail-cta p {
  font-size: 14px;
}

.detail-support-panel .detail-cta > a {
  justify-content: center;
}

.detail-support-panel .detail-insight-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.detail-support-panel .detail-insight-strip article {
  padding: 18px;
}

.detail-support-panel .detail-insight-strip h2 {
  font-size: 16px;
}

.detail-support-panel .detail-insight-strip p {
  font-size: 13px;
}

.detail-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.detail-related-head .news-heading {
  margin-bottom: 0;
}

.related-nav {
  display: flex;
  gap: 8px;
}

.related-nav button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 24px;
  font-weight: 900;
}

.detail-related {
  overflow: hidden;
  min-width: 0;
  padding: 22px;
  margin-bottom: 0;
}

.detail-related-track {
  display: grid;
  grid-auto-columns: calc((100% - 32px) / 3);
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
}

.detail-related-track::-webkit-scrollbar {
  display: none;
}

.detail-related-track article {
  min-width: 0;
  scroll-snap-align: start;
}

.detail-related-track p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.related-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: #8a93a4;
  font-size: 11px;
  font-weight: 800;
}

.related-meta span {
  color: #1674bd;
}

@media (max-width: 980px) {
  .detail-inline-toc {
    padding: 16px 24px 18px 34px;
  }

  .detail-support-panel .detail-cta,
  .detail-insight-strip,
  .detail-support-panel .detail-insight-strip {
    grid-template-columns: 1fr;
  }

  .detail-related-track {
    grid-auto-columns: minmax(260px, 78%);
  }
}

@media (max-width: 640px) {
  .detail-inline-toc {
    padding: 15px 16px 17px 26px;
  }

  .detail-inline-toc strong {
    font-size: 16px;
  }

  .detail-inline-toc li {
    font-size: 13px;
    padding: 8px 0;
  }

  .toc-collapse {
    right: 12px;
    width: 30px;
    height: 30px;
  }

  .detail-cta {
    grid-template-columns: 1fr;
  }
}
.detail-article h2,
.detail-article h3 {
  scroll-margin-top: 150px;
}

#ez-toc-container {
  width: 100%;
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid #e7e9f0;
  border-left: 4px solid #ff9900;
  border-radius: 14px;
  background: #fff4df;
  box-shadow: none;
}
#ez-toc-container .ez-toc-title {
  color: #2f2f4c;
  font-size: 17px;
  font-weight: 800;
}
#ez-toc-container a {
  color: #2f2f4c;
  font-size: 14.5px;
  line-height: 1.7;
  text-decoration: none;
}
#ez-toc-container a:hover {
  color: #b46700;
  text-decoration: underline;
}
/* Bảng trong bài viết blog.vnlabel.vn */
.detail-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 20px 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e7e9f0;
  border-radius: 12px;
  border-spacing: 0;
  background: #fff;
  box-shadow: 0 6px 18px rgba(47, 47, 76, .06);
  font-size: 15px;
  line-height: 1.55;
}
.detail-content table > thead,
.detail-content table > tbody {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.detail-content table th,
.detail-content table td {
  padding: 11px 14px;
  border-bottom: 1px solid #e7e9f0;
  border-right: 1px solid #e7e9f0;
  color: #23243a;
  text-align: left;
  vertical-align: top;
}
.detail-content table th:last-child,
.detail-content table td:last-child {
  border-right: 0;
}
.detail-content table tr:last-child > td {
  border-bottom: 0;
}

/* Hàng tiêu đề: thẻ th, hoặc hàng đầu tiên của bảng không có thead */
.detail-content table th,
.detail-content table > tbody:first-child > tr:first-child > td {
  border-right-color: rgba(255, 255, 255, .16);
  border-bottom: 0;
  background: #2f2f4c;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Hàng xen kẽ và cột đầu tiên */
.detail-content table > tbody > tr:nth-child(odd) > td {
  background: #f7f8fb;
}
.detail-content table > tbody:first-child > tr:first-child > td {
  background: #2f2f4c;
}
.detail-content table > tbody > tr:not(:first-child) > td:first-child {
  color: #2f2f4c;
  font-weight: 700;
}
.detail-content table > tbody > tr:not(:first-child):hover > td {
  background: #fff4df;
}

/* Bảng từ 5 cột trở lên: giữ cột đủ rộng, vuốt ngang để xem */
.detail-content table:has(tr:first-child > :nth-child(5)) > tbody,
.detail-content table:has(tr:first-child > :nth-child(5)) > thead {
  min-width: 640px;
}

@media (max-width: 760px) {
  .detail-content table {
    font-size: 14px;
  }
  .detail-content table th,
  .detail-content table td {
    padding: 9px 10px;
  }
  .detail-content table th,
  .detail-content table > tbody:first-child > tr:first-child > td {
    font-size: 13px;
    white-space: normal;
  }
}
/* Ảnh, video trong bài viết blog.vnlabel.vn: không vượt khung trên điện thoại */
.detail-content figure,
.detail-content .wp-caption {
  max-width: 100%;
  margin: 20px auto;
  box-sizing: border-box;
}
.detail-content img,
.detail-content video,
.detail-content iframe,
.detail-content embed {
  max-width: 100%;
}
.detail-content img,
.detail-content video {
  height: auto;
}
.detail-content figure img,
.detail-content .wp-caption img {
  display: block;
  width: 100%;
  border-radius: 12px;
}
.detail-content figcaption,
.detail-content .wp-caption-text {
  margin-top: 8px;
  color: #687083;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}

/* Bảng trong bài viết blog.vnlabel.vn */
.detail-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 20px 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e7e9f0;
  border-radius: 12px;
  border-spacing: 0;
  background: #fff;
  box-shadow: 0 6px 18px rgba(47, 47, 76, .06);
  font-size: 15px;
  line-height: 1.55;
}
.detail-content table > thead,
.detail-content table > tbody {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.detail-content table th,
.detail-content table td {
  padding: 11px 14px;
  border-bottom: 1px solid #e7e9f0;
  border-right: 1px solid #e7e9f0;
  color: #23243a;
  text-align: left;
  vertical-align: top;
}
.detail-content table th:last-child,
.detail-content table td:last-child {
  border-right: 0;
}
.detail-content table tr:last-child > td {
  border-bottom: 0;
}

/* Hàng tiêu đề: thẻ th, hoặc hàng đầu tiên của bảng không có thead */
.detail-content table th,
.detail-content table > tbody:first-child > tr:first-child > td {
  border-right-color: rgba(255, 255, 255, .16);
  border-bottom: 0;
  background: #2f2f4c;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Hàng xen kẽ và cột đầu tiên */
.detail-content table > tbody > tr:nth-child(odd) > td {
  background: #f7f8fb;
}
.detail-content table > tbody:first-child > tr:first-child > td {
  background: #2f2f4c;
}
.detail-content table > tbody > tr:not(:first-child) > td:first-child {
  color: #2f2f4c;
  font-weight: 700;
}
.detail-content table > tbody > tr:not(:first-child):hover > td {
  background: #fff4df;
}

/* Bảng từ 5 cột trở lên: giữ cột đủ rộng, vuốt ngang để xem */
.detail-content table:has(tr:first-child > :nth-child(5)) > tbody,
.detail-content table:has(tr:first-child > :nth-child(5)) > thead {
  min-width: 640px;
}

@media (max-width: 760px) {
  .detail-content table {
    font-size: 14px;
  }
  .detail-content table th,
  .detail-content table td {
    padding: 9px 10px;
  }
  .detail-content table th,
  .detail-content table > tbody:first-child > tr:first-child > td {
    font-size: 13px;
    white-space: normal;
  }
}