/* =====================================================================
   เว็บไซต์สมัชชาการศึกษาประชาสังคมจังหวัดศรีสะเกษ
   ชั้นที่ 3 : ส่วนที่เป็นของเว็บไซต์นี้โดยเฉพาะ

   สี ฟอนต์ ระยะห่าง เงา ทั้งหมดมาจาก design-system.css (ชุดเดียวกับ SEEP Connect)
   ไฟล์นี้มีเฉพาะสิ่งที่ base.css ยังไม่มี หรือที่เว็บนี้ต้องปรับต่างออกไป
   ห้ามใส่ค่าสีดิบ ให้อ้างอิงตัวแปรจาก design-system.css เสมอ
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ตัวช่วยที่ base.css ยังไม่มี
   --------------------------------------------------------------------- */

/* ให้ข้อความยาวตัดด้วย text-truncate ได้จริงเมื่ออยู่ใน flex */
.min-w-0 { min-width: 0; }

/* กล่องเน้นแบบพื้นอ่อน ใช้กับข้อมูลวันที่/สถานที่ของกิจกรรม */
.box.tinted {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-soft-2);
}

/* หัวข้อส่วนแบบจัดกลาง : base.css วาง .section-head เป็น flex ซ้าย-ขวา (หัวข้อ + ปุ่ม)
   ทำให้คำอธิบายไปลอยอยู่ด้านขวาของหัวข้อ ให้เรียงลงมาใต้หัวข้อแทน */
.section-head.text-center { display: block; }

/* ---------------------------------------------------------------------
   2. หน้าแรก
   --------------------------------------------------------------------- */

/* เว็บนี้ไม่มีภาพประกอบใหญ่ในส่วนหัว จึงลดระยะล่างลงจากของ SEEP */
.hero.hero-space { padding-bottom: var(--space-7); }

/* หัวเรื่องใหญ่ : แต่ละช่วง (สมัชชาการศึกษา | ประชาสังคม | จังหวัดศรีสะเกษ) ขึ้นบรรทัดใหม่ทั้งก้อน
   ไม่ถูกตัดกลางคำ ปิด text-wrap: balance ของ base.css เพื่อให้เติมบรรทัดแรกให้เต็มก่อน */
.hero-title { text-wrap: wrap; }
.hero-title > span { display: inline-block; }

/* จอกว้าง : คอลัมน์หัวเรื่องแคบกว่าตัวอักษรขนาดเต็ม ย่อตามความกว้างจอ
   ให้ "สมัชชาการศึกษาประชาสังคม" อยู่บรรทัดเดียวกันได้ */
@media (min-width: 992px) {
    .hero .hero-title { font-size: min(var(--font-size-hero), 3.3vw); }
}

/* ปุ่มในส่วนหัว : ไม่ขีดเส้นใต้ตอนชี้ และลูกศรขยับไปข้างหน้าเล็กน้อยเป็นสัญญาณให้กด */
.hero-actions .btn { text-decoration: none; }
.hero-actions .bi-arrow-right { transition: transform var(--transition-base); }
.hero-actions .btn:hover .bi-arrow-right,
.hero-actions .btn:focus-visible .bi-arrow-right { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .hero-actions .btn:hover .bi-arrow-right, .hero-actions .btn:focus-visible .bi-arrow-right { transform: none; }
}

/* การ์ดตัวเลขในส่วนหัว วางให้สมดุลกับข้อความด้านซ้าย */
.hero .home-stat .stat-value { font-size: var(--font-size-h2); }

/* ---------------------------------------------------------------------
   3. รายชื่อคณะกรรมการ
   --------------------------------------------------------------------- */

/* รูปถ่ายกรรมการเป็นวงกลมเท่ากันทุกใบ ไม่ว่าภาพต้นฉบับจะสัดส่วนใด */
.card .avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface-2);
}

/* ป้ายด้านที่ดูแล ให้อ่านง่ายแต่ไม่แย่งความสนใจจากชื่อ */
.chip { font-size: var(--font-size-xs); }

