/*  Design Tokens  */
:root {
  --radius: 2rem;
  --background: #14141c;
  --foreground: #fbfbfb;
  --color-purple: 106, 13, 173;
  --color-pink: 237, 28, 36;
  --color-red: 237, 28, 36;
  --color-blue: 30, 144, 255;
  --color-sub-text: 226, 232, 240;
  --color-glass: rgba(255, 255, 255, 0.03);
  --color-nav: rgba(20, 20, 28, 0.7);
  --border: rgba(255, 255, 255, 0.06);

  /* Font Family CSS Variables */
  --font-playwrite: "Playwrite VN", "Playwrite VN Fallback", cursive;
  --font-clash-display: "Montserrat", sans-serif;
  --font-manrope: "Manrope", "Manrope Fallback", sans-serif;
  --font-montserrat: "Montserrat", "Montserrat Fallback", sans-serif;
}

/* Khắc phục lỗi rò rỉ góc vuông của nền gradient trên các phần tử bo góc toàn cục */
button,
.page-number,
.chip,
.skill-chip,
.cmp-dot,
.cmp-career-card {
  overflow: hidden;
  background-clip: padding-box;
}

/* Apply Premium Font families globally */
body {
  font-family: var(--font-manrope), sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-title {
  font-family: var(--font-montserrat), sans-serif !important;
}

/* Hero section title gradient auto-switch for light/dark theme */
.hero-gradient-text {
  background-image: linear-gradient(to bottom, #ffffff, #ED1C24) !important;
}

html[data-theme="light"] .hero-gradient-text {
  background-image: linear-gradient(to bottom, #14141c, #ED1C24) !important;
}

/* Light Theme Variables */
html[data-theme="light"] {
  --radius: 2rem;
  --background: #fbfbfb;
  --foreground: #14141c;
  --color-glass: rgba(0, 0, 0, 0.02);
  --color-nav: rgba(251, 251, 251, 0.7);
  --border: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
}

html[data-theme="light"] header {
  background-image: linear-gradient(to bottom, rgba(251, 251, 251, 0.9) 60%, transparent) !important;
}

html[data-theme="light"] .text-white {
  color: #14141c !important;
}

/* Fix text-white với opacity modifier (text-white/75, text-white/70...) */
html[data-theme="light"] .text-white\/75 {
  color: rgba(20, 20, 28, 0.75) !important;
}

html[data-theme="light"] .text-white\/70 {
  color: rgba(20, 20, 28, 0.70) !important;
}

/* Tech cards: SVG icons + text trong light theme */
html[data-theme="light"] .cmp-tech-card svg {
  stroke: #333333 !important;
  color: #333333 !important;
}

html[data-theme="light"] .cmp-tech-card span {
  color: #14141c !important;
}

/* Hero section — chữ mô tả và nút "Bắt đầu" */
html[data-theme="light"] #home p {
  color: rgba(20, 20, 28, 0.75) !important;
}

html[data-theme="light"] .btn-start {
  color: #14141c !important;
  border-color: rgba(20, 20, 28, 0.3) !important;
}

/* Info Pills — icons và text */
html[data-theme="light"] .bg-glass svg,
html[data-theme="light"] .bg-glass dd {
  color: #14141c !important;
}

html[data-theme="light"] .bg-glass {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] .cmp-value-card,
html[data-theme="light"] .cmp-service-card,
html[data-theme="light"] .cmp-project-card,
html[data-theme="light"] .cmp-testimonial-card,
html[data-theme="light"] .cmp-contact-card {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.13) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .text-sub-text {
  color: #555555 !important;
}

html[data-theme="light"] .text-\[#fbfbfb\] {
  color: #14141c !important;
}

html[data-theme="light"] body {
  background-color: #fbfbfb !important;
  color: #14141c !important;
}

html[data-theme="light"] body.bg-\[#14141c\] {
  background-color: #fbfbfb !important;
}
html[data-theme="light"] header .text-\[#fbfbfb\],
html[data-theme="light"] header span,
html[data-theme="light"] header a,
html[data-theme="light"] header button {
  color: #14141c !important;
}

/* SVG trong header (theme toggle icon, v.v.) */
html[data-theme="light"] header svg {
  stroke: #14141c !important;
  color: #14141c !important;
}

/* Nút gradient "Liên hệ" — giữ trắng */
html[data-theme="light"] header a.bg-gradient-to-r,
html[data-theme="light"] header a.bg-gradient-to-r span {
  color: #ffffff !important;
}

/* Mobile menu: text trong sidebar mobile cũng đổi */
html[data-theme="light"] #navbar-mobile-panel .text-white,
html[data-theme="light"] #navbar-mobile-panel span,
html[data-theme="light"] #navbar-mobile-panel a,
html[data-theme="light"] #navbar-mobile-panel button {
  color: #14141c !important;
}

/* Đảm bảo menu mobile có nền kính mờ cao cấp, dễ đọc ở cả 2 theme */
#navbar-mobile-panel {
  background-color: rgba(18, 18, 26, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  opacity: 1 !important;
}

html[data-theme="light"] #navbar-mobile-panel {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-left-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08) !important;
  opacity: 1 !important;
}

html[data-theme="light"] #navbar-mobile-panel .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] #navbar-mobile-panel #navbar-mobile-close:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] #navbar-mobile-panel svg {
  stroke: #14141c !important;
  color: #14141c !important;
}

