/* ==========================================================================
   EE88 Design System v1 — single source of truth
   www.finisterebrittany.com | Premium / Luxury / Trustworthy / 2026 UI
   Replaces 14 duplicated inline <style> blocks. Pure CSS, no framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --ee88-primary: #D2430C;          /* deep orange — AA on white */
    --ee88-primary-hover: #B33809;
    --ee88-primary-soft: #FFF1EA;
    --ee88-secondary: #B07800;        /* gold — AA on white */
    --ee88-secondary-hover: #8A5F00;
    --ee88-secondary-soft: #FFF8E1;
    --ee88-success: #1B7A3D;          /* green CTA — AA on white */
    --ee88-success-hover: #145E2E;

    /* Dark surfaces */
    --ee88-dark: #0E1418;
    --ee88-dark-2: #16202A;
    --ee88-dark-3: #1E2B36;

    /* Light surfaces */
    --ee88-bg: #FFFFFF;
    --ee88-bg-soft: #F6F7F9;
    --ee88-bg-alt: #FBF8F6;

    /* Text */
    --ee88-text: #16202A;             /* 15.6:1 on white */
    --ee88-text-muted: #56636E;       /* 6.4:1 on white */
    --ee88-text-invert: #FFFFFF;
    --ee88-text-invert-muted: #B6C2CC;/* 7.2:1 on --ee88-dark */
    --ee88-text-on-primary: #FFFFFF;

    /* Lines */
    --ee88-border: #E3E7EB;
    --ee88-border-strong: #CBD3DA;
    --ee88-border-dark: rgba(255, 255, 255, .12);

    /* Feedback */
    --ee88-ok: #1B7A3D;
    --ee88-warn: #B07800;

    /* Radii */
    --ee88-r-sm: 10px;
    --ee88-r: 14px;
    --ee88-r-lg: 18px;
    --ee88-r-xl: 24px;
    --ee88-r-pill: 999px;

    /* Shadows — light + modern */
    --ee88-sh-xs: 0 1px 2px rgba(14, 20, 24, .05);
    --ee88-sh-sm: 0 2px 8px rgba(14, 20, 24, .06);
    --ee88-sh: 0 6px 20px rgba(14, 20, 24, .07);
    --ee88-sh-lg: 0 14px 40px rgba(14, 20, 24, .10);
    --ee88-sh-primary: 0 6px 18px rgba(210, 67, 12, .28);
    --ee88-sh-success: 0 6px 18px rgba(27, 122, 61, .28);
    --ee88-sh-dark: 0 10px 34px rgba(14, 20, 24, .28);

    /* 8px spacing scale */
    --ee88-s-1: 4px;
    --ee88-s-2: 8px;
    --ee88-s-3: 12px;
    --ee88-s-4: 16px;
    --ee88-s-5: 24px;
    --ee88-s-6: 32px;
    --ee88-s-7: 48px;
    --ee88-s-8: 64px;
    --ee88-s-9: 80px;

    /* Layout */
    --ee88-container: 1240px;
    --ee88-container-narrow: 860px;
    --ee88-header-h: 68px;
    --ee88-stickybar-h: 0px;

    /* Type — 'Bevn Fallback' la fallback metric-compatible do .build/font_metrics.py
       tinh tu chinh file font. Nho no, LCP (hero <h1>) duoc ve ngay bang fallback
       trong khi webfont dang tai, va khi webfont toi thi kich thuoc khong doi
       -> CLS giu nguyen 0. */
    --ee88-font: "Be Vietnam Pro", "Bevn Fallback 400", "Bevn Fallback 800",
        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;

    /* Motion — light, GPU-friendly only */
    --ee88-t: 180ms cubic-bezier(.4, 0, .2, 1);
    --ee88-t-slow: 320ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--ee88-header-h) + 16px);
}

body {
    font-family: var(--ee88-font);
    font-size: 1rem;            /* 16px */
    line-height: 1.7;
    color: var(--ee88-text);
    background: var(--ee88-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    overflow-x: hidden;          /* hard guard against horizontal scroll */
}

/* Bottom sticky CTA bar reserves space on mobile so it never covers content */
@media (max-width: 767px) {
    body { padding-bottom: var(--ee88-stickybar-h); }
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

svg { flex-shrink: 0; }

a {
    color: var(--ee88-primary);
    text-decoration: none;
    transition: color var(--ee88-t);
}

a:hover { color: var(--ee88-primary-hover); }

ul, ol { padding: 0; }
ul { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--ee88-text);
    text-wrap: balance;
}

p { text-wrap: pretty; }

button, input, select, textarea { font: inherit; color: inherit; }

strong { font-weight: 700; }

:focus-visible {
    outline: 3px solid var(--ee88-secondary);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: var(--ee88-primary);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--ee88-container);
    margin-inline: auto;
    padding-inline: var(--ee88-s-5);
}

.container--narrow { max-width: var(--ee88-container-narrow); }

.section { padding-block: var(--ee88-s-8); }
.section--tight { padding-block: var(--ee88-s-7); }
.section--soft { background: var(--ee88-bg-soft); }
.section--alt { background: var(--ee88-bg-alt); }

@media (max-width: 767px) {
    .container { padding-inline: var(--ee88-s-4); }
    .section { padding-block: var(--ee88-s-7); }
    .section--tight { padding-block: var(--ee88-s-6); }
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--ee88-s-4);
    z-index: 999;
    padding: var(--ee88-s-3) var(--ee88-s-5);
    background: var(--ee88-primary);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 var(--ee88-r-sm) var(--ee88-r-sm);
    transition: top var(--ee88-t);
}

.skip-link:focus { top: 0; color: #fff; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   4. Section heading
   -------------------------------------------------------------------------- */
.section-head {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--ee88-s-7);
    text-align: center;
}

.section-head--left {
    margin-inline: 0;
    text-align: left;
}

.section-head--left .section-sub { max-width: 640px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ee88-s-2);
    margin-bottom: var(--ee88-s-3);
    padding: 6px 14px;
    background: var(--ee88-primary-soft);
    color: var(--ee88-primary-hover);
    border-radius: var(--ee88-r-pill);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-head--left .eyebrow { margin-left: 0; }

.section-title {
    font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.125rem);
    margin-bottom: var(--ee88-s-3);
}

.section-sub {
    font-size: 1.0625rem;
    color: var(--ee88-text-muted);
}

@media (max-width: 479px) {
    .section-head { margin-bottom: var(--ee88-s-5); }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ee88-s-2);
    min-height: 48px;            /* comfortable touch target */
    padding: var(--ee88-s-3) var(--ee88-s-5);
    border: 1px solid transparent;
    border-radius: var(--ee88-r-sm);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform var(--ee88-t), box-shadow var(--ee88-t),
                background-color var(--ee88-t), color var(--ee88-t),
                border-color var(--ee88-t);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn svg { width: 18px; height: 18px; }

/* Primary conversion CTA */
.btn--primary {
    background: var(--ee88-primary);
    color: var(--ee88-text-on-primary);
    box-shadow: var(--ee88-sh-primary);
}

.btn--primary:hover {
    background: var(--ee88-primary-hover);
    color: #fff;
    box-shadow: 0 10px 26px rgba(179, 56, 9, .34);
}

/* Green CTA (register) */
.btn--success {
    background: var(--ee88-success);
    color: #fff;
    box-shadow: var(--ee88-sh-success);
}

.btn--success:hover {
    background: var(--ee88-success-hover);
    color: #fff;
    box-shadow: 0 10px 26px rgba(20, 94, 46, .34);
}

/* Secondary / outline on light */
.btn--ghost {
    background: var(--ee88-bg);
    color: var(--ee88-primary);
    border-color: var(--ee88-border-strong);
    box-shadow: var(--ee88-sh-xs);
}

.btn--ghost:hover {
    background: var(--ee88-primary-soft);
    border-color: var(--ee88-primary);
    color: var(--ee88-primary-hover);
}

/* Ghost on dark */
.btn--ghost-light {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
}

.btn--ghost-light:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.btn--lg {
    min-height: 56px;
    padding: var(--ee88-s-4) var(--ee88-s-6);
    font-size: 1.0625rem;
    border-radius: var(--ee88-r);
}

.btn--sm {
    min-height: 44px;
    padding: var(--ee88-s-2) var(--ee88-s-4);
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--ee88-dark);
    border-bottom: 1px solid var(--ee88-border-dark);
}

/* Applied by JS on scroll — avoids repaint on initial paint */
.header.is-stuck {
    box-shadow: var(--ee88-sh-dark);
    background: rgba(14, 20, 24, .96);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-4);
    min-height: var(--ee88-header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ee88-s-2);
    color: #fff;
    font-weight: 800;
    font-size: 1.1875rem;
    letter-spacing: -.02em;
    white-space: nowrap;
    /* 44px minimum touch target without changing the visual logo size */
    min-height: 44px;
    padding-block: 3px;
}

