/* =============================================================================
   Điện máy Hà Nam Ninh — shared styles (every page).
   Tokens first; components use semantic tokens only. Page CSS: home / shop / product / blog / cart.
   Breakpoints: 1199 / 1023 / 767 / 479.
   ============================================================================= */

/* ---------- Fonts: Be Vietnam Pro, Latin + Vietnamese in one subset per weight ---------- */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/be-vietnam-pro-400.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-600.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/be-vietnam-pro-700.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Primitives (from the HNN logo: navy + gold) */
  --dmh-navy-950: #081127;
  --dmh-navy-900: #0d1b3f;
  --dmh-navy-800: #13265a;
  --dmh-navy-700: #1c3473;
  --dmh-navy-50: #eef1f8;
  --dmh-gold-200: #f3e2b0;
  --dmh-gold-300: #ead39a;
  --dmh-gold-400: #e3c77c;
  --dmh-gold-500: #c9a24a;
  --dmh-gold-700: #8a6a1f;
  --dmh-gold-800: #7a5c17;
  --dmh-red-500: #e3344a;
  --dmh-red-600: #d7263d;
  --dmh-red-700: #b81d31;
  --dmh-ivory: #f7f4ee;
  --dmh-white: #ffffff;
  --dmh-ink-900: #121726;
  --dmh-ink-600: #5c6274;
  --dmh-green-700: #087a3d;
  --dmh-zalo: #0068ff;
  --dmh-zalo-light: #4d9bff;
  --dmh-facebook: #1877f2;
  --dmh-navy-850: #10214f;

  /* Semantic */
  --dmh-bg: var(--dmh-ivory);
  --dmh-surface: var(--dmh-white);
  --dmh-surface-alt: #fbf9f5;
  --dmh-stage: radial-gradient(120% 90% at 50% 35%, #ffffff 0%, #f6f3ec 70%, #efeae0 100%);
  --dmh-text: var(--dmh-ink-900);
  --dmh-text-muted: var(--dmh-ink-600);
  --dmh-text-inverse: var(--dmh-white);
  --dmh-brand: var(--dmh-navy-800);
  --dmh-accent: var(--dmh-gold-500);           /* lines, icons, gold on navy */
  --dmh-accent-text: var(--dmh-gold-800);      /* small gold text on light surfaces */
  --dmh-accent-on-dark: var(--dmh-gold-300);
  --dmh-gold-gradient: linear-gradient(135deg, #f6e7b8 0%, #d9b867 38%, #c9a24a 62%, #9e7b2d 100%);
  --dmh-price: var(--dmh-red-600);
  --dmh-hot-gradient: linear-gradient(135deg, var(--dmh-red-500), var(--dmh-red-700));
  --dmh-line: rgb(19 38 90 / 0.12);
  --dmh-line-strong: rgb(19 38 90 / 0.22);
  --dmh-line-on-dark: rgb(234 211 154 / 0.18);
  --dmh-focus: var(--dmh-gold-500);
  --dmh-success: var(--dmh-green-700);
  --dmh-success-bg: #e9f6ef;
  --dmh-success-ink: #075c2f;
  --dmh-danger-bg: #fdecee;
  --dmh-danger-ink: #8f1626;
  --dmh-on-dark: #dfe4f0;          /* text on navy: 12.7:1 on navy-950 */
  --dmh-on-dark-soft: #c9d0e2;     /* 10.6:1 */
  --dmh-on-dark-muted: #aab4cc;    /* 9.0:1 on navy-950, 6.2:1 on navy-800 */
  --dmh-placeholder: #6b7283;      /* 4.8:1 on white */
  --dmh-stage-solid: #f6f3ec;
  --dmh-stage-edge: #e7dfcf;      /* outer tone of round product stages (bento, feature panels) */
  --dmh-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");

  /* Type */
  --dmh-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dmh-text-sm: 0.875rem;
  --dmh-text-base: 0.9375rem;
  --dmh-text-lg: 1.0625rem;
  --dmh-text-h3: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  --dmh-text-h2: clamp(1.3rem, 1.05rem + 1vw, 1.875rem);
  --dmh-text-h1: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  --dmh-leading-tight: 1.25;
  --dmh-leading: 1.6;
  --dmh-tracking-label: 0.14em;

  /* Layout */
  --dmh-container: 100%;
  --dmh-gutter: clamp(12px, 2.5vw, 48px);
  --dmh-section: clamp(36px, 5vw, 64px);
  --dmh-gap: clamp(10px, 1.4vw, 16px);

  /* Shape & elevation — the "leaf" corner (asymmetric) is the brand signature */
  --dmh-radius-sm: 8px;
  --dmh-radius: 14px;
  --dmh-radius-leaf: 18px 4px 18px 4px;
  --dmh-radius-leaf-sm: 12px 3px 12px 3px;
  --dmh-radius-pill: 999px;
  --dmh-radius-tag: 6px 2px 6px 2px;
  --dmh-shadow-1: 0 1px 2px rgb(13 27 63 / 0.06), 0 2px 8px -2px rgb(13 27 63 / 0.08);
  --dmh-shadow-2: 0 18px 40px -22px rgb(13 27 63 / 0.45);
  --dmh-shadow-lift: 0 2px 6px -2px rgb(13 27 63 / 0.08), 0 28px 50px -30px rgb(13 27 63 / 0.5);
  --dmh-shadow-panel: 0 40px 70px -40px rgb(8 17 39 / 0.55);
  --dmh-shadow-gold: 0 10px 26px -12px rgb(201 162 74 / 0.75);

  /* Motion */
  --dmh-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dmh-dur: 200ms;
  --dmh-dur-slow: 600ms;

  /* Z-index scale */
  --dmh-z-header: 1000;
  --dmh-z-mega: 1010;
  --dmh-z-fab: 1100;
  --dmh-z-drawer: 1500;
  --dmh-z-dialog: 2000;

  --dmh-header-h: 76px;
  --dmh-adminbar: 0px;
}
@media (min-width: 601px) { body.admin-bar { --dmh-adminbar: 46px; } }
@media (min-width: 783px) { body.admin-bar { --dmh-adminbar: 32px; } }

/* Reduced motion = less movement, not a dead page: fades, colour and small hover changes stay (shorter); autoplay,
   shaking, sliding reveals and pointer lag are switched off where they are defined. Windows sets this preference
   when "Show animations in Windows" is off. */
@media (prefers-reduced-motion: reduce) {
  :root { --dmh-dur: 140ms; --dmh-dur-slow: 240ms; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* ---------- Base — Astra's front-end CSS is not loaded (inc/assets.php); this keeps the parts of its
   normalize the design was drawn on (zeroed margins, p 1.75em, lists 1.5em/3em, 600 headings). ---------- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
:where(address, blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, iframe, legend, li, ol, p, pre, ul) { margin: 0; padding: 0; border: 0; font-size: 100%; }
:where(p) { margin-bottom: 1.75em; }
:where(ol, ul) { margin: 0 0 1.5em 3em; }
:where(li > ol, li > ul) { margin-bottom: 0; margin-left: 1.5em; }
:where(button, input, optgroup, select, textarea) { margin: 0; color: inherit; font: inherit; }
:where(button, [type="button"], [type="submit"], [type="reset"]) { cursor: pointer; }
:where(img) { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
:where(table) { width: 100%; border-collapse: collapse; border-spacing: 0; }
:where(hr) { height: 1px; margin-bottom: 1.5em; border: 0; background: var(--dmh-line); }
body.dmh {
  background: var(--dmh-bg);
  color: var(--dmh-text);
  font-family: var(--dmh-font);
  font-size: var(--dmh-text-base);
  line-height: var(--dmh-leading);
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, h5, h6) { clear: both; font-family: var(--dmh-font); font-weight: 600; color: var(--dmh-text); line-height: var(--dmh-leading-tight); letter-spacing: -0.01em; }
:where(h4) { font-size: 1.25rem; }
:where(h5) { font-size: 1.125rem; }
:where(a) { color: var(--dmh-brand); text-decoration: none; text-underline-offset: 3px; }
:where(a:hover) { color: var(--dmh-navy-700); }
::selection { background: var(--dmh-gold-200); color: var(--dmh-ink-900); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--dmh-focus); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; white-space: nowrap; word-wrap: normal !important; }
.skip-link:focus {
  position: fixed !important; /* beats .screen-reader-text's position: absolute !important */
  top: calc(var(--dmh-adminbar) + 8px); left: 8px; z-index: 100000; width: auto; height: auto; margin: 0; padding: 12px 18px;
  clip: auto; clip-path: none; border-radius: var(--dmh-radius-sm); background: var(--dmh-white); color: var(--dmh-navy-900); font-weight: 700; box-shadow: var(--dmh-shadow-2);
}

.dmh-container { width: 100%; max-width: var(--dmh-container); margin-inline: auto; padding-inline: var(--dmh-gutter); }
.dmh-section { padding-block: var(--dmh-section); }
.dmh-section + .dmh-section { padding-top: 0; }

/* ---------- Icons (SVG sprite) ---------- */
.dmh-icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.dmh-icon--fill { fill: currentColor; stroke: none; }

/* ---------- Eyebrow, section head ---------- */
.dmh-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: var(--dmh-tracking-label); text-transform: uppercase;
  color: var(--dmh-accent-text);
}
.dmh-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--dmh-accent); }
.dmh-eyebrow--light { color: var(--dmh-accent-on-dark); }

