/* ============================================================================
   HB Guide: các phần nội dung viết thêm trên trang nhân vật (hb_guide_json).
   Không đổi giao diện site: build/đội hình dùng class cũ trong style.css,
   các thẻ mới theo kiểu thẻ Ưu/Nhược điểm (.hb-proscons).
   Bảng màu: nền #1a1d27 / #1f2330, viền #2a2f3e, vàng #ceae7e, chữ #cdd2e3
   ========================================================================= */

/* ---- Có nên roll không ---- */
.hb-verdict{margin:18px 0 18px;border:1px solid #2a2f3e;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#1f2330 0%,#181b25 100%)}
.hb-verdict__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 20px;background:#1a1d27;border-bottom:1px solid #2a2f3e}
.hb-verdict__title{margin:0;font-family:'Be Vietnam Pro','Open Sans',sans-serif;font-size:16px !important;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.3px;text-shadow:none;-webkit-text-stroke:0}
.hb-verdict__role{font-size:12px;font-weight:700;color:#ceae7e;border:1px solid #ceae7e66;border-radius:20px;padding:3px 10px}
.hb-verdict__body{padding:16px 20px 18px}
.hb-verdict__body p{margin:0 0 10px;color:#cdd2e3;font-size:15px;line-height:1.65}
.hb-verdict__who{color:#aab1c4 !important;font-size:14px !important}
.hb-verdict__modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.hb-verdict__mode{background:#1a1d27a6;border:1px solid #2a2f3e;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.hb-verdict__mode-name{font-size:13px;font-weight:700;color:#fff}
.hb-verdict__mode-tag{align-self:flex-start;font-size:11px;font-weight:700;color:#5de3ff;background:#193047;border-radius:5px;padding:2px 8px}
.hb-verdict__mode-note{font-size:13px;line-height:1.5;color:#aab1c4}
@media(max-width:768px){.hb-verdict__modes{grid-template-columns:1fr}}

/* ---- link trong các đoạn viết (ghi chú nón/di vật dùng .weapon-note có sẵn) ---- */
.weapon-note a,.hb-verdict a,.hb-synergy__text a,.hb-tips a,.hb-faq__answer a,.builds-desc a,.hb-team__alts a{color:#ceae7e}

/* ---- đoạn giải thích chỉ số trải hết chiều ngang ---- */
.builds-stats-grid > .builds-desc--stats{grid-column:1 / -1}

/* ---- tên build khi có nhiều build ---- */
.hb-build + .hb-build{margin-top:34px;padding-top:26px;border-top:1px dashed #2a2f3e}

/* ---- đội hình: dòng "Thay X bằng" ---- */
.hb-team__alts{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:13px;color:#aab1c4}

/* ---- đồng đội hợp ---- */
.hb-synergy__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hb-synergy__item{display:flex;gap:12px;align-items:flex-start;background:#1a1d27a6;border-radius:8px;padding:10px}
.hb-synergy__pic{flex:0 0 56px;width:56px;height:56px;border-radius:5%;overflow:hidden;display:block}
.hb-synergy__pic.star-4{background:url("/wp-content/uploads/4-star-bg.png") center/cover}
.hb-synergy__pic.star-5{background:url("/wp-content/uploads/5-star-bg.webp") center/cover}
.hb-synergy__pic img{width:100%;height:100%;object-fit:cover;display:block}
.hb-synergy__name{font-weight:700;color:#fff !important}
.hb-synergy__text p{margin:2px 0 0;font-size:13px;line-height:1.5;color:#aab1c4}
@media(max-width:768px){.hb-synergy__grid{grid-template-columns:1fr}}

/* ---- cách chơi + mẹo ---- */
.hb-gameplay__item + .hb-gameplay__item{margin-top:14px}
.hb-tips{margin-top:18px;padding:14px 18px;border:1px solid #2a2f3e;border-radius:10px;background:#1a1d27a6}
.hb-tips__title{margin:0 0 8px !important;font-size:15px !important;color:#ceae7e}
.hb-tips ul{list-style:none;margin:0;padding:0}
.hb-tips li{position:relative;padding:5px 0 5px 18px;line-height:1.55;font-size:14px;color:#cdd2e3}
.hb-tips li:before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;border-radius:50%;background:#ceae7e}

/* ---- khối Giới thiệu dời xuống cuối trang: liền trong khối, giống lúc nằm trong thẻ đầu trang ---- */
.hb-intro .hb-cp{background:transparent;border:0;border-radius:0;margin:0;overflow:visible}

/* ---- hỏi đáp ---- */
.hb-faq__item{border:1px solid #2a2f3e;border-radius:8px;margin-bottom:8px;background:#1a1d27a6;overflow:hidden}
.hb-faq__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;font-weight:600;color:#fff}
.hb-faq__item summary::-webkit-details-marker{display:none}
.hb-faq__item summary:after{content:"+";flex:0 0 auto;color:#ceae7e;font-size:18px;font-weight:700}
.hb-faq__item[open] summary:after{content:"\2212"}
.hb-faq__answer{padding:0 16px 14px;color:#cdd2e3;font-size:14px;line-height:1.6}