.brand:hover { color: #fff; }

.brand__mark {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: var(--ee88-r-sm);
}

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }

.brand__sub {
    font-size: .6875rem;
    font-weight: 400;
    color: var(--ee88-text-invert-muted);
    letter-spacing: 0;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-1);
    margin-inline-start: auto;
}

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--ee88-s-3);
    color: var(--ee88-text-invert-muted);
    font-size: .9375rem;
    font-weight: 400;
    border-radius: var(--ee88-r-sm);
    transition: color var(--ee88-t), background-color var(--ee88-t);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-2);
    margin-inline-start: var(--ee88-s-3);
}

/* Hamburger */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-inline-start: auto;
    padding: 0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--ee88-border-dark);
    border-radius: var(--ee88-r-sm);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--ee88-t);
}

.nav-toggle:hover { background: rgba(255, 255, 255, .16); }

/* Drawer backdrop — only painted while the mobile nav is open */
.nav-backdrop {
    position: fixed;
    inset: var(--ee88-header-h) 0 0 0;
    z-index: 180;
    display: none;
    background: rgba(14, 20, 24, .62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--ee88-t);
}

.nav-backdrop.is-open { display: block; opacity: 1; }

.nav-toggle__bars {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: background-color var(--ee88-t);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--ee88-t), top var(--ee88-t);
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
@media (max-width: 1023px) {
    .nav-toggle { display: inline-flex; }

    .nav {
        position: fixed;
        top: var(--ee88-header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--ee88-s-1);
        max-height: calc(100vh - var(--ee88-header-h));
        margin: 0;
        padding: var(--ee88-s-4) var(--ee88-s-4) var(--ee88-s-5);
        background: var(--ee88-dark);
        border-bottom: 1px solid var(--ee88-border-dark);
        box-shadow: var(--ee88-sh-dark);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--ee88-t), transform var(--ee88-t), visibility var(--ee88-t);
    }

    .nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav__link {
        min-height: 50px;
        padding: 0 var(--ee88-s-4);
        font-size: 1rem;
        border-radius: var(--ee88-r-sm);
    }

    .nav__actions {
        flex-direction: column;
        align-items: stretch;
        margin: var(--ee88-s-3) 0 0;
        padding-top: var(--ee88-s-4);
        border-top: 1px solid var(--ee88-border-dark);
    }

    .nav__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(56px, 7vw, 92px);
    background: var(--ee88-dark-2);
    color: #fff;
}

/* Layered radial glows — pure CSS, no image, cheap to paint */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.hero::before {
    top: -32%;
    right: -12%;
    width: min(560px, 82%);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(210, 67, 12, .30) 0%, rgba(210, 67, 12, 0) 68%);
}

.hero::after {
    bottom: -38%;
    left: -16%;
    width: min(480px, 78%);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(176, 120, 0, .22) 0%, rgba(176, 120, 0, 0) 70%);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

/* Grid children need min-width:0 or long words can push the track wider
   than the viewport and create a horizontal scrollbar. */
.hero__content {
    min-width: 0;
}

.hero__title {
    font-size: clamp(1.875rem, 1.2rem + 3.1vw, 3.25rem);
    line-height: 1.14;
    color: #fff;
    margin-bottom: var(--ee88-s-4);
    letter-spacing: -.025em;
}

.hero__title em {
    font-style: normal;
    background: linear-gradient(100deg, #FF8A4C 0%, #FFC24D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero__sub {
    font-size: clamp(1rem, .95rem + .25vw, 1.1875rem);
    color: var(--ee88-text-invert-muted);
    max-width: 54ch;
    margin-bottom: var(--ee88-s-6);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ee88-s-3);
    margin-bottom: var(--ee88-s-5);
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ee88-s-2) var(--ee88-s-5);
    padding-top: var(--ee88-s-4);
    border-top: 1px solid var(--ee88-border-dark);
    font-size: .875rem;
    color: var(--ee88-text-invert-muted);
}

.hero__meta li {
    display: inline-flex;
    align-items: center;
    gap: var(--ee88-s-2);
}

.hero__meta svg { color: var(--ee88-success); }

/* Byline — cue truc quan cho nguoi doc biet ai bien tap va cap nhat khi nao.
   Nam ngay duoi hero__sub nen nam trong viewport dau tien tren mobile. */
.hero__byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ee88-s-2) var(--ee88-s-4);
    margin: 0 0 var(--ee88-s-5);
    font-size: .8125rem;
    color: var(--ee88-text-invert-muted);
}

/* Each item is a <div> wrapper holding one dt/dd pair (valid inside <dl>). */
.hero__byline-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ee88-s-2);
}

.hero__byline dt,
.hero__byline dd {
    display: inline;
    margin: 0;
    font-weight: 400;
}

.hero__byline dt::after { content: ":"; }

.hero__byline svg { color: var(--ee88-secondary); flex: none; }

.hero__byline strong,
.hero__byline time { color: var(--ee88-text-invert); font-weight: 700; }

.hero__byline a { color: var(--ee88-text-invert); text-decoration: underline; }
.hero__byline a:hover { color: var(--ee88-secondary); }

.hero__meta em {
    font-style: normal;
    opacity: .78;
}

@media (max-width: 1023px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__sub { max-width: 100%; }
}

/* Hero side panel — floating card stack, CSS only */
.hero__panel {
    display: grid;
    gap: var(--ee88-s-3);
}

.hero__card {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-3);
    padding: var(--ee88-s-4);
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--ee88-border-dark);
    border-radius: var(--ee88-r);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--ee88-sh);
}

.hero__card-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--ee88-r-sm);
    background: linear-gradient(140deg, var(--ee88-primary) 0%, #E8631C 100%);
    color: #fff;
}

.hero__card-icon svg { width: 22px; height: 22px; }

.hero__card strong {
    display: block;
    font-size: .9375rem;
    color: #fff;
}

.hero__card span {
    font-size: .8125rem;
    color: var(--ee88-text-invert-muted);
}

@media (max-width: 1023px) {
    .hero__panel {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
}

@media (max-width: 1023px) {
    .hero__panel .hero__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Compact hero used on inner pages */
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(40px, 5vw, 64px);
    background: var(--ee88-dark-2);
    color: #fff;
}

.page-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -60%;
    right: -8%;
    width: min(420px, 70%);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(210, 67, 12, .28) 0%, rgba(210, 67, 12, 0) 70%);
}

.page-hero__inner { max-width: 760px; }

.page-hero__title {
    font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
    color: #fff;
    margin-bottom: var(--ee88-s-3);
}

.page-hero__sub {
    font-size: 1.0625rem;
    color: var(--ee88-text-invert-muted);
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ee88-s-3);
    margin-top: var(--ee88-s-5);
}

@media (max-width: 767px) {
    .page-hero__actions .btn { flex: 1 1 100%; }
}

/* Breadcrumbs */
.breadcrumb {
    margin-bottom: var(--ee88-s-4);
    font-size: .8125rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ee88-s-2);
    color: var(--ee88-text-invert-muted);
}

.breadcrumb a {
    color: var(--ee88-text-invert-muted);
    /* Breadcrumb items are navigation — keep a 44px touch target */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.breadcrumb a:hover { color: #fff; text-decoration: underline; }

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-inline-start: var(--ee88-s-2);
    opacity: .5;
}

.breadcrumb li { display: inline-flex; align-items: center; }

/* --------------------------------------------------------------------------
   8. Trust / stats
   -------------------------------------------------------------------------- */
.trust {
    background: var(--ee88-bg);
    border-bottom: 1px solid var(--ee88-border);
}

.trust__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    background: var(--ee88-border);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
    overflow: hidden;
    box-shadow: var(--ee88-sh-sm);
}

.trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ee88-s-1);
    padding: var(--ee88-s-5) var(--ee88-s-3);
    background: var(--ee88-bg);
    text-align: center;
}

.trust__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--ee88-s-1);
    border-radius: var(--ee88-r-sm);
    background: var(--ee88-primary-soft);
    color: var(--ee88-primary);
}

.trust__icon svg { width: 21px; height: 21px; }

.trust__value {
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ee88-text);
}

.trust__label {
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--ee88-text-muted);
}

@media (max-width: 1023px) {
    .trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust__item { padding: var(--ee88-s-4) var(--ee88-s-2); }
    .trust__icon { width: 36px; height: 36px; }
    .trust__icon svg { width: 18px; height: 18px; }
    .trust__label { font-size: .75rem; }
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--ee88-s-5);
}

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

@media (max-width: 1023px) {
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .grid--3 { grid-template-columns: 1fr; }
    .grid { gap: var(--ee88-s-4); }
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--ee88-s-5);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-lg);
    box-shadow: var(--ee88-sh-sm);
    transition: transform var(--ee88-t), box-shadow var(--ee88-t),
                border-color var(--ee88-t);
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--ee88-border-strong);
    box-shadow: var(--ee88-sh-lg);
}

