:root{
  --primary:#1e40af;
  --primary-dark:#1a3690;
  --ink:#1a1d29;
  --gray:#6b7280;
  --border:#e5e7eb;
  --bg-soft:#f6f7fb;
  --danger:#e11d48;
  --green:#16a34a;
  --radius:10px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  font-size:14px;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ line-height:1.3; }

.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
}

/* ===== Header (reused) ===== */
.header{
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
  border-bottom:1px solid #f1f1f4;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:36px;
  height:76px;
}
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-text-wrap{ display:flex; flex-direction:column; line-height:1.15; }
.logo-text{ font-size:17px; font-weight:800; color:#1a2b6b; letter-spacing:.2px; }
.logo-dot{ color:#22c55e; }
.logo-tagline{ font-size:10px; color:var(--gray); font-weight:500; }

.main-nav{ display:flex; align-items:center; gap:30px; flex:1; }
.main-nav a{ display:flex; align-items:center; gap:6px; font-size:14.5px; font-weight:500; color:#3f3f46; white-space:nowrap; }
.main-nav a:hover{ color:var(--primary); }

.header-auth{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.header-auth .btn-link{ color:#3f3f46; font-size:14.5px; font-weight:500; background:none; border:none; }
.header-auth .btn-link:hover{ color:var(--primary); }
.btn-primary-sm{
  background:#3d5afe; color:#fff; padding:10px 22px; border-radius:8px;
  font-size:14px; font-weight:700; border:none;
}
.btn-primary-sm:hover{ background:#2e46e0; }

.menu-toggle{ display:none; flex-direction:column; gap:5px; margin-left:auto; background:none; border:none; }
.menu-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* ===== Product page wrapper ===== */
.product-page{
  background:var(--bg-soft);
  padding:24px 0 40px;
}
.product-card-wrap{
  background:#fff;
  border-radius:16px;
  padding:24px 28px 28px;
}
/* ===== Breadcrumb ===== */
.breadcrumb{padding:12px 0; }
.breadcrumb-inner{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--gray);
}
.breadcrumb-inner a:hover{ color:var(--primary); }
.breadcrumb-current{ color:var(--ink); font-weight:600; }
.breadcrumb-inline{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--gray);
  margin-bottom:18px;
}
.breadcrumb-inline a:hover{ color:var(--primary); }
.breadcrumb-inline svg{ color:#d1d5db; }
.breadcrumb-current{ color:var(--ink); font-weight:600; }

/* ===== 3-column grid ===== */
.product-main-grid{
  display:grid;
  grid-template-columns:340px 1fr 330px;
  gap:32px;
  align-items:start;
  background: #FFF;
    padding: 20px;
    border-radius: 15px;
}

/* ---- Column 1: Gallery ---- */
.gallery-main{
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:1/1;
  background:var(--bg-soft);
  border:1px solid var(--border);
}
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:10px; margin-top:12px; }
.gallery-thumb{
  width:60px; height:60px;
  border-radius:8px;
  overflow:hidden;
  border:2px solid var(--border);
  padding:0;
  background:var(--bg-soft);
  flex-shrink:0;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumb.active{ border-color:var(--primary); }

/* ---- Column 2: Product info ---- */
.product-info{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.product-brand{ font-size:13.5px; color:var(--gray); }
.product-brand a{ color:var(--primary); font-weight:600; }
.product-title{ font-size:24px; font-weight:800; margin:2px 0; }
.product-rating-line{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--gray);
  margin-bottom:6px;
}
.stars-outline{ color:#d1d5db; letter-spacing:1px; }
.product-rating-line a{ color:var(--primary); }
.product-rating-line .dot{ color:var(--border); }
.product-rating-line b{ color:var(--ink); }

.price-box{
  background:#fef4f2;
  border-radius:10px;
  padding:16px 18px;
}
.price-box-value{ margin-bottom:10px; }
.price-box-value span:first-child{ font-size:26px; font-weight:800; color:#e4402c; }
.price-box-unit{ font-size:14px; color:var(--gray); margin-left:4px; }
.price-box-list{ display:flex; flex-direction:column; gap:8px; }
.price-box-list li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:#374151;
}
.dot-b{
  width:7px; height:7px; border-radius:50%;
  margin-top:5px; flex-shrink:0;
}
.dot-blue{ background:#2563eb; }
.dot-green{ background:#16a34a; }
.dot-orange{ background:#f59e0b; }

.trust-box h3{
  font-size:12.5px; font-weight:800; letter-spacing:.3px;
  color:var(--ink); margin-bottom:10px;
}
.trust-box ul{ display:flex; flex-direction:column; gap:10px; }
.trust-box li{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:#374151;
}
.muted-italic{ color:var(--gray); font-style:italic; }
.link-btn{
  background:none; border:none; color:var(--primary);
  font-size:13px; font-weight:600; cursor:pointer; padding:0;
}
.link-btn:hover{ text-decoration:underline; }

/* ---- Column 3: Booking card ---- */
.booking-box{
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:#fff;
}

.shop-header{ display:flex; align-items:center; gap:10px; }
.shop-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.shop-header-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.shop-name{ display:flex; align-items:center; gap:5px; font-weight:700; font-size:14px; }
.shop-address{
  font-size:11.5px; color:var(--gray);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:220px;
}

.booking-row-head{ display:flex; align-items:center; justify-content:space-between; }
.booking-row-title{ font-size:13.5px; font-weight:700; }
.status-pill{
  display:flex; align-items:center; gap:5px;
  background:#dcfce7; color:#15803d;
  font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:20px;
}
.dot-live{ width:6px; height:6px; border-radius:50%; background:#15803d; }

.booking-dates{ display:flex; gap:10px; }
.booking-dates label,
.booking-phone{
  display:flex; flex-direction:column; gap:5px;
  font-size:10.5px; font-weight:700; color:var(--gray);
  letter-spacing:.3px;
  flex:1;
}
.booking-phone em{ color:#e11d48; font-style:normal; }
.booking-dates input,
.booking-phone input{
  border:1px solid var(--border);
  border-radius:6px;
  padding:9px 10px;
  font-size:13px;
  color:var(--ink);
  outline:none;
  font-weight:400;
}
.booking-dates input:focus,
.booking-phone input:focus{ border-color:var(--primary); }

.promo-link{
  display:flex; align-items:center; gap:6px;
  background:none; border:none;
  color:var(--primary);
  font-size:13px; font-weight:600;
  padding:0; align-self:flex-start;
}
.promo-link:hover{ text-decoration:underline; }

.booking-summary{
  border-top:1px dashed var(--border);
  padding-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.summary-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--gray); }
.summary-row--total{ font-weight:800; color:#e4402c; font-size:15px; }

.btn-rent-now{
  background:linear-gradient(135deg,#f04438,#dc2626);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:13px 0;
  font-size:14.5px;
  font-weight:800;
  letter-spacing:.4px;
}
.btn-rent-now:hover{ opacity:.92; }

.booking-secondary{ display:flex; gap:10px; }
.btn-chat, .btn-cart{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 0;
  font-size:12.5px;
  font-weight:700;
  background:#fff;
}
.btn-chat{ color:#2563eb; border-color:#bfdbfe; }
.btn-chat:hover{ background:#eff6ff; }
.btn-cart{ color:#f97316; border-color:#fed7aa; }
.btn-cart:hover{ background:#fff7ed; }

.btn-view-shop{
  display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 0;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
}
.btn-view-shop:hover{ background:var(--bg-soft); }

.social-row{ display:flex; gap:10px; justify-content:center; }
.social-icon{
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:11px; font-weight:800;
}
.social-icon--fb{ background:#1877f2; }
.social-icon--ig{ background:radial-gradient(circle at 30% 110%, #fdf497, #fdf497, #fd5949, #d6249f, #285AEB); }
.social-icon--tiktok{ background:#000; }
.social-icon--zalo{ background:#0068ff; }
.social-icon:hover{ opacity:.85; }

/* ===== Detail + map ===== */
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.detail-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
}
.detail-card h2{ font-size:17px; margin-bottom:14px; }
.detail-table{ width:100%; border-collapse:collapse; }
.detail-table tr{ border-bottom:1px solid var(--border); }
.detail-table tr:last-child{ border-bottom:none; }
.detail-table td{ padding:10px 0; font-size:13.5px; }
.detail-table td:first-child{ color:var(--gray); width:40%; }
.detail-table td:last-child{ font-weight:600; }

.map-placeholder{
  aspect-ratio:16/7;
  background:var(--bg-soft);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gray);
  margin-bottom:10px;
}
.map-address{ font-size:13px; color:var(--gray); }

/* ===== Sections generic ===== */
.section{ padding:36px 0; }
.section-head{ margin-bottom:20px; }
.section-head h2{ font-size:20px; font-weight:800; }

/* ===== Tabs ===== */
.tabs-head{
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--border);
  margin-bottom:24px;
}
.tab-btn{
  background:none; border:none;
  padding:12px 20px;
  font-size:14px; font-weight:600;
  color:var(--gray);
  border-bottom:2px solid transparent;
}
.tab-btn.active{ color:var(--primary); border-bottom-color:var(--primary); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.tab-text{
  font-size:14px; color:#374151;
  max-height:4.6em;
  overflow:hidden;
  margin-bottom:10px;
}
.tab-text.expanded{ max-height:none; }
.tab-panel h3{ font-size:17px; margin-bottom:10px; }

.policy-item{ margin-bottom:20px; }
.policy-item h4{ font-size:15px; margin-bottom:6px; }
.policy-item p{ font-size:13.5px; color:#374151; }

.tip-box{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:8px;
  padding:12px 14px;
  font-size:13px;
  color:#1e3a8a;
  margin-bottom:18px;
}
.tab-panel h4{ font-size:15px; margin:16px 0 8px; }
.check-list{ display:flex; flex-direction:column; gap:8px; }
.check-list li{
  font-size:13.5px; color:#374151;
  padding-left:18px;
  position:relative;
}
.check-list li::before{
  content:"•";
  position:absolute; left:0; color:var(--primary); font-weight:800;
}

/* ===== Reviews ===== */
.reviews-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:32px;
}
.reviews-summary h2{ font-size:18px; margin-bottom:16px; }
.rating-big{ text-align:center; margin-bottom:18px; }
.rating-number{ font-size:38px; font-weight:800; display:block; }
.rating-stars{ color:#d1d5db; font-size:18px; letter-spacing:2px; margin:4px 0; }
.rating-count{ font-size:12.5px; color:var(--gray); }

.rating-bars{ display:flex; flex-direction:column; gap:6px; }
.rating-bar-row{
  display:grid;
  grid-template-columns:14px 1fr 20px;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--gray);
}
.rating-bar-row .bar{
  height:6px; background:var(--border); border-radius:4px; overflow:hidden;
}
.rating-bar-row .bar div{ height:100%; background:#f59e0b; }

.reviews-form{
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
}
.login-required{ font-size:13.5px; color:var(--gray); margin-bottom:10px; }
.review-input-box{ margin:18px 0; }
.review-input-label{ font-size:13.5px; font-weight:700; display:block; margin-bottom:8px; }
.review-input-box textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-size:13.5px;
  resize:vertical;
  margin-bottom:10px;
  font-family:inherit;
}
.review-input-box textarea:disabled{ background:var(--bg-soft); }
.btn-outline{
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  padding:9px 20px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:700;
}
.btn-outline:disabled{ opacity:.5; cursor:not-allowed; }
.empty-state{ font-size:13px; color:var(--gray); text-align:center; padding:14px 0; }

/* ===== Comments ===== */
.comment-login-box{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 18px;
  margin:16px 0;
  font-size:13.5px;
}

/* ===== Product grid & card (Sản phẩm tương tự) ===== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.product-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  transition:box-shadow .2s ease, transform .2s ease;
  display:flex;
  flex-direction:column;
}
.product-card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.08); transform:translateY(-2px); }
.product-thumb{
  aspect-ratio:1/1;
  background:linear-gradient(135deg,#e5e7eb,#cbd5e1);
  background-size:cover;
  background-position:center;
  position:relative;
}
.product-badge{
  position:absolute; top:8px; left:8px;
  background:rgba(255,255,255,.92); color:var(--ink);
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px;
}
.product-body{ padding:12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-cat{ font-size:11px; color:var(--gray); }
.product-name{ font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3; }
.product-detail{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.product-rating{ display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--gray); }
.product-condition{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; }
.badge-good{ background:#dbeafe; color:#1e40af; }
.badge-new{ background:#dcfce7; color:#15803d; }
.product-shop{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--gray); }
.product-shop-avatar{ width:18px; height:18px; border-radius:50%; background:#cbd5e1; }
.product-price{ margin-top:auto; font-size:14.5px; font-weight:800; color:var(--primary); }
.product-price span{ font-size:11.5px; font-weight:500; color:var(--gray); }

/* ===== Feature strip ===== */
.feature-strip{ background:var(--bg-soft); }
.feature-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.feature-item{ text-align:center; }
.feature-icon{
  width:56px; height:56px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin:0 auto 14px; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.feature-item h4{ font-size:15px; font-weight:700; margin-bottom:6px; }
.feature-item p{ font-size:12.5px; color:var(--gray); }

/* ===== Footer ===== */
.footer{ background:#111827; color:#9ca3af; padding-top:48px; }
.footer-top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:32px;
  padding-bottom:36px; border-bottom:1px solid #1f2937;
}
.logo--footer .logo-text{ color:#fff; }
.footer-col--brand p{ font-size:13px; margin:14px 0 12px; line-height:1.6; }
.footer-contact{ font-size:12.5px; margin-bottom:4px; }
.footer-col h4{ color:#fff; font-size:14px; margin-bottom:16px; }
.footer-col a{ display:block; font-size:13px; margin-bottom:10px; }
.footer-col a:hover{ color:#fff; }
.footer-col p{ font-size:12.5px; margin-bottom:12px; }
.newsletter-form{ display:flex; gap:8px; }
.newsletter-form input{
  flex:1; padding:9px 12px; border-radius:6px; border:1px solid #374151;
  background:#1f2937; color:#fff; font-size:12.5px; outline:none;
}
.newsletter-form button{
  background:var(--primary); color:#fff; padding:9px 16px; border-radius:6px;
  font-size:12.5px; font-weight:700; border:none;
}
.newsletter-form button:hover{ background:var(--primary-dark); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; font-size:12px; flex-wrap:wrap; gap:10px;
}
.footer-bottom a{ color:#9ca3af; }
.footer-bottom a:hover{ color:#fff; }
.footer-legal{ display:flex; gap:18px; }

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(17,24,39,.5);
  display:none;
  align-items:center; justify-content:center;
  z-index:200;
  padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:#fff;
  border-radius:14px;
  max-width:480px;
  width:100%;
  padding:24px;
}
.modal-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
}
.modal-head h3{ font-size:17px; }
.modal-head button{
  background:none; border:none; font-size:16px; color:var(--gray); cursor:pointer;
}
.modal-body p{ font-size:13.5px; color:#374151; margin-bottom:12px; line-height:1.6; }
.modal-close-btn{ width:100%; text-align:center; margin-top:6px; }

/* ===== Mobile drawer ===== */
.drawer{
  position:fixed; top:0; right:-300px; width:280px; height:100%;
  background:#fff; z-index:100; padding:20px;
  transition:right .3s ease; box-shadow:-4px 0 20px rgba(0,0,0,.15);
}
.drawer.open{ right:0; }
.drawer-header{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:700; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border);
}
.drawer-header button{ background:none; border:none; font-size:16px; cursor:pointer; }
.drawer a{ display:block; padding:10px 0; font-size:14px; font-weight:500; }
.drawer hr{ border:none; border-top:1px solid var(--border); margin:8px 0; }
.drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:90; display:none; }
.drawer-overlay.open{ display:block; }

/* ===== Responsive ===== */
@media (max-width:1024px){
  .product-main-grid{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:900px){
  .main-nav{ display:none; }
  .header-auth{ display:none; }
  .menu-toggle{ display:flex; }
  .detail-grid{ grid-template-columns:1fr; }
  .reviews-grid{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .product-grid{ grid-template-columns:repeat(2, 1fr); }
  .booking-dates{ flex-direction:column; }
  .footer-top{ grid-template-columns:1fr; }
}