/* Sinh tự động bởi tools/theme-cu/build.mjs. Đừng sửa tay. */
/*
 * Design tokens – duonglong.vn
 * Nguồn duy nhất cho màu, chữ, khoảng cách, bo góc, đổ bóng, lớp.
 *
 * Hai tầng:
 *   1. Primitive  – đặt tên theo màu/giá trị (--red-600, --space-4). Chỉ dùng trong file này.
 *   2. Semantic   – đặt tên theo vai trò (--color-action). Component chỉ dùng tầng này.
 *
 * Muốn đổi màu một vai trò: sửa đúng dòng semantic của nó, không sửa component.
 * Breakpoint không khai báo được bằng biến CSS trong @media, xem cuối file.
 */

#dlcn-mount {
  /* ---------- Primitive: màu ---------- */

  /* Đỏ thương hiệu – 500 là màu logo */
  --red-50:  #FEF2F2;
  --red-100: #FDE3E3;
  --red-200: #FBC9C9;
  --red-300: #F59E9E;
  --red-400: #EE6363;
  --red-500: #E82020;
  --red-600: #D41A1A;
  --red-700: #B11616;
  --red-800: #8F1717;
  --red-900: #6E1414;

  /* Xanh navy – 600 là màu logo */
  --navy-50:  #EEF0FA;
  --navy-100: #DCE0F4;
  --navy-200: #B9C1E8;
  --navy-300: #8B97D6;
  --navy-400: #5A68BE;
  --navy-500: #3A47A8;
  --navy-600: #283090;
  --navy-700: #212878;
  --navy-800: #1B2061;
  --navy-900: #14184A;

  /* Xám ánh navy */
  --gray-0:   #FFFFFF;
  --gray-50:  #F6F7FA;
  --gray-100: #EDEFF4;
  --gray-200: #DDE1EA;
  --gray-300: #C3C9D6;
  --gray-400: #98A0B3;
  --gray-500: #6B7387;
  --gray-600: #4E5568;
  --gray-700: #373D4E;
  --gray-800: #232836;
  --gray-900: #12151F;

  /* Trạng thái */
  --green-50:  #ECFDF3;
  --green-700: #15803D;
  --amber-50:  #FFF7ED;
  --amber-700: #B45309;

  /* ---------- Semantic: màu ---------- */

  /* Thương hiệu và hành động */
  --color-brand:            var(--red-500);  /* logo, mảng lớn */
  --color-action:           var(--red-600);  /* nút Mua ngay – 5,30:1 với chữ trắng */
  --color-action-hover:     var(--red-700);
  --color-on-action:        var(--gray-0);
  --color-secondary:        var(--navy-600); /* nút phụ, link */
  --color-secondary-hover:  var(--navy-700);
  --color-secondary-bg:     var(--navy-50);  /* nền khối thanh toán, chip đang chọn */

  /* Giá (kiểu A, chốt 25/10) */
  --color-price:            var(--red-600);
  --color-price-compare:    var(--gray-500); /* giá gốc gạch ngang */
  --color-discount-bg:      var(--red-500);  /* badge % giảm – 4,51:1, chữ phải đậm ≥ 600 */
  --color-on-discount:      var(--gray-0);

  /* Chữ */
  --color-text:             var(--gray-900);
  --color-text-muted:       var(--gray-600); /* thông số, mô tả phụ */
  --color-text-subtle:      var(--gray-500); /* placeholder – không dùng cho nội dung cần đọc */
  --color-link:             var(--navy-600);
  --color-link-hover:       var(--navy-700);

  /* Nền và viền */
  --color-surface:          var(--gray-0);
  --color-surface-alt:      var(--gray-50);
  --color-surface-sunken:   var(--gray-100);
  --color-border:           var(--gray-200);
  --color-border-strong:    var(--gray-300);
  --color-overlay:          rgb(18 21 31 / 0.5); /* nền mờ sau bottom sheet */
  --color-action-bg:        var(--red-50);   /* nền chip Flash sale, nút giỏ desktop */
  --color-action-border:    var(--red-200);

  /* Nền tối (chân trang) */
  --color-inverse:          var(--gray-900);
  --color-on-inverse:       var(--gray-200);
  --color-on-inverse-muted: var(--gray-300);
  --color-on-inverse-strong: var(--gray-0);
  --color-border-inverse:   var(--gray-600);

  /* Trạng thái */
  --color-success:          var(--green-700); /* còn hàng */
  --color-success-bg:       var(--green-50);
  --color-warning:          var(--amber-700); /* đặt trước */
  --color-warning-bg:       var(--amber-50);
  --color-danger:           var(--red-700);   /* lỗi */
  --color-danger-bg:        var(--red-50);
  --color-disabled:         var(--gray-500);
  --color-disabled-bg:      var(--gray-100);
  --color-focus:            var(--navy-500);

  /* ---------- Chữ ---------- */

  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --weight-regular: 400;
  --weight-strong:  600; /* chỉ tự host 400 và 600 */

  --text-xs:   0.75rem;                           /* 12px – nhãn, badge */
  --text-sm:   0.875rem;                          /* 14px – thông số */
  --text-base: 1rem;                              /* 16px – nội dung, ô nhập */
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18 → 20px – tên sản phẩm */
  --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20 → 24px – giá */
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);     /* 24 → 32px – tiêu đề trang */

  --leading-tight: 1.3; /* tiêu đề, tên sản phẩm */
  --leading-base:  1.5; /* nội dung */

  /* ---------- Khoảng cách (bội số 4px) ---------- */

  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem;  /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px – lề trang mobile */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */

  --page-gutter: var(--space-4);
  --page-max:    80rem; /* 1280px */
  --tap-min:     2.75rem; /* 44px – vùng chạm tối thiểu */
  --header-compact-h: 4rem; /* 64px – header gọn khi cuộn, mốc cho thanh dính bên dưới */

  /* ---------- Bo góc (vuông vắn, chốt 25/10) ---------- */

  --radius-sm:   4px; /* ô nhập, badge, nút */
  --radius-md:   8px; /* thẻ, khối, bottom sheet */
  --radius-full: 999px; /* chip */

  /* ---------- Đổ bóng ---------- */

  --shadow-sm: 0 1px 2px rgb(18 21 31 / 0.06), 0 1px 3px rgb(18 21 31 / 0.08);
  --shadow-lg: 0 -4px 16px rgb(18 21 31 / 0.10); /* thanh mua dính đáy, bottom sheet */
  --shadow-header: 0 4px 12px rgb(18 21 31 / 0.08); /* header khi cuộn */
  --shadow-menu:   0 12px 24px rgb(18 21 31 / 0.12); /* menu danh mục desktop */

  /* ---------- Lớp (z-index) ---------- */

  --z-sticky:  10; /* thanh mua dính đáy */
  --z-header:  30; /* đầu trang luôn trên nội dung (kể cả nút mua) */
  --z-overlay: 40;
  --z-sheet:   50; /* bottom sheet, menu mobile */
  --z-toast:   60;

  /* ---------- Chuyển động ---------- */

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

