/* ============================================================
   MT.NET.VN PRO6 V18 - UNIFIED PAGE HEADER / BREADCRUMB
   ============================================================ */
.pro6-unified-pagehead{
  position:relative;
  margin:0;
  padding:18px 28px 4px;
  background:transparent;
}
.pro6-pagehead-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:142px;
  padding:24px 26px;
  overflow:hidden;
  border:1px solid #e4e9f1;
  border-radius:18px;
  background:
    radial-gradient(circle at 93% 10%,rgba(87,90,176,.09),transparent 25%),
    radial-gradient(circle at 75% 120%,rgba(36,107,253,.07),transparent 31%),
    #fff;
  box-shadow:0 9px 28px rgba(16,24,40,.045);
}
.pro6-pagehead-inner:before{
  content:"";
  position:absolute;
  width:150px;height:150px;
  right:-46px;top:-74px;
  border:28px solid rgba(36,107,253,.035);
  border-radius:50%;
  pointer-events:none;
}
.pro6-pagehead-copy{position:relative;z-index:1;min-width:0;max-width:920px}
.pro6-pagehead-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  color:#246bfd;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.pro6-pagehead-kicker i{
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:7px;
  background:#eef4ff;
  font-size:11px;
}
.pro6-pagehead-copy h1{
  margin:0;
  color:#182230;
  font-size:clamp(25px,2.25vw,35px);
  line-height:1.14;
  letter-spacing:-.045em;
  font-weight:800;
}
.pro6-pagehead-description{
  display:none;
  max-width:760px;
  margin:7px 0 0;
  color:#667085;
  font-size:11px;
  line-height:1.55;
}
.pro6-pagehead-description:not(:empty){display:block}
.pro6-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  margin-top:13px;
  min-height:24px;
  font-size:10px;
}
.pro6-breadcrumb a,
.pro6-breadcrumb span.pro6-current{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  color:#667085;
  text-decoration:none;
  white-space:nowrap;
}
.pro6-breadcrumb a:hover{color:#175cd3}
.pro6-breadcrumb a:first-child{
  color:#475467;
  font-weight:650;
}
.pro6-breadcrumb span.pro6-current{
  color:#182230;
  font-weight:700;
}
.pro6-breadcrumb .pro6-breadcrumb-separator{
  display:inline-grid;
  place-items:center;
  width:22px;
  color:#b0bac8;
  font-size:8px;
}
.pro6-pagehead-actions{
  position:relative;z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex:0 0 auto;
}
.pro6-pagehead-action{
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border:1px solid #dfe5ed;
  border-radius:10px;
  background:#fff;
  color:#475467;
  font-family:inherit;
  font-size:9px;
  font-weight:750;
  text-decoration:none;
  cursor:pointer;
}
.pro6-pagehead-action:hover{
  border-color:#b7ccff;
  background:#f7f9ff;
  color:#175cd3;
}
.pro6-pagehead-action.primary{
  border-color:#246bfd;
  background:#246bfd;
  color:#fff;
}
.pro6-pagehead-action.primary:hover{background:#175cd3;color:#fff}

/* The entire old breadcrumb/nav markup is data-only. This fixes the yellow-box area. */
.pro6-breadcrumb-source{
  position:absolute!important;
  width:1px!important;height:1px!important;
  left:-10000px!important;top:auto!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  opacity:0!important;
}
.pro6-breadcrumb-source *{
  position:static!important;
  float:none!important;
  width:auto!important;height:auto!important;
  margin:0!important;padding:0!important;
  transform:none!important;
}

/* Old header fragments inside actual content should no longer reserve tall blank areas. */
#main-content .sub-header-container,
#main-content .page-header:not(.pro6-article-header),
#main-content .breadcrumb-area,
#main-content .breadcrumb-wrapper{
  min-height:0!important;
  height:auto!important;
}
#main-content>.sub-header-container:empty,
#main-content>.page-header:empty{display:none!important}

/* Avoid duplicate H1 immediately after V18 page header on legacy category pages.
   Runtime applies pro6-duplicate-page-title only when text equals the V18 title. */
#main-content .pro6-duplicate-page-title{display:none!important}

body.theme-dark .pro6-pagehead-inner{
  background:
    radial-gradient(circle at 93% 10%,rgba(111,115,255,.12),transparent 25%),
    #151f2f;
  border-color:#29394d;
}
body.theme-dark .pro6-pagehead-copy h1{color:#eef3f8}
body.theme-dark .pro6-pagehead-description,
body.theme-dark .pro6-breadcrumb a{color:#a9b4c3}
body.theme-dark .pro6-breadcrumb span.pro6-current{color:#e6edf5}
body.theme-dark .pro6-pagehead-action{background:#192536;border-color:#304159;color:#d5dfeb}

@media(max-width:1050px){
  .pro6-unified-pagehead{padding:14px 18px 3px}
  .pro6-pagehead-inner{min-height:128px;padding:20px}
  .pro6-pagehead-action span{display:none}
  .pro6-pagehead-action{width:38px;padding:0}
}
@media(max-width:700px){
  .pro6-unified-pagehead{padding:10px 12px 2px}
  .pro6-pagehead-inner{
    align-items:flex-start;
    min-height:0;
    padding:17px 15px;
    border-radius:14px;
  }
  .pro6-pagehead-copy{padding-right:44px}
  .pro6-pagehead-copy h1{font-size:24px}
  .pro6-pagehead-actions{
    position:absolute;
    right:13px;top:13px;
  }
  .pro6-pagehead-actions .primary{display:none}
  .pro6-breadcrumb{
    max-width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .pro6-breadcrumb::-webkit-scrollbar{display:none}
}
@media print{
  .pro6-pagehead-actions{display:none!important}
  .pro6-pagehead-inner{box-shadow:none!important}
}