/* =========================
   GLOBAL / BASE (base.blade.php)
   ========================= */
html, body { font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif !important; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* =========================
   TOPBAR (partials/header.blade.php)
   ========================= */
.topbar { background:#fff; border-bottom:1px solid #eee; font-size:14px; }
.topbar .container { display:grid; grid-template-columns:1fr 1.2fr 1fr; align-items:center; gap:16px; padding:8px 0; }
.tb-left{display:flex;gap:18px;align-items:center;}
.tb-item{display:inline-flex;align-items:center;gap:6px;color:#6a0dad;text-decoration:none;}
.tb-item .ico{width:16px;height:16px;}
.tb-search{display:flex;align-items:center;border:1px solid #e3e3e3;border-radius:4px;overflow:hidden;background:#fff;}
.tb-search input{flex:1;padding:10px 12px;border:0;outline:none;font-size:14px;}
.tb-search button{width:40px;height:40px;border:0;background:#7a19ff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.tb-search button img{width:18px;height:18px;filter:brightness(0) invert(1);}
.tb-right{display:flex;gap:14px;align-items:center;justify-content:flex-end;}
.tb-lang{display:inline-flex;gap:6px;align-items:center;margin-right:6px;}
.tb-lang img{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px #ddd;}
.tb-link{display:inline-flex;align-items:center;gap:6px;color:#111;text-decoration:none;}
.tb-link .ico{width:16px;height:16px;filter:hue-rotate(260deg) saturate(150%);}
.tb-cart{position:relative;display:inline-flex;align-items:center;}
.tb-cart .ico{width:20px;height:20px;}
.tb-cart .badge{position:absolute;top:-6px;right:-8px;background:#7a19ff;color:#fff;border-radius:999px;font-size:11px;line-height:1;padding:3px 6px;}
@media (max-width: 992px) {
  .topbar .container { grid-template-columns: 1fr; gap: 10px; }
  .tb-right { justify-content: flex-start; flex-wrap: wrap; }
}

/* =========================
   MENU ICONS (home.blade.php)
   ========================= */
.menu-icons{ padding:12px 0; position:relative; z-index:10; background:#fff; margin-bottom:12px; }
.menu-icons .icon-grid{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px;
}
.menu-icons .icon-grid li{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.menu-icons .icon-grid li a{
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:#111; font-size:14px; line-height:1.3; transition:color .2s;
}
.menu-icons .icon-grid li a:hover{ color:#6a0dad; }
.menu-icons .icon-grid li img{ width:40px; height:40px; margin-bottom:6px; display:block; object-fit:contain; }
.menu-icons .icon-grid .logo-item{ margin-right:24px; }
.menu-icons .icon-grid .logo-item img{ width:120px; height:120px; object-fit:contain; }

/* Icon pair slide: default down, hover slides from top */
.menu-icon-link { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:#111; font-size:14px; line-height:1.3; transition:color .2s; }
.menu-icon-img{ position:relative; width:50px; height:50px; overflow:hidden; }
.menu-icon-img img{
  position:absolute; top:50%; left:50%; width:100%; height:auto;
  transform:translate(-50%, -50%); transition:transform .5s ease, opacity .35s ease; will-change:transform, opacity;
}
.menu-icon-img .icon-default{ opacity:1; transform:translate(-50%, -50%) scale(1); }
.menu-icon-img .icon-hover{ opacity:0; transform:translate(-50%, -150%) scale(.98); }
.menu-icon-link:hover .icon-default{ opacity:0; transform:translate(-50%, -20%) scale(.92); }
.menu-icon-link:hover .icon-hover{ opacity:1; transform:translate(-50%, -50%) scale(1); }
.menu-icon-link:hover{ color:#6a0dad; }

/* =========================
   HOME SLIDER (home.blade.php)
   ========================= */
.home-slider{ width:100%; margin:0; padding:0; position:relative; z-index:0; }
@supports (width: 100dvw){
  .home-slider{ width:100dvw; margin-left:calc(50% - 50dvw); margin-right:calc(50% - 50dvw); max-width:none; }
}
@supports not (width: 100dvw){
  .home-slider{ width:calc(100vw - (100vw - 100%)); margin-left:calc(50% - 50vw + (100vw - 100%)/2); margin-right:calc(50% - 50vw + (100vw - 100%)/2); max-width:none; }
}
.home-slider .item{ aspect-ratio:21/9; }
.home-slider .item img,
.home-slider .owl-carousel .item img{ width:100%; height:100%; object-fit:cover; display:block; }
#home-slider.owl-carousel{ display:block; visibility:visible; }

/* =========================
   SERVICES BLOCK
   ========================= */
.services{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:40px auto; }
.service-item{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:#fff; border:1px solid #eee; padding:12px; text-align:center; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.service-item img{ width:40px; height:40px; margin-bottom:8px; object-fit:contain; }
.service-text h4{ font-size:15px; margin:8px 0 4px; font-weight:600; }
.service-text p{ font-size:13px; color:#666; margin:0; }
@media (max-width: 992px){ .services{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 576px){ .services{ grid-template-columns:1fr; } }

/* =========================
   PROMO BLOCK / CARD (overlaps slider)
   ========================= */
.promo-block { position:relative; z-index:2; margin-top:-64px; }
@media (max-width: 992px){ .promo-block { margin-top:-44px; } }
@media (max-width: 576px){ .promo-block { margin-top:-28px; } }

.promo-card{ background:#fff; border:1px solid #eee; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:16px; }
.promo-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.promo-photos img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; display:block; }
.promo-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px 24px; align-items:start; }
.pf-item{ display:grid; grid-template-columns:28px 1fr; column-gap:12px; align-items:flex-start; }
.pf-ico{ width:22px; height:22px; object-fit:contain; margin-top:2px; }
.pf-text h4{ font-size:14px; font-weight:700; margin:0 0 6px; }
.pf-text p{ font-size:13px; color:#666; margin:0; }
@media (max-width: 992px){ .promo-photos{ grid-template-columns:repeat(2,1fr); } .promo-features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 576px){ .promo-photos{ grid-template-columns:1fr; } .promo-features{ grid-template-columns:1fr; } }

/* =========================
   FOOTER (sections & links)
   ========================= */
.site-footer{ background:#fff; border-top:1px solid #eee; margin-top:40px; }
.site-footer .footer-top{
  display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:28px; padding:28px 0; align-items:start;
}
.f-col h4{ margin:0 0 10px; font-size:15px; font-weight:700; }
.f-brand{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.f-brand img{ width:44px; height:44px; object-fit:contain; }
.f-brand-name{ font-weight:700; color:#6a0dad; }
.site-footer .f-contact,
.site-footer .f-links{
  list-style:none; margin:0; padding-left:0;
  display:grid; gap:6px; font-size:14px; color:#555;
}
.site-footer .f-links a{ color:#555; text-decoration:none; }
.site-footer .f-links a:hover{ color:#6a0dad; text-decoration:underline; }
.f-newsletter{ display:flex; gap:8px; margin:6px 0 8px; }
.f-newsletter input{ flex:1; border:1px solid #ddd; border-radius:4px; padding:10px 12px; font-size:14px; }
.f-newsletter button{ width:42px; border:0; border-radius:4px; background:#6a0dad; color:#fff; cursor:pointer; font-size:18px; }
.f-note{ font-size:13px; color:#666; margin:6px 0; }
.f-bct{ width:210px; height:auto; margin-top:8px; }
.footer-bottom{ background:#fafafa; border-top:1px solid #eee; padding:12px 0; font-size:13px; color:#666; }
@media (max-width:992px){ .site-footer .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:576px){ .site-footer .footer-top{ grid-template-columns:1fr; } }

/* =========================
   FOOTER ICON STRIP (ONLY inner logo flips)
   ========================= */
.logo-strip{ background:#f6f6f7; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:18px 0; }
.logo-row{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:26px 32px; justify-content:center; align-items:center;
}
.logo-row li{ margin:0; padding:0; }
.logo-pill{ text-decoration:none; color:#111; display:flex; flex-direction:column; align-items:center; perspective:800px; }
.logo-circle{
  width:64px; height:64px; border-radius:50%; background:#fff; border:1px solid #ddd;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.logo-circle img{
  width:28px; height:28px; object-fit:contain; filter:grayscale(100%) contrast(90%);
  backface-visibility:hidden; transform:rotateY(0deg);
  will-change:transform; transition:transform .3s cubic-bezier(.2,.8,.2,1), filter .2s ease;
}
.logo-caption{ margin-top:8px; font-size:13px; line-height:1.2; color:#333; }
.logo-pill:hover .logo-circle{ border-color:#6a0dad; box-shadow:0 0 0 4px rgba(106,13,173,.08); }
.logo-pill:hover .logo-circle img{ transform:rotateY(360deg); filter:none; }
@media (max-width:768px){ .logo-circle{ width:58px; height:58px; } .logo-circle img{ width:26px; height:26px; } }
@media (max-width:480px){ .logo-circle{ width:52px; height:52px; } .logo-circle img{ width:24px; height:24px; } .logo-caption{ font-size:12px; } }
@media (prefers-reduced-motion: reduce){
  .logo-circle, .logo-circle img{ transition:none; }
  .logo-pill:hover .logo-circle img{ transform:none; }
}

/* =========================
   CATEGORY PAGE
   ========================= */
.category-page { padding: 12px 0 40px; }
.bv-breadcrumb { font-size: 14px; margin-bottom: 10px; color:#666; }
.bv-breadcrumb a { color:#666; text-decoration:none; }
.bv-breadcrumb span { margin: 0 6px; }

.bv-category-layout { display:grid; grid-template-columns:260px 1fr; gap:28px; }
.bv-filters .bv-filter-card { background:#fff; border:1px solid #eee; border-radius:10px; padding:14px 16px; margin-bottom:16px; }
.bv-filter-title { font-weight:600; margin-bottom:10px; }
.bv-filter-list { list-style:none; margin:0; padding:0; }
.bv-filter-list li { margin:6px 0; }
.bv-filter-list a { text-decoration:none; color:#111; font-size:14px; }
.bv-filter-list a.active { font-weight:bold; color:#6a0cc3; }

.bv-grid-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.bv-page-title { font-size:22px; margin:0; }
.bv-tools { display:flex; align-items:center; gap:10px; }
.bv-search input { width:280px; height:34px; padding:0 10px; border:1px solid #ddd; border-radius:8px 0 0 8px; }
.bv-search button { height:34px; padding:0 12px; border:1px solid #ddd; border-left:0; border-radius:0 8px 8px 0; background:#f7f7f7; }
.bv-sort select { height:34px; border:1px solid #ddd; border-radius:8px; padding:0 10px; }

.bv-product-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bv-product-card { background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.bv-thumb { display:block; aspect-ratio: 3/4; background:#fafafa; }
.bv-thumb img { width:100%; height:100%; object-fit:cover; }
.bv-info { padding:12px; display:flex; flex-direction:column; gap:6px; }
.bv-name { font-size:15px; line-height:1.35; margin:0; height:40px; overflow:hidden; }
.bv-name a { color:#222; text-decoration:none; }
.bv-meta { font-size:12px; color:#666; }
.bv-contact { margin-top:6px; display:inline-block; text-align:center; border:1px solid #6a0cc3; color:#6a0cc3; padding:6px 10px; border-radius:8px; text-decoration:none; }
.bv-contact:hover { background:#6a0cc3; color:#fff; }
.bv-paginate { margin-top:16px; }

@media (max-width:1024px){
  .bv-category-layout{ grid-template-columns:1fr; }
  .bv-product-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:640px){
  .bv-product-grid{ grid-template-columns: repeat(2, 1fr); }
  .bv-search input{ width:180px; }
}

/* Helpers */
.cover-ratio{ position:relative; width:100%; aspect-ratio:3/4; background:#fafafa; overflow:hidden; }
.cover-ratio img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em; line-height:1.3;
}

/* Sidebar card */
.card .card-header{ background:#fff; font-weight:600; }
.card .card-body a{ color:#111; }
.card .card-body a.fw-semibold{ color:#6a0cc3; }

/* Grid cards (compact) */
.card.h-100{ border-radius:10px; border:1px solid #eee; }
.card-body{ padding:8px !important; }
.card-body .small{ font-size:11px; color:#666 !important; }
.card h6{ font-size:14px; line-height:1.3; margin:0 0 4px; }
.fw-semibold{ font-size:14px; }

@media (min-width:1200px){
  .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
}

/* =========================
   PAGINATION (Laravel Tailwind render)
   ========================= */
.pagination{ display:flex; justify-content:center; gap:4px; margin-top:20px; font-size:14px; }
.pagination .page-link{ display:inline-block; padding:6px 10px; border:1px solid #ddd; border-radius:4px; background:#fff; color:#333; text-decoration:none; transition:all .2s; }
.pagination .page-link:hover{ background:#6a0dad; color:#fff; }
.pagination .active .page-link{ background:#6a0dad; color:#fff; border-color:#6a0dad; }
.pagination svg{ width:14px; height:14px; }

/* Tailwind pagination container from Laravel */
nav[role="navigation"]{ display:flex; justify-content:center; margin-top:20px; }
nav[role="navigation"] > p,
nav[role="navigation"] > div:first-child { display:none; }
nav[role="navigation"] > div:last-child{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
nav[role="navigation"] > div:last-child > a,
nav[role="navigation"] > div:last-child > span{
  min-width:34px; height:34px; padding:0 10px; border:1px solid #ddd; border-radius:6px;
  background:#fff; color:#333; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; text-decoration:none; transition:all .2s ease;
}
nav[role="navigation"] > div:last-child > a:hover{ background:#f3e8ff; border-color:#6a0dad; color:#6a0dad; }
nav[role="navigation"] > div:last-child > span[aria-current="page"]{ background:#6a0dad; border-color:#6a0dad; color:#fff; font-weight:600; }
nav[role="navigation"] svg{ width:14px; height:14px; }

/* =========================
   FEATURED SECTION
   ========================= */
.featured { text-align:center; margin:60px auto; }
.featured h2 { font-size:26px; font-weight:700; margin-bottom:6px; }
.featured .subtitle { color:#666; margin-bottom:24px; }

/* Tabs */
.tab-menu { display:flex; justify-content:center; gap:12px; margin:20px 0 28px; flex-wrap:wrap; }
.tab-menu button{
  padding:8px 16px; border:1px solid #ddd; border-radius:6px; background:#fff;
  font-size:14px; cursor:pointer; transition:all .2s;
}
.tab-menu button:hover{ border-color:#6a0dad; color:#6a0dad; }
.tab-menu button.active{ border-color:#6a0dad; background:#f9f3ff; color:#6a0dad; font-weight:600; }

/* Product grid */
.product-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:18px; margin-top:20px; }
.product-card{
  background:#fff; border:1px solid #eee; border-radius:10px; padding:10px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:transform .2s, box-shadow .2s; animation:zoomIn .6s ease forwards;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.product-card .thumb, .product-card .cover-ratio{ aspect-ratio:3/4; width:100%; background:#fafafa; margin-bottom:10px; }
.product-card img{ width:100%; height:100%; object-fit:cover; }
.product-card h3, .product-card .name{ font-size:14px; margin:10px 0 6px; font-weight:500; line-height:1.3; }
.product-card .price{ font-size:14px; font-weight:600; color:#6a0dad; }

/* Zoom-in animation */
@keyframes zoomIn{
  0%{ transform:scale(.5); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.product-card:nth-child(1){ animation-delay:.1s; }
.product-card:nth-child(2){ animation-delay:.2s; }
.product-card:nth-child(3){ animation-delay:.3s; }
.product-card:nth-child(4){ animation-delay:.4s; }
.product-card:nth-child(5){ animation-delay:.5s; }

/* Shelves */
.shelf { margin-top: 40px; }
.shelf-title{ text-align:center; font-size:24px; margin:0; }
.shelf-subtitle{ text-align:center; color:#777; margin:6px 0 16px; }
#biz-shelf .shelf-card{ background:#fff; border:1px solid #eee; border-radius:10px; padding:10px; text-align:center; margin:6px; }
.shelf-thumb{ position:relative; display:block; aspect-ratio:3/4; background:#fafafa; overflow:hidden; border-radius:8px; }
.shelf-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.shelf-badge{ position:absolute; left:8px; bottom:8px; background:#6a0dad; color:#fff; font-size:12px; padding:4px 8px; border-radius:999px; }
.shelf-name{ font-size:14px; line-height:1.3; margin:8px 0 0; min-height:36px; }
.shelf-more{ text-align:center; margin-top:14px; }
.shelf-more a{ text-decoration:none; color:#6a0dad; font-weight:600; }

/* =========================
   COLLECTIONS
   ========================= */
.collections{ margin:60px auto; }
.collection-card{ position:relative; overflow:hidden; border-radius:8px; }
.collection-card img{ width:100%; height:auto; display:block; transition:transform .5s ease; }
.collection-card:hover img{ transform:scale(1.05); }
.collection-card .overlay{
  position:absolute; inset:0; background:rgba(255,255,255,.85);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  opacity:0; transition:opacity .4s ease; padding:20px;
}
.collection-card:hover .overlay{ opacity:1; }
.collection-card .tag{ font-size:14px; font-weight:700; color:#6a0dad; margin-bottom:6px; text-transform:uppercase; }
.collection-card h3{ font-size:20px; font-weight:700; margin:0 0 8px; color:#111; }
.collection-card p{ font-size:14px; color:#444; margin:0; }

/* =========================
   VIDEO OF THE MONTH
   ========================= */
.video-of-month{ margin:60px auto; text-align:center; }
.video-of-month h2{ font-size:26px; font-weight:700; margin-bottom:6px; }
.video-of-month .subtitle{ color:#666; font-size:15px; margin-bottom:30px; }

.video-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; text-align:left; }
@media (max-width: 992px){ .video-grid{ grid-template-columns:1fr; } }

.video-text p{ margin-bottom:16px; color:#333; line-height:1.6; }
.video-text ul{ padding-left:20px; margin:0; color:#444; line-height:1.5; }
.video-text ul li{ margin-bottom:6px; }

.video-box{ position:relative; border-radius:8px; overflow:hidden; }
.video-box img{ width:100%; display:block; border-radius:8px; }

/* Play button with pulse */
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:70px; height:70px; background:#6a0dad; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; cursor:pointer; z-index:2;
  box-shadow:0 4px 10px rgba(0,0,0,.25); transition:background .3s ease; animation:pulse 1.5s infinite;
}
.play-btn:hover{ background:#500a99; }
.play-btn span{ margin-left:4px; }

/* Pulse ring */
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(106,13,173,.6); }
  70%{ box-shadow:0 0 0 20px rgba(106,13,173,0); }
  100%{ box-shadow:0 0 0 0 rgba(106,13,173,0); }
}

/* Modal popup */
.video-modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); justify-content:center; align-items:center; z-index:9999; }
.video-modal-content{ position:relative; max-width:800px; width:90%; }
.video-modal video{ width:100%; border-radius:8px; }
.video-modal .close{ position:absolute; top:-40px; right:-10px; font-size:32px; color:#fff; cursor:pointer; }



/* PARTNERS */
.partners { padding: 36px 0 8px; }
.partners h2 { text-align: center; margin: 0 0 6px; }
.partners .subtitle { text-align: center; margin-bottom: 18px; color:#555; }

.partners-strip .partner{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:16px 20px; height:100px; transition:box-shadow .2s ease, transform .2s ease;
}
.partners-strip .partner:hover{
  transform: translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.partners-strip .partner img{
  max-height:60px; width:auto;
  filter: grayscale(100%); opacity:.75; transition: filter .2s, opacity .2s;
}
.partners-strip .partner:hover img{ filter:none; opacity:1; }

/* khoảng cách giữa các logo trong owl */
.partners-strip .owl-stage-outer{ padding: 4px 0; }





/* ===== Testimonials ===== */
.testimonials { padding: 36px 0 18px; text-align: center; }
.testimonials h2 { margin-bottom: 6px; }
.testimonials .subtitle {
  color:#666; font-size:14px; margin-bottom: 22px;
}

#testi-carousel .testi-card{
  background:#fff; border:1px solid #eee; border-radius:14px;
  padding:24px 20px; margin:6px 10px; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  box-shadow:0 2px 10px rgba(0,0,0,.04); transition:transform .2s ease, box-shadow .2s ease;
}
#testi-carousel .testi-card:hover{
  transform: translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}
.testi-avatar{
  width:96px; height:96px; border-radius:50%; object-fit:cover; margin-bottom:14px;
  box-shadow:0 0 0 4px #f3f0ff, 0 0 0 1px #e6e1ff;
}
.testi-quote{
  font-size:15px; line-height:1.6; color:#333; margin:0 0 14px;
}
.testi-name{ font-weight:700; font-size:14px; margin:0; }
.testi-role{ font-size:13px; color:#777; }

/* dot nav của owl */
#testi-carousel .owl-dots{ margin-top:10px; }
#testi-carousel .owl-dot span{
  width:8px; height:8px; background:#ddd; display:block; border-radius:999px;
  transition:all .2s ease;
}
#testi-carousel .owl-dot.active span{ background:#6a0dad; transform:scale(1.25); }



/* Product Detail */
.product-detail { padding: 24px 0; }
.pd-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; }
.pd-left .pd-cover { width: 160px; height: 220px; border:1px solid #eee; box-shadow: 0 2px 8px rgba(0,0,0,.06); margin-bottom: 12px; }
.pd-left .pd-cover img{ width:100%; height:100%; object-fit:cover; }
.pd-title { font-size: 28px; font-weight: 700; line-height: 1.3; margin: 8px 0; }
.pd-brand { font-weight:600; color:#673ab7; margin-bottom:8px; }
.pd-meter { height:4px; width:120px; background:#e9e3f7; border-radius:2px; margin:8px 0 16px; }
.pd-meta { display:grid; gap:6px; font-size:14px; }
.pd-meta dt{ color:#666; min-width:120px; }
.pd-meta > div{ display:flex; gap:8px; }
.pd-tags { margin-top:16px; }
.pd-tags-title{ font-size:14px; color:#666; margin-bottom:6px; }
.pd-tags ul{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-tags li a{ display:inline-block; padding:4px 8px; background:#f5f5f7; border-radius:999px; font-size:12px; color:#444; text-decoration:none; }

.pd-tabs{ display:flex; gap:12px; margin-top:24px; }
.pd-tab{ border:none; background:#f3f2f8; padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600; }
.pd-tab.is-active{ background:#4f46e5; color:#fff; }
.pd-tabpanel{ display:none; margin-top:16px; }
.pd-tabpanel.is-active{ display:block; }
.pd-desc{ color:#222; line-height:1.7; }

.pd-right .pd-card{ position:sticky; top:80px; border:1px solid #eee; border-radius:12px; padding:16px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.pd-select{ display:flex; gap:8px; }
.pd-select select{ flex:1; padding:10px 12px; border:1px solid #e3e3e3; border-radius:10px; }
.pd-contact{ white-space:nowrap; padding:10px 12px; border:1px solid #e3e3e3; border-radius:10px; background:#fff; cursor:pointer; }
.pd-qty{ display:flex; align-items:center; gap:8px; margin:14px 0; }
.pd-qty input{ width:80px; padding:8px; border:1px solid #e3e3e3; border-radius:8px; }
.pd-total{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px dashed #eee; border-bottom:1px dashed #eee; margin-bottom:12px; }
.pd-total strong{ font-size:20px; color:#000; }
.pd-addcart{ width:100%; padding:12px 16px; border:none; border-radius:10px; background:#1f1b5a; color:#fff; font-weight:700; cursor:pointer; }
.pd-addcart:hover{ opacity:.95; }
.pd-note{ font-size:12px; color:#666; margin-top:10px; line-height:1.5; }

/* Breadcrumb */
.pd-breadcrumb{ font-size:14px; color:#777; margin-top:10px; }
.pd-breadcrumb a{ color:#6a0dad; text-decoration:none; }



/* Grid sản phẩm */
.grid-products{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:20px;
}
@media (max-width:1280px){ .grid-products{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:1024px){ .grid-products{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){  .grid-products{ grid-template-columns:repeat(2,1fr); } }

/* Card */
.prod-card .thumb{ position:relative; background:#f8f8f8; border:1px solid #eee; border-radius:12px; overflow:hidden; aspect-ratio:3/4; }
.prod-card .thumb img{ width:100%; height:100%; object-fit:contain; transition:transform .3s; }
.prod-card:hover .thumb img{ transform:scale(1.05); }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }



/* Cho phép pane định vị tuyệt đối trong khối chi tiết */
.product-detail { position: relative; }

/* Vùng ảnh để bắt hover */
.pd-zoom-wrap { position: relative; cursor: zoom-in; }

/* Khung zoom nổi bên phải ảnh */
.pd-zoom-pane{
  position: absolute;
  top: 0; left: 0; /* sẽ đặt lại bằng JS */
  width: 360px; aspect-ratio: 3/4;
  display: none; pointer-events: none;
  background-repeat: no-repeat; background-color:#fff;
  border:1px solid #eaeaea; border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  z-index:20;
}

/* Tắt zoom trên màn hình nhỏ */
@media (max-width:1023.98px){
  .pd-zoom-pane{ display:none !important; }
  .pd-zoom-wrap{ cursor: default; }
}

/* Khi chỉ còn 1 nút: khối ô vuông bo tròn */
.product-card .hover-actions.single {
  padding: 6px;
  border-radius: 12px;
}

.product-card .ha-btn {
  width: 48px;   /* to hơn chút */
  height: 48px;
}

.product-card .ha-btn svg {
  width: 26px;
  height: 26px;
  display: block;
}
/* Hero fade mượt, tránh repaints lớn */
.home-slider .owl-stage,
.home-slider .owl-stage-outer,
.home-slider .owl-item { will-change: transform, opacity; }
#home-slider .item img{
  display:block; width:100%; height:auto;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transform: translateZ(0);
}

/* Dải đối tác trôi mượt */
.partners-strip .owl-stage,
.partners-strip .owl-stage-outer,
.partners-strip .owl-item { will-change: transform; }
.partners-strip img{
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transform: translateZ(0);
}