:root {
    --red: #C8161D;
    --red-bright: #E1251B;
    --red-deep: #9B0D12;
    --red-dark: #6A070B;
    --red-ink: #3D0306;
    --red-soft: #FFF1F0;
    --red-line: #F6CFCB;
    --gold: #FFCD00;
    --gold-light: #FFE36B;
    --gold-deep: #C98F00;
    --gold-ink: #7A5600;
    --gold-soft: #FFF8DC;
    --ink: #1E1414;
    --ink-2: #4A3B3B;
    --ink-3: #7A6A6A;
    --paper: #FFFCF7;
    --line: #EFE3D9;
    --white: #FFFFFF;
    --shadow: 0 12px 32px -8px rgba(110, 7, 11, .14), 0 4px 12px -4px rgba(110, 7, 11, .06);
    --shadow-red: 0 12px 30px -6px rgba(200, 22, 29, .42);
    --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }
@media (max-width: 640px) { html { font-size: 16.5px; } }
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: var(--ink);
    background: var(--paper);
    background-image: radial-gradient(rgba(200, 22, 29, .07) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
::selection { background: var(--red); color: #fff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F6EEE8; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 4px; }
img, svg { max-width: 100%; }
a { color: inherit; }
strong { font-weight: 700; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.wrap-sm { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.serif { font-family: 'Noto Serif', Georgia, serif; }

/* ===== Longform header (chuẩn Báo Hà Tĩnh) ===== */
.longform-header {
    position: sticky; top: 0; z-index: 500; background: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; height: 52px; border-bottom: 1px solid #e8eaed;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.longform-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--red-dark) 0%, var(--red) 50%, var(--gold) 100%);
}
.longform-header h2 { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: 1; }
.longform-header .logo {
    width: 180px; height: 24px; display: block; text-indent: -999em;
    background: url(https://cdn.baohatinh.vn/assets/web/styles/img/logo.svg) 0 0 no-repeat;
}
.longform-header .headline {
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #1a1a1a; text-decoration: none; transition: color .2s;
}
.longform-header .headline:hover { color: var(--red); }
.lf-share-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px;
    background: #1877f2; color: #fff; font-size: 12px; font-weight: 600; border-radius: 4px;
    text-decoration: none; border: 0; cursor: pointer; line-height: 1.4; font-family: inherit;
}
.lf-share-btn:hover { background: #1565d8; }
@media (max-width: 640px) {
    .longform-header { padding: 0 12px; }
    .longform-header .logo { width: 130px; background-size: contain; }
    .longform-header .headline { display: none; }
}

/* ===== Progress & dot nav ===== */
.read-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 600;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    box-shadow: 0 0 10px rgba(255, 205, 0, .7);
}
.dot-nav {
    position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 400;
    display: none; flex-direction: column; gap: 10px;
}
@media (min-width: 1200px) { .dot-nav { display: flex; } }
.dot-nav a {
    position: relative; width: 12px; height: 12px; border-radius: 50%;
    background: rgba(200, 22, 29, .2); border: 2px solid transparent; transition: all .25s;
}
.dot-nav a:hover, .dot-nav a.is-active { background: var(--red); border-color: var(--gold); transform: scale(1.25); }
.dot-nav a span {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap;
    font-size: 12px; font-weight: 700; background: var(--red-dark); color: #fff; padding: 3px 10px;
    border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.dot-nav a:hover span { opacity: 1; }

/* ===== HERO ===== */
.hero {
    position: relative; overflow: hidden; color: #fff; text-align: center;
    background:
        radial-gradient(ellipse at 50% 18%, rgba(255, 205, 0, .28) 0%, transparent 46%),
        radial-gradient(ellipse at 0% 100%, rgba(255, 90, 60, .25) 0%, transparent 50%),
        linear-gradient(180deg, var(--red-dark) 0%, var(--red-deep) 34%, var(--red) 100%);
    padding: 56px 0 170px;
}
.hero-rays {
    position: absolute; left: 50%; top: 210px; width: 1800px; height: 1800px;
    transform: translate(-50%, -50%); pointer-events: none; opacity: .5;
    background: repeating-conic-gradient(from 0deg, rgba(255, 220, 90, .13) 0deg 4deg, transparent 4deg 12deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
    mask-image: radial-gradient(circle, #000 0%, transparent 62%);
    animation: spin 140s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero-pattern {
    position: absolute; inset: 0; pointer-events: none; opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath fill='%23FFD400' d='M40 26l3.3 10.1H54l-8.6 6.3 3.3 10.1L40 46.2l-8.7 6.3 3.3-10.1-8.6-6.3h10.7z'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.flag {
    position: absolute; top: 34px; width: 150px; pointer-events: none; z-index: 1;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.flag.left { left: 3%; }
.flag.right { right: 3%; }
.flag .cloth { animation: wave 5s ease-in-out infinite; transform-origin: 8px 0; }
@keyframes wave { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-3deg) scaleX(.97); } }
@media (max-width: 900px) { .flag { width: 92px; top: 18px; opacity: .55; } .flag.left { left: -14px; } .flag.right { right: -14px; } }
@media (max-width: 560px) { .flag { display: none; } }
.hero-inner { position: relative; z-index: 2; }
.hero-chip {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
    padding: 7px 18px; border-radius: 999px; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255, 220, 90, .45); color: var(--gold-light);
    font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.star-wrap { position: relative; width: 330px; height: 330px; margin: 22px auto 0; max-width: 88vw; }
@media (max-width: 560px) {
    .star-wrap { width: 240px; height: 240px; margin-top: 30px; }
    .star-label { font-size: .64rem; padding: 5px 10px; }
}
.star-wrap svg.big-star { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.big-star .glow { animation: pulse 4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
.big-star .star-body { animation: starIn 1.4s cubic-bezier(.2,.9,.25,1.2) both; transform-origin: 50% 52%; }
@keyframes starIn { from { transform: scale(.3) rotate(-72deg); opacity: 0; } to { transform: none; opacity: 1; } }
.star-label {
    position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
    font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem;
    color: var(--red-ink); background: linear-gradient(180deg, #FFF3B0, var(--gold));
    padding: 6px 13px; border-radius: 999px; box-shadow: 0 6px 18px rgba(60, 0, 0, .35);
    border: 2px solid #fff6c9; cursor: default; transition: transform .25s;
    animation: labelIn .6s both;
}
.star-label:hover { transform: translate(-50%, -50%) scale(1.1); }
@keyframes labelIn { from { opacity: 0; transform: translate(-50%, -30%); } }
.star-center {
    position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%);
    text-align: center; color: var(--red-ink); line-height: 1.1;
}
.star-center b { display: block; font-size: 1.05rem; font-weight: 900; letter-spacing: .02em; }
.star-center span { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
.hero h1 { margin: 26px 0 0; font-weight: 900; text-transform: uppercase; line-height: 1.22; }
.hero h1 .l1 { display: block; font-size: 1.2rem; letter-spacing: .1em; color: #FFE7D6; font-weight: 700; }
.hero h1 .l2 { display: block; margin-top: 10px; font-size: 2.55rem; color: var(--gold); text-shadow: 0 4px 22px rgba(0,0,0,.25); }
.hero h1 .l3 { display: block; margin-top: 6px; font-size: 1.45rem; color: #fff; }
@media (max-width: 640px) {
    .hero h1 .l1 { font-size: .9rem; }
    .hero h1 .l2 { font-size: 1.42rem; }
    .hero h1 .l3 { font-size: 1.05rem; }
}
.gold-line { display: block; width: 80px; height: 3px; margin: 22px auto; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.hero-lead { max-width: 780px; margin: 0 auto; font-size: 1rem; line-height: 1.85; color: #FFE9E3; font-weight: 300; }
.hero-lead strong { color: #fff; font-weight: 700; }
.hero-nav { margin: 36px auto 0; max-width: 920px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: left; }
@media (max-width: 760px) { .hero-nav { grid-template-columns: repeat(2, 1fr); } }
.nav-btn {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
    text-decoration: none; font-size: .76rem; font-weight: 600; line-height: 1.35;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); color: #fff;
    backdrop-filter: blur(4px); transition: all .25s;
}
.nav-btn i { color: var(--gold); width: 18px; text-align: center; flex-shrink: 0; }
.nav-btn:hover { background: #fff; color: var(--red-dark); transform: translateY(-2px); }
.nav-btn:hover i { color: var(--red); }
.hero-bottom { position: absolute; left: 0; right: 0; bottom: -1px; height: 120px; z-index: 1; }

/* ===== Floating card ===== */
.lift { position: relative; z-index: 5; margin-top: -120px; }
.card {
    background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow);
}

/* ===== Section heading ===== */
main { padding: 70px 0 30px; }
.sec { scroll-margin-top: 70px; margin-bottom: 92px; }
.sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.sec-badge {
    width: 3.1rem; height: 3.1rem; flex-shrink: 0; position: relative; display: flex;
    align-items: center; justify-content: center; color: var(--red-ink); font-weight: 900; font-size: 1.05rem;
}
.sec-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(200,22,29,.35)); }
.sec-badge b { position: relative; z-index: 1; margin-top: 3px; font-size: .8rem; }
.kicker { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 2px; }
.sec-title { margin: 0; font-size: 1.45rem; line-height: 1.38; font-weight: 900; text-transform: uppercase; color: var(--red-ink); }
@media (max-width: 640px) { .sec-title { font-size: 1.12rem; } }
.sec-intro { margin: -10px 0 26px; color: var(--ink-2); font-size: .92rem; max-width: 860px; }
.divider { height: 1px; margin: 0 0 92px; background: linear-gradient(90deg, transparent, var(--red-line) 20%, var(--red-line) 80%, transparent); position: relative; }
.divider::after {
    content: '★'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: var(--paper); color: var(--gold-deep); padding: 0 14px; font-size: 14px;
}
.src { display: inline-flex; align-items: center; gap: 6px; font-size: .66rem; color: var(--ink-3); font-style: italic; margin-top: 10px; }

/* ===== Reveal ===== */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; }
    .hero-rays, .big-star .glow, .flag .cloth { animation: none; }
}

/* ===== 01 Căn cứ ===== */
.basis { padding: 30px; }
@media (max-width: 640px) { .basis { padding: 22px 16px; } }
.basis-title { text-align: center; margin-bottom: 22px; }
.basis-title h2 { margin: 0; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; color: var(--red-dark); line-height: 1.4; }
.docs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; }
.docs::before {
    content: ''; position: absolute; left: 6%; right: 6%; top: 27px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--gold-deep) 0 6px, transparent 6px 12px);
}
@media (max-width: 860px) { .docs { grid-template-columns: 1fr; } .docs::before { left: 27px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--gold-deep) 0 6px, transparent 6px 12px); } }
.doc { position: relative; text-align: center; }
.doc-dot {
    width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid var(--red-line); color: var(--red); font-size: 1.05rem; position: relative; z-index: 1;
}
.doc.is-main .doc-dot { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: var(--gold); border-color: var(--gold); box-shadow: var(--shadow-red); }
.doc-date { font-size: .66rem; font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); display: inline-block; padding: 2px 9px; border-radius: 999px; }
.doc-no { font-weight: 900; color: var(--red-dark); font-size: .9rem; margin-top: 6px; }
.doc-desc { font-size: .72rem; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }
@media (max-width: 860px) {
    .doc { display: grid; grid-template-columns: 54px 1fr; gap: 14px; text-align: left; align-items: start; }
    .doc-dot { margin: 0; }
}

/* ===== 02 Mục đích ===== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.aim {
    position: relative; padding: 24px 24px 22px 76px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
    overflow: hidden;
}
.aim:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -12px rgba(110,7,11,.25); }
.aim .num {
    position: absolute; left: 20px; top: 22px; width: 40px; height: 40px; border-radius: 12px;
    background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.aim h3 { margin: 0 0 6px; font-size: .95rem; font-weight: 900; color: var(--red-dark); line-height: 1.4; }
.aim p { margin: 0; font-size: .84rem; color: var(--ink-2); line-height: 1.7; }
.aim::after { content: attr(data-n); position: absolute; right: 14px; bottom: -22px; font-size: 5.5rem; font-weight: 900; color: rgba(200,22,29,.05); line-height: 1; }

/* ===== 03 Mục tiêu tổng quát ===== */
.goal {
    display: grid; grid-template-columns: 5fr 7fr; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); background: #fff; border: 1px solid var(--line);
}
@media (max-width: 860px) { .goal { grid-template-columns: 1fr; } }
.goal-l {
    padding: 34px 30px; color: #fff; position: relative; overflow: hidden;
    background: radial-gradient(circle at 90% 10%, rgba(255,205,0,.28), transparent 45%), linear-gradient(150deg, var(--red) 0%, var(--red-deep) 60%, var(--red-dark) 100%);
}
.goal-l .ghost-star { position: absolute; right: -50px; bottom: -60px; width: 240px; opacity: .13; }
.goal-l .kicker { color: var(--gold-light); }
.goal-l h3 { margin: 6px 0 18px; font-size: 1.3rem; font-weight: 900; line-height: 1.35; text-transform: uppercase; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list span {
    font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--red-ink);
}
.tt-box { margin-top: 26px; padding: 16px 18px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px dashed rgba(255,220,90,.55); }
.tt-box b { display: block; font-family: 'Noto Serif', serif; font-size: 1.35rem; color: var(--gold); font-style: italic; }
.tt-box small { font-size: .74rem; color: #FFE1DA; }
.goal-r { padding: 30px 30px; }
@media (max-width: 640px) { .goal-r, .goal-l { padding: 26px 18px; } }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; font-size: .88rem; color: var(--ink-2); line-height: 1.7; }
.checks li i { color: var(--red); margin-top: 5px; flex-shrink: 0; }
.checks strong { color: var(--red-dark); }

/* ===== 04 Chỉ tiêu ===== */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tab {
    border: 1px solid var(--red-line); background: #fff; color: var(--ink-2); font-family: inherit;
    font-size: .76rem; font-weight: 700; padding: 9px 15px; border-radius: 999px; cursor: pointer; transition: all .2s;
    display: inline-flex; align-items: center; gap: 7px;
}
.tab i { color: var(--red); }
.tab:hover { border-color: var(--red); color: var(--red-dark); }
.tab.is-active { background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff; border-color: transparent; box-shadow: var(--shadow-red); }
.tab.is-active i { color: var(--gold); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.kpi {
    position: relative; padding: 20px 20px 18px; background: #fff; border-radius: 18px; border: 1px solid var(--line);
    box-shadow: var(--shadow); overflow: hidden; animation: kpiIn .5s both;
}
@keyframes kpiIn { from { opacity: 0; transform: translateY(14px); } }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--red)); }
.kpi .val { font-size: 2.1rem; font-weight: 900; color: var(--red); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .val small { font-size: .95rem; font-weight: 800; margin-left: 2px; }
.kpi .val .pre { font-size: .8rem; font-weight: 800; color: var(--gold-ink); background: var(--gold-soft); border-radius: 6px; padding: 2px 6px; margin-right: 6px; vertical-align: middle; letter-spacing: 0; }
.kpi p { margin: 8px 0 0; font-size: .8rem; color: var(--ink-2); line-height: 1.55; }
.kpi .bar { margin-top: 12px; height: 6px; border-radius: 4px; background: #F6EAE4; overflow: hidden; }
.kpi .bar span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width 1.3s cubic-bezier(.16,1,.3,1); }
.kpi.feature { background: linear-gradient(140deg, var(--red) 0%, var(--red-dark) 100%); border-color: transparent; color: #fff; }
.kpi.feature .val { color: var(--gold); }
.kpi.feature p { color: #FFE3DC; }
.kpi.feature .bar { background: rgba(255,255,255,.18); }
.kpi.feature .bar span { background: var(--gold); }
.kpi.text-only .val { font-size: 1.15rem; line-height: 1.35; }
.note-strip {
    margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: var(--gold-soft); border: 1px solid #F3DE9A;
    font-size: .84rem; color: var(--ink-2); display: flex; gap: 12px;
}
.note-strip i { color: var(--gold-deep); margin-top: 4px; }

/* ===== 05 Tầm nhìn 2045 ===== */
.vision {
    position: relative; overflow: hidden; border-radius: 30px; color: #fff; padding: 44px 40px;
    background: radial-gradient(ellipse at 15% 0%, rgba(255,205,0,.3), transparent 50%), linear-gradient(135deg, var(--red-dark) 0%, var(--red-deep) 45%, var(--red) 100%);
    box-shadow: var(--shadow-red);
    display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center;
}
@media (max-width: 860px) { .vision { grid-template-columns: 1fr; padding: 30px 20px; gap: 20px; } }
.vision .year { font-size: 6.2rem; font-weight: 900; line-height: .9; color: var(--gold); letter-spacing: -.03em; text-shadow: 0 8px 30px rgba(0,0,0,.25); }
.vision .year-k { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #FFD9CF; }
.vision blockquote { margin: 0; font-family: 'Noto Serif', serif; font-size: 1.04rem; line-height: 1.85; color: #FFF1EC; }
.vision blockquote b { color: var(--gold-light); font-weight: 700; }
.vision .rays { position: absolute; right: -200px; top: -200px; width: 600px; height: 600px; opacity: .25; background: repeating-conic-gradient(rgba(255,220,90,.35) 0deg 3deg, transparent 3deg 12deg); -webkit-mask-image: radial-gradient(circle, #000, transparent 65%); mask-image: radial-gradient(circle, #000, transparent 65%); pointer-events: none; }
.vision-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vision-tags span { font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,220,90,.5); color: var(--gold-light); background: rgba(0,0,0,.12); }

/* ===== 06 Ba đột phá ===== */
.bk {
    position: relative; padding: 30px 26px 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow); overflow: hidden; transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.bk:hover { transform: translateY(-6px); }
.bk .bk-n {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--gold); background: linear-gradient(135deg, var(--red), var(--red-dark));
    box-shadow: var(--shadow-red); border: 3px solid var(--gold); margin-bottom: 18px;
}
.bk .tag { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.bk h3 { margin: 4px 0 0; font-size: 1.04rem; line-height: 1.45; font-weight: 900; color: var(--red-dark); }
.bk .big { position: absolute; right: 10px; top: -8px; font-size: 7rem; font-weight: 900; color: rgba(200,22,29,.06); line-height: 1; }
.bk-foot {
    margin-top: 18px; padding: 18px 22px; border-radius: 18px; background: #fff; border: 1px dashed var(--red-line);
    font-size: .86rem; color: var(--ink-2);
}
.bk-foot strong { color: var(--red-dark); }

/* ===== 07 Nhiệm vụ, giải pháp ===== */
.task-shell { display: grid; grid-template-columns: 330px 1fr; gap: 20px; align-items: start; }
@media (max-width: 920px) { .task-shell { grid-template-columns: 1fr; } }
.task-list { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 70px; }
@media (max-width: 920px) { .task-list { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; } }
.task-btn {
    display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
    padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer;
    font-family: inherit; font-size: .78rem; font-weight: 700; color: var(--ink-2); line-height: 1.4; transition: all .2s;
}
@media (max-width: 920px) { .task-btn { min-width: 230px; scroll-snap-align: start; } }
.task-btn .n {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: var(--red-soft); color: var(--red); font-weight: 900; font-size: .82rem;
}
.task-btn:hover { border-color: var(--red); color: var(--red-dark); }
.task-btn.is-active { background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff; border-color: transparent; box-shadow: var(--shadow-red); }
.task-btn.is-active .n { background: var(--gold); color: var(--red-ink); }
.task-panel { background: #fff; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; min-height: 420px; }
.tp-head {
    padding: 26px 28px; color: #fff; position: relative; overflow: hidden;
    background: radial-gradient(circle at 95% 0%, rgba(255,205,0,.3), transparent 45%), linear-gradient(135deg, var(--red), var(--red-dark));
}
.tp-head .kicker { color: var(--gold-light); }
.tp-head h3 { margin: 4px 0 0; font-size: 1.15rem; line-height: 1.45; font-weight: 900; }
.tp-head i.bg { position: absolute; right: 18px; bottom: -14px; font-size: 6rem; opacity: .12; }
.tp-body { padding: 24px 28px 28px; animation: kpiIn .45s both; }
@media (max-width: 640px) { .tp-head, .tp-body { padding-left: 18px; padding-right: 18px; } }
.tp-body .lead { font-family: 'Noto Serif', serif; font-size: .95rem; line-height: 1.85; color: var(--ink); border-left: 4px solid var(--gold); padding: 4px 0 4px 16px; margin: 0 0 20px; }
.tp-body h4 { margin: 22px 0 10px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 8px; }
.tp-body h4::after { content: ''; flex: 1; height: 1px; background: var(--red-line); }
.tp-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tp-body ul li { position: relative; padding-left: 22px; font-size: .86rem; color: var(--ink-2); line-height: 1.7; }
.tp-body ul li::before { content: '★'; position: absolute; left: 0; top: 0; color: var(--gold-deep); font-size: .78rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: .74rem; font-weight: 600; padding: 6px 12px; border-radius: 10px; background: var(--red-soft); color: var(--red-dark); border: 1px solid var(--red-line); }
.chip.gold { background: var(--gold-soft); color: var(--gold-ink); border-color: #F3DE9A; }
.chip.doc { background: #fff; color: var(--ink-2); border: 1px dashed var(--ink-3); }
.chip.doc i { color: var(--red); margin-right: 5px; }
.motto { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 640px) { .motto { grid-template-columns: repeat(3, 1fr); } }
.motto div { text-align: center; padding: 14px 6px; border-radius: 14px; background: linear-gradient(180deg, var(--red-soft), #fff); border: 1px solid var(--red-line); }
.motto div i { display: block; color: var(--red); font-size: 1.1rem; margin-bottom: 6px; }
.motto div b { display: block; font-size: .72rem; color: var(--red-dark); line-height: 1.3; }
.quote-hl { display: inline-block; font-family: 'Noto Serif', serif; font-weight: 700; font-style: italic; color: var(--red); }

/* ===== 08 Phụ lục ===== */
.lead-chart { padding: 24px; margin-bottom: 20px; }
@media (max-width: 640px) { .lead-chart { padding: 18px 14px; } }
.lc-row { display: grid; grid-template-columns: 220px 1fr 40px; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 10px; cursor: pointer; transition: background .2s; border: 0; background: none; width: 100%; font-family: inherit; text-align: left; }
.lc-row:hover, .lc-row.is-active { background: var(--red-soft); }
.lc-row .nm { font-size: .78rem; font-weight: 700; color: var(--ink-2); line-height: 1.35; }
.lc-row .tr { height: 14px; border-radius: 7px; background: #F6EAE4; overflow: hidden; }
.lc-row .tr span { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, var(--red), var(--red-bright)); transition: width 1.2s cubic-bezier(.16,1,.3,1); }
.lc-row.is-active .tr span { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.lc-row .ct { font-weight: 900; color: var(--red); font-size: .95rem; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .lc-row { grid-template-columns: 1fr 34px; } .lc-row .nm { grid-column: 1 / -1; } }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 760px) { .filters { grid-template-columns: 1fr; } }
.field { position: relative; }
.field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--red); font-size: .85rem; pointer-events: none; }
.field input, .field select {
    width: 100%; padding: 12px 14px 12px 38px; font-family: inherit; font-size: .82rem; color: var(--ink);
    border: 1px solid var(--red-line); border-radius: 14px; background: #fff; outline: none; -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--red) 50%), linear-gradient(135deg, var(--red) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field input:focus, .field select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,22,29,.12); }
.result-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: var(--ink-3); margin-bottom: 14px; }
.result-bar b { color: var(--red); }
.reset-btn { border: 0; background: none; color: var(--red); font-weight: 700; font-size: .76rem; cursor: pointer; font-family: inherit; }
.grp-title {
    margin: 26px 0 12px; display: flex; gap: 12px; align-items: flex-start; font-size: .8rem; font-weight: 900;
    text-transform: uppercase; color: var(--red-dark); line-height: 1.45;
}
.grp-title .rn { flex-shrink: 0; min-width: 42px; padding: 3px 8px; border-radius: 8px; text-align: center; background: var(--red); color: var(--gold); font-size: .78rem; }
.items { display: grid; gap: 10px; }
.item { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.item:hover { border-color: var(--red-line); box-shadow: var(--shadow); }
.item-h { display: grid; grid-template-columns: 46px 1fr 26px; gap: 12px; padding: 14px 16px; cursor: pointer; align-items: start; width: 100%; background: none; border: 0; text-align: left; font-family: inherit; color: inherit; }
.item-h .tt { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .85rem; background: var(--red-soft); color: var(--red); }
.item-h .txt { font-size: .84rem; line-height: 1.6; color: var(--ink); font-weight: 500; }
.item-h .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.item-h .meta span { font-size: .66rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.m-lead { background: var(--red); color: #fff; }
.m-time { background: var(--gold-soft); color: var(--gold-ink); }
.item-h .chev { color: var(--red); margin-top: 10px; transition: transform .25s; }
.item.is-open .chev { transform: rotate(180deg); }
.item.is-open .item-h .tt { background: var(--red); color: var(--gold); }
.item-b { display: none; padding: 0 16px 16px 74px; }
@media (max-width: 640px) { .item-b { padding-left: 16px; } }
.item.is-open .item-b { display: block; animation: kpiIn .35s both; }
.dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 640px) { .dl { grid-template-columns: 1fr; } }
.dl div { padding: 11px 14px; border-radius: 12px; background: #FBF6F2; border: 1px solid var(--line); }
.dl dt { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 3px; }
.dl dd { margin: 0; font-size: .8rem; color: var(--ink-2); line-height: 1.6; }
mark { background: var(--gold-light); color: inherit; padding: 0 2px; border-radius: 3px; }
.empty { text-align: center; padding: 40px 10px; color: var(--ink-3); font-size: .86rem; }

/* ===== 09 Tổ chức thực hiện ===== */
.roadmap { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 30px; }
@media (max-width: 860px) { .roadmap { grid-template-columns: 1fr; } }
.rm { position: relative; padding: 20px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.rm .when { font-size: 1.25rem; font-weight: 900; color: var(--red); line-height: 1.2; }
.rm .when small { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 4px; }
.rm p { margin: 8px 0 0; font-size: .78rem; color: var(--ink-2); line-height: 1.55; }
.rm.hl { background: linear-gradient(140deg, var(--red), var(--red-dark)); border-color: transparent; }
.rm.hl .when { color: var(--gold); }
.rm.hl .when small { color: #FFD9CF; }
.rm.hl p { color: #FFE6DF; }
.org { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 760px) { .org { grid-template-columns: 1fr; } }
.org-item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; background: #fff; border-radius: 18px; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.org-item:hover { border-color: var(--red-line); box-shadow: var(--shadow); }
.org-item .ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--red-soft); color: var(--red); font-size: 1rem; }
.org-item h4 { margin: 0 0 4px; font-size: .86rem; font-weight: 900; color: var(--red-dark); line-height: 1.4; }
.org-item p { margin: 0; font-size: .79rem; color: var(--ink-2); line-height: 1.65; }
.org-item.key { grid-column: 1 / -1; background: linear-gradient(135deg, var(--gold-soft), #fff); border-color: #F3DE9A; }
.org-item.key .ic { background: var(--red); color: var(--gold); }

/* ===== Footer ===== */
footer { position: relative; background: #fff; border-top: 1px solid var(--line); padding: 50px 0 120px; color: var(--ink-3); overflow: hidden; }
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--red-dark), var(--red), var(--gold)); }
.sign { text-align: center; margin-bottom: 26px; }
.sign small { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--red); }
.sign b { display: block; font-size: .95rem; color: var(--ink); margin-top: 4px; }
.sign span { font-size: .78rem; }
.foot-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: .74rem; border-top: 1px solid var(--line); padding-top: 20px; }
.top-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-family: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.top-btn i { color: var(--red); }
.top-btn:hover { border-color: var(--red); color: var(--red); }