/* ═══════════════════════════════════════════════════════════════
   รูปแบบเนื้อหาบทเรียน — ใช้ร่วมกันทุกบท ทั้งหน้าเรียนจริงและหน้าพรีวิวฝั่งแอดมิน

   ★ ทำไมทำเป็นไฟล์กลาง ไม่ไปแก้ HTML ในแต่ละบท (เจ้าของเว็บสั่ง 5 ส.ค. 2026)
     เนื้อหา 10 บทรวมกัน 182,000 ตัวอักษร แก้มือทีละบทคือแก้ 10 ที่ ตกหล่นแน่นอน
     และบทที่เขียนเพิ่มในอนาคตก็จะไม่ได้รูปแบบนี้ไปด้วย
     เนื้อหาทุกบทเขียนมาด้วยชุดคลาสเดียวกันอยู่แล้ว (92 คลาส) แค่ไม่เคยมีใครเขียน CSS รองรับ

   ★ ทุกกฎอยู่ใต้ .lesson-content เท่านั้น
     เนื้อหาบทเรียนเป็น HTML ที่แอดมินพิมพ์เอง ถ้าปล่อยกฎหลุดออกไปนอกกล่อง
     มันจะไปทับหน้าอื่นทั้งเว็บโดยไม่มีใครรู้ตัว (คลาสอย่าง .card .container .badge ชนกับของเว็บแน่นอน)

   ★ เนื้อหาบางส่วนเขียนมาให้ทำงานคู่กับ JavaScript (หัวข้อพับได้ เมนูข้าง แถบเลือกบนมือถือ)
     แต่สคริปต์ไม่เคยถูกโหลดในหน้าเรียน กฎในไฟล์นี้จึงยึดหลัก "เห็นครบไว้ก่อน"
     ห้ามซ่อนอะไรที่เป็นเนื้อหาเด็ดขาด ผู้เรียนจ่ายเงินมาอ่าน ซ่อนแล้วไม่มีปุ่มเปิด = อ่านไม่ได้เลย
     ซ่อนได้เฉพาะ "ตัวควบคุม" ที่กดแล้วไม่เกิดอะไรขึ้น เพราะหลอกให้กดแล้วงงเปล่าๆ

   ★ ใช้ตัวแปรสีจาก style.css ห้ามใส่รหัสสีตรงๆ ยกเว้นชุดสีประจำบท
     (brown/blue/indigo/rose/teal ที่เนื้อหากำหนดมาเอง ซึ่งไม่มีในชุดสีของเว็บ)
   ═══════════════════════════════════════════════════════════════ */

.lesson-content {
    /* ชุดสีประจำบท — เนื้อหาเลือกใช้ผ่านคลาส .brown .blue .indigo .rose .teal .gold */
    --lc-brown:  #8d6e4a;
    --lc-blue:   #2f6fa8;
    --lc-indigo: #4b52a3;
    --lc-rose:   #b0455f;
    --lc-teal:   #1f7a72;
    --lc-gold:   var(--gold-dark);
    --lc-accent: var(--green-medium);   /* ค่าเริ่มต้นเมื่อบทไม่ได้ระบุสี */

    color: var(--text);
    font-size: 16px;
    line-height: 1.9;          /* ★ ภาษาไทยมีสระบนล่าง บรรทัดชิดกว่านี้จะอ่านแล้วตาลาย */
    word-break: break-word;
}

/* ── ชุดสีประจำบท ─────────────────────────────────── */

.lesson-content .brown  { --lc-accent: var(--lc-brown); }
.lesson-content .blue   { --lc-accent: var(--lc-blue); }
.lesson-content .indigo { --lc-accent: var(--lc-indigo); }
.lesson-content .rose   { --lc-accent: var(--lc-rose); }
.lesson-content .teal   { --lc-accent: var(--lc-teal); }
.lesson-content .gold   { --lc-accent: var(--lc-gold); }

/* ── กล่องโครงหน้าที่ไม่ต้องมีรูปแบบ ───────────────── */

/*
 * ★ .container กับ .card ชนกับคลาสของเว็บหลักตรงๆ
 *   ต้องล้างค่าที่ติดมาจาก style.css ไม่งั้นเนื้อหาจะถูกบีบความกว้างซ้อนอีกชั้น
 *   หรือได้กรอบซ้อนกรอบจนดูรก
 */
