/* =============================================
   PLEI ROASTERY — NAVY × GOLD × PARCHMENT THEME
   Font: Fraunces (display) + Plus Jakarta Sans (body)
   Palette: Deep navy · Warm gold · Parchment · Tan
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,400;1,9..144,600&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');

/* ── Variables ─────────────────────────────── */
:root {
  /* ── Navy × Gold × Parchment — theo bao bì Plei Roastery ── */

  /* Navy (thay thế Forest Green) */
  --forest:       #16213E;   /* Navy đậm — primary dark */
  --forest-mid:   #1E2D52;   /* Navy trung */
  --forest-light: #2E4080;   /* Navy nhạt */

  /* Gold (thay thế Sage) */
  --sage:         #9B8B6E;   /* Warm tan */
  --sage-pale:    #F5ECD7;   /* Parchment nhạt */
  --sage-border:  #DDD0B8;   /* Border parchment */

  /* Gold accent (thay thế Copper) */
  --copper:       #C8963C;   /* Gold chính */
  --copper-warm:  #D4A84B;   /* Gold ấm */
  --copper-pale:  #F5ECD7;   /* Parchment */

  /* Parchment (thay thế Sand) */
  --sand:         #F5ECD7;   /* Parchment chính */
  --sand-warm:    #FBF5E6;   /* Parchment nhạt */
  --sand-border:  #DDD0B8;   /* Border */
  --sand-deep:    #EDE0C4;   /* Parchment đậm */

  /* Text */
  --ink:          #1A1628;   /* Navy ink */
  --ink-mid:      #3D3A52;   /* Ink trung */
  --ink-muted:    #7A7590;   /* Ink mờ */

  /* On-dark */
  --dk-1:   #F5ECD7;         /* Parchment — headings */
  --dk-2:   #C8BFA0;         /* Warm tan — body */
  --dk-3:   #9B8B6E;         /* Muted tan */
  --dk-acc: #D4A84B;         /* Gold accent */

  /* Typography */
  --display: "Fraunces", Georgia, serif;
  --body:    "Plus Jakarta Sans", system-ui, sans-serif;

  /* Radius */
  --r:   8px;
  --rm:  12px;
  --rl:  16px;
  --t:   all .2s ease;
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--sand);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--forest-light); text-decoration: none; transition: var(--t); }
a:hover { color: var(--copper); }
img { max-width: 100%; display: block; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--display);
  line-height: 1.2;
  color: var(--forest);
}

/* ── Utility ────────────────────────────────── */
.bg-light-warm { background: var(--sage-pale) !important; }
.text-primary-cc { color: var(--copper) !important; }

/* ── Buttons ─────────────────────────────────── */
.btn-primary-cc {
  background: var(--forest);
  color: var(--dk-acc);
  border: none;
  border-radius: var(--r);
  font-family: var(--body);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .4px;
  padding: .65rem 1.6rem;
  transition: var(--t);
  cursor: pointer;
}
.btn-primary-cc:hover {
  background: var(--forest-mid);
  color: var(--dk-acc);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15,36,25,.25);
}
.btn-outline-cc {
  border: 1.5px solid var(--forest);
  color: var(--forest);
  background: transparent;
  border-radius: var(--r);
  font-weight: 600;
  font-size: .875rem;
  padding: .6rem 1.5rem;
  transition: var(--t);
}
.btn-outline-cc:hover { background: var(--forest); color: var(--dk-1); }

/* ── HEADER ─────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--sand-warm);
  border-bottom: 1px solid var(--sand-border);
  box-shadow: 0 1px 12px rgba(15,36,25,.06);
}

.header-topbar {
  background: var(--forest);
  padding: .45rem 0;
  font-size: .75rem;
  color: var(--dk-3);
}
.header-topbar .container { display: flex; justify-content: space-between; align-items: center; }
.header-topbar a { color: var(--dk-3); font-size: .75rem; }
.header-topbar a:hover { color: var(--dk-acc); }

.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-main {
  font-family: var(--display);
  font-size: 1rem; font-weight: 400;
  color: var(--forest);
  letter-spacing: 2px;
}
.logo-sub {
  font-size: .55rem; letter-spacing: 7px;
  color: var(--sage); text-transform: uppercase;
  margin-top: 2px; font-family: var(--body); font-weight: 500;
}

.header-search { max-width: 380px; flex: 1; margin: 0 2rem; display: flex; }
.header-search .form-control {
  background: var(--sage-pale);
  border: 1px solid var(--sage-border);
  color: var(--ink);
  border-radius: var(--r) 0 0 var(--r);
  font-family: var(--body); font-size: .875rem;
  padding: .5rem 1rem;
}
.header-search .form-control:focus {
  background: #fff; border-color: var(--sage); box-shadow: none;
}
.btn-search {
  background: var(--forest); border: none;
  color: var(--dk-acc);
  border-radius: 0 var(--r) var(--r) 0; padding: .5rem 1rem;
}
.btn-search:hover { background: var(--forest-mid); }

.header-action-btn {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mid); font-size: 1.15rem;
  width: 38px; height: 38px; border-radius: var(--r); transition: var(--t);
}
.header-action-btn:hover { background: var(--sage-pale); color: var(--forest); }
.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: -3px; right: -3px;
  background: var(--copper); color: #fff;
  font-size: .6rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.btn-menu {
  background: var(--sage-pale); border: 1px solid var(--sage-border);
  color: var(--forest); border-radius: var(--r);
  padding: .4rem .65rem; font-size: 1.1rem;
}

/* Nav */
.site-nav { background: var(--sand-warm); border-top: 1px solid var(--sand-border); }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: .1rem; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: .3rem;
  color: var(--ink-mid);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .7px; text-transform: uppercase;
  padding: .75rem 1rem; transition: var(--t);
  font-family: var(--body);
}
.nav-link:hover, .nav-link.active { color: var(--forest); }
.nav-link i { font-size: .65rem; transition: transform .2s; }
.nav-item:hover > .nav-link i { transform: rotate(180deg); }

