/* ============================================================
   4RAU Design System
   Applied: 2026-06-21
   Stack: Bootstrap 5 + SVN-Gilroy + Green brand palette
   ============================================================ */

/* ── 1. CSS VARIABLES ─────────────────────────────────────── */
:root {

  /* Font */
  --cp-font-body:    "SVN-Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cp-font-heading: "SVN-Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cp-font-menu:    "SVN-Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cp-font-title:   "SVN-Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Brand Green Palette (header gradient #435846 → #536E58 → #6b8a70) */
  --cp-primary:       #435846;   /* Darkest — buttons, headings, active states */
  --cp-primary-mid:   #536E58;   /* Mid green — hover, secondary elements */
  --cp-primary-light: #6b8a70;   /* Light green — accents, borders */
  --cp-gradient:      linear-gradient(135deg, #435846 0%, #536E58 52%, #6b8a70 100%);

  /* Derived greens — cart, checkout, interactive */
  --cp-green-dark:    #2d4a32;   /* Deepest — pressed states */
  --cp-green-pale:    #f0f7f1;   /* Very pale — hover bg, highlight bg */
  --cp-green-border:  #8aaa8e;   /* Border / divider */

  /* Sale / Highlight (orange — contrast với green) */
  --cp-sale:          #ee4d2d;
  --cp-sale-bg:       #fff1ee;
  --cp-sale-badge:    #e53e00;
  --cp-sale-dark:     #c0392b;

  /* Text Colors */
  --cp-text-primary:  #1f2937;   /* Body text */
  --cp-text-secondary:#4b5563;   /* Muted / description */
  --cp-text-muted:    #9ca3af;   /* Placeholder, disabled */
  --cp-text-on-dark:  #ffffff;   /* Text trên background tối */
  --cp-text-on-mid:   #f5f7f5;   /* Text trên mid green bg */

  /* Background Colors */
  --cp-bg-body:       #ffffff;
  --cp-bg-cream:      #F6F2EB;   /* Footer bg */
  --cp-bg-cream-dark: #F1EADF;   /* Footer bottom bar */
  --cp-bg-section:    #f8f9fa;   /* Section alternating bg */

  /* Border */
  --cp-border:        #e5e7eb;
  --cp-border-light:  #f3f4f6;

  /* Border Radius */
  --cp-radius:        12px;
  --cp-radius-lg:     16px;
  --cp-radius-sm:     8px;
  --cp-radius-pill:   9999px;

  /* Shadow */
  --cp-shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --cp-shadow-md:     0 4px 16px rgba(0,0,0,.10);
  --cp-shadow-card:   0 1px 0 rgba(0,0,0,.03);
  --cp-shadow-card-hover: 0 4px 16px rgba(0,0,0,.10);

  /* Header */
  --cp-header-height-desktop: 68px;
  --cp-header-height-nav:     50px;
  --cp-header-height-mobile:  56px;

  /* Transition */
  --cp-transition:    all .18s ease;
  --cp-transition-md: all .25s cubic-bezier(.4,0,.2,1);
}

/* ── 2. GLOBAL TYPOGRAPHY ─────────────────────────────────── */

html, body {
  font-family: var(--cp-font-body) !important;
  font-weight: 500;
  color: var(--cp-text-primary);
}

h1 {
  font-family: var(--cp-font-title) !important;
  font-weight: 800 !important;
  color: var(--cp-primary);
}

h2, h3, h4, h5, h6 {
  font-family: var(--cp-font-heading) !important;
  font-weight: 700 !important;
  color: var(--cp-primary);
}

/* Nav / header links */
header a,
header button,
nav a,
nav button {
  font-family: var(--cp-font-menu) !important;
  font-weight: 600;
}

/* Giữ icon font không bị override */
[class^="fa-"],
[class*=" fa-"],
[class^="fa "],
[class*=" fa "],
.fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
  font-weight: 900;
}

/* ── 3. SELECTION COLOR ───────────────────────────────────── */

::selection {
  background-color: rgba(67, 88, 70, .2);   /* cp-primary at 20% */
}

/* ── 4. BUTTONS ───────────────────────────────────────────── */

/* Primary button — filled green */
.cp-btn,
.cp-btn-primary,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--cp-primary);
  color: var(--cp-text-on-dark) !important;
  font-family: var(--cp-font-menu) !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  border: 2px solid var(--cp-primary);
  border-radius: var(--cp-radius);
  text-decoration: none;
  cursor: pointer;
  transition: var(--cp-transition);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cp-btn:hover,
