/* ==========================================================================
   Chai Lọ Minh Anh · Classic Gold & Black Theme Style (Luxury Edition)
   Inspired by Calacatta & Nero Marquina Marble with Kintsugi Royal Gold Veins
   Active on: html[data-theme="classic-gold"], body[data-theme="classic-gold"], body.ma-theme-classic-gold
   ========================================================================== */

/* 1. Root & Body Level Theme Tokens --------------------------------------- */
html[data-theme="classic-gold"],
body[data-theme="classic-gold"],
body.ma-theme-classic-gold {
  color-scheme: dark;
  --cgb-bg: #090c12;
  --cgb-surface: #101520;
  --cgb-raised: #161d2c;
  --cgb-sunken: #0b0e14;
  --cgb-line: rgba(212, 175, 55, 0.28);
  --cgb-line-strong: rgba(212, 175, 55, 0.55);
  --cgb-gold: #d4af37;
  --cgb-gold-pale: #f3e098;
  --cgb-gold-deep: #a07820;
  --cgb-gold-glow: 0 4px 22px rgba(212, 175, 55, 0.35);
  --cgb-gold-foil: linear-gradient(135deg, #d4af37 0%, #f3e098 48%, #b88b2a 100%);
  --cgb-text: #f1f5f9;
  --cgb-title: #ffffff;
  --cgb-muted: #94a3b8;
  --cgb-cta-ink: #0a0802;

  /* Global Token Overrides */
  --wd-main-bgcolor: var(--cgb-bg);
  --wd-text-color: var(--cgb-text);
  --wd-title-color: var(--cgb-title);
  --wd-primary-color: var(--cgb-gold);
  --wd-link-color: var(--cgb-text);
  --wd-link-color-hover: var(--cgb-gold-pale);
  --ma23-bg: var(--cgb-bg);
  --ma23-surface: var(--cgb-surface);
  --ma23-text: var(--cgb-text);
  --ma23-gold: var(--cgb-gold);
}

/* 2. Global Background & Atmosphere --------------------------------------- */
html[data-theme="classic-gold"],
html[data-theme="classic-gold"] .website-wrapper,
html[data-theme="classic-gold"] .main-page-wrapper,
html[data-theme="classic-gold"] .wd-page-content,
html[data-theme="classic-gold"] .site-content,
body[data-theme="classic-gold"],
body[data-theme="classic-gold"] .website-wrapper,
body[data-theme="classic-gold"] .main-page-wrapper,
body[data-theme="classic-gold"] .wd-page-content,
body[data-theme="classic-gold"] .site-content,
body.ma-theme-classic-gold,
body.ma-theme-classic-gold .website-wrapper,
body.ma-theme-classic-gold .main-page-wrapper,
body.ma-theme-classic-gold .wd-page-content,
body.ma-theme-classic-gold .site-content {
  background-color: #090c12 !important;
  color: #f1f5f9 !important;
}

html[data-theme="classic-gold"] body,
body[data-theme="classic-gold"],
body.ma-theme-classic-gold {
  background-color: #090c12 !important;
  background-image: radial-gradient(circle at 50% -10%, rgba(212, 175, 55, 0.12) 0%, rgba(9, 12, 18, 0) 65%),
                    linear-gradient(180deg, #090c12 0%, #0d111a 100%) !important;
  color: #f1f5f9 !important;
}

/* 3. Header, Navigation & Topbar ------------------------------------------ */
html[data-theme="classic-gold"] .whb-header,
body[data-theme="classic-gold"] .whb-header,
body.ma-theme-classic-gold .whb-header {
  background: #080a0f !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="classic-gold"] .whb-general-header,
body[data-theme="classic-gold"] .whb-general-header,
body.ma-theme-classic-gold .whb-general-header {
  background: #080a0f !important;
}

html[data-theme="classic-gold"] .wd-nav > li > a,
body[data-theme="classic-gold"] .wd-nav > li > a,
body.ma-theme-classic-gold .wd-nav > li > a {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
}

html[data-theme="classic-gold"] .wd-nav > li > a:hover,
html[data-theme="classic-gold"] .wd-nav > li.current-menu-item > a,
body[data-theme="classic-gold"] .wd-nav > li > a:hover,
body.ma-theme-classic-gold .wd-nav > li > a:hover {
  color: #f3e098 !important;
}

/* 4. Eyebrow Badges & Stage Indicators ------------------------------------ */
html[data-theme="classic-gold"] .founda-form-stage,
html[data-theme="classic-gold"] .founda-request-stage,
html[data-theme="classic-gold"] .ma-contact-kicker,
html[data-theme="classic-gold"] .ma65-pill,
html[data-theme="classic-gold"] .ma-badge,
body[data-theme="classic-gold"] .founda-form-stage,
body[data-theme="classic-gold"] .founda-request-stage,
body[data-theme="classic-gold"] .ma-contact-kicker,
body[data-theme="classic-gold"] .ma65-pill,
body.ma-theme-classic-gold .founda-form-stage,
body.ma-theme-classic-gold .founda-request-stage,
body.ma-theme-classic-gold .ma-contact-kicker,
body.ma-theme-classic-gold .ma65-pill {
  background: rgba(212, 175, 55, 0.16) !important;
  color: #f3e098 !important;
  border: 1px solid rgba(212, 175, 55, 0.48) !important;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.15) !important;
}

/* 5. Headings & Typography ------------------------------------------------ */
html[data-theme="classic-gold"] h1,
html[data-theme="classic-gold"] h2,
html[data-theme="classic-gold"] h3,
html[data-theme="classic-gold"] h4,
body[data-theme="classic-gold"] h1,
body[data-theme="classic-gold"] h2,
body[data-theme="classic-gold"] h3,
body.ma-theme-classic-gold h1,
body.ma-theme-classic-gold h2,
body.ma-theme-classic-gold h3 {
  color: #ffffff !important;
}

html[data-theme="classic-gold"] .founda-request legend,
body[data-theme="classic-gold"] .founda-request legend,
body.ma-theme-classic-gold .founda-request legend {
  color: #ffffff !important;
  border-bottom-color: rgba(212, 175, 55, 0.35) !important;
}

/* 6. Cards & Containers (Obsidian Slate with Gold Trim) -------------------- */
html[data-theme="classic-gold"] .founda-request-step,
html[data-theme="classic-gold"] .ma26-intake-guide,
html[data-theme="classic-gold"] .founda-contact-card,
html[data-theme="classic-gold"] .ma-company,
html[data-theme="classic-gold"] .ma-contact-cta,
html[data-theme="classic-gold"] .wd-products > .wd-product,
html[data-theme="classic-gold"] .entry-summary,
html[data-theme="classic-gold"] .ma65-cat-topic-card,
body[data-theme="classic-gold"] .founda-request-step,
body[data-theme="classic-gold"] .ma26-intake-guide,
body[data-theme="classic-gold"] .founda-contact-card,
body[data-theme="classic-gold"] .ma-company,
body[data-theme="classic-gold"] .ma-contact-cta,
body[data-theme="classic-gold"] .wd-products > .wd-product,
body.ma-theme-classic-gold .founda-request-step,
body.ma-theme-classic-gold .ma26-intake-guide,
body.ma-theme-classic-gold .founda-contact-card,
body.ma-theme-classic-gold .ma-company,
body.ma-theme-classic-gold .ma-contact-cta,
body.ma-theme-classic-gold .wd-products > .wd-product {
  background: #101520 !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.5) !important;
  color: #e2e8f0 !important;
}

html[data-theme="classic-gold"] .wd-products > .wd-product:hover,
body[data-theme="classic-gold"] .wd-products > .wd-product:hover,
body.ma-theme-classic-gold .wd-products > .wd-product:hover {
  border-color: #d4af37 !important;
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.22) !important;
  transform: translateY(-2px) !important;
}

/* 7. Stepper (Quy trình 3 bước Hoàng Gia) ----------------------------------- */
html[data-theme="classic-gold"] .founda-request .founda-stepper li,
body[data-theme="classic-gold"] .founda-request .founda-stepper li,
body.ma-theme-classic-gold .founda-request .founda-stepper li {
  background: #121824 !important;
  border: 1.5px solid #232c3c !important;
  color: #94a3b8 !important;
}

html[data-theme="classic-gold"] .founda-request .founda-stepper li[aria-current],
body[data-theme="classic-gold"] .founda-request .founda-stepper li[aria-current],
body.ma-theme-classic-gold .founda-request .founda-stepper li[aria-current] {
  background: rgba(212, 175, 55, 0.18) !important;
  border-color: #d4af37 !important;
  color: #f3e098 !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35) !important;
}

/* 8. Progressive Disclosure Toggles --------------------------------------- */
html[data-theme="classic-gold"] .wp-theme-minhanh .founda-rfq button.ma-progressive-trigger--picker,
html[data-theme="classic-gold"] .founda-request button.ma-progressive-trigger--picker,
html[data-theme="classic-gold"] button.ma-progressive-trigger--picker,
body[data-theme="classic-gold"] button.ma-progressive-trigger--picker,
body.ma-theme-classic-gold button.ma-progressive-trigger--picker {
  background: #121724 !important;
  border: 1.5px dashed #d4af37 !important;
  color: #f1f5f9 !important;
}

html[data-theme="classic-gold"] button.ma-progressive-trigger--picker:hover,
body[data-theme="classic-gold"] button.ma-progressive-trigger--picker:hover,
body.ma-theme-classic-gold button.ma-progressive-trigger--picker:hover {
  background: #182030 !important;
  border-color: #f3e098 !important;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.25) !important;
}

html[data-theme="classic-gold"] .ma-progressive-trigger-badge,
body[data-theme="classic-gold"] .ma-progressive-trigger-badge,
body.ma-theme-classic-gold .ma-progressive-trigger-badge {
  background: rgba(212, 175, 55, 0.25) !important;
  color: #f3e098 !important;
}

/* 9. Primary CTAs (Liquid Royal Gold Gradient) ---------------------------- */
html[data-theme="classic-gold"] .wp-theme-minhanh .founda-rfq button.founda-request-send,
html[data-theme="classic-gold"] .founda-request .founda-request-send,
html[data-theme="classic-gold"] .wp-theme-minhanh .founda-rfq button[type="submit"],
html[data-theme="classic-gold"] .founda-request button[type="submit"],
html[data-theme="classic-gold"] .founda-step-controls button[data-step-next],
html[data-theme="classic-gold"] .single_add_to_cart_button,
html[data-theme="classic-gold"] .product-grid-item .add_to_cart_button,
html[data-theme="classic-gold"] .ma65-tray-submit,
html[data-theme="classic-gold"] .checkout-button,
html[data-theme="classic-gold"] .wpcf7-submit,
html[data-theme="classic-gold"] .ma23-button,
html[data-theme="classic-gold"] .ma65-btn-primary,
html[data-theme="classic-gold"] .ma-catalog-intro .ma-text-link,
html[data-theme="classic-gold"] body.ma-ux-v65 .founda-rfq-moq a:not(.ma65-empty-rfp-link),
body[data-theme="classic-gold"] .founda-request-send,
body[data-theme="classic-gold"] .founda-step-controls button[data-step-next],
body[data-theme="classic-gold"] .single_add_to_cart_button,
body[data-theme="classic-gold"] .ma23-button,
body[data-theme="classic-gold"] .ma65-btn-primary,
body[data-theme="classic-gold"] .ma-catalog-intro .ma-text-link,
body.ma-theme-classic-gold .founda-request-send,
body.ma-theme-classic-gold .founda-step-controls button[data-step-next],
body.ma-theme-classic-gold .single_add_to_cart_button,
body.ma-theme-classic-gold .ma23-button,
body.ma-theme-classic-gold .ma65-btn-primary,
body.ma-theme-classic-gold .ma-catalog-intro .ma-text-link {
  background: linear-gradient(135deg, #d4af37 0%, #f3e098 48%, #b88b2a 100%) !important;
  color: #0a0802 !important;
  border: 1px solid #f3e098 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.4) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

html[data-theme="classic-gold"] .founda-request-send:hover,
html[data-theme="classic-gold"] .founda-step-controls button[data-step-next]:hover,
html[data-theme="classic-gold"] .single_add_to_cart_button:hover,
html[data-theme="classic-gold"] .ma23-button:hover,
html[data-theme="classic-gold"] .ma65-btn-primary:hover,
html[data-theme="classic-gold"] .ma-catalog-intro .ma-text-link:hover,
body[data-theme="classic-gold"] .founda-request-send:hover,
body[data-theme="classic-gold"] .ma23-button:hover,
body.ma-theme-classic-gold .founda-request-send:hover,
body.ma-theme-classic-gold .ma23-button:hover,
body.ma-theme-classic-gold .ma-catalog-intro .ma-text-link:hover {
  background: linear-gradient(135deg, #e5c358 0%, #fff0b8 50%, #c99c35 100%) !important;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.6) !important;
  color: #000000 !important;
  transform: translateY(-1px) !important;
}

/* 10. Secondary Actions & Outlined Buttons -------------------------------- */
html[data-theme="classic-gold"] .founda-step-controls [data-step-back],
html[data-theme="classic-gold"] button.ma26-selection-return,
html[data-theme="classic-gold"] .founda-request-list-actions :is(a, button),
html[data-theme="classic-gold"] .ma26-actions :is(a, button),
html[data-theme="classic-gold"] .ma65-tray-sample,
html[data-theme="classic-gold"] .ma-contact-drawer-close,
html[data-theme="classic-gold"] .ma23-button-secondary,
html[data-theme="classic-gold"] .ma65-btn-secondary,
html[data-theme="classic-gold"] .founda-sample-cta a.button,
html[data-theme="classic-gold"] body.ma-ux-v65 .founda-rfq-moq a.ma65-empty-rfp-link,
body[data-theme="classic-gold"] .founda-step-controls [data-step-back],
body[data-theme="classic-gold"] button.ma26-selection-return,
body[data-theme="classic-gold"] .founda-request-list-actions :is(a, button),
body[data-theme="classic-gold"] .ma23-button-secondary,
body[data-theme="classic-gold"] .ma65-btn-secondary,
body[data-theme="classic-gold"] .founda-sample-cta a.button,
body.ma-theme-classic-gold .founda-step-controls [data-step-back],
body.ma-theme-classic-gold button.ma26-selection-return,
body.ma-theme-classic-gold .founda-request-list-actions :is(a, button),
body.ma-theme-classic-gold .ma23-button-secondary,
body.ma-theme-classic-gold .ma65-btn-secondary,
body.ma-theme-classic-gold .founda-sample-cta a.button {
  background: #161c28 !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  color: #f3e098 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  text-decoration: none !important;
}

html[data-theme="classic-gold"] .founda-step-controls [data-step-back]:hover,
html[data-theme="classic-gold"] button.ma26-selection-return:hover,
html[data-theme="classic-gold"] .founda-request-list-actions :is(a, button):hover,
html[data-theme="classic-gold"] .ma23-button-secondary:hover,
html[data-theme="classic-gold"] .ma65-btn-secondary:hover,
body[data-theme="classic-gold"] .founda-step-controls [data-step-back]:hover,
body[data-theme="classic-gold"] .ma23-button-secondary:hover,
body.ma-theme-classic-gold .founda-step-controls [data-step-back]:hover,
body.ma-theme-classic-gold .ma23-button-secondary:hover {
  background: rgba(212, 175, 55, 0.2) !important;
  border-color: #f3e098 !important;
  color: #ffffff !important;
}

/* 11. Form Inputs, Selects & Textareas ------------------------------------ */
html[data-theme="classic-gold"] .founda-request input,
html[data-theme="classic-gold"] .founda-request select,
html[data-theme="classic-gold"] .founda-request textarea,
html[data-theme="classic-gold"] .wpcf7 input,
html[data-theme="classic-gold"] .wpcf7 textarea,
body[data-theme="classic-gold"] .founda-request input,
body[data-theme="classic-gold"] .founda-request textarea,
body.ma-theme-classic-gold .founda-request input,
body.ma-theme-classic-gold .founda-request textarea {
  background: #0a0d14 !important;
  border: 1.5px solid #232d3d !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
}

html[data-theme="classic-gold"] .founda-request input:focus,
html[data-theme="classic-gold"] .founda-request select:focus,
html[data-theme="classic-gold"] .founda-request textarea:focus,
body[data-theme="classic-gold"] .founda-request input:focus,
body.ma-theme-classic-gold .founda-request input:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3) !important;
}

/* 12. Contact Drawer Trigger on Contact Page ------------------------------ */
html[data-theme="classic-gold"] .ma-contact-drawer-trigger,
body[data-theme="classic-gold"] .ma-contact-drawer-trigger,
body.ma-theme-classic-gold .ma-contact-drawer-trigger {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.3) 100%) !important;
  border: 1.5px solid #d4af37 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.25) !important;
}

