/* Thành phần dùng chung (CSS thường — Tailwind CDN không xử lý @apply trong file ngoài) */
:root {
  --brand: #1E6FD9; --cta: #22A447; --accent: #F7931E; --teal: #145C7A; --ink: #1F3B73;
  --page: #F4F8FC; --line: #E5ECF5;
}
html { scroll-behavior: smooth; }
body { background-image: radial-gradient(circle at 1px 1px, rgba(30,111,217,.05) 1px, transparent 0); background-size: 22px 22px; }
[x-cloak], .hidden-js { display: none !important; }

/* ---- header ---- */
.nav-link { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .7rem; border-radius: 12px; white-space: nowrap; transition: background .15s, color .15s; }
.nav-link:hover { background: var(--page); color: var(--brand); }
.nav-link.is-active { background: #E6F0FF; color: var(--brand); }
.dropdown-panel { position: absolute; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 40px -16px rgba(31,59,115,.28); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s; z-index: 50; }
.dropdown-panel.mega { position: fixed; top: 72px; left: 50%; transform: translate(-50%, 6px); }
[data-dropdown].open > .dropdown-panel, [data-dropdown]:hover > .dropdown-panel, [data-dropdown]:focus-within > .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }
[data-dropdown].open > .dropdown-panel.mega, [data-dropdown]:hover > .dropdown-panel.mega, [data-dropdown]:focus-within > .dropdown-panel.mega { transform: translate(-50%, 0); }
@media (hover: none) { [data-dropdown]:hover > .dropdown-panel { opacity: 0; visibility: hidden; } [data-dropdown].open > .dropdown-panel { opacity: 1; visibility: visible; } }
.menu-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 12px; color: var(--ink); font-size: 14px; }
.menu-item:hover { background: var(--page); color: var(--brand); }
.tool-dot { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; }
.m-link { display: flex; align-items: center; gap: .65rem; padding: .8rem .9rem; border-radius: 12px; font-weight: 500; }
.m-link:hover { background: var(--page); }
details > summary::-webkit-details-marker { display: none; }