.card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--ee88-s-4);
    border-radius: var(--ee88-r);
    background: linear-gradient(140deg, var(--ee88-primary-soft) 0%, #FFE7DA 100%);
    color: var(--ee88-primary);
}

.card__icon svg { width: 26px; height: 26px; }

.card__title {
    font-size: 1.125rem;
    margin-bottom: var(--ee88-s-2);
}

.card__title a {
    color: inherit;
    /* Full-card-width tap target instead of a 23px text sliver */
    display: inline-block;
    min-height: 44px;
    padding-block: 10px 4px;
}

.card__title a:hover { color: var(--ee88-primary); }

.card__text {
    font-size: .9375rem;
    color: var(--ee88-text-muted);
    margin-bottom: var(--ee88-s-4);
}

.card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ee88-primary);
}

.card__link svg { width: 15px; height: 15px; transition: transform var(--ee88-t); }
.card__link:hover svg { transform: translateX(3px); }

/* Product card — dark premium variant */
.card--product {
    background: linear-gradient(170deg, var(--ee88-dark-2) 0%, var(--ee88-dark-3) 100%);
    border-color: var(--ee88-border-dark);
    color: #fff;
}

.card--product:hover {
    border-color: rgba(255, 255, 255, .24);
    box-shadow: var(--ee88-sh-dark);
}

.card--product .card__icon {
    background: linear-gradient(140deg, var(--ee88-primary) 0%, #E8631C 100%);
    color: #fff;
}

.card--product .card__title { color: #fff; }
.card--product .card__title a { color: #fff; }
.card--product .card__title a:hover { color: #FFB067; }
.card--product .card__text { color: var(--ee88-text-invert-muted); }
.card--product .card__link { color: #FFB067; }

@media (max-width: 639px) {
    .card { padding: var(--ee88-s-4); }
    .card__icon { width: 46px; height: 46px; margin-bottom: var(--ee88-s-3); }
}

/* --------------------------------------------------------------------------
   10. Prose / content blocks
   -------------------------------------------------------------------------- */
.prose > * + * { margin-top: var(--ee88-s-4); }
.prose h2 { margin-top: var(--ee88-s-7); font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.prose h3 { margin-top: var(--ee88-s-6); font-size: 1.1875rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ee88-text-muted); }
.prose p { max-width: 72ch; }

.prose ul, .prose ol {
    display: grid;
    gap: var(--ee88-s-2);
    max-width: 72ch;
    padding-inline-start: var(--ee88-s-5);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--ee88-primary); }
.prose li strong { color: var(--ee88-text); }

.prose a { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 639px) {
    .prose ul, .prose ol { padding-inline-start: var(--ee88-s-4); }
}

/* --------------------------------------------------------------------------
   Definition block — answer-first opening for GEO / AI citation.
   Placed directly below the hero so AI systems reading only the first 30% of
   the page still get a self-contained, quotable definition of both entities.
   -------------------------------------------------------------------------- */
.definition-block {
    max-width: 78ch;
    margin-inline: auto;
    padding: var(--ee88-s-5) 0;
}

.definition-block__title {
    margin: 0 0 var(--ee88-s-3);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--ee88-text);
}

.definition-block p {
    margin: 0 0 var(--ee88-s-3);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ee88-text-muted);
}

.definition-block p:last-child { margin-bottom: 0; }
.definition-block strong { color: var(--ee88-text); }

/* Ghi chú cuối khối định nghĩa — nhỏ hơn, tách nhẹ khỏi phần định nghĩa chính
   để người đọc/AI không lẫn ghi chú với câu định nghĩa. */
.definition-block__note {
    margin: var(--ee88-s-4) 0 0;
    font-size: .9375rem !important;
    line-height: 1.7;
}

/* Mỗi entity một <section class="direct-answer">: EE88 và EE88Hub tách bạch
   về mặt ngữ nghĩa (không phải hai tên cho cùng một bên), mỗi cái một H2
   dạng câu hỏi + một đoạn trả lời trực tiếp ngay dưới. */
.definition-block .direct-answer + .direct-answer {
    margin-top: var(--ee88-s-5);
    padding-top: var(--ee88-s-5);
    border-top: 1px solid var(--ee88-border);
}

.definition-block .direct-answer p.direct-answer { margin-bottom: var(--ee88-s-3); }

@media (min-width: 900px) {
    .definition-block {
        padding: var(--ee88-s-6) 0;
        border-top: 1px solid var(--ee88-border);
    }

    .definition-block__title { font-size: 1.375rem; }
    .definition-block p { font-size: 1.0625rem; }
}

@media (max-width: 639px) {
    .definition-block { padding: var(--ee88-s-5) 0; }
}

/* --------------------------------------------------------------------------
   Answer block — answer-first paragraph directly under a question heading.
   The first sentence of every section answers the heading's question, so the
   passage can be quoted without surrounding context.
   -------------------------------------------------------------------------- */
.answer-block {
    max-width: 72ch;
    margin: 0 auto var(--ee88-s-5);
}

.answer-block p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--ee88-text-muted);
}

.answer-block strong { color: var(--ee88-text); }

@media (max-width: 639px) {
    .answer-block p { font-size: 1rem; }
}

/* Heading dạng câu hỏi bên trong answer-block (ví dụ "EE88 Hỗ Trợ Thiết Bị Nào?").
   Cùng cỡ với H2 section để giữ đúng thang nhúng heading. */
.answer-block__title {
    margin: 0 0 var(--ee88-s-3);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--ee88-text);
}

/* Danh sách nằm ngay sau đoạn trả lời trực tiếp: đưa các mục ra khỏi
   paragraph để AI tách được từng mục, đồng thời vẫn nằm trong cùng
   một section chủ đề (không nhồi nhiều ý vào một đoạn văn). */
.answer-list {
    margin: var(--ee88-s-4) 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--ee88-s-2);
}

.answer-list li {
    position: relative;
    padding-left: var(--ee88-s-5);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.answer-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ee88-primary);
}

.answer-list strong { color: var(--ee88-text); }

@media (max-width: 639px) {
    .answer-block__title { font-size: 1.0625rem; }
    .answer-list li { font-size: .9375rem; }
}

/* Two-column point grid; reuses the .point card styling. */
.point-grid {
    gap: var(--ee88-s-4);
    margin-top: var(--ee88-s-4);
}

.point-grid .point {
    padding: var(--ee88-s-4);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
}

/* --------------------------------------------------------------------------
   Info figure — semantic <figure> wrapping the content-structure diagram.
   Inline SVG keeps it lightweight (no extra HTTP request, no JS), and the
   <figcaption> supplies the context AI systems and screen readers need.
   -------------------------------------------------------------------------- */
.info-figure {
    margin: var(--ee88-s-5) 0 0;
    padding: var(--ee88-s-4);
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
}

/* The <img> raster variant keeps width/height from the file so the browser
   reserves the box and CLS stays 0. The SVG variant was REMOVED 05/10/2026:
   35 <text> nodes in a viewBox 800×470 scaled down to ~5.2px on a 390px
   screen, so Vietnamese diacritics detached from their base letters. That
   diagram is now the .hubmap grid below — real HTML text, no SVG <text>. */
.info-figure figcaption {
    margin-top: var(--ee88-s-3);
    font-size: .875rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

@media (max-width: 639px) {
    .info-figure { padding: var(--ee88-s-3); }
}

/* ==========================================================================
   Hub map — "Sơ đồ cấu trúc thông tin" as REAL HTML text.

   REPLACES an inline SVG that carried 35 <text> nodes. Root cause of the
   broken Vietnamese: font-size inside an SVG <text> is expressed in viewBox
   units, so it is multiplied by (rendered width / viewBox width). Measured on
   production at a 390px viewport: the box rendered 332px wide against a
   viewBox of 800, i.e. scale 0.415 — a 12.5-unit label rendered at 5.19 real
   px. At that size every tone mark (ă â ê ô ơ ư đ and the full sắc/huyền/
   ngã/nặng series) lifts off its base letter and the line reads as loose,
   unreadable fragments. <text> also never wraps, so long labels overran the
   card they belonged to.

   Everything below is ordinary block-flow text: it wraps by itself, inherits
   the site's webfont, stays selectable, and is exposed to crawlers and screen
   readers as a single readable string.
   ========================================================================== */
.hubmap {
    margin: var(--ee88-s-5) 0 0;
    padding: var(--ee88-s-5);
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
}

.hubmap__title {
    margin: 0;
    font-size: 1.125rem;            /* 18px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--ee88-text);
}

.hubmap__lead {
    margin: var(--ee88-s-2) 0 0;
    font-size: .9375rem;            /* 15px */
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.hubmap__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ee88-s-3);
    margin: var(--ee88-s-4) 0 0;
}

.hubmap__col {
    display: flex;
    flex-direction: column;
    padding: var(--ee88-s-4);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-top: 3px solid var(--ee88-primary);
    border-radius: var(--ee88-r-sm);
    box-shadow: var(--ee88-sh-xs);
}