html[data-theme="classic-gold"] .ma-contact-drawer-trigger:hover,
body[data-theme="classic-gold"] .ma-contact-drawer-trigger:hover,
body.ma-theme-classic-gold .ma-contact-drawer-trigger:hover {
  background: #d4af37 !important;
  color: #0a0802 !important;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.5) !important;
}

/* 13. Sticky Quote Tray ---------------------------------------------------- */
html[data-theme="classic-gold"] .ma65-quote-tray,
body[data-theme="classic-gold"] .ma65-quote-tray,
body.ma-theme-classic-gold .ma65-quote-tray {
  background: rgba(16, 21, 32, 0.95) !important;
  border-top: 1px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.8) !important;
}

/* 14. Footer --------------------------------------------------------------- */
html[data-theme="classic-gold"] .wd-footer,
body[data-theme="classic-gold"] .wd-footer,
body.ma-theme-classic-gold .wd-footer {
  background: #07090e !important;
  border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
  color: #94a3b8 !important;
}

html[data-theme="classic-gold"] .wd-footer a,
body[data-theme="classic-gold"] .wd-footer a,
body.ma-theme-classic-gold .wd-footer a {
  color: #cbd5e1 !important;
}

html[data-theme="classic-gold"] .wd-footer a:hover,
body[data-theme="classic-gold"] .wd-footer a:hover,
body.ma-theme-classic-gold .wd-footer a:hover {
  color: #f3e098 !important;
}