/* ภาพรวมด้านบน : จำนวนรวม + ทางลัดไปแต่ละคณะ */
.cm-overview {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.cm-overview-total { display: flex; align-items: center; gap: var(--space-3); padding-right: var(--space-5); border-right: 1px solid var(--color-border); }
.cm-total-num { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); color: var(--color-navy); line-height: 1.1; }
.cm-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.cm-jump-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-background);
    text-decoration: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.cm-jump-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cm-jump-icon {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: var(--color-primary-soft); color: var(--color-primary-ink); font-size: 1.15rem;
}

/* หัวของแต่ละคณะ */
.cm-group { scroll-margin-top: 96px; }
.cm-group-head {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding-bottom: var(--space-4); margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.cm-group-no {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-navy); color: var(--color-text-invert);
    font-weight: var(--font-weight-bold);
}
.cm-group-count { margin-left: auto; flex: none; white-space: nowrap; }
/* คำอธิบายใต้ชื่อคณะ : base.css จำกัดความกว้างไว้ 68 ตัวอักษร จึงขึ้นบรรทัดใหม่ทั้งที่ยังมีที่ว่าง
   ให้ใช้ความกว้างเต็มพื้นที่หัวข้อ และจัดบรรทัดไม่ให้เหลือคำเดียวค้างบรรทัดสุดท้าย */
.cm-group-head > .min-w-0 { flex: 1; }
.cm-group-head .section-sub { max-width: none; font-size: var(--font-size-body); text-wrap: pretty; }

/* ผังประธาน → รองประธาน พร้อมเส้นเชื่อม */
.cm-tree { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-6); }
.cm-chair {
    position: relative;
    text-align: center;
    width: min(100%, 380px);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-primary-700) 100%);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-xl);
}
.cm-chair .avatar { margin: 0 auto var(--space-3); border: 3px solid rgba(255, 255, 255, .85); }
.cm-chair .avatar-initial { font-size: 1.9rem; background: var(--color-primary-soft); }
.cm-chair-role {
    display: inline-block; margin-bottom: var(--space-1);
    padding: .15rem .75rem; border-radius: var(--radius-pill);
    background: var(--color-accent); color: var(--color-navy);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}
.cm-chair-name { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); color: var(--color-text-invert); }
.cm-chair-meta { font-size: var(--font-size-xs); color: var(--color-on-dark-muted); }

.cm-vices {
    position: relative;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: center; gap: var(--space-4);
    width: 100%;
}
.cm-vices.has-parent { margin-top: var(--space-6); }
.cm-vices.has-parent::before {
    content: ""; position: absolute; left: 50%; top: calc(-1 * var(--space-6)); height: var(--space-6);
    border-left: 2px solid var(--color-border-strong);
}
.cm-vice {
    position: relative; text-align: center;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.cm-vice .avatar { margin: 0 auto var(--space-2); }
.cm-vice-role { font-size: var(--font-size-xs); color: var(--color-primary-ink); font-weight: var(--font-weight-semibold); }

/* กรรมการ : การ์ดเล็กแบบกริด */
.cm-sub-title {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--font-size-lg); color: var(--color-navy);
    margin: var(--space-5) 0 var(--space-3);
}
.cm-sub-title span { color: var(--color-text-muted); font-weight: var(--font-weight-normal); font-size: var(--font-size-sm); }
.cm-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.cm-member {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.cm-member:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }

/* ฝ่ายเลขานุการ : กล่องพื้นเขียวอมฟ้าให้แยกจากกรรมการทั่วไป */
.cm-secretariat {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--color-teal-soft);
}
.cm-secretariat .cm-member { border-color: transparent; }
.cm-sec-role { font-size: var(--font-size-xs); color: var(--color-teal-ink); font-weight: var(--font-weight-semibold); }

/* ที่ปรึกษา : รายการมีเลขลำดับ สองคอลัมน์ */
.cm-advisors {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-2) var(--space-4);
}
.cm-advisor {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px dashed var(--color-border-strong);
}
.cm-advisor-no {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-accent-soft); color: var(--color-accent-ink);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
}

