/* หน้าสรุปเนื้อหา (lesson.html) · ใช้ token จาก style.css */
.lesson {display:flex;flex-direction:column;gap:24px}
.lesson code {font-family:Consolas,"Courier New",monospace;font-size:.9em;color:#27496a;background:#edf1f8;padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.lesson pre code {background:none;padding:0;font-size:inherit}
.lesson pre {margin:8px 0 14px}

.lesson-hero {padding:32px}
.lesson-hero h1 {font-size:1.7rem;line-height:1.5;margin:6px 0 8px;text-wrap:balance}
.topic-nav {display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.topic-nav a {display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);text-decoration:none;font-weight:500}
.topic-nav a:hover {border-color:var(--primary);color:var(--primary)}
.topic-nav b {display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad-primary);color:#fff;font-size:.8rem}
.topic-nav-label {margin:18px 0 0;font-size:.85rem;color:var(--muted)}
.topic-nav.extra {margin-top:10px}
.topic-nav.extra b {background:var(--icon-bg);color:var(--primary-dark)}
.part-divider {display:flex;align-items:center;gap:14px;margin:8px 0 -4px;color:var(--primary-dark);font-weight:600}
.part-divider::before, .part-divider::after {content:"";flex:1;border-top:2px dashed #cdd8ee}
.exam-format {display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}
.exam-format div {background:var(--icon-bg);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.exam-format strong {font-size:1.6rem;line-height:1.2;color:var(--primary-dark)}
.exam-format span {font-size:.82rem;color:var(--muted);line-height:1.5}
.exam-format .hot {background:var(--grad-primary)}
.exam-format .hot strong, .exam-format .hot span {color:#fff}

.lesson-topic {padding:28px 32px;scroll-margin-top:96px}
.topic-head {display:flex;gap:14px;align-items:center;margin-bottom:20px}
.topic-no {display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;border-radius:14px;background:var(--grad-primary);color:#fff;font-size:1.3rem;font-weight:700}
.topic-head h2 {font-size:1.35rem;line-height:1.4}
.topic-head p {color:var(--muted);font-size:.9rem}
.lesson h3.sub {font-size:1rem;font-weight:600;margin:18px 0 8px;color:var(--primary-dark)}

.lesson-table {margin:0;font-size:.92rem}
.lesson-table th {font-weight:600}
.lesson-table thead th {background:#f4f6fa;color:var(--primary-dark)}
.lesson-table.compact td, .lesson-table.compact th {padding:6px 10px}
.lesson-table.sample {max-width:360px}
/* ชื่อฟิลด์ในตารางไม่ตัดกลางคำ ตัดได้เฉพาะหลัง _ (sql-highlight.js ใส่ <wbr> ให้) จึงไม่ต้องเลื่อนตารางแนวนอน */
.table-responsive .lesson-table code {overflow-wrap:normal}

.two-col {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.three-col {display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mini-card {border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fcfdff}
.mini-card h3 {font-size:1rem;font-weight:600;margin-bottom:6px;color:var(--primary-dark)}
.mini-card .eg {margin-top:6px;font-size:.9rem;color:var(--muted)}
.two-col > .mini-card {margin-top:16px}

.type-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.type-grid div {border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.type-grid div > code {align-self:flex-start;font-weight:700;font-size:.95rem}
.type-grid span {font-size:.86rem;color:var(--muted);line-height:1.6}

.clause-order {display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.clause-order span {font-family:Consolas,"Courier New",monospace;font-weight:700;font-size:.85rem;color:var(--primary-dark);background:var(--icon-bg);padding:5px 10px;border-radius:8px}
.clause-order span + span::before {content:"→";margin-right:8px;color:var(--muted);font-weight:400}

.callout {display:flex;gap:14px;margin-top:20px;padding:18px 20px;border-radius:14px;background:#fff8ec;border:1px solid #f3dfb8}
.callout > .icon {color:var(--amber);width:26px;height:26px;margin-top:2px}
.callout h3 {font-size:1.05rem;font-weight:700;margin-bottom:4px}
.bad-good {display:flex;flex-direction:column;gap:8px;margin-top:10px}
.bad, .good {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.bad > span, .good > span {font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;color:#fff;flex-shrink:0}
.bad > span {background:var(--danger)}
.good > span {background:var(--success)}
.bad small {flex-basis:100%;color:var(--muted)}
.bad code {text-decoration:line-through;text-decoration-color:rgba(220,53,69,.55)}

.join-map {border:1px solid var(--line);border-radius:14px;padding:18px;background:#fcfdff;display:flex;flex-direction:column;gap:14px;margin-bottom:8px}
.jm-row, .jm-branches > div {display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.jm-branches {display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px}
.join-map .node {font-weight:600;font-size:.9rem;padding:6px 12px;border-radius:10px;background:#fff;border:1px solid #cdd8ee;color:var(--primary-dark)}
.join-map .node.hub {background:var(--icon-bg)}
.join-map .edge {font-family:Consolas,"Courier New",monospace;font-size:.78rem;color:var(--primary);display:inline-flex;align-items:center;gap:4px}
.join-map .edge::before, .join-map .edge::after {content:"";width:14px;border-top:2px solid #b8c7e6}
.note-line {display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--icon-bg);font-size:.92rem}
.note-line .icon {color:var(--primary);margin-top:3px}

.mistakes {display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps {padding-left:1.3rem;margin:0;display:flex;flex-direction:column;gap:6px}
.quick-quiz {display:flex;flex-direction:column;gap:8px}
.quick-quiz details {border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff}
.quick-quiz summary {cursor:pointer}
.quick-quiz details p {margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}

/* ส่วนอธิบายสำหรับมือใหม่: อ่าน SQL เป็นภาษาไทย · ตารางไล่ทีละแถว · ผลลัพธ์ · คำศัพท์ */
.lesson p + p {margin-top:8px}
.lesson-topic > p, .lesson-topic .lead-text {line-height:1.8}
.read-as {margin:6px 0 14px;padding:10px 14px;border-left:3px solid var(--syn-str, var(--success));background:var(--vs-side, #f6f8fb);border-radius:6px;font-size:.92rem;line-height:1.75}
.read-as b:first-child {display:block;font-size:.78rem;letter-spacing:.02em;color:var(--muted);font-weight:600;margin-bottom:2px}
.result-label {font-size:.82rem;font-weight:600;color:var(--muted);margin:4px 0 4px}
.lesson-table tr.pass > td, .lesson-table tr.pass > th {background-color:var(--green-pale)}
.lesson-table tr.fail > td, .lesson-table tr.fail > th {background-color:var(--red-pale)}
.mark-ok {color:var(--success);font-weight:700}
.mark-no {color:var(--danger);font-weight:700}
.lesson-table td.why {font-size:.85rem;color:var(--muted)}
.lesson-table.fit {width:auto;max-width:100%}
.glossary {display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin:0}
.glossary div {display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.glossary dt {font-weight:600;color:var(--primary-dark)}
.glossary dd {margin:0;font-size:.92rem}
.tip-list {padding-left:1.2rem;margin:6px 0 0;display:flex;flex-direction:column;gap:6px}
.quick-quiz details .steps {margin-top:6px}
.quick-quiz details > div {margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}

.lesson-cta {padding:24px 32px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;background:var(--grad-primary);color:#fff}
.lesson-cta h2 {font-size:1.3rem}
.lesson-cta .small-muted {color:rgba(255,255,255,.75)}
.lesson-cta .btn {background:#fff;color:var(--primary-dark);border:0;font-weight:600;flex-shrink:0}

@media (max-width: 991.98px) {
  .three-col, .mistakes {grid-template-columns:1fr 1fr}
  .exam-format {grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px) {
  .lesson-hero, .lesson-topic {padding:22px 18px}
  .lesson-hero h1 {font-size:1.35rem}
  .two-col, .three-col, .mistakes, .jm-branches, .glossary {grid-template-columns:1fr}
  .type-grid, .exam-format {grid-template-columns:1fr 1fr}
  .exam-format .hot {grid-column:1 / -1}
  .lesson-cta {flex-direction:column;align-items:stretch;text-align:center;padding:22px 18px}
  .table-responsive .lesson-table {font-size:.86rem}
  .table-responsive .lesson-table th, .table-responsive .lesson-table td {padding:.45rem .4rem}
  /* ตารางคีย์ 4 คอลัมน์กว้างเกินจอ: เรียงเป็นแถวซ้อน ชื่อตาราง / คำอธิบาย / PK กับ FK */
  .lesson-table.keys-table thead {display:none}
  .lesson-table.keys-table tr {display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:10px 2px;border-bottom:1px solid var(--line)}
  .lesson-table.keys-table th, .lesson-table.keys-table td {display:block;padding:0;border:0;background:none}
  .lesson-table.keys-table th, .lesson-table.keys-table td:nth-of-type(1) {grid-column:1 / -1}
  .lesson-table.keys-table td:nth-of-type(1) {color:var(--muted)}
  .lesson-table.keys-table td:nth-of-type(2)::before {content:"PK ";color:var(--muted);font-size:.8em}
  .lesson-table.keys-table td:nth-of-type(3)::before {content:"FK ";color:var(--muted);font-size:.8em}
}
/* คอลัมน์ใน grid ต้องหดได้ ตารางกว้างจะเลื่อนในกรอบ .table-responsive แทนการดันคอลัมน์ล้นจอ */
.two-col > *, .three-col > *, .mistakes > *, .type-grid > * {min-width:0}
.table-responsive + .result-label, .table-responsive + .small-muted {margin-top:6px}
@media (max-width: 640px) {
  .lesson-table.wide {min-width:560px}
}