/* Shared header for standalone learning/content pages.
   Keep this file as the single source of truth for new section-page headers. */
.nhh-section-top{
  min-height:64px !important;
  padding:8px 18px !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  position:sticky !important;
  top:0 !important;
  z-index:99980 !important;
  width:100% !important;
  background:#6b4e8c !important;
  background-color:#6b4e8c !important;
  background-image:none !important;
  color:#fff !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 4px 16px rgba(75,48,99,.18) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-family:var(--nhh-site-font,'Noto Serif','Noto Serif SC','Noto Serif CJK SC','Segoe UI',system-ui,sans-serif) !important;
  opacity:1 !important;
}
.nhh-section-left{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
  flex:0 1 auto !important;
}
.nhh-section-home{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:38px !important;
  padding:7px 13px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.95) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  color:#6b4e8c !important;
  text-decoration:none !important;
  font-size:.90rem !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transition:transform .15s ease,background .15s ease !important;
}
.nhh-section-home:hover{background:#fff !important;transform:translateY(-1px)}
.nhh-section-brand{
  font-size:.96rem !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:#fff !important;
}
.nhh-section-badge{
  flex:0 0 auto !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  color:#fff !important;
  font-size:.76rem !important;
  font-weight:700 !important;
  line-height:1.15 !important;
}
.nhh-section-contact{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  color:#fff !important;
  white-space:nowrap !important;
  font-size:.76rem !important;
  line-height:1.3 !important;
  min-width:0 !important;
  flex:0 1 auto !important;
}
.nhh-section-contact b{font-size:.81rem !important;color:#fff !important}
.nhh-section-contact-meta{display:flex !important;align-items:center !important;gap:10px !important}
.nhh-section-contact span{color:#fff !important}
.nhh-section-contact a{color:#fff !important;text-decoration:underline !important;font-weight:700 !important}

/* Account avatar lives inside the same purple bar. site-ui.js hydrates the menu. */
.nhh-section-top > .nhh-account-anchor.nhh-in-nav{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  flex:0 0 auto !important;
  margin:0 0 0 2px !important;
  z-index:99990 !important;
}
.nhh-section-top .nhh-avatar-btn{
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  border:2px solid #d8b35d !important;
  background:#f4eaf8 !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
  box-shadow:0 4px 14px rgba(107,78,140,.18) !important;
  overflow:hidden !important;
  padding:0 !important;
}
.nhh-section-top .nhh-avatar-btn img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important}

@media(max-width:900px){
  .nhh-section-top{min-height:56px !important;padding:7px 12px !important;gap:9px !important}
  .nhh-section-left{gap:9px !important}
  .nhh-section-home{min-height:35px !important;padding:6px 11px !important;font-size:.82rem !important}
  .nhh-section-brand{font-size:.88rem !important}
  .nhh-section-contact-meta{display:none !important}
  .nhh-section-top .nhh-avatar-btn{width:40px !important;height:40px !important}
}
@media(max-width:620px){
  .nhh-section-top{min-height:54px !important;padding:6px 9px !important}
  .nhh-section-brand{max-width:42vw !important}
  .nhh-section-badge{display:none !important}
  .nhh-section-contact{display:none !important}
  .nhh-section-top .nhh-avatar-btn{width:38px !important;height:38px !important}
}


/* V132: section identity = icon + actual section name (not generic "Học tập / VIDEO"). */
.nhh-section-area{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  min-width:0 !important;
  padding:5px 11px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
}
.nhh-section-area-icon{
  flex:0 0 auto !important;
  width:30px !important;
  height:30px !important;
  display:grid !important;
  place-items:center !important;
  font-size:1.25rem !important;
  line-height:1 !important;
}
.nhh-section-area-name{
  min-width:0 !important;
  color:#fff !important;
  font-family:var(--nhh-site-font,'Noto Serif','Noto Serif SC','Noto Serif CJK SC','Segoe UI',system-ui,sans-serif) !important;
  font-weight:800 !important;
  font-size:.94rem !important;
  line-height:1.16 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Keep the account avatar at the far right of the same header. */
.nhh-section-top > #nhhAccountQuick,
.nhh-section-top > .nhh-account-anchor.nhh-in-nav{
  display:block !important;
  flex:0 0 auto !important;
}

@media(max-width:900px){
  .nhh-section-area{padding:4px 8px !important;gap:6px !important}
  .nhh-section-area-icon{width:26px !important;height:26px !important;font-size:1.08rem !important}
  .nhh-section-area-name{font-size:.84rem !important}
}
@media(max-width:620px){
  .nhh-section-area{max-width:52vw !important}
  .nhh-section-area-name{white-space:normal !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important}
}


/* V134: shared visual theme for every page under Tổng hợp.
   This is intentionally the same page background used by 专题词汇 · Từ vựng theo chủ đề. */
:root{
  --nhh-site-font:'Noto Serif','Noto Serif SC','Noto Serif CJK SC','Segoe UI',system-ui,sans-serif;
  --nhh-tonghop-page-background:linear-gradient(180deg,rgba(245,239,250,.82) 0%,rgba(238,229,248,.86) 100%),url('../tu-vung-chu-de/assets/topic-bg.jpg') center center / cover fixed no-repeat;
}
html:has(body.nhh-tonghop-page){
  background:#fbf9fe;
}
body.nhh-tonghop-page{
  min-height:100vh;
  background:var(--nhh-tonghop-page-background) !important;
  background-image:var(--nhh-tonghop-page-background) !important;
}


/* V136: avatar luôn chiếm chỗ ở mép phải. site-ui.js có thể hydrate menu sau;
   nếu chưa đăng nhập thì avatar trung tính vẫn là lối vào trang tài khoản. */
.nhh-section-top > #nhhAccountQuick{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.nhh-section-top > #nhhAccountQuick .nhh-avatar-btn{
  display:grid !important;
}

html:has(body.nhh-tonghop-page),body.nhh-tonghop-page{background:linear-gradient(180deg,rgba(245,239,250,.82) 0%,rgba(238,229,248,.86) 100%),url('../tu-vung-chu-de/assets/topic-bg.jpg') center center / cover fixed no-repeat!important;background-image:linear-gradient(180deg,rgba(245,239,250,.82) 0%,rgba(238,229,248,.86) 100%),url('../tu-vung-chu-de/assets/topic-bg.jpg')!important;background-position:center center!important;background-size:cover!important;background-attachment:fixed!important;background-repeat:no-repeat!important;}

/* NHH GLOBAL KAITI FONT STACK v1 */
:root{--nhh-kaiti-font:"华文楷体","STKaiti","KaiTi","楷体","Kaiti SC","KaiTi_GB2312",serif}
html,body,button,input,textarea,select,option{
  font-family:var(--nhh-kaiti-font)!important;
}