/* ═══════════════════════════════════════════════════
   ALUMINUM-DOORS THEME — index.css
   All variables MUST be scoped to body.theme-aluminum-doors
   (KHÔNG khai báo ở :root — xem SKILL.md quy tắc #6)
   ═══════════════════════════════════════════════════ */

body.theme-aluminum-doors {
  background-color: #fff;
  color: #1E293B;
  font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
  line-height: 1.6;

  /* Brand tokens — driven by admin color picker via getThemeStyles() */
  --color-brand-primary:   var(--color-primary,   #1b4b8a);
  --color-brand-secondary: var(--color-secondary, #172B4D);
  --color-brand-tertiary:  var(--color-tertiary,  #F59E0B);

  /* HMT palette — scoped inside theme */
  --hmt-navy:        var(--color-brand-primary);
  --hmt-secondary:   var(--color-brand-secondary);
  --hmt-navy-l:      color-mix(in srgb, var(--color-brand-primary) 15%, white);
  --hmt-accent:      var(--color-brand-tertiary);
  --hmt-tertiary:    var(--color-brand-tertiary);
  --hmt-bg:          #F8FAFF;
  --hmt-text:        #1E293B;
  --hmt-body:        #475569;
  --hmt-muted:       #94A3B8;
  --hmt-border:      #E2E8F0;

  /* Aliases → brand tokens */
  --color-brand-accent: var(--hmt-accent);
  --color-brand-border: var(--hmt-border);
  --color-brand-bg-alt: var(--hmt-bg);
  --color-brand-text: var(--hmt-text);
  --color-brand-body: var(--hmt-body);
  --color-brand-muted: var(--hmt-muted);
}

/* ── Img placeholders ── */
.theme-aluminum-doors .img-fallback-gradient {
  background: linear-gradient(135deg, var(--hmt-navy-l) 0%, #dde8f8 100%);
  position: relative;
  container-type: inline-size;
}
@container (max-width: 89px) {
  .theme-aluminum-doors .img-fallback-gradient::before {
    display: none;
  }
}
.theme-aluminum-doors .img-fallback-gradient::before {
  content: var(--brand-fallback-text, 'Sản Phẩm');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--hmt-navy);
  font-weight: 700;
  opacity: 0.2;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 0;
}
.theme-aluminum-doors .img-fallback-plain {
  background: linear-gradient(135deg, var(--hmt-navy-l) 0%, #dde8f8 100%);
}

/* ── Hero slider animation ── */
@keyframes hmt-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.theme-aluminum-doors .hmt-slide-content {
  animation: hmt-fade-in 0.7s ease forwards;
}

/* ── Card shadows ── */
.theme-aluminum-doors .shadow-card { 
  box-shadow: 0 2px 16px color-mix(in srgb, var(--hmt-navy) 10%, transparent);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-aluminum-doors .shadow-card:hover {
  box-shadow: 0 8px 32px color-mix(in srgb, var(--hmt-navy) 18%, transparent);
  transform: translateY(-0.5rem);
}
.theme-aluminum-doors .shadow-hover { 
  box-shadow: 0 8px 32px color-mix(in srgb, var(--hmt-navy) 18%, transparent); 
}
.theme-aluminum-doors .rounded-card  { border-radius: 16px; }
.theme-aluminum-doors .rounded-btn   { border-radius: 8px; }

/* ── Section title utils ── */
.theme-aluminum-doors .hmt-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hmt-accent);
}

/* ── Product card: category pill ── */
.theme-aluminum-doors .hmt-cat-pill {
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-block;
}
.theme-aluminum-doors .hmt-cat-pill-navy   { background: var(--hmt-navy-l);  color: var(--hmt-navy); }
.theme-aluminum-doors .hmt-cat-pill-accent { background: #FEF3C7; color: #92400E; }
.theme-aluminum-doors .hmt-cat-pill-green  { background: #DCFCE7; color: #166534; }

/* ── No-scrollbar utility ── */
.theme-aluminum-doors .no-scrollbar::-webkit-scrollbar { display: none; }
.theme-aluminum-doors .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Hover utilities ── */
.theme-aluminum-doors .hmt-btn-outline:hover {
  background-color: #ffffff;
  color: var(--hmt-navy);
}

.theme-aluminum-doors .hmt-slider-arrow {
  background-color: rgba(255, 255, 255, 0.1);
}
.theme-aluminum-doors .hmt-slider-arrow:hover {
  background-color: var(--hmt-accent);
}
/* Stable mobile hero: text is the LCP candidate and no 1920px carousel image is downloaded. */
.hmt-hero { height: 650px; }
@media (min-width: 768px) {
  .hmt-hero { height: clamp(520px, 70vh, 700px); }
}