/* Hodine Creator: header + footer các trang công khai (trang giới thiệu, kho theme, bảng giá, đối tác, nhà thiết kế, cuộc thi, hỗ trợ...).
   Markup: includes/header.tpl, includes/site_foot.tpl. Tiền tố cp- để không đụng hc-* (home-v2.css) và bootstrap. */
.cp-top{position:sticky;top:0;z-index:1001;padding:0;margin:0;font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;transition:background .2s,box-shadow .2s;background:rgba(251,252,253,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 #e4e9ef}
/* main.css đặt *{font-family:Arial}: giữ font của header/footer */
.cp-top *,.cp-foot *{font-family:inherit}
.cp-top.cp-clear:not(.sh){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.cp-in{max-width:1200px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:24px}
.cp-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:#0f1f2e;text-decoration:none;flex-shrink:0}
.cp-logo:hover{color:#0f1f2e}
.cp-logo small{font-weight:500;color:#6b7a8f;font-size:13px;margin-left:-4px}
.cp-nav{display:flex;gap:2px}
.cp-nav a{padding:8px 12px;border-radius:9px;font-size:14px;font-weight:500;color:#44546a;text-decoration:none;white-space:nowrap}
.cp-nav a:hover{background:rgba(15,31,46,.05);color:#0f1f2e}
.cp-nav a.on{color:#076968;font-weight:600}
.cp-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.cp-bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;transition:.15s;line-height:1.4}
.cp-bt.d{background:#0f1f2e;color:#fff}.cp-bt.d:hover{background:#1d3347;color:#fff}
.cp-bt.g{color:#44546a;background:none}.cp-bt.g:hover{background:rgba(15,31,46,.05);color:#0f1f2e}
.cp-burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid #e4e9ef;background:#fff;color:#0f1f2e;place-items:center;cursor:pointer;padding:0}
.cp-mm{display:none;max-width:1200px;margin:0 auto;padding:4px 16px 16px}
.cp-mm a{display:block;padding:11px 12px;border-radius:10px;font-size:15px;font-weight:500;color:#0f1f2e;text-decoration:none}
.cp-mm a:hover{background:#f5f8fa}
.cp-mm .cp-mm-act{display:flex;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid #eef2f5}
.cp-mm .cp-mm-act .cp-bt{flex:1;padding:11px}
.cp-top.open{background:#fff;box-shadow:0 12px 30px rgba(15,31,46,.12)}
.cp-top.open .cp-mm{display:block}

.cp-foot{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:36px 0 30px;font-size:13.5px;color:#6b7a8f;border-top:1px solid #eef2f5;background:#fbfcfd}
.cp-foot-in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:18px 28px;flex-wrap:wrap}
.cp-foot nav{display:flex;gap:8px 20px;flex-wrap:wrap}
.cp-foot a{color:#6b7a8f;text-decoration:none}
.cp-foot a:hover{color:#0f1f2e}
.cp-foot .cp-logo{color:#0f1f2e}

@media(max-width:1060px){.cp-nav a{padding:8px 9px;font-size:13.5px}}
@media(max-width:960px){.cp-nav,.cp-r .cp-bt{display:none}.cp-burger{display:grid}.cp-r{gap:6px}}
@media(max-width:640px){.cp-in{padding:0 16px;gap:12px}.cp-logo small{display:none}.cp-foot-in{padding:0 16px}}

/* trang hướng dẫn (layouts/support.tpl, body.cp-sp): nội dung bootstrap cũ theo màu, chữ của bộ giao diện mới */
body.cp-sp{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#fbfcfd;color:#0f1f2e;-webkit-font-smoothing:antialiased}
.cp-sp>.container{max-width:980px}
.cp-sp .card{border:1px solid #e4e9ef;border-radius:16px;box-shadow:0 1px 2px rgba(15,31,46,.05),0 6px 20px rgba(15,31,46,.06)!important}
.cp-sp .card-body{padding:22px 24px}
.cp-sp h1{font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.025em;margin-bottom:8px}
.cp-sp h2,.cp-sp h3{font-weight:700;letter-spacing:-.015em}
.cp-sp>.container a{color:#076968;text-decoration:none}
.cp-sp>.container a:hover{color:#0a8584;text-decoration:underline}
.cp-sp .card-body .text-lg a,.cp-sp .card-body>p:first-child a{font-weight:600;color:#0f1f2e}
.cp-sp #headsearch .form-control{height:46px;border-radius:12px 0 0 12px;border-color:#e4e9ef}
.cp-sp #headsearch .btn{border-radius:0 12px 12px 0;background:#0f1f2e;border-color:#0f1f2e}
.cp-sp .form-control:focus{border-color:#1dc2c1;box-shadow:0 0 0 3px #e8f9f8}