.dmh-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(14px, 2vw, 22px); }
.dmh-head__title { margin: 4px 0 0; font-size: var(--dmh-text-h2); font-weight: 700; }
.dmh-head__title a { color: inherit; text-decoration: none; }
.dmh-head__more {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px;
  font-size: var(--dmh-text-sm); font-weight: 600; color: var(--dmh-brand); text-decoration: none; white-space: nowrap;
}
.dmh-head__more .dmh-icon { transition: transform var(--dmh-dur) var(--dmh-ease); }
.dmh-head__more:hover .dmh-icon { transform: translateX(3px); }

/* ---------- Buttons ---------- */
.dmh-btn {
  --btn-bg: var(--dmh-brand); --btn-fg: var(--dmh-text-inverse); --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px;
  border: 1px solid var(--btn-border); border-radius: var(--dmh-radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 700 var(--dmh-text-sm)/1.2 var(--dmh-font); letter-spacing: 0.02em; text-decoration: none; text-align: center;
  cursor: pointer; transition: transform var(--dmh-dur) var(--dmh-ease);
}
@media (hover: hover) and (pointer: fine) { .dmh-btn:hover { filter: brightness(1.06); transform: translateY(-1px); } }
.dmh-btn:active { transform: translateY(0); }
.dmh-btn[disabled], .dmh-btn.is-loading { opacity: 0.6; pointer-events: none; }
.dmh-btn--gold { --btn-bg: var(--dmh-gold-gradient); --btn-fg: var(--dmh-navy-900); box-shadow: var(--dmh-shadow-gold); }
.dmh-btn--hot { --btn-bg: var(--dmh-hot-gradient); box-shadow: 0 12px 26px -14px rgb(215 38 61 / 0.85); }
.dmh-btn--line { --btn-bg: transparent; --btn-fg: var(--dmh-brand); --btn-border: var(--dmh-line-strong); }
.dmh-btn--zalo { --btn-bg: var(--dmh-zalo); }
.dmh-btn--block { width: 100%; }
.dmh-btn--lg { min-height: 56px; padding: 12px 26px; font-size: 1rem; }
.dmh-btn__sub { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 400; letter-spacing: 0; opacity: 0.92; }
.dmh-btn--stack { flex-direction: column; gap: 0; }

/* ---------- Chips, badges, price ---------- */
.dmh-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dmh-chips li { padding: 2px 8px; border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-pill); background: var(--dmh-surface-alt); color: var(--dmh-text-muted); font-size: 0.7rem; line-height: 1.5; }
.dmh-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--dmh-radius-pill); font-size: 0.72rem; font-weight: 700; line-height: 1.3; }
.dmh-badge--sale { background: var(--dmh-hot-gradient); color: var(--dmh-white); }
.dmh-badge--gold { background: var(--dmh-gold-gradient); color: var(--dmh-navy-900); }

.dmh-stars {
  --size: 16px; display: inline-block; width: calc(var(--size) * 5); height: var(--size); vertical-align: -2px;
  background: linear-gradient(90deg, var(--dmh-gold-500) calc(var(--rating) * 20%), var(--dmh-line-strong) 0);
  -webkit-mask: var(--dmh-star-mask) 0 0 / var(--size) var(--size) repeat-x; mask: var(--dmh-star-mask) 0 0 / var(--size) var(--size) repeat-x;
}

.dmh-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.dmh-price__now { color: var(--dmh-price); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.dmh-price__old { color: var(--dmh-text-muted); font-size: 0.8rem; }
.dmh-price__off { color: var(--dmh-price); font-size: 0.75rem; font-weight: 700; }
.dmh-price.is-contact .dmh-price__now { color: var(--dmh-brand); }

/* ---------- Header ---------- */
.dmh-header {
  position: sticky; top: var(--dmh-adminbar); z-index: var(--dmh-z-header);
  background:
    radial-gradient(60% 140% at 85% 0%, rgb(201 162 74 / 0.16), transparent 60%),
    linear-gradient(180deg, var(--dmh-navy-800), var(--dmh-navy-850));
  color: var(--dmh-white);
  box-shadow: 0 1px 0 var(--dmh-line-on-dark);
}
.dmh-header__inner { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); min-height: var(--dmh-header-h); }
.dmh-header .dmh-search { max-width: 900px; margin-inline: auto; }

.dmh-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--dmh-white); text-decoration: none; flex: none; }
.dmh-logo img { width: auto; height: 44px; }
.dmh-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.dmh-logo__text small { color: var(--dmh-accent-on-dark); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.dmh-logo__text strong { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.dmh-catbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--dmh-line-on-dark); border-radius: var(--dmh-radius-pill);
  background: rgb(255 255 255 / 0.04); color: var(--dmh-white);
  font: 700 0.78rem/1 var(--dmh-font); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; flex: none;
}
.dmh-catbtn:hover, .dmh-catbtn[aria-expanded="true"] { border-color: var(--dmh-accent); background: rgb(201 162 74 / 0.12); }
.dmh-catbtn .dmh-icon { color: var(--dmh-accent); }