/* 15. Category Navigation, Tabs & Filter Chips ----------------------------- */
html[data-theme="classic-gold"] .category-nav-link,
body[data-theme="classic-gold"] .category-nav-link,
body.ma-theme-classic-gold .category-nav-link,
html[data-theme="classic-gold"] .ma65-filter-chip,
body[data-theme="classic-gold"] .ma65-filter-chip,
body.ma-theme-classic-gold .ma65-filter-chip,
html[data-theme="classic-gold"] .woodmart-woocommerce-layered-nav a,
body[data-theme="classic-gold"] .woodmart-woocommerce-layered-nav a {
  background: #111622 !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  color: #e2e8f0 !important;
  transition: all 0.2s ease !important;
}

html[data-theme="classic-gold"] .category-nav-link:hover,
body[data-theme="classic-gold"] .category-nav-link:hover,
body.ma-theme-classic-gold .category-nav-link:hover,
html[data-theme="classic-gold"] .category-nav-link.active,
body[data-theme="classic-gold"] .category-nav-link.active,
body.ma-theme-classic-gold .category-nav-link.active,
html[data-theme="classic-gold"] .ma65-filter-chip.is-active,
body[data-theme="classic-gold"] .ma65-filter-chip.is-active,
body.ma-theme-classic-gold .ma65-filter-chip.is-active {
  background: rgba(212, 175, 55, 0.22) !important;
  border-color: #d4af37 !important;
  color: #f3e098 !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25) !important;
}

