/**
 * ace-effects.css — Lớp hiệu ứng lấy cảm hứng từ Aceternity UI, port về CSS thuần
 * cho stack PHP + Bootstrap của Bogo. Nạp SAU main.css, chỉ BỔ SUNG, không đụng style cũ.
 * Palette brand: navy #12315E, royal #1E4FA6, gold #F2B72E.
 *
 * Mục lục:
 *   1. Aurora hero (pattern: Aceternity Aurora Background)
 *   2. Spotlight card (pattern: Aceternity Card Spotlight)
 *   3. Bento offset (pattern: Aceternity Features 3-column stagger)
 *   4. Sheen sweep nút CTA (pattern: Aceternity Moving Border, bản giản lược)
 *   5. CTA band — aurora + dot grid (pattern: Aceternity Wavy/Dots CTA)
 * Mọi motion đều guard bằng prefers-reduced-motion.
 */

/* ------------------------------------------------------------------
   1. Aurora hero — các dải sáng trôi chậm phía sau nội dung
   Layer nằm dưới .hero:before (z-index 1) và .hero .container (z-index 2).
------------------------------------------------------------------- */
.ace-aurora {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(70px);
  opacity: 0.55;
}
.ace-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
/* Dải royal xanh — trôi ngang qua đỉnh hero */
.ace-aurora .ace-aurora-a {
  width: 46vw;
  height: 30vh;
  left: 8%;
  top: 6%;
  background: linear-gradient(115deg, rgba(30, 79, 166, 0.34), rgba(18, 49, 94, 0.10) 65%, transparent);
  animation: ace-drift-a 16s ease-in-out infinite alternate;
}
/* Dải vàng ấm — lệch phải */
.ace-aurora .ace-aurora-b {
  width: 38vw;
  height: 26vh;
  right: 4%;
  top: 24%;
  background: linear-gradient(245deg, rgba(242, 183, 46, 0.30), rgba(242, 183, 46, 0.06) 60%, transparent);
  animation: ace-drift-b 19s ease-in-out infinite alternate;
}
/* Quầng xanh nhạt — chân hero */
.ace-aurora .ace-aurora-c {
  width: 52vw;
  height: 24vh;
  left: 22%;
  bottom: -4%;
  background: linear-gradient(0deg, rgba(30, 79, 166, 0.22), transparent 70%);
  animation: ace-drift-c 14s ease-in-out infinite alternate;
}
@keyframes ace-drift-a {
  from { transform: translate3d(-6%, 0, 0) rotate(-4deg) scale(1); }
  to   { transform: translate3d(7%, 6%, 0) rotate(5deg) scale(1.12); }
}
@keyframes ace-drift-b {
  from { transform: translate3d(5%, 4%, 0) rotate(3deg) scale(1.08); }
  to   { transform: translate3d(-6%, -5%, 0) rotate(-4deg) scale(1); }
}
@keyframes ace-drift-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, -6%, 0) scale(1.1); }
}

/* ------------------------------------------------------------------
   2. Spotlight card — vệt sáng bám con trỏ (JS gắn class .ace-spot
   và biến --spot-x/--spot-y). Không có JS thì chỉ mất hiệu ứng, card
   giữ nguyên style gốc.
------------------------------------------------------------------- */
.ace-spot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ace-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(30, 79, 166, 0.10),
    rgba(242, 183, 46, 0.05) 45%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ace-spot:hover::after {
  opacity: 1;
}
/* Nội dung card phải nổi trên vệt sáng */
.ace-spot > * {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------
   3. Bento offset — cột giữa hở xuống 28px tạo nhịp so le
   (chỉ desktop; dùng margin nên không xung đột transform của AOS).
------------------------------------------------------------------- */
@media (min-width: 992px) {
  .ace-bento-offset > .col-lg-4:nth-child(3n + 2),
  .ace-bento-offset > .col-lg-3:nth-child(4n + 2),
  .ace-bento-offset > .col-lg-3:nth-child(4n + 3) {
    margin-top: 28px;
  }
}

/* ------------------------------------------------------------------
   4. Sheen sweep — dải sáng quét ngang nút CTA chính mỗi vài giây
------------------------------------------------------------------- */
.btn-hero-primary {
  position: relative;
  overflow: hidden;
}
.btn-hero-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -160%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent);
  transform: skewX(-20deg);
  animation: ace-sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}