.dmh-search { position: relative; flex: 1 1 auto; min-width: 0; }
.dmh-search__input {
  width: 100%; height: 46px; padding: 0 56px 0 20px;
  border: 1px solid transparent; border-radius: var(--dmh-radius-pill);
  background: var(--dmh-white); color: var(--dmh-text);
  font: 400 var(--dmh-text-base) var(--dmh-font); box-shadow: inset 0 1px 2px rgb(13 27 63 / 0.08);
}
.dmh-search__input::placeholder { color: var(--dmh-placeholder); }
.dmh-search__input:focus { border-color: var(--dmh-accent); outline: none; box-shadow: 0 0 0 3px rgb(201 162 74 / 0.35); }
.dmh-search__btn {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; line-height: 0;
  border: 0; border-radius: 50%; background: var(--dmh-gold-gradient); color: var(--dmh-navy-900); cursor: pointer;
}
.dmh-search__suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: var(--dmh-z-mega);
  margin: 0; padding: 6px; list-style: none; border-radius: var(--dmh-radius); background: var(--dmh-white); color: var(--dmh-text);
  box-shadow: var(--dmh-shadow-2);
}
.dmh-search__suggest[hidden] { display: none; }
.dmh-search__suggest a { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--dmh-radius-sm); color: var(--dmh-text); text-decoration: none; font-size: var(--dmh-text-sm); }
.dmh-search__suggest a:hover, .dmh-search__suggest a[aria-selected="true"] { background: var(--dmh-ivory); }
.dmh-search__suggest img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: var(--dmh-stage); }
.dmh-search__suggest .dmh-price__now { font-size: var(--dmh-text-sm); }
.dmh-search__suggest .is-all a { display: block; text-align: center; font-weight: 600; color: var(--dmh-brand); }

.dmh-hotline { display: inline-flex; align-items: center; gap: 10px; color: var(--dmh-white); text-decoration: none; flex: none; }
.dmh-hotline__icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--dmh-line-on-dark); border-radius: 50%; color: var(--dmh-accent); }
.dmh-hotline__text { display: flex; flex-direction: column; line-height: 1.2; }
.dmh-hotline__text small { color: var(--dmh-on-dark-muted); font-size: 0.7rem; }
.dmh-hotline__text strong { color: var(--dmh-accent-on-dark); font-size: 1rem; letter-spacing: 0.02em; }

.dmh-cartlink { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; color: var(--dmh-white); text-decoration: none; font-size: var(--dmh-text-sm); font-weight: 600; flex: none; }
.dmh-cartlink .dmh-icon { width: 26px; height: 26px; color: var(--dmh-accent); }
.dmh-cartlink__count {
  position: absolute; top: 2px; left: 22px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--dmh-radius-pill); background: var(--dmh-red-600); color: var(--dmh-white);
  font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
}

.dmh-iconbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dmh-white); cursor: pointer; flex: none; }
.dmh-iconbtn .dmh-icon { width: 24px; height: 24px; }
.dmh-iconbtn:hover { background: rgb(255 255 255 / 0.08); }

/* One shared navigation rail: category menu button + editorial links. */
.dmh-feature-nav { position: relative; z-index: calc(var(--dmh-z-header) - 1); /* below the sticky masthead when it scrolls under it */ border-bottom: 1px solid var(--dmh-line); background: var(--dmh-white); }
.dmh-feature-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 2vw, 28px); min-height: 56px; }
.dmh-feature-nav__cats { flex: none; align-self: stretch; display: flex; }
.dmh-feature-nav__cats .dmh-catbtn {
  position: relative; align-self: stretch; min-height: 0; padding: 0 4px; border: 0; border-radius: 0; background: transparent;
  color: var(--dmh-navy-950); font-size: 0.75rem; letter-spacing: 0.12em;
}
.dmh-feature-nav__cats .dmh-catbtn::after { /* gold underline marks the open menu */
  content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--dmh-gold-gradient);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dmh-dur) var(--dmh-ease);
}
.dmh-feature-nav__cats .dmh-catbtn:hover, .dmh-feature-nav__cats .dmh-catbtn[aria-expanded="true"] { border: 0; background: transparent; color: var(--dmh-navy-950); }
.dmh-feature-nav__cats .dmh-catbtn:hover::after, .dmh-feature-nav__cats .dmh-catbtn[aria-expanded="true"]::after { transform: none; }
.dmh-feature-nav__cats .dmh-catbtn .dmh-icon { color: var(--dmh-accent-text); }
.dmh-catbtn__chev { width: 16px; height: 16px; transition: transform var(--dmh-dur) var(--dmh-ease); }
.dmh-catbtn[aria-expanded="true"] .dmh-catbtn__chev { transform: rotate(180deg); }
.dmh-feature-nav__list { display: flex; flex: none; align-items: center; gap: clamp(4px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.dmh-feature-nav__list a {
  position: relative; display: flex; align-items: center; min-height: 42px; padding: 0 6px; color: var(--dmh-brand);
  font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.dmh-feature-nav__list a::after {
  content: ""; position: absolute; right: 6px; bottom: 8px; left: 6px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dmh-dur) var(--dmh-ease);
}
.dmh-feature-nav__list a:hover::after, .dmh-feature-nav__list a[aria-current="page"]::after { transform: none; }
.dmh-feature-nav__list li:first-child a { color: var(--dmh-price); }

/* Category menu: one light, full-width panel under the navigation rail. Plain list on the left, the active
   category's sub-categories in columns, one "Xem tất cả" link, and its best current offer as a product card.
   No numbers, arrows per row, decorative headings or inner scrollbars. */
body.dmh-mega-open::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--dmh-z-header) - 1); background: rgb(8 17 39 / 0.28); pointer-events: none; }
body.dmh-mega-open .dmh-fab { opacity: 0; visibility: hidden; pointer-events: none; }
.dmh-mega-wrap { position: static; }
.dmh-mega {
  --dmh-mega-rail: clamp(220px, 17vw, 280px);
  --dmh-mega-pad: clamp(22px, 2.4vw, 34px);
  position: absolute; top: 100%; right: 0; left: 0; z-index: var(--dmh-z-mega);
  border-top: 1px solid var(--dmh-line); background: var(--dmh-white); color: var(--dmh-text);
  box-shadow: var(--dmh-shadow-panel); animation: dmh-mega-in 260ms var(--dmh-ease) both;
}
.dmh-mega::before { /* thin gold hairline along the top edge */
  content: ""; position: absolute; top: -1px; right: 0; left: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dmh-gold-500) 20%, var(--dmh-gold-500) 80%, transparent); opacity: 0.6;
}
.dmh-mega[hidden] { display: none; }
.dmh-mega__layout { position: relative; padding: var(--dmh-mega-pad) var(--dmh-gutter); }
.dmh-mega__list { width: var(--dmh-mega-rail); margin: 0; padding: 0 clamp(18px, 2vw, 32px) 0 0; border-right: 1px solid var(--dmh-line); list-style: none; }
.dmh-mega__link {
  position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 0 0 20px;
  color: var(--dmh-text-muted); font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: color var(--dmh-dur);
}
.dmh-mega__link::before { /* category-colour dot marks the previewed category */
  content: ""; position: absolute; top: 50%; left: 2px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--tile); opacity: 0; transform: scale(0.3); transition: opacity var(--dmh-dur), transform var(--dmh-dur) var(--dmh-ease);
}
.dmh-mega__link:hover, .dmh-mega__item.is-active > .dmh-mega__link { color: var(--dmh-navy-950); }
.dmh-mega__item.is-active > .dmh-mega__link::before { opacity: 1; transform: none; }
.dmh-mega__panel {
  position: absolute; top: var(--dmh-mega-pad); bottom: var(--dmh-mega-pad); right: var(--dmh-gutter);
  left: calc(var(--dmh-gutter) + var(--dmh-mega-rail) + clamp(24px, 3vw, 48px));
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 20vw, 300px); gap: clamp(24px, 3vw, 56px);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity 240ms var(--dmh-ease), transform 240ms var(--dmh-ease), visibility 240ms;
}
.dmh-mega__panel.is-active { z-index: 1; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.dmh-mega__main { display: flex; flex-direction: column; min-width: 0; }
.dmh-mega__subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 0 clamp(16px, 2.4vw, 40px); margin: 0; padding: 0; list-style: none; }
.dmh-mega__sub { position: relative; display: inline-block; padding: 9px 0; color: var(--dmh-text); font-size: 0.92rem; text-decoration: none; transition: color var(--dmh-dur); }
.dmh-mega__sub::after {
  content: ""; position: absolute; right: 0; bottom: 6px; left: 0; height: 1px; background: var(--dmh-gold-500);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dmh-dur) var(--dmh-ease);
}
.dmh-mega__sub:hover { color: var(--dmh-navy-950); }
.dmh-mega__sub:hover::after { transform: none; }
.dmh-mega__all {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 40px; margin-top: auto; padding-top: 12px;
  color: var(--dmh-accent-text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none;
}
.dmh-mega__all .dmh-icon { width: 16px; height: 16px; transition: transform var(--dmh-dur) var(--dmh-ease); }
.dmh-mega__all:hover .dmh-icon { transform: translateX(4px); }
.dmh-mega__pick {
  display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 14px; border: 1px solid var(--dmh-line);
  border-radius: var(--dmh-radius-leaf); background: var(--dmh-surface-alt); color: var(--dmh-text); text-decoration: none;
  transition: border-color var(--dmh-dur);
}
.dmh-mega__pick:hover { border-color: var(--dmh-gold-500); }
.dmh-mega__pick-label { color: var(--dmh-accent-text); font-size: 0.64rem; font-weight: 700; letter-spacing: var(--dmh-tracking-label); text-transform: uppercase; }
.dmh-mega__pick-media { display: grid; flex: 1 1 auto; min-height: 120px; place-items: center; border-radius: var(--dmh-radius-leaf-sm); background: var(--dmh-stage); overflow: hidden; }
.dmh-mega__pick-media img { width: auto; max-width: 80%; height: auto; max-height: 190px; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dmh-dur-slow) var(--dmh-ease); }
.dmh-mega__pick:hover img { transform: scale(1.05); }
.dmh-mega__pick-name { display: -webkit-box; overflow: hidden; font-size: 0.84rem; font-weight: 600; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dmh-mega__pick .dmh-price__now { font-size: 1rem; }
.dmh-mega__pick .dmh-price__off { display: none; } /* the label already states the discount */
@keyframes dmh-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1199px) {
  .dmh-mega__subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .dmh-mega, .dmh-mega__panel { animation: none; transition: none; }
}