.hubmap__col-title {
    margin: 0 0 var(--ee88-s-2);
    font-size: 1rem;                /* 16px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--ee88-text);
}

.hubmap__list,
.hubmap__stats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hubmap__item {
    position: static;
    font-size: .9375rem;            /* 15px */
    line-height: 1.6;
    color: var(--ee88-text-muted);
    letter-spacing: normal;
    word-spacing: normal;
    writing-mode: horizontal-tb;
    transform: none;
}

.hubmap__item + .hubmap__item { margin-top: 2px; }

.hubmap__stats {
    margin-top: auto;
    padding-top: var(--ee88-s-3);
}

.hubmap__stat {
    font-size: .8125rem;            /* 13px */
    font-weight: 700;
    line-height: 1.5;
    color: var(--ee88-primary);
    letter-spacing: normal;
    word-spacing: normal;
}

.hubmap__stat + .hubmap__stat { margin-top: 2px; }

.hubmap__notes {
    margin: var(--ee88-s-4) 0 0;
    padding: var(--ee88-s-3) 0 0;
    border-top: 1px solid var(--ee88-border);
    font-size: .8125rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.hubmap__notes li { position: static; }

.hubmap__notes li + li { margin-top: 2px; }

/* 4 cột rộng chỉ dùng được khi mỗi cột còn >= 180px. Xuống cấp dần theo
   chiều rộng thay vì để chữ bị bóp trong cột hẹp. */
@media (max-width: 1023px) {
    .hubmap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
    .hubmap { padding: var(--ee88-s-4); }
    .hubmap__grid { grid-template-columns: 1fr; }
    .hubmap__col { padding: var(--ee88-s-3) var(--ee88-s-4); }
}

/* --------------------------------------------------------------------------
   Entity note — factual "what this site is" block (E-E-A-T).
   Deliberately states the online-only, non-provider role so the page cannot be
   misread as the operator itself.
   -------------------------------------------------------------------------- */
.entity-note {
    display: grid;
    gap: var(--ee88-s-3);
    padding: var(--ee88-s-5);
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-inline-start: 4px solid var(--ee88-primary);
    border-radius: var(--ee88-r);
    margin-bottom: var(--ee88-s-5);
}

.entity-note__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--ee88-text);
}

.entity-note p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--ee88-text-muted);
}

.entity-note strong { color: var(--ee88-text); }

@media (max-width: 639px) {
    .entity-note { padding: var(--ee88-s-4); }
}

/* Editorial process — numbered E-E-A-T steps inside a content page. */
.editorial-process {
    padding: var(--ee88-s-5);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
}

.editorial-process__title {
    margin: 0 0 var(--ee88-s-4);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--ee88-text);
}

.editorial-process__note {
    margin: var(--ee88-s-4) 0 0;
    font-size: .875rem;
    line-height: 1.75;
    color: var(--ee88-text-muted);
}

.steps--compact { gap: var(--ee88-s-2); }

.steps--compact > li {
    padding: var(--ee88-s-3) var(--ee88-s-4) var(--ee88-s-3) 56px;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.steps--compact > li strong { color: var(--ee88-text); }

@media (max-width: 639px) {
    .editorial-process { padding: var(--ee88-s-4); }
    .steps--compact > li { padding: var(--ee88-s-3) var(--ee88-s-3) var(--ee88-s-3) 48px; }
}

/* Flat variant for text-led cards (E-E-A-T block). */
.card--flat { background: var(--ee88-bg); }

.card--flat .card__title { font-size: 1.0625rem; }

/* Responsible-gaming callout — cooler tone than the default highlight box. */
.callout--rg {
    background: var(--ee88-bg-soft);
    border-color: var(--ee88-border);
    border-inline-start-color: var(--ee88-primary);
}

.callout--rg .callout__icon { color: var(--ee88-primary); }
.callout--rg p { color: var(--ee88-text-muted); }
.callout--rg strong { color: var(--ee88-text); }

/* Highlight / callout box */
.callout {
    display: flex;
    gap: var(--ee88-s-4);
    padding: var(--ee88-s-4) var(--ee88-s-5);
    background: var(--ee88-secondary-soft);
    border: 1px solid #F2DFA8;
    border-inline-start: 4px solid var(--ee88-secondary);
    border-radius: var(--ee88-r);
}

.callout__icon { color: var(--ee88-secondary-hover); }
.callout__icon svg { width: 24px; height: 24px; }
.callout p { margin: 0; font-size: .9375rem; color: #6B4E00; }
.callout strong { color: #4A3600; }

@media (max-width: 479px) {
    .callout { flex-direction: column; gap: var(--ee88-s-2); padding: var(--ee88-s-4); }
}

/* Feature list rows */
.point-list { display: grid; gap: var(--ee88-s-4); }

.point {
    display: flex;
    gap: var(--ee88-s-4);
    padding: var(--ee88-s-4) var(--ee88-s-5);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
    transition: border-color var(--ee88-t), box-shadow var(--ee88-t);
}

.point:hover { border-color: var(--ee88-border-strong); box-shadow: var(--ee88-sh-sm); }

.point__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--ee88-r-sm);
    background: var(--ee88-primary-soft);
    color: var(--ee88-primary);
}

.point__icon svg { width: 22px; height: 22px; }

.point h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.point p { font-size: .9375rem; color: var(--ee88-text-muted); margin: 0; }

@media (max-width: 479px) {
    .point { flex-direction: column; gap: var(--ee88-s-3); padding: var(--ee88-s-4); }
}

/* Stat chips */
.chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ee88-s-3);
}

.chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ee88-s-4);
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
    text-align: center;
}

.chip strong {
    font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ee88-primary);
}

.chip span { font-size: .8125rem; color: var(--ee88-text-muted); }

/* Numbered steps */
.steps { display: grid; gap: var(--ee88-s-3); counter-reset: step; }

.steps > li {
    position: relative;
    padding: var(--ee88-s-4) var(--ee88-s-4) var(--ee88-s-4) 60px;
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
    font-size: .9375rem;
    color: var(--ee88-text-muted);
    list-style: none;
}

.steps > li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: var(--ee88-s-4);
    top: var(--ee88-s-4);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--ee88-primary);
    color: #fff;
    border-radius: 50%;
    font-size: .875rem;
    font-weight: 800;
}

.steps strong { color: var(--ee88-text); }

@media (max-width: 479px) {
    .steps > li { padding: 68px var(--ee88-s-4) var(--ee88-s-4); }
    .steps > li::before { left: var(--ee88-s-4); top: var(--ee88-s-4); width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   11. Comparison table
   -------------------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-lg);
    box-shadow: var(--ee88-sh-sm);
    background: var(--ee88-bg);
}

/* Alias chuẩn cho các bảng tương lai — cùng hành vi cuộn ngang, giữ bảng
   không tràn khung ở 360–430px. */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cmp {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9375rem;
}

.cmp caption {
    caption-side: top;
    padding: var(--ee88-s-4) var(--ee88-s-5);
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.65;
    white-space: normal;
    color: var(--ee88-text);
    background: var(--ee88-bg-soft);
    border-bottom: 1px solid var(--ee88-border);
}

.cmp th, .cmp td {
    padding: var(--ee88-s-3) var(--ee88-s-4);
    text-align: center;
    border-bottom: 1px solid var(--ee88-border);
    vertical-align: middle;
}

.cmp thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ee88-dark);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    border-bottom: 0;
    white-space: nowrap;
}

.cmp thead th:first-child { text-align: left; }

/* Highlighted EE88 column */
.cmp .is-featured {
    background: var(--ee88-primary-soft);
    color: var(--ee88-primary-hover);
    font-weight: 700;
}

.cmp thead .is-featured {
    background: var(--ee88-primary);
    color: #fff;
}

.cmp tbody th {
    text-align: left;
    font-weight: 700;
    color: var(--ee88-text);
    background: var(--ee88-bg-soft);
    white-space: nowrap;
}