@media (max-width: 767.98px) {
    .cm-overview { grid-template-columns: 1fr; padding: var(--space-4); }
    .cm-overview-total { border-right: 0; padding-right: 0; }
    .cm-group-head { flex-wrap: wrap; }
    .cm-group-count { margin-left: calc(40px + var(--space-3)); }
    .cm-advisors, .cm-members { grid-template-columns: 1fr; }
    .cm-vices { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 399.98px) {
    .cm-vices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .cm-jump-item:hover { transform: none; }
}

/* ---------- หน้าเกี่ยวกับสมัชชา ---------- */
.ab-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.ab-jump .chip { text-decoration: none; background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-2); }
.ab-jump .chip:hover { border-color: var(--color-primary); color: var(--color-primary-ink); }
#about-intro, .ab-section { scroll-margin-top: 96px; }
.ab-section { margin-top: var(--space-8); }
.ab-prose { line-height: var(--line-height-relaxed); }

/* ตราสัญลักษณ์ */
.ab-emblem {
    display: flex; align-items: center; gap: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-success-soft);
}
.ab-emblem img { flex: none; width: 132px; height: 132px; object-fit: contain; }

/* วิสัยทัศน์ : การ์ดพื้นเข้มคู่กับภาพรวมการดำเนินงาน */
.ab-vision {
    display: flex; align-items: flex-start; gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--color-navy) 0%, var(--color-primary-700) 100%);
    color: var(--color-on-dark);
    font-size: var(--font-size-lg); line-height: var(--line-height-relaxed);
}
.ab-vision h2 { color: var(--color-accent); }
.ab-vision p { color: var(--color-text-invert); font-weight: var(--font-weight-medium); }
.ab-vision-icon {
    display: grid; place-items: center; flex: none;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--color-navy-600); color: var(--color-accent); font-size: 1.3rem;
}

/* ข้อมูลสมัชชา */
.ab-profile-row {
    display: flex; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.ab-profile-row:last-child { border-bottom: 0; }
.ab-profile-icon {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px; border-radius: var(--radius-md);
    background: var(--color-primary-soft); color: var(--color-primary-ink);
}
.ab-profile dt { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-muted); }
.ab-profile dd { margin: 0; color: var(--color-navy); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); }

/* ข้อกฎหมายที่รองรับ */
.ab-legal { display: grid; gap: var(--space-3); }
.ab-legal-item {
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}
.ab-legal-tag {
    display: inline-block; margin: var(--space-1) 0;
    padding: .05rem .6rem; border-radius: var(--radius-pill);
    background: var(--color-primary-soft); color: var(--color-primary-ink);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}

/* ลำดับเหตุการณ์ */
.ab-timeline { list-style: none; }
.ab-timeline .timeline-item:last-child { padding-bottom: 0; }
.ab-tl-date { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary-ink); }
@media (min-width: 992px) { .ab-timeline-card { position: sticky; top: 96px; } }

/* วัตถุประสงค์ */
.ab-objectives {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3);
}
.ab-objective {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius-lg);
}
.ab-obj-icon {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-accent-soft); color: var(--color-accent-ink); font-size: 1.15rem;
}
.ab-obj-no { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-accent-ink); }

/* ภาคส่วนในคณะกรรมการ */
.ab-sectors {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-primary-soft);
}
.ab-sectors-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.ab-sectors-head .stat-icon { background: var(--color-surface); flex: none; }
.chip.ab-sector { background: var(--color-surface); color: var(--color-text-2); }