html[data-theme="light"] #navbar-mobile-overlay {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

/* Light theme: tắt shadow đen đậm, thay bằng shadow nhẹ */
html[data-theme="light"] .cmp-project-mockup-wrapper {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] [class*="shadow"] {
  box-shadow: none !important;
}

html[data-theme="light"] .cmp-career-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
}

/*  Global Ambient Glows System - Fixed & GPU-Accelerated  */
.ambient-glows-bg {
  pointer-events: none;
  z-index: -10;
  width: 100vw;
  height: 100vh;
  will-change: filter, transform;
  transform: translate3d(0, 0, 0);
}

html[data-theme="light"] .ambient-glows-bg div {
  opacity: 0.05 !important;
  filter: blur(220px) !important;
}

.breathing {
  animation: breathing-effect 12s ease-in-out infinite alternate;
}

.animate-move {
  animation: move-effect 35s linear infinite;
}

@keyframes breathing-effect {
  0% {
    transform: scale(0.95);
    opacity: 0.40;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.52;
  }

  100% {
    transform: scale(0.98);
    opacity: 0.45;
  }
}

@keyframes move-effect {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  33% {
    transform: translate(3vw, 4vh) rotate(120deg);
  }

  66% {
    transform: translate(-1vw, 2vh) rotate(240deg);
  }

  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

/*  Header blur shrink  */
.navbar-custom {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}



/*  Premium Theme Toggle Buttons  */
.theme-toggle {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border) !important;
}

.theme-toggle:hover {
  transform: translateY(-1px) rotate(15deg);
}

.theme-toggle svg {
  position: absolute;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

/* Sun/Moon transition based on html[data-theme] */
html[data-theme="dark"] .theme-sun-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

html[data-theme="light"] .theme-sun-icon {
  opacity: 0;
  transform: scale(0) rotate(-90deg);
}

html[data-theme="dark"] .theme-moon-icon {
  opacity: 0;
  transform: scale(0) rotate(90deg);
}

html[data-theme="light"] .theme-moon-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.btn-lang {
  border: 1px solid var(--border) !important;
}

/*  Projects Carousel Slide Style  */
.cmp-project-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.6s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cmp-project-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cmp-project-mockup-wrapper {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cmp-project-mockup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.cmp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35) !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cmp-dot.active {
  background-color: #ffffff !important;
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="light"] .cmp-dot {
  background-color: rgba(20, 20, 28, 0.2) !important;
}

html[data-theme="light"] .cmp-dot.active {
  background-color: #14141c !important;
  box-shadow: 0 0 10px rgba(20, 20, 28, 0.3) !important;
}

/*  Careers Marquee & Drag-to-Scroll  */
.cmp-career-scroll-wrapper {
  overflow: hidden;
  width: 100%;
  cursor: grab;
  position: relative;
  padding: 1rem 0;
}

.cmp-career-scroll-wrapper.is-dragging {
  cursor: grabbing;
}

.cmp-career-scroll-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: career-scroll-anim 25s linear infinite;
  will-change: transform;
}

