/* ============================================================
   base.css - LogiSkills shared styles.
   Tokens generated 2026-07-06 from DESIGN.md (direction A "Bento Campus",
   anti-clone gate approved). Keep :root in sync with assets/js/tailwind.config.js.
   Hard rules carried from DESIGN.md:
   - The One Gradient Rule: gradient lives ONLY on .btn-cta (and the logo).
   - The Sky Ban Rule: never white text on #45B4FD.
   - The Mono Price Rule: JetBrains Mono for numbers only.
   - Lift-On-Intent: strong shadow only as hover/focus response.
   ============================================================ */

:root{
  --royal:#2E6BE0; --azure:#2E8BF0; --cyan:#12AEDB; --sky:#45B4FD;
  --violet:#9B30FF; --violet-deep:#7C21CE; --deep:#3A1D6E;
  --ink:#0A0414; --ink-body:#3B3B4A; --ink-mute:#565566;
  --mist:#E4E1EA; --ice:#EDF4FD; --ice-deep:#DCEAFB;
  --success:#15803D; --success-soft:#F0FDF4; --danger:#B91C1C; --danger-soft:#FEF2F2; /* state-only: quiz/form feedback */
  --shadow-soft:0 4px 6px rgba(10,4,20,.05);
  --shadow-lift:0 12px 28px rgba(46,107,224,.12);
  --shadow-float:0 24px 56px rgba(10,4,20,.16);   /* tầng nổi: chỉ cho lớp bay trên nội dung (mega menu) */
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --grad-cta:linear-gradient(90deg,#12AEDB,#2E6BE0);
  --grad-cta-hover:linear-gradient(90deg,#0E839F,#2456B8);
  --section-pad:clamp(4.5rem,9vw,7rem);
}

/* mechanical reset */
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body{ -webkit-font-smoothing:antialiased; font-family:"Be Vietnam Pro",sans-serif; color:var(--ink-body); background:#fff; line-height:1.7; }

h1,h2,h3,h4{ font-family:"Space Grotesk",sans-serif; color:var(--ink); text-wrap:balance; }
p{ text-wrap:pretty; }

/* ---- Buttons (pill, min 44px, 3 states - no exceptions) ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:14px 28px; border-radius:999px; border:0; cursor:pointer;
  font-family:"Be Vietnam Pro",sans-serif; font-weight:600; font-size:1rem; text-decoration:none;
  transition:transform .15s var(--ease-out-quart), box-shadow .15s var(--ease-out-quart), background-color .15s var(--ease-out-quart); }
.btn:focus-visible{ outline:2px solid var(--royal); outline-offset:2px; }
.btn:active{ transform:translateY(0) scale(.98); }

/* The ONLY gradient surface on the site (One Gradient Rule) */
.btn-cta{ background-image:var(--grad-cta); color:#fff; }
.btn-cta:hover{ background-image:var(--grad-cta-hover); transform:translateY(-1px); box-shadow:var(--shadow-lift); }

.btn-ghost{ background:#fff; color:var(--royal); border:1.5px solid var(--royal); padding:13px 27px; }
.btn-ghost:hover{ background:var(--ice-deep); }

/* on the deep-purple footer band */
.btn-inverse{ background:#fff; color:var(--ink); }
.btn-inverse:hover{ background:var(--ice-deep); transform:translateY(-1px); }

/* outline button on solid-color (royal) bands - real border, white text (.btn sets border:0, so set style here) */
.btn-outline-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.85); }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); }

/* ---- Mega menu "Khóa học" (desktop ≥1024px; dưới đó dùng #mobileMenu).
   Nội dung sinh từ COURSE_MENU trong base.js. Đây là điều hướng, KHÔNG phải nội dung bị JS che,
   nên nó không mở theo ?revealall (giống #mobileMenu) - screenshot vẫn thấy đủ nội dung trang. ---- */
.nav-drop{ display:inline-flex; align-items:center; gap:4px; }
.nav-chev, .acc-chev{ transition:transform .2s var(--ease-out-quart); }

/* panel NỔI (không dán vào header): canh giữa màn hình, bo 24px, đổ bóng tầng float */
.mega{ position:absolute; left:50%; top:calc(100% + 10px); width:min(1280px, calc(100vw - 32px));
  transform:translateX(-50%) translateY(-8px) scale(.99);
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease-out-quart), transform .2s var(--ease-out-quart), visibility .2s; }
.mega.is-open{ visibility:visible; opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto; }
/* cầu nối trong suốt qua khe 10px, để chuột rời nav xuống panel không làm menu đóng */
.mega::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.mega-panel{ background:#fff; border-radius:24px; box-shadow:var(--shadow-float); overflow:hidden; }
/* padding-inline 24 + head/list margin -12 => icon và chữ item rơi đúng x của logo trên header */
.mega-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; padding:28px 24px 26px; }

/* Đầu cột: khối royal 40px + tên nhóm 700, nặng hơn hẳn item bên dưới.
   min-height cố định để 4 đầu cột bằng nhau, danh sách 4 cột bắt đầu cùng một dòng.
   padding 12 + margin -12 để icon nằm đúng mép trái cột, thẳng hàng với chữ của item. */
.mega-head{ display:flex; align-items:flex-start; gap:12px; min-height:68px;
  padding:12px; margin:-12px -12px 0; border-radius:16px;
  transition:background-color .15s var(--ease-out-quart); }
.mega-head:hover{ background:var(--ice); }
.mega-head:focus-visible{ outline:2px solid var(--royal); outline-offset:2px; }
.mega-mark{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:12px; background:var(--royal); color:#fff; flex:none; }
.mega-name{ display:block; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1rem;
  line-height:1.25; color:var(--ink); text-wrap:balance; }
.mega-note{ display:block; margin-top:4px; font-size:.75rem; line-height:1.45; color:var(--ink-mute); }

.mega-list{ margin:14px -12px 0; display:flex; flex-direction:column; gap:4px; }
.mega-link{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px;
  font-size:.9375rem; line-height:1.4; color:var(--ink-body); text-wrap:pretty;
  transition:background-color .15s var(--ease-out-quart), color .15s var(--ease-out-quart); }
.mega-arrow{ margin-left:auto; flex:none; opacity:0; transform:translateX(-4px);
  transition:opacity .15s var(--ease-out-quart), transform .15s var(--ease-out-quart); }
.mega-link:hover{ background:var(--ice); color:var(--royal); }
.mega-link:hover .mega-arrow{ opacity:1; transform:none; }
.mega-link:focus-visible{ outline:2px solid var(--royal); outline-offset:2px; }

.mega-foot{ background:var(--ice); padding:14px 24px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:14px; }
@media (hover:none){ .mega-arrow{ display:none; } }
@media (max-width:1023px){ .mega{ display:none; } }

/* ---- Chips ---- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
  background:var(--ice-deep); color:var(--ink); font-size:.875rem; font-weight:600; }
.chip-practice{ background:rgba(155,48,255,.1); color:var(--violet-deep); } /* Violet Ink Rule: hands-on only */
.chip-filter[aria-pressed="true"]{ background:var(--royal); color:#fff; }

/* ---- Cards / bento tiles (Lift-On-Intent) ---- */
.card{ background:#fff; border-radius:24px; box-shadow:var(--shadow-soft);
  transition:transform .15s var(--ease-out-quart), box-shadow .15s var(--ease-out-quart); }
.tile{ background:var(--ice); border-radius:24px; padding:32px; }
a.card:hover, .card-link:hover{ transform:translateY(-2px) scale(1.02); box-shadow:var(--shadow-lift); }
a.card:focus-visible, .card-link:focus-visible{ outline:2px solid var(--royal); outline-offset:2px; }

/* ---- Inputs ---- */
.field{ width:100%; padding:12px 16px; border:1.5px solid var(--mist); border-radius:16px;
  background:#fff; color:var(--ink); font:inherit;
  transition:border-color .15s var(--ease-out-quart), box-shadow .15s var(--ease-out-quart); }
.field::placeholder{ color:var(--ink-mute); }
.field:focus-visible{ outline:none; border-color:var(--royal); box-shadow:0 0 0 3px rgba(46,107,224,.15); }

/* ---- Numbers speak mono (Mono Price Rule) ---- */
.num{ font-family:"JetBrains Mono",monospace; font-weight:600; letter-spacing:-.02em; }
.price{ font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--ink); letter-spacing:-.02em; }

/* ---- Section rhythm ---- */
.section{ padding-block:var(--section-pad); }
.section-ice{ background:var(--ice); }

/* Reveal-on-scroll contract (base.js adds .in on viewport entry; ?revealall shows everything - screenshot.mjs relies on it).
   Hidden only when JS runs: every page must have an inline <head> script adding the `js` class to <html> early.
   No JS → no html.js → everything is visible; blank sections can never ship.
   Motion per direction A: fade + subtle scale, 250ms ease-out-quart (NOT translateY - that is LogiWork's reveal). */
html.js .reveal{ opacity:0; transform:scale(.985); }
html.js .reveal.in{ opacity:1; transform:scale(1);
  transition:opacity .25s var(--ease-out-quart), transform .25s var(--ease-out-quart); }

/* ---- Touch devices: no sticky hover-transforms, tap feedback stays ---- */
@media (hover:none){
  a.card:hover, .card-link:hover{ transform:none; box-shadow:var(--shadow-soft); }
  .btn-cta:hover, .btn-inverse:hover{ transform:none; }
}

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