.cmp tbody tr:nth-child(even) td { background: #FCFCFD; }
.cmp tbody tr:nth-child(even) td.is-featured { background: var(--ee88-primary-soft); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

.cmp td.is-warn { color: var(--ee88-warn); font-weight: 700; }

.cmp tbody tr:hover td { background: var(--ee88-bg-soft); }
.cmp tbody tr:hover td.is-featured { background: #FFE6DA; }

.table-hint {
    margin-top: var(--ee88-s-2);
    font-size: .8125rem;
    color: var(--ee88-text-muted);
    text-align: center;
}

@media (max-width: 767px) {
    .table-hint { display: block; }
}

@media (min-width: 768px) {
    .table-hint { display: none; }
}

/* --------------------------------------------------------------------------
   12. FAQ accordion
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--ee88-s-3); }

.faq__item {
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
    overflow: hidden;
    transition: border-color var(--ee88-t), box-shadow var(--ee88-t);
}

.faq__item:has(.faq__btn[aria-expanded="true"]) {
    border-color: var(--ee88-primary);
    box-shadow: var(--ee88-sh-sm);
}

.faq__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ee88-s-4);
    width: 100%;
    min-height: 60px;
    padding: var(--ee88-s-4) var(--ee88-s-5);
    background: none;
    border: 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ee88-text);
    cursor: pointer;
    transition: color var(--ee88-t);
}

.faq__btn:hover { color: var(--ee88-primary); }

.faq__icon {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ee88-primary-soft);
    transition: background-color var(--ee88-t), transform var(--ee88-t-slow);
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: var(--ee88-primary);
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: opacity var(--ee88-t), transform var(--ee88-t-slow);
}

.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__btn[aria-expanded="true"] .faq__icon {
    background: var(--ee88-primary);
    transform: rotate(180deg);
}

.faq__btn[aria-expanded="true"] .faq__icon::before,
.faq__btn[aria-expanded="true"] .faq__icon::after { background: #fff; }

.faq__btn[aria-expanded="true"] .faq__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* grid-template-rows animation = no JS height measuring, no CLS */
.faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ee88-t-slow);
}

.faq__panel > div { overflow: hidden; }

/* The button is wrapped in an <h3> for heading semantics, so it is NOT a
   sibling of the panel. Drive the panel from the item's expanded state
   instead of relying on `.faq__btn + .faq__panel`. */
.faq__item:has(.faq__btn[aria-expanded="true"]) .faq__panel {
    grid-template-rows: 1fr;
}

.faq__answer {
    padding: 0 var(--ee88-s-5) var(--ee88-s-5);
    font-size: .9375rem;
    color: var(--ee88-text-muted);
}

.faq__answer > * + * { margin-top: var(--ee88-s-2); }

@media (max-width: 479px) {
    .faq__btn {
        min-height: 56px;
        padding: var(--ee88-s-3) var(--ee88-s-4);
        font-size: .9375rem;
        gap: var(--ee88-s-3);
    }
    .faq__answer { padding: 0 var(--ee88-s-4) var(--ee88-s-4); }
}

/* --------------------------------------------------------------------------
   13. Editorial / E-E-A-T
   -------------------------------------------------------------------------- */
.editorial {
    padding: var(--ee88-s-6);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-xl);
    box-shadow: var(--ee88-sh);
}

.editorial__head {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-4);
    padding-bottom: var(--ee88-s-4);
    margin-bottom: var(--ee88-s-4);
    border-bottom: 1px solid var(--ee88-border);
}

.editorial__badge {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--ee88-primary) 0%, #E8631C 100%);
    color: #fff;
}

.editorial__badge svg { width: 26px; height: 26px; }

.editorial__title { font-size: clamp(1.125rem, 1rem + .6vw, 1.4375rem); }

/* dt/dd pairs wrap as a unit so "Nhãn: giá trị" reads as one item. */
.editorial__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ee88-s-2) var(--ee88-s-4);
    margin: 4px 0 0;
    font-size: .8125rem;
    color: var(--ee88-text-muted);
}

.editorial__meta dt {
    display: inline;
    font-weight: 400;
}

.editorial__meta dt::after { content: ":"; }

.editorial__meta dd {
    display: inline;
    margin: 0 var(--ee88-s-4) 0 0;
}

.editorial__body > * + * { margin-top: var(--ee88-s-3); }
.editorial__body p { font-size: .9375rem; color: var(--ee88-text-muted); }

.proscons { display: grid; gap: var(--ee88-s-3); margin-top: var(--ee88-s-4); }

.proscons__item {
    display: flex;
    align-items: flex-start;
    gap: var(--ee88-s-3);
    padding: var(--ee88-s-3) var(--ee88-s-4);
    border-radius: var(--ee88-r-sm);
    font-size: .9375rem;
    color: var(--ee88-text-muted);
}

.proscons__item svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; }
.proscons__item--pro { background: #EDF7F0; }
.proscons__item--pro svg { color: var(--ee88-ok); }
.proscons__item--con { background: var(--ee88-secondary-soft); }
.proscons__item--con svg { color: var(--ee88-secondary-hover); }
.proscons__item strong { color: var(--ee88-text); }

.score-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ee88-s-3);
    margin-top: var(--ee88-s-5);
    padding: var(--ee88-s-4) var(--ee88-s-5);
    background: linear-gradient(120deg, var(--ee88-primary) 0%, #E8631C 100%);
    border-radius: var(--ee88-r);
    color: #fff;
}

.score-line strong { font-size: 1.25rem; font-weight: 800; }
.score-line span { font-size: .9375rem; opacity: .95; }

@media (max-width: 639px) {
    .editorial { padding: var(--ee88-s-5); }
    .editorial__head { flex-direction: column; align-items: flex-start; gap: var(--ee88-s-3); }
    .score-line { flex-direction: column; align-items: flex-start; gap: var(--ee88-s-2); }
}

/* --------------------------------------------------------------------------
   14. Conversion CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(48px, 6vw, 80px);
    background: linear-gradient(130deg, #8E2D06 0%, var(--ee88-primary) 48%, #E8631C 100%);
    color: #fff;
    text-align: center;
}

.cta-band::before,
.cta-band::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.cta-band::before {
    top: -50%;
    left: -8%;
    width: 420px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 68%);
}

.cta-band::after {
    bottom: -60%;
    right: -6%;
    width: 380px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255, 194, 77, .24) 0%, rgba(255, 194, 77, 0) 70%);
}

.cta-band__inner { max-width: 720px; margin-inline: auto; }

.cta-band__title {
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
    color: #fff;
    margin-bottom: var(--ee88-s-3);
}

.cta-band__sub {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .92);
    margin-bottom: var(--ee88-s-5);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ee88-s-3);
}

.cta-band__note {
    margin-top: var(--ee88-s-4);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .85);
}

.cta-band .btn--ghost-light:hover { background: rgba(255, 255, 255, .22); }

@media (max-width: 559px) {
    .cta-band__actions { flex-direction: column; }
    .cta-band__actions .btn { width: 100%; }
}

/* Inline CTA card (used inside content pages) */
.cta-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ee88-s-4);
    padding: var(--ee88-s-5);
    background: linear-gradient(130deg, var(--ee88-dark-2) 0%, var(--ee88-dark-3) 100%);
    border: 1px solid var(--ee88-border-dark);
    border-radius: var(--ee88-r-lg);
    box-shadow: var(--ee88-sh);
    color: #fff;
}

.cta-card__title { font-size: 1.125rem; color: #fff; margin-bottom: 4px; }
.cta-card__text { font-size: .9375rem; color: var(--ee88-text-invert-muted); margin: 0; }
.cta-card__actions { display: flex; flex-wrap: wrap; gap: var(--ee88-s-2); }

@media (max-width: 767px) {
    .cta-card { flex-direction: column; align-items: stretch; text-align: center; padding: var(--ee88-s-5) var(--ee88-s-4); }
    .cta-card__actions { flex-direction: column; }
    .cta-card__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer {
    background: var(--ee88-dark);
    color: var(--ee88-text-invert-muted);
    padding-block: var(--ee88-s-7) var(--ee88-s-5);
    font-size: .9375rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: var(--ee88-s-6);
    padding-bottom: var(--ee88-s-6);
}

.footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ee88-s-2);
    margin-bottom: var(--ee88-s-3);
    min-height: 44px;
    color: #fff;
    font-weight: 800;
    font-size: 1.1875rem;
}

.footer__brand img { width: 34px; height: 34px; border-radius: var(--ee88-r-sm); }

.footer__about { font-size: .875rem; line-height: 1.75; margin-bottom: var(--ee88-s-4); }

/* Entity + contact signals: factual brand facts, not a NAP block.
   No address/phone/mailbox is rendered because none is verified. */
.footer__entity {
    font-size: .8125rem;
    line-height: 1.8;
    color: var(--ee88-text-invert-muted);
    padding: var(--ee88-s-3);
    margin-bottom: var(--ee88-s-4);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--ee88-border-dark);
    border-radius: var(--ee88-r-sm);
}

.footer__entity strong { color: #fff; }

.footer__contact { margin-bottom: var(--ee88-s-4); }

.footer__contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ee88-s-2);
    min-height: 44px;
    padding: var(--ee88-s-2) var(--ee88-s-4);
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--ee88-border-dark);
    border-radius: var(--ee88-r-sm);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    transition: background-color var(--ee88-t), border-color var(--ee88-t),
                transform var(--ee88-t);
}

.footer__contact-link svg { width: 18px; height: 18px; flex: none; }

.footer__contact-link:hover {
    background: var(--ee88-primary);
    border-color: var(--ee88-primary);
    transform: translateY(-2px);
}

.footer__title--sm { font-size: .8125rem; margin-bottom: var(--ee88-s-2); }

.footer__links--plain .footer__link { font-size: .875rem; }

.footer__social { display: flex; flex-wrap: wrap; gap: var(--ee88-s-2); }

