/* ============================================================
   DR AI Aesthetic, Design System (Gold on Charcoal)
   Dùng chung cho Landing + Bảng quản trị
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');

:root{
  /* ---- Charcoal / black layers ---- */
  --bg:            #0B0B0D;
  --bg-1:          #111014;
  --bg-2:          #17151b;
  --bg-3:          #1e1b22;
  --panel:         #141319;
  --panel-2:       #1b1922;
  --line:          rgba(231,200,115,.16);
  --line-soft:     rgba(255,255,255,.07);

  /* ---- Gold ---- */
  --gold-1:        #FBE7B0;
  --gold-2:        #E7C873;
  --gold-3:        #C9A24B;
  --gold-4:        #9C6B25;
  --gold:          #E7C873;
  --gold-grad:     #E7C873;
  --gold-grad-h:   #C9A24B;
  --gold-sheen:    #E7C873;
  --gold-glow:     0 0 0 1px rgba(231,200,115,.22);

  /* ---- Text ---- */
  --ink:           #F6F1E7;
  --ink-soft:      #CBC2B2;
  --ink-mut:       #948B7C;
  --ink-faint:     #6b6458;

  /* ---- Feedback ---- */
  --ok:            #6FCF97;
  --warn:          #E9B949;
  --bad:           #E06C6C;

  /* ---- Shape ---- */
  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;
  --shadow: 0 24px 60px -22px rgba(0,0,0,.75);
  --shadow-soft: 0 16px 40px -20px rgba(0,0,0,.6);

  /* ---- Type ---- */
  --serif: 'Playfair Display', 'Times New Roman', serif;
  --sans:  'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw: 1200px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--bg);
  line-height:1.65; letter-spacing:.1px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Gold helpers ---------- */
.gold-text{ color:var(--gold-2); }
.hair{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; }
.hair-v{ width:1px; background:linear-gradient(180deg,transparent,var(--line),transparent); }

/* ---------- Section label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.74rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-2);
}
.eyebrow::before,.eyebrow::after{ content:''; width:34px; height:1px; background:var(--gold-grad-h); opacity:.7; }
.eyebrow.one::before{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:var(--bh); padding:0 26px; border-radius:var(--r-pill); border:1px solid transparent;
  font-weight:700; font-size:.98rem; letter-spacing:.2px; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s, background .25s;
  position:relative; overflow:hidden;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-gold{
  color:#1a1305; background:var(--gold-2);
}
.btn-gold:hover{ background:var(--gold-1); }
.btn-ghost{
  color:var(--gold-1); background:transparent;
  border:1px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--gold-2); color:#fff; background:rgba(231,200,115,.06); }
.btn-dark{ background:var(--bg-2); color:var(--ink); border:1px solid var(--line-soft); }
.btn-dark:hover{ border-color:var(--line); }
.btn-sm{ --bh:40px; padding:0 16px; font-size:.86rem; }
.btn-lg{ --bh:60px; padding:0 34px; font-size:1.06rem; }
.btn-block{ width:100%; }

/* ---------- Cards / glass ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.glass{
  background:var(--panel);
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
}
.gold-frame{ position:relative; border-radius:var(--r-lg); }
.gold-frame::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--gold-3); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.35;
}

/* ---------- Chips / badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.45em; padding:.42em .8em; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600; color:var(--ink-soft);
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-2); }
.badge{ display:inline-flex; align-items:center; gap:.35em; padding:.2em .6em; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; }
.badge-gold{ color:#1a1305; background:var(--gold-2); }
.badge-ok{ color:#0c1c12; background:var(--ok); }
.badge-warn{ color:#241a06; background:var(--warn); }
.badge-bad{ color:#2a0c0c; background:var(--bad); }
.badge-soft{ color:var(--gold-1); background:rgba(231,200,115,.12); border:1px solid var(--line); }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:.4em; }
.field > label{ font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.inp, input[type=text], input[type=tel], input[type=email], input[type=number],
input[type=date], input[type=datetime-local], input[type=time], input[type=password], select, textarea{
  width:100%; height:48px; padding:0 14px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--r-sm);
  font-family:inherit; font-size:.96rem; transition:border-color .2s, box-shadow .2s, background .2s;
}
textarea{ height:auto; padding:12px 14px; min-height:96px; resize:vertical; line-height:1.6; }
.inp:focus, input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--gold-3); box-shadow:0 0 0 3px rgba(231,200,115,.14); background:var(--bg-3);
}
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold-2) 50%),linear-gradient(135deg,var(--gold-2) 50%,transparent 50%); background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat; }
::placeholder{ color:var(--ink-faint); }

/* ---------- Table ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th{ text-align:left; padding:12px 14px; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mut); border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td{ padding:13px 14px; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); }
.tbl tr:hover td{ background:rgba(231,200,115,.03); }

/* ---------- Scrollbar ---------- */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:var(--gold-4); border-radius:99px; border:3px solid var(--bg); }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Utilities ---------- */
.wrap{ width:min(100% - 40px, var(--maxw)); margin-inline:auto; }
.center{ text-align:center; }
.muted{ color:var(--ink-mut); }
.serif{ font-family:var(--serif); }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.wide-grid{ display:grid; gap:22px; }
@media (max-width:860px){ :root{ --maxw:100%; } }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition-duration:.001ms!important; }
  .reveal{ opacity:1; transform:none; }
}