/* =========================================================
   ESE.com.vn — theme "ese" (WordPress)
   Phần 1: CSS gốc của layout/assets/css/style.css (design tokens ở :root = theme.json).
   Phần 2 (cuối file): bổ sung cho WordPress — menu, nội dung Gutenberg, Contact Form 7, phân trang…
   Font: assets/css/fonts.css (Be Vietnam Pro tự host).
   ========================================================= */
:root {
  --c-primary: #0e7c66;
  --c-primary-700: #0a5e4e;
  --c-primary-50: #e7f4f0;
  --c-primary-100: #cde9e1;
  --c-accent: #f2a516;
  --c-accent-50: #fff5e0;
  --c-ink: #0f1b2d;
  --c-ink-2: #34445a;
  --c-muted: #66768c;
  --c-line: #e2e8f0;
  --c-bg: #f5f7fa;
  --c-surface: #ffffff;
  --c-good: #15803d;
  --c-good-50: #eaf7ee;
  --c-bad: #c2410c;
  --c-bad-50: #fdf0e8;
  --c-partner: #1d4ed8;
  --c-partner-50: #eaf0ff;

  --font: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .06);
  --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 6px 20px rgba(15, 27, 45, .07);
  --container: 1200px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  padding-bottom: 64px; /* chừa chỗ thanh CTA mobile */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, svg { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 4vw, var(--fs-3xl)); }