.btn-hero-primary:active::after {
  animation-duration: 0.8s;
}
@keyframes ace-sheen {
  0%   { left: -160%; }
  45%  { left: 130%; }
  100% { left: 130%; }
}

/* ------------------------------------------------------------------
   5. CTA band — aurora trôi + lưới chấm, lớp dưới nội dung
------------------------------------------------------------------- */
.cta-glass {
  position: relative;
  overflow: hidden;
}
.cta-glass::before {
  content: "";
  position: absolute;
  inset: -20% -5%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 20% 20%, rgba(30, 79, 166, 0.5), transparent 70%),
    radial-gradient(ellipse 45% 55% at 80% 30%, rgba(242, 183, 46, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(10, 28, 56, 0.9), transparent 75%);
  filter: blur(46px);
  animation: ace-cta-breathe 12s ease-in-out infinite alternate;
}
/* Lưới chấm mờ phủ trên aurora */
.cta-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), transparent 78%);
}
.cta-glass .container {
  position: relative;
  z-index: 1;
}
@keyframes ace-cta-breathe {
  from { opacity: 0.85; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.06); }
}

/* ------------------------------------------------------------------
   Accessibility — tắt mọi motion khi người dùng yêu cầu giảm chuyển động
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ace-aurora span,
  .btn-hero-primary::after,
  .cta-glass::before,
  .ace-route path,
  .section-header .section-title {
    animation: none;
  }
  .ace-spot::after {
    display: none;
  }
}

/* ==================================================================
   REDESIGN "TUYẾN ĐIỀU HÀNH" — theo skill frontend-design + ui-ux-pro-max
   Display: Anton (biển báo vận tải) · Body: Be Vietnam Pro
   6. Typography · 7. Route line hero · 8. Ticket pricing
   9. Lane marking steps · 10. CTA deep-night
================================================================== */

