/* httpdocs/catalog/view/theme/tt_uren1/stylesheet/dnstyle.css
 * CSS cho trang chủ DN Auto Care (banner khuyến mãi, dịch vụ, "Vì sao khách hàng chọn")
 * Đi kèm: httpdocs/catalog/view/javascript/dnauto.js
 *
 * Đã sửa 2 lỗi so với bản gốc:
 *  1) .service-steven: thêm "animation-play-state: paused" — nếu không có dòng này,
 *     animation "rise" tự chạy ngay khi tải trang, khiến IntersectionObserver trong JS
 *     (set animationPlayState = 'running') trở nên vô nghĩa vì animation đã chạy xong từ trước.
 *  2) .banner-steven: animation nhập cảnh (entrance) chỉ còn animate "opacity",
 *     KHÔNG còn animate "transform" nữa — vì transform đang được JS (mousemove) điều khiển
 *     trực tiếp qua inline style; nếu CSS animation cũng animate transform, giá trị animation
 *     sẽ luôn được trình duyệt ưu tiên hơn inline style, khiến hiệu ứng nghiêng theo con trỏ
 *     không bao giờ hiển thị.
 */

:root{
  --navy: #10233F;
  --navy-2: #17335C;
  --steel: #3A5A8C;
  --orange: #FF6A2B;
  --orange-2: #FF8C4C;
  --amber: #FFB238;
  --paper: #F6F4EF;
  --ink: #10233F;
  --ink-soft: #5A6478;
  --line: #E4E1D8;
  --white: #FFFFFF;
  --radius: 14px;
  --shadow: 0 18px 40px -18px rgba(16,35,63,0.35);
}
.wrap-steven{
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

/* ---------- Header ---------- */
.top-eyebrow-steven{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  margin-bottom: 10px;
}
.top-eyebrow-steven .dash-steven{
  width:36px; height:2px; background:var(--orange);
}
.top-eyebrow-steven span{
  font-family:"Mulish",sans-serif;
  letter-spacing:.28em;
  font-size:12px;
  font-weight:600;
  color: var(--steel);
  text-transform:uppercase;
}

.brand-title-steven{
  text-align:center;
  font-family:"Mulish",sans-serif;
  font-weight:900;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing:-0.01em;
  color: var(--navy);
  margin: 0 0 6px;
  text-transform:uppercase;
}
.brand-title-steven em{
  font-style:normal;
  color: var(--orange);
}
.brand-sub-steven{
  text-align:center;
  color: var(--ink-soft);
  font-size:14px;
  margin: 0 0 48px;
  letter-spacing:.03em;
}

/* ---------- Layout ---------- */
.grid-steven{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: 44px;
  align-items:start;
}
@media (max-width: 860px){
  .grid-steven{ grid-template-columns: 1fr; }
}

/* ---------- Promo Banner (left) ---------- */
.banner-steven{
  position:relative;
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 55%, #0C1B32 100%);
  border-radius: var(--radius);
  padding: 30px 24px 26px;
  color: var(--white);
  overflow:hidden;
  box-shadow: var(--shadow);
  isolation:isolate;
  /* FIX #2: chỉ animate opacity, không animate transform (transform do JS mousemove điều khiển) */
  opacity:0;
  animation: fadeInBanner-steven .7s cubic-bezier(.2,.7,.2,1) forwards;
  transition: transform .25s ease-out; /* mượt hoá khi JS đổi transform lúc mousemove */
}
@keyframes fadeInBanner-steven{
  to{ opacity:1; }
}
.banner-steven::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 34px);
  z-index:0;
}
.banner-steven::after{
  content:"";
  position:absolute;
  width:260px; height:260px;
  right:-90px; top:-90px;
  background: radial-gradient(circle, rgba(255,106,43,0.35), transparent 70%);
  z-index:0;
}

