/* ==========================================================================
   CHATLUONG.VN — DESIGN TOKENS
   Kế thừa bảng màu navy–gold từ bản gốc (đã được đánh giá 7/10, giữ lại),
   bổ sung: thang khoảng cách chuẩn, token cho light/dark đầy đủ theo 3 trạng
   thái trình duyệt (system / light / dark), và biến riêng cho icon.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root{
  /* ---- nền & bề mặt (light) ---- */
  --bg-primary:#f3f5fa;
  --bg-secondary:#ffffff;
  --bg-surface:#ffffff;
  --bg-surface-2:#eef1f7;
  --bg-elevated:#ffffff;
  --bg-inverse:#0b1526;

  --text-primary:#101a2c;
  --text-secondary:#4c586b;
  --text-muted:#7c879a;
  --text-inverse:#f4f7fc;

  --border-subtle:#e1e6ee;
  --border-strong:#c7cfdc;

  --brand-navy:#0f2c59;
  --brand-blue:#1d4ed8;
  --brand-cyan:#06b6d4;
  --brand-sky:#38bdf8;
  --brand-gold:#b4791f;
  --brand-gold-bright:#f59e0b;
  --brand-amber:#d97706;
  --brand-red:#c8433a;
  --brand-emerald:#0f8a4c;

  --grad-brand:linear-gradient(135deg,#0f2c59 0%,#1d4ed8 55%,#06b6d4 100%);
  --grad-gold:linear-gradient(135deg,#f59e0b 0%,#fbbf24 55%,#d97706 100%);
  --grad-hero-overlay:linear-gradient(180deg, rgba(6,12,26,.55) 0%, rgba(6,12,26,.86) 78%, rgba(6,12,26,.97) 100%);

  --shadow-sm:0 1px 3px rgba(15,23,42,.08);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.16);
  --shadow-lg:0 24px 48px -16px rgba(15,23,42,.24);
  --shadow-glow:0 0 0 1px rgba(29,78,216,.12), 0 12px 32px -12px rgba(29,78,216,.35);

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-full:999px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:56px; --space-10:80px;

  --font-heading:'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

  --container-w:1200px;
  --header-h:76px;

  --transition:0.18s cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-primary:#060b17;
    --bg-secondary:rgba(10, 18, 34, 0.72);
    --bg-surface:rgba(15, 26, 46, 0.7);
    --bg-surface-2:rgba(11, 20, 36, 0.8);
    --bg-elevated:rgba(18, 30, 52, 0.88);
    --bg-inverse:#f4f7fc;

    --text-primary:#eef2f9;
    --text-secondary:#a6b2c6;
    --text-muted:#78849b;
    --text-inverse:#0b1526;

    --border-subtle:rgba(255,255,255,.09);
    --border-strong:rgba(255,255,255,.16);

    --brand-gold:#e3ab55;

    --shadow-sm:0 1px 3px rgba(0,0,0,.4);
    --shadow-md:0 10px 28px -10px rgba(0,0,0,.55);
    --shadow-lg:0 28px 56px -18px rgba(0,0,0,.7);
    --shadow-glow:0 0 0 1px rgba(56,189,248,.25), 0 16px 40px -14px rgba(56,189,248,.35);

    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg-primary:#060b17;
  --bg-secondary:rgba(10, 18, 34, 0.72);
  --bg-surface:rgba(15, 26, 46, 0.7);
  --bg-surface-2:rgba(11, 20, 36, 0.8);
  --bg-elevated:rgba(18, 30, 52, 0.88);
  --bg-inverse:#f4f7fc;

  --text-primary:#eef2f9;
  --text-secondary:#a6b2c6;
  --text-muted:#78849b;
  --text-inverse:#0b1526;

  --border-subtle:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);

  --brand-gold:#e3ab55;

  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 10px 28px -10px rgba(0,0,0,.55);
  --shadow-lg:0 28px 56px -18px rgba(0,0,0,.7);
  --shadow-glow:0 0 0 1px rgba(56,189,248,.25), 0 16px 40px -14px rgba(56,189,248,.35);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.18;
  margin:0 0 var(--space-3);
  text-wrap:balance;
  color:var(--text-primary);
}
p{ margin:0 0 var(--space-4); color:var(--text-secondary); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:15px; }

.icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.14em; fill:none; stroke:currentColor; flex-shrink:0; }

.container{ max-width:var(--container-w); margin:0 auto; padding:0 24px; }
.section{ padding:var(--space-9) 0; }
.section-tight{ padding:var(--space-7) 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-gold); margin-bottom:var(--space-3);
}
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--brand-gold); border-radius:2px; }

.section-head{ max-width:720px; margin:0 auto var(--space-7); text-align:center; }
.section-head p{ font-size:16.5px; }
.section-head.align-left{ margin-left:0; text-align:left; }

.text-center{ text-align:center; }

/* [hidden] phải luôn thắng mọi display khác (vd. .admin-shell{display:grid}) */
[hidden]{ display:none !important; }
.muted{ color:var(--text-muted); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-full);
  font-weight:600; font-size:14.5px; border:1px solid transparent;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.btn-lg{ padding:15px 28px; font-size:15.5px; }
.btn-primary{ background:var(--grad-brand); color:#fff; box-shadow:var(--shadow-glow); }
.btn-primary:hover{ box-shadow:var(--shadow-lg); }
.btn-gold{ background:var(--grad-gold); color:#241505; }
.btn-secondary{ background:var(--bg-surface); color:var(--text-primary); border-color:var(--border-strong); }
.btn-secondary:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.btn-ghost{ background:transparent; color:var(--text-secondary); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; padding:4px 11px; border-radius:var(--radius-full);
  background:var(--bg-surface-2); color:var(--text-secondary); border:1px solid var(--border-subtle);
}
.badge-gold{ background:rgba(180,121,31,.12); color:var(--brand-gold); border-color:rgba(180,121,31,.3); }
.badge-blue{ background:rgba(29,78,216,.1); color:var(--brand-blue); border-color:rgba(29,78,216,.25); }
.badge-green{ background:rgba(15,138,76,.1); color:var(--brand-emerald); border-color:rgba(15,138,76,.25); }

/* ---- card base ---- */
.card{
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{
  border-color:rgba(56,189,248,.35);
  box-shadow:var(--shadow-glow);
}

/* ---- grids that auto-fit instead of leaving orphaned cells ---- */
.grid{ display:grid; gap:var(--space-5); }
.grid > *{ min-width:0; } /* tránh select/code dài ép cột grid tràn ngang trên di động */
.grid-auto{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.grid-auto-sm{ grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

/* ---- forms ---- */
.field{ margin-bottom:var(--space-4); }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--text-primary); }
.field input, .field select, .field textarea{
  width:100%; padding:11px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--bg-elevated); color:var(--text-primary);
  transition:border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brand-blue); }
.field textarea{ resize:vertical; min-height:96px; }
.field-hint{ font-size:12.5px; color:var(--text-muted); margin-top:4px; }
.field-error{ font-size:12.5px; color:var(--brand-red); margin-top:4px; display:none; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:var(--brand-red); }
.field.has-error .field-error{ display:block; }

/* focus visibility for a11y */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand-sky); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}