/* ========================================================================== 
   Dongphuc.me brand palette — derived from the current orange/green logo.
   Loaded last so legacy page modules inherit one consistent visual language.
   ========================================================================== */

:root {
  --brand-orange: #ff6b00;
  --brand-orange-dark: #d95400;
  --brand-orange-soft: #fff1e6;
  --brand-green: #00a33c;
  --brand-green-dark: #087a36;
  --brand-green-soft: #eaf7ef;
  --brand-forest: #153d2b;
  --brand-deep: #092a1c;
  --brand-ink: #18352a;
  --brand-muted: #617269;
  --brand-line: #d7e5dc;
  --brand-canvas: #f5f9f6;

  --nk-black: var(--brand-forest);
  --nk-ink: var(--brand-ink);
  --nk-muted: var(--brand-muted);
  --nk-line: var(--brand-line);
  --nk-bg: var(--brand-canvas);
  --nk-soft: var(--brand-green-soft);
  --nk-gold: var(--brand-orange);
  --nk-gold-dark: var(--brand-orange-dark);
  --nk-green: var(--brand-green-dark);
  --nk-red: var(--brand-orange);
  --nk-shadow: 0 18px 48px rgba(9, 65, 39, .12);
  --nk-shadow-soft: 0 16px 40px rgba(9, 65, 39, .08);
  --nk-shadow-hover: 0 26px 60px rgba(9, 65, 39, .15);

  --hf-navy: var(--brand-forest);
  --hf-navy-deep: var(--brand-deep);
  --hf-red: var(--brand-orange);
  --hf-red-deep: var(--brand-orange-dark);
  --hf-canvas: var(--brand-canvas);
  --hf-ink: var(--brand-ink);
  --hf-muted: var(--brand-muted);
  --hf-stitch: #c9dcd0;

  --ab-navy: var(--brand-forest);
  --ab-navy-deep: var(--brand-deep);
  --ab-blue: var(--brand-green-dark);
  --ab-red: var(--brand-orange);
  --ab-red-deep: var(--brand-orange-dark);
  --ab-canvas: var(--brand-canvas);
  --ab-ink: var(--brand-ink);
  --ab-muted: var(--brand-muted);
  --ab-line: var(--brand-line);
}

::selection { background: var(--brand-orange); color: #fff; }

body { color: var(--brand-ink); background: var(--brand-canvas); }
.page-hero {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-forest) 62%, var(--brand-green-dark));
}
.page-hero.has-photo {
  background:
    linear-gradient(105deg, rgba(9,42,28,.94), rgba(21,61,43,.72) 54%, rgba(9,42,28,.14)),
    var(--hero-photo) center/cover no-repeat;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid rgba(255, 107, 0, .28); outline-offset: 3px; }

