:root{
  --brand-dark:#3b2a20;
  --brand:#a0522d;
  --brand-light:#d9a05b;
  --cream:#faf3ea;
  --ink:#2b211b;
  --muted:#7a6a5c;
  --line:#e6d9c8;
  --white:#ffffff;
  --danger:#b23b3b;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background:var(--cream);
  color:var(--ink);
  opacity:0;
  animation:bodyFadeIn 0.45s ease forwards;
  transition:opacity 0.18s ease;
}
@keyframes bodyFadeIn{ to{opacity:1;} }
/* Page-transition fade-out, triggered by layout.js before navigating to another page on this site */
body.page-exit{opacity:0 !important; animation:none;}

/* ---------- Scroll-reveal (progressive enhancement, see app.js initScrollReveal) ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in-view{opacity:1; transform:none;}

/* ---------- Shared press/hover motion for interactive controls ---------- */
button, .hero-btn, .add-btn, .checkout-btn, .place-order-btn, #cartBtn, #assistantBubble, #zaloBubble, .qty-row button, .lang-toggle, .cart-item .ci-controls button{
  transition:transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
button:active, .hero-btn:active, .add-btn:active, .checkout-btn:active, .place-order-btn:active, #cartBtn:active, #assistantBubble:active, #zaloBubble:active, .qty-row button:active{
  transform:scale(0.95);
}
.hero-btn:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.2);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{transition-duration:0.001ms !important; animation-duration:0.001ms !important;}
  .reveal{opacity:1 !important; transform:none !important;}
}
header{
  background:var(--brand-dark);
  color:var(--white);
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:50;
}
header .logo{
  font-size:22px;
  font-weight:700;
  letter-spacing:0.5px;
  text-decoration:none;
  color:var(--white);
}
header .logo span{color:var(--brand-light);}
nav{display:flex; align-items:center; gap:20px;}
nav a{color:var(--white); text-decoration:none; font-size:15px; cursor:pointer; position:relative; transition:color 0.2s ease;}
nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--brand-light); transform:scaleX(0); transform-origin:left;
  transition:transform 0.25s ease;
}
nav a:hover, nav a.active{color:var(--brand-light);}
nav a:hover::after, nav a.active::after{transform:scaleX(1);}
#cartBtn{
  background:var(--brand);
  border:none;
  color:var(--white);
  padding:9px 16px;
  border-radius:20px;
  cursor:pointer;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:6px;
}
#cartBtn:hover{background:var(--brand-light);}
#cartCount{
  background:var(--white);
  color:var(--brand-dark);
  border-radius:50%;
  width:20px;
  height:20px;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.hero{
  padding:48px 24px;
  text-align:center;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color:var(--white);
}
.hero h1{margin:0 0 8px; font-size:32px;}
.hero p{margin:0; opacity:0.9; font-size:16px;}
.hero .hero-actions{margin-top:20px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.hero-btn{
  display:inline-block; background:var(--white); color:var(--brand-dark);
  text-decoration:none; padding:10px 20px; border-radius:22px; font-size:14px; font-weight:600;
}
.hero-btn.outline{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.6);}
main{max-width:1100px; margin:0 auto; padding:32px 24px 80px;}
.section-title{
  font-size:22px;
  margin:0 0 20px;
  color:var(--brand-dark);
  border-bottom:2px solid var(--line);
  padding-bottom:10px;
}
.breadcrumb{font-size:13px; color:var(--muted); margin-bottom:18px;}
.breadcrumb a{color:var(--brand); text-decoration:none;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:22px;
}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  cursor:pointer;
}
.card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(59,42,32,0.12);}
.swatch{
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.85);
  font-size:13px;
  text-align:center;
  padding:10px;
  overflow:hidden;
}
.swatch img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;}
.card:hover .swatch img, .cat-card:hover .swatch img{transform:scale(1.07);}
.card-body{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1;}
.card-body h3{margin:0 0 6px; font-size:16px; color:var(--ink);}
.card-body .meta{font-size:12.5px; color:var(--muted); margin-bottom:8px;}
.card-body .price{font-size:17px; font-weight:700; color:var(--brand); margin-bottom:10px;}
.add-btn{
  margin-top:auto;
  background:var(--brand-dark);
  color:var(--white);
  border:none;
  padding:9px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
}
.add-btn:hover{background:var(--brand);}
.add-btn:disabled{background:#b8ab9d; cursor:not-allowed;}

/* Category cards (shop.html) */
.cat-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.cat-card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(59,42,32,0.12);}
.cat-card .swatch{height:140px;}
.cat-card .cat-body{padding:16px;}
.cat-card h3{margin:0 0 6px; font-size:17px; color:var(--brand-dark);}
.cat-card p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5;}