/* 16. Theme Toggle Button -------------------------------------------------- */
html[data-theme="classic-gold"] .ma-theme-toggle,
body[data-theme="classic-gold"] .ma-theme-toggle,
body.ma-theme-classic-gold .ma-theme-toggle {
  background: #141b28 !important;
  border: 1.5px solid #d4af37 !important;
  color: #f3e098 !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35) !important;
}

html[data-theme="classic-gold"] .ma-theme-toggle:hover,
body[data-theme="classic-gold"] .ma-theme-toggle:hover,
body.ma-theme-classic-gold .ma-theme-toggle:hover {
  background: #1d2639 !important;
  border-color: #f3e098 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.55) !important;
}

/* 17. 2D Mockup Packaging Studio ------------------------------------------- */
html[data-theme="classic-gold"] .ma-mockup-wrapper,
body[data-theme="classic-gold"] .ma-mockup-wrapper,
body.ma-theme-classic-gold .ma-mockup-wrapper,
html[data-theme="classic-gold"] .ma-mockup-card,
body[data-theme="classic-gold"] .ma-mockup-card,
body.ma-theme-classic-gold .ma-mockup-card {
  background: #0f1522 !important;
  border: 1px solid rgba(212, 175, 55, 0.32) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65) !important;
}

html[data-theme="classic-gold"] .ma-mockup-preview-zone,
body[data-theme="classic-gold"] .ma-mockup-preview-zone,
body.ma-theme-classic-gold .ma-mockup-preview-zone {
  background: radial-gradient(circle at center, #182232 0%, #0a0d14 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

html[data-theme="classic-gold"] .ma-mockup-tabs button,
body[data-theme="classic-gold"] .ma-mockup-tabs button,
body.ma-theme-classic-gold .ma-mockup-tabs button {
  background: #141b28 !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

html[data-theme="classic-gold"] .ma-mockup-tabs button.active,
body[data-theme="classic-gold"] .ma-mockup-tabs button.active,
body.ma-theme-classic-gold .ma-mockup-tabs button.active {
  background: rgba(212, 175, 55, 0.24) !important;
  color: #f3e098 !important;
  border-color: #d4af37 !important;
}

/* 18. Quickbar & Sticky Floating Elements ---------------------------------- */
html[data-theme="classic-gold"] .ma65-quickbar,
body[data-theme="classic-gold"] .ma65-quickbar,
body.ma-theme-classic-gold .ma65-quickbar,
html[data-theme="classic-gold"] .whb-sticked,
body[data-theme="classic-gold"] .whb-sticked {
  background: rgba(8, 11, 16, 0.96) !important;
  border-top: 1px solid rgba(212, 175, 55, 0.35) !important;
  backdrop-filter: blur(14px) !important;
}