/*
Theme Name: HLSEC Astra Child
Theme URI: https://www.hlsec.id.vn/
Description: HLSEC Framework v11.1.1 — Core Knowledge Platform. Portal, documentation-first, labs/resources/tool library, no frontend dates.
Author: HLSEC
Template: astra
Version: 11.1.1
Text Domain: hlsec-astra-child
*/

/* ═══════════════════════════════════════
   1. DESIGN TOKENS
   Nền chính trắng/xám nhạt. Chỉ terminal, code block và footer dùng nền đen.
═══════════════════════════════════════ */
:root {
  --hl-orange: #FF6B35;
  --hl-orange-dark: #E85D2C;
  --hl-blue: #2563EB;

  --hl-bg: #FFFFFF;
  --hl-soft: #F8FAFC;
  --hl-soft-2: #F1F5F9;
  --hl-card: #FFFFFF;
  --hl-border: #E5E7EB;
  --hl-border-strong: #CBD5E1;

  --hl-ink: #0F172A;
  --hl-text: #334155;
  --hl-muted: #64748B;

  --hl-dark: #070A12;
  --hl-dark-2: #0B0F17;
  --hl-dark-3: #111827;
  --hl-dark-border: #1F2937;
  --hl-dark-text: #E5E7EB;
  --hl-dark-muted: #9CA3AF;

  --hl-glow-orange: rgba(255, 107, 53, 0.16);
  --hl-glow-blue: rgba(37, 99, 235, 0.12);

  --hl-heading: 'Space Grotesk', sans-serif;
  --hl-body: 'Inter', sans-serif;
  --hl-mono: 'JetBrains Mono', monospace;

  --hl-radius-sm: 10px;
  --hl-radius-md: 16px;
  --hl-radius-lg: 26px;
  --hl-container: 1180px;
  --hl-transition: all .26s ease;
  --hl-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  --hl-shadow-hover: 0 20px 50px rgba(15, 23, 42, .11);
}

/* ═══════════════════════════════════════
   2. BASE + ASTRA CLEANUP
═══════════════════════════════════════ */
html {
  background: var(--hl-bg);
  scroll-behavior: smooth;
}

body {
  background: var(--hl-bg) !important;
  color: var(--hl-ink) !important;
  font-family: var(--hl-body) !important;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--hl-body) !important;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.page-title {
  color: var(--hl-ink) !important;
  font-family: var(--hl-heading) !important;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

p, li,
.entry-content p,
.entry-content li {
  color: var(--hl-text) !important;
}

a {
  color: var(--hl-blue);
  transition: var(--hl-transition);
}

a:hover {
  color: var(--hl-orange);
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: rgba(255, 107, 53, .18);
  color: var(--hl-ink);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--hl-soft); }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--hl-orange); }

.site,
.site-content,
.ast-container,
.content-area,
.entry-content {
  background: transparent !important;
}

.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-plain-container .ast-article-single,
.ast-plain-container .ast-article-post {
  background: transparent !important;
  border: none !important;
}

.home .entry-header,
.home .entry-title,
.home .ast-single-entry-banner,
.single .entry-meta,
.single .entry-meta *,
.posted-on,
.byline,
.cat-links,
.comments-link {
  display: none !important;
}

/* Shortcode pages full-width inside Astra */
.home .site-content,
.home .site-content .ast-container,
.home .content-area,
.home .entry-content,
.page .entry-content > .hlsec-home-os,
.page .entry-content > .hlsec-k-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page .entry-content > .hlsec-home-os,
.page .entry-content > .hlsec-k-page {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* Ẩn footer mặc định c  a Astra để dùng mega footer HLSEC riêng */
.site-footer {
  display: none !important;
}

/* ═══════════════════════════════════════
   3. HEADER — TRẮNG, GỌN, DOCUMENTATION STYLE
═══════════════════════════════════════ */
.site-header,
.ast-primary-header-bar,
.main-header-bar {
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .045) !important;
}

.ast-builder-grid-row {
  min-height: 80px;
}

.site-title a {
  color: var(--hl-ink) !important;
  font-weight: 800;
  letter-spacing: .12em;
}

.site-description {
  color: var(--hl-muted) !important;
}

.main-navigation a,
.ast-builder-menu a,
.ast-header-navigation-arrow {
  position: relative;
  color: #1E293B !important;
  font-size: 14px;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

.main-navigation a:hover,
.ast-builder-menu a:hover,
.current-menu-item > a {
  color: var(--hl-orange) !important;
}

.main-navigation a::after,
.ast-builder-menu a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hl-orange), var(--hl-blue));
  transform: translateX(-50%);
  transition: width .22s ease;
}

.main-navigation a:hover::after,
.ast-builder-menu a:hover::after,
.current-menu-item > a::after {
  width: 22px;
}

.ast-mobile-popup-drawer,
.ast-mobile-popup-inner {
  background: #fff !important;
}

.ast-mobile-popup-content a {
  color: var(--hl-ink) !important;
}

.ast-mobile-popup-content a:hover {
  color: var(--hl-orange) !important;
}

/* ═══════════════════════════════════════
   4. GLOBAL LAYOUT
═══════════════════════════════════════ */
.hlsec-container {
  width: min(100% - 40px, var(--hl-container));
  margin: 0 auto;
}

.hlsec-home-os,
.hlsec-k-page,
.hlsec-page {
  overflow: hidden;
  background: var(--hl-bg);
  color: var(--hl-ink);
}

.hlsec-k-section,
.hlsec-section {
  padding: 92px 0;
  background: #fff;
}

.hlsec-k-section-soft,
.hlsec-section--soft {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 107, 53, .045), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(37, 99, 235, .05), transparent 35%),
    var(--hl-soft);
}

.hlsec-section-head {
  max-width: 820px;
  margin-bottom: 34px;
}

.hlsec-section-head h2,
.hlsec-section-title {
  margin: 14px 0 8px;
  font-size: clamp(32px, 4vw, 54px);
  letter-spacing: -.055em;
}

.hlsec-section-head p {
  margin: 0;
  color: var(--hl-muted) !important;
  font-size: 17px;
  line-height: 1.75;
}

.hlsec-badge,
.hlsec-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 107, 53, .35);
  border-radius: 999px;
  background: rgba(255, 107, 53, .08);
  color: var(--hl-orange-dark) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(255, 107, 53, .09);
}

.hlsec-gradient-text,
.hlsec-os-title {
  background: linear-gradient(135deg, var(--hl-orange) 0%, #8A341E 42%, var(--hl-ink) 82%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hlsec-muted,
.hlsec-empty {
  color: var(--hl-muted) !important;
}

.hlsec-empty {
  padding: 24px;
  border: 1px dashed var(--hl-border-strong);
  border-radius: var(--hl-radius-md);
  background: #fff;
}

.hlsec-divider {
  width: 72px;
  height: 4px;
  margin: 18px 0 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hl-orange), var(--hl-blue));
}

/* ══════════════   ═   ══════════════════════
   5. BUTTONS
═══════════════════════════════════════ */
.hlsec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 15px 26px;
  border-radius: 12px;
  font-family: var(--hl-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  transition: var(--hl-transition);
}

.hlsec-btn-primary {
  border: 1px solid var(--hl-orange) !important;
  background: linear-gradient(135deg, var(--hl-orange), #F97316) !important;
  color: #050505 !important;
  box-shadow: 0 16px 36px rgba(255, 107, 53, .24);
}

.hlsec-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(255, 107, 53, .30);
}

.hlsec-btn-secondary {
  border: 1px solid rgba(37, 99, 235, .45) !important;
  background: rgba(255, 255, 255, .72) !important;
  color: var(--hl-blue) !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .08);
}

.hlsec-btn-secondary:hover {
  background: var(--hl-blue) !important;
  color: #fff !important;
  transform: translateY(-3px);
}

.hlsec-btn-white {
  border: 1px solid #fff !important;
  background: #fff !important;
  color: #050505 !important;
}

/* ═══════════════════════════════════════
   6. HOMEPAGE HERO — SÁNG, NỘI DUNG LÀ TRUNG TÂM
═══════════════════════════════════════ */
.hlsec-os-hero,
.hlsec-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 82px);
  padding: 100px 0 110px;
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 107, 53, .12), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(37, 99, 235, .11), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.84)),
    radial-gradient(circle, rgba(148, 163, 184, .34) 1px, transparent 1px) 0 0 / 30px 30px,
    #fff;
  overflow: hidden;
}

.hlsec-os-hero::after,
.hlsec-hero::after {
  content: '';
  position: absolute;
  right: -150px;
  top: 120px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .08), transparent 66%);
  pointer-events: none;
}

.hlsec-os-hero-grid,
.hlsec-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  gap: 62px;
  align-items: center;
}

.hlsec-os-title,
.hlsec-hero-title {
  margin: 24px 0 12px;
  font-family: var(--hl-heading) !important;
  font-size: clamp(82px, 11vw, 152px);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.085em;
  filter: drop-shadow(0 18px 45px rgba(255, 107, 53, .16));
}

.hlsec-os-subtitle,
.hlsec-hero-subtitle {
  margin: 0 0 22px;
  color: var(--hl-ink) !important;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.hlsec-os-desc,
.hlsec-hero-desc {
  max-width: 720px;
  margin: 0 0 28px;
  color: var(--hl-text) !important;
  font-size: 18px;
  line-height: 1.82;
}

.hlsec-os-search {
  display: flex;
  gap: 10px;
  max-width: 760px;
  margin: 30px 0 22px;
}

.hlsec-os-search input {
  flex: 1;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--hl-border-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--hl-ink);
  font-size: 15px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.hlsec-os-search input::placeholder {
  color: #94A3B8;
}

.hlsec-os-search input:focus {
  outline: none;
  border-color: var(--hl-orange);
  box-shadow: 0 0 0 4px var(--hl-glow-orange);
}

.hlsec-os-search button {
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--hl-orange);
  color: #050505;
  font-weight: 800;
  cursor: pointer;
  transition: var(--hl-transition);
}

.hlsec-os-search button:hover {
  background: var(--hl-orange-dark);
  transform: translateY(-2px);
}

.hlsec-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Terminal luôn giữ đen để có chất kỹ thuật */
.terminal-window {
  position: relative;
  padding: 26px 28px 28px;
  border: 1px solid var(--hl-dark-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, .98), rgba(7, 10, 18, .98));
  color: var(--hl-dark-text);
  font-family: var(--hl-mono);
  box-shadow:
    0 34px 85px rgba(15, 23, 42, .22),
    0 0 0 1px rgba(255, 255, 255, .05) inset;
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(203, 213, 225, .18);
}

