/* HERAC Brand – nhận diện dùng chung với herac.org (herac-theme) */
:root {
  --herac-green: #1a6b3a;
  --herac-green-dark: #0d4a28;
  --herac-green-light: #28a05a;
  --herac-green-pale: #eaf7ef;
  --herac-red: #c0392b;
  --herac-text: #0d2a1a;
  --herac-body: #374151;
  --herac-muted: #6b7280;
  --herac-border: #e5e7eb;
  --herac-bg: #f5f7f5;
  --herac-white: #ffffff;
  --hb-display: 'Playfair Display', Georgia, serif;
  --hb-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hb-width: 1240px;
  --hb-radius-sm: 8px;
  --hb-radius-md: 12px;
  --hb-radius-lg: 18px;
  --hb-shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --hb-shadow-md: 0 4px 20px rgba(0,0,0,.09);
  --hb-ease: all .25s ease;
}

/* ── Khung chung ── */
.hb-chrome, .hb-chrome *, .hb-landing, .hb-landing * { box-sizing: border-box; }
.hb-container { width: 100%; max-width: var(--hb-width); margin: 0 auto; padding-left: 52px; padding-right: 52px; }
.hb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hb-chrome { font-family: var(--hb-sans); }
.hb-chrome a { text-decoration: none; transition: var(--hb-ease); }
.hb-chrome ul { list-style: none; margin: 0; padding: 0; }
.hb-chrome p { margin: 0; }

/* ── Thanh trên cùng ── */
.hb-topbar { background: var(--herac-green-dark); padding: 7px 0; }
.hb-topbar .hb-container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hb-tagline { font-size: .68rem; font-weight: 600; letter-spacing: .03em; color: rgba(255,255,255,.8); }
.hb-toplinks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hb-toplinks a { font-size: .68rem; color: rgba(255,255,255,.6); padding: 2px 8px; display: inline-flex; align-items: center; gap: 5px; }
.hb-toplinks a + a { border-left: 1px solid rgba(255,255,255,.12); }
.hb-toplinks a:hover { color: #fff; }
.hb-toplinks svg { width: 12px; height: 12px; fill: currentColor; }
.hb-toplinks .hb-account { margin-left: 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .62rem; padding: 3px 10px; }
.hb-toplinks .hb-account:hover { background: rgba(255,255,255,.1); }

/* ── Header ── */
.hb-header { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--herac-border); position: sticky; top: 0; z-index: 9990; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.admin-bar .hb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hb-header { top: 0; } }
.hb-header .hb-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 80px; transition: height .25s ease; }
.hb-header.is-scrolled .hb-container { height: 66px; }
.hb-logo { display: inline-flex; align-items: center; gap: 12px; }
.hb-logo img { height: 56px; width: auto; display: block; transition: height .25s ease; }
.hb-header.is-scrolled .hb-logo img { height: 46px; }
.hb-site-label { font-family: var(--hb-display); font-weight: 600; font-style: italic; font-size: 1.15rem; color: var(--herac-green); border-left: 1px solid var(--herac-border); padding-left: 12px; line-height: 1; }
.hb-nav { display: flex; align-items: center; gap: 10px; }
.hb-menu { display: flex; align-items: center; gap: 2px; }
.hb-menu > li { position: relative; }
.hb-menu a { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--herac-body); padding: 8px 11px; border-radius: var(--hb-radius-sm); }
.hb-menu a:hover, .hb-menu .current-menu-item > a, .hb-menu .current-menu-ancestor > a { color: var(--herac-green); background: var(--herac-green-pale); }
.hb-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border: 1px solid var(--herac-border); border-radius: var(--hb-radius-md); box-shadow: var(--hb-shadow-md); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: var(--hb-ease); z-index: 10; }
.hb-menu li:hover > .sub-menu, .hb-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.hb-menu .sub-menu a { text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 500; }
.hb-cta { background: var(--herac-green); color: #fff !important; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 10px 18px; border-radius: var(--hb-radius-sm); box-shadow: 0 2px 14px rgba(26,107,58,.3); white-space: nowrap; }
.hb-cta:hover { background: var(--herac-green-dark); }
.hb-toggle { display: none; background: none; border: 1px solid var(--herac-border); border-radius: var(--hb-radius-sm); width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.hb-toggle-bars, .hb-toggle-bars::before, .hb-toggle-bars::after { display: block; width: 20px; height: 2px; background: var(--herac-text); border-radius: 2px; position: relative; transition: var(--hb-ease); }
.hb-toggle-bars::before, .hb-toggle-bars::after { content: ''; position: absolute; left: 0; }
.hb-toggle-bars::before { top: -6px; }
.hb-toggle-bars::after { top: 6px; }
.hb-toggle[aria-expanded="true"] .hb-toggle-bars { background: transparent; }
.hb-toggle[aria-expanded="true"] .hb-toggle-bars::before { top: 0; transform: rotate(45deg); }
.hb-toggle[aria-expanded="true"] .hb-toggle-bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .hb-container { padding-left: 24px; padding-right: 24px; }
  .hb-toggle { display: inline-flex; }
  /* backdrop-filter tạo khung chứa cho phần tử fixed → bỏ trên di động để menu phủ toàn màn hình */
  .hb-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .hb-nav { position: fixed; left: 0; right: 0; top: var(--hb-nav-top, 112px); bottom: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 16px 24px 32px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s; border-top: 1px solid var(--herac-border); }
  .hb-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .hb-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .hb-menu a { font-size: .85rem; padding: 14px 8px; border-bottom: 1px solid var(--herac-border); border-radius: 0; }
  .hb-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 14px; }
  .hb-cta { text-align: center; margin-top: 16px; padding: 14px; }
  html.hb-menu-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .hb-tagline { display: none; }
  .hb-topbar .hb-container { justify-content: center; }
  .hb-toplinks .hb-toplink-social span { display: none; }
  .hb-container { padding-left: 16px; padding-right: 16px; }
  .hb-logo img { height: 44px; }
}

/* ── Footer ── */
.hb-footer { background: linear-gradient(150deg, #0d4a28, #0a3820, #07271a); color: #fff; padding: 60px 0 28px; margin-top: 0; }
.hb-fgrid { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 36px; margin-bottom: 44px; }
.hb-flogo img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .9; display: block; margin-bottom: 14px; }
.hb-ftag { font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(110,231,183,.7); margin-bottom: 12px !important; }
.hb-fabout { font-size: .8rem; line-height: 1.75; color: rgba(255,255,255,.55); }
.hb-fsocial { display: flex; gap: 8px; margin-top: 18px; }
.hb-social { width: 36px; height: 36px; border-radius: var(--hb-radius-sm); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.hb-social svg { width: 15px; height: 15px; fill: currentColor; }
.hb-social span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hb-social:hover { background: rgba(26,107,58,.5); border-color: rgba(110,231,183,.4); }
.hb-fcol h4 { font-family: var(--hb-sans) !important; font-size: .66rem !important; font-weight: 700 !important; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.9) !important; margin: 0 0 16px !important; line-height: 1.4 !important; }
.hb-fcol li { margin-bottom: 10px; font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.6; }
.hb-fcol a { color: rgba(255,255,255,.6); font-size: .82rem; }
.hb-fcol a:hover { color: #fff; padding-left: 3px; }
.hb-fbottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.hb-fbottom p { font-size: .72rem; color: rgba(255,255,255,.4); }
.hb-fbottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.hb-fbottom a { font-size: .72rem; color: rgba(255,255,255,.45); }
.hb-fbottom a:hover { color: #fff; }

/* ── Trang đích & shortcode ── */
body.herac-landing { margin: 0; background: var(--herac-bg); font-family: var(--hb-sans); color: var(--herac-body); line-height: 1.7; -webkit-font-smoothing: antialiased; }
.hb-landing { display: block; }
.hb-landing h1, .hb-landing h2, .hb-landing h3 { font-family: var(--hb-display); color: var(--herac-text); line-height: 1.15; font-weight: 700; margin: 0; }
.hb-landing p { margin: 0; }
.hb-landing a { text-decoration: none; }
.hb-wrap { padding-top: 56px; padding-bottom: 56px; }

.hb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--hb-radius-sm); font-family: var(--hb-sans); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: var(--hb-ease); white-space: nowrap; text-decoration: none; }
.hb-btn-primary { background: var(--herac-green); color: #fff !important; box-shadow: 0 4px 20px rgba(26,107,58,.3); }
.hb-btn-primary:hover { background: var(--herac-green-dark); transform: translateY(-1px); }
.hb-btn-secondary { background: #fff; color: var(--herac-text) !important; border-color: var(--herac-border); }
.hb-btn-secondary:hover { border-color: var(--herac-green); color: var(--herac-green) !important; }
.hb-btn-light { background: #fff; color: var(--herac-green-dark) !important; }
.hb-btn-light:hover { background: var(--herac-green-pale); }

.hb-eyebrow { font-size: .68rem !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--herac-green); margin-bottom: 10px !important; }
.hb-hero { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 85% 40%, #d7efe0 0%, transparent 60%), linear-gradient(180deg, #eef7f1, #f5f9f6); padding: 90px 0 110px; }
.hb-hero-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: center; position: relative; z-index: 1; }
.hb-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(26,107,58,.08); border: 1px solid rgba(26,107,58,.18); border-radius: 999px; padding: 6px 14px; font-size: .82rem; color: var(--herac-text); margin-bottom: 18px; }
.hb-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--herac-green-light); box-shadow: 0 0 0 4px rgba(40,160,90,.15); }
.hb-hero-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem) !important; letter-spacing: -.01em; text-wrap: balance; margin-bottom: 20px !important; }
.hb-hero-title em { font-style: italic; color: var(--herac-green); }
.hb-hero-text { font-size: 1.02rem; color: var(--herac-body); max-width: 560px; margin-bottom: 30px !important; }
.hb-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hb-hero-stats { display: grid; gap: 14px; justify-items: end; }
.hb-stat { background: #fff; border-radius: var(--hb-radius-md); box-shadow: var(--hb-shadow-md); padding: 14px 20px; min-width: 170px; }
.hb-stat strong { display: block; font-family: var(--hb-display); font-size: 1.7rem; color: var(--herac-green-dark); line-height: 1.1; }
.hb-stat span { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--herac-muted); }
.hb-hero-ecg { position: absolute; left: 0; right: 0; bottom: 30px; width: 100%; height: 110px; }
.hb-hero-ecg path { fill: none; stroke: rgba(26,107,58,.12); stroke-width: 2; }

.hb-section { padding: 64px 0 8px; }
.hb-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.hb-sec-title { font-size: clamp(1.6rem, 3vw, 2.3rem) !important; text-wrap: balance; }
.hb-more { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--herac-green) !important; }
.hb-note { color: var(--herac-muted); font-style: italic; }

.hb-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.hb-course { background: #fff; border: 1px solid var(--herac-border); border-radius: var(--hb-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: var(--hb-ease); }
.hb-course:hover { box-shadow: var(--hb-shadow-md); transform: translateY(-3px); border-color: rgba(26,107,58,.3); }
.hb-course-img { display: block; aspect-ratio: 16 / 9; background: var(--herac-green-pale); overflow: hidden; }
.hb-course-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-course-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e3f3e9, #c9e8d5); }
.hb-course-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hb-course-cat { font-size: .62rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--herac-green); }
.hb-course h3 { font-size: 1.08rem !important; line-height: 1.35 !important; }
.hb-course h3 a { color: var(--herac-text); }
.hb-course h3 a:hover { color: var(--herac-green); }
.hb-course-meta { font-size: .8rem; color: var(--herac-muted); }
.hb-course-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--herac-border); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hb-course-price { font-weight: 700; color: var(--herac-red); font-size: .95rem; }
.hb-course-price del, .hb-course-price .origin-price { color: var(--herac-muted); font-weight: 400; font-size: .8rem; margin-right: 6px; }
.hb-free { color: var(--herac-green); }
.hb-course-link { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--herac-green) !important; }

.hb-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.hb-cat { background: #fff; border: 1px solid var(--herac-border); border-radius: var(--hb-radius-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; transition: var(--hb-ease); }
.hb-cat strong { font-family: var(--hb-display); font-size: 1.05rem; color: var(--herac-text); }
.hb-cat span { font-size: .78rem; color: var(--herac-muted); }
.hb-cat:hover { border-color: var(--herac-green); background: var(--herac-green-pale); }

.hb-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.hb-feat { background: #fff; border-radius: var(--hb-radius-md); padding: 24px; border-top: 3px solid var(--herac-green); box-shadow: var(--hb-shadow-sm); }
.hb-feat h3 { font-size: 1.1rem !important; margin-bottom: 8px !important; }
.hb-feat p { font-size: .9rem; color: var(--herac-body); }

.hb-cta-band { background: linear-gradient(120deg, var(--herac-green), var(--herac-green-dark)); margin-top: 72px; padding: 56px 0; }
.hb-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.hb-cta-band h2 { color: #fff !important; font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; margin-bottom: 8px !important; }
.hb-cta-band p { color: rgba(255,255,255,.75); max-width: 620px; }

@media (max-width: 900px) {
  .hb-hero { padding: 56px 0 80px; }
  .hb-hero-inner { grid-template-columns: 1fr; }
  .hb-hero-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); justify-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-chrome *, .hb-landing * { transition: none !important; }
}

/* Footer responsive (đặt sau quy tắc gốc) */
@media (max-width: 1100px) {
  .hb-fgrid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .hb-fbrand { grid-column: 1 / -1; max-width: 560px; }
}
@media (max-width: 640px) {
  .hb-fgrid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

/* Bài viết / sự kiện & ô liên kết */
.hb-empty { background: #fff; border: 1px dashed var(--herac-border); border-radius: var(--hb-radius-md); padding: 28px; text-align: center; color: var(--herac-muted); }
.hb-course-date { font-size: .78rem; color: var(--herac-muted); }
.hb-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.hb-tile { position: relative; background: #fff; border: 1px solid var(--herac-border); border-radius: var(--hb-radius-lg); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 6px; transition: var(--hb-ease); min-height: 150px; }
.hb-tile:hover { border-color: var(--herac-green); box-shadow: var(--hb-shadow-md); transform: translateY(-2px); }
.hb-tile-n { font-size: .66rem; font-weight: 700; letter-spacing: .14em; color: var(--herac-red); }
.hb-tile strong { font-family: var(--hb-display); font-size: 1.2rem; color: var(--herac-text); line-height: 1.25; }
.hb-tile-desc { font-size: .85rem; color: var(--herac-muted); }
.hb-tile-go { margin-top: auto; align-self: flex-end; color: var(--herac-green); font-weight: 700; }

/* Chống ghi đè: một số site có CSS tùy biến dạng "a { color … !important }", "h1 { font-family … !important }" */
.hb-chrome .hb-toplinks a, .hb-chrome .hb-toplinks a span, .hb-chrome .hb-tagline { color: #ffffff !important; }
.hb-chrome .hb-toplinks a + a { border-left-color: rgba(255,255,255,.25) !important; }
.hb-chrome .hb-toplinks a:hover { color: #ffffff !important; opacity: .8; }
.hb-chrome .hb-menu a { color: var(--herac-body) !important; }
.hb-chrome .hb-menu a:hover, .hb-chrome .hb-menu .current-menu-item > a, .hb-chrome .hb-menu .current-menu-ancestor > a { color: var(--herac-green) !important; }
.hb-chrome a.hb-cta { color: #fff !important; }
.hb-footer .hb-fcol a { color: rgba(255,255,255,.62) !important; }
.hb-footer .hb-fbottom a { color: rgba(255,255,255,.5) !important; }
.hb-footer .hb-fcol a:hover, .hb-footer .hb-fbottom a:hover, .hb-footer a.hb-social { color: #fff !important; }
.hb-landing h1, .hb-landing h2, .hb-landing h3 { font-family: var(--hb-display) !important; }
.hb-landing .hb-course h3 a { color: var(--herac-text) !important; }
.hb-landing .hb-course h3 a:hover { color: var(--herac-green) !important; }
.hb-landing a.hb-tile, .hb-landing a.hb-cat { color: var(--herac-text) !important; }
.hb-hero .hb-hero-ecg path { fill: none !important; stroke: rgba(26,107,58,.12) !important; }
.hb-chrome svg, .hb-landing .hb-social svg { fill: currentColor; }

/* topbar-dedupe 2026-11-01: Tin tức, Liên hệ đã có ở menu chính */
.hb-topbar a[href*="tin-tuc"],.hb-topbar a[href*="lien-he"],.hb-topbar a[href*="/contact"],.hb-topbar a[href*="#contact"],.hb-topbar a[href*="/news"]{display:none!important}

/* 2026-11-01: top bar chỉ giữ slogan, Facebook, LinkedIn, VI/EN */
.hb-toplinks a[href*="tin-tuc"],.hb-toplinks a[href*="lien-he"],.hb-toplinks .hb-account,.hb-toplinks .hb-sep{display:none!important}

/* 2026-11-01: đồng bộ font với herac.org (thay Syne/Inter của theme) */
body,body p,body li,body td,body th,body label,body input,body select,body textarea,body button,body a,body .event-info,body .event-item{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important}
body h1,body h2,body h3,body h4,body h5,body h6,body h1 a,body h2 a,body h3 a,body h4 a,body h5 a{font-family:"Playfair Display",Georgia,"Times New Roman",serif!important;letter-spacing:0!important}
html body .event-title,html body .event-title a{font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:16px!important;line-height:1.45!important;font-weight:700!important;letter-spacing:0!important}
html body h1.title-cat,html body .title-cat{font-family:"Playfair Display",Georgia,serif!important;font-size:22px!important;line-height:1.3!important;font-weight:700!important;padding:0 16px 0 72px}
body .entry-content,body .entry-content p,body .entry-content li{font-size:16px;line-height:1.75}

/* 2026-11-01: nút liên hệ nổi không che nội dung trên điện thoại */
@media (max-width:768px){#contact-bar{left:auto!important;right:8px!important;bottom:14px!important;transform:scale(.78);transform-origin:bottom right;opacity:.92}}

/* 2026-11-01: menu mobile hiện đủ (backdrop-filter làm menu fixed bị cắt) */
@media (max-width:1100px){.hb-header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#fff!important}.hb-nav.is-open{overflow-y:auto}}


/* ===== v1.1.6 — Đồng bộ đầu trang theo herac.org cho mọi site (trước đây nằm trong CSS bổ sung của event) ===== */
.hb-topbar{background:#0b3a1f!important;min-height:36px}
.hb-topbar,.hb-topbar a,.hb-topbar p{font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:12px!important;color:rgba(255,255,255,.75)!important}
.hb-topbar .hb-tagline{text-transform:uppercase;letter-spacing:.08em;font-weight:600!important;color:#9fd3b4!important}
.hb-topbar a:hover{color:#fff!important}
.hb-topbar .hb-lang a{font-size:11px!important;font-weight:700!important}
.hb-header{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #e3e9e5}
.hb-header .hb-container{gap:20px}
.hb-logo{flex:none!important}
.hb-logo img{height:58px!important;width:91px!important;max-width:none!important;object-fit:contain}
.hb-site-label{display:none!important}
.hb-header .hb-menu{gap:2px!important;flex-wrap:nowrap!important}
.hb-header .hb-menu>li>a{font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:13.5px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;color:#0d2a1a!important;padding:9px 10px!important;border-radius:8px!important;white-space:nowrap!important;line-height:1.3!important;background:transparent!important}
.hb-header .hb-menu>li>a:hover{background:#eaf4ee!important;color:#1a6b3a!important}
.hb-header .hb-menu>li.current-menu-item>a,.hb-header .hb-menu>li.current-menu-ancestor>a,.hb-header .hb-menu>li.hb-here>a{color:#1a6b3a!important;background:transparent!important}
.hb-header .hb-menu .sub-menu a{font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:13.5px!important;text-transform:none!important;letter-spacing:0!important;font-weight:500!important}
@media (max-width:1200px){.hb-header .hb-menu>li>a{padding:9px 7px!important;font-size:13px!important}}

/* v1.1.7 — Trang dựng sẵn (.hx) từng ẩn khung HERAC Brand; khi bật "Thay đầu trang & chân trang" thì khung này luôn hiển thị */
body.herac-chrome>div.hb-chrome.hb-chrome-top{display:block!important}
body.herac-chrome>footer.hb-chrome.hb-footer{display:block!important}

/* v1.2.0 — Chân trang gọn: mỗi mục nằm trên một dòng */
.hb-footer .hb-fgrid{grid-template-columns:minmax(220px,1fr) repeat(4,auto)!important;justify-content:space-between!important;gap:28px 32px!important}
.hb-footer .hb-fcol ul li,.hb-footer .hb-fcol ul li a{white-space:nowrap}
.hb-footer .hb-fcol ul li a,.hb-footer .hb-fcol ul li{font-size:13px!important;line-height:1.5!important}
.hb-footer .hb-fcol ul li{margin-bottom:9px!important}
.hb-footer .hb-fcontact ul li{white-space:normal;max-width:230px}
.hb-footer .hb-ftag{white-space:nowrap;font-size:10.5px!important;letter-spacing:.09em!important}
.hb-footer .hb-fabout{font-size:13px!important;max-width:300px}
@media (max-width:1100px){.hb-footer .hb-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hb-footer .hb-fcol ul li,.hb-footer .hb-fcol ul li a{white-space:normal}}
@media (max-width:640px){.hb-footer .hb-ftag{white-space:normal}}

/* v1.2.1 — Nút "Cổng nội bộ" ở đầu trang; bỏ mục "English" trong menu (đã có VI/EN ở thanh trên) */
.hb-menu .hb-lang-m{display:none!important}
.hb-staff{position:relative;flex:none;margin-left:6px}
.hb-staff-btn{display:inline-flex;align-items:center;gap:6px;background:#1a6b3a;color:#fff;border:0;border-radius:8px;padding:9px 12px;font:600 13.5px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.hb-staff-btn:hover,.hb-staff.open .hb-staff-btn{background:#0f4a27}
.hb-staff-caret{font-size:9px;opacity:.9}
.hb-staff-dd{display:none;position:absolute;right:0;top:calc(100% + 8px);width:300px;background:#fff;border:1px solid #e3e9e5;border-radius:12px;box-shadow:0 12px 32px rgba(13,42,26,.14);padding:8px;z-index:1000}
.hb-staff.open .hb-staff-dd,.hb-staff:focus-within .hb-staff-dd{display:block}
.hb-staff-dd a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none!important;color:#0d2a1a!important;font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.hb-staff-dd a:hover{background:#eaf4ee}
.hb-staff-dd b{display:block;font-size:14px;font-weight:700}
.hb-staff-dd small{display:block;color:#6b7280;font-size:12px;margin-top:2px}
@media (max-width:1200px){.hb-staff-btn{padding:8px 10px;font-size:13px}}
@media (max-width:1060px){.hb-staff{margin-left:auto}.hb-staff-btn>span:not(.hb-staff-caret){display:none}}