.footer__social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--ee88-border-dark);
    border-radius: var(--ee88-r-sm);
    color: var(--ee88-text-invert-muted);
    transition: background-color var(--ee88-t), color var(--ee88-t),
                transform var(--ee88-t);
}

.footer__social a:hover {
    background: var(--ee88-primary);
    border-color: var(--ee88-primary);
    color: #fff;
    transform: translateY(-2px);
}

.footer__social svg { width: 18px; height: 18px; }

.footer__title {
    margin-bottom: var(--ee88-s-4);
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

.footer__links { display: grid; gap: 2px; }

.footer__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--ee88-text-invert-muted);
    font-size: .9375rem;
    transition: color var(--ee88-t), transform var(--ee88-t);
}

.footer__link:hover { color: #fff; transform: translateX(3px); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ee88-s-3);
    padding-top: var(--ee88-s-5);
    border-top: 1px solid var(--ee88-border-dark);
    font-size: .875rem;
}

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--ee88-s-2) var(--ee88-s-4); }

.footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ee88-text-invert-muted);
}

.footer__legal a:hover { color: #fff; text-decoration: underline; }

.footer__age {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--ee88-border-dark);
    border-radius: var(--ee88-r-pill);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

@media (max-width: 1023px) {
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ee88-s-5); }
}

@media (max-width: 599px) {
    .footer__grid { grid-template-columns: 1fr; gap: var(--ee88-s-5); }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
    .footer { padding-block: var(--ee88-s-6) var(--ee88-s-4); }
}

/* --------------------------------------------------------------------------
   16. Mobile sticky CTA bar
   -------------------------------------------------------------------------- */
.sticky-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 190;
    display: none;
    gap: var(--ee88-s-2);
    padding: var(--ee88-s-3) var(--ee88-s-4);
    padding-bottom: max(var(--ee88-s-3), env(safe-area-inset-bottom));
    background: rgba(14, 20, 24, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--ee88-border-dark);
    box-shadow: 0 -6px 24px rgba(14, 20, 24, .22);
}

.sticky-cta .btn { flex: 1 1 0; min-height: 48px; padding-inline: var(--ee88-s-2); font-size: .875rem; }

/* The UA rule for [hidden] is `display: none`, but our `display: flex` below
   wins on specificity and would keep the bar painted over the footer.
   JS sets `hidden` when the CTA band is reached — honour it. */
.sticky-cta[hidden] { display: none; }

@media (max-width: 767px) {
    .sticky-cta { display: flex; }
    /* JS sets this to the measured bar height so body padding reserves space */
    :root { --ee88-stickybar-h: 74px; }
}

/* --------------------------------------------------------------------------
   17. Responsive table safety net
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    /* Prevent long tokens (URLs, codes) from forcing page-wide scroll */
    body { overflow-wrap: break-word; word-break: break-word; }
    .cmp { min-width: 560px; }
}
/* --------------------------------------------------------------------------
   18. Share (native — no third-party SDK)
   -------------------------------------------------------------------------- */
/* Chi mot <button> + mot <a> cho tung mang xa hoi, va mot nut Web Share goc.
   Khong tai script ben thu ba: phong doi trinh duyet ho tro
   navigator.share se an nut do, chi giu "sao chep lien ket". */

.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ee88-s-2);
    margin-top: var(--ee88-s-5);
}

.share__label {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ee88-text-muted);
    margin-inline-end: var(--ee88-s-1);
}

.share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ee88-s-2);
    min-height: 40px;
    min-width: 40px;
    padding: 0 var(--ee88-s-3);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-sm);
    color: var(--ee88-text);
    font-size: .8125rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--ee88-t), border-color var(--ee88-t),
                color var(--ee88-t);
}

.share__btn:hover { background: var(--ee88-bg-soft); border-color: var(--ee88-border-strong); }
.share__btn:focus-visible { outline: 2px solid var(--ee88-primary); outline-offset: 2px; }
.share__btn svg { flex: none; }

/* Trong hero nen nen toi — nut dung mau chu sang */
.hero .share__btn {
    background: rgba(255, 255, 255, .08);
    border-color: var(--ee88-border-dark);
    color: var(--ee88-text-invert);
}

.hero .share__btn:hover { background: rgba(255, 255, 255, .16); }
.hero .share__label { color: var(--ee88-text-invert-muted); }

/* Trang thai "da sao chep" — dung aria-live de doc man hinh doc doc */
.share__btn.is-done { color: var(--ee88-success); border-color: var(--ee88-success); }
.hero .share__btn.is-done { color: #7BE3A3; border-color: #7BE3A3; }

/* An hoan toan (khong chi bang CSS) khi trinh duyet ho tro Web Share */
.share__btn[hidden] { display: none; }

.share__status {
    font-size: .8125rem;
    color: var(--ee88-success);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   22. Table of contents (trang chu) — HTML/CSS thuan, khong can JS
   --------------------------------------------------------------------------
   Muc dich: cho nguoi doc va cong cu tim thay "Muc Luc" bang mau thu vien va
   di chuyen nhanh den cac muc lon. Chi dung class .toc nen dung chung CSS
   nay khong doi bat ky trang con nao (trang con khong co .toc).
   ------------------------------------------------------------------------ */
.toc {
    max-width: 78ch;
    margin-inline: auto;
    padding: var(--ee88-s-5);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-xl);
    box-shadow: var(--ee88-sh-sm);
}

.toc__title {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-3);
    margin: 0 0 var(--ee88-s-3);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
}

.toc__title svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--ee88-primary);
}

.toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ee88-s-2) var(--ee88-s-5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.toc__list li { counter-increment: toc; }

.toc__link {
    display: flex;
    align-items: baseline;
    gap: var(--ee88-s-3);
    min-height: 44px;
    padding: var(--ee88-s-2) var(--ee88-s-2) var(--ee88-s-2) 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--ee88-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--ee88-border-strong);
    border-radius: var(--ee88-r-sm);
}

.toc__link::before {
    content: counter(toc) ".";
    flex: none;
    min-width: 1.5em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ee88-primary);
}

.toc__link:hover {
    color: var(--ee88-primary-hover);
    text-decoration-color: currentColor;
}

.toc__link:focus-visible {
    outline: 2px solid var(--ee88-primary);
    outline-offset: 2px;
}

.toc__note {
    margin: var(--ee88-s-4) 0 0;
    padding-top: var(--ee88-s-3);
    border-top: 1px solid var(--ee88-border);
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--ee88-text-muted);
}

@media (max-width: 639px) {
    .toc { padding: var(--ee88-s-4); }
    .toc__list { grid-template-columns: 1fr; gap: 0; }
    .toc__link { font-size: .9375rem; }
}

/* --------------------------------------------------------------------------
   23. Author / editorial card — ai bien tap, pham vi, ngay xuat ban & cap nhat
   -------------------------------------------------------------------------- */
.author-card {
    display: grid;
    gap: var(--ee88-s-4);
    max-width: 78ch;
    margin-inline: auto;
    padding: var(--ee88-s-5);
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-left: 3px solid var(--ee88-primary);
    border-radius: var(--ee88-r-lg);
}

.author-card__head {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-3);
}

.author-card__avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--ee88-primary-soft);
    color: var(--ee88-primary);
    font-weight: 800;
    font-size: .9375rem;
    letter-spacing: .02em;
}

.author-card__id { min-width: 0; }

.author-card__role {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ee88-text-muted);
}

.author-card__name {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--ee88-text);
}

/* Ngay xuat ban + cap nhat: hai muc rieng de nguoi doc phan biet ngay nao
   la lan phat hanh dau tien, ngay nao la ban sua noi dung gan nhat. */
.author-card__dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ee88-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.author-card__dates li {
    display: inline-flex;
    align-items: center;
    gap: var(--ee88-s-2);
    padding: var(--ee88-s-2) var(--ee88-s-3);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: 999px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ee88-text-muted);
}

.author-card__dates time { font-weight: 700; color: var(--ee88-text); }

.author-card__scope { margin: 0; }

.author-card__scope-title {
    margin: 0 0 var(--ee88-s-2);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ee88-text-muted);
}

.author-card__scope ul,
.factcheck__list {
    display: grid;
    gap: var(--ee88-s-2);
    margin: 0;
    padding-inline-start: var(--ee88-s-5);
}

.author-card__scope li,
.factcheck__list li {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ee88-text-muted);
}

.author-card__scope li::marker,
.factcheck__list li::marker { color: var(--ee88-primary); }

.author-card__scope strong,
.factcheck__list strong { color: var(--ee88-text); }

.author-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ee88-s-2) var(--ee88-s-4);
    margin: 0;
    padding: var(--ee88-s-3) 0 0;
    border-top: 1px solid var(--ee88-border);
    list-style: none;
    font-size: .875rem;
}

.author-card__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ee88-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.author-card__links a:hover { color: var(--ee88-primary-hover); }

@media (max-width: 639px) {
    .author-card { padding: var(--ee88-s-4); }
    .author-card__head { gap: var(--ee88-s-3); }
}