.terminal-header::after {
  content: 'HLSEC LAB TERMINAL';
  margin-left: auto;
  color: #D1D5DB;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .24em;
}

.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red { background: #FF5F57; }
.dot-yellow { background: #FFBD2E; }
.dot-green { background: #28C840; }

.terminal-line {
  margin: 0 0 12px;
  color: #D6E3F3 !important;
  font-size: 13.5px;
  line-height: 1.7;
}

.terminal-cmd {
  color: #FF7A45 !important;
  font-weight: 900;
}

.terminal-output {
  color: #B7C6D9 !important;
}

.terminal-window .terminal-line:last-child::after {
  content: '▊';
  margin-left: 6px;
  color: var(--hl-orange);
  animation: hlsec-blink 1s steps(1) infinite;
}

@keyframes hlsec-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ═══════════════════════════════════════
   7. STATS + PATHS + ROADMAP
═══════════════════════════════════════ */
.hlsec-os-stats,
.hlsec-stats {
  position: relative;
  z-index: 3;
  padding: 42px 0;
  border-top: 1px solid var(--hl-border);
  border-bottom: 1px solid var(--hl-border);
  background: #fff;
}

.hlsec-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.hlsec-stat {
  position: relative;
  text-align: center;
}

.hlsec-stat + .hlsec-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 44px;
  background: var(--hl-border);
  transform: translateY(-50%);
}

.hlsec-stat-number {
  display: block;
  color: var(--hl-orange);
  font-family: var(--hl-mono);
  font-size: clamp(30px, 3.5vw, 42px);
  font-weight: 700;
}

.hlsec-stat-label {
  display: block;
  margin-top: 6px;
  color: var(--hl-muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hlsec-path-grid,
.hlsec-k-grid,
.hlsec-blog-grid,
.hlsec-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.hlsec-path-grid {
  grid-template-columns: repeat(4, 1fr);
}

.hlsec-path-card,
.hlsec-card,
.hlsec-k-card {
  border: 1px solid var(--hl-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--hl-shadow);
  transition: var(--hl-transition);
}

.hlsec-path-card {
  display: flex;
  min-height: 282px;
  flex-direction: column;
  padding: 28px;
  text-decoration: none !important;
}

.hlsec-path-card:hover,
.hlsec-card:hover,
.hlsec-k-card:hover {
  border-color: rgba(255, 107, 53, .52);
  box-shadow: var(--hl-shadow-hover), 0 0 0 3px rgba(255, 107, 53, .07);
  transform: translateY(-5px);
}

.hlsec-path-icon,
.hlsec-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 107, 53, .35);
  border-radius: 15px;
  background: rgba(255, 107, 53, .08);
  color: var(--hl-orange-dark);
}

.hlsec-path-icon svg,
.hlsec-icon svg {
  width: 26px;
  height: 26px;
}

.hlsec-path-card strong {
  color: var(--hl-ink);
  font-family: var(--hl-heading);
  font-size: 22px;
  line-height: 1.25;
}

.hlsec-path-card p,
.hlsec-service-desc {
  color: var(--hl-muted) !important;
  font-size: 15.5px;
  line-height: 1.7;
}

.hlsec-path-link,
.hlsec-read-more,
.hlsec-card-link {
  margin-top: auto;
  color: var(--hl-orange-dark) !important;
  font-weight: 800;
  text-decoration: none !important;
}

.hlsec-hub-stats,
.hlsec-roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.hlsec-hub-stats > div,
.hlsec-roadmap-step {
  padding: 22px;
  border: 1px solid var(--hl-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--hl-shadow);
}

.hlsec-hub-stats strong,
.hlsec-roadmap-step span {
  display: block;
  color: var(--hl-orange);
  font-family: var(--hl-mono);
  font-weight: 800;
}

.hlsec-hub-stats strong {
  font-size: 30px;
}

.hlsec-hub-stats span {
  display: block;
  margin-top: 6px;
  color: var(--hl-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hlsec-roadmap-step span {
  margin-bottom: 9px;
  font-size: 13px;
}

.hlsec-roadmap-step strong {
  color: var(--hl-ink);
  font-family: var(--hl-heading);
  font-size: 18px;
  line-height: 1.35;
}

/* ═══════════════════════════════════════
   8. HUB HERO / ARCHIVE HEADER — SÁNG
═══════════════════════════════════════ */
.hlsec-hub-hero,
.hlsec-blog-header {
  padding: 64px 0 56px;
  background:
    radial-gradient(circle at 14% 6%, rgba(255, 107, 53, .10), transparent 30%),
    radial-gradient(circle at 92% 16%, rgba(37, 99, 235, .10), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.84)),
    radial-gradient(circle, rgba(148, 163, 184, .31) 1px, transparent 1px) 0 0 / 30px 30px,
    #fff;
  color: var(--hl-ink);
}

.hlsec-hub-hero h1,
.hlsec-blog-page-title {
  max-width: 920px;
  margin: 20px 0 14px;
  color: var(--hl-ink) !important;
  font-size: clamp(42px, 6.2vw, 82px);
  line-height: 1.02;
  letter-spacing: -.06em;
}

.hlsec-hub-hero p,
.hlsec-blog-header .hlsec-muted {
  max-width: 780px;
  color: var(--hl-text) !important;
  font-size: 18px;
  line-height: 1.8;
}

/* ═══════════════════════════════════════
   9. KNOWLEDGE CARDS + BLOG CARDS
═══════════════════════════════════════ */
.hlsec-k-card,
.hlsec-blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.hlsec-k-card-media,
.hlsec-blog-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 107, 53, .14), rgba(37, 99, 235, .12)),
    var(--hl-soft);
  color: var(--hl-muted);
  font-family: var(--hl-mono);
  letter-spacing: .18em;
  text-decoration: none !important;
}

.hlsec-k-card-media img,
.hlsec-blog-thumb img,
.hlsec-k-card-media > img,
.hlsec-blog-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hlsec-k-card-body,
.hlsec-blog-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.hlsec-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hlsec-chip,
.hlsec-cat {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid var(--hl-border);
  border-radius: 999px;
  background: var(--hl-soft);
  color: var(--hl-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
}

.hlsec-chip-primary,
.hlsec-cat {
  border-color: rgba(255, 107, 53, .40);
  background: rgba(255, 107, 53, .08);
  color: var(--hl-orange-dark);
}

.hlsec-cat-blue {
  border-color: rgba(37, 99, 235, .40);
  background: rgba(37, 99, 235, .08);
  color: var(--hl-blue);
}

.hlsec-chip-os,
.hlsec-chip-version,
.hlsec-k-card-footer,
.hlsec-blog-meta {
  font-family: var(--hl-mono);
}

.hlsec-k-card-title,
.hlsec-blog-title {
  margin: 0;
  font-size: 21px;
  line-height: 1.34;
}

.hlsec-k-card-title a,
.hlsec-blog-title a {
  color: var(--hl-ink) !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hlsec-k-card-title a:hover,
.hlsec-blog-title a:hover {
  color: var(--hl-orange) !important;
}

.hlsec-k-card-excerpt,
.hlsec-blog-excerpt {
  display: -webkit-box;
  margin: 0;
  color: var(--hl-muted) !important;
  font-size: 15px;
  line-height: 1.7;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hlsec-k-card-footer,
.hlsec-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hl-border);
  color: var(--hl-muted);
  font-size: 12px;
}

/* ═══════════════════════════════════════
   10. CONTACT + WPFORMS
═══════════════════════════════════════ */
.hlsec-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr);
  gap: 32px;
  align-items: start;
}

.hlsec-contact-form,
.hlsec-contact-info,
.hlsec-resource-panel,
.hlsec-toc-inner,
.hlsec-post-nav a {
  border: 1px solid var(--hl-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--hl-shadow);
}

.hlsec-contact-form,
.hlsec-contact-info {
  padding: 34px;
}

.hlsec-contact-form h2,
.hlsec-contact-info h2 {
  margin: 0 0 10px;
  font-size: 25px;
}

.hlsec-contact-info-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.hlsec-contact-item {
  padding: 15px;
  border: 1px solid var(--hl-border);
  border-radius: 12px;
  background: var(--hl-soft);
}

.hlsec-contact-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hlsec-contact-item a,
.hlsec-contact-item span {
  color: var(--hl-text) !important;
  font-size: 15px;
  text-decoration: none;
}

.wpforms-container,
.wpforms-form {
  color: var(--hl-ink) !important;
}

.wpforms-container label,
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description,
.wpforms-container legend {
  color: var(--hl-ink) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select {
  min-height: 50px;
  border: 1px solid var(--hl-border-strong) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--hl-ink) !important;
  box-shadow: none !important;
}

.wpforms-container textarea {
  min-height: 160px;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
  color: #94A3B8 !important;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
  border-color: var(--hl-orange) !important;
  box-shadow: 0 0 0 4px var(--hl-glow-orange) !important;
  outline: none !important;
}

.wpforms-container button[type='submit'],
.wpforms-submit {
  width: 100% !important;
  min-height: 52px !important;
  border: 1px solid var(--hl-orange) !important;
  border-radius: 10px !important;
  background: var(--hl-orange) !important;
  color: #050505 !important;
  font-weight: 800 !important;
  padding: 14px 24px !important;
}

.wpforms-container button[type='submit']:hover,
.wpforms-submit:hover {
  background: var(--hl-orange-dark) !important;
}

/* ═══════════════════════════════════════
   11. SINGLE POST / KNOWLEDGE ARTICLE
═══════════════════════════════════════ */
#hlsec-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--hl-orange), var(--hl-blue));
}

.single .site-content,
.single .ast-container,
.single .content-area,
.single .site-main,
.single article,
.single .ast-article-single,
.single .entry-content {
  max-width: 100% !important;
}

.single .site-content {
  background: #fff !important;
}

.single .entry-header {
  width: min(100% - 40px, 1100px);
  margin: 60px auto 0 !important;
}

.single .entry-title {
  max-width: 900px;
  margin: 0;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.06;
  letter-spacing: -.055em;
}

.hlsec-single-shell {
  width: min(100% - 40px, 1180px);
  margin: 30px auto 96px;
}

.hlsec-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  color: var(--hl-muted);
  font-size: 13.5px;
}

.hlsec-breadcrumb a {
  color: var(--hl-muted);
  font-weight: 800;
  text-decoration: none !important;
}

.hlsec-breadcrumb a:hover {
  color: var(--hl-orange);
}

.hlsec-breadcrumb .sep {
  color: var(--hl-border-strong);
}

