/* ═══════════════════════════════════════════════════════
   NPT Chain Solution — assets/css/style.css (Full Code)
   Theme: Deep Navy + Steel Blue + NPT Brand Rose Accent
   ═══════════════════════════════════════════════════════ */
:root{
  --navy-900:#0a1428;
  --navy-800:#0e1f3d;
  --navy-700:#142e57;
  --navy-600:#1b3f73;
  --navy-500:#25528f;

  --npt-graphite:#2b2b2b;
  --npt-steel:#4a7290;
  --npt-rose:#d98b8b;
  --npt-rose-dark:#c56f6f;

  --accent:var(--npt-rose);
  --ink:#16233d;
  --bg:#eef2f8;
  --line:#dbe3ef;
}

body{
  font-family:'IBM Plex Sans Thai',system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
}
a{color:var(--navy-600); text-decoration:none;}
a:hover{color:var(--navy-500);}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--navy-900); color:#9fb2ce; font-size:.83rem;
  padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar a{color:#cfd9ea;}
.topbar a:hover{color:var(--accent);}
@media (max-width:768px){ .topbar{display:none;} }

/* ---------- Navbar ---------- */
.bg-dark-blue{
  background:linear-gradient(180deg,var(--navy-900),var(--navy-800))!important;
}
.navbar{border-bottom:3px solid var(--accent);}
.navbar-brand{letter-spacing:.3px;}
.navbar .nav-link{font-weight:500;color:#cfd9ea!important;}
.navbar .nav-link:hover{color:var(--accent)!important;}
.brand-logo{height:38px; width:auto; display:block;}
@media (max-width:576px){ .brand-logo{height:30px;} }

/* ---------- Buttons & Badges ---------- */
.btn-primary{
  background:var(--navy-600); border-color:var(--navy-600);
  font-weight:600; box-shadow:0 4px 14px rgba(17,42,85,.25);
}
.btn-primary:hover,.btn-primary:focus{
  background:var(--navy-500); border-color:var(--navy-500);
}
.btn-outline-primary{color:var(--navy-600); border-color:var(--navy-600);}
.btn-outline-primary:hover{background:var(--navy-600); border-color:var(--navy-600); color:#fff;}
.btn-warning{
  background:var(--accent); border-color:var(--accent); color:#fff;
  font-weight:700;
}
.btn-warning:hover,.btn-warning:focus{
  background:var(--npt-rose-dark); border-color:var(--npt-rose-dark); color:#fff;
}
.text-primary{color:var(--navy-600)!important;}
.badge.text-bg-primary{background:var(--navy-600)!important;}
.badge.text-bg-warning{background:var(--accent)!important; color:#fff!important;}

/* ---------- Hero Section (Clear Image & Readable Text) ---------- */
.hero{
  position:relative; min-height:560px; display:flex; align-items:center;
  background:
    linear-gradient(100deg,
      rgba(7,15,36,.88) 0%,
      rgba(11,26,58,.68) 45%,
      rgba(17,42,85,.30) 100%),
    url('/warehouse/uploads/npt-highbay.jpg') center/cover no-repeat;
  color:#fff;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,15,36,.55) 0%,transparent 35%,rgba(7,15,36,.70) 100%);
  z-index:1;
}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(180deg,transparent,var(--bg)); z-index:1;
}
.hero .container{position:relative; z-index:2;}
.hero h1{
  font-size:clamp(1.8rem,4vw,3.05rem); font-weight:700; line-height:1.32;
  text-shadow:0 3px 18px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.9);
}
.hero .lead{
  color:#dbe4f2!important;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.hero .badge{box-shadow:0 4px 14px rgba(0,0,0,.35);}
.hero .text-warning{color:var(--accent)!important;}

.search-card{
  background:rgba(255,255,255,.98); border:0; border-radius:1rem;
  border-top:4px solid var(--accent);
  box-shadow:0 22px 50px rgba(7,15,36,.45);
}

/* ---------- Service Bar (3 Brands ตามป้าย) ---------- */
.service-bar{display:flex; flex-wrap:wrap; overflow:hidden; border-radius:.75rem;}
.service-bar > div{
  flex:1 1 220px; padding:1.1rem 1rem; text-align:center;
  color:#fff; font-weight:600; letter-spacing:.3px;
}
.sb-1{background:var(--npt-graphite);}
.sb-2{background:var(--npt-steel);}
.sb-3{background:var(--npt-rose);}

/* ---------- Warehouse Cards ---------- */
.wh-card{
  border:1px solid var(--line); border-radius:1rem; overflow:hidden; background:#fff;
  box-shadow:0 4px 18px rgba(11,26,58,.07);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wh-card:hover{
  transform:translateY(-6px); border-color:var(--navy-600);
  box-shadow:0 18px 40px rgba(11,26,58,.22);
}
.wh-thumb{height:210px; object-fit:cover; width:100%;}
.wh-price{color:var(--navy-600); font-weight:700; font-size:1.15rem;}
.spec-chip{
  background:#e7edf8; color:var(--navy-700); border:1px solid #d3deef;
  border-radius:.5rem; padding:.2rem .55rem; font-size:.8rem; display:inline-block;
}

/* ---------- Section Titles & Boxes ---------- */
.section{padding:4rem 0;}
.section-title{
  font-weight:700; color:var(--navy-800);
  position:relative; display:inline-block; padding-bottom:.6rem;
}
.section-title::after{
  content:''; position:absolute; left:0; bottom:0; width:64px; height:4px;
  background:var(--accent); border-radius:4px;
}
.icon-box{
  width:64px;height:64px;border-radius:1rem;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-600));
  color:var(--accent); font-size:1.7rem;
  box-shadow:0 8px 20px rgba(17,42,85,.25);
}

/* ---------- Tables & Forms ---------- */
.table > thead th{background:var(--navy-800); color:#fff;}
.form-control:focus,.form-select:focus{
  border-color:var(--navy-600); box-shadow:0 0 0 .2rem rgba(23,56,111,.15);
}
.breadcrumb a{text-decoration:none;}

/* ---------- Gallery & Images Effects ---------- */
.gallery-thumb {
  cursor: pointer;
}
.gallery-thumb img {
  transition: transform .4s ease;
}
.gallery-thumb:hover img {
  transform: scale(1.08);
}

/* ---------- Animation ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:.6s ease;}
.reveal.in-view{opacity:1; transform:none;}

/* ---------- Floating Buttons (LINE & Call) ---------- */
.float-line{
  position:fixed; right:18px; bottom:18px; z-index:1030;
  width:56px;height:56px;border-radius:50%;
  background:#06c755;color:#fff;display:grid;place-items:center;
  font-size:1.5rem;text-decoration:none;
  box-shadow:0 8px 22px rgba(6,199,85,.4);
}
.float-line:hover{color:#fff;transform:scale(1.08);transition:.2s;}

.float-call{
  position:fixed; right:18px; bottom:84px; z-index:1030;
  width:56px;height:56px;border-radius:50%;
  background:var(--navy-600); color:#fff; display:grid; place-items:center;
  font-size:1.4rem; text-decoration:none;
  box-shadow:0 8px 22px rgba(20,46,87,.45);
}
.float-call:hover{color:#fff;transform:scale(1.08);transition:.2s;}

/* ---------- Responsive Mobile Styles ---------- */
@media (max-width:576px){
  .hero{min-height:460px;}
  .hero h1{line-height:1.4;}
  .wh-thumb{height:180px;}
  .section{padding:2.5rem 0;}
  .search-card{border-radius:.75rem;}
}