/* Modal (product detail) */
.overlay{
  position:fixed; inset:0; background:rgba(43,33,27,0.55);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.25s ease, visibility 0.25s ease, background 0.25s ease;
}
.overlay.open{opacity:1; visibility:visible; pointer-events:auto;}
.modal{
  background:var(--white); border-radius:12px; max-width:520px; width:100%;
  max-height:88vh; overflow-y:auto; position:relative;
  transform:translateY(18px) scale(0.97);
  transition:transform 0.28s cubic-bezier(.2,.8,.3,1.1);
}
.overlay.open .modal{transform:translateY(0) scale(1);}
#lightboxOverlay img{transition:transform 0.25s ease, opacity 0.2s ease;}
#lightboxOverlay #lightboxImg{transform:scale(0.96);}
#lightboxOverlay.open #lightboxImg{transform:scale(1);}
.modal .close{
  position:absolute; top:12px; right:14px; background:none; border:none;
  font-size:22px; cursor:pointer; color:var(--muted);
}
.modal-swatch{height:220px;}
.modal-body{padding:20px 24px 24px;}
.modal-body h2{margin:0 0 6px;}
.modal-body .price{font-size:20px; font-weight:700; color:var(--brand); margin:8px 0;}
.modal-body table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14px;}
.modal-body table td{padding:5px 0; border-bottom:1px solid var(--line);}
.modal-body table td:first-child{color:var(--muted); width:100px;}
.qty-row{display:flex; align-items:center; gap:10px; margin:14px 0;}
.qty-row button{
  width:30px; height:30px; border:1px solid var(--line); background:var(--white);
  border-radius:6px; cursor:pointer; font-size:16px;
}
.qty-row input{width:50px; text-align:center; padding:6px; border:1px solid var(--line); border-radius:6px;}

