/* Hướng dẫn + Có gì mới */
.hg-sec { padding: 0; overflow: hidden; }
.hg-sec > summary {
  list-style: none; cursor: pointer; padding: 16px 18px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; gap: 10px;
}
.hg-sec > summary::-webkit-details-marker { display: none; }
.hg-sec > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .2s; }
.hg-sec[open] > summary::after { transform: rotate(180deg); }
.hg-sec[open] > summary { border-bottom: 2px solid var(--line); }
.hg-sec > .hg-body { padding: 4px 18px 18px; }
.hg-body { line-height: 1.55; overflow-wrap: anywhere; }
.hg-body h1, .hg-body h2 { font-size: 22px; margin: 12px 0 6px; }
.hg-body h3 { font-size: 18px; margin: 18px 0 6px; color: var(--purple-d); }
.hg-body p { margin: 8px 0; }
.hg-body ul, .hg-body ol { margin: 6px 0; padding-left: 22px; }
.hg-body li { margin: 4px 0; }
.hg-body blockquote { margin: 10px 0; padding: 10px 14px; background: #FFFBEA; border-left: 5px solid var(--yellow); border-radius: 12px; }
.hg-body blockquote p { margin: 4px 0; }
.hg-body code { background: #F4EEE2; padding: 1px 6px; border-radius: 6px; font-size: .92em; }
.hg-body a { font-weight: 700; cursor: pointer; }
.hg-body hr { border: 0; border-top: 2px dashed var(--line); margin: 16px 0; }
.hg-tbl { overflow-x: auto; margin: 10px 0; -webkit-overflow-scrolling: touch; }
.hg-tbl table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 14px; }
.hg-tbl th, .hg-tbl td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.hg-tbl th { background: #FFF1DA; font-weight: 800; }
.hg-tbl tr:nth-child(even) td { background: #FFFCF5; }
.wn-latest { border: 3px solid var(--green); }
.wn-latest h2 { margin: 0; }
.hg-foot { color: var(--muted); }
.hg-foot a { font-weight: 800; cursor: pointer; }
.hg-img { display: block; max-width: min(62%, 230px); margin: 12px auto; border-radius: 18px; border: 3px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.08); cursor: zoom-in; }
.hg-zoom { position: fixed; inset: 0; z-index: 9999; background: rgba(20,14,40,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.hg-zoom img { max-width: 100%; max-height: calc(100% - 50px); border-radius: 14px; }
.hg-zoom p { color: #fff; margin: 10px 0 0; text-align: center; font-weight: 700; }