.cp-btn-primary:hover,
.primary-button:hover {
  background: var(--cp-primary-mid);
  border-color: var(--cp-primary-mid);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(67,88,70,.35);
}

.cp-btn:active,
.cp-btn-primary:active,
.primary-button:active {
  transform: translateY(0);
  background: var(--cp-green-dark);
  border-color: var(--cp-green-dark);
}

/* Secondary button — outline green */
.cp-btn-outline,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  background: transparent;
  color: var(--cp-primary) !important;
  font-family: var(--cp-font-menu) !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  border: 2px solid var(--cp-primary);
  border-radius: var(--cp-radius);
  text-decoration: none;
  cursor: pointer;
  transition: var(--cp-transition);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cp-btn-outline:hover,
.secondary-button:hover {
  background: var(--cp-primary);
  color: #fff !important;
  text-decoration: none;
}

/* Pill button (dùng cho CTA nổi bật) */
.cp-btn-pill {
  border-radius: var(--cp-radius-pill);
  padding: 9px 24px;
}

/* Button size variants */
.cp-btn-sm { padding: 6px 16px; font-size: 13px; }
.cp-btn-lg { padding: 13px 30px; font-size: 15px; }

/* ── 5. GRADIENT UTILITIES ────────────────────────────────── */

.cp-gradient-bg {
  background: var(--cp-gradient);
  color: var(--cp-text-on-dark);
}

.cp-gradient-text {
  background: var(--cp-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 6. CARD UTILITIES ────────────────────────────────────── */

.cp-card {
  border-radius: var(--cp-radius);
  border: 1px solid var(--cp-border);
  background: #fff;
  box-shadow: var(--cp-shadow-card);
  transition: var(--cp-transition-md);
  overflow: hidden;
}

.cp-card:hover {
  box-shadow: var(--cp-shadow-card-hover);
  transform: translateY(-2px);
}

/* ── 7. BADGE / LABEL ─────────────────────────────────────── */

.cp-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--cp-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
}

.cp-badge--sale {
  background: var(--cp-sale-bg);
  color: var(--cp-sale);
  border: 1px solid var(--cp-sale);
}

.cp-badge--new {
  background: var(--cp-green-pale);
  color: var(--cp-primary);
  border: 1px solid var(--cp-green-border);
}

/* ── 8. FOOTER — override black → gradient green ─────────────── */

.footer-area {
  background: var(--cp-gradient) !important;
}

.copyright-section {
  background: var(--cp-primary) !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
}

/* Đổi màu đen utility sang gradient */
.bg-dark {
  background: var(--cp-gradient) !important;
}

/* Bootstrap btn-dark → gradient green */
.btn-dark,
.btn.btn-dark {
  background: var(--cp-gradient) !important;
  border-color: var(--cp-primary) !important;
  color: #fff !important;
}

.btn-dark:hover,
.btn.btn-dark:hover {
  background: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
  color: #fff !important;
}

.cp-badge--dark {
  background: var(--cp-primary);
  color: #fff;
  border: 1px solid var(--cp-primary);
}

/* Absolute badge trên product card */
.cp-left-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  border-radius: var(--cp-radius-pill);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
}

.cp-left-badge--sale {
  background: var(--cp-sale-badge);
  color: #fff;
}

.cp-left-badge--new {
  background: var(--cp-primary);
  color: #fff;
}

/* ── 8. SECTION HEADING ───────────────────────────────────── */

.cp-section-title {
  font-family: var(--cp-font-heading) !important;
  font-weight: 800;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--cp-primary);
  margin-bottom: 0;
  line-height: 1.2;
}

.cp-section-subtitle {
  font-size: 14px;
  color: var(--cp-text-secondary);
  font-weight: 500;
  margin-top: 4px;
}

.cp-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cp-primary);
}

.cp-section-header .cp-view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--cp-transition);
}

.cp-section-header .cp-view-all:hover {
  color: var(--cp-primary-mid);
  text-decoration: underline;
}

/* ── 9. FORM ELEMENTS ─────────────────────────────────────── */

.cp-input {
  font-family: var(--cp-font-body) !important;
  font-size: 14px;
  color: var(--cp-text-primary);
  background: #fff;
  border: 1.5px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  padding: 9px 14px;
  transition: var(--cp-transition);
  width: 100%;
}

.cp-input:focus {
  outline: none;
  border-color: var(--cp-primary-light);
  box-shadow: 0 0 0 3px rgba(67,88,70,.12);
}

