/* content.css — style dùng chung cho cụm trang nội dung (blog / tin tức / sản phẩm)
   Trang nội dung là HTML tĩnh thuần (không cần dc.js), cùng ngôn ngữ thiết kế site chính. */
:root {
  --page:#030712; --text1:#EAF1F8; --text2:#C2D0E0; --text3:#9FB0C2; --text4:#6E8298;
  --card:rgba(255,255,255,.03); --card2:rgba(255,255,255,.05);
  --bd:rgba(255,255,255,.07); --bd1:rgba(255,255,255,.1); --bd2:rgba(255,255,255,.14);
  --green:#4ADE80; --cyan:#22D3EE; --violet:#8B5CF6; --amber:#FBBF24;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--page); color:var(--text1); font-family:'Inter',system-ui,sans-serif; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--page); }
::-webkit-scrollbar-thumb { background:#16314f; border-radius:8px; }
a { color:var(--cyan); }

/* ── ambient glow nền ── */
.bg-glow { position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg-glow::before { content:""; position:absolute; top:-240px; left:-180px; width:720px; height:720px; border-radius:50%;
  background:radial-gradient(circle, rgba(46,125,255,.15), transparent 62%); filter:blur(20px); }
.bg-glow::after { content:""; position:absolute; top:480px; right:-220px; width:680px; height:680px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,222,128,.10), transparent 62%); filter:blur(20px); }

/* ── nav ── */
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px 40px; backdrop-filter:blur(18px); background:rgba(3,7,18,.6); border-bottom:1px solid var(--bd); }
.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-brand img { width:38px; height:38px; object-fit:contain; }
.nav-brand b { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.5px; color:var(--text1); }
.nav-brand small { display:block; font-size:8.5px; letter-spacing:2px; color:var(--text4); text-transform:uppercase; margin-top:3px; font-weight:400; }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { color:var(--text3); text-decoration:none; font-size:14px; font-weight:500; }
.nav-links a:hover { color:var(--text1); }
.btn-cta { text-decoration:none; padding:10px 22px; border-radius:24px; font-size:14px; font-weight:600;
  color:#021018 !important; background:linear-gradient(120deg,#22D3EE,#4ADE80); box-shadow:0 0 24px rgba(34,211,238,.35); }

/* ── layout ── */
.wrap { position:relative; z-index:2; max-width:820px; margin:0 auto; padding:40px 22px 70px; }
.wrap-wide { max-width:1180px; }
.crumbs { font-size:12.5px; color:var(--text4); margin-bottom:22px; }
.crumbs a { color:var(--text4); text-decoration:none; }
.crumbs a:hover { color:var(--text2); }
.badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:24px; font-size:11.5px;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:18px;
  background:rgba(74,222,128,.09); border:1px solid rgba(74,222,128,.28); color:#7BE5A6; }
.badge.b-cyan { background:rgba(34,211,238,.09); border-color:rgba(34,211,238,.3); color:#7BDCEC; }
.badge.b-violet { background:rgba(139,92,246,.09); border-color:rgba(139,92,246,.3); color:#B79CF0; }
.badge.b-amber { background:rgba(251,191,36,.09); border-color:rgba(251,191,36,.3); color:#FBD97A; }

/* ── bài viết ── */
h1 { font-size:38px; line-height:1.14; font-weight:800; letter-spacing:-1.2px; margin:0 0 14px; }
.meta { display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--text4); margin-bottom:26px; }
.lead { font-size:17px; line-height:1.7; color:var(--text2); margin:0 0 26px; }
.prose { font-size:15.5px; line-height:1.75; color:var(--text2); }
.prose h2 { font-size:26px; line-height:1.25; font-weight:800; letter-spacing:-.6px; color:var(--text1); margin:44px 0 14px; }
.prose h3 { font-size:19px; font-weight:700; color:var(--text1); margin:30px 0 10px; }
.prose p { margin:0 0 16px; }
.prose ul, .prose ol { margin:0 0 18px; padding-left:22px; }
.prose li { margin-bottom:8px; }
.prose strong { color:var(--text1); }
.prose figure { margin:26px 0; }
.prose img { max-width:100%; border-radius:16px; display:block; border:1px solid var(--bd1); }
.prose figcaption { font-size:12.5px; color:var(--text4); margin-top:9px; text-align:center; }
.prose table { width:100%; border-collapse:collapse; margin:20px 0 26px; font-size:14px; }
.prose th { text-align:left; padding:11px 14px; background:var(--card2); color:var(--text1); border:1px solid var(--bd1); font-weight:700; }
.prose td { padding:11px 14px; border:1px solid var(--bd); color:var(--text2); }
.prose .tbl-scroll { overflow-x:auto; }
.note { padding:15px 18px; border-radius:14px; background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.22);
  font-size:13.5px; color:#D9C79A; line-height:1.65; margin:18px 0; }
.note-green { background:rgba(74,222,128,.06); border-color:rgba(74,222,128,.22); color:#A9D9B8; }

/* ── FAQ ── */
.faq { margin:14px 0; border:1px solid var(--bd1); border-radius:16px; background:var(--card); padding:4px 20px; }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:15px 0; font-size:15px; font-weight:700; color:var(--text1); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:20px; color:var(--cyan); transition:transform .25s ease; }
.faq[open] summary::after { transform:rotate(45deg); }
.faq div { padding:0 0 16px; font-size:14px; line-height:1.7; color:var(--text3); }

/* ── CTA box ── */
.cta-box { margin:44px 0 10px; padding:30px 28px; border-radius:22px; text-align:center;
  background:linear-gradient(150deg, rgba(34,211,238,.09), rgba(74,222,128,.07));
  border:1px solid rgba(34,211,238,.25); }
.cta-box b { display:block; font-size:21px; letter-spacing:-.4px; margin-bottom:8px; color:var(--text1); }
.cta-box p { font-size:14px; color:var(--text3); margin:0 0 18px; }
.cta-box .btn-cta { display:inline-block; padding:13px 30px; font-size:15px; }

/* ── card grid (hub + sản phẩm liên quan) ── */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:26px 0; }
.card { display:flex; flex-direction:column; border-radius:20px; overflow:hidden; text-decoration:none;
  background:var(--card); border:1px solid var(--bd); transition:transform .4s cubic-bezier(.16,.84,.44,1), border-color .4s ease; }
.card:hover { transform:translateY(-6px); border-color:rgba(34,211,238,.35); }
.card .thumb { height:170px; overflow:hidden; background:#0a1626; }
.card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.card .thumb.contain img { object-fit:contain; padding:16px; }
.card .body { padding:18px 18px 20px; }
.card .tag { font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan); }
.card h3, .card .t { font-size:16px; font-weight:700; color:var(--text1); margin:8px 0 8px; line-height:1.35; }
.card p { font-size:13px; line-height:1.6; color:var(--text3); margin:0; }
.card .date { font-size:11.5px; color:var(--text4); margin-top:12px; }

/* ── tile thương hiệu (khi chưa có ảnh sản phẩm thật) ── */
.brand-tile { width:100%; height:100%; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 40%, rgba(139,92,246,.18), transparent 70%), #0a1626; }
.brand-tile b { font-family:'Space Grotesk',sans-serif; font-size:30px; letter-spacing:-.5px; color:var(--text1); display:block; }
.brand-tile span { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--text4); }
.brand-tile.big { min-height:300px; border-radius:16px; }
.brand-tile.big b { font-size:44px; }
.brand-tile.big span { font-size:13px; }

/* ── bảng thông số sản phẩm ── */
.spec-hero { display:grid; grid-template-columns:0.9fr 1.1fr; gap:36px; align-items:center; margin:10px 0 30px; }
.spec-hero .img-box { position:relative; border-radius:22px; background:radial-gradient(circle at 50% 42%, rgba(34,211,238,.12), transparent 65%), var(--card);
  border:1px solid var(--bd1); padding:26px; display:grid; place-items:center; min-height:300px; }
.spec-hero .img-box img { max-width:100%; max-height:300px; filter:drop-shadow(0 18px 32px rgba(0,0,0,.5)); }

/* ── nguồn tin ── */
.sources { margin-top:30px; padding:16px 20px; border-radius:14px; background:var(--card); border:1px solid var(--bd); font-size:13px; color:var(--text4); }
.sources a { color:var(--text3); }

/* ── footer ── */
.footer { position:relative; z-index:2; margin-top:50px; border-top:1px solid var(--bd);
  background:rgba(8,17,30,.5); padding:36px 40px 30px; }
.footer-in { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px; font-size:13.5px; color:var(--text4); line-height:1.7; }
.footer b { color:var(--text2); display:block; margin-bottom:10px; font-size:14px; }
.footer a { display:block; color:var(--text4); text-decoration:none; margin-bottom:8px; }
.footer a:hover { color:var(--text2); }
.footer .copy { max-width:1180px; margin:26px auto 0; padding-top:18px; border-top:1px solid var(--bd); font-size:12px; color:var(--text4); }

@media (max-width:900px) {
  .nav { padding:14px 18px; }
  .nav-links { display:none; }
  .cards { grid-template-columns:1fr 1fr; }
  .spec-hero { grid-template-columns:1fr; }
  .footer-in { grid-template-columns:1fr; }
  h1 { font-size:30px; }
}
@media (max-width:560px) { .cards { grid-template-columns:1fr; } }