/* สาระสำคัญของระเบียบ */
.ab-reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.ab-reg {
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.ab-reg-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.ab-reg-icon {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: var(--color-navy); color: var(--color-text-invert); font-size: 1.1rem;
}
.ab-reg-no { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ab-reg-list { margin: 0; padding-left: 1.1rem; font-size: var(--font-size-sm); color: var(--color-text-2); }
.ab-reg-list li { margin-bottom: var(--space-2); line-height: var(--line-height-tight); }
.ab-reg-list li::marker { color: var(--color-primary); }

@media (max-width: 575.98px) {
    .ab-emblem { flex-direction: column; text-align: center; padding: var(--space-4); }
    .ab-reg-grid { grid-template-columns: 1fr; }
    .ab-section { margin-top: var(--space-7); }
}

/* ---------- กรอบแนวคิด Input → Process → Output → Outcome → Impact ---------- */
.fw { scroll-margin-top: 96px; }
.fw-kicker {
    display: inline-block; margin-bottom: var(--space-2);
    padding: .2rem .85rem; border-radius: var(--radius-pill);
    background: var(--color-primary-soft); color: var(--color-primary-ink);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}

/* โทนสีของแต่ละขั้น */
.fw-navy    { --fw-c: var(--color-navy);    --fw-soft: var(--color-navy-soft);    --fw-ink: var(--color-navy); }
.fw-primary { --fw-c: var(--color-primary); --fw-soft: var(--color-primary-soft); --fw-ink: var(--color-primary-ink); }
.fw-orange  { --fw-c: var(--color-warning); --fw-soft: var(--color-warning-soft); --fw-ink: var(--color-warning-ink); }
.fw-gold    { --fw-c: var(--color-accent);  --fw-soft: var(--color-accent-soft);  --fw-ink: var(--color-accent-ink); }
.fw-teal    { --fw-c: var(--color-teal);    --fw-soft: var(--color-teal-soft);    --fw-ink: var(--color-teal-ink); }

/* จอเล็ก–กลาง : เรียงลงเป็นแนวตั้ง มีลูกศรชี้ลงระหว่างขั้น */
.fw-flow {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--space-6);
}
.fw-stage {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--fw-c);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.fw-stage:not(:last-child)::after {
    content: "\F128"; /* bi-arrow-down */
    font-family: "bootstrap-icons";
    position: absolute; left: 50%; bottom: calc(-1 * var(--space-6));
    transform: translate(-50%, 50%);
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-surface); border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted); font-size: .95rem; z-index: 1;
}
.fw-stage-head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4);
    background: var(--fw-soft);
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.fw-stage-icon {
    display: grid; place-items: center; flex: none;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--fw-c); color: var(--color-text-invert); font-size: 1.3rem;
}
.fw-stage-en { display: block; font-weight: var(--font-weight-bold); letter-spacing: .06em; color: var(--fw-ink); line-height: 1.2; }
.fw-stage-th { display: block; font-size: var(--font-size-xs); color: var(--color-text-2); }

