/* ==========================================================================
   emerald-pro — theme PBN theo ngôn ngữ thiết kế cayxanhus.pages.dev
   Self-contained CSS (không cần Tailwind CDN / Font Awesome).
   ========================================================================== */
:root{
  /* emerald scale */
  --e-950:#022c22; --e-900:#064e3b; --e-800:#065f46; --e-700:#047857;
  --e-600:#059669; --e-500:#10b981; --e-400:#34d399; --e-300:#6ee7b7;
  --e-200:#a7f3d0; --e-100:#d1fae5; --e-50:#ecfdf5;
  /* gray / slate */
  --g-900:#111827; --g-800:#1f2937; --g-700:#374151; --g-600:#4b5563;
  --g-500:#6b7280; --g-400:#9ca3af; --g-100:#f3f4f6; --g-50:#f9fafb;
  --slate-900:#0f172a; --slate-800:#1e293b; --slate-400:#94a3b8; --slate-300:#cbd5e1;
  --amber:#fbbf24; --amber-d:#f59e0b;
  --radius:16px; --radius-sm:12px; --radius-xs:8px;
  --wrap:1280px;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--g-50);color:var(--g-800);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--e-700)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.15em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar (emerald-950) ---------- */
.topbar{background:var(--e-950);color:var(--e-100);font-size:12px;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar .tb-left{display:flex;align-items:center;gap:8px;min-width:0}
.topbar .tb-left span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .tb-left .ico{color:var(--e-400);font-size:14px}
.topbar .tb-right{color:var(--e-300);font-weight:700;white-space:nowrap}
.topbar .tb-right .ico{color:var(--e-400)}

/* ---------- sticky header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm);border-bottom:1px solid var(--g-100);
}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{
  width:40px;height:40px;border-radius:999px;background:var(--e-600);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);flex:none;
}
.brand-logo .ico{font-size:20px}
.brand-name{display:block;font-size:20px;font-weight:800;color:var(--e-900);letter-spacing:-.01em;line-height:1.1}
.brand-sub{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--e-600);margin-top:2px}
.main-nav{display:flex;align-items:center;gap:22px}
.main-nav a{font-size:14px;font-weight:600;color:var(--g-700);text-decoration:none;transition:color .15s}
.main-nav a:hover{color:var(--e-600)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;
  text-decoration:none;border:0;cursor:pointer;transition:all .18s}
.btn-pill{background:var(--e-600);color:#fff;padding:9px 18px;border-radius:999px;font-size:14px;box-shadow:var(--shadow-md)}
.btn-pill:hover{background:var(--e-700);transform:scale(1.04)}
.btn-amber{background:var(--amber);color:var(--slate-900);padding:14px 24px;border-radius:var(--radius-sm);
  font-size:15px;font-weight:800;box-shadow:var(--shadow-lg)}
.btn-amber:hover{background:var(--amber-d);transform:translateY(-2px)}
.btn-ghostw{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);
  padding:14px 20px;border-radius:var(--radius-sm);font-size:15px;font-weight:600}
.btn-ghostw:hover{background:rgba(255,255,255,.2)}
.btn-soft{background:var(--e-50);color:var(--e-700);border:1px solid var(--e-200);
  padding:8px 14px;border-radius:var(--radius-xs);font-size:12px;font-weight:700}
.btn-soft:hover{background:var(--e-100)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding:48px 0 56px;
  background:linear-gradient(135deg,var(--e-900) 0%,var(--e-700) 100%)}
.hero::after{content:"";position:absolute;width:460px;height:460px;right:-140px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.45),rgba(16,185,129,0) 70%)}
.hero::before{content:"";position:absolute;width:340px;height:340px;left:-120px;bottom:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.35),rgba(52,211,153,0) 70%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.pill{display:inline-block;background:rgba(16,185,129,.3);color:var(--e-200);
  border:1px solid rgba(52,211,153,.3);font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:clamp(1.85rem,4vw,3rem);font-weight:800;line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}
.hero h1 .hl{color:var(--e-300)}
.hero .lead{color:var(--e-100);font-size:1.0625rem;line-height:1.7;margin:0 0 26px;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-side{display:grid;gap:14px}
.stat-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:14px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.stat-card .ic{width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;flex:none}
.stat-card .ic .ico{font-size:22px;color:var(--e-200)}
.stat-card .v{display:block;font-size:20px;font-weight:800;line-height:1.2}
.stat-card .k{display:block;font-size:12px;color:var(--e-200)}

/* ---------- sections ---------- */
.section{padding:48px 0}
.section.alt{background:var(--e-50);border-top:1px solid var(--e-100);border-bottom:1px solid var(--e-100)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid #e5e7eb}
.section-head h2{margin:0;font-size:clamp(1.4rem,2.4vw,1.875rem);font-weight:800;color:var(--e-950);letter-spacing:-.01em}
.section-head p{margin:4px 0 0;font-size:.875rem;color:var(--g-600)}
.section-head .more{font-size:.875rem;font-weight:700;color:var(--e-700);text-decoration:none;white-space:nowrap}
.section-head .more:hover{text-decoration:underline}

/* ---------- article cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.card{background:#fff;border:1px solid var(--g-100);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card-thumb{height:172px;position:relative;background:var(--g,linear-gradient(135deg,var(--e-900),var(--e-600)));
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-thumb .ico{font-size:84px;color:rgba(255,255,255,.22)}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.card:hover .card-thumb img{transform:scale(1.06)}
.card-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.95);color:var(--e-800);
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:6px;max-width:78%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin:0 0 8px;font-size:1.0625rem;font-weight:700;line-height:1.4;color:var(--g-900)}
.card-body h3 a{color:inherit;text-decoration:none}
.card-body h3 a:hover{color:var(--e-700)}
.card .excerpt{margin:0 0 16px;font-size:.8125rem;color:var(--g-500);line-height:1.6}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-date{font-size:11px;color:var(--g-400);display:flex;align-items:center;gap:6px}
.card-more{font-size:12px;font-weight:700;color:var(--e-700);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.card-more:hover{gap:9px}

/* ---------- pagination ---------- */
.pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:36px;flex-wrap:wrap}
.pagination a,.pagination span{padding:9px 18px;border-radius:999px;border:1px solid var(--e-100);
  background:#fff;color:var(--e-700);font-size:.875rem;font-weight:700;text-decoration:none;box-shadow:var(--shadow-sm)}
.pagination a:hover{background:var(--e-50);border-color:var(--e-200)}
.pagination .current{background:var(--e-600);border-color:var(--e-600);color:#fff}

/* ---------- article / page hero ---------- */
.page-hero{position:relative;overflow:hidden;color:#fff;padding:34px 0 42px;
  background:linear-gradient(135deg,var(--e-900) 0%,var(--e-700) 100%)}
.page-hero::after{content:"";position:absolute;width:380px;height:380px;right:-150px;top:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.4),rgba(16,185,129,0) 70%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero.narrow .wrap{max-width:900px}
.crumb{font-size:.8125rem;color:var(--e-200);margin-bottom:14px}
.crumb a{color:var(--e-200);text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb .sep{margin:0 6px;opacity:.6}
.page-hero h1{margin:0 0 14px;font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:800;line-height:1.22;letter-spacing:-.02em}
.page-hero .lead{color:var(--e-100);font-size:1rem;line-height:1.7;margin:0 0 22px;max-width:62ch}
.post-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:.8125rem;color:var(--e-200)}
.post-meta span{display:inline-flex;align-items:center;gap:6px}
/* ảnh đại diện bài viết (nằm trong hero tối) */
.post-cover{margin:24px 0 0;border-radius:var(--radius);overflow:hidden;line-height:0;
  box-shadow:var(--shadow-xl);background:rgba(255,255,255,.08)}
.post-cover img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block}

/* ảnh thật chèn trong thân bài (figure.post-img) */
.prose .post-img{margin:28px 0;border-radius:var(--radius);overflow:hidden;
  background:var(--g-100);box-shadow:var(--shadow-sm)}
.prose .post-img img{width:100%;height:auto;display:block;border-radius:0;box-shadow:none}
.prose .post-img figcaption{font-size:13px;line-height:1.5;color:var(--g-600);
  padding:10px 16px;text-align:center;background:var(--g-50);border-top:1px solid var(--g-100)}
@media (max-width:640px){.prose .post-img{margin:20px 0;border-radius:10px}
  .prose .post-img figcaption{font-size:12px;padding:8px 12px}}

/* ---------- article body typography ---------- */
.article-shell{max-width:900px;margin:0 auto}
.prose{background:#fff;border:1px solid var(--g-100);border-radius:var(--radius);padding:32px;
  box-shadow:var(--shadow-sm);font-size:1.0625rem;line-height:1.8;color:var(--g-700);overflow-wrap:break-word}
.prose > :first-child{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose h2{margin:1.9em 0 .7em;font-size:1.5rem;font-weight:800;line-height:1.3;color:var(--e-900);
  padding-bottom:.35em;border-bottom:2px solid var(--e-100)}
.prose h3{margin:1.5em 0 .5em;font-size:1.2rem;font-weight:700;color:var(--e-800)}
.prose h4{margin:1.3em 0 .4em;font-size:1.05rem;font-weight:700;color:var(--g-900)}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.15em}
.prose li{margin:.4em 0}
.prose li::marker{color:var(--e-500)}
.prose a{color:var(--e-700);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(5,150,105,.35);text-underline-offset:3px}
.prose a:hover{color:var(--e-800);text-decoration-color:var(--e-600)}
.prose strong{color:var(--g-900);font-weight:700}
.prose img{border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}
.prose blockquote{margin:1.4em 0;padding:1em 1.3em;background:var(--e-50);color:var(--g-700);
  border-left:4px solid var(--e-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.prose blockquote > :last-child{margin-bottom:0}
.prose code{background:var(--e-50);color:var(--e-800);padding:2px 6px;border-radius:6px;font-size:.9em}
.prose pre{background:var(--e-950);color:var(--e-100);padding:16px;border-radius:var(--radius-sm);overflow:auto}
.prose pre code{background:none;color:inherit;padding:0}
.prose table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.9375rem}
.prose th,.prose td{border:1px solid var(--g-100);padding:10px 12px;text-align:left}
.prose th{background:var(--e-50);color:var(--e-900);font-weight:700}
.prose hr{border:0;border-top:1px solid var(--g-100);margin:2em 0}

/* ---------- CTA box (backlink khối lớn) ---------- */
.cta-box{margin:32px 0 0;padding:28px;border-radius:var(--radius);color:#fff;
  background:linear-gradient(135deg,var(--e-900) 0%,var(--e-600) 100%);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.cta-box::after{content:"";position:absolute;width:300px;height:300px;right:-120px;bottom:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.5),rgba(16,185,129,0) 70%)}
.cta-box > *{position:relative;z-index:2}
.cta-box h3{margin:0 0 6px;font-size:1.25rem;font-weight:800}
.cta-box p{margin:0;color:var(--e-100);font-size:.9375rem;max-width:52ch}

/* ---------- related ---------- */
.related{margin-top:40px}
.related > h2{margin:0 0 18px;font-size:1.25rem;font-weight:800;color:var(--e-950)}
.related-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.related-list a{display:block;background:#fff;border:1px solid var(--g-100);border-radius:var(--radius-sm);
  padding:14px 16px;font-size:.9375rem;font-weight:600;color:var(--g-800);text-decoration:none;
  box-shadow:var(--shadow-sm);transition:all .18s}
.related-list a:hover{border-color:var(--e-200);color:var(--e-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ---------- category grid ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.cat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--g-100);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;
  transition:box-shadow .2s,transform .2s}
.cat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.cat-card img{width:100%;height:150px;object-fit:cover;display:block}
.cat-body{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.cat-body strong{font-size:1.0625rem;font-weight:800;color:var(--e-900)}
.cat-count{font-size:12px;font-weight:700;color:var(--e-600)}
.cat-desc{font-size:.8125rem;color:var(--g-500);line-height:1.6}
.cat-lead{margin:0 0 22px;font-size:.9375rem;color:var(--g-600);max-width:72ch}

/* ---------- footer (slate-900) ---------- */
.site-footer{background:var(--slate-900);color:var(--slate-300);font-size:.875rem;
  margin-top:0;padding-top:44px;border-top:1px solid var(--slate-800)}
/* chừa chỗ cho nút nổi (FAB) ở góc dưới-phải trên desktop */
@media (min-width:768px){.site-footer{padding-bottom:64px}}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:36px}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-brand .brand-logo{width:32px;height:32px;background:var(--e-600);box-shadow:none}
.foot-brand .brand-logo .ico{font-size:16px}
.foot-brand span{font-size:1.125rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.site-footer h4{margin:0 0 14px;font-size:1rem;font-weight:700;color:#fff}
.site-footer p{margin:0;color:var(--slate-400);font-size:.8125rem;line-height:1.7}
.foot-lead{margin:0 0 14px}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-list li{font-size:.8125rem;display:flex;align-items:flex-start;gap:8px;color:var(--slate-400)}
.foot-list a{color:var(--slate-300);text-decoration:none}
.foot-list a:hover{color:#fff;text-decoration:underline}
.foot-list .ico{color:var(--e-400);margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-link{display:inline-flex;align-items:center;gap:7px;background:rgba(4,120,87,.5);
  color:var(--e-200);border:1px solid rgba(16,185,129,.3);padding:8px 14px;border-radius:var(--radius-xs);
  font-size:.75rem;font-weight:700;text-decoration:none;transition:all .18s}
.chip-link:hover{background:var(--e-600);color:#fff;border-color:var(--e-600)}
.chip-link .ico{font-size:11px}
.foot-bottom{margin-top:36px;padding:22px 0;border-top:1px solid var(--slate-800);
  text-align:center;font-size:.75rem;color:#64748b;line-height:1.8}
.foot-bottom a{color:var(--e-400);text-decoration:none}
.foot-bottom a:hover{text-decoration:underline}

/* ---------- floating CTA + mobile bar ---------- */
.fab{position:fixed;right:24px;bottom:24px;z-index:50;display:inline-flex;align-items:center;gap:9px;
  background:var(--e-600);color:#fff;font-weight:700;font-size:.875rem;padding:14px 20px;
  border-radius:999px;text-decoration:none;box-shadow:var(--shadow-xl);animation:pulse-green 2s infinite}
.fab:hover{background:var(--e-700)}
.fab .ico{font-size:16px}
@keyframes pulse-green{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.7)}
  70%{box-shadow:0 0 0 15px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
.mobile-bar{display:none}
@media (max-width:767px){
  body{padding-bottom:74px}
  .mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fff;
    border-top:1px solid #e5e7eb;padding:8px;justify-content:space-around;align-items:center;
    box-shadow:0 -4px 6px -1px rgba(0,0,0,.06)}
  .mobile-bar a{display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:10px;font-weight:600;color:var(--g-700);text-decoration:none}
  .mobile-bar a .ico{font-size:18px;color:var(--e-600)}
  .mobile-bar a.mb-cta{flex-direction:row;gap:8px;background:var(--e-600);color:#fff;
    padding:10px 20px;border-radius:999px;font-size:12px;font-weight:700;
    box-shadow:var(--shadow-md);animation:pulse-green 2s infinite}
  .mobile-bar a.mb-cta .ico{color:#fff;font-size:15px}
  .fab{display:none}
}

/* ---------- 404 ---------- */
.err-code{font-size:clamp(3.5rem,12vw,6rem);font-weight:800;line-height:1;margin:0 0 8px;letter-spacing:-.03em}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-side{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:767px){
  .main-nav{display:none}
  .brand-sub{display:none}
  .brand-name{font-size:17px;line-height:1.15}
  .brand-logo{width:36px;height:36px}
  .site-header .btn-pill{display:none}
  .section{padding:34px 0}
  .prose{padding:20px;font-size:1rem}
  .hero{padding:34px 0 40px}
  .page-hero{padding:26px 0 32px}
  .foot-grid{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:520px){
  .hero-side{grid-template-columns:1fr}
  .btn-amber,.btn-ghostw{width:100%}
}