.dropdown-nav {
  position: absolute; top: 100%; left: 0;
  background: var(--sand-warm);
  border: 1px solid var(--sand-border);
  border-radius: var(--rm); min-width: 210px;
  list-style: none; padding: .5rem 0;
  box-shadow: 0 8px 32px rgba(15,36,25,.1);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: var(--t); z-index: 100;
}
.nav-item:hover .dropdown-nav { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-nav li a {
  display: block; padding: .5rem 1.2rem;
  color: var(--ink-mid); font-size: .85rem; transition: var(--t);
}
.dropdown-nav li a:hover { color: var(--forest); background: var(--sage-pale); }

/* Mobile menu */
.mobile-menu {
  position: fixed; top: 0; left: -100%; width: 300px; height: 100vh;
  background: var(--forest); z-index: 2000; overflow-y: auto;
  transition: left .3s ease; box-shadow: 4px 0 30px rgba(0,0,0,.3);
}
.mobile-menu.open { left: 0; }
.mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1999; display: none; }
.mobile-overlay.show { display: block; }
.mobile-menu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu-title { color: var(--dk-1); font-weight: 600; }
.btn-close-menu { background: none; border: none; color: var(--dk-3); font-size: 1.2rem; cursor: pointer; }
.mobile-nav-list { list-style: none; padding: 1rem 0; }
.mobile-nav-list li a {
  display: block; padding: .75rem 1.5rem; color: var(--dk-2);
  font-weight: 400; border-bottom: 1px solid rgba(255,255,255,.05); transition: var(--t);
}
.mobile-nav-list li a:hover { color: var(--dk-acc); background: rgba(255,255,255,.04); }

/* ── HERO ────────────────────────────────────── */
.hero-section { position: relative; overflow: hidden; }
.hero-swiper { width: 100%; }
.hero-slide { min-height: 580px; display: flex; align-items: center; position: relative; }

/* Decorative rings on hero */
.hero-slide::before {
  content: '';
  position: absolute; top: -100px; right: -120px;
  width: 500px; height: 500px;
  border: 1px solid rgba(212,149,106,.12); border-radius: 50%;
  pointer-events: none;
}
.hero-slide::after {
  content: '';
  position: absolute; top: -50px; right: -70px;
  width: 340px; height: 340px;
  border: 1px solid rgba(212,149,106,.07); border-radius: 50%;
  pointer-events: none;
}

.hero-label {
  display: flex; align-items: center; gap: 10px;
  font-size: .7rem; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--sage); margin-bottom: 1.1rem;
}
.hero-label::before { content: ''; width: 26px; height: 1px; background: var(--sage); }

.hero-title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  color: var(--dk-1);
  line-height: 1.05; margin-bottom: 1rem;
}
.hero-title em { color: var(--dk-acc); font-style: italic; font-weight: 500; }

.hero-desc {
  color: var(--dk-2);
  font-size: .95rem; line-height: 1.85;
  max-width: 460px; margin-bottom: 2.25rem;
  font-weight: 300;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.swiper-button-prev, .swiper-button-next { color: rgba(251,247,240,.5) !important; }
.swiper-button-prev:hover, .swiper-button-next:hover { color: var(--dk-acc) !important; }
.swiper-pagination-bullet { background: rgba(251,247,240,.3) !important; }
.swiper-pagination-bullet-active { background: var(--dk-acc) !important; }

/* ── USP BAR ─────────────────────────────────── */
.usp-bar { background: var(--forest-mid) !important; border-bottom: 1px solid rgba(255,255,255,.06); }
.usp-bar .usp-item { padding: .6rem; }
.usp-bar .bi { color: var(--dk-acc) !important; }
.usp-bar strong { color: var(--dk-1) !important; font-weight: 600; }
.usp-bar .text-muted { color: var(--dk-3) !important; }

/* ── SECTION LABELS ──────────────────────────── */
.section-label {
  display: flex; align-items: center; gap: 9px;
  font-size: .7rem; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--sage); margin-bottom: .5rem;
}
.section-label::before { content: ''; width: 20px; height: 1px; background: var(--sage); }