/* Cart drawer */
#cartDrawer{
  position:fixed; top:0; right:-420px; width:390px; max-width:92vw; height:100%;
  background:var(--white); box-shadow:-4px 0 20px rgba(0,0,0,0.15); z-index:110;
  transition:right 0.32s cubic-bezier(.2,.8,.3,1.1); display:flex; flex-direction:column;
}
#cartDrawer.open{right:0;}
.drawer-header{
  padding:18px 20px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.drawer-header h3{margin:0;}
.drawer-header button{background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted);}
#cartItems{flex:1; overflow-y:auto; padding:12px 20px;}
.cart-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.cart-item .cart-swatch{width:56px; height:56px; border-radius:6px; flex-shrink:0;}
.cart-item .ci-info{flex:1;}
.cart-item .ci-info h4{margin:0 0 4px; font-size:14px;}
.cart-item .ci-info .ci-price{font-size:13px; color:var(--muted);}
.cart-item .ci-controls{display:flex; align-items:center; gap:6px; margin-top:6px;}
.cart-item .ci-controls button{
  width:24px; height:24px; border:1px solid var(--line); background:var(--white);
  border-radius:5px; cursor:pointer;
}
.cart-item .remove{color:var(--danger); background:none; border:none; cursor:pointer; font-size:12px; margin-left:auto;}
.drawer-footer{padding:16px 20px; border-top:1px solid var(--line);}
.subtotal-row{display:flex; justify-content:space-between; font-size:16px; font-weight:700; margin-bottom:12px;}
.checkout-btn, .place-order-btn{
  width:100%; background:var(--brand); color:var(--white); border:none;
  padding:12px; border-radius:8px; font-size:15px; cursor:pointer;
}
.checkout-btn:hover, .place-order-btn:hover{background:var(--brand-dark);}
.checkout-btn:disabled{background:#c9bba9; cursor:not-allowed;}
.empty-msg{color:var(--muted); text-align:center; padding:40px 0; font-size:14px;}

/* Checkout overlay */
#checkoutOverlay .modal{max-width:640px;}
.form-row{margin-bottom:14px;}
.form-row label{display:block; font-size:13px; margin-bottom:5px; color:var(--muted);}
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:10px; border:1px solid var(--line); border-radius:6px; font-size:14px; font-family:inherit;
}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pay-options{display:flex; gap:14px; margin-bottom:6px;}
.pay-options label{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--ink);}
.order-summary{background:var(--cream); border-radius:8px; padding:14px; margin:16px 0; font-size:14px;}
.order-summary .os-row{display:flex; justify-content:space-between; padding:4px 0;}
.order-summary .os-total{font-weight:700; border-top:1px solid var(--line); margin-top:6px; padding-top:8px;}
.confirm-box{text-align:center; padding:30px 10px;}
.confirm-box .check{font-size:48px; color:#3a7d44;}
.confirm-box h2{margin:10px 0 6px;}
.confirm-box p{color:var(--muted); font-size:14px; line-height:1.6;}

/* Welcome / foot-in-the-door onboarding modal */
#welcomeModalBody h2{margin:0 0 8px; font-size:21px; color:var(--brand-dark);}
#welcomeModalBody p{margin:0 0 10px; font-size:14.5px; line-height:1.6; color:var(--muted);}
#welcomeModalBody .welcome-ask{font-weight:700; color:var(--ink); font-size:15.5px;}
.welcome-trust{list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:9px;}
.welcome-trust li{background:var(--cream); border-radius:8px; padding:10px 12px; font-size:13.5px; color:var(--ink); line-height:1.4;}
.welcome-actions{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.welcome-actions .btn-secondary{
  background:none; border:1px solid var(--line); border-radius:8px; padding:11px;
  cursor:pointer; color:var(--muted); font-size:14px; width:100%;
}
.welcome-actions .btn-secondary:hover{background:var(--cream); color:var(--ink);}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(10px);
  background:var(--brand-dark); color:var(--white); padding:10px 20px;
  border-radius:20px; font-size:14px; z-index:200; opacity:0; pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* Site tour (how-to-use walkthrough) */
.tour-highlight{
  position:relative; z-index:160;
  outline:3px solid var(--brand-light);
  outline-offset:3px;
  border-radius:6px;
  animation:tourPulse 1.4s ease-in-out infinite;
}
@keyframes tourPulse{
  0%, 100%{outline-color:var(--brand-light);}
  50%{outline-color:var(--brand);}
}
.tour-tooltip{
  position:fixed; z-index:170; background:var(--white); color:var(--ink);
  border-radius:10px; padding:14px 16px; width:260px; box-shadow:0 10px 30px rgba(0,0,0,0.3);
  font-size:13.5px; line-height:1.5;
}
.tour-tooltip h5{margin:0 0 6px; font-size:14px; color:var(--brand-dark);}
.tour-actions{display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:8px;}
.tour-skip{background:none; border:none; color:var(--muted); font-size:12.5px; cursor:pointer; text-decoration:underline; padding:0;}
.tour-next{background:var(--brand); color:var(--white); border:none; border-radius:6px; padding:7px 14px; font-size:13px; cursor:pointer; font-weight:600;}
.tour-next:hover{background:var(--brand-dark);}
.tour-dots{font-size:11px; color:var(--muted); white-space:nowrap;}
footer{
  background:var(--brand-dark); color:rgba(255,255,255,0.8); text-align:center;
  padding:24px; font-size:13px;
}
footer a{color:inherit;}

/* AI Assistant widget */
#assistantBubble{
  position:fixed; bottom:24px; right:24px; width:58px; height:58px; border-radius:50%;
  background:var(--brand); color:var(--white); border:none; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,0.25); font-size:26px; z-index:150;
  display:flex; align-items:center; justify-content:center;
}
#assistantBubble:hover{background:var(--brand-dark); transform:scale(1.06);}
#assistantPanel{
  position:fixed; bottom:96px; right:24px; width:360px; max-width:90vw; height:480px;
  max-height:70vh; background:var(--white); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,0.25);
  display:flex; flex-direction:column; overflow:hidden; z-index:150;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(14px) scale(0.97);
  transition:opacity 0.25s ease, transform 0.25s cubic-bezier(.2,.8,.3,1.1), visibility 0.25s ease;
}
#assistantPanel.open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);}
.ap-header{
  background:var(--brand-dark); color:var(--white); padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center;
}
.ap-header h4{margin:0; font-size:15px;}
.ap-header span{font-size:11px; opacity:0.75; display:block; margin-top:2px;}
.ap-header button{background:none; border:none; color:var(--white); font-size:20px; cursor:pointer;}
.ap-messages{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--cream);}
.msg{max-width:82%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.45;}
.msg.bot{background:var(--white); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px;}
.msg.user{background:var(--brand); color:var(--white); align-self:flex-end; border-bottom-right-radius:4px;}
.ap-quick{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; background:var(--cream);}
.ap-quick button{
  background:var(--white); border:1px solid var(--line); border-radius:16px; padding:6px 11px;
  font-size:12px; cursor:pointer; color:var(--brand-dark);
}
.ap-quick button:hover{background:var(--brand-light); color:var(--white); border-color:var(--brand-light);}
.ap-input{display:flex; border-top:1px solid var(--line); padding:10px; gap:8px; background:var(--white);}
.ap-input input{
  flex:1; border:1px solid var(--line); border-radius:20px; padding:9px 14px; font-size:13.5px;
}
.ap-input button{
  background:var(--brand); color:var(--white); border:none; border-radius:50%;
  width:38px; height:38px; cursor:pointer; font-size:15px;
}
.ap-input button:hover{background:var(--brand-dark);}

