/* =========================================================
   MINH HA MARINE — Shared stylesheet
   ========================================================= */

:root{
  --navy: #0b1e3d;
  --navy-dark: #081530;
  --orange: #f5820d;
  --orange-dark: #d96e00;
  --gray-100: #f6f7f9;
  --gray-600: #5b6472;
  --text-dark: #0f1c2e;
  --font-head: "Oswald", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--text-dark);
  font-size: 1.06rem;
  line-height:1.7;
}

h1,h2,h3,h4,h5,.font-head{
  font-family: var(--font-head);
  letter-spacing: .3px;
}

p{ font-size:1rem; }
.small, small{ font-size:.88rem !important; }

a{ text-decoration:none; }
img{ max-width:100%; }

.text-orange{ color: var(--orange) !important; }
.bg-navy{ background-color: var(--navy) !important; }
.bg-navy-dark{ background-color: var(--navy-dark) !important; }

.btn-orange{
  background-color: var(--orange);
  border-color: var(--orange);
  color:#fff;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-size:.9rem;
  padding:.8rem 1.6rem;
  transition:all .25s ease;
}
.btn-orange:hover{
  background-color: var(--orange-dark);
  border-color: var(--orange-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(245,130,13,.35);
}
.btn-outline-light-navy{
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  font-weight:600;
  text-transform:uppercase;
  font-size:.9rem;
  padding:.8rem 1.6rem;
  transition:all .25s ease;
}
.btn-outline-light-navy:hover{ background:#fff; color:var(--navy); transform:translateY(-2px); }

/* ---------- Header ---------- */
.navbar-brand small{
  display:block;
  font-size:.62rem;
  letter-spacing:1px;
  color:#cfd6e2;
  font-weight:400;
}
.navbar .nav-link{
  color:#fff !important;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin:0 .6rem;
  position:relative;
  transition:color .2s ease;
}
/* Giữ logo + nút menu luôn trên cùng 1 hàng, không xuống dòng trên mobile */
.navbar{
  flex-wrap: nowrap;
}
.navbar-brand{
  min-width: 0;      /* cho phép logo co lại thay vì đẩy nút menu xuống dòng */
  flex-shrink: 1;
  overflow: hidden;
}
.navbar-toggler{
  flex-shrink: 0;    /* nút menu không bao giờ bị co nhỏ hoặc rớt dòng */
}

.navbar .nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--orange);
  transition:width .25s ease;
}
.navbar .nav-link.active,
.navbar .nav-link:hover{ color: var(--orange) !important; }
.navbar .nav-link.active::after,
.navbar .nav-link:hover::after{ width:100%; }

.lang-flag-single{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:18px;
  border-radius:3px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  transition:all .25s ease;
}
.lang-flag-single img{ width:100%; height:100%; object-fit:cover; display:block; }
.lang-flag-single:hover{
  transform:translateY(-2px) scale(1.08);
  border-color:var(--orange);
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}

/* ---------- Hero / Carousel ---------- */
.hero-carousel{ position:relative; }
.hero-slide{
  position:relative;
  min-height:600px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  color:#fff;
}
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,21,48,.92) 0%, rgba(8,21,48,.55) 55%, rgba(8,21,48,.15) 100%);
}
.hero-slide .container{ position:relative; z-index:2; }
.hero-slide h1{
  font-size:2.9rem;
  font-weight:700;
  line-height:1.15;
  text-transform:uppercase;
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{ width:5%; opacity:0; transition:opacity .2s ease; }
.hero-carousel:hover .carousel-control-prev,
.hero-carousel:hover .carousel-control-next{ opacity:.85; }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon{
  background-color:rgba(0,0,0,.35); border-radius:50%; padding:1.3rem; background-size:50%;
}
.hero-carousel .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%; background-color:#fff; opacity:.5;
}
.hero-carousel .carousel-indicators .active{ opacity:1; background-color:var(--orange); }