.section-title {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700; color: var(--forest); margin-bottom: .5rem;
}

/* Overrides on dark backgrounds */
.bg-dark .section-label, section.bg-dark .section-label { color: var(--dk-acc) !important; }
.bg-dark .section-label::before { background: var(--dk-acc) !important; }
.bg-dark .section-title { color: var(--dk-1) !important; }

/* ── PRODUCT CARD ────────────────────────────── */
.product-card {
  background: #fff; border-radius: var(--rm);
  border: 1px solid var(--sand-border);
  overflow: hidden; transition: var(--t); height: 100%;
}
.product-card:hover {
  box-shadow: 0 10px 36px rgba(15,36,25,.1);
  transform: translateY(-3px);
  border-color: var(--sage);
}
.product-badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: .65rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; letter-spacing: .5px;
}
.badge-sale  { background: #C0392B; color: #fff; }
.badge-hot   { background: var(--forest); color: var(--dk-acc); }
.badge-new   { background: var(--forest-light); color: #fff; }

.product-card-img-wrap {
  display: block; overflow: hidden; position: relative;
  aspect-ratio: 1/1; background: var(--sage-pale);
}
.product-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.product-card:hover .product-card-img { transform: scale(1.06); }

.product-card-overlay {
  position: absolute; inset: 0;
  background: rgba(15,36,25,.3);
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  opacity: 0; transition: var(--t);
}
.product-card:hover .product-card-overlay { opacity: 1; }

.btn-quick-view, .btn-add-cart {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sand-warm); border: none; color: var(--forest);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: var(--t); transform: translateY(6px);
}
.product-card:hover .btn-quick-view,
.product-card:hover .btn-add-cart { transform: translateY(0); }
.btn-quick-view:hover, .btn-add-cart:hover { background: var(--copper-warm); color: var(--forest); }

.product-card-body { padding: 1rem 1.1rem; }
.product-category-tag {
  font-size: .65rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sage); margin-bottom: .35rem;
}
.product-card-name {
  font-family: var(--display); font-size: 1rem; font-weight: 500;
  color: var(--forest); line-height: 1.3; margin-bottom: .5rem;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.product-card-name a { color: var(--forest); }
.product-card-name a:hover { color: var(--copper); }

.price-current { font-size: 1.05rem; font-weight: 700; color: var(--copper); }
.price-original { font-size: .8rem; color: var(--ink-muted); text-decoration: line-through; margin-left: 6px; }

.btn-add-to-cart {
  background: transparent; border: 1.5px solid var(--forest);
  color: var(--forest); border-radius: var(--r);
  font-size: .8rem; font-weight: 600; padding: .45rem .75rem;
  transition: var(--t); font-family: var(--body);
}
.btn-add-to-cart:hover { background: var(--forest); color: var(--dk-acc); }

/* ── CATEGORY CARDS ──────────────────────────── */
.category-card {
  display: block; text-align: center; padding: 1.5rem 1rem;
  border-radius: var(--rm); background: #fff;
  border: 1px solid var(--sand-border); transition: var(--t); color: var(--ink);
}
.category-card:hover {
  border-color: var(--sage); box-shadow: 0 4px 16px rgba(15,36,25,.08);
  transform: translateY(-3px); color: var(--forest);
}
.category-icon {
  width: 56px; height: 56px; background: var(--sage-pale);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--forest-light);
  margin: 0 auto .75rem; transition: var(--t);
}
.category-card:hover .category-icon { background: var(--forest); color: var(--dk-acc); }
.category-name { font-size: .78rem; font-weight: 600; margin: 0; }

/* ── SERVICE CARDS ───────────────────────────── */
.service-card {
  border-radius: var(--rl); overflow: hidden;
  min-height: 260px; display: flex; align-items: flex-end; transition: var(--t);
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.service-card-content { padding: 2rem; }
.service-badge {
  display: inline-block; font-size: .6rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  background: rgba(255,255,255,.1); color: rgba(251,247,240,.85);
  padding: 3px 10px; border-radius: 20px; margin-bottom: .75rem;
}
.service-card h3 {
  font-family: var(--display); font-size: 1.7rem; font-weight: 700;
  color: var(--dk-1); margin-bottom: .5rem;
}
.service-card p { color: var(--dk-2); font-size: .875rem; line-height: 1.7; font-weight: 300; }

/* ── WHY SECTION ─────────────────────────────── */
.why-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.why-item { display: flex; gap: 1.25rem; align-items: flex-start; }
.why-icon {
  min-width: 48px; height: 48px; background: var(--sage-pale);
  border: 1px solid var(--sage-border); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--forest-light); font-size: 1.2rem;
}
.why-item h5 { font-size: .95rem; font-weight: 600; color: var(--forest); margin-bottom: .25rem; }
.why-item p  { font-size: .85rem; color: var(--ink-muted); margin: 0; line-height: 1.6; }

