/* ============================================================
   XTRUONGMKTER — Brand stylesheet
   Ruby Red #8A1538 · Deep Wine #5A1A28 · Earth Gold #C58D34
   Warm Ivory #F8F3ED · Sand Beige #E9DCC8 · Charcoal #1A1A1C
   Fonts: Playfair Display / Be Vietnam Pro / Montserrat
   ============================================================ */

:root {
  --ruby: #8a1538;
  --ruby-dark: #6f1029;
  --wine: #5a1a28;
  --gold: #c58d34;
  --gold-light: #e0b25f;
  --ivory: #f8f3ed;
  --beige: #e9dcc8;
  --charcoal: #1a1a1c;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}

/* Phông chữ dễ đọc, tối ưu tiếng Việt — Be Vietnam Pro (2026-08) */
.font-display { font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif !important; letter-spacing: -0.015em; }
.font-heading { font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif !important; }
.font-body    { font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif !important; }
body { font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif; }

/* ---------- Dark luxurious background (auth hero) ---------- */
.bg-luxe-dark {
  background:
    radial-gradient(1200px 600px at 78% 40%, rgba(197,141,52,0.18), transparent 60%),
    radial-gradient(900px 500px at 12% 8%, rgba(138,21,56,0.55), transparent 55%),
    linear-gradient(135deg, #1a0d10 0%, #2a1015 45%, #10080a 100%);
  position: relative;
  overflow: hidden;
}
.bg-luxe-dark::before {
  /* subtle gold particle field */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 60% 30%, rgba(224,178,95,0.9), transparent),
    radial-gradient(1.5px 1.5px at 72% 55%, rgba(224,178,95,0.7), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(224,178,95,0.8), transparent),
    radial-gradient(1px 1px at 66% 70%, rgba(224,178,95,0.6), transparent),
    radial-gradient(2px 2px at 85% 45%, rgba(224,178,95,0.5), transparent);
  pointer-events: none;
}

/* ---------- Light ivory background with red corner ---------- */
.bg-luxe-light {
  background:
    radial-gradient(900px 500px at 85% 90%, rgba(233,220,200,0.6), transparent 60%),
    linear-gradient(135deg, #fbf7f1 0%, #f4ece1 100%);
  position: relative;
  overflow: hidden;
}
.corner-ribbon {
  position: absolute;
  top: 0; left: 0;
  width: 380px; height: 320px;
  background: linear-gradient(135deg, var(--ruby) 0%, var(--wine) 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: 0.95;
}

/* ---------- Brand button ---------- */
.btn-ruby {
  background: linear-gradient(135deg, var(--ruby) 0%, var(--ruby-dark) 100%);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(138,21,56,0.55);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-ruby:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(138,21,56,0.65); filter: brightness(1.05); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: #3a2410;
  box-shadow: 0 8px 24px -8px rgba(197,141,52,0.6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(197,141,52,0.7); }

.btn-outline {
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-outline:hover { border-color: var(--gold); box-shadow: 0 6px 18px -8px rgba(0,0,0,0.2); transform: translateY(-1px); }

/* ---------- Logo coin ---------- */
.coin {
  background-image: url("../img/logo.png");
  background-size: cover;
  background-position: center;
  background-color: #f8f3ed;
  border: none;
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
  font-size: 0 !important;      /* ẩn chữ "X↑" cũ, chỉ hiện ảnh logo */
  overflow: hidden;
}

/* ---------- Inputs ---------- */
.field {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px 14px 46px;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: "Be Vietnam Pro", sans-serif;
}
.field:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(197,141,52,0.15);
}
.field-wrap { position: relative; }
.field-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #9a8f80; }
.field-eye  { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #9a8f80; cursor: pointer; background: none; border: none; }

/* ---------- Nav link underline ---------- */
.nav-link { position: relative; padding-bottom: 4px; transition: color .15s ease; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold); transition: width .2s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ---------- Card ---------- */
.card-soft {
  background: linear-gradient(180deg, #fffdfa 0%, #f8f2e8 100%);
  border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.35);
  border: 1px solid rgba(197,141,52,0.18);
}

/* ---------- Divider with text ---------- */
.divider-text { display: flex; align-items: center; gap: 14px; color: #9a8f80; font-size: 13px; }
.divider-text::before, .divider-text::after { content: ""; height: 1px; flex: 1; background: rgba(0,0,0,0.1); }

/* ---------- Feature chip (login left) ---------- */
.feat-icon {
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(197,141,52,0.12);
  border: 1px solid rgba(197,141,52,0.35);
  color: var(--gold-light);
}

/* ---------- Progress bar (dashboard) ---------- */
.progress-track { height: 8px; background: var(--beige); border-radius: 999px; overflow: hidden; }
.progress-fill  { height: 100%; background: linear-gradient(90deg, var(--ruby), var(--gold)); border-radius: 999px; }

/* ---------- Password strength ---------- */
.strength-seg { height: 6px; border-radius: 999px; background: #e2d8ca; flex: 1; transition: background .2s ease; }

/* utility */
.text-gold-grad {
  background: linear-gradient(120deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}