.cmp-career-scroll-wrapper.is-dragging .cmp-career-scroll-track {
  animation-play-state: paused !important;
}

@keyframes career-scroll-anim {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.cmp-career-card {
  width: 550px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  backdrop-filter: blur(12px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

@media (max-width: 768px) {
  .cmp-career-card {
    width: 320px !important;
    min-height: 300px !important;
  }
}

.cmp-career-card:hover {
  border-color: rgba(237, 28, 36, 0.3);
  transform: translateY(-2px);
}

/*  Scroll Reveal animation  */
.reveal-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-element.revealed {
  opacity: 1;
  transform: translateY(0);
}

/*  Scroll To Top Button  */
.cmp-scroll-top {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cmp-scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cmp-scroll-top:hover {
  transform: translateY(-4px) scale(1.05);
}

/* Form Styling Focus states */
input:focus,
textarea:focus {
  border-color: var(--color-red) !important;
  box-shadow: 0 0 10px rgba(237, 28, 36, 0.2) !important;
}

/* Technology Slider Animation */
.cmp-tech-section .cmp-tech-marquee-track {
  animation: tech-marquee-anim 25s linear infinite;
  will-change: transform;
}

@keyframes tech-marquee-anim {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Chống cắt chân chữ  cho các tiêu đề*/
.bg-clip-text {
  padding-bottom: 0.15em !important;
  margin-bottom: -0.15em !important;
  display: inline-block;
}

/* Cưỡng ép màu sắc và đường kẻ sáng trắng rõ nét cho 3 Value Cards (Mission, Vision, Values) */
.cmp-value-card .font-semibold {
  color: #ffffff !important;
}

/* Premium Global Divider Style - Sharp, Crisp, Dynamic Color on all High-DPI screens */
.cmp-divider {
  height: 1px !important;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.12) !important;
  margin: 1rem 0 !important;
  border: none !important;
  display: block !important;
  opacity: 1 !important;
}

.cmp-value-card p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Cưỡng ép màu sắc cho Value Cards ở Light Theme */
html[data-theme="light"] .cmp-value-card .font-semibold {
  color: #14141c !important;
}

html[data-theme="light"] .cmp-divider {
  background-color: rgba(20, 20, 28, 0.08) !important;
}

html[data-theme="light"] .cmp-value-card p {
  color: #555555 !important;
}

/* Premium Scroll Reveal Animation System (GPU-Accelerated, smooth cubic-bezier transitions) */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(40px) translateZ(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-fade-up.revealed {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

.reveal-scale-up {
  opacity: 0;
  transform: translateY(45px) scale(0.95) translateZ(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-scale-up.revealed {
  opacity: 1;
  transform: translateY(0) scale(1) translateZ(0);
}

.reveal-fade-down {
  opacity: 0;
  transform: translateY(-40px) translateZ(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-fade-down.revealed {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

.reveal-slide-left {
  opacity: 0;
  transform: translateX(-80px) translateZ(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-slide-left.revealed {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}

.reveal-scale-simple {
  opacity: 0;
  transform: scale(0.8) translateZ(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-scale-simple.revealed {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

/* Ensure no flash of un-revealed elements on load by default */
[class*="reveal-"] {
  will-change: opacity, transform;
}

/* Premium Light Theme Footer Style Refinement */
html[data-theme="light"] footer {
  background-color: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] footer .text-primary,
html[data-theme="light"] footer h3 {
  color: #14141c !important;
}

html[data-theme="light"] footer p,
html[data-theme="light"] footer li,
html[data-theme="light"] footer span[data-footer-i18n] {
  color: rgba(20, 20, 28, 0.65) !important;
}

/* Company logo text gradient in light mode */
html[data-theme="light"] footer a.group span.font-title {
  background-image: linear-gradient(to right, #14141c, rgba(20, 20, 28, 0.7)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Corporate info details */
html[data-theme="light"] footer [data-i18n="footer.company_name"] {
  color: #14141c !important;
}

html[data-theme="light"] footer p.text-white\/40 {
  color: rgba(20, 20, 28, 0.45) !important;
}

html[data-theme="light"] footer [data-i18n="footer.mst"] {
  color: rgba(20, 20, 28, 0.6) !important;
}

html[data-theme="light"] footer .border-l {
  border-color: rgba(237, 28, 36, 0.3) !important;
}

/* Social media icons and border */
html[data-theme="light"] footer .flex.gap-3.mt-5 a {
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(20, 20, 28, 0.65) !important;
}

html[data-theme="light"] footer .flex.gap-3.mt-5 a:hover {
  border-color: currentColor !important;
  background-color: transparent !important;
}

/* Footer bottom copyright & legal links */
html[data-theme="light"] footer .flex.flex-col.sm\:flex-row p,
html[data-theme="light"] footer .flex.flex-col.sm\:flex-row span {
  color: rgba(20, 20, 28, 0.55) !important;
}

/* Footer bottom copyright & legal links */
html[data-theme="light"] footer .flex.flex-col.sm\:flex-row p,
html[data-theme="light"] footer .flex.flex-col.sm\:flex-row span {
  color: rgba(20, 20, 28, 0.55) !important;
}

html[data-theme="light"] footer .flex.flex-col.sm\:flex-row a {
  color: rgba(20, 20, 28, 0.65) !important;
  transition: color 0.2s ease;
}

html[data-theme="light"] footer .flex.flex-col.sm\:flex-row a:hover {
  color: #14141c !important;
}

/* Footer bottom horizontal divider gradient */
html[data-theme="light"] footer .bg-gradient-to-r {
  background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent) !important;
}

/* Contact Form Styling & Theme Adaptability */
.cmp-contact-form input,
.cmp-contact-form textarea {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--foreground) !important;
  transition: all 0.3s ease !important;
}

.cmp-contact-form input::placeholder,
.cmp-contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Focus states */
.cmp-contact-form input:focus,
.cmp-contact-form textarea:focus {
  border-color: var(--color-red) !important;
  box-shadow: 0 0 10px rgba(237, 28, 36, 0.2) !important;
}

/* Light Theme overrides for contact form fields */
html[data-theme="light"] .cmp-contact-form input,
html[data-theme="light"] .cmp-contact-form textarea {
  background-color: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--foreground) !important;
}

html[data-theme="light"] .cmp-contact-form input::placeholder,
html[data-theme="light"] .cmp-contact-form textarea::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* Ensure description and label inside Contact Section show correct colors */
#contact label,
#contact p {
  color: var(--foreground) !important;
}

html[data-theme="light"] #contact p {
  color: #555555 !important;
}

/* Custom Hover Effects for Mission, Vision, and Values Cards (cmp-value-card) */
.cmp-value-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
  cursor: pointer;
}

.cmp-value-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: rgba(237, 28, 36, 0.3) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="light"] .cmp-value-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

.cmp-value-card:hover .font-semibold {
  background: linear-gradient(to right, #1E90FF, #FF4D9E) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Fix Technologies Marquee - Hide scrollbars and prepare for grab interactions */
.cmp-tech-marquee-wrapper {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.cmp-tech-marquee-wrapper.is-dragging {
  cursor: grabbing;
}

.cmp-tech-marquee-wrapper::-webkit-scrollbar {
  display: none !important;
}

.cmp-tech-marquee-wrapper {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.cmp-tech-card {
  width: 140px !important;
  flex-shrink: 0 !important;
}

@media (min-width: 768px) {
  .cmp-tech-card {
    width: 160px !important;
  }
}

.cmp-tech-card>div {
  width: 100% !important;
  height: 140px !important;
}

@media (min-width: 768px) {
  .cmp-tech-card>div {
    height: 160px !important;
  }
}