/* ============================================================
   HỌC HÓA THÔNG MINH — v4 Design System Additions
   Thống nhất: viền 2.5px ink · bo góc 14px · shadow hard
   Trạng thái nút: normal / hover / active / disabled / loading / success / error
   Mobile: bottom nav + drawer menu · reduced-motion · footer mở rộng
   ============================================================ */

/* ---------- Trạng thái nút đầy đủ ---------- */
.btn[aria-busy="true"], .btn.is-loading{
  position:relative; color:transparent !important; pointer-events:none;
}
.btn[aria-busy="true"]::after, .btn.is-loading::after{
  content:""; position:absolute; top:50%; left:50%; width:18px; height:18px;
  margin:-9px 0 0 -9px; border:2.5px solid currentColor;
  border-top-color:transparent; border-radius:50%;
  animation:btn-spin .7s linear infinite; color:var(--ink);
}
.btn-primary[aria-busy="true"]::after{ color:#fff; }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

.btn.is-success{ background:var(--chloro) !important; color:#fff !important; border-color:var(--chloro) !important; box-shadow:4px 4px 0 var(--ink); }
.btn.is-success:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn.is-error{ background:var(--danger) !important; color:#fff !important; border-color:var(--danger) !important; box-shadow:4px 4px 0 var(--ink); }
.btn.is-error:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:disabled, .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:3px 3px 0 var(--ink) !important; }

/* Form validation states */
.form-control.is-valid{ border-color:var(--chloro); background:var(--chloro-tint); }
.form-control.is-invalid{ border-color:var(--danger); background:var(--litmus-tint); animation:input-shake .35s; }
@keyframes input-shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.field-hint{ font-size:12px; margin-top:4px; }
.field-hint.error{ color:var(--danger); }
.field-hint.success{ color:var(--chloro); }

/* ---------- Mobile: bottom navigation + drawer ---------- */
@media(max-width:768px){
  .header-inner{ height:58px !important; padding:0 8px !important; flex-wrap:nowrap !important; }
  .brand-name small{ display:none !important; }
  .main-nav{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(21,23,27,.55); z-index:80; flex-direction:column; gap:2px; padding:16px; justify-content:flex-start; overflow-y:auto; }
  .nav-open .main-nav{ display:flex; }
  .nav-open .main-nav::before{ content:""; flex:0; }
  .nav-open .main-nav > *{ width:100%; background:var(--paper); border:2.5px solid var(--ink); border-radius:var(--radius); box-shadow:4px 4px 0 var(--ink); padding:13px 16px; font-size:15px; font-weight:600; }
  .nav-open .main-nav .dropdown{ background:none; border:none; box-shadow:none; padding:0; }
  .nav-open .main-nav .dropdown-menu{ position:static; transform:none; padding:0; margin:6px 0 0 0; }
  .nav-open .main-nav .dropdown-menu > .dd-inner{ border:2px solid var(--line); box-shadow:none; border-radius:var(--radius-sm); padding:6px; }
  .menu-toggle{ display:block; order:3; }
  .header-cta{ width:auto; gap:6px; }
  .header-cta .theme-toggle{ display:flex; }

  /* Bottom navigation bar (chỉ hiện khi đã đăng nhập) */
  .bottom-nav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--paper); border-top:2.5px solid var(--ink); padding:6px 0 max(6px, env(safe-area-inset-bottom)); }
  .bottom-nav a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none;
    color:var(--ink-soft); font-size:10.5px; font-weight:600; padding:6px 2px; min-height:44px; justify-content:center;
  }
  .bottom-nav a .bi{ font-size:20px; line-height:1; }
  .bottom-nav a.active{ color:var(--ink); background:var(--citrine-tint); border:2px solid var(--ink); border-radius:12px; margin:0 3px; font-weight:700; }
  .bottom-nav a .notif-badge{ top:-4px; right:50%; margin-right:-14px; }

  main.wrap{ padding-bottom:76px; }
  .site-footer-pad{ margin-bottom:72px; }
  /* Bảng ngang cuộn trên mobile */
  table.lb-table, table.pt-table{ display:block; overflow-x:auto; }
  .card{ padding:14px; }
  .form-control{ min-height:46px; font-size:16px; }
  .btn{ min-height:44px; }
  /* Ô nhập liệu dễ bấm */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea{ min-height:46px; font-size:16px; }
}
.bottom-nav{ display:none; }

/* ---------- Hiệu ứng — có thể tắt toàn bộ ---------- */
body.reduced-motion *, body.reduced-motion{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}
body.reduced-motion .blob, body.reduced-motion .orbit-ring{ display:none; }