/* ------------------------------------------------------------------
   6. Typography — Anton cho display, uppercase như biển báo
------------------------------------------------------------------- */
.hero h1,
h2.section-title,
.cta-title {
  font-family: "Anton", "Be Vietnam Pro", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Anton chỉ có weight 400 — chặn browser fake-bold */
.hero h1 {
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1.18; /* cao hơn mặc định: dấu tiếng Việt trên chữ hoa cần chỗ */
}
h2.section-title {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
}
/* Gradient royal + shimmer chậm — title không còn đen đậm */
.section-header .section-title {
  background: linear-gradient(90deg, #1E4FA6 0%, #12315E 45%, #1E4FA6 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ace-shimmer 9s ease-in-out infinite;
}
@keyframes ace-shimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.cta-title {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
}

/* ------------------------------------------------------------------
   7. Route line — tuyến đường nét đứt băng qua hero, chấm vàng đích
------------------------------------------------------------------- */
.ace-route {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: 100%;
  height: 150px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}
.ace-route path {
  stroke: #F2B72E;
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 3 16;
  stroke-linecap: round;
  animation: ace-dash 26s linear infinite;
}
.ace-route .ace-route-pin {
  fill: #1E4FA6;
  stroke: #ffffff;
  stroke-width: 3;
}
.ace-route .ace-route-pin--end {
  fill: #F2B72E;
}
@keyframes ace-dash {
  to { stroke-dashoffset: -380; }
}

/* ------------------------------------------------------------------
   8. Ticket pricing — đường perforation + notch cạnh như vé xe
------------------------------------------------------------------- */
.pricing-divider {
  border-top: 2px dashed #d5dfef;
  position: relative;
}
.pricing-divider::before,
.pricing-divider::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f8f9fa;
  border: 1px solid #e2e8f2;
}
.pricing-divider::before { left: -35px; }
.pricing-divider::after  { right: -35px; }

/* ------------------------------------------------------------------
   9. Lane marking — connector quy trình thành vạch kẻ đường vàng
------------------------------------------------------------------- */
.how-it-works-v2 .steps-flow::before {
  background: repeating-linear-gradient(
    90deg,
    #F2B72E 0 16px,
    transparent 16px 30px
  );
  opacity: 0.55;
}

/* ------------------------------------------------------------------
   10. CTA band — deep night navy thay flat #17418D
------------------------------------------------------------------- */
.cta-glass {
  background: linear-gradient(180deg, #12315E 0%, #0B1B33 100%);
}

/* Mobile: đệm thêm phần trên hero để eyebrow không bị header cố định che */
@media (max-width: 768px) {
  .hero {
    padding-top: 168px;
  }
}

/* Trang con (privacy/terms/support): đệm trên để nội dung không chui dưới
   topbar (~40px) + header cố định (~66px) */
.inner-page-body {
  padding-top: 146px;
}
@media (max-width: 768px) {
  .inner-page-body {
    padding-top: 136px;
  }
}

/* ==================================================================
   12. STICKY CTA MOBILE + FOOTER VN-STYLE
   Pattern thị trường VN (Grab/Be/Xanh SM); rule "Sticky Navigation"
   (ui-ux-pro-max): element cố định phải bù padding cho body.
================================================================== */
.ace-sticky-cta {
  display: none; /* d-lg-none bật lại dưới 992px */
}
@media (max-width: 991.98px) {
  .ace-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    display: flex;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 27, 51, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
  }
  .ace-sticky-cta a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px; /* touch target ≥ 44px */
    border-radius: 50rem;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
  }
  .ace-cta-call {
    background: #0F274B;
    color: #F2B72E;
    border: 1px solid rgba(242, 183, 46, 0.4);
  }
  .ace-cta-signup {
    background: linear-gradient(135deg, #F5BF38 0%, #E5A820 100%);
    color: #0F274B;
    box-shadow: 0 6px 18px -4px rgba(229, 168, 32, 0.5);
  }
  /* Bù chiều cao bar để không che nội dung cuối trang */
  body {
    padding-bottom: 74px;
  }
  /* Nút về-đầu-trang nhích lên trên sticky bar */
  .scroll-top {
    bottom: 84px;
  }
}
/* Footer: cột link kiểu VN */
.footer .footer-links ul li + li {
  margin-top: 2px;
}

/* ==================================================================
   13. REFRESH — hero split (pattern Xanh SM/Grab VN) + stats dark band.
   Pattern lấy từ landing VN thật + frontend-design.
================================================================== */

/* --- Hero split: chữ trái, visual phải --- */
@media (max-width: 991.98px) {
  /* Mobile giữ căn giữa như cũ (chỉ split từ desktop trở lên) */
  .hero .hero-cta {
    justify-content: center;
  }
}
@media (min-width: 992px) {
  .hero h1,
  .hero p {
    text-align: left;
  }
  .hero h1 {
    font-size: clamp(42px, 4.6vw, 62px);
  }
  .hero p {
    margin: 0 0 28px;
    max-width: 520px;
  }
  .hero-img {
    margin-top: 0;
  }
  /* route line chìm xuống làm nền dưới chân hero */
  .ace-route {
    opacity: 0.4;
    bottom: 2%;
  }
  .hero .ace-aurora {
    opacity: 0.4;
  }
}

/* --- Stats: dark band navy, số Anton gold (pattern Xanh SM) --- */
.stats-redesigned {
  background: linear-gradient(135deg, #12315E 0%, #0B1B33 100%);
  position: relative;
  overflow: hidden;
}
.stats-redesigned::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 30% 40%, rgba(0, 0, 0, 0.9), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, rgba(0, 0, 0, 0.9), transparent 75%);
  pointer-events: none;
}
.stats-redesigned .stats-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}
.stats-redesigned .stats-item:hover {
  background: rgba(255, 255, 255, 0.07);
}
.stats-redesigned .stats-content h3,
.stats-redesigned .stats-item h3 {
  font-family: "Anton", "Be Vietnam Pro", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: 0.02em;
  color: #F2B72E;
}
.stats-redesigned .stats-content p,
.stats-redesigned .stats-item p {
  color: rgba(255, 255, 255, 0.75);
}
.stats-redesigned .stats-icon-wrapper i,
.stats-redesigned .stats-icon-wrapper {
  color: #F2B72E;
}

/* ==================================================================
   11. CONTACT FORM — thay floating-label (AI-tell) bằng visible labels
   theo checklist ui-ux-pro-max: visible labels, visible focus,
   no emoji icons, 44px touch target.
================================================================== */
/* Card khớp bo góc 16px của pricing-card */
.contact-card-nctu {
  border-radius: 16px;
}
/* Bỏ thanh gradient dưới đề mục (tell) */
.contact-card-title {
  padding-bottom: 0;
  margin-bottom: 10px;
}
.contact-card-title::after {
  display: none;
}

/* Field: label tĩnh phía trên (column-reverse vì label đứng sau input trong DOM) */
.ff {
  display: flex;
  flex-direction: column-reverse;
  gap: 7px;
}
.ff label,
.ff input:focus + label,
.ff input:not(:placeholder-shown) + label,
.ff textarea:focus + label,
.ff textarea:not(:placeholder-shown) + label,
.ff .ff-select + label {
  position: static;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  transition: none;
}
.ff label .ff-req {
  margin-left: 2px;
}
.ff input,
.ff select,
.ff textarea {
  padding: 13px 14px;
  font-size: 15px;
  background: #ffffff;
  border: 1px solid #dbe3ee;
  border-bottom: 1px solid #dbe3ee;
  border-radius: 10px;
  min-height: 46px; /* touch target ≥ 44px */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ff textarea {
  min-height: 132px;
}
.ff input:focus,
.ff select:focus,
.ff textarea:focus {
  border-color: #1E4FA6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(30, 79, 166, 0.14);
  outline: none;
}
/* Select giữ chevron, nền trắng */
.ff select {
  background-color: #ffffff;
  background-position: right 14px center;
}

/* Plan pills: chọn = viền royal, focus phím nhìn thấy được */
.plan-pill-card {
  background: #f5f6f8;
  border: 1px solid #e2e8f2;
  border-radius: 12px;
  padding: 12px 10px;
}
.plan-pill-input:checked + .plan-pill-card {
  border-color: #1E4FA6;
  background: #eef3fb;
  box-shadow: inset 0 0 0 1px #1E4FA6;
}
.plan-pill-input:checked + .plan-pill-card .plan-name {
  color: #12315E;
}
.plan-pill-input:focus-visible + .plan-pill-card {
  box-shadow: 0 0 0 3px rgba(30, 79, 166, 0.3);
}
/* Sao "Pro phổ biến" thay emoji */
.plan-star {
  color: #E5A820;
  font-size: 12px;
  margin-left: 4px;
  vertical-align: 1px;
}

/* Nút submit: pill gold đồng bộ btn-hero-primary */
.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  background: linear-gradient(135deg, #F5BF38 0%, #E5A820 100%);
  color: #0F274B;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 50rem;
  cursor: pointer;
  box-shadow: 0 10px 25px -4px rgba(229, 168, 32, 0.45);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.contact-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -4px rgba(229, 168, 32, 0.6);
  color: #0F274B;
}
.contact-submit-btn:focus-visible {
  outline: 3px solid rgba(30, 79, 166, 0.4);
  outline-offset: 2px;
}

/* Ô cam kết: bo góc đồng bộ */
.contact-assure {
  border-radius: 12px;
}
/* Alert thành công: bo góc, không viền */
.contact-card-nctu .alert {
  border-radius: 12px;
  border: 0;
}