.why-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat-box {
  background: #fff; border: 1px solid var(--sand-border);
  border-radius: var(--rm); padding: 1.75rem 1rem; text-align: center;
}
.stat-box h3 { font-family: var(--display); font-size: 2.5rem; font-weight: 700; color: var(--copper); line-height: 1; margin-bottom: .35rem; }
.stat-box p  { font-size: .75rem; color: var(--ink-muted); margin: 0; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; }

/* Dark overrides for stat boxes */
.bg-dark .stat-box { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.bg-dark .stat-box h3 { color: var(--dk-acc); }
.bg-dark .stat-box p  { color: var(--dk-3); }
.bg-dark strong { color: var(--dk-1) !important; }
.bg-dark .text-muted, .bg-dark small { color: var(--dk-3) !important; }
.bg-dark .bi { color: var(--dk-acc) !important; }

/* ── BLOG CARDS ──────────────────────────────── */
.post-card {
  background: #fff; border-radius: var(--rm); border: 1px solid var(--sand-border);
  overflow: hidden; transition: var(--t); height: 100%;
}
.post-card:hover { box-shadow: 0 8px 28px rgba(15,36,25,.1); transform: translateY(-3px); }
.post-card-img-wrap { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--sage-pale); }
.post-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.post-card:hover .post-card-img { transform: scale(1.05); }
.post-category-badge {
  position: absolute; bottom: 12px; left: 12px;
  background: var(--forest); color: var(--dk-acc);
  font-size: .65rem; font-weight: 700; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 20px;
}
.post-card-body { padding: 1.25rem; }
.post-meta { font-size: .75rem; color: var(--ink-muted); margin-bottom: .75rem; }
.post-card-title {
  font-family: var(--display); font-size: 1.05rem; font-weight: 500;
  color: var(--forest); line-height: 1.35; margin-bottom: .75rem;
}
.post-card-title a { color: var(--forest); }
.post-card-title a:hover { color: var(--copper); }
.post-card-excerpt { font-size: .85rem; color: var(--ink-muted); line-height: 1.6; }
.post-read-more { font-size: .82rem; font-weight: 600; color: var(--copper); }