/* Mobile search row */
.dmh-msearch { display: none; padding: 0 var(--dmh-gutter) 10px; background: var(--dmh-navy-850); }

/* Drawer (mobile menu, <dialog>) */
.dmh-drawer {
  position: fixed; inset: 0 auto 0 0; z-index: var(--dmh-z-drawer); width: min(86vw, 360px); height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--dmh-white); color: var(--dmh-text); overflow-y: auto;
}
.dmh-drawer::backdrop { background: rgb(8 17 39 / 0.55); }
.dmh-drawer[open] { animation: dmh-slide-in var(--dmh-dur) var(--dmh-ease); }
@keyframes dmh-slide-in { from { transform: translateX(-100%); } to { transform: none; } }
.dmh-drawer__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; background: var(--dmh-navy-800); color: var(--dmh-white); }
.dmh-drawer__head strong { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dmh-accent-on-dark); }
.dmh-drawer__body { padding: 8px 0 24px; }
.dmh-drawer__link, .dmh-drawer__group summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--dmh-line); color: var(--dmh-text); font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; }
.dmh-drawer__group summary::-webkit-details-marker { display: none; }
.dmh-drawer__group[open] summary .dmh-icon { transform: rotate(180deg); }
.dmh-drawer__group ul { margin: 0; padding: 4px 0 8px; list-style: none; background: var(--dmh-surface-alt); }
.dmh-drawer__group li a { display: block; padding: 10px 28px; color: var(--dmh-text-muted); font-size: var(--dmh-text-sm); text-decoration: none; }
.dmh-drawer__extra { padding: 16px; }
.dmh-drawer__extra a { display: block; padding: 8px 0; color: var(--dmh-brand); font-weight: 600; text-decoration: none; }

/* ---------- Breadcrumbs ---------- */
.dmh-breadcrumbs { padding: 14px 0 0; font-size: 0.8rem; color: var(--dmh-text-muted); }
.dmh-breadcrumbs a { color: var(--dmh-text-muted); text-decoration: none; }
.dmh-breadcrumbs a:hover { color: var(--dmh-brand); text-decoration: underline; }
.dmh-breadcrumbs .breadcrumb_last { color: var(--dmh-text); font-weight: 600; }

/* ---------- Product card ---------- */
.dmh-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--dmh-gap); margin: 0; padding: 0; list-style: none; }
/* Quiet at rest (hairline, product on its stage); on hover the card lifts off the page: the border gives way to a
   soft shadow, the stage warms with the category colour (--tile from the section), the product rises slowly and a
   gold rule draws under the image. Price and specs never get covered. Only opacity/transform animate. */
.dmh-card { --card-tint: var(--tile, var(--dmh-gold-500)); position: relative; z-index: 0; display: flex; min-width: 0; transition: transform 420ms var(--dmh-ease); }
.dmh-card::after { /* hover shadow: only its opacity animates (compositor) */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--dmh-radius-leaf);
  box-shadow: var(--dmh-shadow-lift); opacity: 0; transition: opacity 420ms var(--dmh-ease); pointer-events: none;
}
.dmh-card__inner {
  position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0;
  border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf); background: var(--dmh-surface); overflow: hidden;
  transition: border-color 420ms var(--dmh-ease);
}
.dmh-card__media { position: relative; aspect-ratio: 1; margin: 0; background: var(--dmh-stage); overflow: hidden; isolation: isolate; }
.dmh-card__media::before { /* category glow behind the product (multiply keeps white backgrounds invisible) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 50% at 50% 56%, color-mix(in srgb, var(--card-tint) 26%, transparent), transparent 72%);
  opacity: 0; transform: scale(0.8); transition: opacity 520ms var(--dmh-ease), transform var(--dmh-dur-slow) var(--dmh-ease);
}
.dmh-card__media::after { /* gold rule under the image */
  content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--dmh-gold-gradient);
  transform: scaleX(0); transform-origin: left center; transition: transform 520ms var(--dmh-ease);
}
.dmh-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 11%; mix-blend-mode: multiply; transition: transform var(--dmh-dur-slow) var(--dmh-ease); }
.dmh-card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dmh-card__badges .dmh-badge { padding: 2px 8px; border-radius: var(--dmh-radius-tag); font-size: 0.68rem; letter-spacing: 0.02em; }
.dmh-card__badges .dmh-badge--sale { background: var(--dmh-price); }
.dmh-card__body { display: flex; flex: 1; flex-direction: column; gap: 5px; padding: 13px 15px 15px; }
.dmh-card__brand { color: var(--dmh-accent-text); font-size: 0.64rem; font-weight: 700; letter-spacing: var(--dmh-tracking-label); text-transform: uppercase; }
.dmh-card__title { display: -webkit-box; margin: 0; overflow: hidden; color: var(--dmh-text); font-size: 0.875rem; font-weight: 600; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.8em; transition: color var(--dmh-dur); }
.dmh-card__title a { color: inherit; text-decoration: none; }
.dmh-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable, one link */
.dmh-card__specs { margin: 0; overflow: hidden; color: var(--dmh-text-muted); font-size: 0.72rem; white-space: nowrap; text-overflow: ellipsis; }
.dmh-card .dmh-price { margin-top: auto; padding-top: 6px; }
.dmh-card .dmh-price__off { display: none; } /* the image badge already shows the discount */