/*
 * Breakpoint (mobile trước, dùng min-width). Ghi số trực tiếp trong @media:
 *   tablet   37.5em  (600px)  – lưới sản phẩm 3 cột
 *   desktop  64em    (1024px) – 4 cột
 *   wide     80em    (1280px) – 5 cột, khung tối đa --page-max
 */

/* ---------- Menu danh mục ---------- */

html.catnav-open { overflow: hidden; }
/* Giữ chỗ thanh cuộn: khi mở danh mục (khóa cuộn) trang không bị xô sang phải. */
@media (min-width: 64em) { html { scrollbar-gutter: stable; } }

.catnav { position: fixed; inset: 0; z-index: var(--z-sheet); }
.catnav[hidden] { display: none; }
.catnav-backdrop { display: none; }
.catnav-dialog {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-alt);
  font-size: var(--text-sm);
}

.catnav-head {
  flex: none;
  height: 56px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.catnav-title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-strong); }
.catnav-iconbtn[hidden] + .catnav-title { padding-left: 10px; }
.catnav-iconbtn {
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.catnav-iconbtn[hidden] { display: none; }
.catnav-close { margin-left: auto; }
.catnav .icon { width: 22px; height: 22px; flex: none; }

.catnav-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: var(--space-3); }

.catnav-count { display: none; }
.catnav-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.catnav-tile {
  height: 100%;
  min-height: 76px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}
