:root{
  --bg:#f7f9fb;
  --muted:#6b7280;
  --brand:#0f172a;
  --accent:#2563eb;
  --accent-2:#ef4444;
}
*{box-sizing:border-box}
body{font-family:Segoe UI, Roboto, Arial, sans-serif;margin:0;background:var(--bg);color:var(--brand);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:24px}
#prices{padding:60px 0;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)}
@media (max-width:700px){
  #prices{padding:40px 0}
}
.site-header{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 1px 3px rgba(0,0,0,0.05)
}
.header-container{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:24px;
  padding:12px 24px;
  max-width:1280px;
  margin:0 auto
}
.brand{
  font-weight:700;
  font-size:1.4rem;
  display:flex;
  align-items:center
}
.brand a{
  text-decoration:none;
  color:#0f172a;
  transition:opacity 0.2s ease;
  display:inline-flex;
  align-items:center
}
.brand a:hover{opacity:0.7}
.brand a::before{
  content:'';
  display:none
}

/* Header search */
.header-search{
  flex:1;
  max-width:500px;
  position:relative
}
.header-search input{
  width:100%;
  padding:10px 16px 10px 40px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:14px;
  background:#f9fafb;
  transition:all 0.2s ease
}
.header-search input:focus{
  outline:none;
  border-color:#2563eb;
  background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,0.1)
}
.header-search::before{
  content:'';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none
}

/* Search results dropdown */
.search-results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  max-height:400px;
  overflow-y:auto;
  display:none;
  z-index:1000
}
.search-results.active{
  display:block
}
.search-result-item{
  display:flex;
  gap:12px;
  padding:10px 12px;
  cursor:pointer;
  align-items:center;
  text-decoration:none;
  color:inherit;
  transition:background 0.15s ease;
  border-bottom:1px solid #f3f4f6
}
.search-result-item:last-child{
  border-bottom:none
}
.search-result-item:hover{
  background:#f9fafb
}
.search-result-thumb{
  width:40px;
  height:40px;
  border-radius:6px;
  background:#e6e9ee;
  flex-shrink:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center
}
.search-result-thumb img{
  width:100%;
  height:100%;
  object-fit:cover
}
.search-result-info{
  flex:1;
  min-width:0
}
.search-result-name{
  font-weight:600;
  font-size:14px;
  color:#0f172a;
  margin-bottom:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.search-result-price{
  font-size:13px;
  color:#2563eb;
  font-weight:700
}
.search-no-results{
  padding:20px;
  text-align:center;
  color:#6b7280;
  font-size:14px
}

/* Navigation */
.nav{
  display:flex;
  gap:4px;
  align-items:center
}
.nav-item{
  position:relative
}
.nav a, .nav-dropdown-toggle{
  padding:10px 16px;
  color:#374151;
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  border-radius:8px;
  transition:all 0.2s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:none;
  cursor:pointer;
  white-space:nowrap
}
.nav a:hover, .nav-dropdown-toggle:hover{
  background:#f3f4f6;
  color:#0f172a
}

/* Dropdown menu */
.nav-dropdown{
  position:relative
}
.nav-dropdown-toggle::after{
  content:'';
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform 0.2s ease
}
.nav-dropdown.active .nav-dropdown-toggle::after{
  transform:rotate(180deg)
}
.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:all 0.2s ease;
  z-index:1000;
  padding:8px 0
}
.nav-dropdown.active .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.nav-dropdown-menu a{
  display:block;
  padding:10px 16px;
  color:#374151;
  text-decoration:none;
  font-size:14px;
  transition:all 0.15s ease;
  border-radius:0
}
.nav-dropdown-menu a:hover{
  background:#f3f4f6;
  color:#2563eb;
  padding-left:20px
}

/* Header actions */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px
}
.btn-login, .btn-register{
  padding:8px 16px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:all 0.2s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  cursor:pointer
}
.btn-login{
  color:#374151;
  background:transparent
}
.btn-login:hover{
  color:#0f172a;
  background:#f3f4f6
}
.btn-login i{
  font-size:16px
}
.btn-register{
  background:#0f172a;
  color:#fff
}
.btn-register:hover{
  background:#1f2937
}
/* Mobile menu toggle button */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  color:var(--brand);
  font-size:24px;
  transition:color 0.2s ease
}
.menu-toggle:hover{color:var(--accent)}
.menu-toggle i{pointer-events:none}

/* Solution Hero Section */
.solution-hero{
  background:#fef8f3;
  padding:80px 0;
  position:relative;
  overflow:hidden;
}

.solution-hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:radial-gradient(circle at 20% 50%, rgba(255,237,213,0.4) 0%, transparent 50%),
                   radial-gradient(circle at 80% 80%, rgba(254,202,202,0.3) 0%, transparent 50%);
  pointer-events:none;
}

.solution-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:1;
}

.solution-title{
  font-size:3rem;
  font-weight:800;
  color:var(--brand);
  margin:0 0 24px;
  line-height:1.2;
}

.solution-description{
  font-size:1.1rem;
  color:#64748b;
  line-height:1.8;
  margin:0 0 32px;
  max-width:540px;
}

.btn-get-started{
  display:inline-flex;
  align-items:center;
  padding:16px 32px;
  background:#0f172a;
  color:#fff;
  border-radius:12px;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  transition:all .3s;
  box-shadow:0 8px 24px rgba(15,23,42,0.15);
}

.btn-get-started:hover{
  background:#1f2937;
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(15,23,42,0.25);
}

.solution-right{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  position:relative;
      margin: 0 auto;;
}

.stats-card{
  background:#fff;
  border-radius:20px;
  padding:28px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:all .3s;
  position:relative;
}

