/*
Theme Name: Astra Child
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/
/* ==========================================================================
   VDG Brand Design Tokens — Gold Luxury on Premium Black
   Astra Child override – namespace riêng, không đụng biến --ast-*
   ========================================================================== */
:root{
  /* Brand Accent – Gold */
  --vdg-gold: #C5A059;
  --vdg-gold-hover: #E5C158;
  --vdg-gold-on-light: #8A6D33; /* chữ vàng dùng cho text cỡ lớn trên nền sáng, đạt AAA-large */

  /* Neutral Dark */
  --vdg-dark-bg: #0F0F0F;      /* Hero / Footer */
  --vdg-dark-surface: #1C1C1E; /* Card/container tối */

  /* Neutral Light */
  --vdg-light-bg: #FFFFFF;
  --vdg-light-bg-alt: #F8F9FA;

  /* Text – mặc định theo ngữ cảnh sáng */
  --vdg-text-body: #1C1C1E;
  --vdg-text-heading: #0A0A0A;
  --vdg-text-muted: #636366;
  --vdg-text-muted-aaa: #5B5B5E; /* dự pḥng: dùng khi muted xuất hiện ở cỡ chữ thường, cần AAA 7:1 */

  /* Typography – System Font Stack (0ms load, không @font-face) */
  --vdg-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --vdg-lh-heading: 1.25;
  --vdg-lh-body: 1.6;

  /* Fluid Clamp Typography (mốc viewport 320px–1280px) */
  --vdg-h1-size: clamp(2rem, 1.58rem + 2.08vw, 3.25rem);     /* 32px → 52px */
  --vdg-h2-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);   /* 24px → 36px */
  --vdg-body-size: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);  /* 16px → 17px */
}

/* Vùng nền tối: gắn class này vào wrapper Hero / Footer trong Elementor hoặc PHP template */
.vdg-dark-section{
  background-color: var(--vdg-dark-bg);
  --vdg-text-body: #E4E4E6;
  --vdg-text-heading: #FFFFFF;
  --vdg-text-muted: #AEAEB2;
}
.vdg-dark-section.is-surface{ background-color: var(--vdg-dark-surface); }

/* Base typography */
body{
  font-family: var(--vdg-font-system);
  font-size: var(--vdg-body-size);
  line-height: var(--vdg-lh-body);
  color: var(--vdg-text-body);
  background-color: var(--vdg-light-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--vdg-font-system);
  color: var(--vdg-text-heading);
  line-height: var(--vdg-lh-heading);
  font-weight: 700;
}
h1{ font-size: var(--vdg-h1-size); }
h2{ font-size: var(--vdg-h2-size); }

.vdg-meta, .entry-meta, small{ color: var(--vdg-text-muted); }

a{ color: var(--vdg-gold); text-underline-offset: 2px; }
a:hover, a:focus{ color: var(--vdg-gold-hover); }

/* Focus indicator – bắt buộc theo WCAG 2.4.7 */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--vdg-gold);
  outline-offset: 2px;
}

::selection{ background-color: var(--vdg-gold); color: #0A0A0A; }

/* ==========================================================================
   FIX: Nút "Xem tất cả >>" (widget Heading Elementor id cba5311) bị kế thừa
   font-size khổng lồ (52px) từ style Heading mặc định, gây to đùng dưới menu.
   Ghi đè trực tiếp theo ID widget để không ảnh hưởng heading khác toàn site.
   ========================================================================== */
.elementor-element-cba5311 .elementor-heading-title{
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
.elementor-element-cba5311 .elementor-heading-title a{
  color: var(--vdg-gold) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s ease;
}
.elementor-element-cba5311 .elementor-heading-title a:hover{
  color: var(--vdg-gold-hover) !important;
}

/* Tăng độ đặc hiệu để thắng rule inline "#content h1, #content .elementor-heading-title.elementor-size-default"
   (rule đó có #content nên specificity cao hơn rule phía trên dù đă !important) */
#content .elementor-element-cba5311 .elementor-heading-title.elementor-size-default{
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}