@charset "UTF-8";

/* ===== Danh mục dịch vụ — portfolio grid ===== */
.svc-portfolio{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(14px, 1.8vw, 22px);
  margin-top:clamp(36px, 4vw, 52px);
}
.svc-portfolio-card{
  position:relative;
  display:block;
  min-height:clamp(280px, 22vw, 360px);
  border-radius:8px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg, #1A0808, #5A0E10);
  transition:transform .6s var(--ease);
}
.svc-portfolio-card:hover{
}
.svc-portfolio-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  transition:transform 1.4s var(--ease);
}
.svc-portfolio-card:hover .svc-portfolio-bg{ transform:scale(1.06); }
.svc-portfolio-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(14,6,6,.1) 0%, rgba(14,6,6,.4) 50%, rgba(14,6,6,.95) 100%);
  pointer-events:none;
}
.svc-portfolio-card.is-hidden{ display:none; }

.svc-portfolio-actions{
  display:flex;
  justify-content:center;
  margin-top:clamp(28px, 3vw, 40px);
}

/* service-row-arrow — đồng bộ homepage (CSS arrow, không dùng ký tự →) */
.svc-portfolio-card .service-row-arrow{
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(232,196,101,.3);
  color:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  line-height:0;
  flex-shrink:0;
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.svc-portfolio-card .service-row-arrow::before{
  content:'';
  display:block;
  width:8px;
  height:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg) translate(-1px, 1px);
}
.svc-portfolio-card:hover .service-row-arrow{
  background:var(--gold);
  color:var(--dark);
  border-color:var(--gold);
}

.svc-portfolio-arrow{ pointer-events:none; }
.svc-portfolio-content{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:clamp(20px, 2.4vw, 28px);
}
.svc-portfolio-title{
  font:500 clamp(18px, 1.5vw, 24px)/1.2 var(--font-display);
  letter-spacing:-.005em;
  color:#fff;
  margin:0;
}

@media (max-width:1100px){
  .svc-portfolio{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .svc-portfolio{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:480px){
  .svc-portfolio{ grid-template-columns:1fr; }
  .svc-portfolio-card{ min-height:240px; }
}

.process{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; counter-reset:step; }
.process-step{
  position:relative; padding:28px 22px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08); border-radius:14px;
  transition:border-color .35s ease, transform .35s ease;
}
.process-step:hover{ border-color:rgba(232,196,101,.4); }
.process-step::before{
  content:counter(step, decimal-leading-zero); counter-increment:step;
  display:block;
  font:500 36px/1.15 var(--font-display);
  color:var(--gold);
  margin-bottom:14px;
}
.process-step h4{ font:500 18px/1.25 var(--font-display); color:#2A0A0C; margin:0 0 8px; }
.process-step p{ font:300 13px/1.6 var(--font-body); color:rgba(42,10,12,.78); margin:0; }

@media (max-width:900px){
  .process{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .process{ grid-template-columns:1fr; }
}

/* ===== Cam kết dịch vụ trọn gói — boxed 01–04 ===== */
.svc-commit .commit-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.svc-commit .commit-card{
  position:relative;
  padding:clamp(26px,3vw,34px) clamp(20px,2.2vw,26px) clamp(24px,2.6vw,30px);
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--surface-glass-border);
  border-radius:16px;
  background:var(--surface-glass);
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.svc-commit .commit-card::before{
  content:'';
  position:absolute; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0; transition:opacity .4s var(--ease);
}
.svc-commit .commit-card:hover{
  border-color:var(--surface-glass-border-hover);
  background:var(--surface-glass-hover);
}
.svc-commit .commit-card:hover::before{ opacity:1; }
.svc-commit .commit-num{
  font:500 clamp(40px,4.4vw,56px)/1 var(--font-display);
  letter-spacing:-.02em;
  color:var(--gold);
  opacity:.9;
}
.svc-commit .commit-title{
  font:500 clamp(18px,1.4vw,21px)/1.3 var(--font-display);
  color:#2A0A0C; margin:0;
}
.svc-commit .commit-desc{
  font:300 14px/1.65 var(--font-body);
  color:rgba(42,10,12,.76); margin:0;
}
@media (max-width:900px){
  .svc-commit .commit-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .svc-commit .commit-grid{ grid-template-columns:1fr; }
}