/* hocthilaixe header v1 */
:root{--hlx-brand:#2a7cff;--hlx-text:#111;--hlx-muted:#6b7280;--hlx-line:#e5e7eb;--hlx-bg:#ffffff}

.hlx{font-family:Montserrat,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--hlx-text)}
.hlx *{box-sizing:border-box}

.hlx a{color:inherit;text-decoration:none}
.hlx a:hover{opacity:.9}

.hlx .topbar{
  display:flex;align-items:center;gap:16px;
  padding:12px 18px;background:var(--hlx-bg);
  border-bottom:1px solid var(--hlx-line)
}
.hlx .brand{font-weight:700;font-size:22px;display:flex;align-items:center;gap:8px}
.hlx .brand::before{content:"";width:14px;height:14px;background:var(--hlx-brand);border-radius:3px;display:inline-block}
.hlx .date{color:var(--hlx-muted);font-size:14px;white-space:nowrap}
.hlx .search{margin-left:auto;display:flex;align-items:center;gap:8px;background:#f3f4f6;border:1px solid #e5e7eb;padding:8px 12px;border-radius:999px;min-width:240px}
.hlx .search input{border:0;outline:0;background:transparent;width:100%}
.hlx .actions{display:flex;align-items:center;gap:14px;margin-left:6px}
.hlx .actions a{font-weight:600}

.hlx .nav{border-bottom:1px solid var(--hlx-line);background:#fff}
.hlx .nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 18px}
.hlx .links{display:flex;gap:8px}
.hlx .nav a{color:#1f2937;font-weight:600;padding:8px 12px;border-radius:10px}
.hlx .nav a:hover{background:#f3f4f6}

#hlx-menu-toggle{display:none}
.hlx .burger{display:none;margin-left:auto;cursor:pointer}
.hlx .burger span{display:block;width:22px;height:2px;background:#111;margin:5px 0;border-radius:2px}

@media (max-width: 900px){
  .hlx .search,.hlx .actions{display:none}
  .hlx .burger{display:block}
  .hlx .links{display:none;flex-direction:column;gap:8px;padding:10px 0}
  #hlx-menu-toggle:checked ~ .links{display:flex}
}

.hlx .hero{
  position:relative;min-height:240px;display:flex;align-items:center;color:#fff;overflow:hidden;
  background:#7b2c2c url('/assets/img/banner.jpg') center/cover no-repeat
}
.hlx .hero::before{content:"";position:absolute;inset:0;background:rgba(90,10,10,.48)}
.hlx .hero-content{position:relative;padding:56px 18px;max-width:1100px;margin:0 auto;width:100%}
.hlx .hero h1{margin:0 0 6px 0;font-size:44px;line-height:1.15;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.hlx .hero .sub{font-size:18px;opacity:.98}
@media (max-width:600px){.hlx .hero{min-height:190px}.hlx .hero h1{font-size:30px}}

/* Reset gạch ngang cho link trong header HLX */
.hlx a,
.hlx a:visited,
.hlx a:hover,
.hlx a:active {
  text-decoration: none !important;
}

/* --- HLX hard reset for unwanted lines --- */
.hlx, .hlx * {
  text-decoration: none !important;
}
/* đảm bảo các link menu/breadcrumb không bị vẽ gạch bằng pseudo-element */
.hlx nav a,
.hlx nav a:visited,
.hlx nav a:hover,
.hlx nav a:active {
  text-decoration: none !important;
  display: inline-block;  /* tránh các hiệu ứng underline/line-through “dính” theo dòng */
}
.hlx nav a::before,
.hlx nav a::after {
  content: none !important;
  display: none !important;
}
/* nếu có rule global áp dụng cho <u>, <s>, <del> trong nav, ta cũng reset */
.hlx nav u, .hlx nav s, .hlx nav del {
  text-decoration: none !important;
}
/* đề phòng có border tạo “gạch giữa” */
.hlx nav a { border: 0 !important; background-image: none !important; }

/* --- HLX ultimate reset for stray lines in header/menu --- */
/* Càn quét mọi khả năng: a, con cháu, pseudo, và cả phần tử bị bọc <s>/<del> */
.hlx .topbar, .hlx .nav,
.hlx .topbar *, .hlx .nav * {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: initial !important;
  text-decoration-thickness: initial !important;
  text-decoration-color: currentColor !important;
}
.hlx nav a,
.hlx nav a:link,
.hlx nav a:visited,
.hlx nav a:hover,
.hlx nav a:active,
.hlx nav a * {
  text-decoration: none !important;
}
.hlx nav a::before, .hlx nav a::after,
.hlx nav a *::before, .hlx nav a *::after {
  content: none !important;
  display: none !important;
}
/* Nếu có ai cố tình render <s>/<del> trong menu, cũng tắt */
.hlx nav s, .hlx nav del, .hlx nav u {
  text-decoration: none !important;
}

/* HLX: xoá mọi gạch trong header + menu, chắc chắn nằm ngang */
.hlx, .hlx * { text-decoration: none !important; -webkit-text-decoration: none !important; }
.hlx nav a,
.hlx nav a:link, .hlx nav a:visited, .hlx nav a:hover, .hlx nav a:active { 
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
}
.hlx nav a::before, .hlx nav a::after { content: none !important; display: none !important; }
/* nếu có <s>/<del>/<strike> chui vào trong nav/hero thì tắt luôn */
.hlx nav s, .hlx nav del, .hlx nav strike,
.hlx .hero s, .hlx .hero del, .hlx .hero strike { text-decoration: none !important; }

/* Tắt overlay xanh che banner */
.hlx .hero::before {
  background: none !important;
  opacity: 0 !important;
}

/* --- banner override --- */
.hero{
  background:#7b2c2c url('/assets/img/banner.jpg') center/cover no-repeat !important;
  min-height: 280px;
}
.hero::before{ background:none !important; opacity:0 !important; }
@media (max-width:600px){ .hero{ min-height:200px } }

/* === FIX: remove strikethrough inside header (.hlx) === */
.hlx s, .hlx del, .hlx strike { text-decoration: none !important; }
.hlx a, .hlx .nav a { text-decoration: none !important; }
.hlx .nav a:hover { text-decoration: none !important; }

/* (tuỳ chọn) đảm bảo hero chữ nổi rõ */
.hlx .hero .hero-content h1{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.hlx .hero .hero-content .sub{ color:#fff; opacity:.95; }

/* === FIX (nav + hero): remove strikethrough and pseudo lines === */
.hlx s, .hlx del, .hlx strike { text-decoration: none !important; }
.hlx .nav a, .hlx .nav a * { text-decoration: none !important; }
.hlx .hero h1, .hlx .hero .sub { text-decoration: none !important; }

/* kill any decorative line via pseudo elements */
.hlx .hero h1::before,
.hlx .hero h1::after,
.hlx .nav a::before,
.hlx .nav a::after { content: none !important; display: none !important; }

/* ensure hero text readable */
.hlx .hero .hero-content h1{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.hlx .hero .hero-content .sub{ color:#fff; opacity:.95; }

/* === KILL SWITCH (header .hlx) === */
.hlx *, .hlx *::before, .hlx *::after{
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration: none !important;
  -webkit-text-decoration-line: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.hlx .hero h1, .hlx .hero .sub, .hlx .nav a{
  text-decoration: none !important;
}
/* chữ hero rõ ràng */
.hlx .hero .hero-content h1{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.hlx .hero .hero-content .sub{ color:#fff; opacity:.95; }

/* Overlay tối cho banner */
.hero {
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}

/* Cải thiện độ nổi chữ trên banner */
.hero {
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55); /* overlay tối hơn */
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-content h1 {
  color: #fff !important;
  font-weight: 800;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
}
.hero-content .sub {
  color: #fff !important;
  font-weight: 500;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.85);
}

/* Làm mờ banner để chữ nổi bật hơn */
.hero {
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65); /* tăng độ tối overlay */
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-content h1 {
  color: #fff !important;
  font-weight: 800;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
}
.hero-content .sub {
  color: #fff !important;
  font-weight: 500;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.85);
}

/* Đổi màu chữ trên banner sáng */
.hero-content h1 {
  color: #003366 !important; /* Xanh đậm */
  font-weight: 800;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.6); /* viền sáng nhẹ */
}
.hero-content .sub {
  color: #cc6600 !important; /* Cam nhạt */
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.6);
}

/* Canh giữa nội dung hero */
.hero .hero-content {
  text-align: center;       /* Canh giữa ngang */
  top: 50%;                 /* Đẩy xuống giữa */
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 100%;
}

/* Giữ nguyên màu trắng */
.hero .hero-content h1,
.hero .hero-content .sub {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Canh giữa nội dung hero */
.hero .hero-content {
  text-align: center;       /* Canh giữa ngang */
  top: 50%;                 /* Đẩy xuống giữa */
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 100%;
}

/* Chữ màu vàng đậm */
.hero .hero-content h1,
.hero .hero-content .sub {
  color: #FFD700 !important; /* vàng gold */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Canh giữa nội dung hero */
.hero .hero-content {
  text-align: center;       /* Canh giữa ngang */
  top: 50%;                 /* Đẩy xuống giữa */
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 100%;
}

/* Chữ màu cam đậm */
.hero .hero-content h1,
.hero .hero-content .sub {
  color: #FF8C00 !important; /* Dark Orange */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Canh giữa nội dung hero */
.hero .hero-content {
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 100%;
}

/* Chữ màu xanh đèn giao thông */
.hero .hero-content h1,
.hero .hero-content .sub {
  color: #00A651 !important; /* Green Traffic Light */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Canh giữa nội dung hero */
.hero .hero-content {
  text-align: center;       /* Canh giữa ngang */
  top: 50%;                 /* Đẩy xuống giữa */
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 100%;
}

/* Chữ màu vàng đậm */
.hero .hero-content h1,
.hero .hero-content .sub {
  color: #FFD700 !important; /* vàng gold */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ===== HLX bandbar ===== */
.hlx-bandbar{position:relative;height:10px;border-radius:6px;background:#eee;overflow:hidden;margin:8px 0 2px}
.hlx-band{position:absolute;top:0;bottom:0}
.hlx-g5{background:#16a34a}   /* 5đ: xanh */
.hlx-g4{background:#22c55e}   /* 4đ: xanh nhạt */
.hlx-g3{background:#a3e635}   /* 3đ: vàng xanh */
.hlx-g2{background:#f59e0b}   /* 2đ: cam */
.hlx-g1{background:#ef4444}   /* 1đ: đỏ */
.hlx-hit{position:absolute;top:-3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:6px solid #111;transform:translateX(-50%)}
.hlx-hit-line{position:absolute;top:0;bottom:0;width:2px;background:#111;transform:translateX(-50%);opacity:.5}

/* dòng mô tả nhỏ */
.hlx-metainfo{font-size:12px;color:#555;margin-bottom:4px}
/* === HLX score band === */
#hlx-flagbar{position:relative;display:inline-block;min-width:220px;height:12px;margin:0 10px;border-radius:6px;overflow:hidden;background:#eee;vertical-align:middle}
#hlx-flagbar .seg{position:absolute;top:0;bottom:0}
#hlx-flagbar .seg-g{left:20%;width:40%;background:#22c55e}
#hlx-flagbar .seg-y{left:12%;width:8%;background:#facc15}
#hlx-flagbar .seg-o{left:6%;width:6%;background:#fb923c}
#hlx-flagbar .seg-r{left:0;width:6%;background:#ef4444}
#hlx-flagbar .seg-y::after{content:"";position:absolute;right:-8%;top:0;bottom:0;width:8%;background:#facc15}
#hlx-flagbar .seg-o::after{content:"";position:absolute;right:-6%;top:0;bottom:0;width:6%;background:#fb923c}
#hlx-flagbar .seg-r::after{content:"";position:absolute;right:-6%;top:0;bottom:0;width:6%;background:#ef4444}
#hlx-flagbar .flag{position:absolute;top:-20px;transform:translateX(-50%);text-align:center}
#hlx-flagbar .flag .flag-pin{display:block;line-height:12px;font-size:16px}
#hlx-flagbar .flag .flag-time{display:block;font-size:12px;font-weight:700;color:#374151}