/*
Theme Name: Tien Le So
Author: Tien Le
Description: Giao dien Landing Page dat so cao cap, ket noi API.
Version: 1.0.0
*/
/* =========================================================
   FONT FACE – LATO (LOCAL)
   ========================================================= */
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ĐỒNG BỘ ĐỊNH DẠNG MÀU OKLCH CHO CẢ HAI CHẾ ĐỘ */
:root[data-theme="light"] {
  --color-gray-200: oklch(96.416% 0.00011 271.152 / 0.993);

  --bg-page: var(--color-gray-200);
  --bg-card: oklch(100% 0 0);
  --bg-hover: oklch(93.5% 0 0);
  --bg-active: oklch(95.514% 0.00011 271.152);
  --border-color: oklch(92% 0 0);
  --text-primary: #1e293b;
  --text-secondary: #515964;
}

:root[data-theme="dark"] {
  --bg-page: oklch(14.479% 0.00002 271.152);
  --bg-card: oklch(18.5% 0 0);
  --bg-hover: oklch(23% 0 0);
  --bg-active: oklch(27.5% 0 0);
  --border-color: oklch(24% 0 0);
  --text-primary: #f7f7f7;
  --text-secondary: #a1a1aa;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

.app-container {
  width: 100%;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
}

/* ĐỒNG BỘ TRANSITION TOÀN TRANG MƯỢT MÀ */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke, transform, opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes soft-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.animate-soft-float {
  animation: soft-float 2.5s ease-in-out infinite;
}

@keyframes float-1 {

  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }

  50% {
    transform: translateY(-6px) rotate(-3deg);
  }
}

@keyframes float-2 {

  0%,
  100% {
    transform: translateY(0) rotate(8deg);
  }

  50% {
    transform: translateY(-8px) rotate(12deg);
  }
}

@keyframes float-3 {

  0%,
  100% {
    transform: translateY(0) rotate(-10deg);
  }

  50% {
    transform: translateY(-5px) rotate(-7deg);
  }
}

@keyframes float-4 {

  0%,
  100% {
    transform: translateY(0) rotate(5deg);
  }

  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}

.animate-keyword-1 {
  animation: float-1 3.5s ease-in-out infinite;
}

.animate-keyword-2 {
  animation: float-2 4.2s ease-in-out infinite;
}

.animate-keyword-3 {
  animation: float-3 3.8s ease-in-out infinite;
}

.animate-keyword-4 {
  animation: float-4 4.5s ease-in-out infinite;
}

[x-cloak] {
  display: none !important;
}

/* =========================================================
   GLASS / FROSTED SURFACE (HIỆU ỨNG KÍNH MỜ)
   ========================================================= */
.glass-surface {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Light Mode: Trắng mờ tinh tế */
html:not(.dark) .glass-surface {
  background-color: rgba(255, 255, 255, 0.85);
}

/* Dark Mode: Tối mờ sâu thẳm */
html.dark .glass-surface {
  background-color: rgba(3, 7, 18, 0.75);
}

/* Đường chia có khoảng cách thông minh */
.spactline {
  height: 1px;
  background-color: var(--border-color);
  margin: 20px 0;
}

/* ĐỒNG BỘ HOÀN HẢO TRANSITION CHO CÁC THÀNH PHẦN CHỦ CHỐT (Tối ưu từ selector * để mượt mà hơn) */
body,
header,
aside,
main,
footer,
section,
button,
a,
input,
select,
textarea,
.bg-brand-card,
.border-brand-border,
.text-brand-textPrimary,
.text-brand-textMuted {
  transition-property: background-color, border-color, color, fill, stroke, transform, opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* BỐ CỤC CHUẨN CĂN GIỮA - HEADER FULL VIỀN */
.app-container {
  max-width: 500px !important;
}

/* TỐI ƯU CỰC KỲ MƯỢT MÀ KHI CUỘN ĐẾN CÁC NEO */
#gioi-thieu,
#tinh-nang,
#danh-gia,
#bang-gia,
#faq-section {
  scroll-margin-top: 60px;
  /* Mobile: Chỉ cần chừa khoảng trống cho header (48px) */
}

@media (min-width: 640px) {

  #gioi-thieu,
  #tinh-nang,
  #danh-gia,
  #bang-gia,
  #faq-section {
    scroll-margin-top: 84px;
    /* Desktop: Chừa khoảng trống cho cả header (48px) và tab bar (32px) */
  }
}