/* trang con (guideline, mascot): cùng ngôn ngữ với trang chủ */
:root{--brand:#00A85E;--deep:#0B4A2A;--mint:#4CDD9B;--glow:#84F5C4;--ink:#FFFFFF;--muted:rgba(255,255,255,.92);--dim:rgba(255,255,255,.76);
  --line:rgba(255,255,255,.3);--grid:rgba(255,255,255,.14);--tile:rgba(11,74,42,.32);
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;color-scheme:light}
html{background:var(--brand)}
body{background:var(--brand);color:var(--ink)}
::selection{background:var(--glow);color:var(--deep)}

/* rail */
.rail{position:fixed;z-index:25;left:0;top:0;bottom:0;width:72px;border-right:1px solid var(--line);background:var(--brand);display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:22px}
.rail a{color:#fff;text-decoration:none}
.rail .wm{writing-mode:vertical-rl;transform:rotate(180deg);font:600 44px/52px var(--sans);letter-spacing:-1.3px}
.rail .rs{writing-mode:vertical-rl;transform:rotate(180deg);font:400 12px/16px var(--sans);color:rgba(255,255,255,.8);white-space:nowrap}
.rail .rb{margin-top:auto;writing-mode:vertical-rl;transform:rotate(180deg);font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
body.has-rail{padding-left:72px}
/* avatar Catron cuối rail */
.rail .ava2{position:relative;display:block;margin-top:auto;margin-bottom:6px;flex:0 0 48px;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#008241}
.rail .ava2 img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 14%;transform:scale(1.9);transform-origin:50% 14%}
body.has-rail .sh-hk{flex-basis:488px;padding-left:48px}
.toc{height:calc(100vh / var(--s,1) - 72px)!important}
.mm-in{max-height:calc(100vh / var(--s,1) - 72px)!important}
@media (max-width:1300px){body.has-rail .sh-hk{flex-basis:auto;padding:0 24px}.sh-ni{padding:0 11px}}
@media (max-width:1700px){.sh-cta{padding:0 24px}.sh-ni{padding:0 14px}}
@media (max-width:900px){.rail{display:none}body.has-rail{padding-left:0}}

/* nhãn mono có ô vuông mint */
.ey{display:flex;align-items:center;gap:10px;margin:0;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ey::before{content:"";flex:0 0 6px;width:6px;height:6px;background:var(--glow);box-shadow:0 0 8px rgba(132,245,196,.9)}

/* góc ngoặc */
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none}
.brk::before{left:-1px;top:-1px;border-left:1.5px solid #fff;border-top:1.5px solid #fff}
.brk::after{right:-1px;bottom:-1px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff}

/* nút chính vát góc gradient, nút phụ viền trắng */
.btn,.sh-btn,.mm-btn,.shd-all{--cut:10px;--icx:22px;position:relative;display:inline-flex!important;align-items:stretch!important;height:44px;padding:0!important;gap:0!important;color:#fff!important;text-decoration:none!important;font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  background:rgba(132,245,196,.7)!important;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));isolation:isolate;transition:background .2s,transform .2s;cursor:pointer}
.shd-all{display:flex!important}
.btn::before,.sh-btn::before,.mm-btn::before,.shd-all::before{content:"";position:absolute;inset:1px;z-index:-1;clip-path:polygon(calc(var(--cut) - .4px) 0,100% 0,100% calc(100% - var(--cut) + .4px),calc(100% - var(--cut) + .4px) 100%,0 100%,0 calc(var(--cut) - .4px));
  background:linear-gradient(90deg,#0B4A2A 0%,#06713F 45%,#00965A 80%,#14A866 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:filter .25s}
.btn .sh,.sh-btn .sh,.mm-btn .sh,.shd-all .sh{position:absolute;inset:1px;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at calc(100% - var(--icx)) 50%,rgba(230,255,243,.85) 0,rgba(132,245,196,.55) 16px,rgba(76,221,155,.22) 38px,transparent 72px);transition:opacity .3s}
.btn:not(.ln):hover .sh,.sh-btn:hover .sh,.mm-btn:hover .sh,.shd-all:hover .sh{opacity:1;transition:opacity .9s ease-in;animation:corepulse 1.6s ease-in-out .9s infinite}
@keyframes corepulse{50%{opacity:.6}}
.btn .eg,.sh-btn .eg,.mm-btn .eg,.shd-all .eg{position:absolute;inset:1px;z-index:0;pointer-events:none;overflow:hidden}
.btn .eg i,.sh-btn .eg i,.mm-btn .eg i,.shd-all .eg i{position:absolute;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;opacity:0;background:linear-gradient(90deg,rgba(132,245,196,0),#E6FFF3);box-shadow:0 0 6px rgba(132,245,196,.9);transform:rotate(var(--a))}
.btn:not(.ln):hover .eg i,.sh-btn:hover .eg i,.mm-btn:hover .eg i,.shd-all:hover .eg i{animation:gather .75s cubic-bezier(.55,0,.85,.35) infinite}
@keyframes gather{0%{opacity:0;transform:translate(0,0) rotate(var(--a))}20%{opacity:1}90%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--a)) scaleX(.3)}}
.btn>span,.sh-btn>span,.mm-btn>span,.shd-all>span{position:relative;z-index:1;flex:1;min-width:0;display:flex;align-items:center;padding:0 12px 0 18px;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn>i,.sh-btn>i,.mm-btn>i,.shd-all>i{position:relative;z-index:1;flex:0 0 44px;width:44px;display:grid;place-items:center;border-left:1px solid rgba(255,255,255,.35)}
.btn svg,.sh-btn svg,.mm-btn svg,.shd-all svg{width:16px;height:16px;transition:transform .2s ease,filter .3s ease}
.btn:not(.ln):hover,.sh-btn:hover,.mm-btn:hover,.shd-all:hover{background:var(--glow)!important}
.btn:not(.ln):hover::before,.sh-btn:hover::before,.mm-btn:hover::before,.shd-all:hover::before{filter:brightness(1.08) saturate(1.1)}
.btn:not(.ln):hover svg,.sh-btn:hover svg,.mm-btn:hover svg,.shd-all:hover svg{transform:translateY(2px);transition:transform .2s ease,filter .4s ease .7s;filter:drop-shadow(0 0 4px #CFFFE6) drop-shadow(0 0 10px rgba(132,245,196,.9))}
.btn:active,.sh-btn:active,.mm-btn:active,.shd-all:active{transform:translateY(1px)}
.btn.ln{display:inline-flex!important;align-items:center!important;padding:0 18px!important;background:rgba(255,255,255,.75)!important}.btn.ln::before{background:var(--brand);box-shadow:none}.btn.ln:hover{background:#fff!important}.btn.ln:hover::before{background:#0BB066;filter:none}
.btn.sm,.sh-btn,.mm-btn{--cut:8px;--icx:20px;height:40px;font-size:12px}
.btn.sm>span,.sh-btn>span,.mm-btn>span{padding:0 10px 0 14px}
.btn.sm>i,.sh-btn>i,.mm-btn>i{flex-basis:40px;width:40px}
.btn.sm svg,.sh-btn svg,.mm-btn svg{width:15px;height:15px}
.btn.sm.ln{height:34px;padding:0 12px!important;font-size:11px;--cut:7px}
.btn:focus-visible,.sh-btn:focus-visible,.mm-btn:focus-visible,.shd-all:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn .sh,.sh-btn .sh,.mm-btn .sh,.shd-all .sh{transition:none!important;animation:none!important}.btn .eg,.sh-btn .eg,.mm-btn .eg,.shd-all .eg{display:none}}

/* mobile: CTA header chỉ còn icon để không tràn ở 390px */
@media (max-width:900px){.sh-btn{height:36px}.sh-cta{padding:0 12px}}
@media (max-width:520px){.sh-btn>span{display:none!important}.sh-btn>i{border-left:0;flex-basis:40px;width:40px}}