.hlsec-breadcrumb .current {
  color: var(--hl-ink);
  font-weight: 800;
}

.hlsec-post-metabar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 28px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--hl-border);
}

.hlsec-meta-text {
  color: var(--hl-muted);
  font-family: var(--hl-mono);
  font-size: 12.5px;
}

.hlsec-resource-panel {
  margin: 0 0 34px;
  padding: 24px;
  background: var(--hl-soft);
}

.hlsec-resource-panel h2 {
  margin: 0 0 18px;
  font-size: 24px;
}

.hlsec-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.hlsec-resource-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hlsec-resource-grid pre {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--hl-border);
  border-radius: 12px;
  background: #fff;
  color: var(--hl-text);
  font-family: var(--hl-mono);
  font-size: 13px;
  white-space: pre-wrap;
}

.hlsec-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hlsec-resource-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--hl-border);
  border-radius: 10px;
  background: #fff;
  color: var(--hl-ink);
  font-weight: 800;
  text-decoration: none !important;
}

.hlsec-resource-links a:hover {
  border-color: var(--hl-orange);
  color: var(--hl-orange);
}

.hlsec-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 800px) 270px;
  gap: 52px;
  justify-content: center;
  align-items: start;
}

.hlsec-single-content {
  color: var(--hl-text);
  font-size: 18px;
  line-height: 1.85;
}

.hlsec-single-content p,
.hlsec-single-content li {
  color: var(--hl-text) !important;
}

.hlsec-single-content h2,
.hlsec-single-content h3 {
  color: var(--hl-ink) !important;
  scroll-margin-top: 110px;
}

.hlsec-single-content h2 {
  margin-top: 2.1em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hl-border);
  font-size: 34px;
}

.hlsec-single-content h3 {
  margin-top: 1.8em;
  font-size: 25px;
}

.hlsec-single-content a {
  color: var(--hl-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hlsec-single-content img {
  width: 100%;
  height: auto;
  border: 1px solid var(--hl-border);
  border-radius: 16px;
  box-shadow: var(--hl-shadow);
}

/* Code block giữ đen để phân biệt nội dung kỹ thuật */
.hlsec-single-content pre,
pre[class*='language-'] {
  overflow-x: auto;
  padding: 20px !important;
  border: 1px solid var(--hl-dark-border) !important;
  border-radius: 12px !important;
  background: #0D1117 !important;
  color: #D1D5DB !important;
  font-family: var(--hl-mono) !important;
  font-size: 14px;
  line-height: 1.7;
}

.hlsec-single-content :not(pre) > code {
  padding: 2px 7px;
  border: 1px solid var(--hl-border);
  border-radius: 6px;
  background: var(--hl-soft);
  color: var(--hl-orange-dark);
  font-family: var(--hl-mono);
  font-size: .9em;
}

.hlsec-single-content blockquote {
  margin: 28px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--hl-orange);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 107, 53, .07);
  color: var(--hl-text);
}

.hlsec-toc-inner {
  position: sticky;
  top: 105px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: 20px;
}

.hlsec-toc-title {
  margin-bottom: 12px;
  color: var(--hl-orange-dark);
  font-family: var(--hl-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hlsec-toc a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--hl-border);
  color: var(--hl-muted) !important;
  font-size: 13.5px;
  line-height: 1.45;
  text-decoration: none !important;
}

.hlsec-toc a:hover {
  border-left-color: var(--hl-orange);
  color: var(--hl-orange) !important;
}

.hlsec-toc .toc-h3 {
  padding-left: 24px;
  font-size: 12.5px;
}

.hlsec-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 54px;
}

.hlsec-post-nav a {
  display: block;
  padding: 20px;
  text-decoration: none !important;
}

.hlsec-post-nav a:hover {
  border-color: var(--hl-orange);
  transform: translateY(-2px);
}

.hlsec-post-nav .nav-label {
  display: block;
  margin-bottom: 6px;
  color: var(--hl-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hlsec-post-nav .nav-title {
  color: var(--hl-ink);
  font-family: var(--hl-heading);
  font-weight: 800;
  line-height: 1.4;
}

.hlsec-post-nav .nav-next {
  text-align: right;
}

/* ═══════════════════════════════════════
   12. CTA
═══════════════════════════════════════ */
.hlsec-cta {
  position: relative;
  overflow: hidden;
  padding: 66px 36px;
  border-radius: var(--hl-radius-lg);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .22), transparent 26%),
    linear-gradient(135deg, var(--hl-orange) 0%, var(--hl-blue) 100%);
  text-align: center;
  box-shadow: 0 30px 90px rgba(37, 99, 235, .20), 0 24px 70px rgba(255, 107, 53, .18);
}

.hlsec-cta h2 {
  margin: 0 0 12px;
  color: #fff !important;
  font-size: clamp(30px, 4vw, 48px);
}

.hlsec-cta p {
  max-width: 640px;
  margin: 0 auto 26px;
  color: rgba(255, 255, 255, .92) !important;
}

/* ═══════════════════════════════════════
   13. MEGA FOOTER — DARK NETWORK STYLE
   Thiết kế theo kiểu ảnh mẫu: nền đen, pattern node/line, nhiều cột.
═══════════════════════════════════════ */
.hlsec-footer-mega {
  position: relative;
  overflow: hidden;
  padding: 74px 0 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 24%),
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .08), transparent 2.5%),
    radial-gradient(circle at 35% 78%, rgba(255, 255, 255, .07), transparent 2.2%),
    radial-gradient(circle at 62% 20%, rgba(255, 255, 255, .06), transparent 2.4%),
    radial-gradient(circle at 82% 70%, rgba(255, 255, 255, .06), transparent 2.2%),
    #0A0A0F;
  color: var(--hl-dark-muted);
}

/* Pattern mạng lưới bằng CSS, không dùng ảnh ngoài */
.hlsec-footer-mega::before,
.hlsec-footer-mega::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hlsec-footer-mega::before {
  opacity: .42;
  background:
    linear-gradient(28deg, transparent 0 24%, rgba(148, 163, 184, .16) 24.2%, transparent 24.6% 100%),
    linear-gradient(152deg, transparent 0 38%, rgba(148, 163, 184, .13) 38.2%, transparent 38.6% 100%),
    linear-gradient(8deg, transparent 0 62%, rgba(148, 163, 184, .10) 62.2%, transparent 62.6% 100%),
    linear-gradient(118deg, transparent 0 76%, rgba(148, 163, 184, .12) 76.2%, transparent 76.6% 100%);
  background-size: 520px 260px, 560px 320px, 480px 300px, 620px 340px;
}

.hlsec-footer-mega::after {
  background:
    radial-gradient(circle at 22% 28%, rgba(148, 163, 184, .26) 0 3px, transparent 4px),
    radial-gradient(circle at 45% 46%, rgba(148, 163, 184, .23) 0 3px, transparent 4px),
    radial-gradient(circle at 63% 70%, rgba(148, 163, 184, .20) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 34%, rgba(148, 163, 184, .20) 0 3px, transparent 4px);
  opacity: .75;
}

.hlsec-footer-network {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 107, 53, .10), transparent 30%),
    radial-gradient(circle at 86% 16%, rgba(37, 99, 235, .12), transparent 32%);
  pointer-events: none;
}

.hlsec-footer-grid,
.hlsec-footer-bottom {
  position: relative;
  z-index: 1;
}

.hlsec-footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1.15fr 1.25fr;
  gap: 48px;
  align-items: start;
}

.hlsec-footer-logo {
  display: inline-flex;
  color: #fff !important;
  font-family: var(--hl-heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .12em;
  text-decoration: none !important;
}

.hlsec-footer-logo::first-letter {
  color: var(--hl-orange);
}

.hlsec-footer-mission,
.hlsec-footer-brand p {
  max-width: 360px;
  color: #CBD5E1 !important;
  font-size: 15px;
  line-height: 1.75;
}

.hlsec-footer-contact {
  margin: 18px 0 20px;
}

.hlsec-footer-contact p {
  margin: 4px 0;
  color: #E5E7EB !important;
  font-size: 14.5px;
}

.hlsec-footer-contact strong {
  color: #fff;
}

.hlsec-footer-contact a {
  color: #CBD5E1 !important;
  text-decoration: none;
}

.hlsec-footer-contact a:hover {
  color: var(--hl-orange) !important;
}

.hlsec-footer-social {
  display: flex;
  gap: 10px;
}

.hlsec-footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(203, 213, 225, .28);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  color: #CBD5E1 !important;
  text-decoration: none !important;
}

.hlsec-footer-social a:hover {
  border-color: var(--hl-orange);
  color: var(--hl-orange) !important;
  transform: translateY(-2px);
}

.hlsec-footer-social svg {
  width: 18px;
  height: 18px;
}

.hlsec-footer-col h4 {
  margin: 0 0 18px;
  color: #fff !important;
  font-family: var(--hl-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hlsec-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hlsec-footer-col li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 18px;
}

.hlsec-footer-col li::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--hl-orange);
  font-size: 20px;
  line-height: 1.1;
}

.hlsec-footer-col a,
.hlsec-footer-col span {
  color: #CBD5E1 !important;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none !important;
}

.hlsec-footer-col a:hover {
  color: var(--hl-orange) !important;
  padding-left: 3px;
}

.hlsec-footer-recent a {
  display: -webkit-box;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hlsec-footer-recent .date {
  display: block;
  margin-top: 3px;
  color: #64748B;
  font-family: var(--hl-mono);
  font-size: 12px;
}

.hlsec-footer-bottom {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid rgba(203, 213, 225, .18);
  color: #94A3B8;
  font-size: 13px;
  text-align: center;
}

/* ═══════════════════════════════════════
   14. FLOATING BUTTONS
═══════════════════════════════════════ */
.hlsec-float {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.hlsec-float a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 800;
}

.hlsec-float .hl-phone {
  position: relative;
  background: var(--hl-orange);
  color: #050505 !important;
}

.hlsec-float .hl-phone::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(255, 107, 53, .42);
  border-radius: 999px;
}

.hlsec-float .hl-zalo {
  background: #0068FF;
  color: #fff !important;
}