/* Quick add: a small frosted round button in the top-right corner (always shown on touch screens, fades in on
   hover for mouse users); its label appears as a tip only when the button itself is hovered. Needs JS. */
.dmh-card__quick {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: none; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 1px solid rgb(19 38 90 / 0.1); border-radius: 50%;
  background: rgb(255 255 255 / 0.92); color: var(--dmh-brand); cursor: pointer; box-shadow: var(--dmh-shadow-1);
  transition: opacity var(--dmh-dur) var(--dmh-ease), transform var(--dmh-dur) var(--dmh-ease), background var(--dmh-dur), color var(--dmh-dur);
}
.js .dmh-card__quick { display: grid; }
.dmh-card__quick .dmh-icon { width: 19px; height: 19px; }
.dmh-card__quick-tip {
  position: absolute; top: 50%; right: calc(100% + 8px); padding: 6px 10px; border-radius: var(--dmh-radius-tag);
  background: var(--dmh-navy-950); color: var(--dmh-white); font: 600 0.7rem/1 var(--dmh-font); white-space: nowrap;
  opacity: 0; transform: translate(6px, -50%); transition: opacity var(--dmh-dur), transform var(--dmh-dur) var(--dmh-ease); pointer-events: none;
}
.dmh-card__quick.is-loading { opacity: 0.6; pointer-events: none; }
.dmh-card__quick.is-added { border-color: var(--dmh-gold-500); background: var(--dmh-navy-800); color: var(--dmh-accent-on-dark); }