.cp-input::placeholder {
  color: var(--cp-text-muted);
  font-weight: 500;
}

/* Pill search input */
.cp-search-input {
  border-radius: var(--cp-radius-pill);
  padding: 9px 42px 9px 18px;
}

/* ── 10. LINK STYLES ──────────────────────────────────────── */

a.cp-link {
  color: var(--cp-primary);
  font-weight: 600;
  text-decoration: none;
  transition: var(--cp-transition);
}

a.cp-link:hover {
  color: var(--cp-primary-mid);
  text-decoration: underline;
}

/* ── 11. PRICE DISPLAY ────────────────────────────────────── */

.cp-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.cp-price-final {
  font-family: var(--cp-font-body) !important;
  font-weight: 800;
  font-size: 16px;
  color: var(--cp-sale);
  line-height: 1.2;
}

.cp-price-final--nodiscount {
  color: var(--cp-primary);
}

.cp-price-regular {
  font-size: 13px;
  color: var(--cp-text-muted);
  text-decoration: line-through;
  font-weight: 500;
}

/* ── 12. BREADCRUMB ───────────────────────────────────────── */

.cp-breadcrumb {
  font-size: 13px;
  color: var(--cp-text-secondary);
  padding: 10px 0;
  margin-bottom: 16px;
}

.cp-breadcrumb a {
  color: var(--cp-primary);
  text-decoration: none;
  font-weight: 500;
}

.cp-breadcrumb a:hover {
  text-decoration: underline;
}

.cp-breadcrumb-sep {
  margin: 0 6px;
  color: var(--cp-text-muted);
}

/* ── 13. SCROLLBAR ────────────────────────────────────────── */

.cp-scroll {
  scrollbar-width: thin;
  scrollbar-color: #c8d5ca transparent;
}

.cp-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.cp-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.cp-scroll::-webkit-scrollbar-thumb {
  background: #c8d5ca;
  border-radius: 999px;
}

/* ── 14. UTILITY OVERRIDES ────────────────────────────────── */

/* Override Bootstrap primary color với green */
.btn-primary,
.bg-primary {
  background-color: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
}

.btn-primary:hover {
  background-color: var(--cp-primary-mid) !important;
  border-color: var(--cp-primary-mid) !important;
}

.text-primary {
  color: var(--cp-primary) !important;
}

.border-primary {
  border-color: var(--cp-primary) !important;
}

/* Bootstrap outline-primary */
.btn-outline-primary {
  color: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
  color: #fff !important;
}

/* ── 15. BACK TO TOP ──────────────────────────────────────── */

.back-to-top {
  background: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
  color: #fff !important;
  transition: var(--cp-transition) !important;
}

.back-to-top:hover {
  background: var(--cp-primary-mid) !important;
  border-color: var(--cp-primary-mid) !important;
}

/* ── 16. SMART CALL BUTTON ────────────────────────────────── */

.smart-call-btn {
  background: var(--cp-gradient) !important;
}

/* ── 17. NOTIFICATION BAR ─────────────────────────────────── */

.top-notification-bar {
  background: var(--cp-gradient) !important;
}

/* ── 18. SECTION SPACING ──────────────────────────────────── */

.cp-section {
  padding-top: 48px;
  padding-bottom: 48px;
}

.cp-section--sm {
  padding-top: 32px;
  padding-bottom: 32px;
}

@media (max-width: 767.98px) {
  .cp-section       { padding-top: 32px; padding-bottom: 32px; }
  .cp-section--sm   { padding-top: 20px; padding-bottom: 20px; }
}

/* ── 19. CTA BUTTONS (site-specific) ─────────────────────── */

/* Nút đỏ-trắng (hero CTA) */
.nut-red-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: var(--cp-sale-badge);
  color: #fff !important;
  font-family: var(--cp-font-menu) !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--cp-radius-pill);
  text-decoration: none;
  transition: var(--cp-transition);
  border: 2px solid var(--cp-sale-badge);
  letter-spacing: .02em;
}

.nut-red-white:hover {
  background: var(--cp-sale-dark);
  border-color: var(--cp-sale-dark);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Nút outline-trắng (hero secondary CTA) */
.nut-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: transparent;
  color: #fff !important;
  font-family: var(--cp-font-menu) !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--cp-radius-pill);
  text-decoration: none;
  transition: var(--cp-transition);
  border: 2px solid rgba(255,255,255,.8);
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
}

.nut-outline-white:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  color: #fff !important;
  text-decoration: none;
}