.banner-head-steven{ position:relative; z-index:2; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.logo-mark-steven{
  width:40px; height:40px; border-radius:50%;
  background: var(--orange);
  display:flex; align-items:center; justify-content:center;
  flex:none;
  box-shadow: 0 6px 14px -4px rgba(255,106,43,.7);
}
.logo-mark-steven svg{ width:22px; height:22px; }
.brand-word-steven{ line-height:1.15; }
.brand-word-steven .l1-steven{ font-family:"Mulish",sans-serif; font-weight:700; font-size:16px; letter-spacing:.04em; }
.brand-word-steven .l2-steven{ font-size:10px; letter-spacing:.2em; color: rgba(255,255,255,.55); text-transform:uppercase; }

.banner-headline-steven{
  position:relative; z-index:2;
  font-family:"Mulish",sans-serif;
  font-weight:600;
  font-size: 22px;
  line-height:1.25;
  margin: 0 0 4px;
}
.banner-headline-steven .big-steven{
  display:block;
  font-size: 30px;
  font-weight:700;
  color: var(--amber);
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
}

.badge-row-steven{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:10px;
  margin: 14px 0 22px;
}
.badge-date-steven{
  font-size:12px; letter-spacing:.05em;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  padding:6px 12px;
  border-radius:999px;
}
.badge-star-steven{
  position:relative; z-index:2;
  width:74px; height:74px;
  margin-left:auto;
  animation: spin-steven 14s linear infinite;
  flex:none;
}

.promo-list-steven{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  gap:12px;
  margin-bottom: 8px;
}
.promo-item-steven{
  display:grid;
  grid-template-columns: 46px 1fr;
  gap:14px;
  align-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 12px 14px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.promo-item-steven:hover{
  transform: translateX(6px);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,178,56,.5);
}
.promo-icon-steven{
  width:46px; height:46px; border-radius:10px;
  background: linear-gradient(160deg, var(--orange), #E14E11);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.promo-icon-steven svg{ width:24px; height:24px; }
.promo-tag-steven{
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:.06em;
  color: var(--navy);
  background: var(--amber);
  padding:2px 8px;
  border-radius:5px;
  text-transform:uppercase;
  margin-bottom:3px;
}
.promo-text-steven{ font-size:14px; font-weight:600; line-height:1.35; }
.promo-text-steven b{ color: var(--amber); }

.banner-foot-steven{
  position:relative; z-index:2;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,.22);
}
.banner-foot-steven .free-steven{
  font-size:12px;
  color: rgba(255,255,255,.75);
  margin-bottom:12px;
}
.call-btn-steven{
  display:flex; align-items:center; gap:10px;
  background: var(--orange);
  color:#fff;
  text-decoration:none;
  font-family:"Mulish",sans-serif;
  font-weight:600;
  letter-spacing:.02em;
  padding: 12px 16px;
  border-radius: 10px;
  font-size:15px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: 0 10px 22px -10px rgba(255,106,43,.8);
}
.call-btn-steven:hover{
  transform: translateY(-2px);
  background: var(--orange-2);
  box-shadow: 0 14px 26px -10px rgba(255,106,43,.9);
}
.call-btn-steven .ring-steven{
  width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  flex:none;
  animation: pulse-steven 1.8s ease-in-out infinite;
}
.call-btn-steven .num-steven{ display:flex; flex-direction:column; line-height:1.2; }
.call-btn-steven .num-steven small{ font-family:"Mulish"; font-weight:400; font-size:10px; opacity:.85; letter-spacing:.08em; }

/* ---------- Right column ---------- */
.intro-steven{
  opacity:0; transform: translateY(16px);
  animation: rise-steven .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:.1s;
}
.intro-steven p{
  font-size:15.5px;
  line-height:1.75;
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 640px;
}
.intro-steven p b{ color: var(--navy); font-weight:700; }
.rule-steven{
  width:64px; height:3px;
  background: var(--orange);
  border-radius:2px;
  margin: 0 0 28px;
}

.services-steven{
  display:flex; flex-direction:column;
  gap: 16px;
}
.service-steven{
  position:relative;
  display:grid;
  grid-template-columns: 62px 1fr;
  gap:20px;
  align-items:flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  cursor:default;
  overflow:hidden;
  opacity:0; transform: translateY(20px);
  animation: rise-steven .6s cubic-bezier(.2,.7,.2,1) forwards;
  /* FIX #1: animation phải "paused" ngay từ đầu, JS sẽ set "running" khi cuộn tới */
  animation-play-state: paused;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.service-steven::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(var(--orange), var(--amber));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.service-steven:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.service-steven:hover::before{ transform: scaleY(1); transform-origin: top; }

.service-steven .icon-steven{
  width:62px; height:62px;
  border-radius: 12px;
  background: linear-gradient(155deg, var(--navy), var(--navy-2));
  display:flex; align-items:center; justify-content:center;
  flex:none;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .35s ease;
}
.service-steven .icon-steven svg{ width:28px; height:28px; transition: transform .45s ease; }
.service-steven:hover .icon-steven{
  background: linear-gradient(155deg, var(--orange), #E14E11);
  transform: rotate(-6deg) scale(1.06);
}

.service-steven h3{
  font-family:"Mulish",sans-serif;
  font-size:16.5px;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin: 4px 0 8px;
  color: var(--navy);
  position:relative;
  display:inline-block;
}
.service-steven h3::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:2px;
  background: var(--orange);
  transition: width .4s ease;
}
.service-steven:hover h3::after{ width:100%; }

.service-steven p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color: var(--ink-soft);
  max-width: 560px;
}

.service-steven .num-steven{
  position:absolute;
  right:20px; top:14px;
  font-family:"Mulish",sans-serif;
  font-size:34px;
  font-weight:700;
  color: var(--line);
  z-index:0;
  user-select:none;
  transition: color .35s ease;
}
.service-steven:hover .num-steven{ color:#F1D9CE; }

/* ---------- Animations ---------- */
@keyframes rise-steven{
  to{ opacity:1; transform:none; }
}
@keyframes spin-steven{
  to{ transform: rotate(360deg); }
}
@keyframes pulse-steven{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  50%{ box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.service-steven:nth-child(1){ animation-delay:.15s; }
.service-steven:nth-child(2){ animation-delay:.25s; }
.service-steven:nth-child(3){ animation-delay:.35s; }
.service-steven:nth-child(4){ animation-delay:.45s; }

:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Why-us section ---------- */
.why-steven{
  margin-top: 96px;
}
.why-grid-steven{
  display:grid;
  grid-template-columns: 460px 1fr;
  gap: 52px;
  align-items:center;
}
@media (max-width: 900px){
  .why-grid-steven{ grid-template-columns: 1fr; gap:32px; }
}

/* image side */
.why-media-steven{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3.1;
  opacity:0; transform: translateX(-28px);
}
.why-media-steven.is-in-steven{
  animation: slideIn-steven .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.why-media-steven .frame-corner-steven{
  position:absolute; width:38px; height:38px;
  z-index:3;
  transition: width .4s ease, height .4s ease;
}
.why-media-steven:hover .frame-corner-steven{ width:52px; height:52px; }
.why-media-steven .fc-tl-steven{ top:14px; left:14px; border-top:4px solid var(--orange); border-left:4px solid var(--orange); border-top-left-radius:8px; }
.why-media-steven .fc-br-steven{ bottom:14px; right:14px; border-bottom:4px solid var(--orange); border-right:4px solid var(--orange); border-bottom-right-radius:8px; }

.why-media-steven svg{
  width:100%; height:100%; display:block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.why-media-steven:hover svg{ transform: scale(1.045); }

.why-badge-steven{
  position:absolute; left:18px; bottom:18px; z-index:4;
  background: rgba(16,35,63,.88);
  backdrop-filter: blur(4px);
  color:#fff;
  padding: 10px 16px;
  border-radius: 12px;
  display:flex; align-items:center; gap:10px;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
  animation: floatY-steven 3.2s ease-in-out infinite;
}
.why-badge-steven .dot-steven{
  width:10px; height:10px; border-radius:50%;
  background: var(--amber);
  flex:none;
  animation: pulse2-steven 1.6s ease-in-out infinite;
}
.why-badge-steven span{ font-size:12.5px; font-weight:700; letter-spacing:.02em; }

/* content side */
.why-eyebrow-steven{
  display:flex; align-items:center; gap:10px;
  color: var(--orange);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.why-eyebrow-steven .ln-steven{ width:28px; height:2px; background:var(--orange); }

.why-title-steven{
  font-family:"Mulish",sans-serif;
  font-weight:900;
  font-size: clamp(24px, 3.2vw, 32px);
  color: var(--orange);
  margin: 0 0 30px;
  position:relative;
  display:inline-block;
}
.why-title-steven::after{
  content:"";
  position:absolute; left:0; bottom:-10px;
  height:3px; width:0;
  background: linear-gradient(90deg, var(--orange), var(--amber));
  border-radius:2px;
  transition: width .8s cubic-bezier(.2,.7,.2,1);
}
.why-title-steven.is-in-steven::after{ width:72px; }

.why-list-steven{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 36px;
}
@media (max-width:560px){
  .why-list-steven{ grid-template-columns: 1fr; }
}

.why-item-steven{
  display:flex; align-items:flex-start; gap:12px;
  opacity:0; transform: translateY(14px);
  transition: transform .3s ease;
}
.why-item-steven.is-in-steven{
  animation: rise-steven .55s cubic-bezier(.2,.7,.2,1) forwards;
}
.why-item-steven:hover{ transform: translateX(4px); }

.why-check-steven{
  width:24px; height:24px;
  border-radius:50%;
  border: 2px solid var(--orange);
  color: var(--orange);
  display:flex; align-items:center; justify-content:center;
  flex:none;
  margin-top:1px;
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.why-check-steven svg{ width:13px; height:13px; }
.why-item-steven:hover .why-check-steven{
  background: var(--orange);
  color:#fff;
  transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 6px 14px -4px rgba(255,106,43,.6);
}

.why-item-steven p{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color: var(--navy);
  font-weight:600;
}

@keyframes slideIn-steven{
  to{ opacity:1; transform:none; }
}
@keyframes floatY-steven{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes pulse2-steven{
  0%{ box-shadow: 0 0 0 0 rgba(255,178,56,.7); }
  70%{ box-shadow: 0 0 0 9px rgba(255,178,56,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,178,56,0); }
}