/* ── BESTSELLER SECTION ──────────────────────── */
.section-bestseller { background: var(--forest) !important; }
.section-bestseller .section-title { color: var(--dk-1) !important; }
.section-bestseller .section-label { color: var(--dk-acc) !important; }
.section-bestseller .section-label::before { background: var(--dk-acc) !important; }
.section-bestseller .product-card { background: #fff; }

/* ── NEWSLETTER ──────────────────────────────── */
.section-newsletter { background: var(--sage-pale) !important; border-top: 1px solid var(--sage-border); border-bottom: 1px solid var(--sage-border); }
.section-newsletter h3 { color: var(--forest) !important; font-family: var(--display); font-size: 1.8rem !important; font-weight: 700; }
.section-newsletter p  { color: var(--ink-mid) !important; }
.newsletter-form .form-control {
  background: #fff !important; border: 1.5px solid var(--sage-border) !important;
  color: var(--ink) !important; border-radius: var(--r);
}
.newsletter-form .form-control::placeholder { color: var(--ink-muted) !important; }
.newsletter-form .form-control:focus { border-color: var(--forest-light) !important; box-shadow: 0 0 0 3px rgba(45,90,61,.12) !important; }
.newsletter-form .btn-primary-cc { background: var(--forest) !important; color: var(--dk-acc) !important; }

/* ── FOOTER ──────────────────────────────────── */
.site-footer { background: #0A1A10; }
.footer-main { border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-main .logo-main { color: var(--dk-1); }
.footer-main .logo-sub  { color: var(--sage); }
.footer-main p { color: var(--dk-3); font-size: .875rem; line-height: 1.7; font-weight: 300; }
.footer-contact a { color: var(--dk-3); }
.footer-contact a:hover { color: var(--dk-acc); }
.footer-heading { font-size: .7rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--dk-1) !important; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links a { color: #5A7866 !important; font-size: .875rem; font-weight: 300; transition: var(--t); }
.footer-links a:hover { color: var(--dk-acc) !important; }
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: #5A7866; font-size: .95rem; margin-right: 6px; transition: var(--t);
}
.social-icon:hover { background: var(--forest-mid); color: var(--dk-acc); border-color: rgba(212,149,106,.3); }
.payment-badge { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #5A7866; font-size: .7rem; font-weight: 500; padding: 4px 10px; border-radius: 6px; }
.footer-bottom p { color: rgba(255,255,255,.25); font-size: .78rem; }

/* ── PRODUCT DETAIL ──────────────────────────── */
.product-main-img { border-radius: var(--rl); overflow: hidden; background: var(--sage-pale); }
.product-main-img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.product-detail-name { font-family: var(--display); font-size: 1.8rem; font-weight: 700; color: var(--forest); margin-bottom: .75rem; line-height: 1.2; }
.price-main { font-size: 1.9rem; font-weight: 700; color: var(--copper); }
.price-old  { font-size: 1rem; color: var(--ink-muted); text-decoration: line-through; }

.btn-variant { padding: .5rem 1.1rem; border: 1.5px solid var(--sand-border); border-radius: var(--r); background: #fff; font-size: .85rem; font-weight: 500; color: var(--ink); transition: var(--t); font-family: var(--body); }
.btn-variant:hover, .btn-variant.active { border-color: var(--forest); background: var(--forest); color: var(--dk-acc); }

.quantity-control { display: flex; align-items: center; border: 1.5px solid var(--sand-border); border-radius: var(--r); overflow: hidden; }
.qty-btn { width: 38px; height: 42px; border: none; background: var(--sage-pale); color: var(--forest); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: var(--t); }
.qty-btn:hover { background: var(--forest); color: var(--dk-acc); }
.qty-input { width: 52px; height: 42px; border: none; border-left: 1px solid var(--sand-border); border-right: 1px solid var(--sand-border); text-align: center; font-weight: 600; font-size: .95rem; }

.nav-tabs-product { border-bottom: 2px solid var(--sand-border); }
.nav-tabs-product .nav-link { color: var(--ink-muted); font-weight: 500; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: .75rem 1.25rem; font-family: var(--body); }
.nav-tabs-product .nav-link.active { color: var(--forest); border-bottom-color: var(--forest); }
.product-tab-content { border: 1px solid var(--sand-border); border-radius: 0 0 var(--rm) var(--rm); padding: 2rem; }

/* ── SHOP / SIDEBAR ──────────────────────────── */
.sidebar-filter { position: sticky; top: 120px; }
.filter-block { background: #fff; border: 1px solid var(--sand-border); border-radius: var(--rm); padding: 1.25rem; margin-bottom: 1rem; }
.filter-title { font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--forest); margin-bottom: 1rem; }
.filter-list { list-style: none; padding: 0; margin: 0; }
.filter-list li a { display: block; padding: .4rem 0; font-size: .875rem; color: var(--ink-muted); transition: var(--t); border-bottom: 1px solid var(--sand-border); }
.filter-list li:last-child a { border-bottom: none; }
.filter-list li a:hover, .filter-list li a.active { color: var(--forest); font-weight: 600; padding-left: .5rem; }

/* ── CHECKOUT ────────────────────────────────── */
.checkout-section { background: #fff; border: 1px solid var(--sand-border); border-radius: var(--rm); padding: 1.75rem; }
.checkout-section-title { font-size: .78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--forest); margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 2px solid var(--sage-pale); }
.payment-method-option { display: block; margin-bottom: .75rem; cursor: pointer; }
.payment-method-option input { display: none; }
.payment-method-card { display: flex; align-items: center; gap: 1rem; border: 1.5px solid var(--sand-border); border-radius: var(--rm); padding: 1rem 1.25rem; transition: var(--t); }
.payment-method-option input:checked + .payment-method-card { border-color: var(--forest); background: rgba(15,36,25,.03); }
.payment-method-card:hover { border-color: var(--sage); }
.order-summary { background: var(--sage-pale); border: 1px solid var(--sage-border); border-radius: var(--rm); padding: 1.75rem; }

/* ── BREADCRUMB ──────────────────────────────── */
.breadcrumb-bar { background: var(--sage-pale) !important; border-bottom: 1px solid var(--sage-border); }
.breadcrumb-item a { color: var(--forest-light); }
.breadcrumb-item.active { color: var(--ink-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-muted); }

/* ── MISC ────────────────────────────────────── */
.alert { border-radius: var(--rm); border: none; }
.alert-success { background: #EDFAF3; color: #1A6940; }
.alert-danger   { background: #FEF0EE; color: #9B2E20; }
.alert-info     { background: #EBF3FC; color: #1A4E82; }

.page-link { border-radius: var(--r) !important; font-weight: 500; font-size: .875rem; color: var(--forest); border-color: var(--sand-border); padding: .45rem .9rem; font-family: var(--body); }
.page-link:hover { background: var(--sage-pale); color: var(--forest); border-color: var(--sage); }
.page-item.active .page-link { background: var(--forest); border-color: var(--forest); }

.form-control, .form-select { border-color: var(--sand-border); border-radius: var(--r); font-family: var(--body); font-size: .875rem; color: var(--ink); background: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(123,166,138,.15); }

/* Cart mini, back-to-top, zalo — matching forest theme */
.cart-mini-popup { position: fixed; right: -340px; top: 0; width: 320px; height: 100vh; background: #fff; z-index: 3000; box-shadow: -4px 0 30px rgba(15,36,25,.1); display: flex; flex-direction: column; transition: right .3s ease; }
.cart-mini-popup.open { right: 0; }
.cart-mini-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; border-bottom: 1px solid var(--sand-border); font-family: var(--display); font-size: 1.1rem; font-weight: 500; color: var(--forest); }
.btn-close-mini { background: none; border: none; font-size: 1.3rem; color: var(--ink-muted); cursor: pointer; }
.cart-mini-items { flex: 1; overflow-y: auto; padding: 1rem; }
.cart-mini-footer { padding: 1rem; border-top: 1px solid var(--sand-border); }

.btn-back-top { position: fixed; bottom: 100px; right: 20px; z-index: 999; width: 42px; height: 42px; background: var(--forest); color: var(--dk-acc); border: none; border-radius: var(--r); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--t); }
.btn-back-top.show { opacity: 1; visibility: visible; }
.btn-back-top:hover { background: var(--forest-mid); transform: translateY(-2px); }

.zalo-float { position: fixed; bottom: 50px; right: 20px; z-index: 999; width: 50px; height: 50px; background: #0068FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,104,255,.35); animation: bounceZalo 2.5s ease infinite; }
.zalo-float:hover { transform: scale(1.1); }
@keyframes bounceZalo { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-5px) } }

/* Toast */
.toast-container-cc { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; pointer-events: none; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.cc-toast { background: var(--forest); color: var(--dk-1); padding: .7rem 1.5rem; border-radius: 30px; font-size: .875rem; font-weight: 500; display: flex; align-items: center; gap: .6rem; box-shadow: 0 4px 20px rgba(0,0,0,.2); animation: toastIn .3s ease; }
.cc-toast.success { background: var(--forest-light); }
.cc-toast.error   { background: #9B2E20; }
@keyframes toastIn { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none} }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 768px) {
  .hero-slide { min-height: 400px; }
  .hero-title  { font-size: 2rem; }
  .section-title { font-size: 1.6rem; }
  .service-card { min-height: 200px; }
}
@media (min-width: 1200px) {
  .hero-slide { min-height: 620px; }
}


/* ===== TOPBAR FIX - 2026-04-01 ===== */

/* Topbar: 2 nhóm trái/phải */
.header-topbar { padding: .4rem 0 !important; }

.header-topbar .container,
.header-topbar .container-fluid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Class cũ: htop */
.htop {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 7px 1.5rem !important;
  width: 100%;
}

.header-topbar a,
.htop a { white-space: nowrap; }

/* Mobile */
@media (max-width: 576px) {
  .header-topbar .container,
  .htop {
    flex-direction: column !important;
    text-align: center;
    gap: .2rem;
  }
}
.swiper-button-prev,
.swiper-button-next { display: none !important; }
/* ── Hero slide: thu gọn chiều cao ── */
.hero-slide {
  min-height: 380px !important;
}

@media (max-width: 768px) {
  .hero-slide {
    min-height: 260px !important;
  }
}

@media (min-width: 1200px) {
  .hero-slide {
    min-height: 420px !important;
  }
}

/* ── Packaging hero: fix image size ── */
.plei-pkg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 12px;
}
.plei-pkg-c {
    width: 160px !important;
    height: 280px !important;
}
.plei-pkg-l,
.plei-pkg-r {
    width: 130px !important;
    height: 240px !important;
}
@media(max-width:768px) {
    .plei-pkg-c { width: 120px !important; height: 210px !important; }
    .plei-pkg-l, .plei-pkg-r { width: 100px !important; height: 180px !important; }
    .plei-pkg-scene { height: 280px !important; }
}

/* ── Hero slide layout fix ── */
.hero-section,
.hero-section .swiper,
.hero-section .swiper-wrapper,
.hero-section .swiper-slide {
    width: 100% !important;
}
.plei-slide {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    min-height: 420px !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}
.plei-slide-left {
    flex: 0 0 44% !important;
    max-width: 44% !important;
    padding: 3rem 2rem 3rem calc((100vw - 1200px) / 2 + 3rem) !important;
}
.plei-slide-right {
    flex: 0 0 56% !important;
    max-width: 56% !important;
    padding: 1rem calc((100vw - 1200px) / 2 + 1rem) 1rem 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.plei-pkg-scene {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}
@media(max-width:1240px) {
    .plei-slide-left { padding: 3rem 2rem 3rem 3rem !important; }
    .plei-slide-right { padding: 1rem 2rem 1rem 0 !important; }
}
@media(max-width:992px) {
    .plei-slide { flex-direction: column !important; padding: 0 !important; }
    .plei-slide-left { flex: none !important; max-width: 100% !important; width: 100% !important; padding: 2rem 1.5rem 1rem !important; }
    .plei-slide-right { flex: none !important; max-width: 100% !important; width: 100% !important; padding: 0 1rem 1.5rem !important; }
}/* ── Product grid: 2 cột trên mobile ── */
@media(max-width:575px){
  .product-grid .col-6,
  .product-grid [class*="col-md-"],
  .product-grid [class*="col-lg-"],
  .products-section .col-6,
  .products-section [class*="col-md-"],
  .products-section [class*="col-lg-"],
  .row.product-row .col-md-6,
  .row.product-row .col-lg-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
/* product-grid-mobile marker */

/* ── Cat grid: always scroll horizontal ── */
.plei-cat-grid {
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    padding-bottom:4px;
    scroll-snap-type:x mandatory;
}
.plei-cat-grid::-webkit-scrollbar{display:none}
.plei-cat-card {
    flex:0 0 160px!important;
    min-width:140px!important;
    scroll-snap-align:start;
}
@media(max-width:480px){
    .plei-cat-card{flex:0 0 calc(50vw - 20px)!important;min-width:130px!important}
}


/* ── Premium Navy × Gold overrides ── */
.bg-dark, .section-bestseller, .section-why {
    background: var(--forest) !important;
}
.btn-primary-cc {
    background: var(--copper) !important;
    color: #16213E !important;
    font-weight: 700 !important;
}
.btn-primary-cc:hover {
    background: var(--copper-warm) !important;
    color: #16213E !important;
    box-shadow: 0 6px 24px rgba(200,150,60,.3) !important;
}
.btn-outline-cc {
    border-color: var(--forest) !important;
    color: var(--forest) !important;
}
.btn-outline-cc:hover {
    background: var(--forest) !important;
    color: var(--copper-warm) !important;
}
.text-primary-cc { color: var(--copper) !important; }
.section-label {
    color: var(--copper) !important;
}
/* Breadcrumb */
.breadcrumb-bar { background: var(--sand-warm); border-bottom: 1px solid var(--sand-border); }
/* Header */
.site-header { background: #fff; box-shadow: 0 1px 0 var(--sand-border); }
/* Category cards */
.plei-cat-card:hover { border-color: var(--copper) !important; }
.plei-cat-icon { background: var(--sage-pale) !important; }
/* Product cards */
.product-card { border-radius: var(--rl); overflow: hidden; }
/* Footer links */
footer a:hover { color: var(--copper) !important; }
/* USP bar */
.usp-bar, .section-usp { background: var(--forest) !important; }


/* ── Footer Navy Theme ── */
footer, .site-footer, .footer {
    background: #0E1A33 !important;
    color: #C8BFA0 !important;
}
footer h5, footer h6, footer .footer-title,
.site-footer h5, .site-footer h6 {
    color: #F5ECD7 !important;
}
footer a, .site-footer a {
    color: #9B8B6E !important;
}
footer a:hover, .site-footer a:hover {
    color: #D4A84B !important;
}
footer .text-muted, .site-footer .text-muted {
    color: #6B6255 !important;
}
footer hr, .site-footer hr {
    border-color: rgba(200,150,60,.15) !important;
}
footer .btn, .site-footer .btn {
    border-color: #C8963C !important;
    color: #C8963C !important;
}
footer .btn:hover, .site-footer .btn:hover {
    background: #C8963C !important;
    color: #0E1A33 !important;
}
footer .bi, .site-footer .bi {
    color: #C8963C !important;
}
/* Footer bottom bar */
footer .border-top, .site-footer .border-top {
    border-color: rgba(200,150,60,.1) !important;
}


/* ── Product Cards Fix ── */
.product-card {
    background: #fff !important;
    border: 1px solid var(--sand-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}
.product-card .product-card-body,
.product-card .card-body {
    padding: 1rem !important;
    display: block !important;
    visibility: visible !important;
}
.product-card .product-name,
.product-card .card-title,
.product-card h5, .product-card h6 {
    font-family: var(--display) !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: var(--forest) !important;
    display: block !important;
    visibility: visible !important;
    margin-bottom: .4rem !important;
}
.product-card .product-price,
.product-card .price {
    font-family: var(--display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--copper) !important;
    display: block !important;
}
.product-card .product-cat-tag,
.product-card .category-tag {
    font-size: .62rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--copper) !important;
    display: block !important;
    margin-bottom: .3rem !important;
}
.product-card .btn-add-to-cart,
.product-card .add-to-cart {
    display: inline-flex !important;
    visibility: visible !important;
}


/* ── Categories Navy Style ── */
.plei-cat-card {
    background: #fff !important;
    border: 1.5px solid var(--sand-border) !important;
    border-radius: 14px !important;
    padding: 1.5rem 1rem !important;
    transition: all .25s ease !important;
}
.plei-cat-card:hover {
    border-color: var(--copper) !important;
    box-shadow: 0 8px 30px rgba(200,150,60,.15) !important;
    transform: translateY(-4px) !important;
    background: var(--sand-warm) !important;
}
.plei-cat-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    margin-bottom: .5rem !important;
}
.plei-cat-name {
    font-size: .82rem !important;
    font-weight: 700 !important;
    color: var(--forest) !important;
}


/* ── Header Navy Theme ── */
.top-bar, .site-topbar {
    background: var(--forest) !important;
    color: var(--dk-2) !important;
}
.top-bar a, .site-topbar a {
    color: var(--dk-2) !important;
}
.top-bar a:hover, .site-topbar a:hover {
    color: var(--copper-warm) !important;
}
.navbar, .site-nav, .main-nav {
    border-bottom: 1px solid var(--sand-border) !important;
}
.navbar .nav-link, .main-nav a {
    color: var(--forest) !important;
    font-weight: 500 !important;
}
.navbar .nav-link:hover, .main-nav a:hover {
    color: var(--copper) !important;
}


/* ── USP Bar Navy ── */
.usp-bar, section.usp-bar {
    background: #0E1A33 !important;
    border-top: 1px solid rgba(200,150,60,.1) !important;
}


/* ── Bestseller Navy ── */
.section-bestseller,
section[style*="background:var(--forest)"] {
    background: var(--forest) !important;
}


/* ══ PRODUCT CARD — COMPLETE STYLES ══ */
.product-card {
    background: #fff;
    border: 1px solid #DDD0B8;
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s ease;
    height: 100%;
    position: relative;
}
.product-card:hover {
    box-shadow: 0 12px 40px rgba(22,33,62,.12);
    transform: translateY(-4px);
    border-color: #C8963C;
}

/* Badge */
.product-badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    font-size: .6rem;
    font-weight: 700;
    padding: .25rem .75rem;
    border-radius: 20px;
    letter-spacing: .5px;
}
.badge-sale { background: #e53935; color: #fff; }
.badge-hot  { background: #C8963C; color: #16213E; }
.badge-new  { background: #16213E; color: #D4A84B; }

/* Image */
.product-card-img-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #F5ECD7;
}
.product-card-img-wrap img,
.product-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.product-card:hover .product-card-img-wrap img,
.product-card:hover .product-card-img {
    transform: scale(1.06);
}

/* Overlay */
.product-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(22,33,62,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}
.product-card:hover .product-card-overlay {
    opacity: 1;
}
.product-card-overlay .btn-add-cart {
    background: #fff;
    color: #16213E;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;
}
.product-card-overlay .btn-add-cart:hover {
    background: #C8963C;
    color: #fff;
    transform: scale(1.1);
}

/* Body */
.product-card-body {
    padding: 1rem 1rem 1.25rem;
    display: block !important;
    visibility: visible !important;
}

/* Category tag */
.product-category-tag,
.product-cat-tag {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #C8963C;
    margin-bottom: .35rem;
}

/* Name */
.product-card-name,
.product-name {
    font-family: "Fraunces", Georgia, serif;
    font-size: .92rem;
    font-weight: 700;
    color: #16213E;
    line-height: 1.3;
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-name a,
.product-name {
    color: #16213E;
    text-decoration: none;
}
.product-card-name a:hover {
    color: #C8963C;
}

/* Weight */
.product-weight {
    font-size: .75rem;
    color: #7A7590;
}

/* Price */
.product-card-price {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.price-current,
.product-price {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #C8963C;
}
.price-original,
.product-price-old {
    font-size: .8rem;
    color: #7A7590;
    text-decoration: line-through;
}

/* Add to cart button */
.btn-add-to-cart {
    background: #16213E;
    color: #D4A84B;
    border: none;
    border-radius: 10px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    font-size: .82rem;
    padding: .6rem 1rem;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.btn-add-to-cart:hover {
    background: #C8963C;
    color: #16213E;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200,150,60,.3);
}


/* ══ FOOTER — NAVY COMPLETE ══ */
.site-footer,
.site-footer .footer-main {
    background: #0E1A33 !important;
    color: #C8BFA0 !important;
}
.site-footer .footer-bottom {
    background: #0A1229 !important;
    border-top: 1px solid rgba(200,150,60,.1) !important;
}
.site-footer h5, .site-footer h6,
.site-footer .footer-title {
    color: #F5ECD7 !important;
    font-family: "Fraunces", serif !important;
}
.site-footer a {
    color: #9B8B6E !important;
    transition: color .2s !important;
}
.site-footer a:hover {
    color: #D4A84B !important;
}
.site-footer p,
.site-footer li,
.site-footer span {
    color: #9B8B6E !important;
}
.site-footer .bi {
    color: #C8963C !important;
}
.site-footer .btn {
    border-color: #C8963C !important;
    color: #C8963C !important;
    background: transparent !important;
}
.site-footer .btn:hover {
    background: #C8963C !important;
    color: #0E1A33 !important;
}
.site-footer input {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(200,150,60,.2) !important;
    color: #F5ECD7 !important;
}


/* ══ MISC NAVY FIXES ══ */
.breadcrumb-bar {
    background: #FBF5E6;
    border-bottom: 1px solid #DDD0B8;
}
.breadcrumb-item a { color: #C8963C; }
.breadcrumb-item.active { color: #7A7590; }

/* Section titles */
h2, h3 { color: #16213E; }

/* Cards generic */
.card {
    border-color: #DDD0B8;
    border-radius: 14px;
}

/* Pagination */
.page-link {
    color: #16213E;
    border-color: #DDD0B8;
}
.page-item.active .page-link {
    background: #C8963C;
    border-color: #C8963C;
    color: #16213E;
}