@media (hover: hover) and (pointer: fine) {
  .dmh-card:hover { transform: translateY(-3px); }
  .dmh-card:hover::after { opacity: 1; }
  .dmh-card:hover .dmh-card__inner { border-color: transparent; }
  .dmh-card:hover .dmh-card__media::before { opacity: 1; transform: none; }
  .dmh-card:hover .dmh-card__media::after { transform: none; }
  .dmh-card:hover .dmh-card__media img { transform: translateY(-3%) scale(1.06); }
  .dmh-card:hover .dmh-card__title { color: var(--dmh-brand); }
  .dmh-card__quick { width: 38px; height: 38px; opacity: 0; transform: scale(0.7); }
  .dmh-card:hover .dmh-card__quick, .dmh-card__quick:focus-visible, .dmh-card__quick.is-added { opacity: 1; transform: none; }
  /* Frosted glass only on the one hovered card (a backdrop filter on every card is costly to paint). */
  .dmh-card:hover .dmh-card__quick { background: rgb(255 255 255 / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .dmh-card__quick:hover { background: var(--dmh-navy-800); color: var(--dmh-accent-on-dark); }
  .dmh-card__quick:hover .dmh-card__quick-tip { opacity: 1; transform: translate(0, -50%); }
}

/* Product cursor: over a card the pointer itself becomes the category glyph (native CSS cursor, no JS, no lag).
   32 px navy disc + gold glyph built from the icons.svg appliance symbols (data URIs cannot read tokens: navy-900
   #0d1b3f, gold-300 #ead39a); hotspot in the centre; `pointer` is the fallback. The stretched title link inherits it;
   the quick-add button keeps the normal hand. */
.dmh-card__title a { cursor: inherit; }
.dmh-card[data-dmh-cursor="tv"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='1.6'/%3E%3Cpath d='M8.5 21h7M12 17v4'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
.dmh-card[data-dmh-cursor="ac"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='8' rx='2.2'/%3E%3Cpath d='M5.5 10.2h13M8 16c.8.9-.8 2.1 0 3M12 16c.8.9-.8 2.1 0 3M16 16c.8.9-.8 2.1 0 3'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
.dmh-card[data-dmh-cursor="ac-tower"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M9.5 6.5h5M9.5 9.5h5M9.5 12.5h5M10.5 18h3'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
.dmh-card[data-dmh-cursor="fridge"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2.2'/%3E%3Cpath d='M5 10h14M8.5 5.5v2M8.5 13v3'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
.dmh-card[data-dmh-cursor="washer"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='2.5' width='17' height='19' rx='2.2'/%3E%3Cpath d='M3.5 7h17M7 4.8h.01M10 4.8h.01'/%3E%3Ccircle cx='12' cy='14' r='4.5'/%3E%3Cpath d='M9.4 14.6c1-.8 2.1-.8 3.1 0s2.1.8 3.1 0'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
.dmh-card[data-dmh-cursor="pot"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5h16v5.5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M5 10.5a7 4.2 0 0 1 14 0M12 4.5v1.8M2.5 13H4M20 13h1.5'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
.dmh-card[data-dmh-cursor="freezer"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='9' width='19' height='11' rx='2'/%3E%3Cpath d='M2.5 12.5h19M10 15.5h4M12 2.5v4.5M10 3.5l2 1.5 2-1.5M10 7l2-1 2 1'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
.dmh-card[data-dmh-cursor="stove"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='13' rx='2'/%3E%3Ccircle cx='8.5' cy='12.5' r='3'/%3E%3Ccircle cx='16.2' cy='12.5' r='2'/%3E%3Cpath d='M6 3.5h12'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
.dmh-card[data-dmh-cursor="speaker"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='2.5' width='13' height='19' rx='2.2'/%3E%3Ccircle cx='12' cy='14.5' r='3.5'/%3E%3Ccircle cx='12' cy='7' r='1.4'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
.dmh-card[data-dmh-cursor="heatpump"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230d1b3f' stroke='%23ead39a' stroke-width='1'/%3E%3Cg transform='translate(7 7) scale(.75)' fill='none' stroke='%23ead39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Ccircle cx='10' cy='12' r='4'/%3E%3Cpath d='M10 8.5v7M6.5 12h7M17 9h2M17 12h2M17 15h2'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }


/* Horizontal rail (mobile product lists, related products) */
.dmh-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--dmh-gap)) / 5); gap: var(--dmh-gap); margin: 0; padding: 4px 2px 14px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.dmh-rail > * { scroll-snap-align: start; }
.dmh-rail { scrollbar-width: none; }
.dmh-rail::-webkit-scrollbar { display: none; }

/* Rail controls (prev · pause · next) and a thin gold progress line driven by the rail's own scroll position
   (CSS scroll-driven animation; browsers without it simply hide the line). */
.dmh-railctl { display: flex; flex: none; gap: 6px; }
.dmh-railctl__btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--dmh-line-strong); border-radius: 50%;
  background: var(--dmh-white); color: var(--dmh-brand); cursor: pointer; transition: background var(--dmh-dur), color var(--dmh-dur), border-color var(--dmh-dur);
}
.dmh-railctl__btn:hover { border-color: var(--dmh-navy-800); background: var(--dmh-navy-800); color: var(--dmh-accent-on-dark); }
.dmh-railctl__btn .dmh-icon { width: 18px; height: 18px; }
.dmh-railctl__btn .is-play, .dmh-railctl__btn[aria-pressed="true"] .is-pause { display: none; }
.dmh-railctl__btn[aria-pressed="true"] .is-play { display: block; }
.dmh-railctl__btn[hidden] { display: none; }
.dmh-railwrap { position: relative; min-width: 0; timeline-scope: --dmh-rail; }
.dmh-railwrap .dmh-rail { scroll-timeline: --dmh-rail inline; }
.dmh-railbar { display: none; }
@supports (animation-timeline: scroll()) {
  .dmh-railbar { display: block; height: 2px; margin-top: 2px; overflow: hidden; border-radius: 2px; background: var(--dmh-line); }
  .dmh-railbar > span { display: block; height: 100%; background: var(--dmh-gold-gradient); transform-origin: left center; animation: dmh-railfill linear both; animation-timeline: --dmh-rail; }
}
@keyframes dmh-railfill { from { transform: scaleX(0.08); } to { transform: scaleX(1); } }

/* ---------- Post cards (home news, news pages, product page "Bài viết liên quan", sidebar) ---------- */
.dmh-post { position: relative; display: grid; gap: 10px; min-width: 0; }
.dmh-post__media { position: relative; margin: 0; overflow: hidden; border-radius: var(--dmh-radius-leaf-sm); background: var(--dmh-navy-50); aspect-ratio: 16 / 10; }
.dmh-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dmh-dur-slow) var(--dmh-ease); }
.dmh-post:hover .dmh-post__media img { transform: scale(1.05); }
.dmh-post__body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.dmh-post__cat { position: relative; z-index: 2; justify-self: start; color: var(--dmh-accent-text); font-size: 0.66rem; font-weight: 700; letter-spacing: var(--dmh-tracking-label); text-transform: uppercase; text-decoration: none; }
.dmh-post__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.dmh-post__title a { color: var(--dmh-text); text-decoration: none; }
.dmh-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dmh-post:hover .dmh-post__title a { color: var(--dmh-brand); }
.dmh-post__excerpt { margin: 0; color: var(--dmh-text-muted); font-size: var(--dmh-text-sm); }
.dmh-post__meta { margin: 0; color: var(--dmh-text-muted); font-size: 0.72rem; }

.dmh-post--lead .dmh-post__media { aspect-ratio: 16 / 9; border-radius: var(--dmh-radius-leaf); }
.dmh-post--lead .dmh-post__title { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem); line-height: 1.25; }
.dmh-post--lead .dmh-post__excerpt { font-size: var(--dmh-text-base); }

.dmh-post--row { grid-template-columns: 160px minmax(0, 1fr); align-items: start; gap: 14px; }
.dmh-post--row .dmh-post__media { aspect-ratio: 4 / 3; }
.dmh-post--row .dmh-post__title { font-size: 0.95rem; }

.dmh-post--mini { grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 12px; }
.dmh-post--mini .dmh-post__media { aspect-ratio: 4 / 3; border-radius: 8px 2px 8px 2px; }
.dmh-post--mini .dmh-post__title { font-size: 0.85rem; font-weight: 600; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ---------- Quantity stepper (product page, cart) ---------- */
.dmh-qty { display: inline-flex; align-items: stretch; height: 56px; border: 1px solid var(--dmh-line-strong); border-radius: var(--dmh-radius-pill); overflow: hidden; }
.dmh-qty button { width: 40px; padding: 0; border: 0; background: var(--dmh-surface-alt); color: var(--dmh-brand); cursor: pointer; }
.dmh-qty input { width: 46px; min-height: 0; padding: 0; border: 0; background: var(--dmh-white); text-align: center; font: 700 1rem var(--dmh-font); -moz-appearance: textfield; }
.dmh-qty input::-webkit-outer-spin-button, .dmh-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Notices, forms, dialog ---------- */
.dmh-notice { margin: 12px 0; padding: 12px 16px; border-left: 3px solid; border-radius: var(--dmh-radius-sm); font-size: var(--dmh-text-sm); }
.dmh-notice--success { border-color: var(--dmh-success); background: var(--dmh-success-bg); color: var(--dmh-success-ink); }
.dmh-notice--error { border-color: var(--dmh-red-600); background: var(--dmh-danger-bg); color: var(--dmh-danger-ink); }

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0; padding: 12px 16px;
  border-left: 3px solid var(--dmh-success); border-radius: var(--dmh-radius-sm); background: var(--dmh-success-bg); color: var(--dmh-success-ink); font-size: var(--dmh-text-sm); list-style: none;
}
.woocommerce-info { border-color: var(--dmh-navy-700); background: var(--dmh-navy-50); color: var(--dmh-navy-900); }
.woocommerce-error { display: block; border-color: var(--dmh-red-600); background: var(--dmh-danger-bg); color: var(--dmh-danger-ink); }
.woocommerce-error li + li { margin-top: 4px; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; padding: 6px 14px; border-radius: var(--dmh-radius-pill); background: var(--dmh-navy-800); color: var(--dmh-accent-on-dark); font-weight: 700; text-decoration: none; }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button) { font-weight: 700; }

.dmh-form { display: grid; gap: 12px; }
.dmh-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dmh-field { display: grid; gap: 4px; margin: 0; } /* rows are spaced by .dmh-form gap */
.dmh-field label, .dmh-form legend { font-size: 0.8rem; font-weight: 600; color: var(--dmh-text); }
.dmh-field label .req { color: var(--dmh-red-600); }
.dmh-input, .dmh-form input[type="text"], .dmh-form input[type="tel"], .dmh-form input[type="email"], .dmh-form input[type="number"], .dmh-form textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--dmh-line-strong); border-radius: 10px;
  background: var(--dmh-white); color: var(--dmh-text); font: 400 var(--dmh-text-base) var(--dmh-font); box-shadow: none;
}
.dmh-form textarea { min-height: 84px; resize: vertical; }
.dmh-form input:focus, .dmh-form textarea:focus { border-color: var(--dmh-accent); outline: none; box-shadow: 0 0 0 3px rgb(201 162 74 / 0.25); }
.dmh-form input[aria-invalid="true"], .dmh-form textarea[aria-invalid="true"] { border-color: var(--dmh-red-600); }
.dmh-field__error { color: var(--dmh-red-700); font-size: 0.78rem; }
.dmh-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--dmh-text-sm); cursor: pointer; }
.dmh-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--dmh-navy-800); }
.dmh-choices { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; border: 0; }
.dmh-form__box { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--dmh-line-strong); border-radius: var(--dmh-radius-sm); background: var(--dmh-surface-alt); }
.dmh-form__box[hidden] { display: none; }
.dmh-form__note { margin: 0; color: var(--dmh-text-muted); font-size: 0.75rem; }
.dmh-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.dmh-form__status:empty { display: none; }

.dmh-dialog {
  width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0;
  border: 0; border-radius: var(--dmh-radius-leaf); background: var(--dmh-white); color: var(--dmh-text); box-shadow: var(--dmh-shadow-2); overflow: auto;
}
.dmh-dialog::backdrop { background: rgb(8 17 39 / 0.6); backdrop-filter: blur(2px); }
.dmh-dialog[open] { animation: dmh-pop var(--dmh-dur) var(--dmh-ease); }
@keyframes dmh-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.dmh-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; background: var(--dmh-navy-800); color: var(--dmh-white); }
.dmh-dialog__head h2 { margin: 0; color: var(--dmh-accent-on-dark); font-size: 0.85rem; letter-spacing: var(--dmh-tracking-label); text-transform: uppercase; }
.dmh-dialog__body { padding: 18px 20px 22px; }

