/* DMCTN Meta Header v1.1.4 — hotfix hamburger iOS + features v1.1.3 */
:root{
  --dmh-h: 104px;
  --dmh-max: 1200px;
  --dmh-gutter: 12px;
  --dmh-band-bg: #1e3f2a;
  --dmh-text: #ffde59;
  --dmh-border-color: #b71c1c;
  --dmh-border-width: 2px;
  --dmh-gap-between: 4px;
  --dmh-sheet-bg: #1e3f2a;
  --dmh-sheet-text: #ffde59;
}
body.dmctn-meta-header-active{ padding-top: var(--dmh-h); }
@media (min-width:768px){ body.dmctn-meta-header-active{ padding-top: calc(var(--dmh-h) + 6px);} }

/* Ẩn header gốc */
body.dmctn-hide-native-header header,
body.dmctn-hide-native-header .site-header,
body.dmctn-hide-native-header #header,
body.dmctn-hide-native-header .top-header,
body.dmctn-hide-native-header .topbar,
body.dmctn-hide-native-header .devvn-header{ display:none !important; }

.dmctn-meta-header{ position:fixed; top:0; left:0; right:0; z-index:9999; color:var(--dmh-text); }
.dmh-row{ padding:10px var(--dmh-gutter); background:transparent; }
.dmh-top{ padding-bottom: var(--dmh-gap-between); }
.dmh-search{ padding-top: var(--dmh-gap-between); }
.dmh-inner{ max-width: var(--dmh-max); margin:0 auto; display:flex; align-items:center; gap:12px; }
.dmh-band{ background: var(--dmh-band-bg); border: var(--dmh-border-width) solid var(--dmh-border-color); border-radius:10px; padding:10px; box-shadow:0 2px 0 rgba(0,0,0,.15); }

.dmh-logo{ font-weight:800; color:var(--dmh-text); text-decoration:none; font-size:22px; white-space:nowrap; }
.dmh-icons{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.dmh-ico{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:8px; background: rgba(255,255,255,.12); position:relative; }
.dmh-ico svg{ fill:var(--dmh-text); }
.dmh-burger{ width:36px; height:36px; border-radius:8px; border:none; background: rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; padding:0 8px; cursor:pointer; will-change: transform; }
.dmh-burger span{ display:block; width:22px; height:2px; background:var(--dmh-text); border-radius:2px; }

/* Fallback 3 gạch bằng gradient khi Safari không vẽ span */
.dmh-burger.dmh-fallback span{ display:none; }
.dmh-burger.dmh-fallback::before{
  content:"";
  display:block;
  width:22px; height:14px; border-radius:2px;
  background: repeating-linear-gradient(
     to bottom,
     var(--dmh-text) 0 2px, transparent 2px 7px
  ) center/100% 100% no-repeat;
}

/* Hamburger oscillate: 2s xoay, 1s đứng, 2s ngược, 1s đứng */
@keyframes dmh-oscillate { 
  0%{ transform: rotate(0deg) }
  40%{ transform: rotate(360deg) }
  60%{ transform: rotate(360deg) }
  100%{ transform: rotate(0deg) }
}
.dmh-burger{ animation: dmh-oscillate 5s linear infinite; transform-origin:50% 50%; }
.dmh-burger.dmh-pause{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .dmh-burger{ animation:none; } }

/* Search */
.dmh-search form{ flex:1; display:flex; align-items:center; gap:8px; background:#fff; border-radius:10px; padding:8px 10px; border:1px solid #eee; }
.dmh-search input[type="search"]{ border:none; outline:none; flex:1; font-size:16px; }
.dmh-search button{ border:none; background:var(--dmh-band-bg); color:#fff; width:40px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; }

/* Dim overlay */
.dmh-dim{ content:""; position: fixed; inset:0; background: rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:9998; backdrop-filter:saturate(120%) blur(1px); }
.dmh-dim.show{ opacity:1; pointer-events:auto; }
html.dmh-lock, body.dmh-lock{ overflow:hidden; touch-action:none; overscroll-behavior:contain; }

/* Drawer (optional) */
.dmh-drawer{ position: fixed; inset:0 auto 0 0; width:86%; max-width:360px; transform: translateX(-100%); transition: transform .25s ease; background:var(--dmh-sheet-bg); z-index:10000; box-shadow: 2px 0 16px rgba(0,0,0,.25); will-change: transform; color:var(--dmh-sheet-text); }
.dmh-drawer.open{ transform: translateX(0); }
.dmh-drawer-head{ padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.18); display:flex; justify-content:space-between; align-items:center; background:var(--dmh-sheet-bg); position:sticky; top:0; color:var(--dmh-sheet-text); }
.dmh-drawer-head .dmh-close{ background: rgba(255,255,255,.12); color:var(--dmh-sheet-text); }

/* SHEET kiểu META – nền xanh, chữ vàng */
.dmh-sheet{ position: fixed; left:0; right:0; top: var(--dmh-h); z-index:10000; transform: translateY(-10px); opacity:0; pointer-events:none; transition: all .2s ease; will-change: transform; }
.dmh-sheet.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
.dmh-sheet-wrap{ max-width: var(--dmh-max); margin:0 auto; background:var(--dmh-sheet-bg); border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); overflow:hidden; color:var(--dmh-sheet-text); }
.dmh-sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.18); background:var(--dmh-sheet-bg); position:sticky; top:0; z-index:1; }
.dmh-sheet-head .dmh-sheet-home a{ display:flex; align-items:center; gap:6px; color:var(--dmh-sheet-text); text-decoration:none; font-weight:600; }
.dmh-sheet-head .dmh-close{ border:none; background: rgba(255,255,255,.12); padding:6px 10px; border-radius:6px; color:var(--dmh-sheet-text); cursor:pointer; }
.dmh-sheet-body{ max-height: calc(100vh - var(--dmh-h) - 24px); overflow:auto; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.dmh-sheet-title{ padding:12px 14px; font-weight:700; color:var(--dmh-sheet-text); letter-spacing:.2px; opacity:.92; }

/* Cây danh mục */
.dmh-cat, .dmh-sub{ list-style:none; margin:0; padding:0; }
.dmh-cat > li > a,
.dmh-sub > li > a{
  display:flex; align-items:center; gap:8px;
  padding:14px 14px; font-size:16px; line-height:1.35;
  border-bottom:1px solid rgba(255,255,255,.12); 
  color:var(--dmh-sheet-text); text-decoration:none;
  transition:background .12s ease, transform .06s ease;
}
.dmh-cat li a::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#fff; opacity:.28; margin-right:2px;
}
.dmh-cat li a:hover{ background: rgba(255,255,255,.06); }
.dmh-cat li a:active{ transform:scale(.99); }
.dmh-sub{ padding-left:10px; background: rgba(255,255,255,.03); }

/* Grid cột khi màn lớn */
@media (min-width:768px){
  .dmh-cat{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmh-sub{ grid-column: 1 / -1; }
}
@media (min-width:1200px){
  .dmh-cat{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cart badge */
.dmh-cart-count{ position:absolute; right:-6px; top:-6px; background:#fff; color:var(--dmh-band-bg); font-size:12px; font-weight:700; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; padding:0 3px; }

/* Desktop */
@media (min-width:992px){
  :root{ --dmh-h: 112px; }
  .dmh-logo{ font-size:26px; }
  .dmh-ico{ width:38px; height:38px; }
}