/* ---- nút ---- */
.btn-cta, .btn-primary, .btn-outline, .btn-ghost, .btn-white { display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border-radius: 999px; font-weight: 700; font-size: 14px; transition: transform .12s, background .15s, box-shadow .15s; white-space: nowrap; }
.btn-cta { background: var(--cta); color: #fff; box-shadow: 0 8px 18px -8px rgba(34,164,71,.7); }
.btn-cta:hover { background: #1C8D3C; transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 18px -8px rgba(30,111,217,.7); }
.btn-primary:hover { background: #1A60BD; transform: translateY(-1px); }
.btn-outline { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-white { background: #fff; color: var(--teal); }
.btn-white:hover { transform: translateY(-1px); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.7); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-sm { height: 2.25rem; padding: 0 1rem; font-size: 13px; }
.btn-md { height: 2.75rem; padding: 0 1.4rem; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ---- card / tiêu đề ---- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 2px 10px -4px rgba(31,59,115,.12); }
.card-hover { transition: transform .18s, box-shadow .18s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(31,59,115,.3); }
.section-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .25rem .7rem; font-size: 12px; font-weight: 600; }
.chip-tab { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .45rem 1rem; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.chip-tab.on, .chip-tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.footer-h { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--ink); margin-bottom: .9rem; }
.footer-ic { width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid; place-items: center; background: #E6F0FF; color: var(--brand); }
.footer-list { display: grid; gap: .55rem; font-size: 14px; color: #475569; }
.footer-list a { display: inline-flex; gap: .4rem; }
.footer-list a::before { content: "›"; color: #94a3b8; }
.footer-list a:hover { color: var(--brand); }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.input { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: .6rem .9rem; font-size: 14px; outline: none; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30,111,217,.15); }
.errorlist { color: #dc2626; font-size: 12px; margin-top: .25rem; }

/* ---- hero ---- */
.hero { position: relative; background: linear-gradient(180deg, #DDEEFF 0%, #EAF4FF 55%, #F4F8FC 100%); overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(234,244,255,.97) 0%, rgba(234,244,255,.85) 34%, rgba(234,244,255,0) 60%); }
@media (max-width: 1023px) { .hero-fade { background: linear-gradient(180deg, rgba(234,244,255,.96) 0%, rgba(234,244,255,.9) 55%, rgba(234,244,255,.55) 100%); } }

/* ---- nội dung bài học ---- */
.prose-lesson { color: #334155; line-height: 1.75; font-size: 16px; }
.prose-lesson h2 { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin: 1.6rem 0 .6rem; }
.prose-lesson h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 1.3rem 0 .5rem; }
.prose-lesson p { margin: .7rem 0; }
.prose-lesson ul { list-style: disc; padding-left: 1.4rem; margin: .7rem 0; }
.prose-lesson ol { list-style: decimal; padding-left: 1.4rem; margin: .7rem 0; }
.prose-lesson li { margin: .25rem 0; }
.prose-lesson img { border-radius: 14px; margin: 1rem 0; max-width: 100%; height: auto; }
.prose-lesson table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 15px; }
.prose-lesson th, .prose-lesson td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.prose-lesson th { background: var(--page); }
.prose-lesson blockquote { border-left: 4px solid var(--brand); background: #EEF5FE; padding: .7rem 1rem; border-radius: 0 12px 12px 0; margin: 1rem 0; }
.prose-lesson a { color: var(--brand); text-decoration: underline; }
.prose-lesson .note-box { background: #FFF7EC; border: 1px dashed #F7B25C; border-radius: 14px; padding: .9rem 1rem; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .3rem 0; }

/* ---- câu hỏi ---- */
.opt { display: flex; align-items: center; gap: .75rem; border: 1.5px solid var(--line); border-radius: 14px; padding: .8rem 1rem; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.opt:hover { border-color: #9cc3f3; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .opt-key { width: 1.9rem; height: 1.9rem; border-radius: 999px; background: #EEF2F8; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--ink); flex-shrink: 0; }
.opt:has(input:checked) { border-color: var(--brand); background: #EEF5FE; }
.opt:has(input:checked) .opt-key { background: var(--brand); color: #fff; }
.opt.is-right { border-color: #22A447 !important; background: #EAF8EE !important; }
.opt.is-wrong { border-color: #EF4444 !important; background: #FEF0F0 !important; }
.tf-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 4.2rem; height: 2.2rem; border-radius: 10px; border: 1.5px solid var(--line); font-weight: 700; font-size: 13px; cursor: pointer; }
.tf-btn input { position: absolute; opacity: 0; }
.tf-btn:has(input:checked) { background: var(--brand); color: #fff; border-color: var(--brand); }
.blank-input { display: inline-block; min-width: 7rem; border: 0; border-bottom: 2px dashed var(--brand); background: #EEF5FE; border-radius: 6px 6px 0 0; padding: .1rem .5rem; margin: 0 .2rem; font-weight: 600; color: var(--ink); outline: none; }
.blank-input:focus { border-bottom-style: solid; background: #fff; }
.palette-btn { width: 2.4rem; height: 2.4rem; border-radius: 10px; border: 1.5px solid var(--line); font-weight: 700; font-size: 13px; display: grid; place-items: center; background: #fff; color: var(--ink); }
.palette-btn.answered { background: var(--brand); border-color: var(--brand); color: #fff; }
.palette-btn.flagged { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---- tiện ích ---- */
.pt-cell { border-radius: 8px; padding: 3px 2px; text-align: center; cursor: pointer; transition: transform .1s; min-width: 0; }
.pt-cell:hover { transform: scale(1.12); z-index: 2; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
.flip { perspective: 1000px; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; }
.flip-back { transform: rotateY(180deg); }

img[loading="lazy"] { background: #EEF2F8; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---- trang tài khoản (allauth) ---- */
.auth-card h1 { font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: .4rem; }
.auth-card h2 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 1rem 0 .4rem; }
.auth-card p { color: #64748b; font-size: 14px; margin: .4rem 0; }
.auth-card a { color: var(--brand); font-weight: 600; }
.auth-card form { display: grid; gap: .9rem; margin-top: 1rem; }
.auth-card label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password], .auth-card select {
  width: 100%; border-radius: 12px; border: 1px solid var(--line); padding: .65rem .9rem; font-size: 14px; background: #fff; outline: none; }
.auth-card input:focus, .auth-card select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30,111,217,.15); }
.auth-card input[type=checkbox] { margin-right: .4rem; }
.auth-card button[type=submit], .auth-card button:not([type]) { height: 2.9rem; border-radius: 999px; background: var(--cta); color: #fff; font-weight: 700; }
.auth-card button[type=submit]:hover { background: #1C8D3C; }
.auth-card .helptext, .auth-card small { font-size: 12px; color: #94a3b8; }
.auth-card ul.errorlist, .auth-card .errorlist { color: #dc2626; font-size: 12px; }
.auth-card hr { border-color: var(--line); margin: 1rem 0; }
.prose-lesson pre { background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: .9rem 1rem; overflow-x: auto; font-size: 14px; }

/* phần tử con của grid không được nở theo nội dung tối thiểu (tránh tràn ngang trên mobile) */
.grid > * { min-width: 0; }
/* 1280–1439px: menu chính bỏ icon đầu mục cho vừa một hàng */
@media (min-width: 1280px) and (max-width: 1439px) {
  nav[aria-label="Menu chính"] .nav-link > svg:first-child { display: none; }
  nav[aria-label="Menu chính"] .nav-link { padding: .5rem .55rem; }
}