/* ============================================================
   BASE.CSS — Nền tảng chung cho toàn bộ website
   ------------------------------------------------------------
   Chứa: biến màu (CSS variables), reset, kiểu chữ cơ bản,
   và các lớp tiện ích dùng lại ở mọi trang (container, button,
   section, hiệu ứng reveal).
   Thứ tự nạp CSS trong mỗi trang:
   base.css → components.css → pages.css
   ============================================================ */


/* ============================================================
   1. BIẾN TOÀN CỤC (CSS VARIABLES)
   ============================================================ */
:root {
  /* ----- Bảng màu lấy theo logo công ty ----- */
  --navy: #1A3D8F;
  /* Xanh dương đậm - màu chủ đạo của logo */
  --navy-dark: #122B66;
  /* Xanh đậm hơn - gradient, nền phụ */
  --navy-darker: #0D1F4D;
  /* Xanh tối nhất - hero, footer */
  --gold: #C9A227;
  /* Vàng gold - màu chữ "KINH LUÂN" trên logo */
  --gold-light: #E3C558;
  /* Vàng sáng - hover, chữ trên nền tối */
  --white: #FFFFFF;
  --bg-light: #F6F8FC;
  /* Nền xám xanh nhạt cho section xen kẽ */
  --text: #20283A;
  /* Màu chữ chính */
  --text-muted: #5A6478;
  /* Màu chữ phụ, mô tả */
  --border: #E2E7F0;
  /* Màu viền nhạt */
  --danger: #D03B3B;
  /* Màu báo lỗi form */

  /* ----- Font chữ ----- */
  /* --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Be Vietnam Pro', Arial, sans-serif; */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Mulish', Arial, sans-serif;
  /* Nội dung - hỗ trợ tiếng Việt */

  /* ----- Kích thước dùng chung ----- */
  --topbar-height: 38px;
  /* Thanh thông tin nhỏ trên cùng (ẩn trên mobile) */
  --header-height: 78px;
  /* Thanh menu chính */
  --radius: 12px;
  /* Bo góc chuẩn */
  --shadow: 0 8px 30px rgba(13, 31, 77, 0.08);
  /* Bóng đổ nhẹ */
  --shadow-hover: 0 14px 40px rgba(13, 31, 77, 0.15);
  /* Bóng đổ khi hover */
}


/* ============================================================
   2. RESET & KIỂU CHỮ CƠ BẢN
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Tính kích thước gồm cả padding + border */
}

html {
  scroll-behavior: smooth;
  /* Cuộn mượt khi bấm link neo trong trang */
  /* Bù chiều cao header dính để section không bị che khi nhảy neo */
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Chặn thanh cuộn ngang trên mobile */
}

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

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

ul,
ol {
  list-style: none;
}


/* ============================================================
   3. LỚP TIỆN ÍCH (UTILITIES)
   ============================================================ */

/* Khung chứa nội dung: rộng tối đa 1200px, căn giữa */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Nút bấm ----- */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font-body);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  text-align: center;
}

/* Nút vàng gold - hành động chính (CTA) */
.btn--gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--navy-darker);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.35);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(201, 162, 39, 0.5);
}

/* Nút viền trắng - dùng trên nền xanh đậm */
.btn--outline {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
}

/* Nút xanh navy - dùng trên nền sáng */
.btn--navy {
  background: var(--navy);
  color: var(--white);
}

.btn--navy:hover {
  background: var(--navy-dark);
  transform: translateY(-2px);
}

/* Nút chiếm hết chiều ngang */
.btn--block {
  display: block;
  width: 100%;
}

/* Nút nhỏ gọn (trong card, menu) */
.btn--sm {
  padding: 10px 24px;
  font-size: 14px;
}

/* ----- Section chung ----- */
.section {
  padding: 60px 0;
}

.section--alt {
  background: var(--bg-light);
}

/* Nền xám nhạt xen kẽ */
.section--navy {
  /* Nền navy đậm */
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy-darker) 100%);
}

/* Phần đầu section: nhãn nhỏ + tiêu đề + mô tả */
.section__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}

/* Biến thể căn trái (dùng khi tiêu đề nằm cạnh nội dung khác) */
.section__head--left {
  text-align: left;
  margin-left: 0;
}

/* Nhãn nhỏ viết hoa phía trên tiêu đề */
.section__eyebrow {
  display: inline-block;
  color: var(--gold);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

/* Biến thể có 2 gạch ngang hai bên khi nằm trong section__head */
.section__head .section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.section__head .section__eyebrow::before,
.section__head .section__eyebrow::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1.5px;
  background-color: var(--gold);
}

.section__eyebrow--gold {
  color: var(--gold-light);
}

.section__head .section__eyebrow--gold::before,
.section__head .section__eyebrow--gold::after {
  background-color: var(--gold-light);
}

/* Tiêu đề section */
.section__title {
  font-family: var(--font-heading);
  font-size: 38px;
  line-height: 1.25;
  color: var(--navy);
}

.section__title--light {
  color: var(--white);
}

/* Mô tả dưới tiêu đề */
.section__sub {
  margin-top: 14px;
  color: var(--text-muted);
}

/* ----- Hiệu ứng hiện dần khi cuộn (reveal) -----
   JS thêm class .is-visible khi phần tử lọt vào màn hình */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   4. RESPONSIVE CHO PHẦN NỀN TẢNG
   ============================================================ */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .section {
    padding: 48px 0;
  }

  .section__title {
    font-size: 31px;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  :root {
    --header-height: 66px;
  }

  .container {
    padding: 0 18px;
  }

  .section {
    padding: 40px 0;
  }

  .section__title {
    font-size: 26px;
  }

  .section__head {
    margin-bottom: 34px;
  }
}

/* Mobile nhỏ (≤480px) */
@media (max-width: 480px) {
  .section__title {
    font-size: 23px;
  }
}