/* ---------- Footer ---------- */
.dmh-footer { margin-top: var(--dmh-section); background: var(--dmh-navy-950); color: var(--dmh-on-dark-muted); font-size: var(--dmh-text-sm); }
/* Text links only: the CTA buttons and the logo keep their own colours. */
.dmh-footer li a, .dmh-footer p a { color: var(--dmh-on-dark); text-decoration: none; }
.dmh-footer li a:hover, .dmh-footer p a:hover { color: var(--dmh-accent-on-dark); }
.dmh-footer__cta { border-bottom: 1px solid var(--dmh-line-on-dark); background: linear-gradient(90deg, var(--dmh-navy-900), var(--dmh-navy-800)); }
.dmh-footer__cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.dmh-footer__cta-text { margin: 0; color: var(--dmh-white); font-size: var(--dmh-text-h3); font-weight: 700; }
.dmh-footer__cta-text span { color: var(--dmh-accent-on-dark); }
.dmh-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-block: 44px 28px; }
.dmh-footer__title { margin: 0 0 14px; color: var(--dmh-accent-on-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--dmh-tracking-label); text-transform: uppercase; }
.dmh-footer ul { margin: 0; padding: 0; list-style: none; }
.dmh-footer li { padding: 4px 0; }
.dmh-footer__brand .dmh-logo { margin-bottom: 14px; }
.dmh-footer__contact li { display: flex; gap: 10px; }
.dmh-footer__phones a { display: block; }
.dmh-footer__contact .dmh-icon { margin-top: 3px; color: var(--dmh-accent); }
.dmh-footer__legal { padding-block: 16px 24px; border-top: 1px solid var(--dmh-line-on-dark); font-size: 0.75rem; line-height: 1.7; }
.dmh-footer__legal strong { color: var(--dmh-on-dark); }

/* ---------- Floating contact (desktop) + bottom bar (mobile) ---------- */
.dmh-fab { position: fixed; right: 18px; bottom: 22px; z-index: var(--dmh-z-fab); display: flex; flex-direction: column; gap: 10px; }
.dmh-fab a {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--dmh-white); box-shadow: 0 10px 24px -10px rgb(8 17 39 / 0.6); text-decoration: none;
}
.dmh-fab a .dmh-icon { width: 24px; height: 24px; }
.dmh-zalo-mark { display: block; width: 24px; height: 24px; flex: none; border-radius: 6px; object-fit: contain; }
/* Zalo: the app mark alone (no tile behind it); its own shape carries a soft drop shadow. */
.dmh-fab .dmh-fab__zalo { border-radius: 0; background: none; box-shadow: none; }
.dmh-fab__zalo .dmh-zalo-mark { width: 54px; height: 54px; border-radius: 0; filter: drop-shadow(0 8px 12px rgb(8 17 39 / 0.28)); }
/* Call: the handset gives a short, gentle ring every 5 s (0.75 s of motion, then rest) with one soft halo;
   transform/opacity only, stops after 12 rings (1 minute) and never runs with reduced motion. */
.dmh-fab__call { background: var(--dmh-hot-gradient); }
.dmh-fab__call .dmh-icon { animation: dmh-ring-shake 5s ease-in-out 1.5s 12; transform-origin: 50% 60%; }
.dmh-fab__call::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgb(227 52 74 / 0.45); opacity: 0; animation: dmh-ring 5s var(--dmh-ease) 1.5s 12; }
@keyframes dmh-ring-shake {
  0%, 16%, 100% { transform: none; }
  2%, 6%, 10% { transform: rotate(-14deg); }
  4%, 8%, 12% { transform: rotate(14deg); }
  14% { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) { .dmh-fab__call::before, .dmh-fab__call .dmh-icon { animation: none; } }
@media (prefers-reduced-motion: no-preference) { .dmh-bottombar .is-call .dmh-icon { animation: dmh-ring-shake 5s ease-in-out 1.5s 12; transform-origin: 50% 60%; } }
.dmh-fab__fb { background: var(--dmh-facebook); }
.dmh-fab .dmh-fab__top {
  border: 1px solid var(--dmh-line-on-dark); background: var(--dmh-navy-800); color: var(--dmh-accent-on-dark);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dmh-dur), transform var(--dmh-dur) var(--dmh-ease), visibility var(--dmh-dur);
}
.dmh-fab .dmh-fab__top.is-on { opacity: 1; visibility: visible; transform: none; }
.dmh-top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 120vh; pointer-events: none; }
@keyframes dmh-ring { 0% { transform: scale(0.85); opacity: 0.9; } 22%, 100% { transform: scale(1.4); opacity: 0; } }
.dmh-fab__label { position: absolute; right: 62px; padding: 6px 10px; border-radius: 6px; background: var(--dmh-navy-900); color: var(--dmh-white); font-size: 0.75rem; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity var(--dmh-dur), transform var(--dmh-dur); pointer-events: none; }
.dmh-fab a:hover .dmh-fab__label, .dmh-fab a:focus-visible .dmh-fab__label { opacity: 1; transform: none; }

.dmh-bottombar { display: none; }

/* ---------- Pagination ---------- */
.dmh-pagination, .woocommerce-pagination { margin: 28px 0 0; }
.dmh-pagination ul, .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; border: 0; list-style: none; }
.dmh-pagination li, .woocommerce-pagination ul.page-numbers li { border: 0; }
.dmh-pagination .page-numbers, .woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--dmh-line);
  border-radius: 10px; background: var(--dmh-white); color: var(--dmh-text); font-weight: 600; text-decoration: none;
}
.dmh-pagination .page-numbers.current, .woocommerce-pagination .page-numbers .current { background: var(--dmh-navy-800); border-color: var(--dmh-navy-800); color: var(--dmh-accent-on-dark); }

/* ---------- Generic content (pages, posts via Astra) ---------- */
.dmh .entry-content { font-size: var(--dmh-text-base); }
.dmh .entry-content h2 { font-size: var(--dmh-text-h3); margin-top: 1.6em; }
.dmh .entry-content table { border-collapse: collapse; width: 100%; }
.dmh .entry-content td, .dmh .entry-content th { padding: 8px 10px; border: 1px solid var(--dmh-line); }

/* ---------- Reveal on scroll (JS adds .is-in; no-JS shows everything) ---------- */
.js .dmh-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dmh-dur-slow) var(--dmh-ease), transform var(--dmh-dur-slow) var(--dmh-ease); }
.js .dmh-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .dmh-reveal { transform: none; } } /* fade only */

/* Lists marked [data-dmh-stagger] enter item by item once their section is revealed (site.js sets --i).
   An animation with backwards fill (not a transition) so the items' own hover transitions stay instant. */
