/* HLX CAM NANG UI (v6) - chỉ áp dụng cho Cẩm nang + Trang con (cam/**, tr/**)
   Mục tiêu: bố cục thoáng, chữ nổi, thẻ đẹp, mục lục + thanh đọc bài, không đụng menu/chân trang.
*/
:root{
  --hlx-bg: #f6f8fb;
  --hlx-surface: #ffffff;
  --hlx-text: #0b1b2b;
  --hlx-muted: rgba(11,27,43,.72);
  --hlx-line: rgba(15, 23, 42, .10);
  --hlx-shadow: 0 10px 25px rgba(2,6,23,.08);
  --hlx-shadow2: 0 6px 18px rgba(2,6,23,.10);
  --hlx-blue: #0b3a6e;
  --hlx-blue2: #08305a;
  --hlx-yellow:#ffcc33;
  --hlx-yellow2:#ffe08a;
  --hlx-radius: 18px;
  --hlx-radius2: 24px;
  --hlx-max: 1180px;
  --hlx-reading: 780px;
  --hlx-gap: 22px;
}

/* nền chung */
body.hlx-cam-ui{
  background: var(--hlx-bg);
  color: var(--hlx-text);
}

/* container chung */
.hlx-cam-ui .hlx-container{
  max-width: var(--hlx-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* nâng chất cho main: khoảng cách */
.hlx-cam-ui .hlx-cam-main{
  padding: 28px 0 36px;
}

/* HLX v25: tiêu đề hero đúng màu (không bóng trắng, không phủ mờ) */
.hlx-cam-ui .hlx-hero h1,
.hlx-cam-ui .hero h1{
  color:#0b3a6e !important;
  text-shadow:none !important;
}
.hlx-cam-ui .hlx-hero .hlx-hero-kicker,
.hlx-cam-ui .hero .hero-kicker,
.hlx-cam-ui .hlx-hero .kicker,
.hlx-cam-ui .hero .kicker{
  color:#0b3a6e !important;
}
.hlx-cam-ui .hlx-hero p,
.hlx-cam-ui .hero p,
.hlx-cam-ui .hlx-hero .breadcrumbs,
.hlx-cam-ui .hero .breadcrumbs{
  color:#0f172a;
}
/* --- CẨM NANG: thanh tìm kiếm + lọc --- */
.hlx-cam-ui .hlx-cam-tools{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
@media (min-width: 768px){
  .hlx-cam-ui .hlx-cam-tools{
    grid-template-columns: 1.25fr 1.75fr;
    align-items: center;
  }
}
.hlx-cam-ui .hlx-search{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(2,6,23,.18);
}
.hlx-cam-ui .hlx-search-ico{opacity:.95}
.hlx-cam-ui .hlx-search input{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a !important;
  font-size: 15px;
}
.hlx-cam-ui .hlx-search input::placeholder{color: rgba(15,23,42,.55)}

.hlx-cam-ui .hlx-filters{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.hlx-cam-ui .hlx-chip{
  user-select:none;
  cursor:pointer;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.hlx-cam-ui .hlx-chip:hover{transform: translateY(-1px); background: rgba(255,255,255,.16)}
.hlx-cam-ui .hlx-chip.is-on{
  background: rgba(255,204,51,.22);
  border-color: rgba(255,204,51,.45);
  color: #0f172a;
}

/* --- Dải nổi bật --- */
.hlx-cam-ui .hlx-cam-stats{ padding: 16px 0 6px; }
.hlx-cam-ui .hlx-stat-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 1024px){
  .hlx-cam-ui .hlx-stat-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.hlx-cam-ui .hlx-stat{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--hlx-line);
  border-radius: var(--hlx-radius);
  padding: 14px 14px 12px;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.hlx-cam-ui .hlx-stat .n{
  font-size: 24px;
  font-weight: 800;
  color: var(--hlx-blue);
  letter-spacing: -0.02em;
}
.hlx-cam-ui .hlx-stat .t{
  margin-top: 4px;
  font-size: 13px;
  color: var(--hlx-muted);
}

/* --- Lưới thẻ bài --- */
.hlx-cam-ui .hlx-card-grid{
  margin-top: 18px;
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .hlx-cam-ui .hlx-card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
}
@media (min-width: 1200px){
  .hlx-cam-ui .hlx-card-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.hlx-cam-ui .hlx-card{
  background: var(--hlx-surface);
  border: 1px solid var(--hlx-line);
  border-radius: var(--hlx-radius2);
  overflow: hidden;
  box-shadow: var(--hlx-shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hlx-cam-ui .hlx-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(2,6,23,.12);
  border-color: rgba(255,204,51,.45);
}
.hlx-cam-ui .hlx-card__thumb{
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(11,42,74,.20), rgba(255,204,51,.14));
}
.hlx-cam-ui .hlx-card__thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.hlx-cam-ui .hlx-card__body{ padding: 14px 14px 12px; }
.hlx-cam-ui .hlx-card__meta{
  display:flex; gap:8px; flex-wrap: wrap;
  align-items:center;
  font-size: 12px;
  color: rgba(11,27,43,.68);
}
.hlx-cam-ui .hlx-badge{
  background: rgba(255,204,51,.18);
  border: 1px solid rgba(255,204,51,.35);
  color: var(--hlx-blue);
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
}
.hlx-cam-ui .hlx-card__title{
  margin: 10px 0 8px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hlx-text);
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 44px;
}
.hlx-cam-ui .hlx-card__desc{
  color: rgba(11,27,43,.74);
  font-size: 13px;
  line-height: 1.55;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 60px;
}
.hlx-cam-ui .hlx-card__actions{
  margin-top: 12px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
}
.hlx-cam-ui .hlx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid var(--hlx-line);
  background: #fff;
  color: var(--hlx-blue);
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}
.hlx-cam-ui .hlx-btn:hover{ transform: translateY(-1px); border-color: rgba(255,204,51,.55); }
.hlx-cam-ui .hlx-btn.is-primary{
  background: linear-gradient(135deg, var(--hlx-yellow), var(--hlx-yellow2));
  border-color: rgba(255,204,51,.55);
  color: var(--hlx-blue);
}

/* phân trang */
.hlx-cam-ui .hlx-pagination{
  margin: 16px 0 0;
  display:flex;
  justify-content:center;
  gap: 8px;
  flex-wrap: wrap;
}
.hlx-cam-ui .hlx-page{
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid var(--hlx-line);
  background: #fff;
  color: var(--hlx-blue);
  font-weight: 800;
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.hlx-cam-ui .hlx-page.is-on{
  background: rgba(11,42,74,.92);
  color: #0f172a;
  border-color: rgba(11,42,74,.92);
}

/* CTA mini */
.hlx-cam-ui .hlx-cta-mini{
  margin-top: 16px;
  background: linear-gradient(135deg, rgba(11,42,74,.96), rgba(18,62,107,.92));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--hlx-radius2);
  padding: 16px;
  display:flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
}
.hlx-cam-ui .hlx-cta-mini .h{
  color:#fff;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.hlx-cam-ui .hlx-cta-mini .p{
  color: rgba(255,255,255,.86);
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
}
.hlx-cam-ui .hlx-cta-mini__actions{display:flex; gap:10px; flex-wrap: wrap}

/* --- TRANG CON: khung đọc bài + mục lục --- */
.hlx-cam-ui.hlx-cam-article .hlx-cam-main{
  padding-top: 22px;
}
.hlx-article-shell{
  max-width: var(--hlx-max);
  margin: 0 auto;
  padding: 0 16px;
}
.hlx-article-layout{
  display: grid;
  gap: var(--hlx-gap);
}
@media (min-width: 1100px){
  .hlx-article-layout{ grid-template-columns: minmax(0,1fr) 320px; align-items: start; }
}
.hlx-article-card{
  background: var(--hlx-surface);
  border: 1px solid var(--hlx-line);
  border-radius: var(--hlx-radius2);
  box-shadow: var(--hlx-shadow);
  overflow: hidden;
}
.hlx-article-inner{
  padding: 18px 18px 10px;
}
.hlx-crumb{
  font-size: 12px;
  color: rgba(11,27,43,.68);
  margin-bottom: 8px;
}
.hlx-crumb a{ color: rgba(11,27,43,.82); text-decoration:none; }
.hlx-crumb a:hover{ text-decoration: underline; }

.hlx-article-title{
  font-size: 28px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--hlx-text);
}
@media (max-width: 480px){
  .hlx-article-title{ font-size: 24px; }
}
.hlx-article-meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(11,27,43,.62);
  font-size: 13px;
}
.hlx-article-hero{
  margin-top: 14px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .10);
}
.hlx-article-hero img{ width:100%; height:auto; display:block; }

/* Typography */
.hlx-cam-ui .hlx-prose{
  max-width: var(--hlx-reading);
  margin: 14px auto 0;
  font-size: 17px;
  line-height: 1.9;
  color: rgba(11,27,43,.86);
}
.hlx-cam-ui .hlx-prose h2,
.hlx-cam-ui .hlx-prose h3,
.hlx-cam-ui .hlx-prose h4{
  color: var(--hlx-text);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 26px 0 12px;
}
.hlx-cam-ui .hlx-prose h2{ font-size: 22px; }
.hlx-cam-ui .hlx-prose h3{ font-size: 18px; }
.hlx-cam-ui .hlx-prose p{ margin: 0 0 14px; }
.hlx-cam-ui .hlx-prose ul,
.hlx-cam-ui .hlx-prose ol{ padding-left: 20px; margin: 0 0 14px; }
.hlx-cam-ui .hlx-prose li{ margin: 6px 0; }
.hlx-cam-ui .hlx-prose blockquote{
  margin: 18px 0;
  padding: 14px 14px 14px 16px;
  border-left: 4px solid rgba(255,204,51,.65);
  background: rgba(255,204,51,.10);
  border-radius: 14px;
  color: rgba(11,27,43,.86);
}
.hlx-cam-ui .hlx-prose table{
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.hlx-cam-ui .hlx-prose th,
.hlx-cam-ui .hlx-prose td{
  border: 1px solid rgba(15, 23, 42, .10);
  padding: 10px;
  vertical-align: top;
}
.hlx-cam-ui .hlx-prose th{
  background: rgba(11,42,74,.06);
  font-weight: 900;
}

/* TOC */
.hlx-toc{
  position: sticky;
  top: 88px;
}
.hlx-toc-card{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--hlx-line);
  border-radius: var(--hlx-radius2);
  box-shadow: var(--hlx-shadow2);
  overflow:hidden;
}
.hlx-toc-head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.hlx-toc-title{
  font-weight: 950;
  color: var(--hlx-blue);
  font-size: 14px;
}
.hlx-toc-toggle{
  display:none;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
}
.hlx-toc-body{
  padding: 10px 10px 12px;
  max-height: calc(100vh - 170px);
  overflow: auto;
}
.hlx-toc a{
  display:block;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(11,27,43,.86);
  font-size: 13px;
  line-height: 1.3;
}
.hlx-toc a:hover{ background: rgba(11,42,74,.06); }
.hlx-toc a.is-on{
  background: rgba(255,204,51,.18);
  border: 1px solid rgba(255,204,51,.35);
}
.hlx-toc .lvl-3{ padding-left: 20px; font-size: 12px; opacity: .92; }

/* mobile TOC as drawer */
@media (max-width: 1099px){
  .hlx-toc{ position: fixed; left: 14px; right: 14px; bottom: 14px; top: auto; z-index: 9999; }
  .hlx-toc-card{ box-shadow: 0 22px 50px rgba(2,6,23,.25); }
  .hlx-toc-toggle{ display:inline-flex; }
  .hlx-toc-body{ display:none; }
  .hlx-toc.is-open .hlx-toc-body{ display:block; }
}

/* related */
.hlx-related{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, .10);
}
.hlx-related h2{
  font-size: 18px;
  font-weight: 950;
  margin: 0 0 12px;
  color: var(--hlx-text);
}
.hlx-related-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .hlx-related-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.hlx-related-item{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.92);
  text-decoration:none;
  color: var(--hlx-text);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.hlx-related-item:hover{ border-color: rgba(255,204,51,.45); }
