/* =====================================================
   TRA CỨU TÀI LIỆU HÓA HỌC & TIẾNG ANH - STYLE.CSS
   Tối ưu PC + Mobile, fix font/overflow
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── VARIABLES ── */
:root{
  --pri:#1565C0; --pri-dk:#0D47A1; --pri-lt:#E3F2FD;
  --acc:#E53935; --acc-lt:#FFEBEE;
  --grn:#2E7D32; --grn-lt:#E8F5E9;
  --org:#E65100; --org-lt:#FFF3E0;
  --yel:#F9A825; --yel-lt:#FFFDE7;
  --bg:#F4F6F9; --sur:#FFFFFF; --bdr:#DDE3EC;
  --txt:#1A1A2E; --txt2:#3D4457; --muted:#8892A4;
  --shd:0 1px 4px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06);
  --shd-lg:0 4px 20px rgba(0,0,0,.12);
  --r:8px; --r-lg:12px; --r-xl:16px;
  --font:'Be Vietnam Pro','Segoe UI',system-ui,Arial,sans-serif;
  --hdr-h:108px; /* header-top + header-main + nav-bar */
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:1rem;line-height:1.7;color:var(--txt);background:var(--bg);
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline;color:var(--pri-dk)}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;border:none;outline:none}
button{cursor:pointer;background:none}
ul,ol{padding-left:1.4rem}
h1{font-size:clamp(1.4rem,3.5vw,1.8rem)}
h2{font-size:clamp(1.1rem,2.5vw,1.4rem)}
h3{font-size:clamp(1rem,2vw,1.15rem)}
h4{font-size:1rem}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:var(--txt);margin-bottom:.5rem}
p{margin-bottom:.75rem}p:last-child{margin-bottom:0}

/* ── LOADER ANIMATION ── */
.page-loader{
  position:fixed;inset:0;background:#fff;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  transition:opacity .5s ease,visibility .5s ease;
}
.page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{
  width:56px;height:56px;background:var(--pri);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  animation:pulse 1.2s ease-in-out infinite;
}
.loader-logo svg{width:32px;height:32px}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.85}}
.loader-dots{display:flex;gap:6px}
.loader-dot{width:8px;height:8px;border-radius:50%;background:var(--pri);animation:bounce 1.2s ease-in-out infinite}
.loader-dot:nth-child(2){animation-delay:.2s;background:var(--acc)}
.loader-dot:nth-child(3){animation-delay:.4s;background:var(--grn)}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-10px);opacity:1}}
.loader-text{font-size:.82rem;color:var(--muted);font-weight:500}

/* ── SITE WRAPPER ── */
.site-wrapper{display:flex;flex-direction:column;min-height:100vh}

/* ══════════════════════════════════
   HEADER
   ══════════════════════════════════ */
.site-header{position:sticky;top:0;z-index:200;background:var(--pri);box-shadow:0 2px 8px rgba(0,0,0,.18)}