.hero-stats-bar{ background:var(--navy-dark); padding:1.5rem 0; }
.hero-stats-bar .stat-item{
  cursor:default; padding:.5rem; border-radius:8px; transition:all .25s ease;
}
.hero-stats-bar .stat-item:hover{
  background:rgba(245,130,13,.1);
  transform:translateY(-4px) scale(1.04);
}
.hero-stats-bar .stat-item:hover .stat-num{ color:var(--orange); font-weight:800; }
.hero-stats-bar .stat-num{ font-weight:700; transition:all .2s ease; color:#fff; }
.hero-stats-bar small{ color:#c2c9d6; }

/* Side fab — fixed, scrolls with viewport */
.side-fab-fixed{
  position:fixed;
  right:1.1rem; top:64%;
  transform:translateY(-50%);
  z-index:1030;
  display:flex; flex-direction:column; gap:.6rem;
}
.side-fab-fixed a{
  width:56px; height:56px;
  background:var(--navy);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-size:1.3rem;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:all .25s ease;
}
.side-fab-fixed a:hover{
  background:var(--orange);
  transform:scale(1.12);
  color:#fff;
}

/* ---------- Section titles ---------- */
.eyebrow{
  color: var(--orange);
  text-transform:uppercase;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:1.5px;
}
.section-title{
  font-weight:700;
  text-transform:uppercase;
  color: var(--navy);
}

/* ---------- Service / Card ---------- */
.service-card{
  border:1px solid #eceff3;
  overflow:hidden;
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.service-card:hover{
  box-shadow:0 16px 32px rgba(11,30,61,.16);
  transform:translateY(-6px);
  border-color:var(--orange);
}
.service-card .img-wrap{ overflow:hidden; height:150px; }
.service-card img{ height:150px; width:100%; object-fit:cover; transition:transform .5s ease; }
.service-card:hover img{ transform:scale(1.12); }
.service-icon{
  width:54px; height:54px;
  background:var(--navy);
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-top:-27px;
  position:relative;
  z-index:2;
  font-size:1.3rem;
  transition:all .3s ease;
}
.service-card:hover .service-icon{ background:var(--orange); transform:rotate(360deg); }
.service-card h6{ font-size:.95rem; }
.service-card p{ font-size:.92rem; }
.link-arrow{
  color: var(--orange);
  font-weight:700;
  font-size:.85rem;
  text-transform:uppercase;
  transition:letter-spacing .2s ease;
}
.link-arrow:hover{ letter-spacing:1px; color:var(--orange-dark); }

/* ---------- Why choose us strip ---------- */
.why-strip .why-item{
  padding:1.5rem 1rem;
  border-radius:10px;
  transition:all .3s ease;
  cursor:default;
}
.why-strip .why-item:hover{
  background:rgba(255,255,255,.07);
  transform:translateY(-6px);
}
.why-strip .why-item i{ font-size:1.8rem; color: var(--orange); transition:transform .3s ease; }
.why-strip .why-item:hover i{ transform:scale(1.2); }
.why-strip h6{ color:#fff; text-transform:uppercase; font-size:.88rem; font-weight:700; transition:all .2s ease; }
.why-strip .why-item:hover h6{ font-weight:800; letter-spacing:.5px; }
.why-strip p{ color:#c2c9d6; font-size:.85rem; margin-bottom:0; }

/* ---------- Projects ---------- */
.project-card{
  overflow:hidden;
  transition:box-shadow .3s ease, transform .3s ease;
}
.project-card:hover{
  box-shadow:0 16px 34px rgba(11,30,61,.18);
  transform:translateY(-6px);
}
.project-card .img-wrap{ overflow:hidden; height:190px; position:relative; }
.project-card img{ height:190px; width:100%; object-fit:cover; transition:transform .5s ease; }
.project-card:hover img{ transform:scale(1.1); }
.project-card .img-wrap::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,30,61,.55), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.project-card:hover .img-wrap::after{ opacity:1; }
.project-meta{ font-size:.88rem; color:var(--gray-600); }
.project-card h6{ font-size:1rem; }
.filter-pill{
  border:1px solid #dfe3ea;
  background:#fff;
  color:var(--gray-600);
  font-size:.85rem;
  padding:.45rem 1.1rem;
  border-radius:2px;
  transition:all .2s ease;
}
.filter-pill.active,
.filter-pill:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* Projects slider */
.project-slider-track{
  display:flex;
  gap:1.25rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:.5rem;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.project-slider-track::-webkit-scrollbar{ display:none; }
.project-slider-track .slide-item{
  flex:0 0 auto;
  width:310px;
  scroll-snap-align:start;
}
@media (max-width:575.98px){
  .project-slider-track .slide-item{ width:82vw; }
}
.slider-nav-btn{
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid #dfe3ea;
  background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .2s ease;
  color:var(--navy);
  font-size:1.1rem;
}
.slider-nav-btn:hover{ background:var(--orange); color:#fff; border-color:var(--orange); }

/* ---------- Process ---------- */
.process-section{ overflow:hidden; }
.process-step{
  padding:1.25rem 1rem;
  border-radius:10px;
  transition:all .3s ease;
  background:#fff;
  border:1px solid transparent;
}
.process-step:hover{
  border-color:var(--orange);
  box-shadow:0 14px 28px rgba(11,30,61,.1);
  transform:translateY(-6px);
}
.process-step .step-icon-wrap{
  position:relative;
  width:64px; height:64px;
  margin:0 auto .75rem;
}
.process-step .step-icon{
  width:64px; height:64px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--navy);
  color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  transition:all .3s ease;
}
.process-step:hover .step-icon{ background:var(--navy); color:#fff; }
.process-step .step-num{
  position:absolute; top:-6px; right:-6px;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.75rem;
}
.process-step h6{ text-transform:uppercase; font-weight:700; font-size:.9rem; }
.process-step p{ font-size:.85rem; color:var(--gray-600); }
.process-image-bleed{
  height:100%;
  min-height:340px;
  object-fit:cover;
  width:100%;
}

/* ---------- Certificates ---------- */
.cert-card{
  transition:all .3s ease;
  border:1px solid #eceff3;
  cursor:pointer;
  overflow:hidden;
}
.cert-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 30px rgba(11,30,61,.15);
  border-color:var(--orange);
}
.cert-logo{
  height:60px;
  display:flex; align-items:center; justify-content:center;
  filter:grayscale(100%);
  opacity:.85;
  transition:all .3s ease;
}
.cert-card:hover .cert-logo{ filter:grayscale(0%); opacity:1; transform:scale(1.08); }

/* Portrait (A4) certificate photo cards */
.cert-photo-wrap{ overflow:hidden; background:#f6f7f9; }
.cert-photo-wrap img{
  width:100%;
  height:340px;
  object-fit:cover;
  object-position:top center;
  transition:transform .5s ease;
  display:block;
}
.cert-card:hover .cert-photo-wrap img{ transform:scale(1.06); }
.cert-card .cert-card-label{
  font-size:.9rem;
  transition:color .2s ease;
}
.cert-card:hover .cert-card-label{ color:var(--orange-dark) !important; }

@media (max-width: 767.98px){
  .cert-photo-wrap img{ height:260px; }
}

/* ---------- News ---------- */
.news-card{
  overflow:hidden;
  transition:all .3s ease;
  border-radius:8px;
}
.news-card:hover{ box-shadow:0 16px 30px rgba(11,30,61,.14); transform:translateY(-6px); }
.news-card .img-wrap{ overflow:hidden; height:170px; border-radius:8px; }
.news-card img{ height:170px; width:100%; object-fit:cover; transition:transform .5s ease; }
.news-card:hover img{ transform:scale(1.12); }
.news-card h6{ font-size:1rem; transition:color .2s ease; }
.news-card:hover h6 a{ color:var(--orange) !important; }
.news-date{ font-size:.82rem; color:var(--gray-600); display:flex; align-items:center; gap:.35rem; }
.news-date i{ color:var(--orange); font-size:.9rem; }
.news-card .card-body{ padding-left:.35rem; padding-right:.35rem; padding-top:.85rem; }
.news-card h6{ margin-bottom:.5rem; }

/* Header/footer wordmark logo */
.logo-wordmark{
  height:16px;
  width:auto;
  filter:brightness(0) invert(1);
}
.logo-wordmark-footer{ height:20px; }
.logo-combined-nav{ height:46px; width:auto; }
.logo-combined-footer{ height:48px; width:auto; }

/* ---------- Footer / Quote form ---------- */
.quote-section .form-control{
  border-radius:2px;
  padding:.75rem .9rem;
  font-size:.92rem;
}
.quote-section label{ font-size:.85rem; }

footer{ font-size:.92rem; }
footer a{ color:#c2c9d6; transition:all .2s ease; position:relative; }
footer a:hover{ color:var(--orange); padding-left:4px; }
footer .btn-outline-light{ transition:all .25s ease; }
footer .btn-outline-light:hover{ background:var(--orange); border-color:var(--orange); transform:translateY(-4px); }

/* ---------- Breadcrumb (inner pages) ---------- */
.page-header{
  background:var(--navy);
  color:#fff;
  padding:3.5rem 0;
}
.page-header h1{
  text-transform:uppercase;
  font-weight:700;
  font-size:2.1rem;
}
.breadcrumb-item a{ color:#cfd6e2; }
.breadcrumb-item.active{ color:var(--orange); }

/* ---------- Pagination ---------- */
.pagination .page-link{
  color:var(--navy);
  border-radius:6px !important;
  margin:0 .2rem;
  border:1px solid #dfe3ea;
  font-weight:600;
  transition:all .2s ease;
}
.pagination .page-item.active .page-link{
  background:var(--orange); border-color:var(--orange);
}
.pagination .page-link:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---------- Detail pages: share / tags / related ---------- */
.share-box{
  border-top:1px solid #eceff3;
  border-bottom:1px solid #eceff3;
  padding:1.25rem 0;
  margin:2rem 0;
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
}
.share-box .share-icon{
  width:40px; height:40px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gray-100);
  color:var(--navy);
  transition:all .25s ease;
  font-size:1rem;
}
.share-icon.fb:hover{ background:#1877f2; color:#fff; }
.share-icon.tw:hover{ background:#000; color:#fff; }
.share-icon.li:hover{ background:#0a66c2; color:#fff; }
.share-icon.wa:hover{ background:#25d366; color:#fff; }
.share-icon.link:hover{ background:var(--orange); color:#fff; }

.tag-box .tag{
  display:inline-block;
  background:var(--gray-100);
  color:var(--gray-600);
  font-size:.82rem;
  padding:.4rem .9rem;
  border-radius:20px;
  margin:0 .4rem .5rem 0;
  transition:all .2s ease;
  border:1px solid #eceff3;
}
.tag-box .tag:hover{ background:var(--orange); color:#fff; border-color:var(--orange); }

.related-box{
  background:var(--gray-100);
  border-radius:12px;
  padding:1.25rem;
}
.related-item{
  display:flex;
  gap:.9rem;
  align-items:center;
  padding:.75rem;
  border-radius:10px;
  background:#fff;
  margin-bottom:.75rem;
  transition:all .25s ease;
  border:1px solid transparent;
}
.related-item:last-child{ margin-bottom:0; }
.related-item:hover{
  border-color:var(--orange);
  box-shadow:0 10px 22px rgba(11,30,61,.1);
  transform:translateX(4px);
}
.related-item img{
  width:64px; height:64px; object-fit:cover; border-radius:8px; flex-shrink:0;
}
.related-item .service-icon{ margin-top:0; flex-shrink:0; }
.related-item .related-title{
  font-size:.88rem; font-weight:600; color:var(--text-dark); transition:color .2s ease;
}
.related-item:hover .related-title{ color:var(--orange-dark); }

/* ---------- Certificate detail ---------- */
.cert-detail-image{
  cursor:zoom-in;
  border-radius:12px;
  transition:transform .3s ease;
  border:1px solid #eceff3;
}
.cert-detail-image:hover{ transform:scale(1.02); box-shadow:0 16px 34px rgba(11,30,61,.14); }
.cert-lightbox .modal-content{ background:transparent; border:none; }
.cert-lightbox .btn-close{ background-color:#fff; opacity:1; }

/* ---------- About page ---------- */
.value-card{
  border:1px solid #eceff3;
  border-radius:12px;
  transition:all .3s ease;
  height:100%;
}
.value-card:hover{
  border-color:var(--orange);
  transform:translateY(-8px);
  box-shadow:0 16px 32px rgba(11,30,61,.12);
}
.value-card i{ transition:transform .3s ease; }
.value-card:hover i{ transform:scale(1.15) rotate(-6deg); }

.company-info-box li{
  padding:.5rem 0;
  border-bottom:1px dashed #dfe3ea;
}
.company-info-box li:last-child{ border-bottom:none; }

@media (max-width: 767.98px){
  body{ font-size:1rem; }
  .hero-slide h1{ font-size:1.95rem; }
  .hero-slide{ min-height:auto; padding:3rem 0 2rem; }
  .side-fab-fixed{ display:none; }
  .process-image-bleed{ min-height:220px; border-radius:12px; }
  .logo-combined-nav{ height:36px; }
}

@media (max-width: 400px){
  .logo-combined-nav{ height:30px; }
}