.lesson-content .app-container,
.lesson-content .container,
.lesson-content .sub-page,
.lesson-content .section-page {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* ── หัวข้อ ───────────────────────────────────────── */

.lesson-content h1,
.lesson-content h2,
.lesson-content .doc-h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green-dark);
    line-height: 1.5;
    margin: 2.2em 0 .8em;
    padding-bottom: .45em;
    border-bottom: 2px solid var(--green-tint);
}

.lesson-content h3,
.lesson-content .doc-h3 {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--green-dark);
    line-height: 1.6;
    margin: 1.8em 0 .6em;

    /* ★ ขีดสีหน้าหัวข้อ — ช่วยให้กวาดตาหาหัวข้อเจอโดยไม่ต้องอ่านทุกบรรทัด
         ใช้สีประจำบท หัวข้อจึงเปลี่ยนสีตามบทโดยอัตโนมัติ */
    padding-left: .7em;
    border-left: 4px solid var(--lc-accent);
}

.lesson-content h4,
.lesson-content .doc-h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 1.4em 0 .4em;
}

.lesson-content > :first-child { margin-top: 0; }

/* ── แบนเนอร์หัวบท ────────────────────────────────── */

/*
 * ★ ตัวที่ทำให้รูปโปรไฟล์กลายเป็นรูปยักษ์เต็มความกว้าง
 *   ในเนื้อหาเป็นแค่ <img> เปล่าๆ ไม่มีการกำหนดขนาด ต้องบังคับให้เป็นวงกลมเล็กตรงนี้
 */
