/* =====================================================================
 *  GIAO DIỆN NGOÀI - BỔ SUNG CHO BOOTSTRAP 5
 *
 *  Màu thương hiệu khai ở assets/css/brand.css (nạp trước tệp này).
 *  Ở đây chỉ trỏ lại vào các biến --brand-* để cả site đổi màu bằng
 *  một chỗ duy nhất.
 * ================================================================== */
:root{
    --shop-primary:var(--brand);        /* vàng logo - CHỈ dùng làm nền */
    --shop-primary-text:var(--brand-text); /* sắc vàng đậm, dùng làm chữ trên nền trắng */
    --shop-ink:var(--brand-ink);        /* chữ đặt trên nền vàng */
    --shop-dark:var(--brand-dark);
    --shop-muted:#6c757d;
}

body.shop-body{ background:#f7f6f2; color:#212529; }
a{ color:var(--shop-primary-text); }

/* ---------- Thanh trên cùng ---------- */
.shop-topbar{ background:var(--shop-dark); color:#dee2e6; padding:.4rem 0; font-size:.85rem; }
.shop-topbar a{ color:#dee2e6; text-decoration:none; }
.shop-topbar a:hover{ color:#fff; }

/* ---------- Đầu trang ---------- */
.shop-header{ background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.06); z-index:1030; }
.shop-header .navbar-brand{ font-size:1.15rem; }
.shop-header .navbar-brand img{ max-height: 52px; }
.shop-header .nav-link{ font-weight:500; }

.shop-mega{ min-width:640px; max-height:70vh; overflow:auto; padding:.75rem; }
@media (max-width: 991.98px){ .shop-mega{ min-width:auto; } }
.shop-mega-col{ break-inside:avoid; margin-bottom:.5rem; }

/* ---------- Đường dẫn ---------- */
.shop-breadcrumb{ background:#fff; }

/* ---------- Thẻ sản phẩm ---------- */
.shop-product-card{ transition:transform .15s ease, box-shadow .15s ease; }
.shop-product-card:hover{ transform:translateY(-3px); box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1)!important; }
.shop-product-img{ height:150px; object-fit:contain; }
.shop-detail-img{ max-height:380px; object-fit:contain; }
.shop-thumb{ width:64px; height:64px; object-fit:cover; cursor:pointer; }
.shop-subcat{ background:#fff; color:#212529; transition:all .15s; }
.shop-subcat:hover{ background:var(--shop-primary); color:var(--shop-ink)!important; border-color:var(--shop-primary)!important; }

/* ---------- Khung nhập kích thước ---------- */
#metal-cut-form .form-control.is-invalid,
#metal-cut-form .form-select.is-invalid{ border-color:#dc3545; }
#metal-cut-form [data-dim-error]{ min-height:1rem; }
#calcBox [data-out]{ font-variant-numeric:tabular-nums; }

/* ---------- Bảng chọn dạng thẻ (vận chuyển, thanh toán) ---------- */
.shop-option{ cursor:pointer; border:1px solid #dee2e6; border-radius:.5rem; padding:.75rem 1rem; background:#fff; transition:all .15s; }
.shop-option:hover{ border-color:var(--brand-hover); }
.shop-option input:checked ~ .shop-option-body{ color:var(--shop-primary-text); }
.shop-option:has(input:checked){ border-color:var(--brand-active); box-shadow:0 0 0 .18rem rgba(var(--brand-rgb),.35); }

/* ---------- Bảng tổng tiền ---------- */
.shop-summary tr td{ padding:.35rem 0; }
.shop-summary tr td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Thông báo nổi ---------- */
.shop-toast-box{ position:fixed; right:1rem; bottom:1rem; z-index:2000; max-width:360px; }
.shop-toast{ opacity:1; transition:opacity .4s ease; margin-bottom:.5rem; }
.shop-toast.hide{ opacity:0; }

/* ---------- Chân trang ---------- */
.shop-footer{ background:var(--shop-dark); color:#adb5bd; }
.shop-footer a{ color:#adb5bd; text-decoration:none; }
.shop-footer a:hover{ color:#fff; }
.shop-footer h6{ color:#fff; }

/* ---------- Bảng in / trang đơn hàng ---------- */
.table-dimension{ font-size:.85rem; }
.table-dimension code{ font-size:.8rem; }

@media print{
    .shop-topbar,.shop-header,.shop-footer,.shop-breadcrumb,.btn,.no-print{ display:none!important; }
    body.shop-body{ background:#fff; }
}

/* ---------- Trang chủ ---------- */
/* Nền tối ấm chứ không phải nền vàng: khối này in chữ trắng, mà chữ
   trắng trên #FFC622 chỉ đạt 1,57:1. Vàng chỉ làm vệt sáng ở góc. */
.shop-hero{
    background:linear-gradient(135deg,var(--brand-dark) 0%,#3E382C 60%,#554B33 100%);
    position:relative; overflow:hidden;
}
.shop-hero:after{
    content:""; position:absolute; right:-90px; top:-90px;
    width:320px; height:320px; border-radius:50%;
    background:radial-gradient(circle,rgba(var(--brand-rgb),.30),transparent 70%);
    pointer-events:none;
}
.shop-hero > .row{ position:relative; z-index:1; }
.shop-hero .font-monospace{ font-size:.82rem; line-height:1.7; }

.shop-home-cat{ transition:transform .15s ease, box-shadow .15s ease; }
.shop-home-cat:hover{ transform:translateY(-3px); box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1)!important; }
.shop-home-cat:hover h3{ color:var(--shop-primary-text)!important; }

/* ===================== TRANG CHỦ: SLIDER ===================== */
.shop-slider .carousel-inner{ overflow:hidden; }
.shop-slider-img{
  width:100%;
  height:clamp(260px, 34vw, 460px);
  object-fit:cover;
  display:block;
}
/* Chưa gắn ảnh thì vẽ dải màu, slider không bị sập chiều cao.
   Dùng dải TỐI chứ không phải dải vàng: chữ trên slider màu trắng,
   mà trắng trên #FFC622 chỉ đạt 1,57:1 - không đọc nổi. Vàng làm
   vạch nhấn ở mép dưới. */
.shop-slider-blank{
  background:
     radial-gradient(120% 140% at 88% 20%, rgba(var(--brand-rgb),.28) 0%, transparent 58%),
     linear-gradient(120deg, var(--brand-dark) 0%, #46402F 100%);
  border-bottom:4px solid var(--brand);
}
.shop-slider-cap{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%);
}
.shop-slider-box{ max-width:620px; }
.shop-slider-cap h2{ text-shadow:0 2px 12px rgba(0,0,0,.45); }
/* Nút chuyển ảnh: mặc định của Bootstrap rộng 15% mỗi bên nên mũi tên nằm
   đè lên chữ. Thu về đúng bề rộng nút và chừa lề cho khối chữ. */
.shop-slider .carousel-control-prev,
.shop-slider .carousel-control-next{ width:56px; opacity:.65; }
.shop-slider .carousel-control-prev:hover,
.shop-slider .carousel-control-next:hover{ opacity:1; }
.shop-slider-cap .container{ padding-left:4.25rem; padding-right:4.25rem; }

@media (max-width:575.98px){
  .shop-slider-cap h2{ font-size:1.35rem; }
  .shop-slider-cap p{ font-size:.9rem; }
  .shop-slider-cap .btn{ padding:.35rem .8rem; font-size:.9rem; }
  /* Màn hình hẹp: vuốt ngang và chấm tròn là đủ, bỏ mũi tên để lấy chỗ cho chữ */
  .shop-slider .carousel-control-prev,
  .shop-slider .carousel-control-next{ display:none; }
  .shop-slider-cap .container{ padding-left:1rem; padding-right:1rem; }
}

/* ===================== TRANG CHỦ: BANNER DANH MỤC ===================== */
.shop-cat-banner{
  position:relative;
  background-size:cover;
  background-position:center;
  background-color:var(--shop-dark);
  min-height:150px;
  overflow:hidden;
}
.shop-cat-banner:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.15) 100%);
}
/* Danh mục chưa có ảnh banner: dải tối ấm + vạch vàng bên trái.
   Không đổ nền vàng vì tên danh mục in chữ trắng. */
.shop-cat-banner-plain{
  background-image:
     radial-gradient(90% 160% at 92% 15%, rgba(var(--brand-rgb),.26) 0%, transparent 60%),
     linear-gradient(115deg, var(--brand-dark) 0%, #46402F 100%);
  border-left:5px solid var(--brand);
}
.shop-cat-banner-plain:after{ background:none; }
.shop-cat-banner-in{
  position:relative; z-index:1;
  min-height:150px;
  padding:1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
}
@media (max-width:575.98px){
  .shop-cat-banner, .shop-cat-banner-in{ min-height:110px; }
  .shop-cat-banner-in{ padding:1rem; }
  .shop-cat-banner-in h2{ font-size:1.1rem; }
}