.stats-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.stats-large{
  grid-column:1/-1;
  background:#80ccc4;
  color:#0f172a;
  padding:24px;
}

.stats-header{
  font-size:0.8rem;
  font-weight:600;
  margin-bottom:20px;
  opacity:0.85;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.stat-item{
  text-align:left;
  background:#fff;
  padding:20px;
  border-radius:16px;
  position:relative;
}

.stat-value{
  font-size:3rem;
  font-weight:800;
  margin-bottom:8px;
  line-height:1;
}

.stat-label{
  font-size:0.85rem;
  opacity:0.75;
  font-weight:500;
}

.stats-yellow{
  background:#ffd93d;
  color:#1f2937;
  text-align:left;
  position:relative;
  overflow:hidden;
}

.stats-yellow::before{
  content:'';
  position:absolute;
  top:10px;
  right:10px;
  width:80px;
  height:80px;
  background:radial-gradient(circle,rgba(255,255,255,0.3) 0%,transparent 70%);
  border-radius:50%;
}

.stats-orange{
  background:#ff8670;
  color:#fff;
  text-align:left;
}

.stats-icon{
  font-size:2rem;
  margin-bottom:12px;
  display:block;
}

.stats-percent{
  font-size:0.75rem;
  font-weight:600;
  margin-bottom:8px;
  opacity:0.85;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.stats-value-big{
  font-size:2.5rem;
  font-weight:900;
  margin-bottom:12px;
  line-height:1;
}

.stats-title{
  font-size:1rem;
  font-weight:700;
  margin-bottom:12px;
  line-height:1.3;
}

.stats-desc{
  font-size:0.8rem;
  line-height:1.5;
  opacity:0.85;
}

@media (max-width:900px){
  .solution-hero{display:none}
}

.hero{padding:56px 0;background:linear-gradient(180deg,#ffffff 0%, #f1f5f9 100%);border-bottom:1px solid #e6e9ee}
.hero h1{margin:0;font-size:2rem}

/* Dark hero variant for best-sellers */
.hero-dark{
  /* top image with gradient overlay (gradient painted on top) */
  background-image: linear-gradient(180deg, rgba(4,16,37,0.85) 0%, rgba(7,20,40,0.88) 55%), url('https://images.ctfassets.net/lzny33ho1g45/2olcy4TVSWAjqy5dsxLNZd/0df07c8e0fd1c5105a090481da1a56e0/best-ai-image-generators.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  color:#fff;
  padding:56px 0;
  border-bottom:none;
}
.hero-inner{padding:36px 24px}
.hero-top{display:flex;align-items:center;gap:12px;justify-content:space-between}
.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,0.06);backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,0.06);font-weight:700}
.hero-pill i{margin-left:0}
.hero-pill .trending-icon{color:#ef4444;font-size:1.05rem;display:inline-block}
.hero-cta-wrapper{flex:0 0 auto}
.hero-cta{padding:10px 16px;border-radius:999px;font-weight:700}

.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:26px;padding-bottom:8px}
.product-mini{background:transparent;text-decoration:none;color:inherit}
.product-mini-image{position:relative;border-radius:12px;overflow:hidden;background:#071427}
.product-mini-image img{width:100%;height:180px;object-fit:cover;display:block}
.mini-placeholder{width:100%;height:180px;background:linear-gradient(90deg,#0b2a3a,#041425)}
.mini-badge{position:absolute;top:12px;left:12px;padding:6px 8px;border-radius:8px;font-size:12px;font-weight:700}
.mini-badge-archived{background:rgba(255,255,255,0.12);color:#fff}
.mini-badge-sale{background:#ef4444;color:#fff}
.product-mini-meta{padding:10px 6px;color:#e6eef8}
.mini-title{font-weight:700;font-size:14px;line-height:1.3;margin-bottom:8px;color:#fff}
.mini-price{font-weight:800;color:#ffd166}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:repeat(2,1fr)}
  .product-mini-image img,.mini-placeholder{height:160px}
}

@media (max-width:600px){
  /* Mobile: single horizontal row showing two products (50% width each) */
  .hero-grid{display:flex;gap:12px;overflow-x:auto;padding-top:12px;padding-bottom:8px}
  .product-mini{flex:0 0 50%;max-width:50%}
  .product-mini-image img,.mini-placeholder{height:160px}
  .hero-inner{padding:20px}
}

/* Make the hero pill smaller on narrow screens */
@media (max-width:420px){
  .hero-pill{padding:6px 10px;font-size:0.9rem}
  .hero-pill i{font-size:0.9rem}
}
.lead{color:var(--muted);margin-top:6px}
.hero-actions{margin-top:16px}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:var(--brand);text-decoration:none;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff;border-color:transparent}
.section{padding:28px 0}
.table-tools{margin:12px 0}
/* Search input (header) */
#searchInput{
  width:100%;
  max-width:640px;
  padding:10px 14px 10px 44px; /* space for icon */
  border:1px solid rgba(99,102,241,0.12);
  border-radius:28px;
  background:#fbfdff;
  box-shadow:0 6px 18px rgba(16,24,40,0.04);
  transition:box-shadow .12s, border-color .12s;
  font-size:14px;
  color:var(--brand);
}
#searchInput:focus{outline:none;box-shadow:0 8px 22px rgba(16,24,40,0.08);border-color:rgba(37,99,235,0.18)}
#searchInput::placeholder{color:var(--muted)}
/* add search icon to the #searchInput as well (id selector overrides .search-bar input) */
#searchInput{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%236b7280' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 20.49 21.49 19l-5.99-5zM10 15a5 5 0 110-10 5 5 0 010 10z'/></svg>");
  background-repeat:no-repeat;
  background-size:23px 23px;
  background-position:12px center;
}
.table-wrap{overflow:auto;background:#fff;padding:12px;border-radius:8px;border:1px solid #e6e9ee}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:#f1f5f9;text-align:left;padding:10px;border-bottom:1px solid #e6e9ee}
tbody td, tbody th{padding:10px;border-bottom:1px solid #f1f5f9;vertical-align:top}

/* Admin list table container (used by admin products/posts) */
.table-container{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);overflow-x:auto}
.table-container table{width:100%;border-collapse:collapse}
.table-container table th,.table-container table td{padding:1rem;text-align:left;border-bottom:1px solid #f0f0f0}
.table-container table th{background:#f8f9fa;font-weight:600;color:#333}

/* Actions and icon buttons inside admin tables */
.actions{display:flex;gap:0.5rem;align-items:center}
.btn-icon{background:none;border:none;cursor:pointer;padding:8px;color:var(--accent);font-size:16px}
.btn-icon.btn-danger{color:#e74c3c}
.btn-icon:hover{opacity:0.85}

/* Generic badge used in admin lists */
.badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;display:inline-block}
.badge-draft{background:#ffeaa7;color:#d63031}
.badge-published{background:#55efc4;color:#00b894}
.badge-archived{background:#dfe6e9;color:#636e72}
.note{color:var(--muted);font-size:13px;margin-top:8px}
.form{max-width:720px;background:#fff;padding:16px;border-radius:8px;border:1px solid #e6e9ee}
.form-centered{margin:0 auto}
.form-row{display:flex;flex-direction:column;margin-bottom:10px}
.form-row label{font-size:13px;color:var(--muted);margin-bottom:6px}
.form-row input,.form-row textarea{padding:10px;border:1px solid #e6e9ee;border-radius:6px}
.form-actions{display:flex;gap:8px;margin-top:8px}
.form-msg{margin-top:10px;color:var(--accent-2)}
.site-footer{margin-top:40px;padding:16px 0;text-align:center;color:var(--muted);font-size:13px}

/* Pricing Section */
.pricing-header{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:32px;
  padding:16px 0;
}

.filter-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  background:#fff;
  padding:6px;
  border-radius:999px;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
  border:1px solid #f1f5f9;
}

.filter-tab{
  padding:10px 20px;
  border:none;
  background:transparent;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:#64748b;
  transition:all .25s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}

.filter-tab:hover{
  color:var(--brand);
  background:#f8fafc;
}

.filter-tab.active{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(102,126,234,0.25);
  font-weight:600;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:24px;
}

@media (max-width:700px){
  .pricing-header{margin-bottom:24px;padding:12px 0}
  .filter-tabs{gap:6px;padding:5px;width:100%;justify-content:center}
  .filter-tab{padding:8px 14px;font-size:13px}
  .pricing-grid{grid-template-columns:1fr;gap:16px;padding:0 16px}
}
.banners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.banner-card{display:block;background:#fff;border:1px solid #e6e9ee;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit}
.banner-image{width:100%;background-size:cover;background-position:center;display:block;aspect-ratio:4/3}
.banner-image img{width:100%;height:100%;object-fit:cover;display:block}
.banner-info{padding:12px}
.banner-title{font-size:1.05rem;margin:0 0 6px;color:var(--brand)}
.banner-price{font-weight:800;color:#ef4444}
/* Product Card */
.product-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:0;
  display:flex;
  flex-direction:column;
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
  overflow:hidden;
  position:relative;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.08);
  border-color:#d1d5db;
}

.card-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 20px 16px;
  background:linear-gradient(135deg,#f8fafc 0%,#ffffff 100%);
  border-bottom:1px solid #f1f5f9;
}

.card-header .product-icon{
  width:56px;
  height:56px;
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  flex-shrink:0;
}

.product-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.icon-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.product-name{
  margin:0;
  font-size:1.1rem;
  font-weight:600;
  line-height:1.4;
}

.product-name a{
  color:var(--brand);
  text-decoration:none;
  transition:color .2s;
}

.product-name a:hover{
  color:#667eea;
}

.card-content{
  flex:1;
  padding:16px 20px;
}

.product-description{
  color:#64748b;
  font-size:14px;
  line-height:1.6;
  margin:0 0 12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.product-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.tag{
  background:#f1f5f9;
  color:#475569;
  border:none;
  border-radius:6px;
  padding:4px 10px;
  font-size:12px;
  font-weight:500;
}

.category-tag{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
}

.card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px 20px;
  gap:12px;
  border-top:1px solid #f1f5f9;
}

.card-footer .price{
  font-size:1.25rem;
  font-weight:800;
  color:#667eea;
  white-space:nowrap;
}

.card-footer .price sup{
  font-size:0.7em;
  font-weight:600;
  margin-left:2px;
}

/* Prominent purchase button */
.btn-order{
  padding:10px 18px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  transition:all .25s;
  box-shadow:0 4px 12px rgba(102,126,234,0.2);
  white-space:nowrap;
}

.btn-order:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(102,126,234,0.3);
}

.btn-order:disabled{
  background:#cbd5e1;
  cursor:not-allowed;
  box-shadow:none;
}

.btn-order:disabled:hover{
  transform:none;
}

@media (max-width:700px){
  .card-header{padding:16px 16px 12px}
  .card-content{padding:12px 16px}
  .card-footer{padding:12px 16px 16px}
  .product-description{-webkit-line-clamp:3}
}

/* Empty State */
.empty-state{
  text-align:center;
  padding:60px 20px;
  color:#94a3b8;
  font-size:1rem;
  grid-column:1/-1;
}

.empty-state::before{
  content:'📦';
  display:block;
  font-size:4rem;
  margin-bottom:16px;
  opacity:0.5;
}

/* Breadcrumb */
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:16px}
.breadcrumb a{color:var(--accent);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--brand)}

/* Page title */
.page-title{font-size:2rem;margin:16px 0;color:var(--brand)}

/* Product detail */
.product-hero{display:flex;gap:28px;align-items:center;padding:30px;border-radius:12px;background:linear-gradient(90deg,#e9f1f2 0%, #f7fbff 100%);margin-bottom:22px;position:relative}
.product-hero::before{content:'';position:absolute;left:0;right:0;top:0;height:86px;background:linear-gradient(90deg, rgba(237,246,255,0.9), rgba(247,251,255,0.6));border-top-left-radius:12px;border-top-right-radius:12px;pointer-events:none}
.product-hero .hero-left{flex:0 0 190px}
.product-hero .hero-image{width:190px;height:190px;object-fit:cover;border-radius:12px;border:1px solid #e6e9ee;box-shadow:0 6px 18px rgba(16,24,40,0.06);background:#fff}
.product-hero .hero-image.placeholder{display:flex;align-items:center;justify-content:center;background:#fff;width:190px;height:190px;border-radius:12px}
.product-hero .hero-right{flex:1}
.product-title{font-size:1.9rem;margin:0 0 8px;color:var(--brand)}
.product-meta{color:var(--muted);font-size:14px;margin-bottom:8px}
.product-meta .product-price{display:block;font-size:1.4rem;font-weight:800;color:var(--accent);margin-bottom:6px}
.product-body{display:grid;grid-template-columns:1fr 360px;gap:28px;margin-bottom:20px}
.product-options .options-card{background:#fff;border-radius:12px;padding:18px;border:1px solid #e6e9ee}
.options-card h3{margin:0 0 12px}
.variant-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.variant-item{display:flex;align-items:center;justify-content:space-between;padding:14px;border:1px solid #eef2f8;border-radius:10px;background:#fff;cursor:pointer;min-height:72px}
.variant-item input{margin-right:12px;appearance:none;-webkit-appearance:none}
.variant-item:hover{border-color:#ffd7b8}
.variant-item.selected{border-color:#ff7a18;background:#fff7f0;box-shadow:0 8px 26px rgba(255,122,24,0.08)}
.variant-title{font-weight:700}
.variant-sub{font-size:12px;color:var(--muted)}
.variant-price{font-weight:800;color:#ef4444}
.variant-item.single{display:flex;justify-content:space-between}

.order-summary .order-box{background:#fff;border-radius:12px;padding:20px;border:1px solid #e6e9ee}
.qty-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.quantity-control{display:flex;align-items:center;border:1px solid #e6e9ee;border-radius:8px;overflow:hidden}
.qty-btn{background:#fff;border:none;padding:8px 12px;cursor:pointer;font-size:18px}
.qty-btn:hover{background:#f1f5f9}
.quantity-control input{width:60px;text-align:center;border:none;padding:8px;font-size:14px}
.total-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;margin-bottom:16px}
.total-label{color:var(--muted);font-weight:600}
.total-amount{font-size:1.6rem;font-weight:800;color:#ef4444}
.order-actions{display:flex;flex-direction:column;gap:10px}
.order-actions-row{display:flex;gap:8px;margin-bottom:8px}
.btn-cart{background:#ffd166;border:none;color:#7a3b00;padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:700}
.btn-cart:hover{background:#ffbf33}
.btn-buy{background:#ff7a18;color:#fff;border:none;padding:12px 18px;border-radius:8px;font-weight:700;cursor:pointer;flex:1}
.btn-buy:hover{background:#ff6a00}
.btn-paypal{background:#0b63b8;color:#fff;border:none;padding:12px;border-radius:8px;font-weight:700;cursor:pointer}
.btn-paypal:hover{background:#0956a2}
.btn-buy-full{width:100%;padding:14px 18px;border-radius:10px;font-size:16px;font-weight:800;background:#ff6a00;color:#fff;border:none;cursor:pointer}
.btn-buy-full:hover{background:#ff5a00}
.order-summary .total-amount{font-size:1.9rem;font-weight:900}
.details-section{margin-bottom:24px}
.details-section h3{font-size:1rem;margin:0 0 12px;color:var(--brand);font-weight:600}
.detail-row{display:flex;padding:10px 0;border-bottom:1px solid #f1f5f9}
.detail-row:last-child{border-bottom:none}
.detail-label{width:140px;color:var(--muted);font-size:14px}
.detail-value{flex:1;color:var(--brand);font-size:14px}
.variants-section h3{font-size:1rem;margin:0 0 12px;color:var(--brand);font-weight:600}
.variant-item{display:flex;align-items:center;gap:12px;padding:12px;background:#f9fafb;border:1px solid #e6e9ee;border-radius:6px;margin-bottom:8px}
.variant-name{flex:1;font-size:14px;color:var(--brand)}
.variant-price{font-weight:600;color:var(--accent);margin-right:8px}
.action-section{margin-top:16px}

/* News grid */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;margin-top:24px}
.news-card{background:#fff;padding:0;border-radius:12px;border:1px solid #e6e9ee;transition:all .3s;position:relative;overflow:hidden}
.news-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);transform:scaleX(0);transition:transform .3s;z-index:1}
.news-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.news-card:hover::before{transform:scaleX(1)}
.news-card-image{width:100%;height:200px;overflow:hidden;background:#f1f5f9}
.news-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.news-card:hover .news-card-image img{transform:scale(1.05)}
.news-card-content{padding:24px}
.news-card-badge{margin-bottom:12px}
.news-card-badge .badge{background:linear-gradient(135deg,#ffeaa7 0%,#fdcb6e 100%);color:#d63031;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:700;display:inline-block}
.news-card-title{margin:0 0 12px;line-height:1.4}
.news-card-title a{color:var(--brand);text-decoration:none;font-size:1.2rem;font-weight:600;transition:color .2s}
.news-card-title a:hover{color:var(--accent)}
.news-date{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:12px}
.news-excerpt{color:#6b7280;font-size:14px;line-height:1.6;margin:0 0 16px}
.news-read-more{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:14px;font-weight:600;text-decoration:none;transition:gap .2s}
.news-read-more:hover{gap:10px}
.empty-state{text-align:center;color:var(--muted);padding:40px 0}

/* Post detail */
.post{background:#fff;padding:32px;border-radius:8px;border:1px solid #e6e9ee;margin-top:16px}
.post-title{font-size:2rem;margin:0 0 12px;color:var(--brand)}
.post-meta{display:block;font-size:14px;margin-bottom:20px}
.post-content{font-size:16px;line-height:1.8;color:#374151}
.post-content br{display:block;margin:8px 0}
.post-footer{margin-top:24px}

/* Related Posts Section */
.related-posts{margin-top:48px;padding-top:40px;border-top:2px solid #e6e9ee}
.related-title{font-size:1.75rem;font-weight:700;color:var(--brand);margin:0 0 24px;text-align:left}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(2,6,23,0.06);transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}
.related-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(2,6,23,0.12)}
.related-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.related-image{width:100%;height:160px;overflow:hidden;background:#f5f5f5}
.related-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.related-card:hover .related-image img{transform:scale(1.05)}
.related-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.related-date{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b;font-weight:500}
.related-date i{font-size:11px}
.related-card-title{margin:0;font-size:15px;font-weight:700;line-height:1.4;color:#0f172a}
.related-excerpt{margin:0;font-size:13px;line-height:1.5;color:#64748b;flex:1}

@media (max-width:900px){
  .related-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .related-posts{margin-top:32px;padding-top:32px}
}

@media (max-width:600px){
  .related-title{font-size:1.5rem}
  .related-image{height:140px}
  .related-body{padding:14px}
}

/* Order Button */
.btn-order{padding:8px 14px;border-radius:6px;border:none;background:var(--accent);color:#fff;cursor:pointer;font-size:13px;font-weight:500}
.btn-order:hover{background:#1d4ed8}
.btn-order:disabled{background:#9ca3af;cursor:not-allowed}

/* Hot badge */
.hot-badge{
  display:inline-block;
  margin-left:8px;
  background:var(--accent-2);
  color:#fff;
  font-size:10px;
  line-height:1;
  padding:4px 6px;
  border-radius:999px;
  font-weight:700;
}

/* Mobile hot corner */
.service-card{position:relative}
.hot-corner{
  position:absolute;
  top:8px;
  right:8px;
  background:var(--accent-2);
  color:#fff;
  font-size:10px;
  line-height:1;
  padding:4px 6px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,0.1)
}

/* Popup */
.popup-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center}
.popup-overlay.active{display:flex}
.popup-content{background:#fff;border-radius:12px;max-width:540px;width:90%;max-height:90vh;overflow-y:auto;padding:24px;position:relative}
.popup-close{position:absolute;top:12px;right:12px;background:transparent;border:none;font-size:28px;cursor:pointer;color:var(--muted);line-height:1}
.popup-close:hover{color:var(--brand)}
.popup-content h2{margin:0 0 16px;font-size:1.5rem}
.order-info{background:#f1f5f9;padding:12px;border-radius:8px;margin-bottom:16px}
.order-info p{margin:6px 0;font-size:14px}
.order-info strong{color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .hero h1{font-size:1.5rem}
  .container{padding:16px}

  /* Header responsive */
  .header-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 16px
  }
  .brand{
    font-size:1.2rem;
    order:1
  }
  .menu-toggle{
    order:3
  }
  .nav{
    order:4
  }

  /* Hide search on mobile */
  .header-search{display:none}

  /* Hide actions on mobile */
  .header-actions{display:none}

  /* Show hamburger button on mobile */
  .menu-toggle{display:block}

  /* Hide nav by default, show as dropdown when active */
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    gap:0;
    padding:8px;
    box-shadow:0 8px 16px rgba(0,0,0,0.1);
    border-bottom:1px solid #e5e7eb;
    display:none;
    z-index:99
  }
  .nav.active{
    display:flex
  }
  .nav-item{
    width:100%;
    border-bottom:1px solid #f3f4f6
  }
  .nav-item:last-child{
    border-bottom:none
  }
  .nav a, .nav-dropdown-toggle{
    padding:14px 12px;
    font-size:15px;
    border-radius:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:transparent
  }
  .nav a:hover, .nav-dropdown-toggle:hover{
    background:#f9fafb
  }

  /* Mobile dropdown toggle arrow */
  .nav-dropdown-toggle::after{
    border-top:5px solid #6b7280;
    margin-left:auto
  }

  /* Mobile dropdown */
  .nav-dropdown-menu{
    position:static;
    box-shadow:none;
    border:none;
    border-radius:0;
    padding:8px 0 8px 24px;
    background:#f9fafb;
    transform:none;
    margin:0;
    display:none
  }
  .nav-dropdown.active .nav-dropdown-menu{
    display:block;
    opacity:1;
    visibility:visible
  }
  .nav-dropdown-menu a{
    padding:10px 12px;
    font-size:14px;
    color:#374151;
    display:block;
    border-radius:4px
  }
  .nav-dropdown-menu a:hover{
    background:#fff;
    color:#2563eb;
    padding-left:12px
  }

  .page-title{font-size:1.5rem}
  .post-title{font-size:1.5rem}
  .news-grid{grid-template-columns:1fr;gap:16px}
  .breadcrumb{font-size:13px}
  .product-detail-layout{grid-template-columns:1fr;gap:16px}
  .product-image{height:160px}
  .product-title{font-size:1.3rem}
  .revenue-amount{font-size:1.5rem}
  .detail-label{width:100px;font-size:13px}
  .detail-value{font-size:13px}
  .variant-item{flex-wrap:wrap}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  
  /* Hide table on mobile */
  table{display:none}
  .table-wrap{padding:0;background:transparent;border:none}
  
  /* Old mobile cards (legacy) */
  .mobile-cards{display:block}
  .service-card{
    background:#fff;
    border:1px solid #e6e9ee;
    border-radius:8px;
    padding:14px;
    margin-bottom:12px
  }
  .service-card .card-title{
    font-weight:600;
    font-size:15px;
    color:var(--brand);
    margin-bottom:10px;
    padding-bottom:8px;
    border-bottom:1px solid #f1f5f9
  }
  .service-card .card-row{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    font-size:13px
  }
  .service-card .card-label{
    color:var(--muted);
    font-weight:500
  }
  .service-card .card-value{
    color:var(--brand);
    text-align:right;
    flex:1;
    margin-left:12px
  }
  .service-card .card-value.price{
    color:var(--accent);
    font-weight:600
  }
  .service-card .card-value.status{
    font-size:12px;
    background:#f1f5f9;
    padding:3px 8px;
    border-radius:4px;
    display:inline-block
  }
  .service-card .btn-order{
    width:100%;
    margin-top:4px
  }
}

/* Very small screens: slightly reduce product name and price, and avoid icon distortion */
@media (max-width:420px){
  .product-name{font-size:14px}
  /* Slightly smaller price on very small screens */
  .card-footer .price{font-size:0.9rem}
  .card-header .product-icon{width:40px;height:40px}
  .card-header .product-icon img{width:100%;height:100%;object-fit:contain}
}

/* Desktop - hide mobile cards */
@media (min-width:701px){
  .mobile-cards{display:none}
}

/* Checkout Page */
.checkout-container{max-width:1200px;margin:0 auto;padding:32px 24px}
.checkout-wrapper{display:grid;grid-template-columns:1fr 400px;gap:32px}
.checkout-main{background:#fff;border-radius:12px;padding:32px;border:1px solid #e6e9ee}
.checkout-sidebar{position:sticky;top:80px;align-self:start}

/* Checkout Steps */
.checkout-steps{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.step{display:flex;flex-direction:column;align-items:center;gap:8px}
.step-number{width:40px;height:40px;border-radius:50%;background:#e8f0ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}
.step.active .step-number{background:#4f46e5;color:#fff}
.step-label{font-size:13px;color:var(--muted)}
.step.active .step-label{color:var(--brand);font-weight:600}
.step-divider{flex:1;height:2px;background:#e6e9ee}

/* Payment Section */
.payment-section{margin-bottom:24px}
.section-title{font-size:1.5rem;margin:0 0 8px;color:var(--brand)}
.section-subtitle{font-size:14px;color:var(--muted);margin:0 0 24px}

/* Payment Options */
.payment-options{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.payment-option{display:block;border:2px solid #e6e9ee;border-radius:8px;padding:16px;cursor:pointer;transition:all .2s}
.payment-option:hover{border-color:#cbd5e1}
.payment-option input[type="radio"]{display:none}
.payment-option input[type="radio"]:checked + .payment-option-content{border-left:3px solid #4f46e5}
.payment-option input[type="radio"]:checked ~ * .payment-label{color:#4f46e5;font-weight:600}
.payment-option-content{padding-left:12px}
.payment-option-header{display:flex;align-items:center;justify-content:space-between}
.payment-label{font-size:15px;color:var(--brand)}
.payment-logo{height:24px;object-fit:contain}
.bank-logos{display:flex;gap:8px}
.bank-logo{font-size:12px;padding:4px 8px;border-radius:4px;background:#f1f5f9;color:var(--brand);font-weight:600}
.bank-logo.visa{background:#1a1f71;color:#fff}
.bank-logo.mastercard{background:#eb001b;color:#fff}

/* Payment Details */
.payment-details{padding:20px;background:#f9fafb;border-radius:8px;margin-bottom:16px}

/* QR payment block */
.qr-box{background:#fff;border:1px solid #e6e9ee;border-radius:12px;padding:16px}
.qr-box-row{display:flex;gap:16px;align-items:center}
.qr-box-img{width:180px;height:180px;object-fit:contain;border:1px solid #e5e7eb;border-radius:8px}
.qr-box .payment-note{color:#6b7280;font-size:14px}

@media (max-width:700px){
  .qr-box-row{flex-direction:column;align-items:center;text-align:center}
  .qr-box-img{width:66vw;max-width:260px;height:auto}
  .qr-box .payment-note{font-size:13px}
}
.momo-info p{margin:8px 0;font-size:14px}
.info-note{font-size:13px;color:var(--muted);margin-top:12px}
/* Form styles */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;color:var(--brand);margin-bottom:6px;font-weight:500}
.form-group input{width:100%;padding:10px 12px;border:1px solid #e6e9ee;border-radius:6px;font-size:14px}
.form-group input:focus{outline:none;border-color:#4f46e5}
.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* Checkbox */
.form-checkbox{display:flex;align-items:start;gap:8px;margin-bottom:16px}
.form-checkbox input[type="checkbox"]{margin-top:4px}
.form-checkbox label{font-size:13px;color:var(--muted)}
.form-checkbox a{color:#4f46e5}

/* Pay Button */
.btn-pay{width:100%;padding:14px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-pay:hover{background:#4f46e5}

/* Cancellation Policy */
.cancellation-section{margin-top:24px;padding-top:24px;border-top:1px solid #e6e9ee}
.cancellation-section h3{font-size:1.1rem;margin:0 0 12px;color:var(--brand)}
.cancellation-section p{font-size:14px;color:var(--muted);line-height:1.6}
.link-more{font-size:14px;color:#4f46e5;text-decoration:none}
.link-more:hover{text-decoration:underline}

/* Cart Summary */
.cart-summary{background:#fff;border-radius:12px;padding:24px;border:1px solid #e6e9ee}
.cart-summary h3{font-size:1.1rem;margin:0 0 16px;color:var(--brand)}

/* Cart Items */
.cart-items{margin-bottom:16px}
.cart-item{display:flex;gap:12px;padding:16px;background:#f9fafb;border-radius:8px;margin-bottom:12px}
.cart-item-image{width:64px;height:64px;border-radius:6px;overflow:hidden;background:#e6e9ee;flex-shrink:0}
.cart-item-image img{width:100%;height:100%;object-fit:cover}
.cart-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px}
.cart-item-info{flex:1}
.cart-item-name{font-size:14px;font-weight:600;color:var(--brand);margin-bottom:4px}
.cart-item-meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.cart-item-price{font-size:15px;font-weight:600;color:var(--accent)}
.empty-cart{font-size:14px;color:var(--muted);text-align:center;padding:20px 0}

/* Coupon Section */
.coupon-section{margin-bottom:20px}
.coupon-toggle{width:100%;padding:12px;background:#f9fafb;border:1px solid #e6e9ee;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--brand)}
.coupon-toggle:hover{background:#f1f5f9}
.toggle-icon{color:var(--muted)}

/* Order Summary */
.order-summary h3{font-size:1.1rem;margin:0 0 16px;color:var(--brand)}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:14px}
.summary-row span:first-child{color:var(--muted)}
.summary-row span:last-child{color:var(--brand);font-weight:500}
.summary-divider{height:1px;background:#e6e9ee;margin:12px 0}
.summary-row.total{font-size:16px;font-weight:700}
.summary-row.total span{color:var(--brand)}

/* Responsive Checkout */
@media (max-width:900px){
  .checkout-wrapper{grid-template-columns:1fr;gap:20px}
  .checkout-sidebar{position:static}
  .checkout-main{padding:20px}
  .checkout-steps{flex-wrap:wrap;gap:8px}
  .step{flex:1;min-width:80px}
  .step-divider{display:none}
  .form-row{grid-template-columns:1fr}
}

/* Mobile overflow guard and text wrapping for checkout */
html, body{overflow-x:hidden}
.checkout-container,.checkout-wrapper,.checkout-main,.checkout-sidebar{max-width:100%}
.checkout-wrapper,.qr-box-row,.checkout-main,.checkout-sidebar{min-width:0}
img{max-width:100%;height:auto}
.qr-box code{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.payment-note,.summary-row span,.cart-item-name{word-break:break-word;overflow-wrap:anywhere}
.coupon-section input#couponCode{width:100%}

/* New Product Detail Page Design */
.product-detail-new{display:grid;grid-template-columns:250px 1fr 360px;gap:32px;margin-top:24px}

/* Product Image Card */
.product-image-card{background:#fff;border-radius:16px;padding:24px;display:flex;align-items:center;justify-content:center;min-height:250px;box-shadow:0 1px 3px rgba(0,0,0,0.05);border:1px solid #e6e9ee}
.product-image-card img{width:100%;height:auto;max-width:200px;object-fit:contain}
.product-image-card .icon-placeholder{font-size:80px}

/* Product Main Content */
.product-main-content{background:#fff;border-radius:12px;padding:28px;border:1px solid #e6e9ee}
.product-title-new{font-size:1.75rem;margin:0 0 16px;color:var(--brand);font-weight:700}

/* Meta Badges */
.product-meta-badges{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.meta-badge{display:inline-flex;align-items:center;font-size:13px;color:#374151;padding:6px 12px;background:#f9fafb;border-radius:6px;border:1px solid #e6e9ee}
.meta-badge.meta-code{font-size:12px}

/* Variant Selection */
.variant-selection-section{margin-top:24px}
.variant-section-title{font-size:14px;font-weight:600;margin:0 0 12px;color:var(--brand)}
.variant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* Variant Option */
.variant-option{position:relative;display:block;border:2px solid #e6e9ee;border-radius:10px;padding:14px;cursor:pointer;background:#fff;transition:all .2s}
.variant-option:hover{border-color:#fecaca;background:#fef2f2}
.variant-option.selected{border-color:#ff6b35;background:#fff7ed;box-shadow:0 4px 12px rgba(255,107,53,0.15)}
.variant-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.variant-option-content{display:flex;flex-direction:column;gap:6px}
.variant-option-name{font-size:13px;font-weight:600;color:var(--brand)}
.variant-option-price{font-size:15px;font-weight:700;color:#ef4444}
.variant-check-icon{position:absolute;top:8px;right:8px;width:20px;height:20px;background:#22c55e;color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.variant-option.selected .variant-check-icon{display:flex}

/* Product Sidebar */
.purchase-summary{background:#fff;border-radius:12px;padding:24px;border:1px solid #e6e9ee;position:sticky;top:90px}
.summary-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f1f5f9}
.summary-total span:first-child{font-size:14px;color:var(--muted)}
.total-price{font-size:1.75rem;font-weight:900;color:#ef4444}
.summary-quantity{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:20px}
.summary-quantity strong{color:var(--brand)}

/* Buy Now Button */
.btn-buy-now{width:100%;padding:16px;background:#ff6b35;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;text-transform:uppercase;transition:background .2s}
.btn-buy-now:hover{background:#ff5722}
.btn-buy-now:disabled{background:#9ca3af;cursor:not-allowed}

/* Details Section (below grid) */
.details-section{margin-top:32px;background:#fff;border-radius:12px;padding:28px;border:1px solid #e6e9ee}
.details-section h3{font-size:1.1rem;margin:0 0 16px;color:var(--brand);font-weight:600}
.detail-content{color:#374151;line-height:1.8}

/* Post Content Styling (for HTML content) */
.post-content h2{font-size:1.5rem;margin:24px 0 12px;color:var(--brand);font-weight:600}
.post-content h3{font-size:1.25rem;margin:20px 0 10px;color:var(--brand);font-weight:600}
.post-content h4{font-size:1.1rem;margin:16px 0 8px;color:var(--brand);font-weight:600}
.post-content p{margin:12px 0;line-height:1.8}
.post-content ul,.post-content ol{margin:12px 0;padding-left:24px}
.post-content li{margin:6px 0;line-height:1.7}
.post-content table{width:100%;border-collapse:collapse;margin:16px 0}
.post-content table td,.post-content table th{padding:10px;border:1px solid #e6e9ee;text-align:left}
.post-content table th{background:#f1f5f9;font-weight:600}
.post-content img{max-width:100%;height:auto;border-radius:8px;margin:16px 0}
.post-content blockquote{border-left:4px solid var(--accent);padding-left:16px;margin:16px 0;color:var(--muted);font-style:italic}
.post-content code{background:#f1f5f9;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:0.9em}
.post-content pre{background:#f1f5f9;padding:12px;border-radius:8px;overflow-x:auto;margin:16px 0}
.post-content pre code{background:transparent;padding:0}
.post-content a{color:var(--accent);text-decoration:none}
.post-content a:hover{text-decoration:underline}
.post-content hr{border:none;border-top:1px solid #e6e9ee;margin:24px 0}

/* Responsive Product Detail */
@media (max-width:1024px){
  .product-detail-new{grid-template-columns:1fr;gap:20px}
  .product-sidebar{position:static}
  .purchase-summary{position:static}
  .variant-grid{grid-template-columns:1fr}
}

@media (max-width:700px){
  .product-image-card{min-height:180px;padding:16px}
  .product-image-card img{max-width:140px}
  .product-main-content{padding:20px}
  .product-title-new{font-size:1.3rem}
  .variant-grid{grid-template-columns:1fr}
  .total-price{font-size:1.5rem}
}

/* Footer styles (for views/partials/footer.ejs) */
.site-footer--dark{background:#e9f1ff;color:var(--muted);padding:40px 0 24px;border-top:1px solid #eef2f5}
.site-footer .footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;align-items:start;max-width:1200px;margin:0 auto;padding:0 32px}
.site-footer .footer-col h4{margin:0 0 12px;font-size:15px;color:var(--brand);font-weight:700}
.site-footer .footer-col p,.site-footer .footer-col a{color:var(--muted);font-size:13px;text-decoration:none;line-height:1.6}
.site-footer .footer-col a{transition:color .3s}
.site-footer .footer-col a:hover{color:var(--brand)}
.site-footer .footer-col ul{list-style:none;padding:0;margin:0}
.site-footer .footer-col ul li{margin:10px 0}
.site-footer .btn-zalo{display:inline-block;margin-top:8px;padding:10px 16px;background:#2d9cdb;color:#fff;border-radius:8px;text-decoration:none;font-weight:500;transition:background .3s}
.site-footer .btn-zalo:hover{background:#2185b8}
.site-footer .trust-icon{font-size:24px;color:#f59e0b;margin-top:4px}

.site-footer .footer-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:32px;gap:20px;padding-top:24px;border-top:1px solid #d1dae6}
.site-footer .socials{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.site-footer .socials h5{margin:0 0 10px;font-size:13px;color:var(--brand);font-weight:600}
.site-footer .social-icons{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.site-footer .social-icons .social{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,0.08);color:var(--brand);text-decoration:none;transition:all .3s}
.site-footer .social-icons .social:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
.site-footer .copyright{color:var(--muted);font-size:13px;font-weight:500}

/* Logo sizing used in headers/footers */
.site-logo{height:68px;object-fit:contain;display:inline-block}
.footer-logo{height:60px;object-fit:contain;display:inline-block}
.footer-logo-link{display:inline-flex;align-items:center}

@media (max-width:900px){
  .site-footer--dark{padding:32px 0 20px;text-align:center}
  .site-footer .footer-grid{grid-template-columns:1fr;gap:24px;padding:0 20px}
  .site-footer .footer-col{text-align:center}
  .site-footer .footer-col ul li{text-align:center}
  .site-footer .footer-bottom{flex-direction:column;align-items:center;gap:16px}
  .site-footer .socials{flex-direction:column;align-items:center;gap:12px}
  .site-footer .footer-logo-link{justify-content:center}
  .site-footer .social-icons{margin-top:0;justify-content:center}
  .site-footer .copyright{margin-top:8px;text-align:center}
}