.hlx-related-thumb{
  width: 112px;
  flex: 0 0 112px;
  aspect-ratio: 16/10;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(11,42,74,.08);
}
.hlx-related-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hlx-related-item .t{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.3;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.hlx-related-item .m{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(11,27,43,.72);
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}

/* nút quay lại */
.hlx-back{
  margin-top: 12px;
  display:flex;
  justify-content:center;
}

/* Thanh tiến độ đọc */
#hlx-readbar{
  position: fixed;
  left: 0; right: 0;
  top: 0;
  height: 3px;
  z-index: 10000;
  background: rgba(2,6,23,.08);
}
#hlx-readbar > i{
  display:block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hlx-yellow), rgba(255,204,51,.55));
}

/* Nút nổi liên hệ */
.hlx-fab{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.hlx-fab a{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 950;
  font-size: 13px;
  box-shadow: 0 18px 40px rgba(2,6,23,.22);
  border: 1px solid rgba(255,255,255,.18);
}
.hlx-fab .call{ background: rgba(11,42,74,.96); color:#fff; }
.hlx-fab .zalo{ background: linear-gradient(135deg, var(--hlx-yellow), var(--hlx-yellow2)); color: var(--hlx-blue); }
.hlx-fab small{ font-weight: 800; opacity:.92; }

/* không áp tính năng “đọc bài” cho trang in nhanh */
body.hlx-print #hlx-readbar,
body.hlx-print .hlx-toc,
body.hlx-print .hlx-fab{ display:none !important; }


/* TƯƠNG THÍCH LỚP TIỆN ÍCH (không dùng CDN) */
.hlx-cam-ui .container{max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;}
.hlx-cam-ui .mx-auto{margin-left:auto; margin-right:auto;}
.hlx-cam-ui .w-full{width:100%;}
.hlx-cam-ui .h-full{height:100%;}
.hlx-cam-ui .min-h-screen{min-height:100vh;}
.hlx-cam-ui .relative{position:relative;}
.hlx-cam-ui .absolute{position:absolute;}
.hlx-cam-ui .sticky{position:sticky;}
.hlx-cam-ui .top-0{top:0;}
.hlx-cam-ui .z-50{z-index:50;}
.hlx-cam-ui .block{display:block;}
.hlx-cam-ui .hidden{display:none;}
.hlx-cam-ui .inline-flex{display:inline-flex;}
.hlx-cam-ui .flex{display:flex;}
.hlx-cam-ui .flex-col{flex-direction:column;}
.hlx-cam-ui .flex-wrap{flex-wrap:wrap;}
.hlx-cam-ui .items-center{align-items:center;}
.hlx-cam-ui .justify-between{justify-content:space-between;}
.hlx-cam-ui .justify-center{justify-content:center;}
.hlx-cam-ui .grid{display:grid;}
.hlx-cam-ui .gap-2{gap:8px;}
.hlx-cam-ui .gap-3{gap:12px;}
.hlx-cam-ui .gap-4{gap:16px;}
.hlx-cam-ui .gap-5{gap:20px;}
.hlx-cam-ui .gap-6{gap:24px;}
.hlx-cam-ui .p-2{padding:8px;}
.hlx-cam-ui .p-3{padding:12px;}
.hlx-cam-ui .p-4{padding:16px;}
.hlx-cam-ui .p-5{padding:20px;}
.hlx-cam-ui .p-6{padding:24px;}
.hlx-cam-ui .p-8{padding:32px;}
.hlx-cam-ui .px-3{padding-left:12px; padding-right:12px;}
.hlx-cam-ui .px-4{padding-left:16px; padding-right:16px;}
.hlx-cam-ui .py-1{padding-top:4px; padding-bottom:4px;}
.hlx-cam-ui .py-2{padding-top:8px; padding-bottom:8px;}
.hlx-cam-ui .py-3{padding-top:12px; padding-bottom:12px;}
.hlx-cam-ui .py-4{padding-top:16px; padding-bottom:16px;}
.hlx-cam-ui .pt-16{padding-top:64px;}
.hlx-cam-ui .pb-16{padding-bottom:64px;}
.hlx-cam-ui .mt-2{margin-top:8px;}
.hlx-cam-ui .mt-4{margin-top:16px;}
.hlx-cam-ui .mt-6{margin-top:24px;}
.hlx-cam-ui .mt-10{margin-top:40px;}
.hlx-cam-ui .mb-6{margin-bottom:24px;}
.hlx-cam-ui .mb-8{margin-bottom:32px;}
.hlx-cam-ui .rounded-full{border-radius:999px;}
.hlx-cam-ui .rounded-lg{border-radius:12px;}
.hlx-cam-ui .rounded-xl{border-radius:16px;}
.hlx-cam-ui .rounded-2xl{border-radius:20px;}
.hlx-cam-ui .border{border-width:1px; border-style:solid; border-color: rgba(15, 23, 42, .12);}
.hlx-cam-ui .shadow{box-shadow: 0 10px 22px rgba(2,6,23,.08);}
.hlx-cam-ui .shadow-lg{box-shadow: 0 18px 40px rgba(2,6,23,.18);}
.hlx-cam-ui .text-xs{font-size:12px; line-height:1.5;}
.hlx-cam-ui .text-sm{font-size:14px; line-height:1.6;}
.hlx-cam-ui .text-base{font-size:16px; line-height:1.7;}
.hlx-cam-ui .text-lg{font-size:18px; line-height:1.7;}
.hlx-cam-ui .text-xl{font-size:20px; line-height:1.6;}
.hlx-cam-ui .font-semibold{font-weight:600;}
.hlx-cam-ui .font-bold{font-weight:700;}
.hlx-cam-ui .font-extrabold{font-weight:800;}
.hlx-cam-ui .leading-relaxed{line-height:1.9;}
.hlx-cam-ui .leading-tight{line-height:1.25;}
.hlx-cam-ui .tracking-tight{letter-spacing:-0.02em;}
.hlx-cam-ui .tracking-wide{letter-spacing:.04em;}
.hlx-cam-ui .tracking-widest{letter-spacing:.15em;}
.hlx-cam-ui .overflow-hidden{overflow:hidden;}
.hlx-cam-ui .object-cover{object-fit:cover;}
.hlx-cam-ui .aspect-video{aspect-ratio:16/9;}
.hlx-cam-ui .line-clamp-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.hlx-cam-ui .line-clamp-3{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.hlx-cam-ui .bg-slate-950{background:#020617;}
.hlx-cam-ui .bg-slate-900{background:#0f172a;}
.hlx-cam-ui .bg-slate-800{background:#1e293b;}
.hlx-cam-ui .bg-slate-700{background:#334155;}
.hlx-cam-ui .bg-slate-50{background:#f8fafc;}
.hlx-cam-ui .text-slate-100{color:#f1f5f9;}
.hlx-cam-ui .text-slate-200{color:#e2e8f0;}
.hlx-cam-ui .text-slate-300{color:#cbd5e1;}
.hlx-cam-ui .text-slate-500{color:#64748b;}
.hlx-cam-ui .text-slate-600{color:#475569;}
.hlx-cam-ui .text-slate-700{color:#334155;}
.hlx-cam-ui .text-slate-950{color:#020617;}
.hlx-cam-ui .text-white{color:#fff;}
.hlx-cam-ui .text-white\/70{color:rgba(255,255,255,0.7);}
.hlx-cam-ui .text-white\/80{color:rgba(255,255,255,0.8);}
.hlx-cam-ui .bg-white\/5{background:rgba(255,255,255,0.05);}
.hlx-cam-ui .bg-white\/10{background:rgba(255,255,255,0.1);}
.hlx-cam-ui .bg-white\/15{background:rgba(255,255,255,0.15);}
.hlx-cam-ui .bg-white\/20{background:rgba(255,255,255,0.2);}
.hlx-cam-ui .border-white\/10{border-color:rgba(255,255,255,0.1);}
.hlx-cam-ui .border-white\/15{border-color:rgba(255,255,255,0.15);}
.hlx-cam-ui .border-white\/20{border-color:rgba(255,255,255,0.2);}
.hlx-cam-ui .w-2{width:8px;}
.hlx-cam-ui .w-4{width:16px;}
.hlx-cam-ui .w-5{width:20px;}
.hlx-cam-ui .w-10{width:40px;}
.hlx-cam-ui .h-2{height:8px;}
.hlx-cam-ui .h-4{height:16px;}
.hlx-cam-ui .h-5{height:20px;}
.hlx-cam-ui .h-10{height:40px;}
.hlx-cam-ui .grid-cols-1{grid-template-columns: repeat(1,minmax(0,1fr));}
.hlx-cam-ui .grid-cols-2{grid-template-columns: repeat(2,minmax(0,1fr));}
.hlx-cam-ui .grid-cols-3{grid-template-columns: repeat(3,minmax(0,1fr));}
.hlx-cam-ui .grid-cols-4{grid-template-columns: repeat(4,minmax(0,1fr));}
.hlx-cam-ui .bg-amber-300{background:#fcd34d;}
.hlx-cam-ui .bg-amber-400{background:#fbbf24;}
.hlx-cam-ui .text-amber-200{color:#fde68a;}
.hlx-cam-ui .text-amber-300{color:#fcd34d;}
.hlx-cam-ui .bg-white{background:#fff;}
.hlx-cam-ui .bg-black\/20{background: rgba(0,0,0,.20);}
.hlx-cam-ui .bg-white\/60{background:rgba(255,255,255,0.6);}
.hlx-cam-ui .bg-white\/70{background:rgba(255,255,255,0.7);}
.hlx-cam-ui .bg-slate-900\/40{background:rgba(15,23,42,0.4);}
.hlx-cam-ui .bg-slate-900\/45{background:rgba(15,23,42,0.45);}
.hlx-cam-ui .bg-slate-950\/40{background:rgba(2,6,23,0.4);}
.hlx-cam-ui .bg-slate-950\/70{background:rgba(2,6,23,0.7);}
.hlx-cam-ui .bg-slate-950\/75{background:rgba(2,6,23,0.75);}
.hlx-cam-ui .border-b{border-bottom-width:1px; border-bottom-style:solid; border-bottom-color: rgba(15,23,42,.12);}
.hlx-cam-ui .border-slate-200{border-color:#e2e8f0;}
.hlx-cam-ui .gap-1{gap:4px;}
.hlx-cam-ui .gap-10{gap:40px;}
.hlx-cam-ui .h-auto{height:auto;}
.hlx-cam-ui .w-16{width:64px;}
.hlx-cam-ui .w-24{width:96px;}
.hlx-cam-ui .max-w-4xl{max-width: 896px;}
.hlx-cam-ui .max-w-5xl{max-width: 1024px;}
.hlx-cam-ui .max-w-6xl{max-width: 1152px;}
.hlx-cam-ui .max-w-3xl{max-width: 768px;}
.hlx-cam-ui .bg-gradient-to-r{background-image: linear-gradient(90deg, var(--hlx-blue), var(--hlx-yellow));}
.hlx-cam-ui .items-start{align-items:flex-start;}
.hlx-cam-ui .items-end{align-items:flex-end;}
.hlx-cam-ui .leading-normal{line-height:1.6;}
.hlx-cam-ui .flex-row{flex-direction:row;}
.hlx-cam-ui .grid-cols-5{grid-template-columns: repeat(5,minmax(0,1fr));}
.hlx-cam-ui .max-w-full{max-width:100%;}
.hlx-cam-ui .max-w-none{max-width:none;}
.hlx-cam-ui .inline{display:inline;}
.hlx-cam-ui .mx-2{margin-left:8px; margin-right:8px;}
.hlx-cam-ui .p-7{padding:28px;}
.hlx-cam-ui .px-5{padding-left:20px; padding-right:20px;}
.hlx-cam-ui .rounded-3xl{border-radius:28px;}
.hlx-cam-ui .shadow-sm{box-shadow: 0 6px 16px rgba(2,6,23,.10);}
.hlx-cam-ui .text-2xl{font-size:24px; line-height:1.3;}
.hlx-cam-ui .text-3xl{font-size:30px; line-height:1.2;}
.hlx-cam-ui .text-4xl{font-size:36px; line-height:1.15;}
.hlx-cam-ui .text-amber-600{color:#d97706;}
.hlx-cam-ui .text-blue-700{color:#991b1b;}
.hlx-cam-ui .text-sky-700{color:#0369a1;}
.hlx-cam-ui .text-sky-800{color:#075985;}
.hlx-cam-ui .text-slate-200\/80{color:rgba(226,232,240,0.8);}
.hlx-cam-ui .text-slate-200\/85{color:rgba(226,232,240,0.85);}
.hlx-cam-ui .text-slate-200\/90{color:rgba(226,232,240,0.9);}
.hlx-cam-ui .decoration-amber-300{text-decoration-color:#fcd34d;}
.hlx-cam-ui .underline{text-decoration: underline;}
.hlx-cam-ui .no-underline{text-decoration: none;}
.hlx-cam-ui .text-slate-400{color:#94a3b8;}
.hlx-cam-ui .text-slate-800{color:#1e293b;}
.hlx-cam-ui .text-slate-900{color:#0f172a;}
.hlx-cam-ui .border-amber-300{border-color:#fcd34d;}
.hlx-cam-ui .tracking-\[.15em\]{letter-spacing:.15em;}
.hlx-cam-ui .grid-2{display:grid; grid-template-columns: repeat(2,minmax(0,1fr));}
.hlx-cam-ui .focus\:border-amber-300:focus{border-color:#fcd34d;}
.hlx-cam-ui .hover\:bg-amber-300:hover{background:#fcd34d;}
.hlx-cam-ui .hover\:bg-slate-50:hover{background:#f8fafc;}
.hlx-cam-ui .hover\:bg-white:hover{background:#fff;}
.hlx-cam-ui .hover\:bg-white\/10:hover{background:rgba(255,255,255,0.1);}
.hlx-cam-ui .hover\:bg-white\/15:hover{background:rgba(255,255,255,0.15);}
.hlx-cam-ui .hover\:decoration-amber-300:hover{text-decoration-color:#fcd34d;}
.hlx-cam-ui .hover\:no-underline:hover{text-decoration: none;}
.hlx-cam-ui .hover\:text-amber-200:hover{color:#fde68a;}
.hlx-cam-ui .hover\:text-sky-800:hover{color:#075985;}
.hlx-cam-ui .hover\:underline:hover{text-decoration: underline;}
@media (min-width:1024px){.hlx-cam-ui .lg\:flex-row{flex-direction:row;}}
@media (min-width:1024px){.hlx-cam-ui .lg\:grid-cols-2{grid-template-columns: repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.hlx-cam-ui .lg\:grid-cols-3{grid-template-columns: repeat(3,minmax(0,1fr));}}
@media (min-width:1024px){.hlx-cam-ui .lg\:grid-cols-4{grid-template-columns: repeat(4,minmax(0,1fr));}}
@media (min-width:1024px){.hlx-cam-ui .lg\:grid-cols-5{grid-template-columns: repeat(5,minmax(0,1fr));}}
@media (min-width:768px){.hlx-cam-ui .md\:flex-row{flex-direction:row;}}
@media (min-width:768px){.hlx-cam-ui .md\:grid-cols-2{grid-template-columns: repeat(2,minmax(0,1fr));}}
@media (min-width:768px){.hlx-cam-ui .md\:grid-cols-3{grid-template-columns: repeat(3,minmax(0,1fr));}}
@media (min-width:768px){.hlx-cam-ui .md\:inline{display:inline;}}
@media (min-width:768px){.hlx-cam-ui .md\:inline-flex{display:inline-flex;}}
@media (min-width:768px){.hlx-cam-ui .md\:items-center{align-items:center;}}
@media (min-width:768px){.hlx-cam-ui .md\:items-start{align-items:flex-start;}}
@media (min-width:768px){.hlx-cam-ui .md\:justify-between{justify-content:space-between;}}
@media (min-width:768px){.hlx-cam-ui .md\:text-2xl{font-size:24px; line-height:1.3;}}
@media (min-width:768px){.hlx-cam-ui .md\:text-3xl{font-size:30px; line-height:1.2;}}
@media (min-width:768px){.hlx-cam-ui .md\:text-4xl{font-size:36px; line-height:1.15;}}
@media (min-width:768px){.hlx-cam-ui .md\:text-base{font-size:16px; line-height:1.7;}}
@media (min-width:768px){.hlx-cam-ui .md\:text-lg{font-size:18px; line-height:1.7;}}
.hlx-cam-ui .placeholder\:text-white\/60::placeholder{color:rgba(15,23,42,0.55);}
@media (min-width:640px){.hlx-cam-ui .sm\:grid-cols-2{grid-template-columns: repeat(2,minmax(0,1fr));}}

/* ==== UI nâng cấp (v20260129v7) ==== */
#hlx-read-progress{position:sticky;top:0;z-index:9998;background:rgba(255,255,255,.06);backdrop-filter:saturate(140%) blur(6px);}
#hlx-read-progress .hlx-read-progress__bar{height:3px;background:linear-gradient(90deg,#f6c343,#ffdd7a);box-shadow:0 0 0 1px rgba(255,221,122,.18);}
.hlx-toc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 14px;margin:18px auto 18px;max-width:1100px;}
.hlx-toc__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.hlx-toc__title{font-weight:800;color:#fff;letter-spacing:.2px;}
.hlx-toc__toggle{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.12);color:#fff;border-radius:12px;padding:6px 10px;font-weight:700}
.hlx-toc__list{margin:0;padding-left:18px}
.hlx-toc__item{margin:6px 0}
.hlx-toc__item.is-h3{margin-left:14px;opacity:.95}
.hlx-toc__link{color:rgba(255,255,255,.92);text-decoration:none}
.hlx-toc__link:hover{text-decoration:underline}
.hlx-toc__link.is-active{color:#ffdd7a;font-weight:800}
@media (max-width: 820px){
  .hlx-toc{margin:12px 12px 16px;border-radius:14px}
}
.hlx-float-cta{position:fixed;right:14px;bottom:14px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.hlx-float-cta__btn{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:48px;border-radius:999px;
  font-weight:900;text-decoration:none;color:#0b1220;box-shadow:0 10px 26px rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18)}
.hlx-float-cta__btn.is-phone{background:linear-gradient(180deg,#ffeaa7,#f6c343)}
.hlx-float-cta__btn.is-zalo{background:linear-gradient(180deg,#bfe1ff,#6cb7ff)}


/* =========================================================
   FIX TƯƠNG PHẢN (CAM NANG + TRANG CON) — 2026-02-01
   Mục tiêu: tránh “nền sáng chữ sáng / nền tối chữ tối”
   KHÔNG đụng tới menu/footer share WP.
   ========================================================= */

.hlx-cam-ui .hlx-hero::before,
.hlx-cam-ui .hero::before{
  opacity: .36 !important;
}

/* Tiêu đề/đoạn dẫn trong hero: ưu tiên chữ đậm, dễ đọc */
.hlx-cam-ui .hlx-hero h1,
.hlx-cam-ui .hero h1{
  color: var(--hlx-hero-title, #0b3a6e) !important;
  text-shadow: none !important;
}
.hlx-cam-ui .hlx-lead{
  color: var(--hlx-hero-sub, #2b3b52) !important;
  text-shadow: none !important;
}

/* Ô tìm kiếm + chip lọc: nền sáng, chữ tối */
.hlx-cam-ui .hlx-search{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(11,83,148,.18) !important;
}
.hlx-cam-ui .hlx-search input{
  color: #0b1b2b !important;
}
.hlx-cam-ui .hlx-search input::placeholder{
  color: rgba(11,27,43,.65) !important;
}
.hlx-cam-ui .hlx-search svg{
  opacity: .95 !important;
}
.hlx-cam-ui .hlx-chip{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(11,83,148,.18) !important;
  color: #0b1b2b !important;
}
.hlx-cam-ui .hlx-chip:hover{
  border-color: rgba(11,83,148,.35) !important;
}
.hlx-cam-ui .hlx-chip.is-active{
  background: #0b5394 !important;
  color: #fff !important;
  border-color: rgba(11,83,148,.65) !important;
}