/* ==========================================================================
   EPS Minh Phú — nền tảng: token, reset, chữ, lưới
   Hướng thiết kế: SaaS glass. Nền aurora màu thương hiệu, bề mặt kính mờ đặt
   lên trên, một màu nhấn duy nhất lấy từ logo (teal #007889).
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Màu gốc ------------------------------------------------------- */
  --teal-950: #04262d;
  --teal-900: #06333c;
  --teal-800: #00505e;
  --teal-700: #00697a;
  --teal-600: #007889; /* màu trong logo */
  --teal-500: #109cb0;
  --teal-400: #4aa8b6;
  --teal-300: #7ccbd8;
  --teal-100: #d6ecf0;

  --slate-050: #f7f9fa;
  --slate-100: #eef2f4;
  --slate-200: #dfe6e8;
  --slate-300: #c6d1d4;

  --ink-900: #0c1417;
  --ink-700: #2a393c;
  --ink-500: #5b6b6e;

  /* --- Token ngữ nghĩa: một màu nhấn cho cả trang --------------------- */
  --bg: #f2f6f7;
  --bg-raised: #ffffff;
  --bg-sunken: var(--slate-050);
  --bg-invert: var(--teal-950);

  --fg: var(--ink-900);
  --fg-soft: var(--ink-700);
  --fg-muted: var(--ink-500);
  --fg-invert: #eaf5f7;
  --fg-invert-soft: rgba(234, 245, 247, 0.78);

  --accent: var(--teal-600);
  --accent-strong: var(--teal-700);
  --accent-soft: rgba(0, 120, 137, 0.08);
  --accent-on-dark: var(--teal-300);

  --line: rgba(12, 20, 23, 0.1);
  --line-strong: rgba(12, 20, 23, 0.18);
  --line-invert: rgba(255, 255, 255, 0.14);

  /* --- Lớp kính -------------------------------------------------------
     Kính chỉ đọc được khi nền dưới nó có màu, nên aurora ở html::before
     là phần bắt buộc chứ không phải trang trí.                          */
  --glass-bg: rgba(255, 255, 255, 0.74);
  --glass-bg-strong: rgba(255, 255, 255, 0.9);
  --glass-bd: rgba(255, 255, 255, 0.7);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --glass-blur: 18px;
  --glass-shadow: 0 1px 2px rgba(12, 20, 23, 0.04),
    0 18px 40px -24px rgba(4, 38, 45, 0.45);
  --glass-shadow-lg: 0 2px 4px rgba(12, 20, 23, 0.05),
    0 40px 80px -40px rgba(4, 38, 45, 0.55);

  --photo-plate: #f4f6f7;
  /* Xốp trắng trên nền trắng thì mất hút, nên khung ảnh có chuyển sắc nhẹ */
  --plate-gradient: linear-gradient(158deg, #ffffff 0%, #e7eef0 100%);

  --warn-bg: rgba(211, 166, 58, 0.16);
  --warn-fg: #7d5a00;
  --warn-line: rgba(211, 166, 58, 0.7);
  --ok: #2f7d4f;
  --danger: #b3261e;

  /* --- Chữ ------------------------------------------------------------ */
  --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --text-lg: clamp(1.075rem, 1rem + 0.35vw, 1.25rem);
  --text-h3: clamp(1.3rem, 1.16rem + 0.65vw, 1.7rem);
  --text-h2: clamp(1.8rem, 1.42rem + 1.75vw, 2.85rem);
  --text-h1: clamp(2.3rem, 1.6rem + 3.1vw, 4.1rem);

  /* --- Nhịp ----------------------------------------------------------- */
  --space-section: clamp(3.5rem, 2.6rem + 4.4vw, 7rem);
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --wrap: 1240px;
  --gap: clamp(0.85rem, 0.6rem + 0.9vw, 1.35rem);

  /* --- Bo góc: một thang duy nhất -------------------------------------
     nút, ô nhập, ảnh nhỏ   -> --r-sm
     thẻ kính, khung ảnh    -> --r
     khối lớn (CTA, form)   -> --r-lg
     chỉ nhãn pill và nút tròn nổi mới dùng --r-full                     */
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --r-full: 999px;

  /* --- Chuyển động ---------------------------------------------------- */
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-sm: 0 1px 2px rgba(12, 20, 23, 0.05),
    0 10px 24px -18px rgba(4, 38, 45, 0.5);
  --shadow-md: 0 2px 4px rgba(12, 20, 23, 0.05),
    0 26px 52px -30px rgba(4, 38, 45, 0.5);
  --shadow-lg: var(--glass-shadow-lg);
  --glow: 0 10px 30px -10px rgba(0, 120, 137, 0.55);

  /* Vân tổ ong dựng từ ba khối lục giác của logo, chỉ dùng trên nền tối */
  --hex-pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='76'%20height='132'%20viewBox='0%200%2076%20132'%3E%3Cg%20fill='none'%20stroke='%2523ffffff'%20stroke-opacity='0.16'%20stroke-width='1.15'%3E%3Cpath%20d='M0%20-44%20L38%20-22%20L38%2022%20L0%2044%20L-38%2022%20L-38%20-22%20Z'/%3E%3Cpath%20d='M76%20-44%20L114%20-22%20L114%2022%20L76%2044%20L38%2022%20L38%20-22%20Z'/%3E%3Cpath%20d='M38%2022%20L76%2044%20L76%2088%20L38%20110%20L0%2088%20L0%2044%20Z'/%3E%3Cpath%20d='M0%2088%20L38%20110%20L38%20154%20L0%20176%20L-38%20154%20L-38%20110%20Z'/%3E%3Cpath%20d='M76%2088%20L114%20110%20L114%20154%20L76%20176%20L38%20154%20L38%20110%20Z'/%3E%3Cpath%20d='M-38%2022%20L0%2044%20L0%2088%20L-38%20110%20L-76%2088%20L-76%2044%20Z'/%3E%3Cpath%20d='M114%2022%20L152%2044%20L152%2088%20L114%20110%20L76%2088%20L76%2044%20Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- reset --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

/* Chừa chỗ cho header dính, chỉ từ 1000px trở lên */
@media (min-width: 1000px) {
  html {
    scroll-padding-top: 104px;
  }
}

/* Trường màu phía sau lớp kính. Là phần tử thật trong body chứ không phải
   pseudo-element của html, để lớp kính phía trên có thứ để khúc xạ.
   Hạt nhiễu nằm ngay trong lớp nền; hai pseudo-element là hai vệt màu trôi
   chậm, chỉ animate transform.
   Vệt màu trôi theo bước (steps) thay vì mượt: mỗi nửa giây mới đổi vị trí
   một lần, giữa hai bước không có gì thay đổi nên GPU không phải vẽ lại và
   các lớp kính phía trên không phải làm mờ lại 120 lần mỗi giây. Với một
   vệt màu loang, mắt không phân biệt được bước nhảy vài px. */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"),
    radial-gradient(34vw 34vw at 4% 10%, rgba(0, 120, 137, 0.18), transparent 64%),
    radial-gradient(30vw 30vw at 100% 58%, rgba(0, 80, 94, 0.12), transparent 62%);
}

.bg-field::before,
.bg-field::after {
  content: "";
  position: absolute;
  inset: -10%;
  will-change: transform;
}

.bg-field::before {
  background: radial-gradient(
    30vw 30vw at 74% 18%,
    rgba(16, 156, 176, 0.34),
    transparent 62%
  );
  animation: drift-a 26s steps(52) infinite alternate;
}

.bg-field::after {
  background: radial-gradient(
    36vw 32vw at 58% 82%,
    rgba(74, 168, 182, 0.24),
    transparent 66%
  );
  animation: drift-b 34s steps(68) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-3%, -4%, 0) scale(1.06); }
}

/* Tab bị ẩn: dừng hẳn mọi chuyển động lặp (main.js đặt data-motion) */
html[data-motion="paused"] .bg-field::before,
html[data-motion="paused"] .bg-field::after {
  animation-play-state: paused;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ------------------------------------------------------------ typography - */

h1,
h2,
h3,
h4 {
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.18;
  letter-spacing: -0.022em;
}

h4 {
  font-size: var(--text-lg);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

p {
  text-wrap: pretty;
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 44ch;
}

.muted {
  color: var(--fg-muted);
}

/* Nhãn dạng viên thuốc bằng kính, dùng tối đa 1 lần cho mỗi 3 khối */
.label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  gap: 0.5em;
  padding: 0.42rem 0.9rem;
  border-radius: var(--r-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- layout - */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.wrap--narrow {
  --wrap: 900px;
}

.section {
  padding-block: var(--space-section);
  position: relative;
}

.section--tight {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}

.section-head {
  display: grid;
  gap: 1rem;
  max-width: 48ch;
  margin-bottom: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
}

.section-head p {
  color: var(--fg-soft);
}

.stack {
  display: grid;
  gap: 1rem;
}

.stack--sm {
  gap: 0.5rem;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* Icon Tabler dang net: <use> khong thua huong fill/stroke tu sprite ma tu
   the <svg> nay, nen phai khai bao o day. Icon thuong hieu (Zalo) tu dat
   fill tren <symbol> nen khong bi anh huong. */
.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 200;
  transform: translateY(-120%);
  background: var(--fg);
  color: var(--bg);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

/* Chi an de hien dan khi co JS (lop .js gan o <html>); tat JS van doc du */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Máy nhỏ: giảm độ mờ kính, backdrop-filter là thứ tốn GPU nhất trên trang */
@media (max-width: 700px) {
  :root {
    --glass-blur: 10px;
  }
}

/* Máy đang bật giảm trong suốt: bỏ kính, dùng nền đặc để chữ luôn đọc được */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: var(--bg-raised);
    --glass-bg-strong: var(--bg-raised);
    --glass-bd: var(--line);
    --glass-blur: 0px;
  }

  .bg-field {
    display: none;
  }
}