h2 { font-size: clamp(22px, 3vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 1em; }
small, .small { font-size: var(--fs-sm); }
.muted { color: var(--c-muted); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 48px 0; }
.section--tight { padding: 32px 0; }
.section--white { background: var(--c-surface); }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section__head p { margin: 0; color: var(--c-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Demo notice ---------- */
.demo-bar { background: var(--c-accent-50); color: #7a4b00; font-size: var(--fs-xs); text-align: center; padding: 6px 12px; border-bottom: 1px solid #f6dca6; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--c-ink); }
.logo:hover { text-decoration: none; }
.logo__mark { width: 38px; height: 38px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.logo__name { font-weight: 800; font-size: 20px; letter-spacing: .02em; }
.logo__tag { font-size: 11px; color: var(--c-muted); }
.nav { display: none; margin-left: auto; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--c-ink-2); font-weight: 500; font-size: 15px; }
.nav a:hover { background: var(--c-bg); text-decoration: none; color: var(--c-ink); }
.nav a[aria-current="page"] { color: var(--c-primary); background: var(--c-primary-50); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--c-line); background: #fff; color: var(--c-ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--c-bg); }
.header-actions .header-cta { display: none; }
@media (max-width: 520px) { .logo__tag { display: none; } }
@media (min-width: 1080px) {
  .nav { display: block; }
  .header-actions { margin-left: 8px; }
  .header-actions .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
}
.mobile-nav { display: none; border-top: 1px solid var(--c-line); background: #fff; }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px var(--gutter) 16px; }
.mobile-nav a { display: block; padding: 12px 4px; color: var(--c-ink); font-weight: 500; border-bottom: 1px solid var(--c-line); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; font: 600 15px/1.2 var(--font); cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-700); }
.btn--accent { background: var(--c-accent); color: #3d2600; }
.btn--accent:hover { background: #e09610; }
.btn--ghost { background: #fff; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn--zalo { background: #0068ff; color: #fff; }
.btn--zalo:hover { background: #0057d6; }
.btn--sm { padding: 7px 12px; font-size: 14px; border-radius: 8px; }
.btn--block { width: 100%; }

/* ---------- Badges & chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--c-bg); color: var(--c-ink-2); border: 1px solid var(--c-line); }
.badge--partner { background: var(--c-partner-50); color: var(--c-partner); border-color: #c9d7ff; }
.badge--good { background: var(--c-good-50); color: var(--c-good); border-color: #c4e8cf; }
.badge--accent { background: var(--c-accent-50); color: #8a5a00; border-color: #f6dca6; }
.badge--ad { background: #f1f1f1; color: #555; }
.chip[aria-current="page"] { border-color: var(--c-primary); background: var(--c-primary-50); color: var(--c-primary-700); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; font-size: 14px; color: var(--c-ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.score { --s: 80; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c-primary) calc(var(--s) * 1%), var(--c-primary-100) 0); position: relative; }
.score::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.score span { position: relative; font-weight: 800; font-size: 16px; color: var(--c-ink); }
.score--lg { width: 88px; height: 88px; }
.score--lg::before { inset: 8px; }
.score--lg span { font-size: 28px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 13px; color: var(--c-muted); padding: 14px 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #a3afbf; }
.breadcrumb a { color: var(--c-muted); }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card__body { padding: 18px; }
.card--hover { transition: box-shadow .2s, transform .2s; }
.card--hover:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* Product card */
.pcard { display: flex; flex-direction: column; overflow: hidden; }
.pcard__media { position: relative; background: linear-gradient(160deg, #f1f6f5, #e7eef3); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.pcard__media img { height: 80%; width: auto; max-width: 70%; object-fit: contain; }
.pcard__flags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.pcard__score { position: absolute; right: 10px; bottom: -22px; }
.pcard__body { padding: 26px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard__brand { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.pcard__name { font-size: 16px; font-weight: 700; margin: 0; }
.pcard__name a { color: var(--c-ink); }
.pcard__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 13px; color: var(--c-ink-2); margin: 4px 0; padding: 0; list-style: none; }
.pcard__specs b { color: var(--c-ink); white-space: nowrap; }
.pcard__price { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--c-line); }
.pcard__price strong { font-size: 18px; }
.pcard__price small { color: var(--c-muted); }
.pcard__actions { display: flex; gap: 8px; }
.pcard__actions .btn { flex: 1; }
.compare-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-ink-2); cursor: pointer; }

/* ---------- Hero ---------- */
.hero { background: radial-gradient(1200px 500px at 85% -10%, #d9efe8 0%, transparent 60%), linear-gradient(180deg, #fff, #f3f8f6); border-bottom: 1px solid var(--c-line); }
.hero__inner { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 56px; align-items: center; }
@media (min-width: 980px) { .hero__inner { grid-template-columns: 1.15fr .85fr; padding-top: 72px; padding-bottom: 72px; } }
.hero__eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--c-primary); background: var(--c-primary-50); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.hero h1 { margin-bottom: 16px; }
.hero h1 em { font-style: normal; color: var(--c-primary); }
.hero__lead { font-size: var(--fs-lg); color: var(--c-ink-2); max-width: 600px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero__stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 32px; }
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats strong { font-size: 24px; }
.hero__stats span { font-size: 13px; color: var(--c-muted); }

.quick-tool { padding: 22px; }
.quick-tool h2 { font-size: 20px; }
.quick-tool__result { margin-top: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--c-primary-50); display: none; }
.quick-tool__result.is-on { display: block; }
.quick-tool__result strong { font-size: 22px; color: var(--c-primary-700); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label, .field .label { font-size: 14px; font-weight: 600; color: var(--c-ink-2); }
.input, select.input, textarea.input { width: 100%; padding: 11px 12px; border: 1px solid #cfd8e3; border-radius: 10px; font: 15px var(--font); color: var(--c-ink); background: #fff; }
.input:focus { outline: 2px solid var(--c-primary-100); border-color: var(--c-primary); }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group span { white-space: nowrap; display: grid; place-items: center; padding: 0 12px; border: 1px solid #cfd8e3; border-left: 0; border-radius: 0 10px 10px 0; background: var(--c-bg); font-size: 14px; color: var(--c-muted); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { text-align: center; padding: 10px 6px; border: 1px solid #cfd8e3; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--c-ink-2); cursor: pointer; }
.seg input:checked + label { border-color: var(--c-primary); background: var(--c-primary-50); color: var(--c-primary-700); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--c-ink-2); }
.check input { margin-top: 3px; accent-color: var(--c-primary); }

/* ---------- Entry cards ---------- */
.entry { display: flex; gap: 16px; padding: 20px; align-items: flex-start; color: var(--c-ink); }
.entry:hover { text-decoration: none; }
.entry__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--c-primary-50); color: var(--c-primary); flex: none; }
.entry h3 { margin-bottom: 4px; }
.entry p { margin: 0; color: var(--c-muted); font-size: 14px; }
.entry__go { margin-top: 10px; font-weight: 600; font-size: 14px; color: var(--c-primary); }

/* ---------- Trust bar ---------- */
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 900px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust__item { display: flex; gap: 12px; align-items: center; }
.trust__item svg { color: var(--c-primary); flex: none; }
.trust__item strong { display: block; font-size: 15px; }
.trust__item span { font-size: 13px; color: var(--c-muted); }

/* ---------- Alert / callouts ---------- */
.alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); background: var(--c-accent-50); border: 1px solid #f6dca6; }
.alert svg { color: #b77400; flex: none; margin-top: 2px; }
.alert p { margin: 0; }
.alert--info { background: var(--c-partner-50); border-color: #c9d7ff; }
.alert--info svg { color: var(--c-partner); }
.callout { padding: 16px 18px; border-left: 4px solid var(--c-primary); background: var(--c-primary-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 20px 0; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-line); margin-bottom: 20px; overflow-x: auto; }
.tabs button { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 10px 14px; font: 600 15px var(--font); color: var(--c-muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tabpanel[hidden] { display: none; }

/* ---------- Brand / partner ---------- */
.partner { display: grid; gap: 24px; padding: 24px; align-items: center; }
@media (min-width: 900px) { .partner { grid-template-columns: 1.2fr 1fr; padding: 32px; } }
.partner__logo { font-weight: 900; font-size: 28px; letter-spacing: .08em; color: var(--c-ink); }
.brand-row { display: flex; flex-wrap: wrap; gap: 10px; }
.brand-chip { padding: 10px 16px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; font-weight: 700; color: var(--c-ink-2); font-size: 14px; }
.brand-chip:hover { border-color: var(--c-primary); text-decoration: none; color: var(--c-primary); }
.usp { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.usp li { display: flex; gap: 10px; align-items: flex-start; }
.usp svg { color: var(--c-good); flex: none; margin-top: 3px; }

/* ---------- VS cards ---------- */
.vs { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.vs__pair { display: flex; align-items: center; gap: 10px; }
.vs__side { flex: 1; text-align: center; padding: 12px 8px; background: var(--c-bg); border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; }
.vs__side small { display: block; font-weight: 500; color: var(--c-muted); }
.vs__x { font-weight: 800; color: var(--c-muted); font-size: 13px; }

/* ---------- Article cards ---------- */
.acard { overflow: hidden; display: flex; flex-direction: column; }
.acard__media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0e7c66, #134e6f); display: grid; place-items: center; color: rgba(255,255,255,.9); }
.acard__media--b { background: linear-gradient(135deg, #f2a516, #c2410c); }
.acard__media--c { background: linear-gradient(135deg, #1d4ed8, #0e7c66); }
.acard__media svg { width: 56px; height: 56px; }
.acard__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.acard__meta { font-size: 12px; color: var(--c-muted); display: flex; gap: 8px; }
.acard h3 { font-size: 17px; margin: 0; }
.acard h3 a { color: var(--c-ink); }
.acard p { font-size: 14px; color: var(--c-muted); margin: 0; }

/* ---------- Project cards ---------- */
.project { padding: 18px; }
.project__kpi { display: flex; gap: 16px; margin: 10px 0 0; }
.project__kpi div { flex: 1; background: var(--c-bg); border-radius: 8px; padding: 10px; }
.project__kpi strong { display: block; font-size: 18px; color: var(--c-primary-700); }
.project__kpi span { font-size: 12px; color: var(--c-muted); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, #0a5e4e, #0e7c66 55%, #13806c); color: #fff; border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 24px; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr 1fr; padding: 40px; align-items: center; } }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d5efe7; }
.cta-band .card { color: var(--c-ink); }

/* ---------- FAQ ---------- */
.faq details { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--c-primary); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 16px 14px; color: var(--c-ink-2); }

/* ---------- Layout with sidebar ---------- */
.with-sidebar { display: grid; gap: 24px; }
@media (min-width: 980px) { .with-sidebar { grid-template-columns: 280px 1fr; } .with-sidebar--right { grid-template-columns: 1fr 320px; } }
.filters { padding: 18px; align-self: start; }
@media (min-width: 980px) { .filters { position: sticky; top: 88px; } }
.filters h3 { font-size: 15px; margin: 18px 0 10px; }
.filters h3:first-child { margin-top: 0; }
.filters .check { margin-bottom: 8px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar select { width: auto; }

/* Compare tray */
.compare-tray { position: fixed; left: 50%; transform: translateX(-50%) translateY(140%); bottom: 76px; z-index: 60; background: var(--c-ink); color: #fff; border-radius: 14px; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .25s; max-width: calc(100% - 24px); }
@media (min-width: 900px) { .compare-tray { bottom: 20px; } }
.compare-tray { opacity: 0; visibility: hidden; }
.compare-tray.is-on { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
.compare-tray span { font-size: 14px; }

/* ---------- Product detail ---------- */
.pd { display: grid; gap: 28px; }
@media (min-width: 980px) { .pd { grid-template-columns: 1fr 1fr; gap: 40px; } }
.pd__gallery { background: linear-gradient(160deg, #f1f6f5, #e3ecf1); border-radius: var(--radius-lg); aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid var(--c-line); }
.pd__gallery img { width: 46%; }
.pd__thumbs { display: flex; gap: 10px; margin-top: 10px; }
.pd__thumbs button { width: 72px; height: 72px; border-radius: 10px; border: 1px solid var(--c-line); background: #fff; display: grid; place-items: center; cursor: pointer; }
.pd__thumbs button[aria-pressed="true"] { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-100); }
.pd__thumbs img { width: 60%; }
.pd__title { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.keyspecs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
@media (min-width: 560px) { .keyspecs { grid-template-columns: repeat(4, 1fr); } }
.keyspecs div { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; }
.keyspecs strong { display: block; font-size: 18px; }
.keyspecs span { font-size: 12px; color: var(--c-muted); }
.pricebox { padding: 18px; margin: 18px 0; }
.pricebox__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pricebox__price { font-size: 26px; font-weight: 800; }
.pricebox__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
table.spec th, table.spec td { padding: 11px 14px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }
table.spec th { width: 42%; color: var(--c-ink-2); font-weight: 500; background: #fafbfd; }
table.spec .group th { background: var(--c-bg); font-weight: 700; color: var(--c-ink); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
table.spec .na { color: var(--c-muted); font-style: italic; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { padding: 11px 14px; border-bottom: 1px solid var(--c-line); text-align: left; }
table.data thead th { background: var(--c-bg); font-size: 13px; color: var(--c-ink-2); text-transform: uppercase; letter-spacing: .04em; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Compare table */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 640px; }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.cmp thead th { background: #fff; vertical-align: top; }
.cmp__head .badge { align-self: flex-start; }
.cmp tbody th { color: var(--c-ink-2); font-weight: 500; background: #fafbfd; width: 200px; }
.cmp .is-best { background: var(--c-good-50); color: var(--c-good); font-weight: 700; }
.cmp .group th { background: var(--c-bg); font-weight: 700; color: var(--c-ink); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.cmp__head { display: flex; flex-direction: column; gap: 8px; }
.cmp__head img { width: 64px; }
.cmp__remove { font-size: 12px; color: var(--c-muted); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

/* ---------- Review ---------- */
.article { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 24px; }
@media (min-width: 760px) { .article { padding: 40px 48px; } }
.article h2 { margin-top: 1.6em; }
.article h2:first-child { margin-top: 0; }
.article p, .article li { color: var(--c-ink-2); }
.byline { display: flex; align-items: center; gap: 12px; margin: 16px 0 24px; font-size: 14px; color: var(--c-muted); flex-wrap: wrap; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary-100); color: var(--c-primary-700); display: grid; place-items: center; font-weight: 800; }
.disclosure { font-size: 14px; }
.verdict { display: grid; gap: 20px; padding: 22px; border-radius: var(--radius); border: 2px solid var(--c-primary); background: linear-gradient(180deg, #fff, var(--c-primary-50)); margin: 24px 0; }
@media (min-width: 760px) { .verdict { grid-template-columns: auto 1fr; } }
.verdict__who { display: grid; gap: 12px; }
@media (min-width: 560px) { .verdict__who { grid-template-columns: 1fr 1fr; } }
.verdict__who div { background: #fff; border-radius: 10px; padding: 12px 14px; border: 1px solid var(--c-line); font-size: 14px; }
.verdict__who strong { display: block; margin-bottom: 4px; }
.proscons { display: grid; gap: 16px; margin: 20px 0; }
@media (min-width: 680px) { .proscons { grid-template-columns: 1fr 1fr; } }
.proscons > div { border-radius: var(--radius); padding: 16px 18px; }
.proscons .pros { background: var(--c-good-50); }
.proscons .cons { background: var(--c-bad-50); }
.proscons h3 { font-size: 16px; }
.proscons ul { margin: 0; padding-left: 18px; }
.proscons li { margin-bottom: 6px; }
.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 64px; align-items: center; gap: 12px; font-size: 14px; }
.bar__track { height: 10px; background: var(--c-bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--c-line); }
.bar__fill { height: 100%; background: var(--c-primary); border-radius: 999px; }
.bar__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .bar { grid-template-columns: 1fr 56px; } .bar__track { grid-column: 1 / -1; order: 3; } }
.toc { padding: 18px; position: sticky; top: 88px; }
.toc ol { margin: 0; padding-left: 18px; font-size: 14px; }
.toc li { margin-bottom: 6px; }
.sources { font-size: 13px; color: var(--c-muted); }
.sources li { margin-bottom: 4px; }

/* ---------- Ranking list ---------- */
.rank { display: grid; gap: 16px; }
.rank__item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px; align-items: start; }
@media (min-width: 860px) { .rank__item { grid-template-columns: 44px 120px 1fr 220px; align-items: center; } }
.rank__no { font-size: 28px; font-weight: 800; color: var(--c-primary); line-height: 1; }
.rank__media { display: none; background: var(--c-bg); border-radius: 10px; aspect-ratio: 1 / 1; place-items: center; }
@media (min-width: 860px) { .rank__media { display: grid; } }
.rank__media img { width: 60%; }
.rank__side { display: flex; flex-direction: column; gap: 8px; grid-column: 2; }
@media (min-width: 860px) { .rank__side { grid-column: auto; align-items: stretch; } }

/* ---------- Calculator ---------- */
.calc { display: grid; gap: 24px; }
@media (min-width: 980px) { .calc { grid-template-columns: 1.1fr .9fr; } }
.appliances { display: grid; gap: 8px; }
.appliance { display: grid; grid-template-columns: auto 1fr 84px 132px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; font-size: 14px; }
.appliance input[type="number"] { width: 100%; padding: 6px 8px; border: 1px solid #cfd8e3; border-radius: 8px; font: 14px var(--font); }
.appliance__head { display: grid; grid-template-columns: 13px 1fr 84px 132px; gap: 10px; font-size: 12px; color: var(--c-muted); padding: 0 12px; }
.result { padding: 22px; position: sticky; top: 88px; align-self: start; }
.result__big { font-size: 40px; font-weight: 800; color: var(--c-primary-700); line-height: 1.1; }
.result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.result__grid div { background: var(--c-bg); border-radius: 10px; padding: 12px; }
.result__grid strong { display: block; font-size: 20px; }
.result__grid span { font-size: 12px; color: var(--c-muted); }
.formula { font-size: 13px; color: var(--c-muted); background: var(--c-bg); padding: 10px 12px; border-radius: 8px; }
.suggest { display: grid; gap: 10px; margin-top: 12px; }
.suggest a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-ink); font-size: 14px; }
.suggest a:hover { border-color: var(--c-primary); text-decoration: none; }

/* ---------- Steps form ---------- */
.steps { display: flex; gap: 8px; margin-bottom: 24px; }
.steps li { flex: 1; list-style: none; display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--c-muted); }
.steps ol { display: contents; }
.steps .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c-line); font-weight: 700; flex: none; background: #fff; }
.steps li.is-active { color: var(--c-ink); font-weight: 600; }
.steps li.is-active .n { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.steps li.is-done .n { border-color: var(--c-primary); color: var(--c-primary); }
.step[hidden] { display: none; }
.dropzone { border: 2px dashed #cfd8e3; border-radius: var(--radius); padding: 24px; text-align: center; color: var(--c-muted); background: #fafbfd; }
.form-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer { background: #0c1726; color: #b8c4d4; margin-top: 56px; font-size: 14px; }
.site-footer a { color: #d8e1ec; }
.footer-grid { display: grid; gap: 28px; padding: 48px 0 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-grid .logo { color: #fff; }
.footer-grid .logo__tag { color: #8fa0b5; }
.footer-grid h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-brand { grid-column: auto; } }
.footer-note { border-top: 1px solid #1f2d41; padding: 16px 0 24px; font-size: 13px; color: #8fa0b5; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- Mobile CTA bar ---------- */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--c-line); box-shadow: 0 -4px 16px rgba(15,27,45,.08); }
.mobile-cta a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; font-size: 12px; font-weight: 600; color: var(--c-ink-2); }
.mobile-cta a:hover { text-decoration: none; }
.mobile-cta a.is-primary { background: var(--c-primary); color: #fff; }
.mobile-cta a.is-zalo { color: #0068ff; }
@media (min-width: 900px) { .mobile-cta { display: none; } }
.float-zalo { display: none; }
@media (min-width: 900px) {
  .float-zalo { display: grid; place-items: center; position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 56px; height: 56px; border-radius: 50%; background: #0068ff; color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 8px 24px rgba(0,104,255,.35); }
  .float-zalo:hover { text-decoration: none; background: #0057d6; }
}

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: 16px; }
.flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.text-center { text-align: center; }
.page-head { padding: 8px 0 24px; }
.page-head p { color: var(--c-ink-2); max-width: 760px; }

.pt-0 { padding-top: 0; }
@media (max-width: 560px) { .appliance { grid-template-columns: auto 1fr; } .appliance > input[type=number], .appliance > span:last-child { grid-column: 2; } .appliance__head { display: none; } }

.flex > a:not(.btn) { display: inline-flex; align-items: center; gap: 6px; }
.alert .small, .alert p.small { margin: 0; }
.pd > *, .with-sidebar > *, .calc > *, .hero__inner > *, .grid > * { min-width: 0; }
.pd__title h1 { overflow-wrap: anywhere; }

/* =========================================================
   BỔ SUNG CHO WORDPRESS (theme ese) — phần trên giữ nguyên CSS của layout/
   ========================================================= */

/* ---------- Tiện ích & trợ năng ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.btn:focus-visible, .chip:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.mb-3 { margin-bottom: 24px; }
.h3 { font-size: var(--fs-lg); }
.h-card { font-size: 20px; }
.h-form { font-size: 30px; }
.container--narrow { max-width: 960px; }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.text-center .score--center, .score--center { margin: 0 auto; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 24px 0; }
.na { color: var(--c-muted); font-style: italic; }
.badge--ad { border-color: #e2e2e2; }
a.badge:hover { text-decoration: none; filter: brightness(.97); }

/* ---------- Header: menu WordPress, tìm kiếm, menu di động ---------- */
.nav .menu, .mobile-nav .menu { list-style: none; margin: 0; padding: 0; }
.mobile-nav .menu { padding: 8px var(--gutter) 16px; }
@media (min-width: 1080px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav a[aria-current="page"] { color: var(--c-primary); }
.search-panel { border-top: 1px solid var(--c-line); background: #fff; padding: 14px 0; }
.search-panel[hidden] { display: none; }
.search-form { display: flex; gap: 8px; }
.search-form .input { flex: 1; min-width: 0; }
.search-form .btn { flex: none; }
.search-page-form { max-width: 640px; margin-top: 12px; }
.icon-btn[aria-expanded="true"] { border-color: var(--c-primary); color: var(--c-primary); }

/* ---------- Footer ---------- */
.footer-title { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.footer-grid .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-bct img { max-height: 48px; width: auto; }

/* ---------- Danh mục, bộ lọc, khay so sánh ---------- */
.filters__title { font-size: 15px; margin: 18px 0 10px; }
.filters__title:first-child { margin-top: 0; }
.compare-tray__clear { background: transparent; color: #fff; }
.compare-tray__clear:hover { background: rgba(255,255,255,.08); }
.pcard[hidden] { display: none !important; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chips--scroll .chip { white-space: nowrap; }
a.chip:hover { text-decoration: none; border-color: var(--c-primary); color: var(--c-primary); }

/* ---------- So sánh ---------- */
.cmp__remove { font-size: 12px; color: var(--c-muted); }
.cmp__head img { width: 64px; height: auto; max-height: 96px; object-fit: contain; }
.cmp__note { padding: 10px 14px; margin: 0; }
.cmp-picker { margin-top: 4px; }
.cmp-picker select { max-width: 420px; }
.lead-verdict { font-size: var(--fs-lg); color: var(--c-ink); }

/* ---------- Thẻ bài viết có ảnh, thẻ đánh giá, thẻ thương hiệu ---------- */
a.acard__media:hover { text-decoration: none; }
.acard__media--img { background: var(--c-bg); overflow: hidden; }
.acard__media--img img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.rcard .pcard__media { color: inherit; }
.rcard .pcard__media:hover { text-decoration: none; }
.brand-card { display: flex; gap: 14px; align-items: center; padding: 16px 18px; color: var(--c-ink); }
.brand-card:hover { text-decoration: none; }
.brand-card__logo { width: 56px; height: 56px; border-radius: 12px; background: var(--c-primary-50); display: grid; place-items: center; overflow: hidden; flex: none; }
.brand-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-card__initial { font-weight: 800; font-size: 22px; color: var(--c-primary-700); }
.brand-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.partner__logo img { max-height: 48px; width: auto; }
.steps-grid { list-style: none; padding: 0; }

/* ---------- Trang thương hiệu, giải pháp ---------- */
.hero--compact .hero__inner { padding-top: 40px; padding-bottom: 48px; }
.proscons--stack { grid-template-columns: 1fr !important; margin: 0; }
.table-wrap--plain { border: 0; }

/* ---------- Chi tiết sản phẩm ---------- */
.pd__gallery img { width: 46%; height: auto; }
.pd__gallery img[src$=".jpg"], .pd__gallery img[src$=".jpeg"], .pd__gallery img[src$=".png"], .pd__gallery img[src$=".webp"] { width: 86%; max-height: 86%; object-fit: contain; }
.pd__thumbs img { width: 60%; height: auto; }
.pd__title .pcard__brand:hover { color: var(--c-primary); text-decoration: none; }
a.score:hover { text-decoration: none; box-shadow: 0 0 0 4px var(--c-primary-50); }
.bars--compact .bars { gap: 8px; }
.bars--compact .bar { grid-template-columns: 1fr 52px; font-size: 13px; gap: 4px 8px; }
.bars--compact .bar__track { grid-column: 1 / -1; order: 3; }

/* ---------- Bài viết, mục lục, tác giả ---------- */
.toc__sep { margin: 16px 0; }
.toc__price { font-size: 22px; font-weight: 800; }
.toc a.is-active { font-weight: 700; }
.related { padding-left: 18px; margin: 0; }
.related li { margin-bottom: 6px; }
.article__thumb { margin: 0 0 24px; }
.article__thumb img { border-radius: var(--radius); width: 100%; height: auto; }
.byline__name { color: var(--c-ink); font-weight: 700; }
.author-box { display: flex; gap: 14px; margin-top: 32px; padding: 18px; border-radius: var(--radius); background: var(--c-bg); }
.author-box .avatar { flex: none; }
.author-head { display: flex; gap: 18px; align-items: center; }
.avatar--lg { width: 72px; height: 72px; font-size: 24px; flex: none; }
.project__kpi--lg { max-width: 560px; }
.project h3 a { color: var(--c-ink); }

/* ---------- Trạng thái rỗng, 404, phân trang ---------- */
.empty-state { margin-bottom: 24px; }
.empty-state--404 { text-align: center; padding: 40px 24px; }
.empty-state--404 .search-form { max-width: 520px; margin: 0 auto; }
.empty-state--404 .chips { justify-content: center; }
.eyebrow-404 { font-size: 64px; font-weight: 800; color: var(--c-primary); line-height: 1; margin-bottom: 8px; }
.pagination { margin-top: 28px; }
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; padding: 0 12px; align-items: center; justify-content: center; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; color: var(--c-ink-2); font-weight: 600; font-size: 14px; }
.pagination a.page-numbers:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.pagination .current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pagination .dots { border: 0; background: transparent; }

/* ---------- Liên hệ ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; }
.contact-list svg { color: var(--c-primary); flex: none; margin-top: 3px; }

/* ---------- Máy tính ---------- */
.seg--2 { grid-template-columns: 1fr 1fr; }
.appliance__qh { gap: 4px; flex-wrap: nowrap; }
.appliance__name { width: 100%; padding: 6px 8px; border: 1px solid #cfd8e3; border-radius: 8px; font: 14px var(--font); min-width: 0; }

/* =========================================================
   Nội dung soạn bằng Gutenberg (.entry-content)
   Chỉ áp cho con trực tiếp của nội dung và của khối nhóm/cột/chi tiết — KHÔNG lan vào
   thành phần do shortcode sinh ra (thẻ sản phẩm, máy tính, bảng so sánh…).
   ========================================================= */
img { height: auto; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }
:is(.entry-content, .entry-content .wp-block-group, .entry-content .wp-block-column, .entry-content .wp-block-details) > h2 { margin-top: 1.6em; }
:is(.entry-content, .entry-content .wp-block-group, .entry-content .wp-block-column, .entry-content .wp-block-details) > h3 { margin-top: 1.4em; }
:is(.entry-content .wp-block-group, .entry-content .wp-block-column) > :is(h2, h3):first-child { margin-top: 0; }
:is(.entry-content, .entry-content .wp-block-group, .entry-content .wp-block-column, .entry-content .wp-block-details) > :is(ul, ol) { padding-left: 22px; margin: 0 0 1em; }
:is(.entry-content, .entry-content .wp-block-group, .entry-content .wp-block-column, .entry-content .wp-block-details) > :is(ul, ol) > li { margin-bottom: 6px; color: var(--c-ink-2); }
:is(.entry-content, .entry-content .wp-block-group, .entry-content .wp-block-column, .entry-content .wp-block-details) > p { color: var(--c-ink-2); }
.entry-content .wp-block-image img { border-radius: var(--radius-sm); }
.entry-content figure { margin: 24px 0; }
.entry-content figcaption, .entry-content .wp-element-caption { font-size: 13px; color: var(--c-muted); margin-top: 8px; text-align: center; }
.entry-content blockquote, .entry-content .wp-block-quote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--c-primary); color: var(--c-ink); }
.entry-content blockquote cite { display: block; font-size: 13px; color: var(--c-muted); font-style: normal; margin-top: 6px; }
.entry-content .wp-block-separator { border: 0; border-top: 1px solid var(--c-line); margin: 28px 0; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }
.entry-content .alignleft { float: left; margin: 0 20px 12px 0; }
.entry-content .alignright { float: right; margin: 0 0 12px 20px; }
.entry-content--home { max-width: 860px; }
.entry-content--home > h2:first-child { text-align: center; }
.entry-content--wide { max-width: 960px; }
.entry-content--full > .calc, .entry-content--full > [data-tabs] { margin-top: 0; }
h2, h3 { scroll-margin-top: 90px; }

/* Dải CTA nằm trong bài: giữ chữ sáng (layout có .article p tô màu tối) */
.article .cta-band p, .entry-content .cta-band p { color: #d5efe7; }
.cta-band h2, .article .cta-band h2 { color: #fff; margin-top: 0; }

/* Bảng */
.entry-content .wp-block-table { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content .wp-block-table th, .entry-content .wp-block-table td { padding: 11px 14px; border: 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.entry-content .wp-block-table tr:last-child td { border-bottom: 0; }
.entry-content .wp-block-table thead, .entry-content .wp-block-table tfoot { border: 0; }
.entry-content .wp-block-table thead th, .entry-content .wp-block-table thead td { background: var(--c-bg); font-size: 13px; color: var(--c-ink-2); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--c-line); }
.entry-content .wp-block-table .has-text-align-right, .entry-content .wp-block-table [data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.entry-content .wp-block-table.is-style-spec td:first-child { width: 42%; color: var(--c-ink-2); font-weight: 500; background: #fafbfd; }
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: #fafbfd; }
/* Bảng nhiều cột trên điện thoại: cột co theo nội dung, chỉ xuống dòng ở dấu cách (core "has-fixed-layout" ép cột đều
   và cắt cả số "1.146" thành "1.14/6"); bảng rộng hơn khung thì cuộn ngang trong khung viền */
.entry-content .wp-block-table table.has-fixed-layout { table-layout: auto; }
.entry-content .wp-block-table table th, .entry-content .wp-block-table table td { word-break: normal; overflow-wrap: normal; }
@media (max-width: 640px) {
  .entry-content .wp-block-table table th, .entry-content .wp-block-table table td { padding: 9px 10px; font-size: 14px; min-width: 5em; }
  .entry-content .wp-block-table table tr > :first-child { min-width: 7em; }
  .entry-content .wp-block-table thead th, .entry-content .wp-block-table thead td { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
}
/* Điện thoại: khung bài viết/bài đánh giá tràn hết bề ngang (chữ, bảng, biểu đồ rộng thêm ~50px) */
@media (max-width: 560px) {
  .with-sidebar > .article { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; padding: 22px var(--gutter); }
  .site-footer .footer-grid { column-gap: 16px; }
  .site-footer .footer-title, .site-footer .footer-grid h4 { font-size: 13px; letter-spacing: .03em; }
}
/* Ảnh/biểu đồ trong bài bấm mở bản gốc để phóng to */
.entry-content .wp-block-image a { display: block; cursor: zoom-in; }

/* Nút khối */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; font: 600 15px/1.2 var(--font); background: var(--c-primary); color: #fff; border: 1px solid transparent; }
.wp-block-button__link:hover { background: var(--c-primary-700); text-decoration: none; color: #fff; }
.wp-block-button.is-style-accent .wp-block-button__link { background: var(--c-accent); color: #3d2600; }
.wp-block-button.is-style-zalo .wp-block-button__link { background: #0068ff; color: #fff; }
.wp-block-button.is-style-ghost .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { background: #fff; color: var(--c-ink); border-color: var(--c-line); }

/* Kiểu khối nhóm */
.entry-content .is-style-callout, .is-style-callout { padding: 16px 18px; border-left: 4px solid var(--c-primary); background: var(--c-primary-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 20px 0; }
.is-style-alert { padding: 16px 18px; border-radius: var(--radius); background: var(--c-accent-50); border: 1px solid #f6dca6; margin: 20px 0; }
.is-style-disclosure { padding: 16px 18px; border-radius: var(--radius); background: var(--c-partner-50); border: 1px solid #c9d7ff; margin: 20px 0; font-size: 14px; }
.is-style-pros, .is-style-cons { border-radius: var(--radius); padding: 16px 18px; }
.is-style-pros { background: var(--c-good-50); }
.is-style-cons { background: var(--c-bad-50); }
.is-style-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 18px; }
.is-style-callout > :last-child, .is-style-alert > :last-child, .is-style-disclosure > :last-child, .is-style-pros > :last-child, .is-style-cons > :last-child, .is-style-card > :last-child { margin-bottom: 0; }
.entry-content .wp-block-columns { display: grid; gap: 16px; margin: 20px 0; }
@media (min-width: 680px) { .entry-content .wp-block-columns { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } }
.entry-content .wp-block-column > :first-child { margin-top: 0; }
.entry-content .wp-block-column h3 { font-size: 16px; }

/* Danh sách */
.entry-content .is-style-sources { font-size: 13px; color: var(--c-muted); }
.entry-content :is(ul, ol).is-style-sources > li { color: var(--c-muted); margin-bottom: 4px; }
.entry-content :is(ul, ol).is-style-check { list-style: none; padding-left: 0; }
.entry-content .is-style-check li { position: relative; padding-left: 28px; }
.entry-content .is-style-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* Đoạn văn */
.is-style-lead { font-size: var(--fs-lg); color: var(--c-ink) !important; }
.is-style-note { font-size: 13px; color: var(--c-muted) !important; }

/* Hỏi đáp (core/details kiểu FAQ) — giống .faq của layout */
.wp-block-details { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm); margin: 0 0 10px; }
.wp-block-details summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--c-ink); }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--c-primary); }
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > :not(summary) { padding: 0 16px; color: var(--c-ink-2); }
.wp-block-details > :last-child { padding-bottom: 14px; margin-bottom: 0; }

/* Shortcode trong bài */
.entry-content .grid, .entry-content .table-wrap, .entry-content .cta-band, .entry-content .bars { margin: 20px 0; }
.entry-content .table-wrap table { margin: 0; }

/* =========================================================
   Contact Form 7 (đã tắt CSS mặc định của CF7)
   ========================================================= */
.wpcf7 { position: relative; }
.wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; }
.wpcf7 .hidden-fields-container { display: none; border: 0; margin: 0; padding: 0; }
.wpcf7-form-control-wrap { position: relative; display: block; }
.input-group .wpcf7-form-control-wrap { flex: 1; min-width: 0; display: block; padding: 0; border: 0; border-radius: 0; background: none; white-space: normal; }
.input-group .wpcf7-form-control-wrap .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wpcf7-not-valid-tip { display: block; color: var(--c-bad); font-size: 13px; margin-top: 4px; font-weight: 500; }
.input.wpcf7-not-valid, .wpcf7-not-valid .input { border-color: var(--c-bad); }
.wpcf7-list-item { display: block; margin: 0; }
.wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; border: 1px solid var(--c-line); }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output { background: var(--c-good-50); border-color: #c4e8cf; color: var(--c-good); }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { background: var(--c-bad-50); border-color: #f5c9ad; color: var(--c-bad); }
.wpcf7 form.spam .wpcf7-response-output { background: var(--c-accent-50); border-color: #f6dca6; color: #7a4b00; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { background: var(--c-accent-50); border-color: #f6dca6; color: #7a4b00; }
.wpcf7-spinner { visibility: hidden; display: inline-block; width: 22px; height: 22px; margin: 0 0 0 10px; vertical-align: middle; border: 3px solid var(--c-primary-100); border-top-color: var(--c-primary); border-radius: 50%; animation: ese-spin 0.8s linear infinite; }
.wpcf7 form.submitting .wpcf7-spinner { visibility: visible; }
@keyframes ese-spin { to { transform: rotate(360deg); } }
.wpcf7 [inert] { opacity: .5; }
.wpcf7 .wpcf7-submit:disabled { cursor: not-allowed; opacity: .6; }
.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 input[type="url"] { direction: ltr; }
.wpcf7-acceptance label, .wpcf7-checkbox label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--c-ink-2); cursor: pointer; }
.wpcf7-acceptance input, .wpcf7-checkbox input { margin-top: 3px; accent-color: var(--c-primary); flex: none; }
.cta-band .wpcf7-acceptance label { color: var(--c-ink-2); }
.form-card .field:last-of-type { margin-bottom: 14px; }
.form-card--lg { padding: 28px; }
.ese-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Ô chọn dạng nút (radio CF7) */
.seg-cf7 .wpcf7-radio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg-cf7 .wpcf7-list-item label { display: block; cursor: pointer; position: relative; }
.seg-cf7 .wpcf7-list-item input { position: absolute; opacity: 0; pointer-events: none; }
.seg-cf7 .wpcf7-list-item-label { display: block; text-align: center; padding: 10px 6px; border: 1px solid #cfd8e3; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--c-ink-2); }
.seg-cf7 input:checked + .wpcf7-list-item-label { border-color: var(--c-primary); background: var(--c-primary-50); color: var(--c-primary-700); }
.seg-cf7 input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Form nhiều bước */
.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.dropzone { display: block; cursor: pointer; }
.dropzone svg { margin: 0 auto 6px; color: var(--c-primary); }
.dropzone.is-drag { border-color: var(--c-primary); background: var(--c-primary-50); }
.dropzone [data-file-name] { display: block; margin-top: 8px; font-weight: 600; color: var(--c-ink); }
.form-success { text-align: center; padding: 24px 8px; }
.form-success svg { color: var(--c-good); margin: 0 auto 10px; }
.form-success h2 { font-size: 22px; }
.wpcf7 .form-nav .wpcf7-spinner { position: absolute; right: -32px; top: 10px; margin: 0; }
.wpcf7 .form-nav > :last-child { position: relative; }
@media (max-width: 520px) { .steps li { font-size: 12px; } .steps .n { width: 24px; height: 24px; } }

/* =========================================================
   Thanh demo, in ấn
   ========================================================= */
@media print {
  .site-header, .site-footer, .mobile-cta, .float-zalo, .demo-bar, .compare-tray, .toc, .cta-band { display: none !important; }
  body { background: #fff; padding: 0; }
  .article { border: 0; padding: 0; }
}
.compare-tray .is-disabled { opacity: .65; }

/* Sửa sau kiểm tra giao diện (04/10/2026) */
.with-sidebar > aside.card { align-self: start; }
.keyspecs strong { font-size: 17px; letter-spacing: -.01em; }
.grid--form { gap: 0 12px; }
.field--consent { margin: 4px 0 14px; }
.rank__media img { width: 60%; height: auto; max-height: 86%; object-fit: contain; }
/* Chân trang: .footer-grid/.footer-note ghi đè padding ngang của .container (lỗi gốc layout) -> chữ dính mép trên di động */
.footer-grid { padding: 48px var(--gutter) 32px; }
.footer-note { padding: 16px var(--gutter) 24px; }
/* Nút trong hộp giá: màn hẹp xếp dọc, không tràn khung */
.pricebox__actions .btn { min-width: 0; white-space: normal; text-align: center; }
@media (max-width: 440px) { .pricebox__actions { grid-template-columns: 1fr; } }
/* Bộ lọc danh mục: trên di động thu gọn thành nút "Bộ lọc" (chỉ khi có JS) */
.filters__toggle { display: none; }
@media (max-width: 979px) {
  .has-js .filters__toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: 0; padding: 0; font: 700 15px var(--font); color: var(--c-ink); cursor: pointer; }
  .has-js .filters__toggle::after { content: "+"; font-size: 20px; line-height: 1; color: var(--c-primary); }
  .has-js .filters.is-open .filters__toggle::after { content: "–"; }
  .has-js .filters__body { display: none; margin-top: 14px; }
  .has-js .filters.is-open .filters__body { display: block; }
}
/* Bảng so sánh: cột nhãn đứng yên khi vuốt ngang; màn hẹp thu nhỏ cột nhãn */
.cmp tbody th[scope="row"], .cmp thead th:first-child { position: sticky; left: 0; z-index: 2; }
.cmp thead th:first-child { background: #fff; }
.cmp tbody tr.group th { position: static; }
.cmp__head .badge { white-space: nowrap; }
@media (max-width: 679px) {
  .cmp { min-width: 0; font-size: 13px; }
  .cmp tbody th[scope="row"], .cmp thead th:first-child { width: 118px; min-width: 118px; padding: 10px; box-shadow: 1px 0 0 var(--c-line); }
  .cmp td, .cmp thead th { min-width: 150px; padding: 10px; }
  .pcard__media { aspect-ratio: 16 / 9; }
}
/* Biểu tượng trong tiêu đề nhỏ của hộp kết luận nằm cùng dòng với chữ */
.verdict__who strong svg { display: inline-block; vertical-align: -3px; margin-right: 4px; }
/* Byline trên màn hẹp: avatar + tên một hàng, ngày/thời gian đọc xuống hàng, bỏ dấu chấm ngăn */
@media (max-width: 560px) {
  .byline > span:nth-child(2) { flex: 1 1 220px; min-width: 0; }
  .byline { gap: 2px 10px; }
  .byline > span[aria-hidden="true"]:not(.avatar) { display: none; }
  .byline > span:nth-child(n+4) { font-size: 13px; }
  .byline > span:nth-child(n+4):not(:last-child)::after { content: " ·"; }
}
/* Hộp giá: còn một nút (chưa có Zalo) thì nút trải hết hàng */
.pricebox__actions > :only-child { grid-column: 1 / -1; }

/* =========================================================
   PHẦN 3 — LỚP THIẾT KẾ CAO CẤP (04/10/2026)
   Nền tối navy → xanh ngọc có quầng sáng + lưới mờ cho hero / khối nhấn / đầu trang danh mục;
   nhấn vàng gradient; thẻ bo tròn, bóng mềm; section xen kẽ trắng / ngà xanh.
   Chỉ ghi đè phần 1–2, không đổi class (an toàn khi sửa layout gốc).
   ========================================================= */
:root {
  --c-navy: #07131f;
  --c-emerald-bright: #17b38f;
  --c-mint: #7ce8c7;
  --c-gold: #e3a93c;
  --c-gold-soft: #f6d58f;
  --c-bg: #f2f6f4;
  --c-on-dark: #d6e5e0;
  --c-on-dark-muted: #9ab6ad;
  --grad-brand: linear-gradient(135deg, #17b38f 0%, #0e7c66 52%, #0a5e4e 100%);
  --grad-gold: linear-gradient(135deg, #f7da97 0%, #e3a93c 55%, #c7871f 100%);
  --grad-dark: radial-gradient(1100px 520px at 85% -12%, rgba(23, 179, 143, .30), transparent 60%),
               radial-gradient(760px 460px at -8% 118%, rgba(227, 169, 60, .15), transparent 60%),
               linear-gradient(165deg, #06111c 0%, #0a1f2d 46%, #05392f 100%);
  --grid-lines: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  --shadow-sm: 0 1px 2px rgba(7, 19, 31, .05);
  --shadow: 0 1px 2px rgba(7, 19, 31, .04), 0 12px 32px -16px rgba(7, 19, 31, .20);
  --shadow-lg: 0 34px 80px -30px rgba(4, 20, 28, .50), 0 14px 30px -18px rgba(4, 20, 28, .28);
  --radius: 16px;
  --radius-lg: 22px;
}
body { background: var(--c-bg); }
h1, h2, h3 { letter-spacing: -.02em; }
h1, h2 { font-weight: 800; }
::selection { background: #bdf0e0; color: #052e25; }

/* ---------- Header ---------- */
.site-header { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(7, 19, 31, .06); }
.site-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #0a5e4e, #17b38f 45%, #e3a93c); }
.nav a { font-weight: 600; }
.nav a[aria-current="page"] { background: var(--c-primary-50); color: var(--c-primary-700); }
.logo__mark { border-radius: 10px; box-shadow: 0 8px 18px -8px rgba(14, 124, 102, .7); }
.logo__name { letter-spacing: .06em; }

/* ---------- Nút ---------- */
.btn { border-radius: 12px; font-weight: 700; }
.btn--primary, .btn--primary:hover { background: var(--grad-brand); color: #fff; box-shadow: 0 12px 26px -14px rgba(14, 124, 102, .95), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--accent, .btn--accent:hover { background: var(--grad-gold); color: #2b1a00; box-shadow: 0 12px 26px -14px rgba(199, 135, 31, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn--accent:hover { filter: brightness(1.05); }
.btn--ghost { border-color: rgba(7, 19, 31, .12); box-shadow: var(--shadow-sm); }
.btn--zalo { box-shadow: 0 12px 26px -14px rgba(0, 104, 255, .9); }
.icon-btn { border-radius: 12px; border-color: rgba(7, 19, 31, .1); }

/* ---------- Thẻ ---------- */
.card { border: 1px solid rgba(7, 19, 31, .07); border-radius: var(--radius); box-shadow: var(--shadow); }
.card--hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(14, 124, 102, .28); }
.badge { border-radius: 999px; }
.badge--partner { background: linear-gradient(135deg, #eef3ff, #e3ebff); }

/* ---------- Section xen kẽ ---------- */
.section { padding: 72px 0; }
.section--tight { padding: 36px 0; }
.section--white { background: #fff; }
.section--dark, .hero, .page-hero, .cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--grad-dark); color: var(--c-on-dark); }
.section--dark::before, .hero::before, .page-hero::before, .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grid-lines); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 90% at 72% 8%, #000 8%, transparent 72%);
          mask-image: radial-gradient(75% 90% at 72% 8%, #000 8%, transparent 72%);
}
.hero::after, .cta-band::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  width: 620px; height: 620px; right: -180px; top: -260px;
  background: radial-gradient(circle, rgba(23, 179, 143, .34), transparent 62%);
}
:is(.section--dark, .hero, .page-hero, .cta-band) :is(h1, h2, h3) { color: #fff; }
/* Thẻ trắng đặt trên nền tối: giữ chữ tối */
:is(.section--dark, .hero, .page-hero, .cta-band) .card { color: var(--c-ink); }
:is(.section--dark, .hero, .page-hero, .cta-band) .card :is(h1, h2, h3) { color: var(--c-ink); }
.section__head { margin-bottom: 28px; }
.section__head h2 { font-size: clamp(26px, 3.1vw, 36px); }
.section__head h2::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--grad-gold); margin-bottom: 14px; }
.section--dark .section__head p { color: var(--c-on-dark-muted); }
:is(.section--dark, .hero, .page-hero, .cta-band) .btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .22); box-shadow: none; backdrop-filter: blur(6px); }
:is(.section--dark, .hero, .page-hero, .cta-band) .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--c-mint); color: #fff; }
:is(.hero, .page-hero) .breadcrumb, :is(.hero, .page-hero) .breadcrumb a { color: var(--c-on-dark-muted); }
:is(.hero, .page-hero) .breadcrumb li + li::before { color: #4f6c64; }
:is(.section--dark, .hero, .page-hero) .badge--partner { background: rgba(227, 169, 60, .14); color: var(--c-gold-soft); border-color: rgba(227, 169, 60, .4); }
:is(.section--dark, .hero, .page-hero) .card { border-color: transparent; box-shadow: var(--shadow-lg); }

/* ---------- Hero ---------- */
.hero { border-bottom: 0; }
.hero__inner { padding-top: 80px; padding-bottom: 88px; }
.home .hero__inner { padding-top: 88px; padding-bottom: 128px; }
.hero--compact .hero__inner { padding-top: 40px; padding-bottom: 64px; }
.hero h1 { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.08; letter-spacing: -.03em; }
.hero h1 em, .page-hero h1 em { background: linear-gradient(90deg, #7ce8c7 0%, #f6d58f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { color: var(--c-on-dark-muted); font-size: 19px; }
.hero__eyebrow { background: rgba(124, 232, 199, .1); color: #a6f2da; border: 1px solid rgba(124, 232, 199, .25); backdrop-filter: blur(8px); }
.hero__stats { gap: 0; }
.hero__stats > div { padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, .12); }
.hero__stats > div:first-child { padding-left: 0; border-left: 0; }
.hero__stats strong { font-size: 36px; font-weight: 800; letter-spacing: -.02em; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__stats span { color: var(--c-on-dark-muted); }
.hero > .container > div:first-child p a { color: var(--c-mint); }
.quick-tool { position: relative; border-radius: 22px; padding: 28px; }
.quick-tool::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 22px 22px 0 0; background: var(--grad-brand); }
.quick-tool h2 { font-size: 22px; color: var(--c-ink); }
.quick-tool__result { background: linear-gradient(135deg, #e9f7f2, #f6fbf9); border: 1px solid rgba(14, 124, 102, .15); }

/* Dải cam kết nổi đè lên hero (trang chủ) */
.trust-strip { position: relative; z-index: 3; margin-top: -72px; }
.trust-strip .trust { background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); padding: 26px 30px; border: 1px solid rgba(7, 19, 31, .05); }
.trust__item svg { box-sizing: content-box; width: 24px; height: 24px; padding: 11px; border-radius: 14px; background: linear-gradient(135deg, #e6f6f0, #d3eee5); color: var(--c-primary-700); }

/* ---------- Đầu trang danh mục (nền tối) ---------- */
.page-hero { margin-bottom: 40px; }
.page-hero .page-head { padding: 10px 0 48px; }
.page-hero h1 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.03em; }
.page-hero .page-head p { color: var(--c-on-dark-muted); }
.page-hero .lead-verdict { color: #e7f1ee; }
.page-hero .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .15); color: var(--c-on-dark); }
.page-hero a.chip:hover { border-color: var(--c-mint); color: #fff; }
.page-hero .chip[aria-current="page"] { background: #fff; border-color: #fff; color: var(--c-primary-700); }
.page-hero .byline { color: var(--c-on-dark-muted); }
.page-hero .byline__name { color: #fff; }
.page-hero .avatar { background: rgba(124, 232, 199, .16); color: #a6f2da; }
.page-hero .alert--info { background: rgba(124, 232, 199, .07); border-color: rgba(124, 232, 199, .22); color: var(--c-on-dark); }
.page-hero .alert--info svg { color: var(--c-mint); }
.page-hero .page-head a:not(.chip):not(.btn) { color: var(--c-mint); }
.page-hero .small.muted, .page-hero .muted { color: var(--c-on-dark-muted); }

/* ---------- Thẻ lối vào, thông báo ---------- */
.entry { padding: 24px; }
.entry__icon { width: 52px; height: 52px; border-radius: 15px; background: var(--grad-brand); color: #fff; box-shadow: 0 12px 24px -14px rgba(14, 124, 102, 1); }
.entry h3 { font-size: 18px; }
.alert { border-radius: 16px; background: linear-gradient(90deg, #fff6e3, #fffbf2); border-color: #f1d9a3; box-shadow: var(--shadow-sm); }

/* ---------- Tab dạng viên ---------- */
.tabs { display: inline-flex; max-width: 100%; gap: 4px; padding: 5px; margin-bottom: 26px; background: #e7efec; border: 1px solid rgba(7, 19, 31, .05); border-bottom: 1px solid rgba(7, 19, 31, .05); border-radius: 999px; }
.tabs button { border-radius: 999px; border-bottom: 0; padding: 9px 18px; color: var(--c-ink-2); }
.tabs button:hover { color: var(--c-primary-700); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--c-primary-700); box-shadow: 0 2px 10px -3px rgba(7, 19, 31, .22); }

/* ---------- Thẻ sản phẩm, vòng điểm ---------- */
.pcard { border-radius: 18px; }
.pcard__media { background: radial-gradient(120% 95% at 50% 8%, #ffffff 0%, #eef5f2 52%, #e0ebe7 100%); }
.pcard__brand { color: var(--c-primary-700); letter-spacing: .09em; }
.pcard__name a:hover { color: var(--c-primary); text-decoration: none; }
.pcard__price strong { font-size: 20px; letter-spacing: -.01em; }
.score { background: conic-gradient(#17b38f 0%, #0a5e4e calc(var(--s) * 1%), #e1ebe7 0); box-shadow: 0 8px 18px -10px rgba(14, 124, 102, .8); }
.score span { font-weight: 800; }

/* ---------- Khối đối tác trên nền tối ---------- */
.section--dark .partner { background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; backdrop-filter: blur(8px); color: var(--c-on-dark); }
.section--dark .partner__logo { color: #fff; letter-spacing: .14em; }
.section--dark :is(.muted, .small.muted) { color: var(--c-on-dark-muted); }
.section--dark .usp li { color: #e3efeb; }
.section--dark .usp svg { color: var(--c-mint); }
.section--dark .brand-chip { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .13); color: #e3efeb; }
.section--dark .brand-chip:hover { border-color: var(--c-gold); color: var(--c-gold-soft); }

/* ---------- So sánh, bài viết ---------- */
.vs { border-radius: 18px; padding: 20px; }
.vs__side { background: linear-gradient(180deg, #f6faf8, #ecf3f0); border: 1px solid rgba(7, 19, 31, .05); color: var(--c-ink); }
.vs__x { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: #2b1a00; font-size: 11px; box-shadow: 0 8px 16px -8px rgba(199, 135, 31, .9); }
.acard { border-radius: 18px; }
.acard__media { background: radial-gradient(90% 120% at 85% 0%, rgba(124, 232, 199, .38), transparent 58%), linear-gradient(135deg, #0a5e4e, #0b2333); }
.acard__media--b { background: radial-gradient(90% 120% at 85% 0%, rgba(246, 213, 143, .45), transparent 58%), linear-gradient(135deg, #9a6514, #2a1e10); }
.acard__media--c { background: radial-gradient(90% 120% at 85% 0%, rgba(147, 197, 253, .4), transparent 58%), linear-gradient(135deg, #173f78, #0a3a33); }
.acard__media svg { box-sizing: content-box; width: 30px; height: 30px; padding: 17px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.acard h3 a:hover, .project h3 a:hover { color: var(--c-primary); text-decoration: none; }

/* ---------- Dải CTA ---------- */
.cta-band { border-radius: 28px; border: 1px solid rgba(255, 255, 255, .06); box-shadow: var(--shadow-lg); }
.cta-band::after { right: -120px; top: -300px; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(26px, 3vw, 36px); }
.cta-band p, .article .cta-band p, .entry-content .cta-band p { color: var(--c-on-dark-muted); }
.cta-band .card { box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .7); border: 0; }

/* ---------- Hỏi đáp ---------- */
.wp-block-details { border-radius: 14px; border-color: rgba(7, 19, 31, .08); box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s; }
.wp-block-details[open] { border-color: rgba(14, 124, 102, .35); box-shadow: var(--shadow); }
.wp-block-details summary::after { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary-50); font-size: 18px; }

/* ---------- Chi tiết sản phẩm, bài đánh giá, xếp hạng ---------- */
.pd__gallery { background: radial-gradient(110% 90% at 50% 12%, #ffffff 0%, #edf4f1 55%, #dce8e3 100%); border-color: rgba(7, 19, 31, .06); border-radius: 26px; box-shadow: var(--shadow); }
.keyspecs div { border-radius: 14px; border-color: rgba(7, 19, 31, .06); box-shadow: var(--shadow-sm); }
.keyspecs strong { color: var(--c-primary-700); }
.pricebox { border-color: rgba(14, 124, 102, .2); background: linear-gradient(180deg, #ffffff, #f4faf7); }
.pricebox__price { font-size: 30px; letter-spacing: -.02em; }
.verdict { border: 0; background: linear-gradient(135deg, #f2faf6, #e3f2ec); box-shadow: inset 0 0 0 2px rgba(14, 124, 102, .25); border-radius: 20px; }
.article { border-color: rgba(7, 19, 31, .06); box-shadow: var(--shadow); border-radius: 24px; }
.rank__item { border-radius: 20px; }
.rank__item:nth-child(-n+3) .rank__no { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank__media { background: radial-gradient(110% 90% at 50% 10%, #fff, #e6efeb); }
.table-wrap { border-color: rgba(7, 19, 31, .07); box-shadow: var(--shadow-sm); }

/* ---------- Chân trang ---------- */
.site-footer { position: relative; background: radial-gradient(900px 420px at 88% -10%, rgba(23, 179, 143, .18), transparent 60%), #06111c; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 232, 199, .55), rgba(227, 169, 60, .55), transparent); }
.site-footer a:hover { color: var(--c-mint); text-decoration: none; }
.footer-title { letter-spacing: .1em; }

/* ---------- Di động ---------- */
@media (max-width: 979px) {
  .hero__inner { padding-top: 48px; padding-bottom: 104px; }
  .section { padding: 52px 0; }
  .trust-strip { margin-top: -64px; }
  .trust-strip .trust { padding: 18px; gap: 16px; }
  .hero__stats > div { padding: 0 16px; }
}
@media (max-width: 560px) {
  .hero__stats strong { font-size: 28px; }
  .trust__item svg { padding: 9px; }
}

/* Chân trang sát nội dung; trang thường chừa khoảng dưới (trang chủ kết thúc bằng section nền trắng) */
.site-footer { margin-top: 0; }
main#main { padding-bottom: 72px; }
.home main#main { padding-bottom: 0; }
/* Tinh chỉnh lớp cao cấp */
.section { position: relative; }                 /* section sau phủ lên bóng của khối nổi section trước */
.quick-tool { overflow: hidden; }
.quick-tool::before { border-radius: 0; }
.vs__pair { align-items: stretch; }
.vs__side { display: flex; flex-direction: column; justify-content: center; }
.entry-content--home > h2:first-child::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--grad-gold); margin: 0 auto 14px; }
.alert--info { background: linear-gradient(90deg, #eef3ff, #f7f9ff); border-color: #cfdcfb; }
.rank { list-style: none; padding: 0; margin: 0; }
.bar__fill { background: var(--grad-brand); }
.bar__track { background: #e9f0ed; border-color: rgba(7, 19, 31, .05); }
/* Tiêu đề section không dùng section__head cũng có vạch vàng */
.section > .container > h2:first-child::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--grad-gold); margin-bottom: 14px; }
/* Ô kết quả máy tính: nền tối, số gradient */
.calc .result { background: var(--grad-dark); color: var(--c-on-dark); border: 0; box-shadow: var(--shadow-lg); }
.calc .result :is(.small.muted, .muted) { color: var(--c-on-dark-muted); }
.calc .result h3 { color: #fff; }
.result__big { background: linear-gradient(90deg, #7ce8c7, #f6d58f); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 46px; }
.calc .result .result__grid div { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.calc .result .result__grid strong { color: #fff; }
.calc .result .result__grid span { color: var(--c-on-dark-muted); }
.calc .result .formula { background: rgba(255, 255, 255, .05); color: var(--c-on-dark-muted); }
.calc .result .suggest a { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e7f1ee; }
.calc .result .suggest a:hover { border-color: var(--c-mint); }
.calc .result a:not(.btn) { color: var(--c-mint); }
.calc .result .suggest a { color: #e7f1ee; }
/* Thẻ nền tối dùng lại được (cột phải trang báo giá / liên hệ) */
.card--dark { position: relative; isolation: isolate; overflow: hidden; background: var(--grad-dark); color: var(--c-on-dark); border: 0; box-shadow: var(--shadow-lg); }
.card--dark :is(h2, h3) { color: #fff; }
.card--dark .usp li { color: #e3efeb; }
.card--dark .usp svg { color: var(--c-gold-soft); }
.card--dark :is(.muted, .small.muted) { color: var(--c-on-dark-muted); }
.card--dark a:not(.btn) { color: var(--c-mint); }
/* Bước form */
.steps li.is-active .n { background: var(--grad-brand); border-color: transparent; box-shadow: 0 8px 18px -8px rgba(14, 124, 102, .9); }
.steps li.is-done .n { border-color: var(--c-primary); background: var(--c-primary-50); }
.card--dark .contact-list svg { color: var(--c-gold-soft); }
/* Thanh liên hệ di động: số nút thay đổi (ẩn Gọi/Zalo khi chưa có số) -> chia đều */
.mobile-cta { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 560px) {
  .hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__stats > div { padding: 0 10px; }
  .hero__stats strong { font-size: 26px; }
  .hero__stats span { font-size: 12px; line-height: 1.35; }
  .trust-strip .trust { gap: 18px 14px; }
  .trust__item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .trust__item strong { font-size: 14px; }
  .trust__item span { font-size: 12px; }
}
@media (max-width: 559px) {
  .grid--4 { grid-template-columns: 1fr; }
  .tabs button { padding: 8px 13px; font-size: 14px; }
}
/* Khung ảnh thẻ sản phẩm giữ đúng tỷ lệ: ảnh đặt tuyệt đối, không đẩy khung cao lên */
.pcard__media > img { position: absolute; top: 10%; left: 50%; height: 80%; width: auto; max-width: 72%; transform: translateX(-50%); object-fit: contain; }
.form-card .entry-content { margin-bottom: 18px; }

/* Ảnh sản phẩm thật (ảnh hãng nền trắng): khung nền trắng để màu sản phẩm giữ đúng nguyên bản (không hòa màu, không đổi ảnh) */
.pcard__media:has(> img[src*="/uploads/"]), .pd__gallery:has(img[src*="/uploads/"]) { background: #fff; }
.pd__gallery img[src*="/uploads/"] { width: 88%; max-height: 88%; object-fit: contain; }
.bar__why { grid-column: 1 / -1; order: 4; margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--c-muted); }

/* Tài liệu tải về: hộp gọn (cột bên) + thẻ lớn (tab Tài liệu) + khối Tệp (core/file) trong bài viết */
.dl-box { margin-top: 16px; padding: 16px; }
.dl-box__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.dl-box__title svg { color: var(--c-primary); }
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dl-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; color: var(--c-ink); transition: border-color .15s, box-shadow .15s; }
.dl-row:hover { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-50); text-decoration: none; }
.dl-row > svg:first-child, .dl-card > svg { flex: none; color: #d4483b; }
.dl-row > svg:last-child { flex: none; color: var(--c-primary); }
.dl-row__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dl-row__name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.dl-row__meta { font-size: 12px; color: var(--c-muted); }
.dl-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dl-card { display: flex; align-items: center; gap: 14px; padding: 18px; }
.dl-card__body { flex: 1; min-width: 0; }
.dl-card__name { margin: 0 0 4px; font-size: 16px; line-height: 1.35; }
.dl-card__name a { color: var(--c-ink); }
.dl-card__desc { margin: 0 0 4px; font-size: 13px; color: var(--c-muted); }
.dl-card__meta { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--c-muted); }
.dl-card__btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) { .dl-card { flex-wrap: wrap; } .dl-card__btn { width: 100%; justify-content: center; } }
.entry-content .wp-block-file { display: flex; align-items: center; gap: 12px; margin: 18px 0; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 14px; background: #fff; }
.entry-content .wp-block-file > a:first-child { flex: 1; min-width: 0; padding-left: 34px; font-weight: 600; color: var(--c-ink); background: no-repeat left center / 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4483b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }
.entry-content .wp-block-file .wp-block-file__button { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.entry-content .wp-block-file .wp-block-file__button:hover { filter: brightness(1.08); }
.dl-box--plain { margin-top: 0; padding: 0; }

/* Bài viết: mục lục đầu bài cho màn hình hẹp + hộp "Về bài viết này" (E-E-A-T) */
.toc-inline { padding: 12px 16px; margin: 0 0 20px; }
.toc-inline summary { cursor: pointer; font-weight: 700; }
.toc-inline ol { margin: 10px 0 0; padding-left: 20px; font-size: 15px; }
.toc-inline li { margin-bottom: 6px; }
@media (min-width: 980px) { .toc-inline { display: none; } }
.about-article { padding: 18px 20px; margin-top: 28px; background: var(--c-surface-2, #f6faf8); }
.about-article .h4 { font-size: 17px; margin: 0 0 8px; }

/* Logo thương hiệu (khung 600×240 chuẩn hóa): thẻ danh sách + đầu trang hãng */
.brand-card__logo:has(img) { width: 116px; height: 56px; background: #fff; border: 1px solid var(--c-line); padding: 4px 8px; }
.brand-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-hero__logo { display: inline-flex; align-items: center; justify-content: center; width: 180px; height: 72px; padding: 6px 12px; margin-top: 12px; background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.brand-hero__logo img { width: 100%; height: 100%; object-fit: contain; }