/* ===================================================================
CSS PRODUCTION FINAL - HIỆU ỨNG CYBER + TYPOGRAPHY HIERARCHY
BẢN TỐI ƯU, KHÔNG LỖI, PHÂN TẦNG RÕ RÀNG
=================================================================== */

/* ----- RESET & VARIABLES ----- */
:root {
--bg: #E8EEF6;
--bg-card: #FFFFFF;
--border: #93C5FD;
--heading: #0A0F1A;
--text: #05070B;
--text-secondary: #1E293B;
--text-muted: #475569;
--accent: #1E3A8A;
--accent-hover: #2563EB;
--accent-light: #DBEAFE;
--header-dark: #0f1a3a;
--header-bright: #2563EB;
--pros-bg: #DCFCE7;
--pros-heading: #15803D;
--cons-bg: #FEE2E2;
--cons-heading: #B91C1C;
--radius: 18px;
--radius-sm: 10px;
--shadow: 0 4px 16px rgba(0,0,0,0.06);
--shadow-hover: 0 8px 32px rgba(30,58,138,0.12);
--font-display: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--max-width: 1240px;
--nav-height: 64px;
--gold: rgba(255,215,0,0.6);
--gold-light: rgba(255,215,0,0.3);
--gold-glow: rgba(255,215,0,0.25);
--gold-strong: rgba(255,215,0,0.8);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
font-size: 19px;
line-height: 1.85;
font-weight: 400;
padding-top: var(--nav-height);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
radial-gradient(circle at 30% 25%, rgba(139,92,246,0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 75%, rgba(59,130,246,0.06) 0%, transparent 45%),
radial-gradient(circle at 10% 90%, rgba(236,72,153,0.03) 0%, transparent 40%);
pointer-events: none;
z-index: 0;
}
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; transition: 0.15s ease; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: rgba(37,99,235,0.12); color: var(--accent); }
.icon { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }

/* ----- NAVBAR (giữ nguyên, có glow gold) ----- */
.navbar {
background: linear-gradient(90deg, var(--header-dark) 0%, var(--header-bright) 50%, var(--header-dark) 100%);
border-bottom: 3px solid var(--gold-strong);
border-left: 1px solid var(--gold);
border-right: 1px solid var(--gold);
position: fixed; top:0; left:0; right:0; z-index:100;
height: var(--nav-height); display:flex; align-items:center;
box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 0 20px var(--gold-glow), inset 0 -1px 0 var(--gold-light);
}
.nav-container { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:var(--max-width); margin:0 auto; padding:0 1.5rem; }
.logo { font-family: var(--font-display); font-weight:700; font-size:1.3rem; cursor:pointer; letter-spacing:-0.02em; display:flex; align-items:center; gap:10px; color: #fff; }
.logo .s-icon { width:32px; height:32px; border-radius:var(--radius-sm); background: linear-gradient(135deg, #1E3A8A, #3B82F6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.9rem; font-weight:800; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.logo span { color: #93C5FD; }
.nav-links { display:flex; align-items:center; gap:0.1rem; flex-wrap:wrap; }
.nav-item { position:relative; }
.nav-link, .dropbtn {
display:inline-flex; align-items:center; gap:6px; padding:0.4rem 0.8rem;
border-radius:999px; font-size:0.84rem; font-weight:600;
color: rgba(255,255,255,0.95); background:none; border:none; cursor:pointer;
transition: 0.15s ease; white-space:nowrap; font-family:var(--font-body);
}
.nav-link:hover, .dropbtn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav-link.active, .dropbtn.active { background: rgba(255,255,255,0.2); color: #fff; box-shadow: 0 2px 8px rgba(255,255,255,0.1); }
.dropbtn .icon { transition: transform 0.2s ease; }
.nav-item.open .dropbtn .icon { transform: rotate(180deg); }
.nav-link.featured-header-badge {
display:inline-flex; align-items:center; gap:4px;
background:#FFFFFF; color:#0F172A; padding:2px 14px 2px 10px;
border-radius:999px; font-size:0.7rem; font-weight:700;
border:1px solid rgba(0,0,0,0.06); box-shadow:0 2px 8px rgba(0,0,0,0.08);
margin-right:6px; white-space:nowrap; text-transform:uppercase; letter-spacing:0.04em; cursor:pointer;
}
.nav-link.featured-header-badge:hover { color:#0F172A; background:#F8FAFC; }
.featured-header-badge .fire { color:#EF4444; font-size:0.9rem; }
.nav-link.featured-header-badge.active {
background:#FFFFFF; color:#0F172A; border:1.5px solid var(--gold-strong);
box-shadow:0 0 0 3px var(--gold-glow), 0 2px 10px rgba(0,0,0,0.12);
}
.dropdown-content {
display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:200px;
background: rgba(255,255,255,0.94); border:1px solid rgba(0,0,0,0.02);
border-radius:var(--radius); box-shadow: var(--shadow); padding:0.4rem; z-index:200;
}
.nav-item.open .dropdown-content { display:block; }
.dropdown-content a {
display:flex; align-items:center; gap:10px; padding:0.5rem 0.8rem;
border-radius:var(--radius-sm); color:var(--text-secondary); font-size:0.84rem; font-weight:500;
transition: 0.15s ease;
}
.dropdown-content a:hover { background:rgba(37,99,235,0.04); color:var(--accent); }
.dropdown-content a .icon { color:var(--text-muted); }
.nav-actions { display:flex; align-items:center; gap:0.2rem; }
.search-btn, .mobile-toggle {
background: none; border: none; cursor:pointer; color:rgba(255,255,255,0.9);
width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
transition: 0.15s ease;
}
.search-btn:hover, .mobile-toggle:hover { background:rgba(255,255,255,0.15); color:#fff; }
.mobile-toggle { display:none; }

/* ----- SEARCH (giữ nguyên) ----- */
.search-overlay {
position:fixed; inset:0; background:rgba(0,0,0,0.03); z-index:300;
display:none; align-items:flex-start; justify-content:center; padding-top:90px;
}
.search-overlay.open { display:flex; }
.search-modal {
background: #fff; max-width:520px; width:92%; border-radius:var(--radius);
padding:1.6rem; box-shadow: 0 12px 32px rgba(0,0,0,0.02); border:1px solid rgba(0,0,0,0.02);
}
.search-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.search-modal-header h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--heading); }
.search-modal-close {
background: var(--bg); border:none; width:30px; height:30px; border-radius:50%;
cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center;
}
.search-input-wrap {
display:flex; align-items:center; gap:0.6rem; background:var(--bg);
border-radius:var(--radius-sm); padding:0 1rem; border:2px solid transparent;
}
.search-input-wrap:focus-within { border-color:var(--accent); background:#fff; }
.search-input-wrap input {
border:none; background:transparent; padding:0.8rem 0; font-size:0.95rem;
color:var(--text); width:100%; outline:none; font-family:var(--font-body);
}
.search-input-wrap input::placeholder { color:var(--text-muted); }
.search-suggestions {
margin-top:0.9rem; display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center;
}
.search-suggestions .label { font-size:0.78rem; color:var(--text-muted); font-weight:500; }
.search-suggestions span[data-term] {
font-size:0.78rem; color:var(--text-muted); background:var(--bg);
padding:0.3rem 0.85rem; border-radius:999px; cursor:pointer; font-weight:500;
transition: 0.15s ease;
}
.search-suggestions span[data-term]:hover { background:var(--accent); color:#fff; }
.search-results {
margin-top:1rem; border-top:1px solid rgba(0,0,0,0.02); padding-top:0.6rem;
max-height:320px; overflow-y:auto;
}
.search-result-item { padding:0.6rem 0.5rem; border-radius:6px; cursor:pointer; transition: 0.15s ease; }
.search-result-item:hover { background:var(--bg); }
.search-result-item strong { font-size:0.9rem; color:var(--text); }
.search-result-item span { font-size:0.78rem; color:var(--text-muted); }

/* ----- HERO (giữ nguyên) ----- */
.hero-mini { text-align:center; padding:2.8rem 0 2rem; position:relative; }
.hero-mini .badge {
display:inline-block; font-size:0.7rem; font-weight:700; color:var(--accent);
background:var(--accent-light); padding:0.2rem 1.2rem; border-radius:999px;
margin-bottom:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
}
.hero-mini h1 {
font-family:var(--font-display); font-size:2.4rem; font-weight:700;
color:var(--heading); margin-bottom:0.2rem; letter-spacing:-0.02em;
}
.hero-mini h1 #heroAccent {
background: linear-gradient(135deg, #1E3A8A, #3B82F6);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-mini p { font-size:1.05rem; color:var(--text-secondary); max-width:520px; margin:0 auto; font-weight:500; }

/* ----- CARDS (giữ nguyên) ----- */
.card-grid {
display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin:1.5rem 0 2.5rem;
}
@media (max-width:1199px) { .card-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:991px) { .card-grid { grid-template-columns:repeat(2,1fr); gap:1rem; } }
@media (max-width:600px) { .card-grid { grid-template-columns:1fr; } }
.card {
background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow); transition: 0.25s ease; cursor:pointer;
display:flex; flex-direction:column;
}
.card:hover { transform:translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-hover); }
.card-banner { height:150px; width:100%; overflow:hidden; background: var(--bg); }
.card-banner img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition: opacity 0.4s ease; }
.card-banner img.loaded { opacity:1; }
.card-body { padding:1.2rem; display:flex; flex-direction:column; flex-grow:1; }
.card-meta {
display:flex; justify-content:space-between; align-items:center;
font-size:0.7rem; color:var(--text-muted); margin-bottom:0.4rem;
}
.tag {
font-size:0.65rem; font-weight:700; color:var(--accent); text-transform:uppercase;
letter-spacing:0.06em; background:var(--accent-light); padding:0.15rem 0.7rem; border-radius:999px;
}
.card-title {
font-family:var(--font-display); font-size:1rem; font-weight:700; margin-bottom:0.3rem;
color:var(--heading); line-height:1.4;
}
.card-desc {
font-size:0.85rem; color:var(--text-secondary); margin-bottom:0.8rem;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
line-height:1.6; flex-grow:1;
}
.card-footer {
margin-top:auto; display:flex; justify-content:space-between; align-items:center;
padding-top:0.7rem; border-top:1px solid rgba(0,0,0,0.02);
font-size:0.7rem; color:var(--text-muted);
}
.read-more {
font-weight:600; color:var(--accent); display:flex; align-items:center; gap:6px;
transition: 0.15s ease;
}
.read-more:hover { gap:10px; color:#1D4ED8; }

/* ----- SKELETON ----- */
.skel-card { background: var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.skel-banner, .skel-line {
background:linear-gradient(90deg, #e9edf2 25%, #f2f5f8 37%, #e9edf2 63%);
background-size:400% 100%; animation:skel 1.4s ease infinite;
}
@keyframes skel { 0%{background-position:100% 50%;}100%{background-position:0 50%;} }
.skel-banner { height:150px; }
.skel-body { padding:1.2rem; }
.skel-line { height:12px; border-radius:6px; margin-bottom:0.5rem; }
.skel-line.w60 { width:60%; } .skel-line.w90 { width:90%; } .skel-line.w40 { width:40%; }

/* ----- PAGINATION ----- */
.pagination {
display:flex; justify-content:center; gap:0.25rem; margin:0.8rem 0 2.5rem; flex-wrap:wrap;
}
.pagination button {
min-width:36px; height:36px; padding:0 0.7rem; border:1px solid var(--border);
border-radius:10px; background:#fff; cursor:pointer; font-size:0.85rem; font-weight:500;
color:var(--text-secondary); transition: 0.15s ease;
}
.pagination button:hover:not(:disabled) { background:var(--accent); color:#fff; border-color:var(--accent); }
.pagination button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.pagination button:disabled { opacity:0.3; cursor:not-allowed; }

/* =============================================================
🚀 ARTICLE TYPOGRAPHY HIERARCHY PRODUCTION
============================================================= */

.article-container {
max-width:780px; margin:1.5rem auto 0; background: #fff; padding:2.5rem;
border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow);
}
.breadcrumb { font-size:0.9rem; color:var(--text-muted); margin-bottom:1rem; }
.breadcrumb span { cursor:pointer; transition: 0.15s ease; }
.breadcrumb span:hover { color:var(--accent); }

/* --- ARTICLE TITLE (H1) --- */
.article-title {
font-family: var(--font-display);
font-size: 2.65rem;
font-weight: 900;
line-height: 1.14;
letter-spacing: -0.045em;
color: #070B12;
margin-bottom: 1rem;
text-wrap: balance;
}
.article-title::after {
content: '';
display: block;
width: 72px;
height: 5px;
margin-top: 1rem;
border-radius: 999px;
background: linear-gradient(90deg, #2563EB, #7C3AED, #06B6D4);
box-shadow: 0 3px 12px rgba(37,99,235,0.18);
}

/* --- BODY BASE --- */
.article-body {
font-family: var(--font-body);
font-size: 1.15rem;
line-height: 1.82;
font-weight: 450;
color: #05070B;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.article-body p {
margin: 0 0 1.35rem;
color: #05070B;
}

/* --- H2 --- */
.article-body h2 {
font-family: var(--font-display);
font-size: 2.05rem;
font-weight: 900;
line-height: 1.25;
color: #1D4ED8;
letter-spacing: -0.025em;
margin: 3.4rem 0 1.35rem;
padding: 0.15rem 0 0.15rem 1.15rem;
border-left: 5px solid #2563EB;
position: relative;
background: transparent;
box-shadow: none;
}
.article-body h2::before { content: none; }
.article-body h2::after {
content: '';
position: absolute;
left: 1.15rem;
bottom: -0.45rem;
width: 52px;
height: 3px;
border-radius: 999px;
background: #60A5FA;
}
.article-body h2:hover {
color: #1E40AF;
transform: translateX(3px);
}

/* --- H3 --- */
.article-body h3 {
font-family: var(--font-display);
font-size: 1.55rem;
font-weight: 800;
line-height: 1.3;
color: #6D28D9;
letter-spacing: -0.015em;
margin: 2.7rem 0 1rem;
padding: 0 0 0.55rem;
border-bottom: 2px solid rgba(124,58,237,0.18);
}
.article-body h3::before {
content: '';
display: inline-block;
width: 9px;
height: 9px;
margin-right: 0.65rem;
vertical-align: 0.08em;
border-radius: 3px;
background: #8B5CF6;
box-shadow: 0 0 0 4px rgba(139,92,246,0.10);
}
.article-body h3:hover {
color: #5B21B6;
}

/* --- H4 --- */
.article-body h4 {
font-family: var(--font-display);
font-size: 1.22rem;
font-weight: 750;
line-height: 1.4;
color: #0F766E;
margin: 2rem 0 0.7rem;
padding-left: 0.85rem;
border-left: 4px solid #14B8A6;
}
.article-body h4:hover {
color: #115E59;
}

/* --- LEAD / IMPORTANT --- */
.article-body p.lead,
.article-body p.important {
font-size: 1.20rem;
line-height: 1.75;
font-weight: 650;
color: #030508;
background: #F8FAFC;
border-left: 5px solid #1D4ED8;
padding: 1.2rem 1.5rem;
margin: 1.8rem 0;
border-radius: 0 12px 12px 0;
box-shadow: 0 4px 16px rgba(15,23,42,0.05);
}

/* --- STRONG / BOLD (cập nhật với điểm nhấn nhẹ) --- */
.article-body strong,
.article-body b {
  color: #0A0F1A;              /* giữ đen, hoặc đổi sang #1D4ED8 nếu muốn xanh */
  font-weight: 800;
  background: linear-gradient(120deg, rgba(37, 99, 235, 0.08), transparent 80%);
  padding: 0.05em 0.3em;
  border-radius: 4px;
  border-bottom: 2px solid rgba(37, 99, 235, 0.20);
  box-decoration-break: clone;  /* xuống dòng vẫn giữ nền */
}

/* =============================================================
   ARTICLE QUESTION LEAD – TÁCH CÂU HỎI KHỎI ĐOẠN GIẢI THÍCH
   ============================================================= */

.article-body p > strong:first-of-type,
.article-body p > b:first-of-type {
    display: block;

    font-family: var(--font-display);
    font-size: 1.28rem;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -0.025em;

    color: #0A0F1A;

    margin-bottom: 0.8rem;
    padding-bottom: 0.65rem;

    position: relative;
}

/* Đường kẻ dưới – điểm nhấn */
.article-body p > strong:first-of-type::after,
.article-body p > b:first-of-type::after {
    content: '';
    display: block;

    width: 42px;
    height: 3px;

    margin-top: 0.55rem;

    border-radius: 999px;

    background: linear-gradient(90deg, #2563EB, #7C3AED);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .article-body p > strong:first-of-type,
    .article-body p > b:first-of-type {
        font-size: 1.18rem;
        line-height: 1.38;
        margin-bottom: 0.7rem;
        padding-bottom: 0.55rem;
    }

    .article-body p > strong:first-of-type::after,
    .article-body p > b:first-of-type::after {
        width: 36px;
        height: 3px;
        margin-top: 0.45rem;
    }
}

/* --- LISTS --- */
.article-body ul,
.article-body ol {
margin: 1.25rem 0 1.7rem;
padding-left: 0;
list-style: none;
}
.article-body ul li,
.article-body ol li {
font-size: 1.13rem;
line-height: 1.78;
font-weight: 450;
color: #05070B;
margin-bottom: 0.85rem;
}

/* Ordered list */
.article-body ol {
counter-reset: custom-counter;
}
.article-body ol li {
counter-increment: custom-counter;
position: relative;
padding-left: 2.8rem;
}
.article-body ol li::before {
content: counter(custom-counter);
position: absolute;
left: 0;
top: 0.15rem;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #1E3A8A, #3B82F6);
color: #FFFFFF;
font-size: 0.85rem;
font-weight: 800;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(30,58,138,0.30);
}

/* Unordered list */
.article-body ul li {
position: relative;
padding-left: 1.9rem;
}
.article-body ul li::before {
content: '';
position: absolute;
left: 0.2rem;
top: 0.68rem;
width: 10px;
height: 10px;
background: #059669;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(16,185,129,0.14);
}

/* --- HIGHLIGHT --- */
.article-body mark,
.article-body .highlight {
background: linear-gradient(120deg, #FDE047, #FACC15);
color: #000000;
padding: 0.12em 0.45em;
border-radius: 5px;
font-weight: 750;
box-shadow: inset 0 -2px 0 rgba(202,138,4,0.35);
}

/* --- SECONDARY --- */
.article-body small,
.article-body .secondary-text {
font-size: 0.92rem;
line-height: 1.65;
font-weight: 500;
color: #334155;
}

/* --- LINKS --- */
.article-body a {
color: #1D4ED8;
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.article-body a:hover {
color: #1E40AF;
}

/* =============================================================
CYBER TABLE – ĐIỀU CHỈNH NHẸ HƠN, KHÔNG SCALE, KHÔNG GLOW QUÁ MỨC
============================================================= */
.article-body table {
width: 100%; margin: 2.2rem 0;
border-collapse: separate; border-spacing: 0;
border-radius: 18px;
background: #0F172A;
border: 1px solid #334155;
box-shadow: 0 16px 36px -10px rgba(15,23,42,0.5), 0 0 25px rgba(99,102,241,0.15);
overflow: hidden;
}
.article-body thead th {
background: linear-gradient(90deg, #0F172A, #1E1B4B, #0F172A);
color: #38BDF8;
font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 1.25rem 1.2rem;
text-align: center;
border-bottom: 2px solid rgba(99,102,241,0.3);
text-shadow: 0 0 10px rgba(56,189,248,0.3);
}
.article-body thead th:first-child { text-align: left; padding-left: 1.6rem; }
.article-body tbody td {
padding: 1rem 1.2rem; font-size: 0.95rem; color: #E2E8F0; text-align: center;
border-right: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: all 0.2s ease;
}
.article-body tbody td:first-child {
text-align: left; font-weight: 700;
background: rgba(99,102,241,0.15);
color: #818CF8; padding-left: 1.6rem;
border-right: 1px solid rgba(99,102,241,0.2);
}
.article-body tbody td:last-child { border-right: none; }
.article-body tbody tr:last-child td { border-bottom: none; }
.article-body tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.02); }
.article-body tbody tr:nth-child(odd) td:first-child { background: rgba(99,102,241,0.25); }
.article-body tbody tr:hover td {
background: rgba(99,102,241,0.2);
color: #FFFFFF;
}
.article-body tbody tr:hover td:first-child {
color: #38BDF8;
text-shadow: 0 0 8px rgba(56,189,248,0.5);
}
/* Hover cell – nhẹ hơn, không scale, không glow quá mức */
.article-body tbody td:hover {
background: rgba(79,70,229,0.32) !important;
color: #FFFFFF !important;
font-weight: 750;
box-shadow: inset 0 0 0 1px rgba(129,140,248,0.22);
position: relative;
z-index: 2;
}

/* =============================================================
CYBER AFFILIATE CTA – GIỮ GLOW MẠNH (điểm nhấn)
============================================================= */
.cta-box {
margin: 2.8rem 0; padding: 2.5rem;
background: linear-gradient(135deg, #0F172A, #1E1B4B, #1E3A8A);
border: none;
border-radius: 24px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 16px 40px rgba(15,23,42,0.3);
}
.cta-box::before {
content: '';
position: absolute; inset: -3px;
background: conic-gradient(from 0deg, #06B6D4, #8B5CF6, #3B82F6, #FDE047, #06B6D4);
border-radius: 24px;
z-index: -1;
animation: spinBorder 8s linear infinite;
opacity: 0.7;
}
.cta-box::after {
content: '';
position: absolute; inset: 3px;
background: linear-gradient(135deg, #0F172A, #1E1B4B);
border-radius: 22px;
z-index: -1;
}
@keyframes spinBorder { to { transform: rotate(360deg); } }

.cta-box h3 {
font-family: var(--font-display); margin-bottom: 0.5rem;
font-weight: 900; font-size: 1.6rem; color: #fff;
text-shadow: 0 0 20px rgba(56,189,248,0.3);
}
.cta-box p {
font-size: 1rem; color: #93C5FD; margin-bottom: 1.6rem;
max-width: 90%; margin-left: auto; margin-right: auto;
}
.btn-affiliate {
display: inline-flex; align-items: center; justify-content: center;
gap: 12px;
background: linear-gradient(135deg, #2563EB, #4F46E5);
color: #fff;
padding: 1rem 3rem;
border-radius: 999px;
font-weight: 800; font-size: 1.05rem; text-transform: uppercase;
letter-spacing: 0.04em;
box-shadow: 0 6px 24px rgba(37,99,235,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
border: 1px solid rgba(255,255,255,0.2);
position: relative; z-index: 2;
animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 6px 24px rgba(37,99,235,0.5), 0 0 0 0 rgba(255,215,0,0.3); }
50% { box-shadow: 0 6px 40px rgba(37,99,235,0.8), 0 0 20px rgba(255,215,0,0.5); }
}
.btn-affiliate:hover {
background: linear-gradient(135deg, #1D4ED8, #4338CA);
transform: translateY(-4px) scale(1.04);
box-shadow: 0 12px 40px rgba(79,70,229,0.7), 0 0 30px rgba(255,215,0,0.6);
animation: none;
color: #fff;
}

/* =============================================================
PROS & CONS, FAQ, RELATED (GIỮ NGUYÊN)
============================================================= */
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.8rem 0; }
@media (max-width:600px) { .pros-cons { grid-template-columns:1fr; } }
.pros, .cons { padding:1.2rem; border-radius:var(--radius-sm); border:1px solid var(--border); }
.pros { background:var(--pros-bg); border-left: 3px solid var(--pros-heading); }
.cons { background:var(--cons-bg); border-left: 3px solid var(--cons-heading); }
.pros h4, .cons h4 { margin-bottom:0.4rem; font-size:0.95rem; font-weight:700; }
.pros h4 { color:var(--pros-heading); }
.cons h4 { color:var(--cons-heading); }
.pros ul, .cons ul { list-style:none; }
.pros li, .cons li { padding:0.15rem 0; font-size:0.95rem; color:var(--text); }

.faq { border-top:1px solid var(--border); padding-top:1.2rem; margin-top:1.2rem; }
.faq h4 { font-family:var(--font-display); margin-bottom:0.5rem; font-size:1.05rem; font-weight:700; color:var(--heading); }
.faq strong { display:block; font-weight:600; font-size:0.95rem; margin-top:0.6rem; color:var(--text); }
.faq p { margin:0.1rem 0 0.6rem; color:var(--text-secondary); font-size:0.95rem; }

.related { border-top:1px solid var(--border); padding-top:1.2rem; margin-top:1.2rem; }
.related h4 { font-family:var(--font-display); margin-bottom:0.6rem; font-size:1.05rem; font-weight:700; color:var(--heading); }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.6rem; }
.related-item {
background:var(--bg); padding:0.6rem; border-radius:var(--radius-sm); cursor:pointer;
text-align:center; font-weight:500; font-size:0.9rem;
border:1px solid var(--border); color:var(--text-secondary);
transition: 0.15s ease;
}
.related-item:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ----- NOT FOUND ----- */
.not-found { text-align:center; padding:3.5rem 0; }
.not-found h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--heading); margin-bottom:0.4rem; }
.not-found p { color:var(--text-secondary); margin-bottom:1.2rem; font-size:1rem; }
.btn-back { display:inline-block; background:var(--accent); color:#fff; padding:0.6rem 1.8rem; border-radius:999px; font-weight:600; transition: 0.15s ease; }
.btn-back:hover { background:#1D4ED8; color:#fff; }

/* ----- FOOTER (giữ nguyên) ----- */
.footer {
background: linear-gradient(90deg, var(--header-dark), var(--header-bright), var(--header-dark));
border-top: 3px solid var(--gold-strong);
border-left: 1px solid var(--gold);
border-right: 1px solid var(--gold);
box-shadow: 0 -4px 20px rgba(0,0,0,0.06), 0 0 20px var(--gold-glow), inset 0 1px 0 var(--gold-light);
padding:2.8rem 0 1.5rem; margin-top:3rem; color:#fff;
}
.footer-grid {
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2rem; margin-bottom:2rem;
}
.footer-col h4 {
font-family:var(--font-display); font-weight:700; margin-bottom:0.8rem; font-size:0.9rem;
color:#fff; border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:0.3rem;
}
.footer-col a {
display:block; color:rgba(255,255,255,0.85); font-size:0.85rem; margin-bottom:0.4rem;
cursor:pointer; transition: 0.15s ease; text-decoration:none;
}
.footer-col a:hover { color:#93C5FD; padding-left:6px; text-decoration:underline; }
.footer-bottom {
text-align:center; font-size:0.8rem; color:rgba(255,255,255,0.7);
border-top:1px solid rgba(255,255,255,0.15); padding-top:1.2rem;
}

/* ----- OVERRIDE WHITE BACKGROUND FOR ARTICLE ELEMENTS ----- */
.card, .article-container, .search-modal, .skel-card,
.article-body, .card-body, .related, .faq {
background: #FFFFFF !important;
}
.pros { background: var(--pros-bg) !important; }
.cons { background: var(--cons-bg) !important; }

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
:root { --nav-height: 60px; }
.mobile-toggle { display:flex; }
.nav-links {
display:none; flex-direction:column; align-items:stretch;
position:absolute; top:var(--nav-height); left:0; width:100%;
background:var(--header-dark); border-bottom:1px solid rgba(255,255,255,0.1);
padding:0.8rem; gap:0.15rem; box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.nav-links.open { display:flex; }
.nav-item { width:100%; }
.dropdown-content {
position:static; box-shadow:none; border:none;
background:rgba(255,255,255,0.1); margin:0.2rem 0 0.2rem 0.5rem; padding:0.2rem;
}
.dropdown-content a { color:rgba(255,255,255,0.88); }
.dropdown-content a .icon { color:rgba(255,255,255,0.6); }
.dropdown-content a:hover { background:rgba(255,255,255,0.12); color:#fff; }
.dropdown-content a:hover .icon { color:#fff; }
.nav-link, .dropbtn { width:100%; padding:0.6rem 0.8rem; border-radius:6px; justify-content:flex-start; }

.hero-mini { padding:1.5rem 0 1rem; }
.hero-mini h1 { font-size:1.7rem; }
.article-container { padding:1.2rem; }
.footer-grid { grid-template-columns:1fr 1fr; }
.navbar { border-bottom-width: 2px; border-left-width:0; border-right-width:0; box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 0 15px var(--gold-glow); }
.footer { border-top-width: 2px; border-left-width:0; border-right-width:0; box-shadow: 0 -4px 20px rgba(0,0,0,0.06), 0 0 15px var(--gold-glow); }

.article-body table { display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; border-radius:14px; }
.article-body thead th, .article-body tbody td { padding: 0.85rem 1rem; font-size:0.9rem; }
.article-body thead th:first-child, .article-body tbody td:first-child { padding-left:1rem; }

/* Mobile typography – chốt theo yêu cầu */
.article-title {
font-size: 1.85rem;
line-height: 1.18;
letter-spacing: -0.035em;
}
.article-title::after {
width: 56px;
height: 4px;
margin-top: 0.8rem;
}
.article-body {
font-size: 1.06rem;
line-height: 1.80;
font-weight: 450;
}
.article-body h2 {
font-size: 1.65rem;
line-height: 1.28;
margin-top: 2.7rem;
padding-left: 0.9rem;
border-left-width: 4px;
}
.article-body h2::after {
left: 0.9rem;
width: 42px;
}
.article-body h3 {
font-size: 1.32rem;
margin-top: 2.25rem;
}
.article-body h4 {
font-size: 1.08rem;
margin-top: 1.75rem;
}
.article-body p.lead,
.article-body p.important {
font-size: 1.06rem;
line-height: 1.72;
padding: 1rem 1.15rem;
}
.article-body ul li,
.article-body ol li {
font-size: 1.06rem;
line-height: 1.76;
}
}