/* ---------- Hiệu ứng thành công/nhận thưởng/lên cấp ---------- */
@keyframes confetti-fall{ 0%{transform:translateY(-10px) rotate(0); opacity:1} 100%{transform:translateY(110px) rotate(360deg); opacity:0} }
@keyframes pop-in{ 0%{transform:scale(.6); opacity:0} 70%{transform:scale(1.08)} 100%{transform:scale(1); opacity:1} }
@keyframes glow-ring{ 0%{box-shadow:0 0 0 0 rgba(245,180,0,.5)} 70%{box-shadow:0 0 0 18px rgba(245,180,0,0)} 100%{box-shadow:0 0 0 0 rgba(245,180,0,0)} }
.reward-pop{ animation:pop-in .45s cubic-bezier(.4,0,.2,1); }
.level-up{ animation:pop-in .5s cubic-bezier(.4,0,.2,1), glow-ring 1s; }
.exp-toast{ animation:pop-in .35s ease-out; }

/* Flip card effect cho thẻ hóa học */
.flip-card{ perspective:1000px; }
.flip-card .flip-inner{ position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; }
.flip-card.is-flipped .flip-inner{ transform:rotateY(180deg); }
.flip-card .flip-front, .flip-card .flip-back{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--radius); }
.flip-card .flip-back{ transform:rotateY(180deg); }

/* ---------- Search suggestion dropdown ---------- */
.search-box{ position:relative; max-width:360px; }
.search-box input{ width:100%; padding-left:38px; }
.search-box .sb-icon{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none; }
.search-suggest{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:90;
  background:var(--paper); border:2.5px solid var(--ink); border-radius:var(--radius); box-shadow:5px 5px 0 var(--ink);
  max-height:340px; overflow-y:auto; padding:6px;
}
.search-suggest.open{ display:block; animation:dd-in .14s ease-out; }
.search-suggest .ss-group{ font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.5px; padding:7px 10px 3px; }
.search-suggest a{ display:block; padding:8px 10px; border-radius:var(--radius-sm); color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:500; }
.search-suggest a:hover{ background:var(--citrine-tint); }
.search-suggest mark{ background:var(--gold); color:var(--ink); border-radius:3px; padding:0 2px; }
.search-hist{ display:flex; gap:6px; flex-wrap:wrap; padding:2px 0 4px; }
.search-hist button{ font-size:11.5px; padding:4px 10px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper-2); cursor:pointer; color:var(--ink-soft); }
.search-hist button:hover{ border-color:var(--ink); color:var(--ink); }

/* ---------- Footer mở rộng ---------- */
html[data-theme="dark"] footer.site{ background:var(--paper-2); }
.footer-grid{ display:grid; grid-template-columns:1.5fr repeat(4, 1fr); gap:28px; }
.footer-grid b{ font-family:'Space Grotesk'; font-size:13.5px; color:var(--ink); display:block; margin-bottom:2px; }
.footer-bottom{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); }
.footer-brand-block{ border-top:3px solid var(--ink); padding-top:14px; }
@media(max-width:768px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:22px; } }

/* ---------- Theme (light/dark/system) indicator ---------- */
.theme-opt{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:2px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; background:var(--paper); font-size:13px; font-weight:600; }
.theme-opt input{ accent-color:var(--electron); }
.theme-opt.active{ border-color:var(--ink); box-shadow:3px 3px 0 var(--ink); }

/* ---------- Stat pill cho mastery/progress ---------- */
.mastery-bar{ height:10px; border:2px solid var(--ink); border-radius:999px; background:var(--paper-2); overflow:hidden; }
.mastery-bar > span{ display:block; height:100%; background:linear-gradient(90deg, var(--cobalt), var(--electron)); }
.mastery-pill{ display:inline-block; font-family:'Space Mono'; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; border:1.5px solid var(--ink); }
.mastery-pill.hot{ background:var(--chloro-tint); color:var(--chloro); }
.mastery-pill.warm{ background:var(--citrine-tint); color:#8a6300; }
.mastery-pill.cold{ background:var(--litmus-tint); color:var(--litmus); }

/* ---------- Tabs (stats/today etc.) ---------- */
.tab-nav{ display:flex; gap:6px; border-bottom:2.5px solid var(--ink); padding-bottom:0; margin-bottom:16px; overflow-x:auto; }
.tab-nav button{ padding:9px 16px; border:none; background:none; font-family:'Space Grotesk'; font-weight:600; font-size:14px; color:var(--ink-soft); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2.5px; white-space:nowrap; }
.tab-nav button.active{ color:var(--ink); border-bottom-color:var(--gold); }
.tab-pane{ display:none; }
.tab-pane.active{ display:block; animation:dd-in .18s ease-out; }

/* ---------- Badge trạng thái ---------- */
.badge-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.badge-dot.on{ background:var(--chloro); box-shadow:0 0 0 2px var(--chloro-tint); }
.badge-dot.off{ background:var(--ink-faint); }