/* --------------------------------------------------------------------------
   24. Fact-check / phuong phap kiem chung — intro + danh sach quy trinh
   -------------------------------------------------------------------------- */
.factcheck {
    display: grid;
    gap: var(--ee88-s-4);
    max-width: 78ch;
    margin-inline: auto;
    padding: var(--ee88-s-5);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-xl);
    box-shadow: var(--ee88-sh-sm);
}

.factcheck__title {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-3);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
}

.factcheck__title svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--ee88-primary);
}

.factcheck__lead { margin: 0; }

.factcheck__lead p,
.factcheck__body p {
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--ee88-text-muted);
}

.factcheck__body p { margin: 0; }
.factcheck__body p + p { margin-top: var(--ee88-s-3); }

.factcheck__list strong { display: block; }

/* --------------------------------------------------------------------------
   Editorial standards — cùng design system voi .factcheck / .sources.
   -------------------------------------------------------------------------- */
.standards {
    display: grid;
    gap: var(--ee88-s-4);
    max-width: 78ch;
    margin-inline: auto;
    padding: var(--ee88-s-5);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-xl);
    box-shadow: var(--ee88-sh-sm);
}

.standards__title {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-3);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
}

.standards__title svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--ee88-primary);
}

.standards__lead {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--ee88-text-muted);
}

.standards__list {
    display: grid;
    gap: var(--ee88-s-2);
    margin: 0;
    padding-inline-start: var(--ee88-s-5);
    counter-reset: std;
}

.standards__list li {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ee88-text-muted);
}

.standards__list li::marker { color: var(--ee88-primary); font-weight: 700; }
.standards__list strong { color: var(--ee88-text); }

/* --------------------------------------------------------------------------
   Chinh sach sua loi / cap nhat / tieu chuan nguon — cac subsection E-E-A-T
   can them tren homepage de crawler nhan dien ro policy. Cung design
   system voi .standards: card trang, border, padding deu, h3 flex icon.
   -------------------------------------------------------------------------- */
.corrections {
    display: grid;
    gap: var(--ee88-s-3);
    max-width: 78ch;
    margin-inline: auto;
    padding: var(--ee88-s-5);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-xl);
    box-shadow: var(--ee88-sh-sm);
}

.corrections__title {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-3);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ee88-text);
}

.corrections__title svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--ee88-primary);
}

.corrections__lead {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.corrections__list {
    display: grid;
    gap: var(--ee88-s-2);
    margin: 0;
    padding-inline-start: var(--ee88-s-5);
}

.corrections__list li {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ee88-text-muted);
}

.corrections__list li::marker { color: var(--ee88-primary); font-weight: 700; }
.corrections__list strong { color: var(--ee88-text); }

.corrections__note {
    margin: 0;
    padding-top: var(--ee88-s-3);
    border-top: 1px solid var(--ee88-border);
    font-size: .875rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.corrections__note strong { color: var(--ee88-text); }

@media (max-width: 639px) {
    .corrections { padding: var(--ee88-s-4); }
    .corrections__title { font-size: 1.0625rem; }
}

.factcheck__group + .factcheck__group { margin-top: var(--ee88-s-5); }

.factcheck__group-title {
    margin: 0 0 var(--ee88-s-2);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ee88-text-muted);
}

@media (max-width: 639px) {
    .factcheck { padding: var(--ee88-s-4); }
}

/* --------------------------------------------------------------------------
   25. Nguon tham khao — chi danh nguon THAT, khong tao link gia
   -------------------------------------------------------------------------- */
.sources {
    max-width: 78ch;
    margin-inline: auto;
    padding: var(--ee88-s-5);
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-lg);
}

.sources__title {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-3);
    margin: 0 0 var(--ee88-s-3);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.3;
}

.sources__title svg {
    width: 21px;
    height: 21px;
    flex: none;
    color: var(--ee88-primary);
}

.sources__lead {
    margin: 0 0 var(--ee88-s-3);
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.sources__list {
    display: grid;
    gap: var(--ee88-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sources__list li {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ee88-text-muted);
}

.sources__list a {
    color: var(--ee88-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sources__list a:hover { color: var(--ee88-primary-hover); }

.sources__note {
    margin: var(--ee88-s-3) 0 0;
    padding-top: var(--ee88-s-3);
    border-top: 1px solid var(--ee88-border);
    font-size: .8125rem;
    line-height: 1.65;
    color: var(--ee88-text-muted);
}

@media (max-width: 639px) {
    .sources { padding: var(--ee88-s-4); }
}

/* --------------------------------------------------------------------------
   26. Tieu de muc dich + diem neo — anh chup man hinh khi bam muc luc
   `scroll-margin-top` giu tieu de khong bi header dinh che khi cuon toi.
   -------------------------------------------------------------------------- */
[id] { scroll-margin-top: calc(var(--ee88-header-h) + 16px); }


/* ==========================================================================
   27. GEO / AI Search — cac khoi moi cho trang chu
   Cung dung design system: cung mau sac, cung bo goc, cung radius, cung
   khoang cach 8px. Khong them framework, khong them JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   27.1 Tom tat (summary) — heading + <ul><li> ngay duoi, khong boc trong div
   chua text lien tuc. Dat ngay tren definition block de AI lay duoc
   "bai viet nay noi gi" ma khong phai doc het trang.
   -------------------------------------------------------------------------- */
.summary-block {
    max-width: 78ch;
    margin-inline: auto;
    padding: var(--ee88-s-5) var(--ee88-s-5) var(--ee88-s-5);
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-left: 4px solid var(--ee88-primary);
    border-radius: var(--ee88-r);
}

.summary-block .eyebrow {
    margin-bottom: var(--ee88-s-2);
    color: var(--ee88-primary);
}

.summary-block__title {
    margin: 0 0 var(--ee88-s-4);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--ee88-text);
}

.summary-block__list {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--ee88-s-3);
}

.summary-block__list li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.summary-block__list li::marker { color: var(--ee88-primary); }
.summary-block__list strong { color: var(--ee88-text); }

.summary-block__note {
    margin: var(--ee88-s-4) 0 0;
    padding-top: var(--ee88-s-3);
    border-top: 1px solid var(--ee88-border);
    font-size: .8125rem;
    line-height: 1.65;
    color: var(--ee88-text-muted);
}

@media (min-width: 900px) {
    .summary-block { padding: var(--ee88-s-6); }
    .summary-block__title { font-size: 1.5rem; }
}

@media (max-width: 639px) {
    .summary-block { padding: var(--ee88-s-4); }
    .summary-block__title { font-size: 1.1875rem; }
}

/* --------------------------------------------------------------------------
   27.2 Glossary — <dl> phan biet EE88 / EE88Hub / tac gia / thi truong.
   Muc dich: AI tach duoc hai entity thay vi gop "EE88Hub" vao chung mot
   khái niem voi "EE88".
   -------------------------------------------------------------------------- */
.glossary {
    margin: var(--ee88-s-4) 0;
    padding: var(--ee88-s-4);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
}

.glossary__term {
    margin: 0 0 var(--ee88-s-3);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ee88-text-muted);
}

.glossary__def { margin: 0; }

.glossary__list {
    margin: 0;
    display: grid;
    gap: var(--ee88-s-3);
}

.glossary__list dt {
    font-weight: 800;
    color: var(--ee88-text);
}

.glossary__list dd {
    margin: 2px 0 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.glossary__list dd strong { color: var(--ee88-primary-hover); }

.glossary__list code {
    padding: 1px 6px;
    font-size: .875em;
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-sm);
    color: var(--ee88-text);
}

/* --------------------------------------------------------------------------
   27.2b entity-definitions — <dl> tách hai entity EE88 và EE88Hub, đặt
   ngay sau hai block Direct-Answer để AI/crawler thấy đây là HAI thực
   thể tách biệt, không phải một. Dạng phẳng (không lồng <dl>), mỗi
   dt/dd là một dòng độc lập.
   -------------------------------------------------------------------------- */
.entity-definitions {
    margin: var(--ee88-s-4) 0 var(--ee88-s-3);
    padding: var(--ee88-s-4);
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
    list-style: none;
}

.entity-definitions dt {
    margin-top: var(--ee88-s-3);
    font-weight: 800;
    font-size: 1rem;
    color: var(--ee88-primary-hover);
}

.entity-definitions dt:first-child {
    margin-top: 0;
}

.entity-definitions dd {
    margin: 4px 0 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.entity-definitions dd code {
    padding: 1px 6px;
    font-size: .875em;
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r-sm);
    color: var(--ee88-text);
}

/* Đảm bảo class .direct-answer (mới) cũng có padding nổi bật giống
   .answer-first để câu đầu sau H2 câu hỏi luôn tách bạch. */
.definition-block p.direct-answer {
    color: var(--ee88-text);
    font-size: 1.0625rem;
    line-height: 1.75;
    padding: var(--ee88-s-3) var(--ee88-s-4);
    margin: 0 0 var(--ee88-s-3);
    background: var(--ee88-bg-soft);
    border-left: 4px solid var(--ee88-primary);
    border-radius: 0 var(--ee88-r) var(--ee88-r) 0;
}

/* --------------------------------------------------------------------------
   27.3 Answer-first — doan cau tra loi ngay duoi heading cau hoi. dung
   font nho hon mot chút va mau chu dam hon de tach khoi doan giai thich.
   -------------------------------------------------------------------------- */
.answer-first {
    color: var(--ee88-text) !important;
    font-size: 1.0625rem !important;
    line-height: 1.75 !important;
    padding-left: var(--ee88-s-4);
    border-left: 3px solid var(--ee88-primary);
}

@media (min-width: 900px) {
    .answer-first { font-size: 1.125rem !important; }
}

/* --------------------------------------------------------------------------
   27.4 Process cards (quy trinh 7 buoc) — HTML/CSS that thay cho SVG.
   Ly do: `<text>` trong inline SVG nhon theo viewBox, nen o khung nho chi con
   ~4-5px va dau tieng Viet tach khoi nguyen am; `<text>` cung khong tu xuong
   dong. Toan bo text gio nam trong DOM that, ke thua `--ee88-font` (Be
   Vietnam Pro + fallback tieng Viet day du). Khong dung letter-spacing /
   transform / writing-mode / text-orientation — chi can tieu de rut gon.
   -------------------------------------------------------------------------- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ee88-s-4);
    margin: var(--ee88-s-4) 0 0;
    padding: 0;
    list-style: none;          /* so thu tu do <ol> + icon tron, khong "1. 1." */
    counter-reset: process-step;
}

