/* ==========================================================================
   chinh.css — HFV Website V2
   Nhận diện: đỏ #ED1C24 + trắng + xám (LUAT-CHUNG.md §4 — KHÔNG đổi tông màu)
   Nguyên tắc: đỏ CHỈ dùng cho CTA và nhấn mạnh. Nền chủ đạo trắng/xám.
   ========================================================================== */

:root {
  --do:        #ED1C24;
  --do-dam:    #C41219;
  --do-nhat:   #FDECEC;
  --trang:     #FFFFFF;
  --den:       #231F20;
  --xam-dam:   #58595B;
  --xam-vua:   #A7A9AC;
  --xam-nhat:  #F1F2F2;
  --xam-vien:  #E1E2E3;
  --thanh-cong:#2A9D8F;
  --canh-bao:  #F4A261;

  --khung:     1200px;
  --cach:      24px;
  --doc-muc:   80px;
  --bo-goc:    5px;
  --chuyen:    150ms ease;

  --font: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--den);
  background: var(--trang);
  padding-bottom: 68px; /* chừa chỗ cho sticky CTA mobile */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--do); text-decoration: none; }
a:hover { color: var(--do-dam); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.25rem; font-weight: 600; }
p  { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

.khung { max-width: var(--khung); margin: 0 auto; padding: 0 var(--cach); }

/* Bỏ qua nội dung — accessibility */
.bo-qua {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--do); color: #fff; padding: 10px 16px;
}
.bo-qua:focus { left: 8px; top: 8px; }