/* Header and navigation --------------------------------------------------- */
.site-header { border-bottom-color: var(--brand-line); }
.site-header.is-scrolled { border-color: #cfddd4; box-shadow: 0 8px 24px rgba(9, 65, 39, .08); }
.menu a:hover,
.menu .sub-menu a:hover,
.primary-nav > .menu > li:last-child > a:hover { color: var(--brand-orange); }
.menu .sub-menu { border-color: var(--brand-line); box-shadow: 0 18px 42px rgba(9, 65, 39, .12); }
.menu .sub-menu a:hover { background: var(--brand-orange-soft); }
.header-quote {
  color: #fff;
  background: linear-gradient(135deg, #ff7a00 0%, var(--brand-orange) 55%, var(--brand-orange-dark) 100%);
  box-shadow: 0 8px 18px rgba(255, 107, 0, .24);
}
.header-quote:hover { box-shadow: 0 12px 26px rgba(255, 107, 0, .32); }
.header-search-input:focus { border-color: var(--brand-orange); }
.header-search-submit { background: var(--brand-orange); color: #fff; }
.header-search-item-meta em,
.header-search-see-all { color: var(--brand-orange); }
.nav-toggle { border-color: var(--brand-line); color: var(--brand-forest); background: #fff; }

/* Common actions and states ---------------------------------------------- */
.btn.primary,
.guide-load-more,
.product-order-btn,
.product-cta-btn {
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 107, 0, .2);
}
.btn.primary:hover,
.guide-load-more:hover,
.product-order-btn:hover,
.product-cta-btn:hover { background: var(--brand-orange-dark); }
.banner-dots button.is-active,
.category-slider-dots button.is-active { background: var(--brand-orange); }

/* Homepage --------------------------------------------------------------- */
.hf-section--navy { background: linear-gradient(145deg, var(--brand-forest), var(--brand-deep)); }
.hf-eyebrow,
.hf-project-more,
.hf-featured-price,
.hf-process-index,
.hf-blog-date { color: var(--brand-orange); }
.hf-eyebrow::before { background: var(--brand-orange); }
.hf-section--navy .hf-eyebrow { color: #ffb276; }
.hf-section--navy .hf-eyebrow::before { background: #ffb276; }
.hf-btn--primary,
.hf-intro-btn {
  background: linear-gradient(135deg, #ff7b00 0%, var(--brand-orange) 52%, var(--brand-orange-dark) 100%);
  box-shadow: 0 14px 30px rgba(255, 107, 0, .28);
}
.hf-btn--primary:hover,
.hf-intro-btn:hover {
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  box-shadow: 0 18px 38px rgba(255, 107, 0, .36);
}
.hf-showcase-cta {
  background:
    linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 88% 18%, rgba(255,107,0,.42) 0, rgba(255,107,0,0) 36%),
    linear-gradient(145deg, #15563a 0%, var(--brand-forest) 54%, var(--brand-deep) 100%);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 40px rgba(9,65,39,.2);
}
.hf-showcase-cta::after { background: var(--brand-orange); }
.hf-showcase-cta-heading { text-shadow: 0 2px 0 rgba(217,84,0,.78), 0 10px 24px rgba(0,0,0,.22); }
.hf-showcase-cta-btn { color: var(--brand-forest); }
.hf-showcase-cta-btn:hover { border-color: var(--brand-orange); background: var(--brand-orange); color: #fff; }
.hf-gallery-nav:hover,
.hf-featured-nav:hover,
.hf-product-nav:hover,
.hf-testi-arrow:hover { background: var(--brand-orange); color: #fff; }
.hf-promo-scrim { background: linear-gradient(100deg, var(--brand-deep) 10%, rgba(9,42,28,.44) 72%); }
.hf-cat-card:hover,
.hf-blog-card:hover,
.hf-why-card:hover { box-shadow: 0 20px 42px rgba(9,65,39,.12); }

/* About page ------------------------------------------------------------- */
.ab-section--navy {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,107,0,.26), transparent 31%),
    radial-gradient(circle at 92% 18%, rgba(0,163,60,.22), transparent 30%),
    linear-gradient(145deg, var(--brand-forest) 0%, var(--brand-deep) 100%);
}
.ab-btn--primary {
  background: linear-gradient(135deg, #ff7b00 0%, var(--brand-orange) 52%, var(--brand-orange-dark) 100%);
  box-shadow: 0 16px 34px rgba(255,107,0,.3), inset 0 1px 0 rgba(255,255,255,.22);
}
.ab-section--navy .ab-eyebrow { color: #ffb276; }
.ab-section--navy .ab-eyebrow::before { background: #ffb276; }
.ab-intro-media {
  background: var(--brand-green-soft);
  box-shadow: 0 24px 60px rgba(9,42,28,.16);
}
.ab-intro-copy .ab-lead { text-align: justify; text-align-last: left; }
.ab-stat {
  border-color: rgba(0,163,60,.16);
  border-top-color: var(--brand-orange);
  background: linear-gradient(180deg, #fff 0%, var(--brand-green-soft) 100%);
  box-shadow: 0 14px 30px rgba(9,42,28,.09);
}
.ab-stat-number { color: var(--brand-forest); }
.ab-why-card::after { background: rgba(255,107,0,.2); }
.ab-why-index { background: linear-gradient(135deg, #fff, var(--brand-orange-soft)); color: var(--brand-orange-dark); }

/* Product, category and archive pages ----------------------------------- */
.product-breadcrumb { background: #f3f8f5; color: var(--brand-forest); border-bottom-color: var(--brand-line); }
.product-breadcrumb a,
.product-breadcrumb strong { color: var(--brand-forest); }
.product-breadcrumb span { color: rgba(21,61,43,.48); }
.gallery-nav { border-color: var(--brand-green); color: var(--brand-forest); }
.detail-media {
  border: 1px solid rgba(21, 61, 43, .12);
  border-radius: 18px;
  background: #f7faf8;
  box-shadow: 0 18px 44px rgba(9, 65, 39, .1);
}
.detail-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.detail-thumbs button {
  border: 1px solid rgba(21, 61, 43, .14);
  border-radius: 12px;
  background: #f7faf8;
}
.detail-thumbs button.is-active {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 2px rgba(0, 163, 60, .14);
}
.gallery-nav {
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(9, 65, 39, .14);
}
.product-benefit-list li::before { color: var(--brand-green); }
.product-info-section h2 { border-bottom-color: var(--brand-green); color: var(--brand-forest); }
.related-controls button:hover { background: var(--brand-orange); color: #fff; }
.related-card h3 a:hover { color: var(--brand-orange); }
.category-demo-hero { background-color: var(--brand-green-soft); }
.category-demo-hero-copy span,
.category-demo-hero-copy strong,
.category-demo-list a:hover,
.category-demo-list .is-current a,
.category-archive-head h1,
.category-product-heading h2,
.category-seo-content h2,
.detail-copy h1 { color: var(--brand-forest); }
.category-sidebar li.is-current a,
.category-product-section .product-body p,
.size-guide-link,
.spec-icon,
.benefit-icon { color: var(--brand-green-dark); }
.category-sidebar li.is-current > .category-tree-row .category-dot {
  border-color: var(--brand-green);
  background: var(--brand-green);
  box-shadow: inset 0 0 0 4px var(--brand-green-soft);
}
.category-sidebar li.has-children > ul::before { background: var(--brand-green); }
.benefit-truck::before,
.benefit-price::before,
.benefit-price::after,
.benefit-rocket::before,
.benefit-rocket::after,
.benefit-shield::before { background: var(--brand-green); }

/* Blog and editorial ----------------------------------------------------- */
.home-faq-item summary:hover,
.post-card:hover .post-card-title a,
.guide-meta a,
.single-related-head a,
.post-toc a { color: var(--brand-green-dark); }
.guide-featured-section h1,
.guide-tabs-head h2,
.single-post-hero h1,
.single-post-content h2,
.single-post-content h3,
.single-related-head h2 { color: var(--brand-forest); }
.guide-tabs button.is-active { border-color: var(--brand-green); color: var(--brand-green-dark); }
.single-post-cat { border-color: #bde2ca; background: var(--brand-green-soft); color: var(--brand-green-dark); }
.post-toc summary::after { background: var(--brand-orange); }
.post-toc ol { color: var(--brand-forest); }
.single-post-content blockquote { border-left-color: var(--brand-orange); background: var(--brand-orange-soft); }
.single-sidebar-card::before { background: linear-gradient(90deg, var(--brand-orange), #ff9b42, var(--brand-green)); }
.single-sidebar-card h2,
.single-sidebar-list a { color: var(--brand-forest); }
.sidebar-call { background: linear-gradient(135deg, #ff7b00, var(--brand-orange) 52%, var(--brand-orange-dark)); }
.single-sidebar-list a::after { background: rgba(255,107,0,.12); color: var(--brand-orange); }
.single-sidebar-list a:hover { color: var(--brand-orange); border-color: rgba(255,107,0,.28); }

/* Forms, contact and utility modules ------------------------------------ */
.consult-dialog h2,
.production-content h2,
.production-step button strong,
.partners-copy h2,
.company-heading-row h2,
.polo-heading-row h2 { color: var(--brand-forest); }
.polo-more span,
.production-step button.is-active span { background: var(--brand-green); color: #fff; }
.polo-price,
.polo-more:hover { color: var(--brand-green-dark); }
.quote-close { color: var(--brand-orange); }
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus,
.contact-quote-form input:focus,
.contact-quote-form select:focus,
.contact-quote-form textarea:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 4px rgba(0,163,60,.12);
}
.quote-form button {
  background: linear-gradient(135deg, #ff7b00, var(--brand-orange) 52%, var(--brand-orange-dark));
  box-shadow: 0 16px 32px rgba(255,107,0,.26);
}
.promo-badges span,
.journey-icon,
.value-card-badge,
.why-timeline-node,
.about-stat-card .about-stat-icon {
  background: linear-gradient(145deg, #ff8b1f, var(--brand-orange));
}
.journey-icon::before,
.about-stat-icon::before { background: var(--brand-forest); }
.contact-info-icon-phone { background: linear-gradient(145deg, #ff8b1f, var(--brand-orange)); }
.contact-info-icon-email { background: linear-gradient(145deg, #12b957, var(--brand-green-dark)); }
.contact-info-label,
.contact-card-kicker,
.contact-form-head span { color: var(--brand-orange); }
.contact-card-kicker::before { background: var(--brand-orange); }
.contact-info-card:hover strong,
.contact-direct-lines a { color: var(--brand-green-dark); }
.contact-benefits li::before { background: rgba(0,163,60,.12); color: var(--brand-green-dark); }
.contact-hours-band { background: linear-gradient(135deg, var(--brand-deep), var(--brand-forest) 62%, #087a36); }
.contact-hour-item::before { background: linear-gradient(90deg, #ffb276, var(--brand-orange), #ffb276); }
.contact-map-title { color: var(--brand-forest); border-bottom-color: var(--brand-line); }
.contact-page { background: linear-gradient(180deg, #fff 0%, var(--brand-canvas) 46%, #fff 100%); }
.contact-hero {
  background:
    linear-gradient(105deg, rgba(9,42,28,.96) 0%, rgba(21,61,43,.82) 44%, rgba(9,42,28,.12) 100%),
    var(--hero-photo) center/cover no-repeat;
}
.contact-hero::after { background: linear-gradient(135deg, rgba(255,107,0,.92), rgba(0,163,60,.82)); }
.contact-hero-copy .eyebrow { color: #ffb276; }
.contact-info-card {
  border-color: var(--brand-line);
  background:
    linear-gradient(135deg, rgba(0,163,60,.055), transparent 42%),
    linear-gradient(180deg, #fff, #f7faf8);
  box-shadow: 0 14px 34px rgba(9,42,28,.09);
}
.contact-info-card::after { background: rgba(255,107,0,.08); }
.contact-info-card:hover {
  border-color: rgba(255,107,0,.3);
  box-shadow: 0 22px 48px rgba(9,42,28,.14);
}
.contact-info-icon { box-shadow: 0 10px 22px rgba(9,42,28,.16); }
.contact-info-icon-address { background: linear-gradient(145deg, #12b957, var(--brand-green-dark)); }
.contact-direct-card,
.contact-quote-form {
  border-color: var(--brand-line);
  background: linear-gradient(180deg, #fff, #f8fbf9);
  box-shadow: 0 20px 54px rgba(9,42,28,.11);
}
.contact-direct-card h2,
.contact-form-head h2,
.contact-map-section .section-heading h2,
.contact-faq-section .section-heading h2 { color: var(--brand-forest); }
.contact-quote-form label { color: var(--brand-ink); }
.contact-quote-form input,
.contact-quote-form select,
.contact-quote-form textarea {
  border-color: var(--brand-line);
  background: #f7faf8;
  color: var(--brand-ink);
}
.contact-hour-item {
  border-color: rgba(255,178,118,.58);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)),
    linear-gradient(135deg, rgba(255,107,0,.2), rgba(0,163,60,.12));
}
.contact-hour-item::after { background: rgba(255,107,0,.2); }
.contact-map-section { background: linear-gradient(180deg, #fff, var(--brand-canvas)); }
.contact-map-card { border-color: var(--brand-line); box-shadow: 0 18px 48px rgba(9,42,28,.11); }
.home-faq-item {
  border-color: rgba(0,163,60,.09);
  background: linear-gradient(160deg, #f7fbf8 0%, var(--brand-green-soft) 100%);
  box-shadow: 0 6px 18px rgba(9,42,28,.06);
}
.home-faq-item:hover,
.home-faq-item[open] {
  border-color: rgba(0,163,60,.2);
  background: linear-gradient(160deg, #fff 0%, #f1f9f4 100%);
  box-shadow: 0 14px 30px rgba(9,42,28,.1);
}
.home-faq-item summary i::before,
.home-faq-item summary i::after { background: var(--brand-green-dark); }

/* Normalize remaining legacy blue accents across archive/editorial UI. */
.guide-breadcrumb,
.archive-breadcrumb { background: linear-gradient(135deg, var(--brand-deep), var(--brand-forest) 58%, var(--brand-green-dark)); }
.guide-card-image,
.guide-empty,
.category-sidebar { background: var(--brand-green-soft); }
.category-intro-box { background: #f1faf4; }
.category-intro-box a,
.category-intro-box em strong { color: var(--brand-green-dark); }
.category-sidebar .category-dot { border-color: #b9d3c3; background: #f8fbf9; }

/* Footer ----------------------------------------------------------------- */
.submenu-toggle {
  display: none;
}

.site-footer {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,107,0,.24) 0, rgba(255,107,0,0) 34%),
    radial-gradient(circle at 0% 85%, rgba(0,163,60,.22) 0, rgba(0,163,60,0) 38%),
    linear-gradient(180deg, var(--brand-forest) 0%, var(--brand-deep) 100%);
}
.footer-title::before { background: var(--brand-orange); }
.footer-primary-nav a:hover { background: var(--brand-orange); color: #fff; }

@media (max-width: 980px) {
  .primary-nav {
    z-index: 100;
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-color: var(--brand-line);
    box-shadow: 0 20px 48px rgba(9, 65, 39, .16);
  }
  .primary-nav.is-open > .menu > li > a {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    color: var(--brand-deep);
    border-radius: 8px;
  }
  .primary-nav.is-open > .menu > li > a:hover,
  .primary-nav.is-open > .menu > li > a:focus-visible {
    color: var(--brand-orange-dark);
    background: var(--brand-orange-soft);
  }
  .primary-nav.is-open .menu-item-has-children {
    position: relative;
  }
  .primary-nav.is-open > .menu > .menu-item-has-children > a {
    padding-right: 50px;
  }
  .primary-nav.is-open > .menu > .menu-item-has-children > a::after {
    content: none;
  }
  .primary-nav.is-open .submenu-toggle {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: 2px;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--brand-deep);
    background: transparent;
    cursor: pointer;
  }
  .primary-nav.is-open .submenu-toggle::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }
  .primary-nav.is-open .submenu-toggle:hover,
  .primary-nav.is-open .submenu-toggle:focus-visible {
    color: var(--brand-orange-dark);
    background: var(--brand-orange-soft);
  }
  .primary-nav.is-open .is-submenu-open > .submenu-toggle::before {
    transform: translateY(2px) rotate(225deg);
  }
  .primary-nav.is-open .menu .sub-menu {
    display: none;
    position: static;
    min-width: 0;
    margin: 0;
    padding: 2px 0 6px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .primary-nav.is-open .menu .is-submenu-open > .sub-menu {
    display: block;
    animation: nk-mobile-submenu-drop .22s ease both;
  }
  .primary-nav.is-open .menu .sub-menu a {
    width: 100%;
    min-height: 38px;
    padding: 7px 12px;
    color: #365548;
    background: transparent;
    border-left: 2px solid #dce9e2;
    border-radius: 0 7px 7px 0;
  }
  .primary-nav.is-open .menu .sub-menu a:hover,
  .primary-nav.is-open .menu .sub-menu a:focus-visible {
    color: var(--brand-orange-dark);
    background: var(--brand-orange-soft);
    border-left-color: var(--brand-orange);
  }
}

@keyframes nk-mobile-submenu-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .site-footer {
    background:
      radial-gradient(circle at 100% 0%, rgba(255,107,0,.24) 0, rgba(255,107,0,0) 34%),
      radial-gradient(circle at 0% 85%, rgba(0,163,60,.22) 0, rgba(0,163,60,0) 38%),
      linear-gradient(180deg, var(--brand-forest) 0%, var(--brand-deep) 100%);
  }
  .footer-primary-nav a:hover { background: var(--brand-orange); }
  .footer-title::before { background: var(--brand-orange); }
}