/* ═══════════════════════════════════════
   15. RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1180px) {
  .hlsec-os-hero-grid,
  .hlsec-hero-grid,
  .hlsec-single-layout,
  .hlsec-contact-grid {
    grid-template-columns: 1fr;
  }

  .terminal-window {
    max-width: 620px;
  }

  .hlsec-path-grid,
  .hlsec-hub-stats,
  .hlsec-roadmap,
  .hlsec-k-grid,
  .hlsec-blog-grid,
  .hlsec-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hlsec-toc {
    order: -1;
  }

  .hlsec-toc-inner {
    position: static;
    max-height: none;
  }

  .hlsec-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 16.5px;
  }

  .hlsec-container,
  .single .entry-header,
  .hlsec-single-shell {
    width: calc(100% - 28px);
  }

  .ast-builder-grid-row {
    min-height: 72px;
  }

  .hlsec-os-hero,
  .hlsec-hero {
    min-height: auto;
    padding: 72px 0 66px;
  }

  .hlsec-os-title,
  .hlsec-hero-title {
    font-size: clamp(70px, 22vw, 112px);
  }

  .hlsec-os-subtitle,
  .hlsec-hero-subtitle {
    font-size: clamp(28px, 9vw, 42px);
  }

  .hlsec-os-search {
    flex-direction: column;
  }

  .hlsec-os-search button,
  .hlsec-btn {
    width: 100%;
  }

  .hlsec-k-section,
  .hlsec-section {
    padding: 66px 0;
  }

  .hlsec-path-grid,
  .hlsec-hub-stats,
  .hlsec-roadmap,
  .hlsec-k-grid,
  .hlsec-blog-grid,
  .hlsec-services-grid,
  .hlsec-stats-grid,
  .hlsec-resource-grid,
  .hlsec-footer-grid {
    grid-template-columns: 1fr;
  }

  .hlsec-stat + .hlsec-stat::before {
    display: none;
  }

  .hlsec-post-nav {
    grid-template-columns: 1fr;
  }

  .hlsec-post-nav .nav-next {
    text-align: left;
  }

  .single .entry-title {
    font-size: 34px;
  }

  .hlsec-single-content {
    font-size: 16.5px;
  }

  .hlsec-contact-form,
  .hlsec-contact-info {
    padding: 24px;
  }

  .hlsec-footer-mega {
    padding: 58px 0 28px;
  }

  .hlsec-footer-bottom {
    flex-direction: column;
  }

  .hlsec-float a {
    min-width: 46px;
    width: 46px;
    padding: 0;
  }

  .hlsec-float a span {
    display: none;
  }
}

@media (max-width: 420px) {
  .hlsec-os-title,
  .hlsec-hero-title {
    font-size: 68px;
  }

  .terminal-window,
  .hlsec-k-card-body,
  .hlsec-path-card {
    padding: 20px;
  }

  .terminal-header::after {
    display: none;
  }
}

/* Giảm animation nếu người dùng bật reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════
   16. HLSEC v7.3 OVERRIDES
   - Ẩn toàn bộ ngày tháng của bài viết trên frontend.
   - Làm terminal sáng, rõ, trực quan hơn.
   - Nâng cấp trang About khi dùng shortcode [hlsec_about].
═══════════════════════════════════════ */

/* 16.1 Ẩn ngày tháng bài viết ở mọi nơi: blog, archive, search, single, card, footer. */
.entry-meta,
.entry-meta *,
.posted-on,
.posted-by,
.byline,
.author.vcard,
.comments-link,
.cat-links,
time.entry-date,
time.published,
time.updated,
.published,
.updated,
.ast-post-date,
.ast-single-post-order .entry-meta,
.blog .entry-meta,
.archive .entry-meta,
.search .entry-meta,
.single .entry-meta,
.hlsec-footer-recent .date,
.hlsec-meta-date,
.hlsec-updated {
  display: none !important;
  visibility: hidden !important;
}

/* 16.2 Terminal: tăng contrast để chữ nổi rõ trên nền đen. */
.terminal-window {
  background:
    linear-gradient(180deg, rgba(22, 31, 48, .99), rgba(8, 12, 22, .99)) !important;
  border: 1px solid rgba(148, 163, 184, .30) !important;
  box-shadow:
    0 32px 90px rgba(15, 23, 42, .28),
    0 0 0 1px rgba(255, 255, 255, .07) inset,
    0 0 46px rgba(37, 99, 235, .08) !important;
}

.terminal-header {
  border-bottom-color: rgba(203, 213, 225, .22) !important;
}

.terminal-header::after {
  color: #E5E7EB !important;
  opacity: .95 !important;
}

.terminal-line {
  color: #EAF2FF !important;
  opacity: 1 !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  letter-spacing: .01em;
  text-shadow: 0 0 14px rgba(255, 255, 255, .08);
}

.terminal-cmd {
  color: #FF8A5C !important;
  font-weight: 900 !important;
  text-shadow: 0 0 16px rgba(255, 107, 53, .28);
}

.terminal-output {
  color: #C7D2FE !important;
  opacity: 1 !important;
}

.terminal-line:nth-of-type(2),
.terminal-line:nth-of-type(4),
.terminal-line:nth-of-type(6) {
  color: #D6E4FF !important;
}

.terminal-window::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 107, 53, .10), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(37, 99, 235, .12), transparent 34%);
  pointer-events: none;
}

.terminal-window > * {
  position: relative;
  z-index: 1;
}

/* 16.3 Trang About chuyên nghiệp — dùng shortcode [hlsec_about]. */
.hlsec-about-template .entry-header,
.hlsec-about-template .ast-single-entry-banner {
  display: none !important;
}

.hlsec-about-template .site-content,
.hlsec-about-template .site-content .ast-container,
.hlsec-about-template .content-area,
.hlsec-about-template .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.hlsec-about-pro {
  background: #fff;
}

.hlsec-about-pro p {
  color: var(--hl-text) !important;
}

.hlsec-about-hero {
  padding: 108px 0 86px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 107, 53, .12), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(37, 99, 235, .10), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.84)),
    radial-gradient(circle, rgba(148, 163, 184, .30) 1px, transparent 1px) 0 0 / 30px 30px,
    #fff;
}

.hlsec-about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 54px;
  align-items: center;
}

.hlsec-about-hero h1 {
  max-width: 880px;
  margin: 20px 0 18px;
  font-size: clamp(42px, 5.8vw, 76px);
  line-height: 1.02;
  letter-spacing: -.06em;
}

.hlsec-about-hero p {
  max-width: 760px;
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.85;
}

.hlsec-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hlsec-about-profile-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid var(--hl-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 107, 53, .10), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(37, 99, 235, .10), transparent 36%),
    #fff;
  box-shadow: var(--hl-shadow-hover);
}

.hlsec-about-profile-card::before {
  content: '';
  position: absolute;
  right: -90px;
  top: -90px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .08), transparent 62%);
}

.hlsec-profile-label {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hlsec-about-profile-card h2 {
  margin: 0 0 12px;
  font-size: 34px;
}

.hlsec-profile-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.hlsec-profile-list div {
  padding: 14px;
  border: 1px solid var(--hl-border);
  border-radius: 14px;
  background: rgba(248, 250, 252, .82);
}

.hlsec-profile-list strong {
  display: block;
  margin-bottom: 3px;
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hlsec-profile-list span {
  color: var(--hl-text);
  font-size: 14.5px;
}

.hlsec-about-principles,
.hlsec-about-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.hlsec-about-principles article,
.hlsec-about-focus-grid a {
  padding: 28px;
  border: 1px solid var(--hl-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--hl-shadow);
  transition: var(--hl-transition);
}

.hlsec-about-principles article:hover,
.hlsec-about-focus-grid a:hover {
  border-color: rgba(255, 107, 53, .52);
  box-shadow: var(--hl-shadow-hover), 0 0 0 3px rgba(255, 107, 53, .07);
  transform: translateY(-4px);
}

.hlsec-about-principles article > span {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--hl-orange);
  font-family: var(--hl-mono);
  font-size: 14px;
  font-weight: 900;
}

.hlsec-about-principles h3 {
  margin: 0 0 10px;
  font-size: 24px;
}

.hlsec-about-principles p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
}

.hlsec-about-focus-grid {
  grid-template-columns: repeat(4, 1fr);
}

.hlsec-about-focus-grid a {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  text-decoration: none !important;
}

.hlsec-about-focus-grid strong {
  margin-bottom: 10px;
  color: var(--hl-ink);
  font-family: var(--hl-heading);
  font-size: 24px;
}

.hlsec-about-focus-grid span {
  color: var(--hl-muted);
  font-size: 15px;
  line-height: 1.7;
}

.hlsec-about-two-col {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.hlsec-about-two-col h2 {
  margin: 18px 0 14px;
  font-size: clamp(32px, 4vw, 52px);
}

.hlsec-about-timeline {
  display: grid;
  gap: 14px;
  position: relative;
}

.hlsec-about-timeline div {
  position: relative;
  padding: 20px 20px 20px 24px;
  border: 1px solid var(--hl-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--hl-shadow);
}

.hlsec-about-timeline div::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--hl-orange), var(--hl-blue));
}

