/* ============================================================
 * Ôn thi YKI — /koe/ (grid bộ đề) + /koe/{id}/ (detail)
 * ============================================================ */
.koe, .koe-detail { max-width: 1200px; margin: 0 auto; padding: 16px 22px 48px; color: #0f172a; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

.koe-top, .koe-d-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.koe-back { width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid #e2e8f0; display: inline-flex; align-items: center; justify-content: center; color: #475569; text-decoration: none; flex-shrink: 0; transition: all 120ms; }
.koe-back:hover { background: #f8fafc; color: #0f172a; }
.koe-h1 { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.025em; margin: 0; }

/* level tabs */
.koe-levels { display: flex; gap: 8px; margin-bottom: 14px; }
.koe-level { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: #475569; cursor: pointer; transition: all 120ms; }
.koe-level:hover { background: #f8fafc; }
.koe-level-dot { width: 10px; height: 10px; border-radius: 999px; }
.koe-dot-a2 { background: #10b981; }
.koe-dot-b1 { background: #f59e0b; }
.koe-level-on { color: #fff; border-color: transparent; }
.koe-level-on:has(.koe-dot-a2) { background: #10b981; }
.koe-level-on:has(.koe-dot-b1) { background: #f59e0b; }
.koe-level-on .koe-level-dot { background: #fff; }

/* banner */
.koe-banner { background: linear-gradient(135deg, #fef9c3, #fef3c7); border: 1px solid #fde68a; border-radius: 14px; padding: 14px 20px; margin-bottom: 14px; font-size: 13px; color: #854d0e; line-height: 1.5; }
.koe-banner[hidden] { display: none; }
.koe-banner strong { color: #713f12; display: inline-block; margin-right: 6px; }
.koe-banner span { color: #a16207; }

/* 2 info cards */
.koe-cards-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; }
.koe-info { display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px 20px; font: inherit; cursor: pointer; transition: all 130ms; }
.koe-info-tips { background: linear-gradient(135deg, #ede9fe, #f5f3ff); border-color: #ddd6fe; }
.koe-info-notes { background: linear-gradient(135deg, #fef9c3, #fffbeb); border-color: #fde68a; }
.koe-info:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,23,42,0.06); }
.koe-info-ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.koe-info-txt { display: flex; flex-direction: column; }
.koe-info-txt b { font-size: 14px; font-weight: 800; color: #0f172a; }
.koe-info-txt span { font-size: 12px; color: #64748b; margin-top: 1px; }
.koe-info-tips b { color: #6d28d9; }
.koe-info-notes b { color: #b45309; }

/* expand panels */
.koe-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; }
.koe-panel[hidden] { display: none; }
.koe-panel-h { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.koe-tips-list { margin: 0 0 12px; padding-left: 20px; font-size: 13px; color: #475569; line-height: 1.8; }
.koe-skill-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.koe-skill-mini-item { font-size: 12px; color: #64748b; background: #f8fafc; border-radius: 9px; padding: 9px 12px; }
.koe-skill-mini-item span { color: #0f172a; }
.koe-saved-note { font-size: 12px; font-weight: 600; color: #059669; }
.koe-notes { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.6; color: #0f172a; resize: vertical; outline: none; }
.koe-notes:focus { border-color: #fcd34d; box-shadow: 0 0 0 3px rgba(245,158,11,0.12); }

/* sets grid */
.koe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.koe-grid[hidden] { display: none; }
.koe-set { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; text-decoration: none; color: inherit; transition: all 130ms; }
.koe-set:hover { border-color: #c4b5fd; box-shadow: 0 6px 18px rgba(15,23,42,0.07); transform: translateY(-2px); color: inherit; text-decoration: none; }
.koe-set-head { display: flex; align-items: flex-start; gap: 11px; }
.koe-set-ic { width: 40px; height: 40px; border-radius: 11px; background: #f8fafc; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.koe-set-txt { flex: 1; min-width: 0; }
.koe-set-fi { font-size: 14.5px; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; }
.koe-set-vi { font-size: 12px; color: #64748b; margin-top: 1px; }
.koe-set-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.koe-lv { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.koe-lv-a2 { background: #d1fae5; color: #065f46; }
.koe-lv-b1 { background: #fef3c7; color: #92400e; }
.koe-yki { font-size: 9.5px; font-weight: 800; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.koe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.koe-chip { font-size: 11px; font-weight: 700; color: #475569; background: #f8fafc; border: 1px solid #f1f5f9; padding: 4px 9px; border-radius: 7px; }

/* ============ DETAIL ============ */
.koe-d-headtext { min-width: 0; }
.koe-d-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.koe-d-ic { font-size: 26px; }
.koe-d-title { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em; margin: 0; }
.koe-d-vi { font-size: 13px; color: #64748b; margin-top: 3px; }

.koe-d-vocab { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.koe-d-vocab-h { font-size: 12.5px; font-weight: 800; color: #0f172a; margin-bottom: 9px; }
.koe-d-vocab-list { display: flex; flex-wrap: wrap; gap: 7px; }
.koe-vchip { font-size: 12.5px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; padding: 5px 11px; border-radius: 8px; }
.koe-vchip b { color: #1d4ed8; }

.koe-d-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.koe-part { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px 18px; border-top: 3px solid #cbd5e1; display: flex; flex-direction: column; }
.koe-part-noi { border-top-color: #db2777; }
.koe-part-nghe { border-top-color: #d97706; }
.koe-part-doc { border-top-color: #059669; }
.koe-part-viet { border-top-color: #2563eb; }
.koe-part-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; }
.koe-part-ic { width: 40px; height: 40px; border-radius: 11px; background: #f8fafc; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.koe-part-name { font-size: 14.5px; font-weight: 900; }
.koe-part-fi { font-size: 11.5px; color: #94a3b8; font-style: italic; font-weight: 600; }
.koe-part-desc { font-size: 12px; color: #64748b; line-height: 1.45; margin-top: 2px; }
.koe-part-body { flex: 1; margin-bottom: 12px; }
.koe-task-label { font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 7px; }
.koe-reag { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; }
.koe-reag-vi { font-size: 12.5px; color: #475569; font-weight: 600; }
.koe-reag-fi { font-size: 13px; font-weight: 700; color: #0f172a; margin-top: 4px; }
.koe-reag-tr { font-size: 11.5px; color: #94a3b8; font-weight: 500; font-style: italic; }
.koe-task-prompt { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: #1e40af; line-height: 1.5; }
.koe-task-soon { font-size: 12.5px; color: #94a3b8; font-style: italic; background: #f8fafc; border-radius: 10px; padding: 12px 14px; }
.koe-part-link { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 8px 14px; background: #f1f5f9; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #2563eb; text-decoration: none; transition: all 120ms; }
.koe-part-link:hover { background: #2563eb; color: #fff; text-decoration: none; }

@media (max-width: 820px) {
	.koe-cards-2 { grid-template-columns: 1fr; }
	.koe-d-parts { grid-template-columns: 1fr; }
	.koe-skill-mini { grid-template-columns: 1fr; }
}