/* Top bar */
.hdr-top{background:var(--pri-dk);padding:.22rem 0;font-size:.75rem;color:rgba(255,255,255,.72)}
.hdr-top-inner{max-width:1240px;margin:0 auto;padding:0 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-width:0}
.hdr-top a{color:rgba(255,255,255,.72)}
.hdr-top a:hover{color:#fff;text-decoration:none}
.hdr-top-links{display:flex;gap:1rem;flex-shrink:0}

/* Main row */
.hdr-main{max-width:1240px;margin:0 auto;padding:.5rem 1rem;display:flex;align-items:center;gap:1rem;min-width:0}

/* Brand */
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex-shrink:0;min-width:0}
.brand:hover{text-decoration:none}
.brand-logo{width:36px;height:36px;flex-shrink:0;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-name{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.02em;white-space:nowrap}
.brand-sub{font-size:.6rem;color:rgba(255,255,255,.72);white-space:nowrap}

/* Search */
.hdr-search{flex:1;min-width:0;max-width:460px;display:flex}
.hdr-search input{flex:1;min-width:0;padding:.48rem .9rem;border-radius:var(--r) 0 0 var(--r);font-size:.88rem;background:#fff;color:var(--txt)}
.hdr-search input::placeholder{color:var(--muted)}
.hdr-search button{background:var(--acc);color:#fff;padding:.48rem .85rem;border-radius:0 var(--r) var(--r) 0;display:flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:600;white-space:nowrap;flex-shrink:0}
.hdr-search button:hover{background:#C62828}

/* Header actions */
.hdr-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0;margin-left:auto}
.btn-h{display:inline-flex;align-items:center;gap:.3rem;padding:.38rem .75rem;border-radius:var(--r);font-size:.8rem;font-weight:600;white-space:nowrap;transition:background .15s;text-decoration:none}
.btn-h:hover{text-decoration:none}
.btn-h-out{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-h-out:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-h-sol{background:#fff;color:var(--pri)}
.btn-h-sol:hover{background:var(--pri-lt);color:var(--pri)}
.btn-h-pay{background:var(--yel);color:#1A1A2E;font-weight:700}
.btn-h-pay:hover{background:#F59F00;color:#1A1A2E}

/* Mobile menu btn */
.mob-btn{display:none;align-items:center;justify-content:center;padding:.42rem .55rem;background:rgba(255,255,255,.14);border-radius:var(--r);color:#fff;flex-shrink:0}

/* ── NAV BAR ── */
.nav-bar{background:var(--pri-dk);border-top:1px solid rgba(255,255,255,.08)}
.nav-inner{max-width:1240px;margin:0 auto;padding:0 .75rem;display:flex;overflow-x:auto;scrollbar-width:none}
.nav-inner::-webkit-scrollbar{display:none}
.nav-item{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .75rem;color:rgba(255,255,255,.85);font-size:.82rem;font-weight:500;white-space:nowrap;border-bottom:3px solid transparent;transition:all .15s;text-decoration:none}
.nav-item svg{flex-shrink:0}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.nav-item.active{color:#fff;border-bottom-color:#FFD54F;font-weight:700}

/* Mobile nav panel */
.mob-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:300;background:#fff;box-shadow:var(--shd-lg);max-height:75vh;overflow-y:auto}
.mob-nav.open{display:block}
.mob-nav a{display:flex;align-items:center;gap:.55rem;padding:.7rem 1.2rem;border-bottom:1px solid var(--bdr);color:var(--txt);font-size:.9rem;font-weight:500}
.mob-nav a:hover,.mob-nav a:active{background:var(--pri-lt);text-decoration:none}
.mob-nav .mob-section{padding:.4rem 1.2rem .25rem;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:var(--bg)}

/* ══════════════════════════════════
   LAYOUT
   ══════════════════════════════════ */
.page-body{flex:1;max-width:1240px;margin:0 auto;padding:1.25rem 1rem;width:100%;display:grid;grid-template-columns:220px 1fr;gap:1.25rem;align-items:start}
.page-full{flex:1;max-width:1240px;margin:0 auto;padding:1.25rem 1rem;width:100%}

/* Breadcrumb */
.bc{font-size:.8rem;color:var(--muted);margin-bottom:.85rem;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.bc a{color:var(--pri)}.bc-sep{color:var(--bdr)}

/* ══════════════════════════════════
   SIDEBAR
   ══════════════════════════════════ */
.sidebar{position:sticky;top:calc(var(--hdr-h) + .75rem)}
.sb-box{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:.85rem;overflow:hidden;box-shadow:var(--shd)}
.sb-hd{background:var(--pri);color:#fff;font-size:.82rem;font-weight:700;padding:.52rem .85rem;display:flex;align-items:center;gap:.38rem}
.sb-hd.grn{background:var(--grn)}.sb-hd.red{background:var(--acc)}.sb-hd.org{background:var(--org)}
.sb-links{list-style:none;padding:0;margin:0}
.sb-links li{border-bottom:1px solid #f0f0f0}
.sb-links li:last-child{border-bottom:none}
.sb-links a{display:flex;align-items:center;gap:.38rem;padding:.48rem .85rem;color:var(--txt2);font-size:.84rem;transition:background .12s}
.sb-links a:hover{background:var(--pri-lt);color:var(--pri);text-decoration:none}
.sb-links a.active{background:var(--pri-lt);color:var(--pri);font-weight:600}

/* ══════════════════════════════════
   CARDS
   ══════════════════════════════════ */
.card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:1.15rem;margin-bottom:1.15rem;box-shadow:var(--shd)}
.card-hd{display:flex;align-items:center;gap:.45rem;padding-bottom:.65rem;margin-bottom:.9rem;border-bottom:2.5px solid var(--pri)}
.card-hd h2,.card-hd h3{font-size:1rem;color:var(--pri);margin:0}
.card-hd.red{border-color:var(--acc)}.card-hd.red h2,.card-hd.red h3{color:var(--acc)}
.card-hd.grn{border-color:var(--grn)}.card-hd.grn h2,.card-hd.grn h3{color:var(--grn)}
.card-hd.org{border-color:var(--org)}.card-hd.org h2,.card-hd.org h3{color:var(--org)}

/* ══════════════════════════════════
   HERO BANNER
   ══════════════════════════════════ */
.hero{background:linear-gradient(135deg,var(--pri) 0%,var(--pri-dk) 55%,#1A237E 100%);color:#fff;padding:2rem 1.5rem;border-radius:var(--r-xl);margin-bottom:1.25rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;right:-80px;top:-80px;width:320px;height:320px;background:rgba(255,255,255,.04);border-radius:50%;pointer-events:none}
.hero::after{content:'';position:absolute;left:-40px;bottom:-60px;width:200px;height:200px;background:rgba(255,255,255,.03);border-radius:50%;pointer-events:none}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.hero-content{}
.hero-label{display:inline-block;background:rgba(255,255,255,.18);color:#fff;font-size:.72rem;font-weight:700;padding:.2rem .65rem;border-radius:999px;margin-bottom:.65rem;text-transform:uppercase;letter-spacing:.05em}
.hero-title{font-size:clamp(1.3rem,3vw,1.85rem);font-weight:800;line-height:1.2;margin-bottom:.6rem;color:#fff}
.hero-desc{font-size:.88rem;color:rgba(255,255,255,.82);max-width:540px;margin-bottom:1rem}
.hero-btns{display:flex;gap:.65rem;flex-wrap:wrap}
.btn-hero{display:inline-flex;align-items:center;gap:.38rem;padding:.58rem 1.2rem;border-radius:var(--r);font-weight:700;font-size:.88rem;transition:transform .2s,box-shadow .2s;text-decoration:none}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.22);text-decoration:none}
.btn-hw{background:#fff;color:var(--pri)}.btn-hw:hover{color:var(--pri)}
.btn-ho{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}.btn-ho:hover{background:rgba(255,255,255,.12);color:#fff}
.hero-stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.1rem}
.hero-stat strong{display:block;font-size:1.4rem;font-weight:800;color:#FFD54F}
.hero-stat span{font-size:.75rem;color:rgba(255,255,255,.78)}
.hero-poster{flex-shrink:0}
.hero-poster img{width:clamp(140px,18vw,210px);border-radius:var(--r-lg);box-shadow:0 8px 28px rgba(0,0,0,.28)}

/* ══════════════════════════════════
   SUBJECT GRID
   ══════════════════════════════════ */
.sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.85rem;margin-bottom:1.15rem}
.sub-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:.95rem;text-align:center;transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column;align-items:center;gap:.4rem;box-shadow:var(--shd)}
.sub-card:hover{box-shadow:var(--shd-lg);transform:translateY(-3px);text-decoration:none}
.sub-icon{width:48px;height:48px}
.sub-name{font-size:.88rem;font-weight:700;color:var(--txt)}
.sub-count{font-size:.74rem;color:var(--muted)}

/* ══════════════════════════════════
   DOC LIST
   ══════════════════════════════════ */
.doc-list{list-style:none;padding:0;margin:0}
.doc-list li{display:flex;align-items:flex-start;gap:.55rem;padding:.65rem 0;border-bottom:1px solid #f0f0f0}
.doc-list li:last-child{border-bottom:none}
.doc-icon{flex-shrink:0;margin-top:.1rem}
.doc-inf{flex:1;min-width:0}
.doc-title{font-size:.88rem;font-weight:600;color:var(--txt);line-height:1.35}
.doc-title a{color:var(--txt)}.doc-title a:hover{color:var(--pri)}
.doc-meta{font-size:.75rem;color:var(--muted);margin-top:.18rem}
.badge{display:inline-flex;align-items:center;font-size:.67rem;font-weight:700;padding:.1rem .42rem;border-radius:999px;background:var(--pri-lt);color:var(--pri);margin-left:.28rem;vertical-align:middle}
.badge.red{background:var(--acc-lt);color:var(--acc)}.badge.grn{background:var(--grn-lt);color:var(--grn)}.badge.org{background:var(--org-lt);color:var(--org)}.badge.yel{background:var(--yel-lt);color:#7B6000}

/* ══════════════════════════════════
   BUTTONS
   ══════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:.38rem;padding:.52rem 1rem;border-radius:var(--r);font-size:.86rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--pri);color:#fff}.btn-primary:hover{background:var(--pri-dk);color:#fff}
.btn-secondary{background:var(--grn);color:#fff}.btn-secondary:hover{background:#1B5E20;color:#fff}
.btn-accent{background:var(--acc);color:#fff}.btn-accent:hover{background:#C62828;color:#fff}
.btn-warn{background:var(--org);color:#fff}.btn-warn:hover{background:#BF360C;color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--pri);color:var(--pri)}.btn-outline:hover{background:var(--pri-lt)}
.btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--bdr)}.btn-ghost:hover{border-color:var(--pri);color:var(--pri)}
.btn-sm{padding:.3rem .7rem;font-size:.78rem}
.btn-lg{padding:.7rem 1.5rem;font-size:.95rem}
.btn-block{width:100%;justify-content:center}

/* ══════════════════════════════════
   FORMS
   ══════════════════════════════════ */
.form-group{margin-bottom:.9rem}
.form-label{display:block;font-size:.83rem;font-weight:600;color:var(--txt2);margin-bottom:.3rem}
.form-control{width:100%;padding:.55rem .82rem;border:1.5px solid var(--bdr);border-radius:var(--r);font-size:.9rem;color:var(--txt);background:#fff;transition:border-color .15s,box-shadow .15s}
.form-control:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(21,101,192,.1)}
.form-control::placeholder{color:var(--muted)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.form-hint{font-size:.75rem;color:var(--muted);margin-top:.25rem}

/* ══════════════════════════════════
   ALERTS
   ══════════════════════════════════ */
.alert{padding:.75rem 1rem;border-radius:var(--r);font-size:.88rem;margin-bottom:.9rem;border-left:4px solid;display:flex;align-items:flex-start;gap:.5rem}
.alert-error{background:var(--acc-lt);color:#B71C1C;border-color:var(--acc)}
.alert-success{background:var(--grn-lt);color:#1B5E20;border-color:var(--grn)}
.alert-info{background:var(--pri-lt);color:#0D47A1;border-color:var(--pri)}
.alert-warn{background:var(--org-lt);color:#BF360C;border-color:var(--org)}

/* ══════════════════════════════════
   AUTH PAGES
   ══════════════════════════════════ */
.auth-wrap{min-height:calc(100vh - 180px);display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem}
.auth-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:2rem 2rem 1.75rem;width:100%;max-width:420px;box-shadow:var(--shd-lg)}
.auth-card h2{text-align:center;color:var(--pri);margin-bottom:1.4rem;font-size:1.3rem}
.auth-logo{display:flex;justify-content:center;margin-bottom:.75rem}
.auth-footer{text-align:center;font-size:.84rem;color:var(--muted);margin-top:.9rem}
.auth-footer a{color:var(--pri);font-weight:600}

/* Admin profile dashboard (UI only) */
.admin-profile-page{min-height:100vh;background:#F5F7FB;display:flex;align-items:center;justify-content:center;padding:24px}
.admin-profile-card{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;max-width:720px;width:100%;background:#fff;border-radius:24px;padding:40px;box-shadow:0 15px 40px rgba(0,0,0,0.08)}
.admin-profile-card.show{opacity:1;transform:translateY(0)}
.admin-profile-avatar{width:80px;height:80px;border-radius:999px;border:4px solid #fff;box-shadow:0 10px 25px rgba(0,0,0,.12);background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;overflow:hidden}
.admin-profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.admin-profile-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(37,99,235,.08)}
.admin-profile-name{font-size:32px;font-weight:700;color:#111827;text-align:center;margin:0}
.admin-profile-email{font-size:14px;color:#6B7280;text-align:center;margin-top:4px}
.admin-profile-title{font-size:24px;font-weight:700;color:#1E293B;text-align:left;margin-top:30px;margin-bottom:30px}
.admin-profile-form{margin:0}
.admin-profile-grid{display:grid;grid-template-columns:1fr;gap:22px}
.admin-field{width:100%}
.admin-label{font-size:14px;font-weight:600;color:#374151;margin-bottom:8px;display:block}
.admin-input-with-icon{position:relative}
.admin-input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#2563EB;display:flex;align-items:center;justify-content:center}
.admin-input{height:56px;padding:0 18px;padding-left:44px;font-size:16px;border:1px solid #E5E7EB;border-radius:14px;background:#fff;transition:0.3s;width:100%}
.admin-input:focus{border-color:#2563EB;box-shadow:0 0 0 4px rgba(37,99,235,.15);outline:none}
.admin-input::placeholder{color:#9CA3AF}
.admin-profile-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px}
.admin-btn{height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:14px 30px;font-weight:600;transition:0.3s;text-decoration:none}
.admin-btn-primary{background:linear-gradient(135deg,#2563EB,#1D4ED8);color:#fff;box-shadow:0 10px 25px rgba(37,99,235,.30);border:1px solid transparent}
.admin-btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(37,99,235,.45)}
.admin-btn-secondary{background:#fff;border:1px solid #D1D5DB;color:#374151}
.admin-btn-secondary:hover{background:#F3F4F6}

@media(max-width:520px){
  .admin-profile-card{max-width:95%;padding:24px}
  .admin-profile-actions{flex-direction:column;align-items:stretch}
  .admin-btn{width:100%}
}


/* Login modern */
.login-surface{width:100%;max-width:980px;display:grid;grid-template-columns:1fr 420px;gap:1rem;align-items:stretch}
.login-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:2.1rem 1.9rem;background:linear-gradient(135deg,#1565C0,#0D47A1);color:#fff;min-height:520px}
.login-glow{position:absolute;inset:-60px;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.25),transparent 38%),radial-gradient(circle at 80% 40%,rgba(255,213,79,.22),transparent 42%);pointer-events:none}
.login-logo{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.login-logo svg{opacity:.95}
.login-title h1{margin:.9rem 0 .35rem;font-size:1.65rem;letter-spacing:-.02em}
.login-title p{margin:0;opacity:.86;line-height:1.55}
.login-card{background:rgba(255,255,255,.98);border:1px solid var(--bdr);border-radius:var(--r-xl);box-shadow:var(--shd-lg);padding:1.7rem 1.5rem}
.login-head h2{margin:0;font-size:1.25rem;color:var(--pri)}
.login-sub{margin:.25rem 0 1.1rem;color:var(--muted);font-size:.86rem}
.field{margin-bottom:1rem}
.field-label{display:block;font-size:.84rem;font-weight:700;color:var(--txt2);margin-bottom:.35rem}
.field-label-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.35rem}
.field-hint{min-height:18px;font-size:.78rem;margin-top:.35rem}
.link-muted{color:var(--muted);font-size:.82rem;font-weight:700;text-decoration:none}
.link-muted:hover{color:var(--pri);text-decoration:underline}
.pw-wrap{display:flex;align-items:center;gap:.5rem}
.pw-toggle{width:46px;height:40px;border-radius:12px;border:1.5px solid var(--bdr);background:#fff;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.pw-toggle:hover{border-color:var(--pri)}
.row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.2rem 0 1rem}
.check{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--txt2)}
.check input{width:18px;height:18px}
.login-submit{position:relative;overflow:hidden}
.login-submit:disabled{opacity:.85;cursor:not-allowed}
.spinner{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff}
.spinner.spin{display:inline-block;animation:spin .9s linear infinite;margin-right:.55rem}
@keyframes spin{to{transform:rotate(360deg)}}
.login-foot{margin-top:1rem;color:var(--muted);font-size:.84rem;display:flex;gap:.35rem;justify-content:center;flex-wrap:wrap}
.login-foot a{color:var(--pri);font-weight:800}
.login-bottom{margin-top:1rem;text-align:center}
.login-toast{animation:toastIn .3s ease both}
@keyframes toastIn{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:900px){
  .login-surface{grid-template-columns:1fr;}
  .login-hero{min-height:auto;padding:1.6rem 1.2rem}
}


/* ══════════════════════════════════
   QUIZ / ĐỀ THI
   ══════════════════════════════════ */
.quiz-header{background:var(--pri);color:#fff;padding:.9rem 1.15rem;border-radius:var(--r) var(--r) 0 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.quiz-header h2{color:#fff;margin:0;font-size:.95rem}
.quiz-timer{background:rgba(255,255,255,.18);padding:.3rem .75rem;border-radius:var(--r);font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:.32rem}
.quiz-timer.warn{background:var(--acc)}
.quiz-body{padding:1.15rem}
.quiz-prog{height:5px;background:var(--bdr);border-radius:999px;margin-bottom:1.15rem;overflow:hidden}
.quiz-prog-bar{height:100%;background:var(--pri);border-radius:999px;transition:width .3s}
.quiz-qnum{color:var(--pri);font-size:.78rem;font-weight:700;margin-bottom:.3rem}
.quiz-q{font-size:.95rem;font-weight:600;margin-bottom:.9rem;line-height:1.55}
.quiz-opts{display:flex;flex-direction:column;gap:.45rem}
.quiz-opt{display:flex;align-items:flex-start;gap:.65rem;padding:.65rem .9rem;border:1.5px solid var(--bdr);border-radius:var(--r);cursor:pointer;transition:all .15s;font-size:.88rem;background:#fff;text-align:left;width:100%}
.quiz-opt:hover{border-color:var(--pri);background:var(--pri-lt)}
.quiz-opt.sel{border-color:var(--pri);background:var(--pri-lt)}
.quiz-opt.ok{border-color:var(--grn);background:var(--grn-lt);color:var(--grn)}
.quiz-opt.bad{border-color:var(--acc);background:var(--acc-lt);color:var(--acc)}
.q-ltr{flex-shrink:0;width:24px;height:24px;background:var(--bdr);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;transition:background .15s}
.quiz-opt.sel .q-ltr{background:var(--pri);color:#fff}
.quiz-opt.ok .q-ltr{background:var(--grn);color:#fff}
.quiz-opt.bad .q-ltr{background:var(--acc);color:#fff}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.15rem;padding-top:.9rem;border-top:1px solid var(--bdr);flex-wrap:wrap;gap:.65rem}
.quiz-result{text-align:center;padding:1.5rem}
.quiz-score{font-size:2.8rem;font-weight:800;color:var(--pri)}
.quiz-tabs{display:flex;border-bottom:2px solid var(--bdr);margin-bottom:1.15rem;gap:0;overflow-x:auto}
.quiz-tab{padding:.5rem .9rem;font-size:.84rem;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;white-space:nowrap;transition:all .15s}
.quiz-tab.active{color:var(--pri);border-bottom-color:var(--pri)}
.quiz-pnl{display:none}.quiz-pnl.active{display:block}

/* Anti-screenshot overlay */
.anti-ss{
  position:fixed;inset:0;z-index:10000;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(21,101,192,.015) 2px,rgba(21,101,192,.015) 4px);
}
.exam-mode *{user-select:none;-webkit-user-select:none}
.exam-mode{
  -webkit-touch-callout:none;
}

/* ══════════════════════════════════
   PERIODIC TABLE
   ══════════════════════════════════ */
.pt-wrap{overflow-x:auto;background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:.85rem}
.pt-grid{display:grid;grid-template-columns:repeat(18,minmax(42px,1fr));gap:2px;min-width:820px}
.elem{padding:.28rem .12rem;border-radius:3px;text-align:center;cursor:pointer;font-size:.64rem;border:1px solid rgba(0,0,0,.07);transition:transform .15s,box-shadow .12s}
.elem:hover{transform:scale(1.15);z-index:5;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.el-num{font-size:.56rem;color:rgba(0,0,0,.5)}
.el-sym{font-size:.86rem;font-weight:700}
.el-mass{font-size:.54rem;color:rgba(0,0,0,.48)}
.el-alkali{background:#FFCDD2}.el-alkaline{background:#FFE0B2}.el-transition{background:#FFF9C4}
.el-post{background:#C8E6C9}.el-metalloid{background:#B2EBF2}.el-nonmetal{background:#BBDEFB}
.el-halogen{background:#E1BEE7}.el-noble{background:#FFCDD2}.el-lanthanide{background:#F8BBD0}.el-actinide{background:#D7CCC8}

/* ══════════════════════════════════
   FLASHCARD
   ══════════════════════════════════ */
.fc-area{perspective:1000px;min-height:190px}
.fc{width:100%;min-height:190px;position:relative;transform-style:preserve-3d;transition:transform .48s;cursor:pointer}
.fc.flip{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--r-lg);padding:1.35rem;text-align:center;border:1.5px solid var(--bdr)}
.fc-front{background:linear-gradient(135deg,var(--pri),var(--pri-dk));color:#fff}
.fc-back{background:var(--grn-lt);transform:rotateY(180deg);border-color:var(--grn)}
.fc-word{font-size:1.7rem;font-weight:800;margin-bottom:.45rem}
.fc-ipa{font-size:.86rem;opacity:.8}
.fc-mean{font-size:1.1rem;font-weight:700}
.fc-ex{font-size:.82rem;color:var(--muted);margin-top:.42rem}

/* ══════════════════════════════════
   THANH TOÁN
   ══════════════════════════════════ */
.pay-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:1.75rem;box-shadow:var(--shd-lg);max-width:520px;margin:0 auto}
.pay-bank{background:linear-gradient(135deg,#1565C0,#0D47A1);border-radius:var(--r-lg);padding:1.35rem;color:#fff;margin-bottom:1.25rem;position:relative;overflow:hidden}
.pay-bank::before{content:'';position:absolute;right:-30px;top:-30px;width:140px;height:140px;background:rgba(255,255,255,.06);border-radius:50%}
.pay-bank::after{content:'';position:absolute;left:-20px;bottom:-40px;width:120px;height:120px;background:rgba(255,255,255,.04);border-radius:50%}
.pay-bank-inner{position:relative;z-index:1}
.pay-bank-name{font-size:.78rem;opacity:.8;margin-bottom:.2rem}
.pay-bank-val{font-size:1.05rem;font-weight:700}
.pay-stk{font-size:1.5rem;font-weight:800;letter-spacing:.12em;margin:.55rem 0;color:#FFD54F}
.pay-holder{font-size:.9rem;font-weight:600;opacity:.9}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.15rem;background:var(--bg);border-radius:var(--r);margin-bottom:1.1rem}
.qr-img{width:160px;height:160px;border:3px solid var(--bdr);border-radius:var(--r);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qr-label{font-size:.8rem;color:var(--muted);text-align:center}
.pay-steps{list-style:none;padding:0;counter-reset:step}
.pay-steps li{counter-increment:step;display:flex;align-items:flex-start;gap:.65rem;padding:.55rem 0;border-bottom:1px solid #f0f0f0;font-size:.87rem}
.pay-steps li:last-child{border-bottom:none}
.pay-steps li::before{content:counter(step);flex-shrink:0;width:22px;height:22px;background:var(--pri);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;margin-top:.1rem}

/* ══════════════════════════════════
   ADMIN LAYOUT
   ══════════════════════════════════ */
.admin-wrap{flex:1;display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - var(--hdr-h))}
.admin-sidebar{background:#1A237E;padding:1rem 0;position:sticky;top:var(--hdr-h);height:calc(100vh - var(--hdr-h));overflow-y:auto;scrollbar-width:thin}
.admin-sidebar::-webkit-scrollbar{width:4px}.admin-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
.admin-logo{padding:.85rem 1.1rem 1rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:.5rem}
.admin-logo span{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.06em}
.adm-nav-item{display:flex;align-items:center;gap:.55rem;padding:.62rem 1.1rem;color:rgba(255,255,255,.78);font-size:.84rem;font-weight:500;transition:all .15s;border-left:3px solid transparent;text-decoration:none}
.adm-nav-item:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.adm-nav-item.active{background:rgba(255,255,255,.12);color:#FFD54F;border-left-color:#FFD54F;font-weight:700}
.adm-nav-sep{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em;padding:.65rem 1.1rem .25rem}
.admin-content{background:var(--bg);padding:1.25rem;overflow-x:hidden;min-width:0}
.admin-pg-title{font-size:1.1rem;font-weight:800;color:var(--txt);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem}
.adm-stat{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:1rem;display:flex;align-items:center;gap:.8rem;box-shadow:var(--shd)}
.adm-ico{width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.adm-ico.blue{background:var(--pri-lt)}.adm-ico.grn{background:var(--grn-lt)}.adm-ico.red{background:var(--acc-lt)}.adm-ico.org{background:var(--org-lt)}
.adm-val{font-size:1.4rem;font-weight:800;color:var(--txt);line-height:1}
.adm-lbl{font-size:.76rem;color:var(--muted);margin-top:.18rem}

/* Data table */
.dt{width:100%;border-collapse:collapse;font-size:.84rem}
.dt th{background:var(--bg);font-weight:700;text-align:left;padding:.58rem .85rem;border-bottom:2px solid var(--bdr);color:var(--txt2);white-space:nowrap;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.dt td{padding:.58rem .85rem;border-bottom:1px solid #f0f0f0;vertical-align:middle}
.dt tr:last-child td{border-bottom:none}
.dt tbody tr:hover{background:var(--pri-lt)}
.dt-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--bdr)}

/* Admin form card */
.adm-form-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:1.25rem;box-shadow:var(--shd)}
.adm-form-card h3{font-size:1rem;color:var(--txt);margin-bottom:1rem;padding-bottom:.65rem;border-bottom:2px solid var(--pri)}

/* Status badges */
.status{display:inline-flex;align-items:center;gap:.28rem;font-size:.72rem;font-weight:700;padding:.18rem .55rem;border-radius:999px}
.status-ok{background:var(--grn-lt);color:var(--grn)}
.status-warn{background:var(--org-lt);color:var(--org)}
.status-err{background:var(--acc-lt);color:var(--acc)}
.status-info{background:var(--pri-lt);color:var(--pri)}

/* Practice page */
.prac-q{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:1rem;margin-bottom:.85rem}
.prac-q-num{font-size:.75rem;font-weight:700;color:var(--pri);margin-bottom:.3rem}
.prac-q-text{font-size:.9rem;font-weight:600;margin-bottom:.65rem}
.prac-opts{display:flex;flex-direction:column;gap:.35rem}
.prac-opt{padding:.5rem .8rem;border-radius:var(--r);font-size:.86rem;text-align:left;border:1.5px solid var(--bdr);background:#fff;width:100%;display:flex;align-items:flex-start;gap:.55rem;cursor:pointer}
.prac-opt:hover{border-color:var(--pri);background:var(--pri-lt)}
.prac-opt.show-ok{border-color:var(--grn);background:var(--grn-lt);color:var(--grn)}
.prac-opt.show-bad{border-color:var(--acc);background:var(--acc-lt);color:var(--acc)}
.prac-explain{margin-top:.65rem;padding:.65rem .85rem;background:var(--yel-lt);border-radius:var(--r);font-size:.82rem;border-left:3px solid var(--yel);display:none}
.prac-explain.show{display:block}

/* Grade table */
.grade-row-pass{background:var(--grn-lt)!important}
.grade-row-fail{background:var(--acc-lt)!important}

/* Class list */
.cls-tag{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .7rem;background:var(--pri-lt);color:var(--pri);border-radius:999px;font-size:.78rem;font-weight:600;margin:.18rem}
.cls-tag.active{background:var(--grn-lt);color:var(--grn)}
.cls-tag.pending{background:var(--org-lt);color:var(--org)}

/* PDF card */
.pdf-card{display:flex;align-items:center;gap:.75rem;padding:.75rem;border:1px solid var(--bdr);border-radius:var(--r);background:var(--sur);margin-bottom:.6rem}
.pdf-icon{flex-shrink:0;width:40px;height:40px;background:var(--acc-lt);border-radius:var(--r);display:flex;align-items:center;justify-content:center}
.pdf-info{flex:1;min-width:0}
.pdf-name{font-size:.88rem;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-meta{font-size:.74rem;color:var(--muted)}

/* ══════════════════════════════════
   FOOTER
   ══════════════════════════════════ */
.site-footer{background:#1A237E;color:rgba(255,255,255,.82);margin-top:auto}
.footer-main{max-width:1240px;margin:0 auto;padding:2.2rem 1rem 1.5rem;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.fc-col h4{color:#fff;font-size:.9rem;font-weight:700;margin-bottom:.75rem;padding-bottom:.42rem;border-bottom:1px solid rgba(255,255,255,.12)}
.fc-col p{font-size:.8rem;line-height:1.65}
.fc-col a{display:block;color:rgba(255,255,255,.72);font-size:.8rem;margin-bottom:.35rem;transition:color .15s}
.fc-col a:hover{color:#fff;text-decoration:none}
.footer-bot{background:#0D1B6E;padding:.75rem 1rem;text-align:center;font-size:.76rem;color:rgba(255,255,255,.45)}
.footer-bot a{color:rgba(255,255,255,.45)}

/* ══════════════════════════════════
   MISC UTILS
   ══════════════════════════════════ */
.text-center{text-align:center}.text-muted{color:var(--muted)}.text-pri{color:var(--pri)}.text-acc{color:var(--acc)}.text-grn{color:var(--grn)}
.text-sm{font-size:.84rem}.text-xs{font-size:.74rem}.fw-bold{font-weight:700}.fw-500{font-weight:500}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.d-flex{display:flex}.align-c{align-items:center}.gap-1{gap:.5rem}.gap-2{gap:.85rem}.flex-wrap{flex-wrap:wrap}
.w-100{width:100%}.hidden{display:none!important}
.divider{height:1px;background:var(--bdr);margin:.9rem 0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.ad-box{background:#f8f8f8;border:1px dashed #ccc;border-radius:var(--r);padding:.85rem;text-align:center;font-size:.75rem;color:var(--muted);margin-bottom:.85rem}
.tool-box{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:1rem}
.tool-box h3{font-size:.9rem;margin-bottom:.65rem}
.tool-res{margin-top:.65rem;padding:.65rem;background:var(--pri-lt);border-radius:var(--r);font-size:.86rem;color:var(--pri-dk);font-weight:600;display:none}
.tool-res.show{display:block}.tool-res.err{background:var(--acc-lt);color:var(--acc)}
.chip{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-size:.74rem;font-weight:600;background:var(--pri-lt);color:var(--pri);margin:.12rem}
.chip.red{background:var(--acc-lt);color:var(--acc)}.chip.grn{background:var(--grn-lt);color:var(--grn)}

/* Profile */
.prof-hdr{display:flex;align-items:center;gap:1rem;padding:1.35rem;background:linear-gradient(135deg,var(--pri),var(--pri-dk));border-radius:var(--r) var(--r) 0 0;color:#fff}
.prof-av{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.prof-av img{width:100%;height:100%;object-fit:cover}
.prof-info h2{color:#fff;margin:0;font-size:1.1rem}.prof-info p{color:rgba(255,255,255,.78);font-size:.84rem;margin:0}
.prof-body{padding:1.35rem}

/* 404 */
.not-found{text-align:center;padding:3.5rem 1rem}
.not-found-num{font-size:4.5rem;font-weight:800;color:var(--bdr);margin:0}

/* ══════════════════════════════════
   RESPONSIVE - MOBILE FIRST FIX
   ══════════════════════════════════ */

/* Tablet */
@media(max-width:1024px){
  .footer-main{grid-template-columns:1fr 1fr;gap:1.5rem}
  .admin-grid{grid-template-columns:1fr 1fr}
  .admin-wrap{grid-template-columns:200px 1fr}
  .admin-sidebar{width:200px}
}

/* Small tablet / large phone */
@media(max-width:900px){
  .page-body{grid-template-columns:1fr}
  .sidebar{position:static}
  .g2,.g3{grid-template-columns:1fr}
  .admin-wrap{grid-template-columns:1fr}
  .admin-sidebar{display:none} /* replaced by mobile admin nav */
}

/* Phone */
@media(max-width:768px){
  html{font-size:14px}
  :root{--hdr-h:56px}

  /* Hide desktop elements */
  .hdr-top{display:none}
  .hdr-search{display:none}
  .hdr-actions{display:none}
  .nav-bar{display:none}
  .mob-btn{display:flex}

  /* Header mobile */
  .hdr-main{padding:.5rem .85rem;gap:.6rem}
  .brand-sub{display:none}
  .brand-name{font-size:.95rem}
  .brand-logo{width:32px;height:32px}

  /* Hero */
  .hero{padding:1.35rem 1rem}
  .hero-inner{grid-template-columns:1fr}
  .hero-poster{display:none}
  .hero-title{font-size:1.25rem}
  .hero-desc{font-size:.84rem}
  .hero-stats{gap:1rem}
  .hero-stat strong{font-size:1.15rem}

  /* Subject grid */
  .sub-grid{grid-template-columns:repeat(2,1fr);gap:.65rem}

  /* Footer */
  .footer-main{grid-template-columns:1fr;gap:1.1rem}

  /* Admin */
  .admin-grid{grid-template-columns:1fr 1fr}

  /* Page padding */
  .page-body,.page-full{padding:.85rem .75rem}

  /* Tables scroll */
  .dt-wrap{font-size:.78rem}
  .dt th,.dt td{padding:.45rem .65rem}
}

/* Small phone */
@media(max-width:480px){
  html{font-size:13.5px}
  .sub-grid{grid-template-columns:repeat(2,1fr)}
  .hero-btns{flex-direction:column;gap:.5rem}
  .btn-hero{justify-content:center}
  .auth-card{padding:1.4rem 1.1rem}
  .form-row{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:1fr}
  .quiz-tab{padding:.45rem .65rem;font-size:.78rem}
  .hdr-main{padding:.45rem .65rem}
  .card,.adm-form-card{padding:.9rem}
}