.fw-items {
    list-style: none; margin: 0; padding: var(--space-3) var(--space-4) var(--space-4);
    display: grid; gap: var(--space-2);
    font-size: var(--font-size-sm); line-height: var(--line-height-tight);
}
.fw-items li { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-1) 0; }
.fw-no {
    display: grid; place-items: center; flex: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--fw-c); color: var(--color-text-invert);
    font-size: .75rem; font-weight: var(--font-weight-bold);
}
.fw-gold .fw-no, .fw-orange .fw-no { background: var(--fw-ink); }
.fw-qm {
    flex: none; white-space: nowrap;
    padding: .05rem .5rem; border-radius: var(--radius-sm);
    background: var(--fw-soft); color: var(--fw-ink);
    font-size: .75rem; font-weight: var(--font-weight-bold);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .fw-items { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
}

/* จอกว้าง : 5 คอลัมน์เรียงซ้ายไปขวา มีลูกศรชี้ขวาระหว่างขั้น */
@media (min-width: 1200px) {
    .fw-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
    .fw-stage:not(:last-child)::after {
        content: "\F138"; /* bi-arrow-right */
        left: auto; right: calc(-1 * var(--space-5) / 2); top: 38px; bottom: auto;
        transform: translate(50%, -50%);
    }
    .fw-stage-head { flex-direction: column; text-align: center; gap: var(--space-2); }
    .fw-stage-icon { width: 54px; height: 54px; font-size: 1.5rem; }
    .fw-items { padding-inline: var(--space-3); }
    .fw-items li { padding-bottom: var(--space-2); border-bottom: 1px dashed var(--color-border); }
    .fw-items li:last-child { border-bottom: 0; }
    .fw-qm { font-size: .7rem; padding-inline: .4rem; }
}

.fw-stage-note {
    padding: var(--space-2) var(--space-4) 0;
    font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
    color: var(--fw-ink); letter-spacing: .02em;
}
@media (min-width: 1200px) { .fw-stage-note { text-align: center; padding-inline: var(--space-3); } }

/* หลักการทำงาน */
.fw-principles-title {
    display: flex; align-items: center; gap: var(--space-3);
    margin: var(--space-7) 0 var(--space-4);
    font-size: var(--font-size-lg); color: var(--color-navy); text-align: center;
}
.fw-principles-title::before, .fw-principles-title::after { content: ""; flex: 1; border-top: 1px solid var(--color-border-strong); }
.fw-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.fw-principle {
    text-align: center;
    padding: var(--space-4) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.fw-principle:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.fw-principle-icon {
    display: inline-grid; place-items: center;
    width: 52px; height: 52px; margin-bottom: var(--space-2); border-radius: 50%;
    background: var(--color-success-soft); color: var(--color-success-ink); font-size: 1.45rem;
}
.fw-principle-name { font-weight: var(--font-weight-semibold); color: var(--color-navy); }
.fw-principle-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* คำขวัญ */
.fw-motto {
    position: relative;
    margin: var(--space-6) auto 0; max-width: 880px;
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-7);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-primary-700) 100%);
    color: var(--color-text-invert);
    font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); text-align: center;
}
.fw-motto .bi-quote {
    position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%);
    font-size: 2.2rem; color: var(--color-accent); line-height: 1;
}
@media (max-width: 575.98px) {
    .fw-motto { padding: var(--space-6) var(--space-4) var(--space-4); }
    .fw-motto .bi-quote { left: 50%; top: var(--space-2); transform: translateX(-50%); font-size: 1.8rem; }
    .fw-principles { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   4. เอกสารดาวน์โหลด
   --------------------------------------------------------------------- */

/* บนมือถือให้ชื่อเอกสารขึ้นบรรทัดเต็ม แล้วดันปุ่มดาวน์โหลดลงมาข้างล่าง */
@media (max-width: 575.98px) {
    .doc-row { flex-wrap: wrap; }
    .doc-row > .btn { margin-left: auto; }
}

/* ---------------------------------------------------------------------
   5. เนื้อหาข่าวและหน้าคงที่
   --------------------------------------------------------------------- */

/* ย่อหน้าในเนื้อข่าว ระยะบรรทัดโปร่งกว่าปกติเพื่ออ่านยาว ๆ ได้สบาย */
.lesson-body p {
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}

/* กรอบแผนที่จาก Google Maps ให้เต็มความกว้างการ์ดและมุมโค้งเข้ากับการ์ด */
.video-frame iframe {
    width: 100%;
    min-height: 260px;
    border: 0;
    display: block;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---------------------------------------------------------------------
   6. หลังบ้าน
   --------------------------------------------------------------------- */

/* ช่องกรอกเนื้อหาหน้าคงที่ พิมพ์หลายบรรทัดจึงใช้ฟอนต์ที่นับคอลัมน์ได้ชัด */
textarea.text-mono {
    font-family: var(--font-family-mono);
    line-height: var(--line-height-body);
}

/* ---------------------------------------------------------------------
   7. อัลบั้มรูปกิจกรรมในข่าว
   --------------------------------------------------------------------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-2);
}
.gallery-grid > a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
}
.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}
.gallery-grid > a:hover img,
.gallery-grid > a:focus-visible img { transform: scale(1.04); }
.gallery-grid > a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* ตัวเลือกลบรูปในหน้าหลังบ้าน */
.gallery-pick {
    display: block;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    background: var(--color-surface);
}
.gallery-pick img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
}
.gallery-pick:has(input:checked) {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

/* ---------------------------------------------------------------------
   8. ป้ายวันที่ของกิจกรรมที่กำลังจะมาถึง
   --------------------------------------------------------------------- */

.event-date {
    display: grid;
    place-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-ink);
    text-align: center;
    line-height: 1.1;
}
.event-date b { font-size: var(--font-size-h3); display: block; }
.event-date span { font-size: var(--font-size-xs); }

/* ---------------------------------------------------------------------
   9. ความเคลื่อนไหวของหน้าเว็บสาธารณะ (ทำงานคู่กับ assets/js/public.js)
   ทุกอย่างในส่วนนี้ปิดเองเมื่อผู้ใช้ตั้งค่า "ลดการเคลื่อนไหว"
   --------------------------------------------------------------------- */

/* เลื่อนไปหัวข้อแบบนุ่ม และหยุดใต้แถบเมนู + เมนูทางลัด */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
#about-intro, .ab-section, .fw, .cm-group { scroll-margin-top: calc(var(--nav-offset, 70px) + 80px); }

/* ค่อย ๆ ปรากฏเมื่อเลื่อนมาเห็น : .rv ซ่อนไว้ก่อน .rv-in แสดง */
.rv {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}
.rv.rv-in { opacity: 1; transform: none; }

/* ปุ่ม : กดแล้วยุบเล็กน้อย + คลื่นวงกลมจากจุดที่กด */
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn.has-ripple { position: relative; overflow: hidden; }
.btn-ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: currentColor; opacity: .28; transform: scale(0);
    animation: edua-ripple .6s ease-out forwards;
}
.btn-primary .btn-ripple, .btn-success .btn-ripple, .btn-danger .btn-ripple { background: var(--color-text-invert); opacity: .35; }
@keyframes edua-ripple { to { transform: scale(2.4); opacity: 0; } }

/* การ์ด : ชี้แล้วยกขึ้น เงาเข้มขึ้น และไอคอนขยับ */
.ab-objective, .ab-reg, .ab-legal-item, .fw-stage, .fw-principle,
.cm-member, .cm-vice, .cm-chair, .cm-advisor, .ab-profile-row {
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base), background-color var(--transition-base), opacity var(--transition-base);
}
.ab-objective:hover, .ab-reg:hover, .fw-stage:hover, .cm-vice:hover, .cm-member:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border-strong);
}
.ab-legal-item:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.fw-principle:hover { transform: translateY(-4px); }
.cm-chair:hover { transform: translateY(-3px); }
.cm-advisor:hover { background: var(--color-accent-soft); }
.ab-profile-row:hover { background: var(--color-background); }