.lesson-content .hero-banner {
    position: relative;
    margin: 0 0 1.6em;
    padding: 1.5em 1.6em;
    border-radius: var(--radius);
    background: var(--lc-accent);   /* ค่าสำรอง — ไล่เฉดต้องใช้ color-mix ซึ่งเบราว์เซอร์เก่าไม่รู้จัก */
    background: linear-gradient(135deg, var(--lc-accent), color-mix(in srgb, var(--lc-accent) 62%, #000));
    color: #fff;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.lesson-content .hero-banner h2,
.lesson-content .hero-banner h3 {
    margin: .25em 0 .15em;
    padding: 0;
    border: 0;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
}

.lesson-content .hero-banner p {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: .9375rem;
    line-height: 1.75;
    max-width: 46em;
}

.lesson-content .hero-brand {
    display: flex;
    align-items: center;
    gap: .65em;
    margin-bottom: 1em;
}

.lesson-content .hero-brand-icon {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .15);
}

.lesson-content .hero-brand-icon img {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center top;   /* รูปคนถ่ายแนวตั้ง จัดให้เห็นหน้าไม่ใช่ลำตัว */
}

.lesson-content .hero-brand-name {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.3;
}

.lesson-content .hero-brand-sub {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* ไอคอนอิโมจิมุมขวาบน — ตกแต่งล้วน จึงจางไว้ไม่ให้แย่งสายตาจากหัวข้อ */
.lesson-content .hero-icon {
    position: absolute;
    top: .5em;
    right: .7em;
    font-size: 3.25rem;
    line-height: 1;
    opacity: .22;
    pointer-events: none;
}

.lesson-content .hero-banner-tag {
    display: inline-block;
    padding: .2em .8em;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
}

/* ── ย่อหน้า ──────────────────────────────────────── */

.lesson-content p,
.lesson-content .doc-p {
    margin: 0 0 1.15em;
    text-align: left;          /* ★ ห้าม justify — ภาษาไทยไม่มีเว้นวรรคระหว่างคำ
                                     เบราว์เซอร์จะยืดช่องว่างจนเป็นรูโหว่กลางบรรทัด */
}

.lesson-content strong,
.lesson-content b {
    font-weight: 700;
    color: var(--green-dark);
}

.lesson-content em { color: var(--text-muted); }

.lesson-content a {
    color: var(--green-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── รายการ ───────────────────────────────────────── */

.lesson-content ul,
.lesson-content ol {
    margin: 0 0 1.15em;
    padding-left: 1.6em;
}

.lesson-content li { margin-bottom: .5em; }
.lesson-content li::marker { color: var(--lc-accent); font-weight: 700; }

/* ── ตาราง ────────────────────────────────────────── */

/*
 * ★ ตารางต้องเลื่อนแนวนอนได้ในกล่องตัวเอง
 *   ตารางสมุนไพรบางตัวมี 5-6 คอลัมน์ บนมือถือถ้าไม่ให้เลื่อน
 *   มันจะดันทั้งหน้าให้เลื่อนซ้ายขวา ซึ่งพังทั้งหน้าไม่ใช่แค่ตาราง
 */
.lesson-content .table-wrap,
.lesson-content .table-responsive {
    margin: 1.4em 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
}

.lesson-content table {
    width: 100%;
    margin: 1.4em 0;
    border-collapse: collapse;
    font-size: .9375rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.lesson-content .table-wrap table,
.lesson-content .table-responsive table { margin: 0; }

.lesson-content thead th,
.lesson-content th {
    background: var(--lc-accent);
    color: var(--white);
    font-weight: 700;
    text-align: left;
    padding: .7em .9em;
    white-space: nowrap;
}

.lesson-content td {
    padding: .65em .9em;
    border-top: 1px solid var(--border-light);
    vertical-align: top;
}

/* แถบสลับสี — ตาแกะแถวได้เองโดยไม่ต้องมีเส้นทุกเส้น */
.lesson-content tbody tr:nth-child(even) { background: var(--cream); }
.lesson-content tbody tr:hover { background: var(--green-surface); }

/* ── กล่องเน้นข้อความ ─────────────────────────────── */

.lesson-content blockquote,
.lesson-content .info-box,
.lesson-content .intro-box {
    margin: 1.4em 0;
    padding: 1.1em 1.3em;
    background: var(--green-surface);
    border-left: 4px solid var(--lc-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-dark);
}

.lesson-content .info-box > h3,
.lesson-content .intro-box > h3 {
    margin-top: 0;
    padding-left: 0;
    border-left: 0;             /* อยู่ในกล่องที่มีขีดสีอยู่แล้ว ไม่ต้องมีขีดซ้อนอีกชั้น */
}

.lesson-content blockquote > :last-child,
.lesson-content .info-box > :last-child,
.lesson-content .intro-box > :last-child { margin-bottom: 0; }

/* ── การ์ด ────────────────────────────────────────── */

.lesson-content .card {
    margin: 1.4em 0;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.lesson-content .card-header {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .8em 1.1em;
    background: var(--green-surface);   /* ค่าสำรองสำหรับเบราว์เซอร์ที่ไม่รู้จัก color-mix */
    background: color-mix(in srgb, var(--lc-accent) 10%, #fff);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: var(--green-dark);
}

.lesson-content .card-icon { font-size: 1.25em; line-height: 1; }
.lesson-content .card-body { padding: 1.1em; }
.lesson-content .card-body > :last-child { margin-bottom: 0; }

/* ── ตารางกริด ────────────────────────────────────── */

/*
 * ★ auto-fit + minmax แทนการกำหนดจำนวนคอลัมน์ตายตัว
 *   จอกว้างได้ 3-4 ช่อง จอแคบเหลือช่องเดียวเอง ไม่ต้องเขียน media query แยก
 */
.lesson-content .cards-grid,
.lesson-content .element-grid,
.lesson-content .herb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .9em;
    margin: 1.4em 0;
}

.lesson-content .cards-grid > *,
.lesson-content .element-grid > *,
.lesson-content .herb-grid > * { margin: 0; }

.lesson-content .element-item {
    display: flex;
    align-items: center;
    gap: .55em;
    padding: .7em .9em;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--lc-accent);
    border-radius: var(--radius-sm);
    font-size: .9375rem;
}

/* ── ตัวเลขสถิติ ──────────────────────────────────── */

.lesson-content .stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .7em;
    margin: 1.4em 0;
}

.lesson-content .stat-cell {
    padding: .9em 1.1em;
    text-align: center;
    background: var(--green-surface);   /* ค่าสำรองสำหรับเบราว์เซอร์ที่ไม่รู้จัก color-mix */
    background: color-mix(in srgb, var(--lc-accent) 8%, #fff);
    border: 1px solid var(--border);
    border-color: color-mix(in srgb, var(--lc-accent) 25%, #fff);
    border-radius: var(--radius-sm);
}

.lesson-content .stat-num {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--lc-accent);
}

.lesson-content .stat-label {
    display: block;
    margin-top: .15em;
    font-size: .8125rem;
    color: var(--text-muted);
}

/* ── ป้ายและจุดสี ─────────────────────────────────── */

.lesson-content .herb-chip {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    margin: .25em .35em .25em 0;
    padding: .35em .85em;
    font-size: .875rem;
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.lesson-content .badge {
    display: inline-block;
    padding: .15em .7em;
    font-size: .8125rem;
    font-weight: 600;
    color: #fff;
    background: var(--lc-accent);
    border-radius: 999px;
}

.lesson-content .badge-gray { background: var(--text-muted); }
.lesson-content .badge-blue { background: var(--lc-blue); }
.lesson-content .badge-indigo { background: var(--lc-indigo); }
.lesson-content .badge-teal { background: var(--lc-teal); }

.lesson-content .dot,
.lesson-content .herb-dot {
    display: inline-block;
    width: .6em;
    height: .6em;
    flex: none;
    border-radius: 50%;
    background: var(--lc-accent);
}

.lesson-content .dot-blue   { background: var(--lc-blue); }
.lesson-content .dot-brown  { background: var(--lc-brown); }
.lesson-content .dot-indigo { background: var(--lc-indigo); }
.lesson-content .dot-rose   { background: var(--lc-rose); }
.lesson-content .dot-teal   { background: var(--lc-teal); }

/* ── ขั้นตอนการทำ ─────────────────────────────────── */

.lesson-content .process-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9em;
    margin: 1.4em 0;
    counter-reset: nt-step;
}

.lesson-content .process-step {
    position: relative;
    padding: 1em 1.1em 1em 2.9em;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* ★ เลขลำดับสร้างจาก CSS — เนื้อหาไม่ได้พิมพ์เลขไว้ ถ้าสลับลำดับทีหลังเลขจะตามเอง */
.lesson-content .process-step::before {
    counter-increment: nt-step;
    content: counter(nt-step);
    position: absolute;
    left: .8em;
    top: 1em;
    width: 1.6em;
    height: 1.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lc-accent);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    border-radius: 50%;
}

.lesson-content .process-step-title {
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: .2em;
}

/* ── หัวข้อพับเก็บได้ ─────────────────────────────── */

/*
 * ★ เนื้อหาเขียนมาให้พับได้ด้วย JavaScript แต่สคริปต์ไม่ได้ถูกโหลดในหน้าเรียน
 *   ถ้าซ่อนเนื้อในด้วย CSS แล้วไม่มีอะไรมาเปิด = เนื้อหาหายไปเลย ผู้เรียนไม่ได้อ่าน
 *   จึงจงใจให้กางอยู่เสมอ แล้วใช้กรอบบอกขอบเขตแทน — เห็นครบดีกว่าสวยแต่อ่านไม่ได้
 *   (เนื้อหาใช้สองชื่อปนกัน acc-* กับ accordion-* จึงต้องรองรับทั้งคู่)
 */
.lesson-content .acc-item,
.lesson-content .accordion {
    margin: .9em 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.lesson-content .acc-header,
.lesson-content .accordion-header {
    padding: .75em 1em;
    background: var(--green-surface);   /* ค่าสำรองสำหรับเบราว์เซอร์ที่ไม่รู้จัก color-mix */
    background: color-mix(in srgb, var(--lc-accent) 8%, #fff);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: var(--green-dark);
}

.lesson-content .acc-body,
.lesson-content .accordion-content {
    display: block !important;    /* ★ กันเนื้อหาโดนซ่อนจาก inline style ที่ติดมากับเนื้อหา */
    padding: 1em;
}

.lesson-content .acc-body > :last-child,
.lesson-content .accordion-content > :last-child { margin-bottom: 0; }

/* ลูกศรชี้ให้กดทั้งที่กดไม่ได้ — ทำให้เข้าใจผิดว่าเว็บเสีย */
.lesson-content .acc-arrow,
.lesson-content .accordion-icon { display: none; }

/* ── ปุ่มลัดหัวข้อ ────────────────────────────────── */

.lesson-content .kp-selector,
.lesson-content .sec1-sidebar-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    margin: 1em 0;
}

.lesson-content .kp-btn {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .45em .9em;
    font-family: inherit;
    font-size: .875rem;
    text-align: left;
    color: var(--green-dark);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.lesson-content .kp-btn:hover {
    background: var(--green-surface);
    border-color: var(--lc-accent);
}

.lesson-content .kpb-ic { font-size: 1.1em; line-height: 1; }
.lesson-content .kpb-name { font-weight: 600; }

.lesson-content .kp-title {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--green-dark);
    margin-bottom: .4em;
}

.lesson-content .kp-grp-sep {
    width: 100%;
    margin: .5em 0 .2em;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* ── เนื้อหาแบบมีเมนูข้าง ─────────────────────────── */

/*
 * ★ เนื้อหาสองบทเขียนมาเป็นหน้าจอแบบมีเมนูข้าง + ช่องอ่านทางขวา ซึ่งต้องใช้ JavaScript สลับ
 *   ไม่มีสคริปต์ = คลิกเมนูแล้วไม่มีอะไรเกิดขึ้น และช่องอ่านว่างเปล่า
 *   จึงเปลี่ยนเป็นเรียงต่อกันลงมาทั้งหมด อ่านรวดเดียวจบ ไม่ต้องคลิกอะไรเลย
 */
.lesson-content .kp-layout,
.lesson-content .sec-split-layout,
.lesson-content .sec1-viewer {
    display: block;
}

.lesson-content .kp-sidebar,
.lesson-content .kp-main,
.lesson-content .sec1-sidebar,
.lesson-content .sec1-reader-panel,
.lesson-content .sec1-reader-content,
.lesson-content .kp-content-wrap {
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    overflow: visible;
    border: 0;
    padding: 0;
}

.lesson-content .kp-content {
    display: block !important;    /* หัวข้อทั้ง 14 ต้องเห็นครบ ไม่ใช่เห็นทีละอัน */
    margin: 1.2em 0;
    padding: 1.1em 1.2em;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--lc-accent);
    border-radius: var(--radius-sm);
}

.lesson-content .kp-content > :last-child { margin-bottom: 0; }

/*
 * ตัวควบคุมที่กดแล้วไม่เกิดอะไร — ซ่อนได้เพราะไม่ใช่เนื้อหา
 * ★ ห้ามเผลอใส่ .kp-content หรือ .sec1-reader-content ลงในรายการนี้เด็ดขาด นั่นคือเนื้อหาจริง
 */
.lesson-content .kp-mobile-bar,
.lesson-content .sec1-mobile-bar,
.lesson-content .sec1-sidebar-search,
.lesson-content .sec1-sidebar-search-inp,
.lesson-content .reader-empty-state { display: none; }

/* ── รูปภาพ ───────────────────────────────────────── */

.lesson-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 1em 0;
}

/* ── จอเล็ก ───────────────────────────────────────── */

@media (max-width: 640px) {
    .lesson-content { font-size: 15.5px; }

    .lesson-content h1,
    .lesson-content h2,
    .lesson-content .doc-h2 { font-size: 1.3125rem; }

    .lesson-content h3,
    .lesson-content .doc-h3 { font-size: 1.0625rem; }

    .lesson-content .hero-banner { padding: 1.2em 1.1em; }
    .lesson-content .hero-banner h2,
    .lesson-content .hero-banner h3 { font-size: 1.375rem; }
    .lesson-content .hero-icon { font-size: 2.5rem; }

    /* ★ ตารางกว้างเกินจอ ให้เลื่อนในตัวเอง ไม่ดันทั้งหน้า */
    .lesson-content table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── สั่งพิมพ์ ────────────────────────────────────── */

@media print {
    .lesson-content .kp-btn,
    .lesson-content .kp-selector { display: none; }

    .lesson-content .card,
    .lesson-content table,
    .lesson-content .hero-banner { box-shadow: none; }
}