/* ==========================================================================
   Guarda 2026 — custom.css
   Nguyên tắc: chỉ khai báo design token + ghi đè biến CSS của Bootstrap 5.3.
   Mọi bố cục / khoảng cách / màu nền dùng utility class của Bootstrap.
   ========================================================================== */

:root {
  --g-ink:        #0D1626;
  --g-ink-2:      #16233A;
  --g-gold:       #C8A44D;
  --g-gold-soft:  #E8CE8E;
  --g-paper:      #FBF7EF;
  --g-red:        #8E1B2E;

  --bs-body-color: #24303F;
  --bs-link-color-rgb: 142, 27, 46;
  --bs-border-color: rgba(13, 22, 38, .12);
}

/* --- Typography ---------------------------------------------------------- */
.tracking-wide { letter-spacing: .18em; }

/* --- Palette utilities (bổ sung cho bảng màu Bootstrap) ------------------- */
.bg-ink    { background-color: var(--g-ink) !important; }
.bg-ink-2  { background-color: var(--g-ink-2) !important; }
.bg-paper  { background-color: var(--g-paper) !important; }
.bg-red    { background-color: var(--g-red) !important; }
.text-gold { color: var(--g-gold) !important; }
.text-red  { color: var(--g-red) !important; }
.border-gold { border-color: var(--g-gold) !important; }

/* --- Nút ----------------------------------------------------------------- */
.btn-gold {
  --bs-btn-color: #1B1405;
  --bs-btn-bg: var(--g-gold);
  --bs-btn-border-color: var(--g-gold);
  --bs-btn-hover-color: #1B1405;
  --bs-btn-hover-bg: var(--g-gold-soft);
  --bs-btn-hover-border-color: var(--g-gold-soft);
  --bs-btn-active-color: #1B1405;
  --bs-btn-active-bg: var(--g-gold-soft);
  --bs-btn-active-border-color: var(--g-gold-soft);
  --bs-btn-focus-shadow-rgb: 200, 164, 77;
}
.btn-outline-gold {
  --bs-btn-color: var(--g-gold);
  --bs-btn-border-color: var(--g-gold);
  --bs-btn-hover-color: #1B1405;
  --bs-btn-hover-bg: var(--g-gold);
  --bs-btn-hover-border-color: var(--g-gold);
  --bs-btn-active-color: #1B1405;
  --bs-btn-active-bg: var(--g-gold);
  --bs-btn-active-border-color: var(--g-gold);
  --bs-btn-focus-shadow-rgb: 200, 164, 77;
}

/* --- Navbar / Tabs / Accordion: chỉ đổi màu theo brand ------------------- */
.navbar-guarda { --bs-navbar-active-color: var(--g-gold); --bs-navbar-hover-color: var(--g-gold-soft); }
.nav-guarda    { --bs-nav-link-color: var(--g-ink); --bs-nav-link-hover-color: var(--g-red); }
.nav-guarda .nav-link.active { --bs-nav-tabs-link-active-border-color: var(--g-gold) var(--g-gold) #fff; color: var(--g-red); }
.accordion-guarda { --bs-accordion-active-color: var(--g-red); --bs-accordion-active-bg: var(--g-paper); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(200,164,77,.35); }
.table-guarda { --bs-table-striped-bg: rgba(200, 164, 77, .07); }

/* --- Ảnh nền hero ------------------------------------------------------- */
.hero-guarda {
  background-image:
    linear-gradient(180deg, rgba(13,22,38,.94) 0%, rgba(13,22,38,.86) 55%, rgba(13,22,38,.97) 100%);
  background-size: cover;
  background-position: center;
}
.page-banner {
  background-image:
    linear-gradient(180deg, rgba(13,22,38,.92), rgba(13,22,38,.96));
  background-size: cover;
  background-position: center;
}

/* --- Vệt phân cách chữ Quốc ngữ (phần tử ký hiệu của trang) ------------- */
.thanh-dieu { font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1; }

/* --- Logo đối tác: đưa về nền sáng đồng nhất ----------------------------- */
.logo-doi-tac img { max-height: 76px; width: auto; object-fit: contain; }

/* --- Timeline mảnh, dựng bằng border của Bootstrap ---------------------- */
.timeline-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--g-gold); box-shadow: 0 0 0 4px rgba(200,164,77,.22);
}

/* --- Ảnh giữ tỉ lệ ------------------------------------------------------- */
.ratio-portrait { --bs-aspect-ratio: 125%; }

/* --- Tôn trọng thiết lập giảm chuyển động ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-aos] { transition: none !important; transform: none !important; opacity: 1 !important; }
}
.block-field-blocknodehomepagefield-body .field--label{
  display: none;
}