/* Trung tâm trợ giúp (/tro-giup) — dùng token màu/bo góc của dự án (bo nhỏ, mint/blue, Phosphor fill). Xem views/pages/tro-giup.ejs */
.hc-hero{background:linear-gradient(135deg,var(--mint-s) 0%,#eef4ff 100%);border-bottom:1px solid var(--line);padding:34px 0 30px;text-align:center}
.hc-hero h1,.hc-hero .hc-t{margin:6px 0 8px;font-size:30px;font-weight:800;letter-spacing:-.4px;color:var(--ink);text-wrap:balance}
.hc-hero p{margin:0 auto 18px;max-width:560px;color:var(--ink-2);font-size:14.5px}
.hc-search{display:flex;align-items:center;gap:8px;max-width:640px;margin:16px auto 0;padding:5px 5px 5px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2)}
.hc-search:focus-within{border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-s)}
.hc-search>i{font-size:20px;color:var(--ink-3)}
.hc-search input{flex:1;min-width:0;border:0;outline:0;background:none;height:40px;font:inherit;font-size:14.5px;color:var(--ink)}
.hc-search button{height:40px;padding:0 20px;border:0;border-radius:var(--r);background:var(--mint);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.hc-search button:hover{background:var(--mint-d)}
.hc-quick{display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:center;margin-top:12px;font-size:12.5px;color:var(--ink-3)}
.hc-quick a{padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2)}
.hc-quick a:hover{border-color:var(--mint);color:var(--mint)}

.hc{padding-block:26px 40px}
.hc-sec{margin-bottom:30px}
.hc-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.hc-h small{color:var(--ink-3);font-size:12px}
.hc-count{margin:0;font-weight:700;color:var(--ink-2)}
.hc-lead{margin:0 0 14px;color:var(--ink-2)}

.hc-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.hc-cat{display:flex;gap:12px;align-items:flex-start;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,box-shadow .15s,transform .15s}
.hc-cat:hover{border-color:var(--mint);box-shadow:var(--sh-2);transform:translateY(-1px)}
.hc-cat .ic{flex:none}
.hc-cat b{display:block;font-size:14.5px;color:var(--ink)}
.hc-cat small{display:block;margin:3px 0 6px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.hc-cat em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--mint-d)}
.hc-cats-s .hc-cat{align-items:center;padding:10px 12px}

.hc-two{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.hc-list{display:grid;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.hc-list a{display:flex;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line-2)}
.hc-list a:first-child{border-top:0}
.hc-list a:hover{background:var(--bg-2)}
.hc-list a>i:first-child{font-size:20px;color:var(--mint)}
.hc-list span{flex:1;min-width:0}
.hc-list b{display:block;font-size:13.5px;color:var(--ink)}
.hc-list small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.hc-list .cv{color:var(--ink-4);font-size:14px}
.hc-role{display:grid;gap:8px}
.hc-role .hc-h{margin-bottom:4px}
.hc-role a{display:flex;gap:11px;align-items:center;padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.hc-role a:hover{border-color:var(--blue)}
.hc-role a>i{font-size:22px;color:var(--blue)}
.hc-role b{display:block;font-size:13.5px}
.hc-role small{color:var(--ink-3);font-size:12px}

.hc-empty{display:grid;justify-items:center;gap:6px;padding:30px 16px;text-align:center;color:var(--ink-3);background:var(--bg-2);border-radius:var(--r);margin-bottom:18px}
.hc-empty i{font-size:34px;color:var(--ink-4)}
.hc-empty b{color:var(--ink)}

.hc-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:start}
.hc-nav{position:sticky;top:84px;display:grid;gap:2px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.hc-nav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-s);font-size:13px;font-weight:600;color:var(--ink-2)}
.hc-nav a i{font-size:18px;color:var(--ink-3)}
.hc-nav a small{margin-left:auto;font-size:11px;color:var(--ink-4)}
.hc-nav a:hover{background:var(--bg-2)}
.hc-nav a.on{background:var(--mint-s);color:var(--mint-d)}
.hc-nav a.on i{color:var(--mint)}