.catnav-tile:hover { color: var(--color-text); border-color: var(--color-brand); }
.catnav-ic {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-action);
  display: grid;
  place-items: center;
}
.catnav .catnav-ic .icon { width: 16px; height: 16px; }
.catnav-tn { font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: var(--leading-tight); }
.catnav-tc { display: none; }

.catnav-quick {
  list-style: none;
  margin: 14px 0 0;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.catnav-quick:empty { display: none; }
.catnav-quick a {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--color-surface-sunken);
  color: var(--color-text);
  font-weight: var(--weight-strong);
  text-decoration: none;
}
.catnav-quick li:last-child a { border-bottom: 0; }
.catnav .catnav-quick .icon { width: 18px; height: 18px; color: var(--color-action); }

.catnav-call {
  flex: none;
  height: 48px;
  margin: 0 var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--weight-strong);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.catnav-call:hover { color: var(--color-on-action); background: var(--color-action-hover); }
.catnav .catnav-call .icon { width: 20px; height: 20px; }

/* Cấp 2 trên mobile */
.catnav.is-level2 .catnav-groups { display: none; }
.catnav-panel[hidden] { display: none; }
.catnav-panel-head { display: flex; margin-bottom: var(--space-3); }
.catnav-panel-title { /* tiêu đề đã hiện ở thanh trên của menu */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.catnav-all {
  flex: 1;
  min-height: var(--tap-min);
  border-radius: var(--radius-sm);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--weight-strong);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catnav-all:hover { color: var(--color-on-action); background: var(--color-action-hover); }

.catnav-cols {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.catnav-col + .catnav-col { border-top: 1px solid var(--color-surface-sunken); }
.catnav-sub { margin: 0; font-size: inherit; }
.catnav-acc {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.catnav .catnav-acc .icon { width: 20px; height: 20px; color: var(--color-text-muted); transition: transform var(--duration-base) var(--ease-out); }
.catnav-acc[aria-expanded="true"] .icon { transform: rotate(180deg); }
.catnav-sublink { display: none; }
.catnav-th { flex: none; width: 36px; height: 28px; border-radius: var(--radius-sm); background: var(--color-surface-alt); overflow: hidden; display: grid; place-items: center; }
.catnav-th img { width: 100%; height: 100%; object-fit: contain; }
.catnav-acc-t { flex: 1; min-width: 0; }

.catnav-leaves {
  list-style: none;
  margin: 0;
  padding: 0 14px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.catnav-col.is-collapsed .catnav-leaves { display: none; }
.catnav-leaves a {
  height: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  line-height: var(--leading-tight);
  text-decoration: none;
  display: flex;
  align-items: center;
}
.catnav-leaves a:hover { color: var(--color-action-hover); border-color: var(--color-border-strong); }
/* Banner của ngành ở đầu bảng nhóm con. Mobile: trượt ngang, desktop: 2 ô cạnh nhau */
.catnav-bn { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; }
.catnav-bn li { flex: 0 0 86%; scroll-snap-align: start; }
.catnav-bn li:only-child { flex-basis: 100%; }
.catnav-bn a { display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-alt); }
.catnav-bn img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; }

/* Mục có mục con (cấp 4). Mobile: ô như mục thường + nút mũi tên, chạm thì mở chip mục con ngay bên dưới. */
.catnav-l3 { position: relative; }
.catnav-l3.is-open { grid-column: 1 / -1; }
.catnav-leaves .catnav-l3-h { padding-right: 44px; }
.catnav-leaves .catnav-l3.is-open .catnav-l3-h { height: auto; }
.catnav-l3-h .icon { display: none; }
.catnav-l3-tg {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 40px;
  border: 0; background: transparent; color: var(--color-text-muted);
  display: grid; place-items: center; cursor: pointer;
}
.catnav-l3-tg .icon { width: 18px; height: 18px; transition: transform .15s; }
.catnav-l3-tg[aria-expanded="true"] .icon { transform: rotate(180deg); }
.catnav-l4 { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: none; flex-wrap: wrap; gap: var(--space-2); }
.catnav-l3.is-open .catnav-l4 { display: flex; }
.catnav-leaves .catnav-l4 a { min-height: 36px; padding: 4px 10px; font-size: var(--text-sm); }

.catnav-solo {
  min-height: 48px;
  padding: 0 14px;
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.catnav-solo { gap: 10px; }
.catnav .catnav-solo .icon { width: 18px; height: 18px; color: var(--color-text-muted); }

/* Desktop: bảng thả xuống dưới hàng chính của header */
@media (min-width: 64em) {
  .catnav { inset: var(--catnav-top, 0px) 0 0 0; }
  .catnav-backdrop { display: block; position: absolute; inset: 0; background: var(--color-overlay); }
  .catnav-dialog {
    inset: 0 0 auto 0;
    max-height: 100%;
    display: block;
    overflow: auto;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-menu);
  }
  .catnav-head, .catnav-call, .catnav-quick { display: none; }

  .catnav-body {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-4) var(--page-gutter) 20px;
    display: grid;
    grid-template-columns: 404px minmax(0, 1fr);
    gap: 20px;
    overflow: visible;
  }
  .catnav.is-level2 .catnav-groups { display: block; }
  .catnav-groups { align-self: start; padding: 10px; border-radius: var(--radius-md); background: var(--color-surface-alt); }
  .catnav-count {
    display: block;
    margin: 0 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-strong);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .catnav-tile { min-height: 84px; padding: 10px; gap: 6px; }
  .catnav-ic { width: 32px; height: 32px; background: var(--color-surface-sunken); color: var(--color-text); }
  .catnav-tc { display: block; margin-top: auto; font-size: var(--text-xs); color: var(--color-text-muted); }
  .catnav-tile.is-active { border-color: var(--color-action); background: var(--color-action-bg); box-shadow: inset 0 -3px 0 var(--color-action); }
  .catnav-tile.is-active .catnav-ic { background: var(--color-action); color: var(--color-on-action); }
  .catnav-tile.is-active .catnav-tn { color: var(--color-action-hover); }

  .catnav-panel-head { align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); }
  .catnav-panel-title {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-strong);
  }
  .catnav-all { flex: none; min-height: 0; background: none; color: var(--color-action); }
  .catnav-all::after { content: " ›"; white-space: pre; }
  .catnav-all:hover { background: none; color: var(--color-action-hover); text-decoration: underline; }

  .catnav-cols {
    border: 0;
    border-radius: 0;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
  }
  .catnav-col + .catnav-col { border-top: 0; }
  .catnav-acc { display: none; }
  .catnav-sublink, .catnav-solo {
    display: flex;
    min-height: 0;
    padding: 0 0 var(--space-2);
    margin: 0 0 6px;
    border-bottom: 1px solid var(--color-surface-sunken);
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: var(--weight-strong);
    line-height: var(--leading-tight);
    text-decoration: none;
  }
  .catnav-sublink:hover, .catnav-solo:hover { color: var(--color-action); }
  .catnav-sublink, .catnav-solo { min-height: 44px; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .catnav-sublink .catnav-th, .catnav-solo .catnav-th { order: 2; width: 48px; height: 36px; }
  .catnav .catnav-solo .icon { display: none; }
  .catnav-leaves, .catnav-col.is-collapsed .catnav-leaves { display: block; padding: 0; }
  .catnav-leaves a { min-height: 32px; padding: 4px 0; border: 0; border-radius: 0; }
  /* Nhóm "Theo hãng": danh sách hãng chia 2 cột cho đỡ dài */
  .catnav-col.is-brands .catnav-leaves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); align-content: start; }
  .catnav-col.is-brands .catnav-leaves a { overflow-wrap: anywhere; }
  .catnav-leaves a:hover { color: var(--color-action); text-decoration: underline; }
  .catnav-bn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); overflow: visible; margin-bottom: var(--space-4); }
  .catnav-bn a:hover img { opacity: .92; }

  /* Desktop: mục con nổi bên dưới khi trỏ chuột hoặc tab vào, không đẩy danh sách xuống */
  .catnav-l3-tg { display: none; }
  .catnav-leaves .catnav-l3-h { padding-right: 0; justify-content: flex-start; gap: 4px; }
  .catnav-l3-h .icon { display: inline-block; width: 14px; height: 14px; color: var(--color-text-muted); }
  .catnav-l3 .catnav-l4, .catnav-l3.is-open .catnav-l4 {
    position: absolute; top: 100%; left: -12px; z-index: 3;
    width: max-content; min-width: 200px; max-width: 340px;
    padding: var(--space-2) var(--space-3);
    display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); box-shadow: var(--shadow-menu);
    visibility: hidden; opacity: 0; transition: opacity .12s, visibility 0s .12s;
  }
  .catnav-l3:hover .catnav-l4, .catnav-l3:focus-within .catnav-l4 { visibility: visible; opacity: 1; transition-delay: 0s; }
  .catnav-l3:hover > .catnav-l3-h { color: var(--color-action); }
  .catnav-col:nth-child(4n) .catnav-l4 { left: auto; right: -12px; }
  .catnav-leaves .catnav-l4 a { min-height: 32px; padding: 4px 0; white-space: nowrap; }
}

