/* CSS dùng chung (trích từ index.php) cho các trang con: blog.php, ... */
:root{--g:#136735;--gd:#0d4a26;--gl:#e8f5ec;--o:#E77A25;--od:#d06919;--ol:#fdf2e9;--bg:#f8fafc;--card:#fff;--alt:#fff;--ink:#1e293b;--mute:#64748b;--line:#e2e8f0;--dark:#0f172a;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1510;--card:#122219;--alt:#0f1c15;--ink:#eaf2ec;--mute:#9db1a3;--line:#22392b;--gl:#163524;--ol:#3a2514}}
:root[data-theme="dark"]{--bg:#0b1510;--card:#122219;--alt:#0f1c15;--ink:#eaf2ec;--mute:#9db1a3;--line:#22392b;--gl:#163524;--ol:#3a2514}
html{scroll-behavior:smooth;scroll-padding-top:calc(88px + env(safe-area-inset-top,0px))}
*{box-sizing:border-box}
body{margin:0;font-size:18px;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.w{max-width:1200px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--o);outline-offset:2px}
.top{background:var(--g);color:#fff;font-size:15px;padding:8px 0}
.top .w{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.top b{color:#fff}
.top .s{display:flex;align-items:center;gap:8px}
.top .s a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);transition:.25s}
.top .s a svg{width:17px;height:17px;fill:#fff;transition:.25s}
.top .s a:hover{background:var(--o);transform:translateY(-2px)}
.top .s a.zl{width:auto;padding:0 13px;background:#0068FF;color:#fff;font-size:14px;font-weight:800;letter-spacing:.2px}
.top .s a.zl:hover{background:var(--o)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}.nav .btn{white-space:nowrap;flex-shrink:0}
.nav img{height:44px;display:block}
.menu{display:flex;gap:18px;font-weight:600;font-size:15.5px;white-space:nowrap}
.menu a{padding:6px 0;border-bottom:3px solid transparent;transition:.2s}
.menu a:hover,.menu a.on{color:var(--o);border-color:var(--o)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;background:var(--o);color:#fff;font-weight:700;font-size:16px;border:0;cursor:pointer;font-family:inherit;box-shadow:0 4px 12px rgba(231,122,37,.3);transition:.25s}
.btn:hover{background:var(--od);transform:translateY(-2px);box-shadow:0 0 25px rgba(231,122,37,.4)}
.btn.lg{padding:16px 32px;font-size:18px}
.btn.gl{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);box-shadow:none;backdrop-filter:blur(8px)}
.btn.gl:hover{background:rgba(255,255,255,.28)}
#mb{display:none;background:none;border:0;color:var(--ink);font-size:30px;cursor:pointer;padding:4px 8px}
#dr{display:none;background:var(--card);border-top:1px solid var(--line);padding:8px 20px 20px}
#dr a{display:block;padding:12px 0;font-weight:600;border-bottom:1px solid var(--line)}
#dr.open{display:block}
.w.nav{max-width:1400px}
@media(max-width:1499px){.nav>.btn{display:none}}
@media(max-width:1280px){.menu,.nav .btn{display:none}#mb{display:block}}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);font-size:15px;font-weight:600;margin-bottom:26px;backdrop-filter:blur(8px)}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--o);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(231,122,37,.7)}100%{box-shadow:0 0 0 10px rgba(231,122,37,0)}}
section.s{padding:88px 0}
.alt{background:var(--alt)}
.tag{display:inline-block;font-size:clamp(22px,5vw,28px);font-weight:800;line-height:1.3;color:#fff;background:linear-gradient(135deg,var(--o),#f3a11f);padding:8px 30px;border-radius:999px;margin-bottom:20px;box-shadow:0 8px 24px rgba(231,122,37,.4);letter-spacing:-.01em}
h2{font-size:clamp(28px,3.6vw,42px);line-height:1.2;font-weight:800;margin:0 0 14px;letter-spacing:-.015em}
h2 em{font-style:normal;color:var(--g)}
@media(prefers-color-scheme:dark){h2 em{color:#6fd39a}}
.lead{color:var(--mute);max-width:64ch;margin:0 0 44px;font-size:19px}
.c{text-align:center}.c .lead{margin-left:auto;margin-right:auto}
footer{background:var(--gd);color:#cfe5d6;padding:56px 0 36px;font-size:16px}
footer .w{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer h4{margin:0 0 12px;color:#fff;font-size:17px}
footer .lg{font-size:28px;font-weight:800;color:#fff}footer .lg b{color:var(--o)}
footer a:hover{color:var(--o)}
footer p{margin:6px 0}
footer .fi{display:flex;align-items:center;gap:12px;margin:12px 0}footer .fi.al{align-items:flex-start}
footer .fi i{flex:0 0 36px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);transition:.25s}
footer .fi svg{width:19px;height:19px;fill:none;stroke:#ffa24f;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:.25s}
footer .fi:hover i{background:var(--o);border-color:var(--o);transform:translateY(-2px);box-shadow:0 8px 16px -6px rgba(231,122,37,.6)}footer .fi:hover svg{stroke:#fff}footer .fi:hover a{color:var(--o)}
footer .sd{font-size:15px;line-height:1.6;margin:0 0 6px}
footer a.fi{color:inherit}footer .fi span{line-height:1.35}footer .fi strong{display:block;color:#fff;font-weight:700;transition:.25s}footer .fi small{display:block;font-size:14px;color:#a9cdb6}
footer .fi.sn svg{fill:#ffa24f;stroke:none}footer .fi i.zt{font-style:normal;font-size:11.5px;font-weight:800;color:#ffa24f;letter-spacing:.2px}
footer .fi.sn:hover svg,footer .fi.sn:hover i.zt{fill:#fff;color:#fff}footer .fi.sn:hover strong{color:var(--o)}
footer .fi.fb:hover i{background:#1877f2;border-color:#1877f2;box-shadow:0 8px 16px -6px rgba(24,119,242,.7)}
footer .fi.tt:hover i{background:#be185d;border-color:#be185d;box-shadow:0 8px 16px -6px rgba(190,24,93,.7)}
footer .fi.zl:hover i{background:#0068FF;border-color:#0068FF;box-shadow:0 8px 16px -6px rgba(0,104,255,.7)}
.cp{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:22px;margin-top:6px}
#toast{position:fixed;right:20px;top:calc(20px + env(safe-area-inset-top,0px));background:var(--card);border-left:5px solid var(--g);border-radius:14px;padding:14px 18px;box-shadow:0 14px 40px rgba(0,0,0,.25);transform:translateX(130%);transition:.3s;z-index:60;max-width:320px;font-size:16px}
#toast.on{transform:none}
#toTop{position:fixed;z-index:45;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;background:linear-gradient(135deg,var(--o),var(--od));color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -8px rgba(231,122,37,.7),0 4px 10px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:opacity .3s,transform .3s,visibility .3s,box-shadow .3s}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{transform:translateY(-4px);box-shadow:0 18px 30px -8px rgba(231,122,37,.8),0 6px 12px rgba(0,0,0,.25)}#toTop:active{transform:scale(.94)}
#toTop:focus-visible{outline:3px solid #fff;outline-offset:3px}
#toTop .rg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
#toTop .rg circle{fill:none;stroke:rgba(255,255,255,.95);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:150.8;stroke-dashoffset:150.8}
#toTop .ar{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}#toTop:hover .ar{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}