.hlsec-about-timeline span {
  display: block;
  margin-bottom: 5px;
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hlsec-about-timeline strong {
  display: block;
  color: var(--hl-ink);
  font-family: var(--hl-heading);
  font-size: 20px;
}

.hlsec-about-timeline p {
  margin: 6px 0 0;
  color: var(--hl-muted) !important;
  font-size: 15px;
}

@media (max-width: 1180px) {
  .hlsec-about-hero-grid,
  .hlsec-about-two-col {
    grid-template-columns: 1fr;
  }
  .hlsec-about-focus-grid,
  .hlsec-about-principles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hlsec-about-hero {
    padding: 74px 0 64px;
  }
  .hlsec-about-hero h1 {
    font-size: 38px;
  }
  .hlsec-about-actions,
  .hlsec-about-focus-grid,
  .hlsec-about-principles {
    grid-template-columns: 1fr;
  }
  .hlsec-about-actions .hlsec-btn {
    width: 100%;
  }
  .hlsec-about-profile-card,
  .hlsec-about-principles article,
  .hlsec-about-focus-grid a {
    padding: 22px;
  }
}


/* ═══════════════════════════════════════
   17. HLSEC v7.3 TERMINAL + DATE OVERRIDES
   - Terminal dùng lệnh Linux thật: uname, ip, find, journalctl.
   - Tăng tương phản bằng màu prompt/command/option/path/output.
   - Ẩn thêm mọi biến thể ngày tháng bài viết từ WordPress/Astra/plugin.
═══════════════════════════════════════ */

/* 17.1   n ngày bài viết triệt để ở frontend. */
.entry-date,
.post-date,
.posted-on,
.published,
.updated,
time,
.entry-meta,
.entry-meta *,
.ast-archive-post .entry-meta,
.ast-single-post .entry-meta,
.ast-blog-single-element.ast-taxonomy-container,
.ast-taxonomy-container,
.ast-date-meta,
.ast-post-date,
.wp-block-post-date,
.wp-block-post-author,
.hlsec-meta-date,
.hlsec-updated,
.hlsec-footer-recent .date {
  display: none !important;
  visibility: hidden !important;
}

/* 17.2 Terminal: code nhìn giống terminal thật hơn, rõ chữ hơn. */
.terminal-window {
  background:
    linear-gradient(180deg, rgba(20, 28, 44, .99), rgba(6, 10, 18, .99)) !important;
  border: 1px solid rgba(148, 163, 184, .36) !important;
  box-shadow:
    0 32px 90px rgba(15, 23, 42, .30),
    0 0 0 1px rgba(255, 255, 255, .075) inset,
    0 0 52px rgba(37, 99, 235, .10) !important;
}

.terminal-line {
  color: #DCEBFF !important;
  opacity: 1 !important;
  font-size: 14.5px !important;
  line-height: 1.78 !important;
  letter-spacing: .005em;
  text-shadow: none !important;
}

.terminal-command {
  color: #F8FAFC !important;
}

.terminal-prompt,
.terminal-cmd {
  color: #FF8A5C !important;
  font-weight: 900 !important;
}

.terminal-bin {
  color: #F8FAFC !important;
  font-weight: 800 !important;
}

.terminal-arg {
  color: #93C5FD !important;
  font-weight: 700 !important;
}

.terminal-path {
  color: #A7F3D0 !important;
  font-weight: 800 !important;
}

.terminal-output {
  color: #D6E4FF !important;
  opacity: 1 !important;
  font-weight: 650 !important;
}

.terminal-header::after {
  color: #F1F5F9 !important;
  opacity: .96 !important;
}

.terminal-window .terminal-line:last-child::after {
  content: '▊';
  margin-left: 6px;
  color: #FF6B35;
  animation: hlsec-blink 1s steps(1) infinite;
}

@media (max-width: 768px) {
  .terminal-line {
    font-size: 13px !important;
  }
}


/* ═══════════════════════════════════════
   18. HLSEC v7.4 — Custom 404 + Virtual Page Polish
   Trang 404 không còn là trang trắng đơn giản.
   Nó trở thành bản đồ điều hướng cho Knowledge Platform.
═══════════════════════════════════════ */

.error404 .site-content,
.hlsec-error-page {
  background: #fff !important;
}

.hlsec-error-hero {
  position: relative;
  padding: 98px 0 86px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 107, 53, .12), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(37, 99, 235, .10), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.84)),
    radial-gradient(circle, rgba(148, 163, 184, .30) 1px, transparent 1px) 0 0 / 30px 30px,
    #fff;
  overflow: hidden;
}

.hlsec-error-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
  gap: 58px;
  align-items: center;
}

.hlsec-error-copy h1 {
  max-width: 860px;
  margin: 20px 0 18px;
  color: var(--hl-ink) !important;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.03;
  letter-spacing: -.06em;
}

.hlsec-error-copy p {
  max-width: 720px;
  margin: 0 0 26px;
  color: var(--hl-text) !important;
  font-size: 18px;
  line-height: 1.85;
}

.hlsec-error-search {
  margin-top: 26px;
}

.hlsec-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.hlsec-error-terminal {
  min-height: 340px;
}

.hlsec-error-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.hlsec-error-links a {
  display: flex;
  min-height: 178px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--hl-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 107, 53, .08), transparent 30%),
    #fff;
  box-shadow: var(--hl-shadow);
  text-decoration: none !important;
  transition: var(--hl-transition);
}

.hlsec-error-links a:hover {
  border-color: rgba(255, 107, 53, .52);
  box-shadow: var(--hl-shadow-hover), 0 0 0 3px rgba(255, 107, 53, .07);
  transform: translateY(-4px);
}

.hlsec-error-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 107, 53, .32);
  border-radius: 14px;
  background: rgba(255, 107, 53, .08);
  font-size: 20px;
}

.hlsec-error-links strong {
  color: var(--hl-ink);
  font-family: var(--hl-heading);
  font-size: 22px;
  line-height: 1.25;
}

.hlsec-error-links em {
  margin-top: 8px;
  color: var(--hl-muted);
  font-style: normal;
  font-size: 15px;
  line-height: 1.7;
}

/* Astra 404 fallback nếu có phần tử mặc định vẫn hiện. */
.error404 .entry-title,
.error404 .page-title,
.error404 .ast-404-layout-1,
.error404 .no-results {
  display: none !important;
}

/* Bảo đảm các page virtual full width trong Astra. */
.hlsec-k-page,
.hlsec-error-page {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

@media (max-width: 1180px) {
  .hlsec-error-grid,
  .hlsec-error-links {
    grid-template-columns: 1fr 1fr;
  }

  .hlsec-error-terminal {
    max-width: 620px;
  }
}

@media (max-width: 768px) {
  .hlsec-error-hero {
    padding: 72px 0 62px;
  }

  .hlsec-error-grid,
  .hlsec-error-links {
    grid-template-columns: 1fr;
  }

  .hlsec-error-actions .hlsec-btn {
    width: 100%;
  }

  .hlsec-error-copy h1 {
    font-size: 38px;
  }
}


/* ═══════════════════════════════════════
   FIX PACK v7.5 — UX checklist
   1) Ẩn title Astra + full width cho MỌI trang
      dùng shortcode HLSEC (class từ body_class PHP)
   2) Knowledge Base: tabs · filters · sidebar
   3) Contact: topics list · Zalo CTA
   4) Card tags
═══════════════════════════════════════ */

/* ── 1. Xóa khoảng hở + title mặc định ── */
.hlsec-shortcode-template .entry-header,
.hlsec-shortcode-template .ast-single-entry-banner,
.hlsec-shortcode-template .ast-archive-entry-banner {
  display: none !important;
}
.hlsec-shortcode-template .site-content,
.hlsec-shortcode-template .site-content .ast-container,
.hlsec-shortcode-template .content-area,
.hlsec-shortcode-template .site-main,
.hlsec-shortcode-template .entry-content,
.hlsec-shortcode-template .ast-article-single {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.hlsec-shortcode-template .site-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Gutenberg đôi khi bọc shortcode trong <p> tạo margin lạ */
.hlsec-shortcode-template .entry-content > p:empty { display: none; }

/* ── 2a. KB Tabs (trong hero) ── */
.hlsec-kb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.hlsec-kb-tab {
  padding: 8px 18px;
  border: 1px solid var(--hl-border);
  border-radius: 999px;
  background: #fff;
  color: var(--hl-muted);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all .25s ease;
}
.hlsec-kb-tab:hover {
  border-color: var(--hl-orange);
  color: var(--hl-orange-dark);
}
.hlsec-kb-tab.is-active {
  background: var(--hl-orange);
  border-color: var(--hl-orange);
  color: #000;
}

/* ── 2b. Thanh filter ── */
.hlsec-kb-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--hl-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.hlsec-kb-filters select {
  flex: 1 1 160px;
  min-width: 150px;
  padding: 10px 12px;
  border: 1px solid var(--hl-border);
  border-radius: 8px;
  background: var(--hl-soft);
  color: var(--hl-ink);
  font-family: inherit;
  font-size: 14px;
}
.hlsec-kb-filters select:focus {
  outline: none;
  border-color: var(--hl-orange);
  box-shadow: 0 0 0 3px var(--hl-glow-orange);
}
.hlsec-kb-filters .hlsec-btn { padding: 10px 22px; font-size: 14px; }
.hlsec-kb-clear {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hl-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hlsec-kb-clear:hover { color: var(--hl-orange-dark); }

/* ── 2c. Layout grid + sidebar ── */
.hlsec-kb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 36px;
  align-items: start;
}
/* Trong layout có sidebar → grid bài viết còn 2 cột cho thoáng */
.hlsec-kb-main .hlsec-k-grid { grid-template-columns: repeat(2, 1fr); }

.hlsec-kb-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hlsec-kb-widget {
  background: #fff;
  border: 1px solid var(--hl-border);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.hlsec-kb-widget h4 {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hl-orange-dark);
}
.hlsec-kb-widget ul { list-style: none; margin: 0; padding: 0; }
.hlsec-kb-widget li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hl-soft-2);
  font-size: 14.5px;
}
.hlsec-kb-widget li:last-child { border-bottom: none; }
.hlsec-kb-widget a {
  color: var(--hl-text);
  text-decoration: none;
  font-weight: 600;
}
.hlsec-kb-widget a:hover { color: var(--hl-orange-dark); }
.hlsec-kb-widget .count {
  font-family: var(--hl-font-mono, monospace);
  font-size: 12px;
  color: var(--hl-muted);
  background: var(--hl-soft);
  border: 1px solid var(--hl-border);
  border-radius: 999px;
  padding: 1px 9px;
}
.hlsec-kb-latest a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

/* ── 2d. Phân trang (nếu theme chưa có style) ── */
.hlsec-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
}
.hlsec-pagination .page-numbers {
  padding: 9px 16px;
  border: 1px solid var(--hl-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hl-muted);
  text-decoration: none;
  font-weight: 600;
  transition: all .25s ease;
}
.hlsec-pagination .page-numbers.current,
.hlsec-pagination .page-numbers:hover {
  border-color: var(--hl-orange);
  color: var(--hl-orange-dark);
  background: rgba(255, 107, 53, .06);
}