.hc-art{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;min-width:0}
.hc-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--mint-s);color:var(--mint-d)}
.hc-art h1{margin:10px 0 6px;font-size:24px;font-weight:800;letter-spacing:-.3px;line-height:1.3;text-wrap:balance}
.hc-sum{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line-2);color:var(--ink-2);font-size:14.5px}
.hc-body{font-size:14.5px;line-height:1.75;color:var(--ink-2);max-width:68ch}
.hc-body p{margin:0 0 12px}
.hc-body ol,.hc-body ul{margin:0 0 14px;padding-left:22px;display:grid;gap:6px}
.hc-body b{color:var(--ink)}
.hc-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.hc-body code{padding:1px 6px;background:var(--bg-3);border-radius:var(--r-s);font-size:.9em}
.hc-meta{display:flex;align-items:center;gap:6px;margin-top:18px;font-size:12px;color:var(--ink-3)}
.hc-vote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding:12px 14px;background:var(--bg-2);border-radius:var(--r);font-size:13.5px}
.hc-vote form{display:flex;gap:6px}
.hc-vote i{color:var(--mint)}
.hc-rel{margin-top:22px}
.hc-rel h3{margin:0 0 8px;font-size:15px}

.hc-contact{margin-top:34px;padding:22px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r)}
.hc-cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.hc-c{display:grid;gap:3px;justify-items:start;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-align:left;font:inherit;color:inherit;cursor:pointer}
.hc-c:hover{border-color:var(--mint);box-shadow:var(--sh-1)}
.hc-c .ic{margin-bottom:6px}
.hc-c b{font-size:14px;color:var(--ink)}
.hc-c small{font-size:12.5px;color:var(--ink-3);line-height:1.45}

.hc-g{display:inline-block;margin:5px 5px 0 0;padding:1px 8px;border-radius:999px;background:#fff4d9;color:#a96a00;font-style:normal;font-size:11px;font-weight:700}
.hc-art .hc-g{margin:0 0 0 6px}
.hc-bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.hc-b{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:var(--r)}
.hc-b:hover{border-color:var(--orange);box-shadow:var(--sh-1)}
.hc-b b{display:block;font-size:13.5px;color:var(--ink)}
.hc-b small{display:block;margin:2px 0 5px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.hc-b em{font-style:normal;font-size:11px;font-weight:700;color:#a96a00}
.hc-boost2{margin:0 0 18px;padding:14px;background:linear-gradient(135deg,#fff8e6,#f4fbf8);border:1px solid #f3dca4;border-radius:var(--r)}
.hc-boost2 .h-sec{font-size:16px}
.hc-boost2 .h-sec i{color:var(--orange)}
.hc-cta{margin-top:16px}
.hc-body h3{margin:18px 0 6px;font-size:15px;color:var(--ink)}
@media (max-width:900px){
  .hc-two{grid-template-columns:1fr}
  .hc-layout{grid-template-columns:1fr}
  .hc-nav{position:static;display:flex;overflow-x:auto;gap:6px;padding:6px;scrollbar-width:none}
  .hc-nav::-webkit-scrollbar{display:none}
  .hc-nav a{flex:none;white-space:nowrap;border:1px solid var(--line)}
  .hc-nav a small{display:none}
}
@media (max-width:640px){
  .hc-hero{padding:24px 0 22px}
  .hc-hero h1,.hc-hero .hc-t{font-size:23px}
  .hc-hero p{font-size:13.5px}
  .hc-search button{padding:0 14px}
  .hc-art{padding:16px 14px}
  .hc-art h1{font-size:20px}
  .hc-cats{grid-template-columns:1fr}
  .hc-contact{padding:14px}
}