/* Zalo floating button (bottom-left, mirrors assistant bubble on the right) */
#zaloBubble{
  position:fixed; bottom:24px; left:24px; z-index:150;
  background:#0068ff; color:var(--white); text-decoration:none;
  padding:12px 16px; border-radius:30px; font-size:14px; font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,0.25); display:flex; align-items:center; gap:6px;
}
#zaloBubble:hover{background:#0052cc; transform:scale(1.06);}
#zaloBubble::before{content:"💬"; font-size:16px;}

/* Search bar + dropdown */
.search-wrap{position:relative; margin-right:6px;}
#siteSearch{
  padding:8px 12px; border-radius:16px; border:1px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.12); color:var(--white); font-size:13.5px; width:170px;
}
#siteSearch::placeholder{color:rgba(255,255,255,0.7);}
#siteSearch:focus{outline:none; background:rgba(255,255,255,0.2);}
.search-results{
  display:block; position:absolute; top:38px; left:0; width:240px; max-width:80vw;
  background:var(--white); border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,0.2);
  overflow:hidden; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.search-results.open{opacity:1; visibility:visible; transform:translateY(0);}
.search-results .sr-item{
  display:block; padding:10px 14px; color:var(--ink); text-decoration:none; font-size:13.5px;
  border-bottom:1px solid var(--line);
}
.search-results .sr-item:last-child{border-bottom:none;}
.search-results .sr-item:hover{background:var(--cream);}
.search-results .sr-empty{padding:10px 14px; font-size:13px; color:var(--muted);}

/* Language toggle */
.lang-toggle{
  background:none; border:1px solid rgba(255,255,255,0.4); color:var(--white);
  padding:6px 10px; border-radius:14px; font-size:12px; cursor:pointer;
}
.lang-toggle:hover{background:rgba(255,255,255,0.15);}