/* ── 3. Contact bổ sung ── */
.hlsec-contact-topics {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hlsec-contact-topics li {
  padding: 4px 12px;
  border: 1px solid var(--hl-border);
  border-radius: 999px;
  background: var(--hl-soft);
  color: var(--hl-text);
  font-size: 13px;
  font-weight: 600;
}
.hlsec-zalo-cta {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  background: #0068FF;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all .25s ease;
}
.hlsec-zalo-cta:hover {
  background: #0053cc;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 104, 255, .3);
}

/* ── 4. Tag chips trên card ── */
.hlsec-k-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hlsec-tagchip {
  font-family: var(--hl-font-mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hl-blue);
  background: rgba(37, 99, 235, .06);
  border: 1px solid rgba(37, 99, 235, .25);
  border-radius: 6px;
  padding: 2px 8px;
  text-decoration: none;
  transition: all .25s ease;
}
.hlsec-tagchip:hover {
  border-color: var(--hl-orange);
  color: var(--hl-orange-dark);
  background: rgba(255, 107, 53, .06);
}

/* ── Responsive cho fix pack ── */
@media (max-width: 1024px) {
  .hlsec-kb-layout { grid-template-columns: 1fr; }
  .hlsec-kb-sidebar { position: static; }
  .hlsec-kb-main .hlsec-k-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hlsec-hub-hero, .hlsec-blog-header { padding: 44px 0 40px; }
  .hlsec-kb-main .hlsec-k-grid { grid-template-columns: 1fr; }
  .hlsec-kb-filters { padding: 14px; }
  .hlsec-kb-filters select { flex: 1 1 100%; }
  .hlsec-kb-filters .hlsec-btn { width: 100%; }
  .hlsec-os-search { flex-direction: column; }
  .hlsec-os-search input, .hlsec-os-search button { width: 100%; }
}


/* ═══════════════════════════════════════
   PLATFORM PACK v8 — CSS
   Terminal · Alert · Callout · Copy btn ·
   Command Palette · Author · Related · Chips
═══════════════════════════════════════ */

/* ── Chip mở rộng trên metabar ── */
.hlsec-stars { color: #F59E0B; letter-spacing: 2px; font-size: 13px; }
.hlsec-chip-status {
  border-color: rgba(5, 150, 105, .4);
  background: rgba(5, 150, 105, .07);
  color: #059669;
}

/* ── Terminal block thật ── */
.hlsec-terminal {
  margin: 28px 0;
  border: 1px solid var(--hl-dark-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--hl-dark-2);
  box-shadow: 0 10px 30px rgba(2, 6, 23, .25);
}
.hlsec-terminal-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--hl-dark-3);
  border-bottom: 1px solid var(--hl-dark-border);
}
.hlsec-terminal-head .dot { width: 11px; height: 11px; border-radius: 50%; }
.hlsec-terminal-head .dot-red { background: #FF5F57; }
.hlsec-terminal-head .dot-yellow { background: #FFBD2E; }
.hlsec-terminal-head .dot-green { background: #28C840; }
.hlsec-terminal-title {
  margin-left: auto;
  font-family: var(--hl-font-mono, monospace);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--hl-dark-muted);
  text-transform: uppercase;
}
.hlsec-terminal pre {
  margin: 0;
  padding: 18px 20px;
  background: transparent !important;
  border: 0 !important;
  color: #34D399;
  font-family: var(--hl-font-mono, monospace);
  font-size: 14px;
  line-height: 1.7;
  overflow-x: auto;
}

/* ── Alert blocks: Info / Warning / Danger / Tip ── */
.hlsec-alert {
  margin: 24px 0;
  border-radius: 10px;
  border: 1px solid;
  overflow: hidden;
}
.hlsec-alert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: 14px;
}
.hlsec-alert-body { padding: 12px 16px 14px; font-size: 15.5px; }
.hlsec-alert-body p:last-child { margin-bottom: 0; }
.hlsec-alert--info    { border-color: rgba(37, 99, 235, .35);  background: rgba(37, 99, 235, .05); }
.hlsec-alert--info .hlsec-alert-head    { color: #1D4ED8; background: rgba(37, 99, 235, .08); }
.hlsec-alert--warning { border-color: rgba(245, 158, 11, .4);  background: rgba(245, 158, 11, .06); }
.hlsec-alert--warning .hlsec-alert-head { color: #B45309; background: rgba(245, 158, 11, .1); }
.hlsec-alert--danger  { border-color: rgba(220, 38, 38, .4);   background: rgba(220, 38, 38, .05); }
.hlsec-alert--danger .hlsec-alert-head  { color: #B91C1C; background: rgba(220, 38, 38, .08); }
.hlsec-alert--tip     { border-color: rgba(5, 150, 105, .4);   background: rgba(5, 150, 105, .05); }
.hlsec-alert--tip .hlsec-alert-head     { color: #047857; background: rgba(5, 150, 105, .08); }

/* ── Callout: Note / Best Practice / Lab / Exam ── */
.hlsec-callout {
  margin: 24px 0;
  padding: 16px 20px 14px;
  border-left: 3px solid;
  border-radius: 0 10px 10px 0;
  background: var(--hl-soft);
}
.hlsec-callout-label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hlsec-callout-body { font-size: 15.5px; }
.hlsec-callout-body p:last-child { margin-bottom: 0; }
.hlsec-callout--note          { border-color: var(--hl-blue); }
.hlsec-callout--note .hlsec-callout-label          { color: var(--hl-blue); }
.hlsec-callout--best-practice { border-color: #059669; }
.hlsec-callout--best-practice .hlsec-callout-label { color: #059669; }
.hlsec-callout--lab           { border-color: var(--hl-orange); }
.hlsec-callout--lab .hlsec-callout-label           { color: var(--hl-orange-dark); }
.hlsec-callout--exam          { border-color: #7C3AED; }
.hlsec-callout--exam .hlsec-callout-label          { color: #7C3AED; }

/* ── Copy button trên code block ── */
.hlsec-pre-wrap { position: relative; }
.hlsec-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 5px 12px;
  border: 1px solid var(--hl-dark-border);
  border-radius: 6px;
  background: rgba(17, 24, 39, .85);
  color: var(--hl-dark-muted);
  font-family: var(--hl-font-mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.hlsec-copy-btn:hover { border-color: var(--hl-orange); color: var(--hl-orange); }
.hlsec-copy-btn.is-done { border-color: #059669; color: #34D399; }

/* ── Command Palette (Ctrl+K) ── */
.hlsec-palette { position: fixed; inset: 0; z-index: 100000; }
.hlsec-palette[hidden] { display: none; }
.hlsec-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .6);
  backdrop-filter: blur(3px);
}
.hlsec-palette-box {
  position: relative;
  max-width: 620px;
  margin: 10vh auto 0;
  background: #fff;
  border: 1px solid var(--hl-border);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, .4);
  overflow: hidden;
  animation: hlsec-pal-in .18s ease;
}
@keyframes hlsec-pal-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.hlsec-palette-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hl-border);
}
.hlsec-palette-input span { color: var(--hl-muted); font-size: 18px; }
.hlsec-palette-input input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: var(--hl-ink);
  background: transparent;
}
.hlsec-palette-input kbd {
  padding: 2px 8px;
  border: 1px solid var(--hl-border);
  border-radius: 6px;
  background: var(--hl-soft);
  color: var(--hl-muted);
  font-size: 11px;
}
.hlsec-palette-results { max-height: 52vh; overflow-y: auto; padding: 8px; }
.hlsec-palette-hint { margin: 10px 8px; color: var(--hl-muted); font-size: 14px; }
.hlsec-palette-hint em { color: var(--hl-text); font-style: normal; font-family: var(--hl-font-mono, monospace); }
.hlsec-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--hl-ink);
}
.hlsec-palette-item:hover { background: var(--hl-soft); }
.hlsec-palette-item .pi-type {
  flex: none;
  min-width: 66px;
  text-align: center;
  padding: 2px 8px;
  border: 1px solid var(--hl-border);
  border-radius: 999px;
  background: #fff;
  color: var(--hl-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hlsec-palette-item .pi-title { flex: 1; font-weight: 600; font-size: 14.5px; }
.hlsec-palette-item .pi-go { color: var(--hl-muted); font-size: 13px; }
.hlsec-palette-item:hover .pi-type { border-color: var(--hl-orange); color: var(--hl-orange-dark); }

/* ── Author card cuối bài ── */
.hlsec-author-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 44px;
  padding: 22px 24px;
  background: var(--hl-soft);
  border: 1px solid var(--hl-border);
  border-radius: 14px;
}
.hlsec-author-avatar img {
  border-radius: 50%;
  border: 2px solid var(--hl-orange);
  display: block;
}
.hlsec-author-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hl-orange-dark);
}
.hlsec-author-name { display: block; font-size: 18px; margin: 2px 0 6px; color: var(--hl-ink); }
.hlsec-author-info p { margin: 0 0 8px; font-size: 14.5px; color: var(--hl-text); }
.hlsec-author-links { font-size: 13.5px; color: var(--hl-muted); }
.hlsec-author-links a { color: var(--hl-blue); text-decoration: none; font-weight: 600; }
.hlsec-author-links a:hover { color: var(--hl-orange-dark); }

/* ── Related articles ── */
.hlsec-related { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--hl-border); }
.hlsec-related-title { font-size: 24px; margin: 0 0 22px; }
.hlsec-related-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) { .hlsec-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .hlsec-related-grid { grid-template-columns: 1fr; }
  .hlsec-author-card { flex-direction: column; }
  .hlsec-palette-box { margin: 8vh 14px 0; }
}
@media (prefers-reduced-motion: reduce) { .hlsec-palette-box { animation: none; } }


/* ═══════════════════════════════════════
   SEO & LEARNING PACK v9 — CSS
   Last Updated chip · Next Learning · Learning Path
═══════════════════════════════════════ */

/* Chip "Cập nhật: dd/mm/yyyy" — kín đáo, phục vụ SEO/tin cậy */
.hlsec-chip-updated {
  border-color: var(--hl-border) !important;
  background: var(--hl-soft) !important;
  color: var(--hl-muted) !important;
  font-family: var(--hl-font-mono, monospace);
  font-size: 11.5px !important;
}

/* ── Next Learning box: nổi bật, dẫn dắt học tiếp ── */
.hlsec-next-lab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 40px 0 8px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 107, 53, .35);
  border-left: 4px solid var(--hl-orange);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 107, 53, .05), rgba(37, 99, 235, .04));
  text-decoration: none;
  transition: all .25s ease;
}
.hlsec-next-lab:hover {
  border-color: var(--hl-orange);
  box-shadow: 0 10px 30px rgba(255, 107, 53, .14);
  transform: translateY(-2px);
}
.hlsec-next-lab-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hl-orange-dark);
}
.hlsec-next-lab-title {
  font-family: var(--hl-font-heading, inherit);
  font-size: 19px;
  font-weight: 700;
  color: var(--hl-ink);
  line-height: 1.35;
}
.hlsec-next-lab:hover .hlsec-next-lab-title { color: var(--hl-orange-dark); }
.hlsec-next-lab-why { font-size: 13px; color: var(--hl-muted); font-weight: 600; }

/* ── Learning Path: 4 bước nối mũi tên ── */
.hlsec-lpath {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin: 36px 0;
  overflow-x: auto;             /* mobile: vuốt ngang */
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
}
.hlsec-lpath-step {
  flex: 1 0 200px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--hl-border);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: all .25s ease;
}
.hlsec-lpath-step:hover {
  border-color: var(--hl-orange);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .1);
  transform: translateY(-3px);
}
.hlsec-lpath-step .lp-index {
  font-family: var(--hl-font-mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--hl-orange-dark);
}
.hlsec-lpath-step .lp-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--hl-ink);
}
.hlsec-lpath-step:hover .lp-name { color: var(--hl-orange-dark); }
.hlsec-lpath-step .lp-desc { font-size: 13px; color: var(--hl-muted); line-height: 1.5; }
.hlsec-lpath-arrow {
  align-self: center;
  flex: none;
  color: var(--hl-orange);
  font-size: 20px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .hlsec-lpath { gap: 10px; }
  .hlsec-lpath-step { flex-basis: 170px; }
  .hlsec-next-lab { padding: 16px 18px; }
}