/* ---------- Gắn vào theme cũ ---------- */
#dlcn-mount { --z-sheet: 100000; --font-sans: inherit; }
/* Bỏ ảnh hưởng của Bootstrap/CSS theme cũ (độ ưu tiên 0 nhờ :where, để CSS menu ở trên vẫn thắng) */
:where(#dlcn-mount) .catnav { font-family: inherit; line-height: 1.4; color: var(--color-text); text-align: left; letter-spacing: normal; }
:where(#dlcn-mount) .catnav *, :where(#dlcn-mount) .catnav *::before, :where(#dlcn-mount) .catnav *::after { box-sizing: border-box; }
:where(#dlcn-mount .catnav) :is(h2, h3, h4, p) { font-family: inherit; line-height: var(--leading-tight); color: inherit; margin-top: 0; }
:where(#dlcn-mount .catnav) ul { margin-bottom: 0; }
:where(#dlcn-mount .catnav) a:is(:hover, :focus) { text-decoration: none; }
:where(#dlcn-mount .catnav) :is(a, button):focus { outline: none; }
:where(#dlcn-mount .catnav) :is(a, button):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
:where(#dlcn-mount .catnav) svg { overflow: visible; vertical-align: middle; }
/* Theme cũ tô màu/đổi nét mọi svg: ép lại icon nét của menu */
#dlcn-mount .catnav svg.icon, #dlcn-mount .catnav svg.icon * { fill: none !important; stroke: currentColor !important; stroke-width: 2px !important; }

/* Tắt menu cũ: không hiện khi rê chuột, không phủ nền tối */
.toogle-nav-wrapper .navigation-wrapper, .toogle-nav-wrapper ~ .sticky-overlay { display: none !important; }
.toogle-nav-wrapper, .toggle-nav { cursor: pointer; user-select: none; }
/* Nút đang mở: đổi ngược màu, 3 gạch thành dấu X */
.subheader .toogle-nav-wrapper.dlcn-on, .header_sticky .toogle-nav-wrapper.dlcn-on { background: var(--subheader-background, #d41a1a) !important; color: var(--subheader-color, #fff) !important; }
.dlcn-on .bar { transition: transform .15s, opacity .15s; }
.dlcn-on .menu-bar .bar:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
.dlcn-on .menu-bar .bar:nth-of-type(2) { opacity: 0; }
.dlcn-on .menu-bar .bar:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }