/* ==========================================================================
   Component layer: site-v2 — inner pages in the homepage's 2026-10 look

   Why a separate layer instead of rewriting each component file:
   client review 2026-10-09 — clicking from the new homepage into Giới thiệu,
   Sản phẩm, Tin tức… felt like a different site ("lệch chất"). Every inner
   page already shares the same atoms (page hero, eyebrow, section heads,
   cards, CTA panel), so one stylesheet linked LAST among the <link>s (right
   after contact-fab.css) re-skins them all at once:
     - light, glossy aurora backgrounds in the brand's own blues — no dark
       navy blocks (client: "sáng bóng", "không tối");
     - the homepage's heading language: pill eyebrow with a live dot,
       heavy tight titles, gradient ink;
     - cards that lift and glow on hover, icon tiles in brand gradients;
     - motion that runs by itself (slow drifting light, floating hero
       visual, staggered reveal), never only on hover.
   Pages' own inline <style> blocks still load after this file, so every
   product page keeps its own colours where it defines them. The homepage
   does not load this file (it has home-v2.css). Everything here respects
   prefers-reduced-motion. Content/markup is untouched.
   ========================================================================== */

/* ---------- Page hero ------------------------------------------------------ */

.dp-page-hero {
  isolation: isolate;
  border-bottom: 0;
  background:
    radial-gradient(55% 60% at 8% 12%, rgba(147, 197, 253, 0.5), transparent 70%),
    radial-gradient(45% 55% at 92% 20%, rgba(196, 181, 253, 0.42), transparent 70%),
    radial-gradient(50% 50% at 55% 110%, rgba(165, 243, 252, 0.5), transparent 70%),
    linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
}

/* faint grid fading toward the edges (same as the homepage console) */
.dp-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 70%);
}

/* the old static white glow becomes a slowly drifting light */
.dp-page-hero::after {
  z-index: -1;
  right: -8%;
  top: -40%;
  width: 46%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(191, 219, 254, 0.45) 35%, rgba(255, 255, 255, 0) 68%);
  animation: v2-drift 16s ease-in-out infinite alternate;
}

@keyframes v2-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-18%, 22%) scale(1.12); }
  100% { transform: translate(-36%, 6%) scale(0.95); }
}

/* eyebrow → glass pill with a live dot (homepage .hv-chip, light version) */
.dp-page-hero .dp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 22px -14px rgba(29, 94, 232, 0.6), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.dp-page-hero .dp-eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: v2-ping 2s ease-out infinite;
}

@keyframes v2-ping { to { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }

.dp-page-hero__title {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

/* gradient ink on the generic heroes; product heroes keep their own colours */
.dp-page-hero:not(.dp-product-hero) .dp-page-hero__title {
  background: linear-gradient(100deg, #0b1f44 0%, #0b1f44 38%, #1d5ee8 62%, #7c3aed 82%, #0b1f44 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: v2-shine 9s linear infinite;
}

@keyframes v2-shine { to { background-position: 220% center; } }

/* hero visual: glass frame + gentle float */
.dp-page-hero__visual {
  padding: 8px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 40px 80px -36px rgba(37, 99, 235, 0.5),
    0 16px 32px -20px rgba(15, 33, 64, 0.22),
    inset 0 1px 0 #fff;
  animation: v2-float 7s ease-in-out infinite;
}

.dp-page-hero__visual img { border-radius: 19px; }

@keyframes v2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Section headings ----------------------------------------------- */

.dp-section-head .dp-eyebrow,
.dp-text-image__body > .dp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.dp-section-head .dp-eyebrow::before,
.dp-text-image__body > .dp-eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1d5ee8, #7c3aed);
}

.dp-section-head h2,
.dp-text-image__title {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

/* soft sections: light wash + dotted texture instead of flat grey */
.dp-section--surface {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(50% 60% at 0% 0%, rgba(191, 219, 254, 0.45), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(221, 214, 254, 0.4), transparent 70%),
    #f6f9fe;
}

.dp-section--surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* ---------- Cards ----------------------------------------------------------- */

.dp-split__item,
.dp-flow__step,
.dp-news-card,
.dp-product-related__item,
.dp-contact__card {
  background: #fff;
  border-color: #e3ebf6;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15, 33, 64, 0.04), 0 14px 34px -26px rgba(15, 33, 64, 0.3);
  transition: transform 350ms cubic-bezier(.2,.8,.2,1), box-shadow 350ms, border-color 350ms;
}

.dp-split__item:hover,
.dp-flow__step:hover,
.dp-news-card:hover,
.dp-product-related__item:hover {
  transform: translateY(-6px);
  border-color: #b9d3f3;
  box-shadow: 0 28px 60px -26px rgba(0, 40, 104, 0.38);
}

/* icon tiles → brand gradient, tilt on hover (homepage .hv-icon) */
.dp-split__icon,
.dp-values__icon {
  background: linear-gradient(135deg, #1d5ee8, #5aa2ff);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 24px -12px rgba(29, 94, 232, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
}

.dp-split__item:hover .dp-split__icon,
.dp-values__item:hover .dp-values__icon { transform: scale(1.1) rotate(-6deg); }

/* numbered steps: the top rule fills with a gradient on hover */
.dp-numbered__item {
  position: relative;
  border-top-color: #dbe7f8;
}

.dp-numbered__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #1d5ee8, #7c3aed);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}

.dp-numbered__item:hover::before,
.dp-reveal.is-visible .dp-numbered__item::before { transform: scaleX(1); }

/* text + image media: soft frame, slow zoom on hover */
.dp-text-image__media {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 34px 70px -40px rgba(15, 40, 90, 0.45);
}

.dp-text-image__media img { transition: transform 1200ms cubic-bezier(.2,.8,.2,1); }
.dp-text-image__media:hover img { transform: scale(1.035); }

/* ---------- Closing CTA: bright glossy blue, no dark navy ------------------- */

.dp-cta__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  background: linear-gradient(115deg, #0b56b8 0%, #1d6fe0 48%, #4f9dff 100%);
  box-shadow: 0 40px 80px -40px rgba(29, 94, 232, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.dp-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 90% at 100% 0%, rgba(255, 255, 255, 0.3), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 28px 28px;
}

/* a soft light sweeping across the panel every few seconds */
.dp-cta__panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: v2-sweep 7s ease-in-out infinite;
}

@keyframes v2-sweep { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(560%); } }

/* ---------- Buttons ---------------------------------------------------------- */

.dp-btn--primary {
  background: linear-gradient(135deg, #1d5ee8, #2f8cff);
  border-color: transparent;
  box-shadow: 0 12px 28px -12px rgba(29, 94, 232, 0.8);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), background-color 250ms;
}

.dp-btn--primary:hover {
  background: linear-gradient(135deg, #1a55d4, #1d7cf0);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(29, 94, 232, 0.9);
}

/* ---------- Scroll reveal: children of a revealed group arrive in turn ------- */

.dp-reveal.is-visible > :is(.dp-split__item, .dp-numbered__item, .dp-flow__step, .dp-values__item, .dp-news-card, .dp-job) {
  animation: v2-rise 700ms cubic-bezier(.2,.8,.2,1) both;
}

.dp-reveal.is-visible > :nth-child(2) { animation-delay: 80ms; }
.dp-reveal.is-visible > :nth-child(3) { animation-delay: 160ms; }
.dp-reveal.is-visible > :nth-child(4) { animation-delay: 240ms; }
.dp-reveal.is-visible > :nth-child(5) { animation-delay: 320ms; }
.dp-reveal.is-visible > :nth-child(n+6) { animation-delay: 400ms; }

@keyframes v2-rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dp-page-hero::after,
  .dp-page-hero .dp-eyebrow::before,
  .dp-page-hero:not(.dp-product-hero) .dp-page-hero__title,
  .dp-page-hero__visual,
  .dp-cta__panel::after,
  .dp-reveal.is-visible > * { animation: none !important; }
  .dp-text-image__media img,
  .dp-numbered__item::before { transition: none; }
}