/* ═══════════════════════════════════════
   HLSEC v10 — Documentation-first polish
   Không dùng margin âm. Fix khoảng trắng Astra bằng reset padding/margin wrapper.
═════════════════════════════  ═════════ */

/* 1) Form ID/date chip related visibility */
.hlsec-chip-updated,
.hlsec-footer-recent .date,
.hlsec-meta-date,
.hlsec-updated,
time.entry-date,
.entry-date,
.post-date,
.published,
.updated,
.wp-block-post-date {
  display: none !important;
  visibility: hidden !important;
}

/* 2) Root cause gap fix: Astra adds top padding/margins on wrappers and entry header.
   Reset wrappers only for pages rendered by HLSEC shortcodes and for HLSEC custom views. */
.hlsec-shortcode-template .site-content,
.hlsec-shortcode-template .ast-container,
.hlsec-shortcode-template #primary,
.hlsec-shortcode-template .content-area,
.hlsec-shortcode-template .site-main,
.hlsec-shortcode-template .ast-article-single,
.hlsec-shortcode-template article.page,
.hlsec-shortcode-template .entry-content,
.hlsec-shortcode-template.ast-page-builder-template .site-content,
.hlsec-shortcode-template.ast-page-builder-template .ast-container,
.hlsec-shortcode-template.ast-page-builder-template #primary,
.home .site-content,
.home .ast-container,
.home #primary,
.home .content-area,
.home .site-main,
.home .ast-article-single,
.home .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.hlsec-shortcode-template .entry-header,
.hlsec-shortcode-template .entry-title,
.hlsec-shortcode-template .page-title,
.hlsec-shortcode-template .ast-single-entry-banner,
.hlsec-shortcode-template .ast-archive-entry-banner,
.home .entry-header,
.home .entry-title,
.home .ast-single-entry-banner {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hlsec-shortcode-template .entry-content > *:first-child,
.home .entry-content > *:first-child,
.archive .site-content > *:first-child,
.single .site-content > *:first-child {
  margin-top: 0 !important;
}

/* If header is fixed/sticky, JS adds this class and sets --hl-header-height. */
body.hlsec-header-offset .site-content {
  padding-top: var(--hl-header-height, 0px) !important;
}
body.hlsec-header-offset.hlsec-shortcode-template .site-content,
body.hlsec-header-offset.home .site-content {
  padding-top: var(--hl-header-height, 0px) !important;
}

/* 3) Portal hero: Microsoft Learn / Cloudflare Docs style */
.hlsec-portal-hero {
  padding: 86px 0 76px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 107, 53, .10), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(37, 99, 235, .10), transparent 34%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-bottom: 1px solid var(--hl-border);
  text-align: center;
}
.hlsec-portal-eyebrow {
  display: inline-flex;
  padding: 7px 14px;
  border: 1px solid rgba(255, 107, 53, .35);
  border-radius: 999px;
  background: rgba(255, 107, 53, .08);
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hlsec-portal-hero h1 {
  max-width: 960px;
  margin: 18px auto 14px;
  font-size: clamp(44px, 7vw, 86px);
  line-height: 1;
  letter-spacing: -.07em;
}
.hlsec-portal-subtitle {
  max-width: 820px;
  margin: 0 auto 30px;
  color: var(--hl-text) !important;
  font-size: 18px;
}
.hlsec-portal-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: min(100%, 880px);
  margin: 0 auto;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--hl-border-strong);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .10);
}
.hlsec-portal-search span { color: var(--hl-muted); font-size: 24px; }
.hlsec-portal-search input {
  min-height: 54px;
  border: 0;
  outline: 0;
  color: var(--hl-ink);
  font-size: 17px;
  background: transparent;
}
.hlsec-portal-search button,
.hlsec-newsletter-form button {
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--hl-orange);
  color: #050505;
  font-weight: 900;
  cursor: pointer;
}
.hlsec-portal-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.hlsec-portal-topics a {
  padding: 8px 16px;
  border: 1px solid var(--hl-border);
  border-radius: 999px;
  background: #fff;
  color: var(--hl-text);
  font-weight: 800;
  text-decoration: none !important;
}
.hlsec-portal-topics a:hover { border-color: var(--hl-orange); color: var(--hl-orange-dark); transform: translateY(-2px); }

.hlsec-portal-dashboard {
  padding: 28px 0;
  background: #fff;
  border-bottom: 1px solid var(--hl-border);
}
.hlsec-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.hlsec-dashboard-grid article {
  padding: 22px;
  border: 1px solid var(--hl-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--hl-shadow);
}
.hlsec-dashboard-grid strong {
  display: block;
  color: var(--hl-orange-dark);
  font-family: var(--hl-mono);
  font-size: 24px;
}
.hlsec-dashboard-grid span { color: var(--hl-muted); font-size: 14px; font-weight: 700; }
.hlsec-path-grid-six { grid-template-columns: repeat(3, 1fr); }

/* 4) Lab card metadata */
.hlsec-lab-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hl-border);
  border-radius: 12px;
  background: var(--hl-soft);
}
.hlsec-lab-meta span { display: grid; gap: 3px; }
.hlsec-lab-meta strong {
  color: var(--hl-orange-dark);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hlsec-lab-meta em { color: var(--hl-text); font-style: normal; font-size: 12.5px; line-height: 1.35; }
.hlsec-k-card-footer a { color: var(--hl-orange-dark) !important; font-weight: 900; text-decoration: none !important; }
.hlsec-card-start { margin-left: auto; }
.hlsec-chip-type { border-color: rgba(37, 99, 235, .32); background: rgba(37, 99, 235, .06); color: var(--hl-blue); }

/* 5) Resource Center + Tool Library */
.hlsec-resource-grid-v10,
.hlsec-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.hlsec-resource-tile,
.hlsec-tool-card {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--hl-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--hl-shadow);
  text-decoration: none !important;
  transition: var(--hl-transition);
}
.hlsec-resource-tile:hover,
.hlsec-tool-card:hover {
  border-color: rgba(255, 107, 53, .5);
  box-shadow: var(--hl-shadow-hover);
  transform: translateY(-4px);
}
.hlsec-resource-tile strong,
.hlsec-tool-card h3 { color: var(--hl-ink); font-family: var(--hl-heading); font-size: 24px; margin: 0 0 8px; }
.hlsec-resource-tile span,
.hlsec-tool-card p { color: var(--hl-muted); font-size: 15px; line-height: 1.7; }
.hlsec-tool-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(255, 107, 53, .10);
  border: 1px solid rgba(255, 107, 53, .32);
  color: var(--hl-orange-dark);
  font-family: var(--hl-mono);
  font-weight: 900;
}
.hlsec-tool-card span { display: inline-flex; width: fit-content; margin: auto 0 10px; padding: 4px 10px; border-radius: 999px; background: var(--hl-soft); color: var(--hl-blue); font-weight: 800; font-size: 12px; }
.hlsec-tool-card a { color: var(--hl-orange-dark); font-weight: 900; text-decoration: none !important; }

/* 6) Documentation 3-column layout */
.hlsec-doc-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 780px) 260px;
  gap: 38px;
  align-items: start;
  justify-content: center;
}
.hlsec-doc-tree-inner {
  position: sticky;
  top: calc(var(--hl-header-height, 80px) + 24px);
  padding: 18px;
  border: 1px solid var(--hl-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--hl-shadow);
}
.hlsec-doc-tree-title {
  margin-bottom: 12px;
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hlsec-doc-tree a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--hl-text);
  font-weight: 800;
  text-decoration: none !important;
}
.hlsec-doc-tree a:hover { background: var(--hl-soft); color: var(--hl-orange-dark); }
.hlsec-toc-inner { top: calc(var(--hl-header-height, 80px) + 24px); }

/* 7) Newsletter */
.hlsec-newsletter-panel {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 520px);
  gap: 32px;
  align-items: center;
  padding: 36px;
  border: 1px solid var(--hl-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--hl-shadow-hover);
}
.hlsec-newsletter-panel h2 { margin: 16px 0 8px; font-size: clamp(30px, 4vw, 46px); }
.hlsec-newsletter-form { display: flex; gap: 10px; }
.hlsec-newsletter-form input {
  flex: 1;
  min-height: 52px;
  border: 1px solid var(--hl-border-strong);
  border-radius: 12px;
  padding: 0 14px;
}

@media (max-width: 1180px) {
  .hlsec-doc-layout { grid-template-columns: 1fr; }
  .hlsec-doc-tree-inner, .hlsec-toc-inner { position: static; }
  .hlsec-dashboard-grid, .hlsec-path-grid-six, .hlsec-resource-grid-v10, .hlsec-tool-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hlsec-portal-hero { padding: 58px 0 52px; }
  .hlsec-portal-search { grid-template-columns: 1fr; text-align: left; }
  .hlsec-portal-search span { display: none; }
  .hlsec-portal-search button { width: 100%; }
  .hlsec-dashboard-grid, .hlsec-path-grid-six, .hlsec-resource-grid-v10, .hlsec-tool-grid, .hlsec-lab-meta, .hlsec-newsletter-panel { grid-template-columns: 1fr; }
  .hlsec-newsletter-form { flex-direction: column; }
}


/* ═══════════════════════════════════════
   HLSEC v10.1 — NO GAP FIX FOR ABOUT + SHORTCODE PAGES
   Nguyên nhân: About có [hlsec_about] nhưng trước đó chưa được gắn class
   hlsec-shortcode-template, nên Astra vẫn giữ margin/padding ở #primary,
   .site-main, .ast-article-single và .entry-content.
   Không dùng margin âm.
═══════════════════════════════════════ */