.ab-obj-icon, .ab-reg-icon, .fw-stage-icon, .fw-principle-icon, .cm-jump-icon, .ab-profile-icon, .stat-icon {
    transition: transform var(--transition-base);
}
.ab-objective:hover .ab-obj-icon, .ab-reg:hover .ab-reg-icon, .fw-stage:hover .fw-stage-icon,
.fw-principle:hover .fw-principle-icon, .cm-jump-item:hover .cm-jump-icon,
.ab-profile-row:hover .ab-profile-icon, .stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(-6deg);
}

/* กรอบแนวคิดบนจอกว้าง : ชี้ขั้นใด ขั้นอื่นจางลงให้โฟกัสได้ */
@media (hover: hover) and (min-width: 1200px) {
    .fw-flow:hover .fw-stage:not(:hover) { opacity: .6; }
}

/* ข้อย่อยในกรอบแนวคิดและระเบียบ : ชี้แล้วเน้นบรรทัดนั้น */
.fw-items li, .ab-reg-list li { transition: color var(--transition-fast); }
.fw-items li:hover { color: var(--fw-ink); }
.ab-reg-list li:hover { color: var(--color-navy); }

/* เมนูทางลัดในหน้าเกี่ยวกับสมัชชา : ติดอยู่ใต้แถบเมนูเมื่อเลื่อน และไฮไลต์หัวข้อที่กำลังอ่าน */
.ab-jump {
    position: sticky; top: calc(var(--nav-offset, 70px) + var(--space-2)); z-index: 20;
    width: fit-content; max-width: 100%; margin-inline: auto;
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
}
.ab-jump::-webkit-scrollbar { display: none; }
.ab-jump .chip { flex: none; border-color: transparent; background: transparent; transition: background-color var(--transition-fast), color var(--transition-fast); }
.ab-jump .chip:hover { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.ab-jump .chip.is-active { background: var(--color-primary); color: var(--color-text-invert); }

/* ทางลัดในหน้าโครงสร้างคณะกรรมการ */
.cm-jump-item.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); }

@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
    .btn:active:not(:disabled),
    .ab-objective:hover, .ab-reg:hover, .ab-legal-item:hover, .fw-stage:hover, .fw-principle:hover,
    .cm-member:hover, .cm-vice:hover, .cm-chair:hover { transform: none; }
    .ab-objective:hover .ab-obj-icon, .ab-reg:hover .ab-reg-icon, .fw-stage:hover .fw-stage-icon,
    .fw-principle:hover .fw-principle-icon, .cm-jump-item:hover .cm-jump-icon,
    .ab-profile-row:hover .ab-profile-icon, .stat-card:hover .stat-icon { transform: none; }
}