:root { --dmh-rise: 16px; }
@media (prefers-reduced-motion: reduce) { :root { --dmh-rise: 0px; } }
.js .dmh-reveal:not(.is-in) [data-dmh-stagger] > *, .js .dmh-reveal:not(.is-in)[data-dmh-stagger] > * { opacity: 0; }
.js .dmh-reveal.is-in [data-dmh-stagger] > *, .js .dmh-reveal.is-in[data-dmh-stagger] > * {
  animation: dmh-stagger-in 620ms var(--dmh-ease) backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes dmh-stagger-in { from { opacity: 0; transform: translateY(var(--dmh-rise)); } }
/* Section eyebrows draw their gold rule when revealed. */
.js .dmh-reveal .dmh-eyebrow::before { transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--dmh-ease) 200ms; }
.js .dmh-reveal.is-in .dmh-eyebrow::before { transform: none; }

/* ---------- Pills (sub-category tabs, quick filters) ---------- */
/* position: relative keeps absolutely positioned screen-reader text inside the scroller (no page-wide overflow). */
.dmh-pills { position: relative; display: flex; gap: 8px; margin: 0 0 16px; padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.dmh-pills::-webkit-scrollbar { display: none; }
.dmh-pills a {
  display: block; padding: 7px 14px; border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-pill); background: var(--dmh-white);
  color: var(--dmh-text); font-size: 0.8rem; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: border-color var(--dmh-dur), color var(--dmh-dur), background var(--dmh-dur);
}
.dmh-pills a:hover { border-color: var(--tile, var(--dmh-accent)); color: var(--dmh-brand); background: color-mix(in srgb, var(--tile, var(--dmh-gold-500)) 8%, var(--dmh-white)); }
.dmh-pills a[aria-current="page"] { border-color: var(--dmh-navy-800); background: var(--dmh-navy-800); color: var(--dmh-accent-on-dark); }

/* ---------- Toast ---------- */
.dmh-toast {
  position: fixed; left: 50%; bottom: 84px; z-index: var(--dmh-z-dialog); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  max-width: calc(100% - 24px); padding: 12px 18px; border-radius: var(--dmh-radius-leaf-sm); background: var(--dmh-navy-900); color: var(--dmh-white);
  font-size: var(--dmh-text-sm); box-shadow: var(--dmh-shadow-2); opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity var(--dmh-dur), transform var(--dmh-dur) var(--dmh-ease);
}
.dmh-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dmh-toast a { color: var(--dmh-accent-on-dark); font-weight: 700; }

/* ---------- Header helpers ---------- */
.dmh-header__menu { display: none; }
.dmh-msearch .dmh-search__input { height: 44px; }
.dmh-footer__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dmh-footer__social { display: flex; gap: 10px; }
.dmh-footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--dmh-line-on-dark); border-radius: 50%; }
.dmh-footer__brand p { margin: 0 0 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 400px) {
  .dmh-logo { gap: 8px; }
  .dmh-logo img { height: 30px; }
  .dmh-logo__text small { font-size: 0.55rem; letter-spacing: 0.1em; }
  .dmh-logo__text strong { font-size: 0.85rem; }
  .dmh-header .dmh-iconbtn, .dmh-header .dmh-hotline__icon { width: 40px; height: 40px; }
  .dmh-cartlink { padding: 0 2px; }
}
@media (max-width: 359px) {
  .dmh-header .dmh-hotline { display: none; } /* "Gọi ngay" stays in the bottom bar */
}
@media (max-width: 1199px) {
  .dmh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dmh-rail { grid-auto-columns: calc((100% - 3 * var(--dmh-gap)) / 4); }
  .dmh-hotline__text small { display: none; }
}
@media (max-width: 1023px) {
  :root { --dmh-header-h: 60px; }
  .dmh-feature-nav__cats, .dmh-feature-nav__shortcuts, .dmh-header .dmh-search, .dmh-hotline__text, .dmh-cartlink__label { display: none; }
  .dmh-header__menu { display: grid; }
  .dmh-msearch { display: block; }
  .dmh-feature-nav__list { flex: 1; justify-content: space-between; gap: 4px; }
  .dmh-header__inner { gap: 4px; }
  .dmh-logo { margin-right: auto; }
  .dmh-logo img { height: 36px; }
  .dmh-logo__text strong { font-size: 0.95rem; }
  .dmh-hotline__icon { width: 40px; height: 40px; border: 0; }
  .dmh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dmh-rail { grid-auto-columns: calc((100% - 2 * var(--dmh-gap)) / 3); }
  .dmh-footer__grid { grid-template-columns: 1fr 1fr; }
  .dmh-fab { right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); gap: 0; }
  .dmh-fab > :not(.dmh-fab__top) { display: none; }
  .dmh-fab .dmh-fab__top { width: 42px; height: 42px; }
  .dmh-fab__top .dmh-fab__label { display: none; }
  body.single-product .dmh-fab { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .dmh-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--dmh-z-fab); display: grid; grid-template-columns: repeat(4, 1fr);
    padding-bottom: env(safe-area-inset-bottom); background: var(--dmh-navy-950); box-shadow: 0 -8px 24px -12px rgb(8 17 39 / 0.6);
  }
  .dmh-bottombar a, .dmh-bottombar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 2px;
    border: 0; background: none; color: var(--dmh-on-dark); font: 600 0.68rem/1.2 var(--dmh-font); text-decoration: none; cursor: pointer;
  }
  .dmh-bottombar .dmh-icon { width: 22px; height: 22px; color: var(--dmh-accent); }
  .dmh-bottombar .is-call { background: var(--dmh-hot-gradient); color: var(--dmh-white); }
  .dmh-bottombar .is-call .dmh-icon { color: var(--dmh-white); }
  .dmh-bottombar .is-zalo .dmh-zalo-mark { width: 22px; height: 22px; border-radius: 5px; }
  body.dmh { padding-bottom: 58px; }
}
@media (max-width: 767px) {
  .dmh-feature-nav__inner { min-height: 48px; }
  .dmh-feature-nav__list li { flex: 0 0 auto; }
  .dmh-feature-nav__list a { min-height: 46px; padding: 0 2px; font-size: 0.8rem; }
  .dmh-feature-nav__list a::after { right: 2px; left: 2px; bottom: 9px; }
  .dmh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmh-post--row { grid-template-columns: 120px minmax(0, 1fr); }
  .dmh-rail { grid-auto-columns: 44%; }
  .dmh-card__body { padding: 10px 10px 12px; }
  .dmh-card__title { font-size: 0.82rem; }
  .dmh-price__now { font-size: 0.98rem; }
  .dmh-form__row { grid-template-columns: 1fr; }
  .dmh-footer__grid { grid-template-columns: 1fr; gap: 24px; padding-block: 32px 20px; }
  .dmh-logo__text small { letter-spacing: 0.12em; }
}

/* ---------- Touch targets ≥ 24 px (WCAG 2.5.8) for stacked links that are not inline text ---------- */
.dmh-footer li { padding: 1px 0; }
.dmh-footer li a { display: inline-block; padding: 3px 0; }
.dmh-post__cat { display: inline-block; padding: 4px 0; }
.dmh-toc summary { padding: 4px 0; }
.dmh-toc li { padding: 0; }
.dmh-toc li a { display: inline-block; padding: 3px 0; }
.dmh-blog__section-head a { display: inline-block; padding: 4px 0; }
.dmh-pdp__kicker a, .dmh-pdp__rating { display: inline-block; padding: 4px 0; }
.dmh-cartlist__remove { padding: 4px 0; }
.dmh-side__cats a { padding-block: 8px; }

/* Links inside running text are underlined, not told apart by colour alone (WCAG 1.4.1). Component links carry
   classes and keep their own styling. */
main p a:not([class]), .dmh-form__note a { text-decoration: underline; }