/* 1) Reset toàn bộ wrapper Astra cho mọi page dùng shortcode HLSEC, gồm About. */
body.hlsec-shortcode-template .site-content,
body.hlsec-shortcode-template .site-content > .ast-container,
body.hlsec-shortcode-template .ast-container,
body.hlsec-shortcode-template #primary,
body.hlsec-shortcode-template .content-area,
body.hlsec-shortcode-template .site-main,
body.hlsec-shortcode-template .ast-article-single,
body.hlsec-shortcode-template article.page,
body.hlsec-shortcode-template .entry-content,
body.hlsec-about-template .site-content,
body.hlsec-about-template .site-content > .ast-container,
body.hlsec-about-template .ast-container,
body.hlsec-about-template #primary,
body.hlsec-about-template .content-area,
body.hlsec-about-template .site-main,
body.hlsec-about-template .ast-article-single,
body.hlsec-about-template article.page,
body.hlsec-about-template .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* 2) Astra separate-container hay page-builder-template thường tự thêm khoảng cách. */
body.hlsec-shortcode-template.ast-separate-container #primary,
body.hlsec-shortcode-template.ast-separate-container .ast-article-single,
body.hlsec-shortcode-template.ast-page-builder-template #primary,
body.hlsec-shortcode-template.ast-page-builder-template .site-content,
body.hlsec-about-template.ast-separate-container #primary,
body.hlsec-about-template.ast-separate-container .ast-article-single,
body.hlsec-about-template.ast-page-builder-template #primary,
body.hlsec-about-template.ast-page-builder-template .site-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Ẩn title/banner mặc định; không ảnh hưởng breadcrumb/title trong single post. */
body.hlsec-shortcode-template .entry-header,
body.hlsec-shortcode-template .entry-title,
body.hlsec-shortcode-template .page-title,
body.hlsec-shortcode-template .ast-single-entry-banner,
body.hlsec-shortcode-template .ast-archive-entry-banner,
body.hlsec-about-template .entry-header,
body.hlsec-about-template .entry-title,
body.hlsec-about-template .page-title,
body.hlsec-about-template .ast-single-entry-banner,
body.hlsec-about-template .ast-archive-entry-banner {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 4) Hero/HLSEC block phải là phần tử đầu tiên ngay dưới header. */
body.hlsec-shortcode-template .entry-content > .hlsec-k-page:first-child,
body.hlsec-shortcode-template .entry-content > .hlsec-home-os:first-child,
body.hlsec-shortcode-template .entry-content > .hlsec-page:first-child,
body.hlsec-about-template .entry-content > .hlsec-about-pro:first-child,
body.hlsec-about-template .entry-content > .hlsec-k-page:first-child {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-top: 0 !important;
}

/* 5) About hero: nền bắt đầu ngay dưới header, nội dung gọn hơn. */
body.hlsec-about-template .hlsec-about-pro,
body.hlsec-about-template .hlsec-about-hero {
  margin-top: 0 !important;
  padding-top: 64px !important;
}

/* Desktop lớn vẫn giữ cảm giác premium nhưng không tạo khoảng hở giả. */
@media (min-width: 1025px) {
  body.hlsec-about-template .hlsec-about-hero {
    padding-top: 72px !important;
  }
}

/* Mobile: không để khoảng trắng lớn dưới header. */
@media (max-width: 768px) {
  body.hlsec-about-template .hlsec-about-hero,
  body.hlsec-shortcode-template .hlsec-hub-hero,
  body.hlsec-shortcode-template .hlsec-blog-header,
  body.hlsec-shortcode-template .hlsec-portal-hero {
    padding-top: 42px !important;
  }
}

/* ═══════════════════════════════════════
   HLSEC v10.2 — FIX SINGLE BLOG / DOC CONTENT LAYOUT
   Vấn đề cũ: bài viết WordPress thường vẫn dùng layout 3 cột như tài liệu CPT,
   làm cột nội dung bị hẹp. Bản này tách:
   - post thường: Article + TOC, không có doc-tree bên trái
   - CPT: Doc-tree + Article + TOC
   Không dùng margin âm.
═══════════════════════════════════════ */

/* 1) Ẩn header/title mặc định của Astra ở bài knowledge; title được render trong .hlsec-article-hero. */
body.hlsec-knowledge-single .entry-header,
body.hlsec-knowledge-single .entry-title,
body.hlsec-knowledge-single .ast-single-entry-banner,
body.hlsec-knowledge-single .entry-meta,
body.hlsec-knowledge-single .entry-meta * {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 2) Reset đúng wrapper Astra cho single post/CPT để không có khoảng trắng thừa dưới header. */
body.hlsec-knowledge-single .site-content,
body.hlsec-knowledge-single .site-content > .ast-container,
body.hlsec-knowledge-single .ast-container,
body.hlsec-knowledge-single #primary,
body.hlsec-knowledge-single .content-area,
body.hlsec-knowledge-single .site-main,
body.hlsec-knowledge-single .ast-article-single,
body.hlsec-knowledge-single article.post,
body.hlsec-knowledge-single article.page,
body.hlsec-knowledge-single .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.hlsec-knowledge-single .site-content {
  background: #fff !important;
}

/* 3) Khung bài viết rộng hơn để layout documentation không bị bóp. */
body.hlsec-knowledge-single .hlsec-single-shell.hlsec-doc-shell {
  width: min(calc(100% - 56px), 1440px) !important;
  max-width: 1440px !important;
  margin: 0 auto 96px !important;
  padding-top: 34px !important;
}

/* 4) Header riêng của bài viết: breadcrumb + title + metadata. */
.hlsec-article-hero {
  width: min(100%, 980px);
  margin: 0 auto 30px;
  padding: 36px 0 0;
}

body.hlsec-blog-single .hlsec-article-hero {
  width: min(100%, 900px);
}

.hlsec-article-title {
  margin: 12px 0 18px !important;
  color: var(--hl-ink) !important;
  font-family: var(--hl-heading) !important;
  font-size: clamp(34px, 4.6vw, 64px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.055em !important;
}

.hlsec-article-hero .hlsec-breadcrumb {
  margin-bottom: 14px !important;
}

.hlsec-article-hero .hlsec-post-metabar {
  margin: 0 !important;
  padding: 16px 0 18px !important;
  border-top: 1px solid var(--hl-border) !important;
  border-bottom: 1px solid var(--hl-border) !important;
}

/* 5) Layout: bài blog thường chỉ cần nội dung + mục lục. */
.hlsec-doc-layout {
  width: 100% !important;
  display: grid !important;
  align-items: start !important;
  justify-content: center !important;
  gap: 34px !important;
}

body.hlsec-blog-single .hlsec-doc-layout--blog {
  grid-template-columns: minmax(0, 860px) minmax(230px, 300px) !important;
}

body.hlsec-blog-single .hlsec-doc-layout--blog.hlsec-doc-layout--no-toc {
  grid-template-columns: minmax(0, 860px) !important;
}

/* 6) CPT như Labs/Projects/Resources vẫn giữ phong cách documentation 3 cột nhưng đủ rộng. */
body.hlsec-cpt-single .hlsec-doc-layout--cpt {
  grid-template-columns: minmax(200px, 240px) minmax(0, 820px) minmax(230px, 300px) !important;
}

body.hlsec-cpt-single .hlsec-doc-layout--cpt.hlsec-doc-layout--no-toc {
  grid-template-columns: minmax(200px, 240px) minmax(0, 860px) !important;
}

/* 7) Nội dung trung tâm: không bị bóp, đọc như tài liệu kỹ thuật. */
body.hlsec-knowledge-single .hlsec-single-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  color: var(--hl-text) !important;
  font-size: 18px !important;
  line-height: 1.86 !important;
}

body.hlsec-knowledge-single .hlsec-single-content > *:first-child {
  margin-top: 0 !important;
}

body.hlsec-knowledge-single .hlsec-single-content h1,
body.hlsec-knowledge-single .hlsec-single-content h2,
body.hlsec-knowledge-single .hlsec-single-content h3 {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

body.hlsec-knowledge-single .hlsec-single-content h1 {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.12 !important;
}

/* 8) Sidebar/TOC rõ ràng, không đè nội dung. */
body.hlsec-knowledge-single .hlsec-doc-tree-inner,
body.hlsec-knowledge-single .hlsec-toc-inner {
  position: sticky !important;
  top: calc(var(--hl-header-height, 82px) + 24px) !important;
  max-height: calc(100vh - var(--hl-header-height, 82px) - 48px) !important;
  overflow-y: auto !important;
}

body.hlsec-blog-single .hlsec-doc-tree {
  display: none !important;
}

body.hlsec-knowledge-single .hlsec-toc-inner {
  padding: 22px !important;
}

body.hlsec-knowledge-single .hlsec-toc-title,
body.hlsec-knowledge-single .hlsec-doc-tree-title {
  color: var(--hl-orange-dark) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* 9) Bỏ ngày tháng nếu còn sót từ plugin/theme. */
body.hlsec-knowledge-single time,
body.hlsec-knowledge-single .posted-on,
body.hlsec-knowledge-single .published,
body.hlsec-knowledge-single .updated,
body.hlsec-knowledge-single .entry-date,
body.hlsec-knowledge-single .post-date,
body.hlsec-knowledge-single .hlsec-chip-updated {
  display: none !important;
  visibility: hidden !important;
}

/* 10) Responsive: tablet/mobile chuyển về một cột, không vỡ layout. */
@media (max-width: 1280px) {
  body.hlsec-cpt-single .hlsec-doc-layout--cpt,
  body.hlsec-blog-single .hlsec-doc-layout--blog {
    grid-template-columns: minmax(0, 820px) minmax(220px, 280px) !important;
  }

  body.hlsec-cpt-single .hlsec-doc-tree {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  body.hlsec-knowledge-single .hlsec-single-shell.hlsec-doc-shell {
    width: min(calc(100% - 36px), 860px) !important;
    padding-top: 24px !important;
  }

  body.hlsec-cpt-single .hlsec-doc-layout--cpt,
  body.hlsec-blog-single .hlsec-doc-layout--blog,
  body.hlsec-cpt-single .hlsec-doc-layout--cpt.hlsec-doc-layout--no-toc,
  body.hlsec-blog-single .hlsec-doc-layout--blog.hlsec-doc-layout--no-toc {
    grid-template-columns: 1fr !important;
  }

  body.hlsec-knowledge-single .hlsec-doc-tree-inner,
  body.hlsec-knowledge-single .hlsec-toc-inner {
    position: static !important;
    max-height: none !important;
  }

  body.hlsec-knowledge-single .hlsec-toc {
    order: -1;
  }
}

@media (max-width: 768px) {
  body.hlsec-knowledge-single .hlsec-single-shell.hlsec-doc-shell {
    width: calc(100% - 28px) !important;
    margin-bottom: 64px !important;
  }

  .hlsec-article-hero {
    padding-top: 24px !important;
  }

  .hlsec-article-title {
    font-size: 32px !important;
  }

  body.hlsec-knowledge-single .hlsec-single-content {
    font-size: 16.5px !important;
    line-height: 1.78 !important;
  }
}