/* ============================ NÚT ============================ */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px;
  border: 1.5px solid transparent; border-radius: var(--bo-goc);
  font-size: .95rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background var(--chuyen), color var(--chuyen), border-color var(--chuyen);
  text-align: center;
}
.nut-chinh { background: var(--do); color: #fff; border-color: var(--do); }
.nut-chinh:hover { background: var(--do-dam); border-color: var(--do-dam); color: #fff; }
.nut-phu { background: var(--den); color: #fff; border-color: var(--den); }
.nut-phu:hover { background: #000; color: #fff; }
.nut-rong { background: transparent; color: var(--den); border-color: var(--xam-vua); }
.nut-rong:hover { border-color: var(--do); color: var(--do); }
.nut-dien-thoai { background: var(--trang); color: var(--den); border-color: var(--xam-vien); }
.nut-dien-thoai:hover { border-color: var(--do); color: var(--do); }
.nut-dien-thoai .nut-icon { color: var(--do); }
.nut-zalo { background: #0068FF; color: #fff; border-color: #0068FF; }
.nut-zalo:hover { background: #0055d4; color: #fff; }
.nut-day { width: 100%; }
.nut:focus-visible { outline: 2px solid var(--do); outline-offset: 2px; }

/* ============================ HEADER ============================ */
.dau-trang {
  position: sticky; top: 0; z-index: 100;
  background: var(--trang); border-bottom: 1px solid var(--xam-vien);
}
.dau-trang.da-cuon { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.dau-trang .khung { display: flex; align-items: center; gap: 16px; min-height: 72px; }

.logo { display: flex; flex-direction: row; align-items: center; gap: 10px; line-height: 1.15; }
.logo-anh { display: block; height: 42px; width: auto; }
.logo-phu { white-space: nowrap; }
@media (max-width: 767px) { .logo-phu { display: none; } .dau-trang .logo-anh { height: 38px; } }
.ngan-keo-dau .logo-anh { height: 36px; }
.logo-anh-chan { height: 48px; margin-bottom: 14px; }
.logo-chu { font-size: 1.6rem; font-weight: 800; color: var(--do); letter-spacing: -.5px; }
.logo-phu { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: var(--xam-dam); }

.menu-chinh { margin-left: auto; }
.menu-chinh > ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.menu-chinh > ul > li { position: relative; }
.menu-chinh > ul > li > a {
  display: block; padding: 10px 12px; color: var(--den);
  font-size: .93rem; font-weight: 600; border-radius: var(--bo-goc);
}
.menu-chinh > ul > li > a:hover { background: var(--xam-nhat); color: var(--do); }
.menu-con {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--xam-vien); border-radius: var(--bo-goc);
  box-shadow: 0 8px 24px rgba(0,0,0,.10); padding: 8px;
  display: none; z-index: 110;
}
.menu-chinh li.co-con:hover .menu-con,
.menu-chinh li.co-con:focus-within .menu-con { display: block; }
.menu-con a { display: block; padding: 8px 10px; font-size: .9rem; color: var(--den); border-radius: 4px; }
.menu-con a:hover { background: var(--do-nhat); color: var(--do); }

.dau-trang-cta { display: flex; gap: 10px; align-items: center; margin-left: 8px; }

/* Nút hamburger */
.nut-menu {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: transparent; border: 1px solid var(--xam-vien); border-radius: var(--bo-goc); cursor: pointer;
}
.nut-menu span { display: block; height: 2px; background: var(--den); border-radius: 2px; }

/* ============================ DRAWER ============================ */
.ngan-keo { position: fixed; inset: 0; z-index: 200; }
.ngan-keo[hidden] { display: none; }
.ngan-keo-nen { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.ngan-keo-noi {
  position: relative; width: min(88vw, 360px); height: 100%;
  background: #fff; display: flex; flex-direction: column;
  overflow-y: auto; padding: 16px;
}
.ngan-keo-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.nut-dong {
  width: 44px; height: 44px; background: var(--xam-nhat); border: 0;
  border-radius: var(--bo-goc); font-size: 1.1rem; cursor: pointer;
}
.ngan-keo-nhom { border-bottom: 1px solid var(--xam-vien); padding: 6px 0; }
.ngan-keo-muc { display: block; padding: 10px 4px; font-weight: 700; color: var(--den); }
.ngan-keo-con a { display: block; padding: 8px 4px 8px 14px; font-size: .9rem; color: var(--xam-dam); }
.ngan-keo-con a:hover { color: var(--do); }
.ngan-keo-cta { display: grid; gap: 10px; margin-top: 16px; }

/* ============================ BREADCRUMB ============================ */
.duong-dan { font-size: .84rem; color: var(--xam-dam); padding: 14px 0; }
.duong-dan a { color: var(--xam-dam); }
.duong-dan a:hover { color: var(--do); }
.duong-dan span { color: var(--xam-vua); margin: 0 6px; }

/* ============================ SECTION ============================ */
.muc { padding: var(--doc-muc) 0; }
.muc-xam { background: var(--xam-nhat); }
.muc-dau { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.muc-dau h2 { margin-bottom: 12px; }
.muc-dau p { color: var(--xam-dam); font-size: 1.05rem; margin: 0; }
.muc-dau--trai { text-align: left; margin-left: 0; }

/* ============================ HERO ============================ */
.hero { background: var(--xam-nhat); padding: 56px 0 64px; }
.hero-luoi { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: 2.65rem; margin-bottom: 16px; }
.hero-vi-tri {
  display: inline-block; background: var(--do); color: #fff;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 12px; border-radius: 3px; margin-bottom: 18px;
}
.hero-phu { font-size: 1.08rem; color: var(--xam-dam); margin-bottom: 24px; }
.hero-nut { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-lien-ket { font-size: .95rem; font-weight: 600; }
.hero-anh img { border-radius: var(--bo-goc); width: 100%; object-fit: cover; }

/* ============================ TRUST BAR ============================ */
.trust { background: #fff; border-bottom: 1px solid var(--xam-vien); }
.trust-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-o {
  display: block; padding: 22px 20px; color: var(--den);
  border-right: 1px solid var(--xam-vien); transition: background var(--chuyen);
}
.trust-o:last-child { border-right: 0; }
.trust-o:hover { background: var(--do-nhat); color: var(--den); }
.trust-o strong { display: block; font-size: .98rem; margin-bottom: 3px; }
.trust-o span { font-size: .85rem; color: var(--xam-dam); }

/* ============================ LƯỚI CARD ============================ */
.luoi { display: grid; gap: 20px; }
.luoi-2 { grid-template-columns: repeat(2, 1fr); }
.luoi-3 { grid-template-columns: repeat(3, 1fr); }
.luoi-4 { grid-template-columns: repeat(4, 1fr); }

.the {
  display: block; background: #fff; border: 1px solid var(--xam-vien);
  border-radius: var(--bo-goc); overflow: hidden; color: var(--den);
  transition: border-color var(--chuyen);
}
.the:hover { border-color: var(--do); color: var(--den); }
.the-anh { aspect-ratio: 4 / 3; background: var(--xam-nhat); overflow: hidden; }
.the-anh img { width: 100%; height: 100%; object-fit: cover; }
.the-noi { padding: 16px; }
.the-noi h3 { font-size: 1rem; margin-bottom: 6px; }
.the-noi p { font-size: .88rem; color: var(--xam-dam); margin: 0 0 8px; }
.the-so { font-size: .8rem; color: var(--do); font-weight: 700; }
.the-ghi-chu { font-size: .82rem; color: var(--xam-vua); }

/* Thẻ giải pháp / dịch vụ (không ảnh) */
.the-phang { padding: 22px; }
.the-phang h3 { font-size: 1.05rem; margin-bottom: 8px; }
.the-phang p { font-size: .9rem; color: var(--xam-dam); margin: 0 0 12px; }
.the-phang .the-mui { color: var(--do); font-weight: 700; font-size: .88rem; }

/* ============================ BẢNG ============================ */
.bang-boc { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px; }
.bang-boc::after { content: ""; display: block; }
table.bang { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.bang th, table.bang td { padding: 11px 13px; border: 1px solid var(--xam-vien); text-align: left; vertical-align: top; }
table.bang th { background: var(--xam-nhat); font-weight: 700; }
table.bang tr:nth-child(even) td { background: #fafafa; }
/* Bảng thông số dạng 2 cột: nhãn | giá trị */
table.thong-so { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.thong-so th, table.thong-so td { padding: 10px 13px; border-bottom: 1px solid var(--xam-vien); text-align: left; }
table.thong-so th { width: 42%; background: var(--xam-nhat); font-weight: 600; }
table.thong-so td { font-variant-numeric: tabular-nums; }

/* Nguồn dữ liệu */
.nguon { font-size: .8rem; color: var(--xam-vua); font-style: italic; margin: -8px 0 24px; }

/* ============================ FAQ ============================ */
.faq-muc { border-bottom: 1px solid var(--xam-vien); }
.faq-hoi {
  width: 100%; text-align: left; background: none; border: 0; padding: 16px 34px 16px 0;
  font-size: 1rem; font-weight: 600; font-family: inherit; color: var(--den);
  cursor: pointer; position: relative;
}
.faq-hoi::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--do); font-size: 1.3rem; font-weight: 700; line-height: 1;
}
.faq-muc.dang-mo .faq-hoi::after { content: "–"; }
.faq-dap { display: none; padding: 0 34px 18px 0; color: var(--xam-dam); font-size: .94rem; }
.faq-muc.dang-mo .faq-dap { display: block; }

/* ============================ CTA CUỐI TRANG ============================ */
.cta-cuoi { background: var(--den); color: #fff; padding: 48px 0; }
.cta-cuoi-noi { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-cuoi h2 { color: #fff; margin-bottom: 6px; font-size: 1.6rem; }
.cta-cuoi p { color: #cfd0d1; margin: 0; }
.cta-cuoi-nut { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-cuoi .nut-dien-thoai { background: transparent; color: #fff; border-color: #555; }
.cta-cuoi .nut-dien-thoai:hover { border-color: #fff; color: #fff; }
.cta-cuoi .nut-dien-thoai .nut-icon { color: var(--do); }

/* ============================ FOOTER ============================ */
.chan-trang { background: #1a1a1a; color: #c9cacc; padding: 52px 0 0; font-size: .9rem; }
.chan-trang-luoi { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1fr; gap: 28px; padding-bottom: 36px; }
.chan-trang h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.chan-trang .logo-chu { color: var(--do); }
.chan-mo-ta { margin: 12px 0; }
.chan-lh a, .chan-link a { color: #c9cacc; }
.chan-lh a:hover, .chan-link a:hover { color: var(--do); }
.chan-link { list-style: none; padding: 0; margin: 0; }
.chan-link li { margin-bottom: 8px; }
.chan-cuoi {
  border-top: 1px solid #333; padding: 18px var(--cach);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: #8b8c8e;
}
.chan-ghi-chu { margin: 0; }

/* ============================ STICKY CTA MOBILE ============================ */
.thanh-cta-mobile {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: #fff; border-top: 1px solid var(--xam-vien);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.cta-muc {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 60px; font-size: .76rem; font-weight: 600;
  color: var(--den); border-right: 1px solid var(--xam-vien);
}
.cta-muc:last-child { border-right: 0; }
.cta-muc span:first-child { font-size: 1.15rem; line-height: 1; }
.cta-muc-noi { background: var(--do); color: #fff; }
.cta-muc-noi:hover { background: var(--do-dam); color: #fff; }

/* ============================ FORM ============================ */
.form-boc { background: #fff; border: 1px solid var(--xam-vien); border-radius: var(--bo-goc); padding: 26px; }
.form-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-o { display: flex; flex-direction: column; gap: 6px; }
.form-o--rong { grid-column: 1 / -1; }
.form-o label { font-size: .88rem; font-weight: 600; }
.form-o .bat-buoc { color: var(--do); }
.form-o input, .form-o select, .form-o textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--xam-vua); border-radius: var(--bo-goc);
  font-family: inherit; font-size: 16px; color: var(--den); background: #fff;
}
.form-o textarea { min-height: 100px; resize: vertical; }
.form-o input:focus, .form-o select:focus, .form-o textarea:focus {
  outline: none; border-color: var(--do); box-shadow: 0 0 0 3px rgba(237,28,36,.12);
}
.form-o.co-loi input, .form-o.co-loi select, .form-o.co-loi textarea { border-color: var(--do); background: var(--do-nhat); }
.form-loi { font-size: .82rem; color: var(--do); font-weight: 600; }
.form-ghi-chu { font-size: .82rem; color: var(--xam-dam); }
.form-radio { display: flex; flex-wrap: wrap; gap: 14px; }
.form-radio label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: .92rem; min-height: 44px; }
.form-radio input { width: auto; min-height: 0; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.hop-thanh-cong { background: var(--xam-nhat); border-left: 4px solid var(--thanh-cong); padding: 16px 18px; margin-bottom: 20px; }
.hop-loi { background: var(--do-nhat); border-left: 4px solid var(--do); padding: 16px 18px; margin-bottom: 20px; }

/* ============================ KHỐI PHỤ ============================ */
.danh-dau { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.danh-dau span {
  background: var(--xam-nhat); border: 1px solid var(--xam-vien);
  padding: 4px 11px; border-radius: 20px; font-size: .8rem; font-weight: 600; color: var(--xam-dam);
}
.hop-nhac { background: var(--xam-nhat); border-left: 4px solid var(--canh-bao); padding: 14px 16px; margin: 0 0 20px; font-size: .9rem; color: var(--xam-dam); }
.hai-cot { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.cot-dinh { position: sticky; top: 92px; }
.ds-dau-dong { list-style: none; padding: 0; }
.ds-dau-dong li { padding: 9px 0 9px 28px; position: relative; border-bottom: 1px solid var(--xam-vien); font-size: .94rem; }
.ds-dau-dong li::before { content: "✓"; position: absolute; left: 0; color: var(--do); font-weight: 700; }
.ds-so { list-style: none; padding: 0; counter-reset: buoc; }
.ds-so li { position: relative; padding: 0 0 18px 44px; counter-increment: buoc; font-size: .95rem; }
.ds-so li::before {
  content: counter(buoc); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%; background: var(--do); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.ds-so li:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 2px; background: var(--xam-vien);
}

.the-tin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.the-tin > div { background: var(--xam-nhat); padding: 14px; border-radius: var(--bo-goc); font-size: .9rem; }

.trong { text-align: center; padding: 64px 0; }
.trong h1 { font-size: 3rem; color: var(--do); margin-bottom: 8px; }

/* ============================ ĐÁP ỨNG ============================ */
@media (max-width: 1023px) {
  .menu-chinh, .dau-trang-cta .nut-dien-thoai .nut-chu { display: none; }
  .nut-menu { display: flex; }
  .dau-trang .khung { min-height: 62px; }
  .dau-trang-cta { margin-left: auto; }
  .hero-luoi { grid-template-columns: 1fr; gap: 28px; }
  .hero { padding: 36px 0 44px; }
  .hero h1 { font-size: 1.95rem; }
  .trust-luoi { grid-template-columns: 1fr 1fr; }
  .trust-o:nth-child(2) { border-right: 0; }
  .trust-o:nth-child(1), .trust-o:nth-child(2) { border-bottom: 1px solid var(--xam-vien); }
  .luoi-3, .luoi-4 { grid-template-columns: repeat(2, 1fr); }
  .chan-trang-luoi { grid-template-columns: 1fr 1fr 1fr; }
  .hai-cot { grid-template-columns: 1fr; gap: 28px; }
  .cot-dinh { position: static; }
  .muc { padding: 48px 0; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.55rem; }
}
@media (max-width: 639px) {
  body { padding-bottom: 62px; }
  .thanh-cta-mobile { display: flex; }
  .khung { padding: 0 16px; }
  .hero h1 { font-size: 1.65rem; }
  .hero-nut .nut { width: 100%; }
  .trust-luoi { grid-template-columns: 1fr; }
  .trust-o { border-right: 0; border-bottom: 1px solid var(--xam-vien); }
  .luoi-2, .luoi-3, .luoi-4 { grid-template-columns: 1fr; }
  .form-luoi { grid-template-columns: 1fr; }
  .form-boc { padding: 18px; }
  .chan-trang-luoi { grid-template-columns: 1fr; gap: 22px; }
  .cta-cuoi-noi { flex-direction: column; align-items: flex-start; }
  .cta-cuoi-nut { width: 100%; }
  .cta-cuoi-nut .nut { flex: 1; }
  .the-tin { grid-template-columns: 1fr; }
  /* Bảng thông số trên mobile: xếp dọc, không tràn ngang */
  table.thong-so, table.thong-so tbody, table.thong-so tr, table.thong-so th, table.thong-so td { display: block; width: 100%; }
  table.thong-so th { border-bottom: 0; padding-bottom: 2px; }
  table.thong-so td { padding-top: 0; margin-bottom: 8px; }
  .muc { padding: 40px 0; }
}
@media print { .dau-trang, .thanh-cta-mobile, .cta-cuoi { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ===== Bộ lọc sản phẩm (Master Spec §8.2) ===== */
.bl{margin:18px 0 22px}
.bl-mo{display:none;width:100%;justify-content:center}
.bl-dem-chon{background:#ED1C24;color:#fff;border-radius:10px;padding:1px 7px;font-size:12px;margin-left:6px}
.bl-bang{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 22px;
  border:1px solid #e5e7eb;border-radius:10px;padding:16px;background:#fafafa}
.bl-bang-dau{display:none}
.bl-nhom{border:0;margin:0;padding:0;min-width:0}
.bl-nhom legend{font-weight:700;font-size:13px;margin-bottom:6px;padding:0;color:#111827}
.bl-o{display:flex;align-items:center;gap:7px;font-size:13.5px;padding:3px 0;cursor:pointer;line-height:1.3}
.bl-o input{width:16px;height:16px;flex:0 0 auto;accent-color:#ED1C24}
.bl-o small{color:#6b7280}
.bl-chan{display:none;gap:10px}
.bl-ghi-chu{margin:10px 0 0;font-size:12.5px;line-height:1.5}
.bl-ket-qua{margin:4px 0 12px;font-size:13.5px;font-weight:600;color:#111827}
.bl-trong{padding:22px;text-align:center;border:1px dashed #d1d5db;border-radius:10px;color:#374151}
.bl-sp[hidden]{display:none!important}

@media (max-width:767px){
  .bl-mo{display:flex}
  .bl-bang{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr;
    max-height:82vh;overflow-y:auto;border-radius:16px 16px 0 0;border:0;
    box-shadow:0 -8px 30px rgba(0,0,0,.25);padding:14px 16px 90px;background:#fff}
  .bl-dang-mo .bl-bang{display:grid}
  .bl-dang-mo::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:59}
  .bl-bang-dau{display:flex;justify-content:space-between;align-items:center;
    position:sticky;top:0;background:#fff;padding:4px 0 10px;border-bottom:1px solid #e5e7eb;margin-bottom:6px}
  .bl-chan{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:61;padding:10px 16px;
    background:#fff;border-top:1px solid #e5e7eb}
  .bl:not(.bl-dang-mo) .bl-chan{display:none}
  .bl-chan .nut{flex:1}
}