/* Mobile hamburger + collapsible nav */
.nav-toggle{
  display:none; background:none; border:none; color:var(--white); font-size:24px; cursor:pointer;
}
@media (max-width: 760px){
  .nav-toggle{display:block;}
  nav{
    display:flex; position:absolute; top:100%; left:0; right:0; background:var(--brand-dark);
    flex-direction:column; align-items:stretch; gap:0; padding:10px 0; box-shadow:0 8px 16px rgba(0,0,0,0.25);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  }
  nav.open{opacity:1; visibility:visible; transform:translateY(0);}
  nav a{padding:12px 24px; border-bottom:1px solid rgba(255,255,255,0.08);}
  .search-wrap{padding:10px 24px; margin-right:0;}
  #siteSearch{width:100%;}
  #cartBtn{margin:10px 24px; justify-content:center;}
  .lang-toggle{margin:0 24px 10px;}
  header{position:relative;}
}

/* Lightbox */
#lightboxOverlay{background:rgba(0,0,0,0.9);}
#lightboxOverlay .lb-nav{
  background:rgba(255,255,255,0.15); border:none; color:var(--white); font-size:22px;
  width:48px; height:48px; border-radius:50%; cursor:pointer; margin:0 10px;
}
#lightboxOverlay .lb-nav:hover{background:rgba(255,255,255,0.3);}
.lightbox-img{cursor:zoom-in;}

/* Product variant swatches */
.variant-row{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0;}
.variant-dot{
  width:28px; height:28px; border-radius:50%; border:2px solid var(--line); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:0; overflow:hidden;
}
.variant-dot.selected{border-color:var(--brand);}
.variant-dot img{width:100%; height:100%; object-fit:cover;}

/* Bulk pricing tiers */
.tier-table{width:100%; border-collapse:collapse; margin:10px 0; font-size:13px;}
.tier-table td{padding:5px 8px; border-bottom:1px solid var(--line);}
.tier-table tr.active-tier td{background:var(--cream); font-weight:700;}

/* Header banner (homepage) */
.banner{
  background:linear-gradient(120deg, var(--brand-dark) 55%, #4a3527 100%);
  color:var(--white);
  display:grid;
  grid-template-columns:220px 1fr 220px;
  gap:28px;
  align-items:center;
  padding:36px 32px;
}
.banner-photos{display:flex; flex-direction:column; gap:14px;}
.banner-photos img{
  width:100%; height:130px; object-fit:cover; border-radius:6px;
  border:3px solid var(--white); box-shadow:0 6px 16px rgba(0,0,0,0.35);
}
.banner-center{text-align:center;}
.banner-center h1{
  margin:0; font-size:38px; font-weight:800; letter-spacing:1px; color:var(--white);
  text-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.banner-tagline{
  margin:6px 0 22px; font-size:20px; font-weight:700; letter-spacing:2px;
  color:var(--brand-light); text-transform:uppercase;
}
.banner-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; text-align:left;
  max-width:520px; margin:0 auto 22px;
}
.banner-cols h4{
  margin:0 0 8px; font-size:14px; letter-spacing:1px; text-transform:uppercase;
  color:var(--brand-light); border-bottom:1px solid rgba(255,255,255,0.25); padding-bottom:6px;
}
.banner-cols ul{margin:0; padding-left:18px; font-size:14px; line-height:1.9;}
.banner-cols p{margin:0 0 14px; font-size:14px; line-height:1.6; opacity:0.92;}
.banner-cols a{color:var(--white);}
.banner-cat-list{list-style:none; padding-left:0; font-size:13px; line-height:1.7;}
.banner-cat-list a{color:var(--white); text-decoration:none; border-bottom:1px solid transparent;}
.banner-cat-list a:hover{border-bottom-color:var(--brand-light);}
@media (max-width: 900px){
  .banner{grid-template-columns:1fr;}
  .banner-photos{flex-direction:row;}
  .banner-photos img{height:100px;}
  .banner-cols{grid-template-columns:1fr; max-width:100%;}
}