.process-card { counter-increment: process-step; }

.process-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ee88-s-2);
    padding: var(--ee88-s-4) var(--ee88-s-4) var(--ee88-s-5);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-top: 3px solid var(--ee88-primary);
    border-radius: var(--ee88-r);
    box-shadow: var(--ee88-sh-xs);
    /* chu Viet dai (tieu de buoc 4) khong duoc duoi ra ngoai the */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* So buoc do CSS counter sinh ra — khong viet so thu cong trong <li>, nen
   khong bao gio co tinh trang "1. 1." khi <ol> van hien marker. Chi la con
   so (1-7), khong phai chu tieng Viet nam trong pseudo-element. */
.process-card::before {
    content: counter(process-step);
    position: absolute;
    top: calc(var(--ee88-s-4) - 9px);
    right: var(--ee88-s-4);
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: var(--ee88-r-pill);
    background: var(--ee88-primary-soft);
    color: var(--ee88-primary);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.process-card__head {
    display: flex;
    align-items: center;
    gap: var(--ee88-s-3);
}

.process-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ee88-primary-soft);
    color: var(--ee88-primary);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.process-icon svg { width: 20px; height: 20px; }

.process-card__title {
    margin: 0;
    font-size: 1.125rem;          /* 18px */
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;       /* khong phai letter-spacing lon */
    color: var(--ee88-text);      /* 15.6:1 — dat AA */
    overflow-wrap: break-word;
}

.process-card__desc {
    margin: 0;
    font-size: .9375rem;          /* 15px */
    line-height: 1.65;
    color: var(--ee88-text-muted);/* 6.4:1 tren nen card — dat AA */
    overflow-wrap: break-word;
}

.process-grid__note {
    margin: var(--ee88-s-4) 0 0;
    padding-top: var(--ee88-s-3);
    border-top: 1px solid var(--ee88-border);
    font-size: .8125rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

/* Buoc 7 le: trai het hang, khong de mot the mo co lam mau */
@media (min-width: 769px) {
    .process-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .process-grid { grid-template-columns: 1fr; }
    .process-card__title { font-size: 1.0625rem; }
    .process-card__desc { font-size: .9375rem; }
}

@media (max-width: 639px) {
    .factcheck { padding: var(--ee88-s-4); }
    .process-card { padding: var(--ee88-s-3) var(--ee88-s-4) var(--ee88-s-4); }
    .process-icon { width: 36px; height: 36px; }
    .process-icon svg { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
   27.5 Video figure — YouTube iframe lazy embed. Dung aspect-ratio de
   trinh duyet reserve khung (CLS = 0) truoc khi iframe load.
   -------------------------------------------------------------------------- */
.video-figure {
    margin: 0;
    padding: var(--ee88-s-4);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
    box-shadow: var(--ee88-sh-sm);
}

.video-embed {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ee88-r-sm);
    background: var(--ee88-dark);
    box-shadow: var(--ee88-sh-sm);
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-figure figcaption {
    margin-top: var(--ee88-s-3);
    font-size: .875rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
    text-align: center;
}

.video-fallback {
    margin: var(--ee88-s-3) 0 0;
    font-size: .875rem;
    text-align: center;
    color: var(--ee88-text-muted);
}

.video-attribution {
    margin: var(--ee88-s-5) 0 0;
    padding: var(--ee88-s-4);
    background: var(--ee88-bg-soft);
    border-left: 4px solid var(--ee88-primary);
    border-radius: var(--ee88-r-sm);
    font-size: .875rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.video-attribution p { margin: 0; }
.video-attribution p + p { margin-top: var(--ee88-s-3); }
.video-attribution strong { color: var(--ee88-text); }

@media (max-width: 639px) {
    .video-figure { padding: var(--ee88-s-3); }
}

/* --------------------------------------------------------------------------
   27.6 Video transcript — <details> de mac dinh dong, khong lam loang UI.
   -------------------------------------------------------------------------- */
.video-transcript {
    background: var(--ee88-bg-soft);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
}

.video-transcript > summary {
    padding: var(--ee88-s-3) var(--ee88-s-4);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ee88-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--ee88-s-2);
    min-height: 44px;
}

.video-transcript > summary::-webkit-details-marker { display: none; }

.video-transcript > summary::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ee88-primary);
    border-bottom: 2px solid var(--ee88-primary);
    transform: rotate(-45deg);
    transition: transform var(--ee88-t);
    flex: none;
}

.video-transcript[open] > summary::before { transform: rotate(45deg); }

.video-transcript__body {
    padding: 0 var(--ee88-s-4) var(--ee88-s-4);
}

.video-transcript__body h3 {
    margin: 0 0 var(--ee88-s-2);
    font-size: 1rem;
    font-weight: 800;
    color: var(--ee88-text);
}

.video-transcript__body p {
    margin: 0 0 var(--ee88-s-3);
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.video-transcript__body ol {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--ee88-s-2);
}

.video-transcript__body li {
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.video-transcript__body li::marker { color: var(--ee88-primary); }
.video-transcript__body strong { color: var(--ee88-text); }

/* --------------------------------------------------------------------------
   27.7 Editorial meta (author) — <aside> chua metadata tac gia, tach khoi
   <dl> chinh noi dung. Label "Bien tap:" / "Tac gia:" de crawler doc duoc
   truc tiep trong raw HTML, khong phai doi vao JSON-LD.
   -------------------------------------------------------------------------- */
.editorial-meta {
    padding: var(--ee88-s-5);
    background: var(--ee88-bg);
    border: 1px solid var(--ee88-border);
    border-radius: var(--ee88-r);
    box-shadow: var(--ee88-sh-sm);
}

/* Mo ta vai tro cua nhom bien tap — trich ro cac trach nhiem thuc te:
   tong hop, doi chieu nguon, ra soat, kiem tra, bien tap, cap nhat,
   xu ly loi khi phat hien. Khong tuyen ba nang luc khong co that. */
.author-card__bio {
    margin: var(--ee88-s-4) 0 0;
    padding: var(--ee88-s-3) var(--ee88-s-4);
    background: var(--ee88-bg-soft);
    border-left: 3px solid var(--ee88-primary);
    border-radius: var(--ee88-r-sm);
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.author-card__bio strong { color: var(--ee88-text); }

.author-card__facts {
    margin: var(--ee88-s-4) 0 0;
    display: grid;
    gap: var(--ee88-s-2);
}

.author-card__fact {
    display: grid;
    grid-template-columns: minmax(120px, 168px) 1fr;
    gap: var(--ee88-s-3);
    align-items: baseline;
}

.author-card__fact dt {
    font-size: .875rem;
    font-weight: 700;
    color: var(--ee88-text);
}

.author-card__fact dd {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ee88-text-muted);
}

.author-card__fact dd strong { color: var(--ee88-text); }

@media (max-width: 639px) {
    .editorial-meta { padding: var(--ee88-s-4); }
    .author-card__fact { grid-template-columns: 1fr; gap: 2px; }
}

/* --------------------------------------------------------------------------
   27.8 Anh minh hoa raster trong .info-figure — width/height tren <img> de
   trinh duyet reserve dung khung, giu CLS = 0.
   -------------------------------------------------------------------------- */
.info-figure__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--ee88-r-sm);
    background: var(--ee88-bg);
}