/* ============================================================
   THE LEGEND — หน้าจอคอม (≥1024px) แบบ B2 (mockup_desktop_home.html?v=B2) · 2026-10-23
   แถบบน (โลโก้ + ค้นหา + กระดิ่ง) · คอลัมน์ซ้าย = โปรไฟล์ย่อ + เมนู (includes/desk_side.php) · ขวา = เนื้อหาหน้า
   มือถือ/แท็บเล็ต (<1024px) ไม่เปลี่ยน: ซ่อนทุกอย่างของจอคอม ใช้แถบบน/เมนูล่างเดิม
   ============================================================ */
.dsk-side, .dsk-search, .topbar.dsk-only { display: none; }

@media (min-width: 1024px) {
  .app.has-dsk { max-width: 1600px; padding-bottom: 24px; background: transparent; } /* ทุกหน้ากว้างเท่า index/search/feed (2026-10-23) */
  body { background: #f3f5fb; }

  /* แถบบน: โลโก้ | ค้นหา | กระดิ่ง */
  .app.has-dsk .topbar, .app.has-dsk .topbar.dsk-only { display: flex; padding: 12px 24px; border-radius: 0 0 18px 18px; }
  .dsk-search { display: flex; align-items: center; gap: 8px; margin-left: auto; width: 380px; background: #f6f7fc; border: 1px solid #e6e9f2; border-radius: 12px; padding: 0 14px; color: #7a849c; }
  .dsk-search:focus-within { border-color: #2f5fe0; background: #fff; box-shadow: 0 0 0 3px rgba(47, 95, 224, .12); }
  .dsk-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
  .dsk-search input { border: 0; background: transparent; outline: 0; font: inherit; font-size: 14px; color: #0b1e3f; padding: 10px 0; width: 100%; }

  /* โครง 2 ส่วน: เมนูซ้าย | เนื้อหา */
  .dsk-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; padding: 20px 24px 0; align-items: start; }
  .dsk-main { min-width: 0; }
  .dsk-main > .container, .dsk-main .container { padding-left: 0; padding-right: 0; }
  .dsk-main > .container:first-child { padding-top: 0; }
  .app.has-dsk .bottom-nav { display: none; }
  .app.has-dsk .site-footer { display: none; }

  /* คอลัมน์ซ้าย (ค้างไว้ตอนเลื่อน) */
  .dsk-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; }
  .ds-card { background: #fff; border-radius: 18px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .ds-me { display: block; color: inherit; text-decoration: none; padding: 16px; transition: box-shadow .15s; }
  .ds-me:hover { box-shadow: 0 6px 20px rgba(11, 30, 63, .1); }
  .ds-me-top { display: flex; align-items: center; gap: 12px; }
  .ds-me-top img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid #ffd76a; flex: none; background: #fff; }
  .ds-me-top b { display: block; font-size: 15px; color: #0b1e3f; line-height: 1.3; }
  .ds-me-top small { color: #7a849c; font-size: 12px; }
  .ds-me-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
  .ds-me-st span { background: #f6f7fc; border-radius: 10px; text-align: center; padding: 6px 2px; font-size: 11px; color: #7a849c; }
  .ds-me-st b { display: block; color: #0b1e3f; font-size: 15px; }

  .ds-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
  .ds-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; color: #55607a; font-weight: 600; font-size: 14px; text-decoration: none; transition: background .12s, color .12s; }
  .ds-nav a:hover { background: #f4f6fc; color: #0b1e3f; }
  .ds-nav a.on { background: #0b1e3f; color: #fff; }
  .ds-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .ds-nav .ds-hd { font-size: 11px; color: #7a849c; font-weight: 700; letter-spacing: .04em; padding: 12px 14px 4px; }
  .ds-nav .ds-n { margin-left: auto; background: #ff5e62; color: #fff; font-size: 11px; border-radius: 99px; padding: 0 7px; line-height: 18px; }

  /* หน้าด้านใน (pf-head ← ชื่อหน้า): เป็นหัวการ์ดในคอลัมน์เนื้อหา */
  .app.has-dsk .pf-head { border-radius: 18px; margin-bottom: 4px; }

  /* ---------- home.php (นักเรียน): เนื้อหา | ขวา = เป้าหมาย + LSP ---------- */
  .hm-dsk { display: grid; grid-template-columns: minmax(0, 1fr) 330px; column-gap: 22px; row-gap: 0; align-items: start; }
  .hm-dsk > * { grid-column: 1; min-width: 0; }
  .hm-dsk > .hm-rail { grid-column: 2; grid-row: 1 / span 60; position: sticky; top: 88px; }
  .hm-dsk > .hm-rail > * { margin-top: 0; max-width: none; width: auto; }
  .hm-dsk > .hm-rail > * + * { margin-top: 16px; }
  /* การ์ดโปรไฟล์ + เมนูทำรายการ อยู่ในคอลัมน์ซ้ายแล้ว */
  .hm-dsk > div:has(> .profile-dashboard-v2), .hm-dsk > .card:has(.menu-grid-1) { display: none; }
  /* การ์ดที่มือถือจำกัด 420px → เต็มคอลัมน์เนื้อหา */
  .hm-dsk :is(.learning-card, .matrix-card, .gpa-card, .achievement-card, .school-activity-card) { max-width: none; margin-left: 0; margin-right: 0; }
  /* คลังสื่อของฉัน: 4 ช่องเท่ากันในแถวเดียว */
  .hm-dsk .conso-item { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .hm-dsk .conso-item .item-con-1 { width: auto; max-width: none; margin: 0; min-width: 0; }
  .hm-dsk .conso-item .item-con-1 img { width: 100%; height: auto; }
  .hm-dsk .video-wrapper { aspect-ratio: auto; } /* กล่องสูงตามวิดีโอ ไม่เหลือพื้นขาวใต้วิดีโอ */
  .hm-dsk .video-wrapper video { max-height: 380px; width: 100%; object-fit: cover; background: #0b0f1c; }
}

/* ---------- index.php (ล็อกอินแล้ว): เมนูซ้ายใต้หัวของทุกแผง · ทั้งชุดอยู่กลางจอ ----------
   ใช้ตั้งแต่ 1280px — จอแคบกว่านั้นคอลัมน์กลางจะแคบเกิน เลยซ่อน (ยังมีเมนูบนในหัวน้ำเงิน) */
@media (max-width: 1279px) { .dsk-side.ix-side { display: none; } }
@media (min-width: 1280px) {
  /* แบบ A (mockup_index_wide.html): กว้างเกือบเต็มจอ 1840 — body นำหน้าให้ชนะ .app:has(.ix) 1280 ใน index_home.css ที่โหลดทีหลัง */
  body .app:has(.ix-side) { max-width: 1600px; } /* ผู้ใช้ขอแคบลงจาก 1840 (กรอบที่วาด ~1550) */
  /* แผงหน้าหลัก: เมนู | เนื้อหา | LIVE */
  .ix-grid:has(> .ix-side) { grid-template-columns: 280px minmax(0, 1fr) 360px; }
  .ix-grid > .ix-side { grid-row: 1 / span 4; top: 16px; } /* index ไม่มีแถบบนติดจอ → ชิดขอบบน ไม่เว้นช่องว่าง */
  /* แผงนักเรียน/ครู/โรงเรียน/สปอนเซอร์: หัวเต็มจอ แล้ว เมนู | เนื้อหา — เมนูตรงตำแหน่งเดียวกับแผงหน้าหลัก */
  .ixs:has(> .ix-side) { display: grid; grid-template-columns: minmax(0, 1fr) 280px 22px minmax(0, 1234px) minmax(0, 1fr); align-items: start; }
  .ixs:has(> .ix-side) > :not(.ix-side):not(.ixh):not(.ixs-bnr):not(script):not(.ix-tabs) { max-width: none; }
  .ixs:has(> .ix-side) > * { grid-column: 4; }
  /* margin auto ใน grid ทำให้กล่องหดตามเนื้อหา → บังคับเต็มช่อง (max-width เดิมยังคุมอยู่) */
  .ixs:has(> .ix-side) > :not(.ix-side):not(.ixh):not(.ixs-bnr):not(script) { width: 100%; box-sizing: border-box; }
  .ixs:has(> .ix-side) > :is(.ixh, .ixs-bnr, .ix-tabs) { grid-column: 1 / -1; }
  .ixs > .ix-side { grid-column: 2; grid-row: 3 / span 60; top: 16px; margin-top: 22px; }
}
/* ---------- search.php (แบบ A): กว้างเท่า index · หัวค้นหาเป็นการ์ด · แท็บ "สำหรับคุณ" = เนื้อหา | แถบขวา ---------- */
.sr-home, .sr-h-hero, .sr-h-rail, .sr-h-box { display: contents; }
@media (min-width: 1024px) {
  body .app.has-dsk:has(.sr-page) { max-width: 1600px; }
  .dsk-main .sr-page { max-width: none; padding-bottom: 0; }
  .dsk-main .sr-head { position: static; border-radius: 18px; padding: 14px 18px 2px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .dsk-main .sr-sec { margin-left: 2px; margin-right: 2px; }
  .dsk-main .sr-hero, .dsk-main .sr-rank, .dsk-main .sr-list { margin-left: 0; margin-right: 0; }
  .dsk-main .sr-grid { padding: 0; }
  .dsk-main .sr-grid.sr-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .dsk-main #srOut > .sr-grid.sr-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* ผลค้นหา/แท็บสื่อ: เต็มความกว้าง → 6 ต่อแถว */
  .sr-home { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 20px; row-gap: 18px; align-items: start; margin-top: 16px; }
  .sr-h-hero { display: block; grid-column: 1; grid-row: 1; min-width: 0; }
  .sr-h-hero .sr-hero { margin: 0; }
  .sr-h-grid { display: block; grid-column: 1; grid-row: 2; min-width: 0; }
  .sr-h-rail { display: flex; flex-direction: column; gap: 18px; grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 88px; }
  .sr-h-box { display: block; background: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .sr-h-box .sr-sec { margin: 0 0 8px; }
  .sr-h-box .sr-rank, .sr-h-box .sr-list { box-shadow: none; padding-left: 0; padding-right: 0; border-radius: 0; }
}
/* ---------- home.php คลังของฉัน + แนะนำสำหรับคุณ (.hm-mats · แบบ C) ----------
   มือถือ: ซ้อนกัน (คลังรายการ → แนะนำ 3 ต่อแถว 6 ใบ) · จอคอม: คลัง 340px | แนะนำ 4×2 */
.hm-mats { background: #fff; border-radius: 18px; padding: 14px 12px; margin: 14px 0; box-shadow: 0 2px 10px rgba(11, 30, 63, .05); display: flex; flex-direction: column; gap: 18px; }
.hm-mh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hm-mh b { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #0b1e3f; }
.hm-mh b small { font-weight: 500; color: #7a849c; font-size: 12px; }
.hm-mh a { font-size: 12.5px; font-weight: 600; color: #7b5cd6; white-space: nowrap; }
.hm-dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.hm-dot.b { background: #e9eefc; color: #2f5fe0; } .hm-dot.y { background: #fff3d6; color: #c98a00; }
.hm-dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ml-list { background: #f8f9fd; border-radius: 14px; padding: 4px 10px; }
.ml-it { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid #eceff6; color: #0b1e3f; text-decoration: none; }
.ml-it:first-child { border-top: 0; }
.ml-th { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; display: grid; place-items: center; color: #fff; padding: 0 !important; }
.ml-th img { width: 100%; height: 100%; object-fit: cover; }
.ml-th svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ml-t { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.ml-t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ml-t small { color: #7a849c; font-size: 11.5px; }
.ml-it em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #2f5fe0; background: #eef2ff; border-radius: 99px; padding: 3px 10px; flex: none; }
.ml-it:hover em { background: #2f5fe0; color: #fff; }
.hm-mats .sr-grid { padding: 0; }
.hm-mats .sr-grid > .sr-mcard:nth-child(n+7) { display: none; }
.hm-mats .ix-empty { text-align: center; color: #7a849c; font-size: 13px; padding: 18px 0; margin: 0; }
/* ขนาดไอคอน/ปุ่มท้าย — คัดจาก index_home.css (.ix-mg) เพราะหน้านี้ไม่ได้โหลดไฟล์นั้น */
.hm-mats .sr-mcv svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.hm-mats .sr-tag svg { width: 9px; height: 9px; fill: currentColor; stroke: none; }
.hm-mats .ix-mg-all { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 12px 0 0; height: 40px; border-radius: 12px; background: #f3f0ff; color: #7b5cd6; font-size: 13px; font-weight: 700; }
.hm-mats .ix-mg-all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (min-width: 1024px) {
  .hm-mats { padding: 18px 20px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
  .hm-mats .sr-grid.sr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .hm-mats .sr-grid > .sr-mcard:nth-child(n+7) { display: flex; }
}/* ---------- profile.php (แบบ B · mockup_profile.html): หัวปก + ฟอร์มคู่ — มือถือคงเดิม (มีแค่หัวข้อ บิดา/มารดา เพิ่ม) ---------- */
.pfx-cover, .pfx-forms { display: contents; }
.pfx-who, .pfx-prog { display: none !important; }
.pfx-gh { font-size: 14px; font-weight: 700; color: #0b1e3f; margin: 6px 0 2px; display: flex; align-items: center; gap: 8px; }
.pfx-gh::after { content: ""; flex: 1; height: 1px; background: #e6e9f2; }
@media (min-width: 1024px) {
  .pf-page:has(.pfx-cover) { max-width: none; padding: 0; }
  .pf-page input.pf-input, .pf-page select.pf-input, .pf-page .pf-input::placeholder { text-align: left; text-align-last: left; padding-left: 14px; }
  .pf-page .pf-card { max-width: none; border-radius: 18px; }
  /* หัวปก */
  .pfx-cover { display: block; position: relative; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); margin-bottom: 18px; }
  .pfx-cover::before { content: ""; display: block; height: 120px; background: linear-gradient(110deg, #0b1e3f, #1d3a8a 50%, #7b5cd6); }
  .pfx-cover .pf-avatar { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-end; gap: 18px; margin: -60px 0 0; padding: 0 24px 18px; background: none; box-shadow: none; border: 0; border-radius: 0; text-align: left; }
  .pfx-cover .pf-avatar-ring { flex: none; margin: 0; width: 120px; height: 120px; border: 4px solid #fff; border-radius: 50%; }
  .pfx-who { display: block !important; flex: 1; padding-bottom: 6px; min-width: 0; }
  .pfx-who b { display: block; font-size: 20px; font-weight: 800; color: #0b1e3f; } .pfx-who small { font-size: 12.5px; color: #7a849c; }
  .pfx-cover .pf-btn-pill { margin: 0 0 6px; }
  .pfx-prog { display: block !important; width: 280px; margin-bottom: 6px; }
  .pfx-prog[hidden] { display: none !important; }
  .pfx-prog b { display: flex; justify-content: space-between; font-size: 13px; color: #0b1e3f; } .pfx-prog em { font-style: normal; color: #2f5fe0; }
  .pfx-prog i { display: block; height: 8px; border-radius: 99px; background: #eef0f5; overflow: hidden; margin-top: 6px; }
  .pfx-prog i span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #2f5fe0, #7b5cd6); transition: width .3s; }
  /* ฟอร์มคู่ (บทบาทที่ไม่มีข้อมูลครอบครัว: ฟอร์มเดียวเต็มแถว ช่องกรอก 2 คอลัมน์) */
  .pfx-forms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .pfx-forms > form.pf-card { margin: 0; padding: 20px 22px; display: grid; grid-template-columns: 1fr; column-gap: 16px; align-content: start; }
  .pfx-forms > form:only-of-type { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .pfx-forms > form > :is(input[type=hidden], .pf-card-t, .pf-card-sub, .pf-save, .pf-fam-group) { grid-column: 1 / -1; }
  .pfx-forms .pf-fam-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .pfx-forms .pfx-gh { grid-column: 1 / -1; }
  .pfx-forms .pf-save { justify-self: end; width: auto; padding: 0 36px; }
}
/* ---------- grades.php รายการผลการเรียน (แบบ B · mockup_grades.html): ตาราง · มือถือแถวเป็นการ์ด ---------- */
.grx { color: #0b1e3f; }
.grx svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.grx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.grx-head h3 { margin: 0; font-size: 18px; } .grx-head p { margin: 2px 0 0; color: #7a849c; font-size: 12.5px; }
.grx-add { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: #0b1e3f; color: #fff !important; border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 13.5px; }
.grx-add svg { width: 16px; height: 16px; }
.grx-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.grx-kpi div { border-radius: 14px; padding: 10px 12px; color: #fff; } .grx-kpi small { display: block; font-size: 11px; opacity: .88; } .grx-kpi b { font-size: 20px; font-weight: 800; }
.grx-kpi .k1 { background: linear-gradient(135deg, #2f5fe0, #5b7cfa); } .grx-kpi .k2 { background: linear-gradient(135deg, #18a058, #3cc47c); }
.grx-kpi .k3 { background: linear-gradient(135deg, #f2a516, #f7c64a); } .grx-kpi .k4 { background: linear-gradient(135deg, #7b5cd6, #a28af0); }
.grx-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grx-tbl thead { display: none; }
.grx-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: start; background: #f8f9fd; border-radius: 14px; padding: 12px; margin-bottom: 8px; }
.grx-tbl td { padding: 0; }
.grx-tbl td:nth-child(3), .grx-tbl td.grx-acts { grid-column: 1 / -1; }
.grx-tbl td:nth-child(4) { grid-column: 2; grid-row: 1; justify-self: end; }
.grx-tbl td:nth-child(2) { grid-column: 1; }
.grx-tbl td.lv b { display: block; } .grx-tbl td.lv small { color: #7a849c; font-size: 12px; }
.grx-chip { display: inline-block; min-width: 60px; text-align: center; border-radius: 99px; padding: 4px 12px; color: #fff; font-weight: 800; font-size: 14px; }
.grx-t { display: flex; align-items: center; gap: 8px; min-width: 0; } .grx-t img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.grx-t b { display: block; font-size: 12.5px; } .grx-t span { display: block; color: #7a849c; font-size: 11.5px; }
.grx-st { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.grx-st svg { width: 13px; height: 13px; }
.grx-st.ok { background: #e4f6ee; color: #18a058; } .grx-st.wait { background: #fff1e3; color: #e07a10; } .grx-st.bad { background: #ffe8ee; color: #e0455a; }
.grx-acts { display: flex !important; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.grx-acts form { margin: 0; }
.grx-acts a, .grx-acts button { border: 0; border-radius: 10px; padding: 7px 12px; font: 600 12.5px inherit; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.grx-acts .ed { background: #eef2ff; color: #2f5fe0 !important; } .grx-acts .dl { background: #fff0f2; color: #e0455a; } .grx-acts .ch { background: #fff6dc; color: #b07a00; margin-right: auto; }
.grx-acts .cheer-ic { width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .pf-page:has(.grx) { max-width: none; padding: 0; }
  .pf-page .grx { max-width: none; border-radius: 18px; padding: 20px 22px; }
  .grx-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .grx-kpi div { padding: 12px 14px; } .grx-kpi b { font-size: 24px; }
  .grx-tbl thead { display: table-header-group; }
  .grx-tbl tr { display: table-row; background: none; border-radius: 0; padding: 0; margin: 0; }
  .grx-tbl th { text-align: left; font-size: 12px; color: #7a849c; font-weight: 600; padding: 8px 12px; border-bottom: 1px solid #e6e9f2; }
  .grx-tbl td { display: table-cell !important; padding: 12px; border-bottom: 1px solid #f2f4f9; vertical-align: top; } /* ทุกช่องชิดบนเสมอ */
  .grx-tbl tbody tr:hover td { background: #fafbff; }
  .grx-acts { white-space: nowrap; } .grx-acts > * { display: inline-flex; vertical-align: middle; margin-left: 6px; } .grx-acts form { display: inline-block; }
  .grx-acts .ch { margin-right: 0; }
}
/* ---------- awards.php รายการ (แบบ B · mockup_awards.html) — ใช้ .grx- ร่วม + ส่วนเฉพาะ .awx- ---------- */
.awx-kpi .kw { background: linear-gradient(135deg, #f08a24, #f6a95a); } .awx-kpi .kr { background: linear-gradient(135deg, #e0455a, #f07a8a); }
.awx-tbl td.awx-t { display: flex !important; align-items: flex-start; gap: 12px; grid-column: 1; } /* รูปชิดบนเสมอ แม้ข้อความยาวหลายบรรทัด */
.awx-tbl td.awx-t .awx-th { margin-top: 2px; }
.awx-tbl td.awx-t > span:last-child { min-width: 0; }
.awx-tbl td.awx-t b { display: block; } .awx-tbl td.awx-t small { display: block; color: #7a849c; font-size: 12px; }
.awx-tbl td.awx-t small.awx-held { color: #e0455a; font-weight: 600; }
.awx-th { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #fff6dc, #ffe9a8); color: #c98a00; }
.awx-th img { width: 100%; height: 100%; object-fit: cover; } .awx-th svg { width: 26px; height: 26px; stroke-width: 1.7; }
.awx-tbl td.awx-d { grid-column: 1 / -1; color: #55607a; font-size: 12.5px; }
.awx-tbl td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
.awx-tbl td.grx-acts { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; } /* ตารางนี้มี 4 คอลัมน์: คอลัมน์ที่ 4 คือปุ่ม ไม่ใช่สถานะแบบ grades */
.awx-th-b { background: linear-gradient(135deg, #e9eefc, #cfdafc); color: #2f5fe0; } /* activities.php */
.dcx-ic { width: 40px; height: 48px; flex: none; } .dcx-ic svg { width: 100%; height: 100%; } /* documents.php */
.dcx-type { background: #eef1f8; color: #55607a; }
@media (min-width: 1024px) {
  .pf-page:has(.awx-tbl) { max-width: none; padding: 0; }
  .awx-tbl td.awx-t { display: flex !important; border-bottom: 1px solid #f2f4f9; }
  .awx-tbl td.awx-d { font-size: 13.5px; color: #0b1e3f; }
}
/* ---------- grades.php?form=1 / ?edit= (แบบ A · mockup_grades_form.html) — มือถือ: กล่อง .gfx-* เป็น display:contents หน้าตาเดิม ---------- */
.gfx-grid, .gfx-left, .gfx-right, .gfx-sec, .gfx-row2, .gfx-submit { display: contents; }
.gfx-h, .gfx-cancel { display: none; }
@media (min-width: 1024px) {
  .gfx-page { max-width: none; padding: 0; }
  .gfx-page .gfx-intro { display: none; }
  .gfx-page #grForm { max-width: none; background: none; box-shadow: none; padding: 0; border: 0; }
  .gfx-page input.pf-input, .gfx-page select.pf-input, .gfx-page .pf-input::placeholder, .gfx-page .gr-search input { text-align: left; text-align-last: left; }
  .gfx-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .gfx-left { display: block; } .gfx-right { display: block; position: sticky; top: 88px; }
  .gfx-sec { display: block; background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); margin-bottom: 16px; }
  .gfx-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .gfx-h b { font-size: 16px; color: #0b1e3f; } .gfx-h small { color: #7a849c; font-size: 12px; }
  .gfx-h i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #0b1e3f; color: #ffd76a; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
  .gfx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gfx-row2 .pf-field { margin: 0; }
  .gfx-page .gr-gpa-calc { display: block; height: auto; min-height: 0; margin-top: 14px; border: 0; border-radius: 16px; padding: 16px; color: #fff; background: linear-gradient(135deg, #2f5fe0, #7b5cd6); text-align: center; }
  .gfx-page .gr-gpa-calc span { font-size: 12px; opacity: .85; color: #fff; } .gfx-page .gr-gpa-calc b { display: block; font-size: 40px; font-weight: 800; line-height: 1.1; color: #fff; }
  .gfx-page .gr-sec, .gfx-page .gr-sec2 { display: none; }
  .gfx-page #grTeachers { max-height: 520px; overflow-y: auto; padding-right: 4px; }
  .gfx-page #grTeachers .gr-teacher { margin: 0 0 10px; }
  .gfx-submit { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
  .gfx-cancel { display: inline-block; color: #55607a !important; font-weight: 600; font-size: 14px; padding: 0 14px; }
  .gfx-submit .gr-submit { width: auto; padding: 0 40px; margin: 0; }
}
/* ---------- skills.php จอคอม: การ์ดภาพรวม (.ov) + ผลประเมินรายครู · มือถือใช้ .sk-old เดิม ---------- */
.skx { display: none; }
@media (min-width: 1024px) {
  .pf-page:has(.skx) { max-width: none; padding: 0; }
  .skx { display: block; } .sk-old { display: none; }
  .skx .ov { margin-top: 0; } .skx .ov-h > a { display: none; } /* ลิงก์ "รายละเอียด" ชี้มาหน้านี้เอง */
  .skx-list { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(11, 30, 63, .05); color: #0b1e3f; }
  .skx-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .skx-h b { font-size: 16px; } .skx-h small { color: #7a849c; font-size: 12px; }
  .skx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .skx-c { border: 1px solid #edf0f5; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
  .skx-t { display: flex; align-items: center; gap: 10px; } .skx-t img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
  .skx-t div { min-width: 0; flex: 1; } .skx-t b { display: block; font-size: 14px; } .skx-t span { color: #7a849c; font-size: 12px; } .skx-t small { color: #7a849c; font-size: 11.5px; white-space: nowrap; }
  .skx-n { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .skx-n div { background: #f6f8ff; border-radius: 12px; padding: 8px 12px; } .skx-n small { display: block; font-size: 11px; color: #7a849c; }
  .skx-n b { font-size: 20px; font-weight: 800; color: #2f5fe0; } .skx-n em { font-style: normal; font-size: 11px; color: #7a849c; margin-left: 3px; }
  .skx-cm { margin: 0; font-size: 13px; color: #33415e; background: #fafbfe; border-radius: 12px; padding: 10px 12px; flex: 1; } .skx-cm span { color: #9aa3b8; }
  .skx-cheer { align-self: flex-end; border: 0; border-radius: 10px; padding: 7px 12px; background: #fff6dc; color: #b07a00; font: 600 12.5px inherit; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
  .skx-cheer .cheer-ic { width: 16px; height: 16px; }
}
/* ---------- awards.php?form / ?edit — ใช้โครง .gfx- ของฟอร์มผลการเรียน: ซ้าย ภาพยืนยัน+เอกสาร | ขวา ข้อมูล ---------- */
.awf-doc { display: none; }
@media (min-width: 1024px) {
  .awf .awf-t { display: none; }
  .awf .ev-note { margin: 0 0 14px; background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 2px 10px rgba(11, 30, 63, .05); }
  .awf-grid { grid-template-columns: 360px minmax(0, 1fr); }
  .awf-side { order: 0; } .awf-main { order: 1; }
  .awf-doc { display: block; }
  .awf .aw-upload { width: 100%; margin: 0; aspect-ratio: 4 / 3; height: auto; }
  .awf .aw-upload img { width: 100%; height: 100%; object-fit: cover; }
  .awf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .awf-row .pf-field { margin-bottom: 12px; }
  .awf-attach { margin: 0; }
}
/* ---------- intro.php / documents.php?form=1 — โครง .gfx- เหมือนฟอร์มรางวัล · endorsers.php การ์ด 3 คอลัมน์ ---------- */
.en-kpi { display: none; }
@media (min-width: 1024px) {
  .gfx-page .pf-card.gfx-form { max-width: none; background: none; box-shadow: none; padding: 0; border: 0; }
  .gfx-form .gfx-sec .pf-field:last-child { margin-bottom: 0; }
  .gfx-form .pf-area { min-height: 130px; text-align: left; text-align-last: left; padding: 12px 14px; }
  .gfx-form .gfx-submit .pf-save { width: auto; padding: 0 44px; margin: 0; }
  .in-vsec .in-video { max-height: none; aspect-ratio: 16 / 9; border-radius: 14px; }
  .in-vsec .in-upload, .in-vsec .in-video-del { border-radius: 14px; }
  .in-vsec .in-upload { padding: 40px 16px 34px; }
  .dcf .awf-t { display: none; }
  .dcf-grid { grid-template-columns: 380px minmax(0, 1fr); }
  .dcf-side { position: static; }
  .dcf-main .pf-field > label:not(.in-upload) { display: none; }
  .dcf .in-upload { border-radius: 16px; padding: 70px 16px 60px; background: #f8f9fd; }
  .dcf .in-upload svg { width: 64px; height: 64px; }
  .dcf-submit { grid-column: 1 / -1; }
  .enx-page { max-width: none; padding: 0; }
  .enx-page .en-wrap { padding: 18px 20px 22px; }
  .en-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
  .en-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .en-grid .en-item { margin: 0; border: 1px solid #edf0f5; border-radius: 16px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .en-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- menu.php (แบบ B · mockup_menu.html): หมวดซ้าย รายการขวา — มือถือ + จอคอม ---------- */
.mnx { padding: 14px 16px 8px; color: #0b1e3f; }
.mnx svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mnx-card { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
.mnx-me { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mnx-me img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid #ffd76a; flex: none; }
.mnx-me div { min-width: 0; } .mnx-me b { display: block; font-size: 16px; } .mnx-me small { color: #7a849c; font-size: 12.5px; }
.mnx-me a { margin-left: auto; background: #0b1e3f; color: #fff !important; border-radius: 99px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mnx-wrap { display: grid; gap: 14px; }
.mnx-side { display: contents; }
.mnx-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; order: 0; }
.mnx-cats::-webkit-scrollbar { display: none; }
.mnx-cats button { border: 0; background: #fff; border-radius: 12px; padding: 10px 14px; font: 600 13px inherit; font-family: inherit; color: #55607a; cursor: pointer; display: flex; align-items: center; gap: 10px; white-space: nowrap; box-shadow: 0 2px 10px rgba(11, 30, 63, .05); }
.mnx-cats button svg { width: 18px; height: 18px; flex: none; }
.mnx-cats button span { margin-left: auto; font-size: 11px; background: #eef1f8; color: #55607a; border-radius: 99px; padding: 0 8px; }
.mnx-cats button.on { background: #0b1e3f; color: #fff; }
.mnx-cats button.on span { background: rgba(255, 255, 255, .15); color: #fff; }
.mnx-wal { order: 2; border-radius: 18px; padding: 16px; color: #fff; background: linear-gradient(130deg, #0b1e3f, #1d3a8a 55%, #6d4fd8); }
.mnx-wal small { opacity: .75; font-size: 12px; }
.mnx-wal strong { display: block; font-size: 30px; font-weight: 800; }
.mnx-wal strong em { font-style: normal; font-size: 13px; color: #ffd76a; margin-left: 6px; }
.mnx-wal-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mnx-wal-r a { background: rgba(255, 255, 255, .12); border-radius: 10px; padding: 8px 4px; font-size: 12.5px; color: #fff !important; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.mnx-wal-r svg { width: 15px; height: 15px; }
.mnx-main { order: 1; min-width: 0; }
.mnx-pane h3 { margin: 0 0 4px; font-size: 18px; }
.mnx-pane > p { margin: 0 0 14px; color: #7a849c; font-size: 13px; }
.mnx-rows { display: grid; gap: 8px; }
.mnx-row { display: flex; align-items: center; gap: 12px; background: #f8f9fd; border-radius: 14px; padding: 10px 12px; color: #0b1e3f !important; transition: background .12s; }
.mnx-row:hover { background: #eef2ff; }
.mnx-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--bg); color: var(--fg); flex: none; position: relative; }
.mnx-ic svg { width: 21px; height: 21px; }
.mnx-ic i { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 99px; background: #ff5e62; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; }
.mnx-t { min-width: 0; } .mnx-t b { display: block; font-size: 14px; } .mnx-t small { font-size: 12px; color: #7a849c; }
.mnx-ch { margin-left: auto; color: #b0b8cc; } .mnx-ch svg { width: 18px; height: 18px; }
.mnx-out { order: 3; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 14px; border: 1.5px solid #ffd0d6; color: #e0455a !important; background: #fff; font-weight: 700; font-size: 14px; }
.mnx-out svg { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .mnx { padding: 0; }
  .mnx-wrap { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .mnx-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; grid-row: 1 / span 2; }
  .mnx-main, .mnx-out { grid-column: 2; }
  .mnx-cats { flex-direction: column; overflow: visible; background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .mnx-cats button { box-shadow: none; width: 100%; }
  .mnx-wal-r a { font-size: 11.5px; }
  .mnx-rows { grid-template-columns: 1fr 1fr; }
}
/* ---------- home.php My goal (includes/home_goal.php · แบบ E การ์ดเป้าหมาย) — มือถือ + จอคอม ---------- */
.hg { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); color: #0b1e3f; margin: 14px 0; }
.hg-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hg-h b { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.hg-h b small { font-weight: 500; color: #7a849c; font-size: 12px; }
.hg-h a { font-size: 12.5px; font-weight: 600; color: #7b5cd6; }
.hg-ic { width: 28px; height: 28px; border-radius: 9px; background: #fff3d6; color: #c98a00; display: grid; place-items: center; }
.hg svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hg-ic svg { width: 16px; height: 16px; }
.hg-sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: linear-gradient(135deg, #0b1e3f, #1d3a8a); color: #fff; border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; }
.hg-sum small { display: block; font-size: 11.5px; opacity: .8; }
.hg-sum b { font-size: 24px; font-weight: 800; color: #ffd76a; }
.hg-tr { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.hg-tr i { color: rgba(255, 255, 255, .22); display: block; } .hg-tr i.on { color: #ffd76a; }
.hg-tr svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.hg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hg-c { border-radius: 14px; padding: 10px; background: var(--bg); color: #0b1e3f; position: relative; min-height: 104px; display: flex; flex-direction: column; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.hg-c:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11, 30, 63, .08); }
.hg-ci { width: 28px; height: 28px; border-radius: 9px; background: #fff; color: var(--fg); display: grid; place-items: center; }
.hg-ci svg { width: 15px; height: 15px; }
.hg-c b { font-size: 12px; font-weight: 600; margin-top: 6px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hg-p { margin-top: auto; display: flex; align-items: center; gap: 6px; padding-top: 6px; }
.hg-p i { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .75); overflow: hidden; }
.hg-p i em { display: block; height: 100%; background: var(--fg); border-radius: 99px; }
.hg-p > span { font-size: 11.5px; font-weight: 800; color: var(--fg); }
.hg-ck { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: #18a058; color: #fff; display: grid; place-items: center; }
.hg-ck svg { width: 12px; height: 12px; stroke-width: 3; }
.hg-more { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #7b5cd6; }
.hg-empty { color: #7a849c; font-size: 13px; text-align: center; padding: 10px 0; margin: 0; }
.hg-add { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; height: 38px; border-radius: 12px; border: 1.5px dashed #d9c27a; color: #b07a00 !important; font-size: 13px; font-weight: 700; background: #fffbef; }
.hg-add svg { width: 16px; height: 16px; }
@media (min-width: 1024px) { .hm-rail .hg { margin: 0; } }
/* ---------- home.php ภาพรวมการเรียนและทักษะ (includes/home_overview.php · แบบ B) — มือถือ + จอคอม ---------- */
.ov { background: #fff; border-radius: 18px; padding: 16px 14px; box-shadow: 0 2px 10px rgba(11, 30, 63, .05); margin: 14px 0; color: #0b1e3f; }
.ov-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ov-h b { font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-h b small { font-weight: 500; color: #7a849c; font-size: 12px; }
.ov-h a { font-size: 12.5px; font-weight: 600; color: #7b5cd6; white-space: nowrap; }
.ov-ic { width: 28px; height: 28px; border-radius: 9px; background: #e9eefc; color: #2f5fe0; display: grid; place-items: center; flex: none; }
.ov-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ov-st { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ov-t { border-radius: 14px; padding: 10px 12px; color: #fff; min-width: 0; }
.ov-t small { display: block; font-size: 11px; opacity: .88; }
.ov-t b { font-size: 22px; font-weight: 800; line-height: 1.2; }
.ov-t b em { font-style: normal; font-size: 11.5px; font-weight: 600; opacity: .85; margin-left: 4px; }
.ov-t.t1 { background: linear-gradient(135deg, #2f5fe0, #5b7cfa); } .ov-t.t2 { background: linear-gradient(135deg, #f2a516, #f7c64a); }
.ov-t.t3 { background: linear-gradient(135deg, #7b5cd6, #a28af0); } .ov-t.t4 { background: linear-gradient(135deg, #18a058, #3cc47c); }
.ov-body { display: grid; gap: 14px; margin-top: 14px; }
.ov-radar svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; font-family: inherit; }
.ov-bars { display: grid; gap: 9px; }
.ov-bar { display: grid; grid-template-columns: 128px minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: 12.5px; }
.ov-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.ov-bar span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.ov-bar i { height: 10px; border-radius: 99px; background: #eef0f5; overflow: hidden; display: block; }
.ov-bar i em { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.ov-bar b { text-align: right; font-size: 13px; }
.ov-hl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ov-hl div { border-radius: 12px; padding: 8px 12px; font-size: 12px; }
.ov-hl .up { background: #e4f6ee; color: #18a058; } .ov-hl .dn { background: #fff1e3; color: #e07a10; }
.ov-hl b { display: block; font-size: 13px; color: #0b1e3f; }
.ov-empty { color: #7a849c; font-size: 13px; text-align: center; padding: 16px 0 4px; margin: 0; }
.ov-empty a { color: #2f5fe0; font-weight: 700; }
@media (min-width: 1024px) {
  .ov { padding: 18px 20px; }
  .ov-st { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ov-t { padding: 12px 14px; } .ov-t b { font-size: 26px; } .ov-t small { font-size: 11.5px; }
  .ov-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 16px; }
}
/* ---------- home.php ผลการเรียน (includes/home_gpa.php · แบบ A) — ใช้ทั้งมือถือและจอคอม ---------- */
.gx { background: #fff; border-radius: 18px; padding: 16px 14px; box-shadow: 0 2px 10px rgba(11, 30, 63, .05); margin: 14px 0; color: #0b1e3f; }
.gx-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.gx-h b { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.gx-h b small { font-weight: 500; color: #7a849c; font-size: 12px; }
.gx-h a { font-size: 12.5px; font-weight: 600; color: #7b5cd6; white-space: nowrap; }
.gx-h2 { margin-bottom: 10px; } .gx-h2 b { font-size: 14px; }
.gx-ic { width: 28px; height: 28px; border-radius: 9px; background: #e9eefc; color: #2f5fe0; display: grid; place-items: center; flex: none; }
.gx-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gx-body { display: grid; gap: 16px; }
.gx-left { display: grid; gap: 14px; min-width: 0; }
.gx-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gx-k { border-radius: 14px; padding: 10px 12px; color: #fff; min-width: 0; }
.gx-k small { display: block; font-size: 11px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-k b { font-size: 22px; font-weight: 800; line-height: 1.2; }
.gx-k b em { font-style: normal; font-size: 11.5px; font-weight: 600; opacity: .85; margin-left: 4px; }
.gx-k.k1 { background: linear-gradient(135deg, #2f5fe0, #5b7cfa); } .gx-k.k2 { background: linear-gradient(135deg, #18a058, #3cc47c); } .gx-k.k3 { background: linear-gradient(135deg, #7b5cd6, #a28af0); }
.gx-chart svg { width: 100%; height: auto; display: block; font-family: inherit; }
.gx-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gx-s { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; background: #f8f9fd; border-radius: 12px; font-size: 13px; }
.gx-s > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-s small { display: block; color: #7a849c; font-size: 11px; }
.gx .gr { min-width: 44px; text-align: center; border-radius: 99px; padding: 3px 9px; color: #fff; font-weight: 800; font-size: 13px; }
.gr.g4 { background: #18a058; } .gr.g35 { background: #2f8fe0; } .gr.g3 { background: #2f5fe0; } .gr.g25 { background: #f0a020; } .gr.g2 { background: #f08a24; } .gr.g1 { background: #e0455a; }
.gx-tag { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.gx-tag.ok { background: #e4f6ee; color: #18a058; } .gx-tag.wait { background: #fff1e3; color: #e07a10; }
.gx-empty { color: #7a849c; font-size: 13px; text-align: center; padding: 14px 0; margin: 0; }
.gx-empty a { color: #2f5fe0; font-weight: 700; }
.gx-btn { display: flex; align-items: center; justify-content: center; margin-top: 14px; height: 40px; border-radius: 12px; background: #f3f0ff; color: #7b5cd6 !important; font-size: 13px; font-weight: 700; }
@media (min-width: 1024px) {
  .gx { padding: 18px 20px; }
  .gx-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .gx-k { padding: 12px 14px; } .gx-k b { font-size: 24px; } .gx-k small { font-size: 11.5px; }
}
/* ---------- feed.php (แบบ A · mockup_feed.html): ฟีดกลาง ≤760 | แถบขวา 380 (โฆษณา + เพื่อนแนะนำ + การ์ดโปรไฟล์) ---------- */
.fd-home, .fd-col { display: contents; }
.fd-rail { display: none; }
@media (min-width: 1024px) {
  body .app.has-dsk:has(.fd-home) { max-width: 1600px; }
  .dsk-main > .container:has(.fd-home) { padding: 0; }
  .fd-home { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
  .fd-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 760px; width: 100%; margin: 0 auto; }
  .fd-col > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  .fd-col .fd-friends { display: none; } /* อยู่ในแถบขวาแล้ว */
  .fd-col .fd-post { background: #fff; border-radius: 18px; padding: 14px 16px 12px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .fd-col .fd-post img { max-height: 560px; object-fit: cover; }
  .fd-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: none; }
  .fd-rail .ads-slider { margin: 0; border-radius: 18px; overflow: hidden; }
  .fd-rail .ads-slider .ads-item img { height: 150px; object-fit: cover; }
  .fd-rail .profile-dashboard-v2 { margin: 0; }
  .fd-rcard { background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .fd-rhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: #0b1e3f; font-size: 15px; }
  .fd-rhead a { font-size: 12.5px; font-weight: 600; color: #7b5cd6; }
  .fd-rfr { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0f2f7; }
  .fd-rhead + .fd-rfr { border-top: 0; }
  .fd-rfr img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
  .fd-rfr span { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: #0b1e3f; }
  .fd-rfr span b, .fd-rfr span small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fd-rfr span small { color: #7a849c; font-size: 11.5px; }
  .fd-rfr form { margin: 0; }
  .fd-rfr button { border: 0; background: #0b1e3f; color: #fff; font: 600 12px 'Noto Sans Thai', sans-serif; border-radius: 99px; padding: 6px 14px; cursor: pointer; }
  .fd-rfr button:hover { background: #1d3a8a; }
}
/* index.php นักเรียนยอดเยี่ยม + ครูยอดนิยม (.ix-two-dt) ก่อนสื่อการสอน — มือถือไม่แสดง (กล่อง .ixb-dt เป็นของจอคอม) */
@media (max-width: 1023px) { .ix-two-dt { display: none; } }
/* index.php สื่อการสอน (.ix-mg ในแผงหน้าหลัก): จอคอมแถวละ 5 × 3 แถว = 15 รายการ · จอเล็กกว่าแสดง 9 เหมือนเดิม */
@media (max-width: 1279px) { .ix-grid .ix-mg.sr-grid > .sr-mcard:nth-child(n+10) { display: none; } }
@media (min-width: 1280px) { .ix-grid .ix-mg.sr-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- scholarships.php รายการทุน (แบบ B · mockup_scholarships.html): ตาราง ผู้สนับสนุน | ทุน | มูลค่า | สถานะ | ปุ่ม · มือถือการ์ดเดิม ---------- */
.sc-dk-n, .sc-dk-val, .sc-dk-sub, .sc-thead { display: none; }
@media (min-width: 1024px) {
  .sc-page:has(.sc-wrap) { max-width: none; padding: 0; }
  .sc-page .sc-menu-t, .sc-page .sc-intro { display: none; }
  .sc-page .sc-menu { gap: 10px; margin-bottom: 16px; }
  .sc-page .sc-tile { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; align-items: center; text-align: left; padding: 12px 16px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--c), var(--c2)); color: #fff; opacity: .6; transform: none; transition: opacity .15s, transform .15s; }
  .sc-page .sc-tile:hover, .sc-page .sc-tile.on { opacity: 1; } .sc-page .sc-tile.on { transform: translateY(-2px); }
  .sc-page .sc-tile::after { display: none; }
  .sc-page .sc-tile-ic { grid-row: 1 / span 2; margin: 0; background: rgba(255, 255, 255, .22); color: #fff; }
  .sc-page .sc-tile-l { order: 0; grid-column: 2; font-size: 12px; color: #fff; }
  .sc-page .sc-tile-n { order: 0; grid-column: 2; font-size: 24px; color: #fff; }
  .sc-page .sc-wrap { border-radius: 18px; padding: 20px 22px; }
  .sc-page .sc-list-t { margin: 0; font-size: 18px; font-weight: 700; color: #0b1e3f; }
  .sc-dk-sub { display: block; margin: 2px 0 14px; color: #7a849c; font-size: 12.5px; }
  .sc-thead, .sc-wrap .sc-item { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(200px, 1.5fr) 140px 185px 140px; column-gap: 14px; }
  .sc-thead { padding: 8px 12px; border-bottom: 1px solid #e6e9f2; font-size: 12px; font-weight: 600; color: #7a849c; }
  .sc-wrap .sc-item { align-items: start; padding: 16px 12px; margin: 0; border: 0; border-bottom: 1px solid #f2f4f9; border-radius: 0; }
  .sc-wrap .sc-item:hover { background: #fafbff; }
  .sc-wrap .sc-item .sc-box { margin: 0; padding: 0; border: 0; background: none; }
  .sc-wrap .sc-spo { grid-column: 1; grid-row: 1 / span 2; align-items: flex-start; gap: 12px; min-width: 0; }
  .sc-wrap .sc-spo > div:last-child { min-width: 0; }
  .sc-wrap .sc-logo { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; border-color: #edf0f5; }
  .sc-wrap .sc-spo b { display: block; font-size: 14px; font-weight: 700; color: #0b1e3f; line-height: 1.4; }
  .sc-wrap .sc-spo-v { color: #7a849c; margin-top: 2px; }
  .sc-wrap .sc-detail { grid-column: 2; grid-row: 1; }
  .sc-wrap .sc-name { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: #0b1e3f; } .sc-wrap .sc-name b { display: none; }
  .sc-wrap .sc-cond > b, .sc-wrap .sc-cond ol { display: none; }
  .sc-dk-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: #7a849c; line-height: 1.6; }
  .sc-wrap .sc-reason { grid-column: 2; grid-row: 2; margin: 8px 0 0; background: #fff0f2; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: #e0455a; }
  .sc-wrap .sc-value { grid-column: 3; grid-row: 1 / span 2; } .sc-wrap .sc-value > b, .sc-wrap .sc-value > span { display: none; }
  .sc-dk-val { display: inline-flex; align-items: baseline; gap: 4px; background: #0b1e3f; color: #ffd76a; border-radius: 12px; padding: 6px 12px; font-style: normal; font-weight: 800; font-size: 16px; white-space: nowrap; }
  .sc-dk-val em { font-style: normal; font-size: 11px; color: #fff; opacity: .8; }
  .sc-wrap .sc-bar { grid-column: 4; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; background: none; color: #7a849c; font-size: 12px; border-radius: 0; }
  .sc-wrap .sc-bar span:first-child { border-radius: 99px; padding: 4px 11px; font-weight: 700; background: #e8eeff; color: #2f5fe0; }
  .sc-wrap .sc-bar.sc-bar-wait span:first-child { background: #fff1e3; color: #e07a10; }
  .sc-wrap .sc-bar.sc-bar-ok span:first-child { background: #e4f6ee; color: #18a058; }
  .sc-wrap .sc-bar.sc-bar-no span:first-child { background: #ffe8ee; color: #e0455a; }
  .sc-wrap .sc-act { grid-column: 5; grid-row: 1 / span 2; margin: 0; gap: 8px; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .sc-wrap .sc-act form button { width: 100%; }
  .sc-wrap .sc-act:empty { display: flex; }
  .sc-wrap .sc-act form { margin: 0; }
  .sc-wrap .sc-act .sc-more, .sc-wrap .sc-act .sc-send, .sc-wrap .sc-act .sc-cancel, .sc-wrap .sc-act .sc-status { box-sizing: border-box; width: 100%; min-width: 0; height: 38px; padding: 0 12px; border-radius: 11px; font-size: 13px; justify-content: center; display: inline-flex; align-items: center; }
}
/* 1024–1279: 3 คอลัมน์ — มูลค่าอยู่ใต้ชื่อทุน, ปุ่มอยู่ใต้สถานะ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sc-thead { display: none; }
  .sc-wrap .sc-item { grid-template-columns: minmax(150px, 1fr) minmax(0, 1.5fr) 150px; row-gap: 8px; }
  .sc-wrap .sc-spo { grid-row: 1 / span 3; }
  .sc-wrap .sc-value { grid-column: 2; grid-row: 2; } .sc-wrap .sc-reason { grid-row: 3; margin: 0; }
  .sc-wrap .sc-bar { grid-column: 3; grid-row: 1; } .sc-wrap .sc-act { grid-column: 3; grid-row: 2 / span 2; }
}
/* ---------- materials.php คลังสื่อ (แบบ A · mockup_materials.html): แท็บ segmented + ค้นหา · การ์ดขาว = หมวดซ้าย 230 sticky | หัว + กริด 4 ----------
   มือถือ/แท็บ "ซื้อสื่อ" เหมือนเดิม: .mtx-card/.mtx-wrap/.mtx-main = display:contents · ของใหม่ (.mtx-bar/.mtx-side/.mtx-h/.mtx-tag) ซ่อน */
.mtx-card, .mtx-wrap, .mtx-main { display: contents; }
.mtx-bar, .mtx-side, .mtx-h, .mtx-none, .mtx-tag { display: none; }
@media (min-width: 1024px) {
  .pf-page.mtx-page { max-width: none; padding: 0; }
  .mtx-page > .mt-tabs, .mtx-page > .mt-intro, .mtx-page > .mt-cats { display: none; }
  .mtx-page svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mtx-page .mtx-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .mtx-seg { display: inline-flex; background: #eef1f8; border-radius: 12px; padding: 4px; }
  .mtx-seg a { padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 13.5px; color: #55607a !important; text-decoration: none; }
  .mtx-seg a.on { background: #0b1e3f; color: #fff !important; }
  .mtx-q { margin-left: auto; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e6e9f2; border-radius: 12px; padding: 0 12px; height: 42px; width: 300px; color: #7a849c; }
  .mtx-q:focus-within { border-color: #2f5fe0; box-shadow: 0 0 0 3px rgba(47, 95, 224, .12); }
  .mtx-q svg { width: 17px; height: 17px; flex: none; }
  .mtx-q input { border: 0; background: none; outline: 0; font: 14px 'Noto Sans Thai', sans-serif; color: #0b1e3f; flex: 1; min-width: 0; }
  .mtx-page .mtx-card { display: block; background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); color: #0b1e3f; }
  .mtx-page .mtx-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
  .mtx-page .mtx-main { display: block; min-width: 0; }
  .mtx-page .mtx-side { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 88px; }
  .mtx-side b { font-size: 12px; color: #7a849c; font-weight: 600; margin: 0 0 6px 8px; }
  .mtx-side a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: #33415e !important; text-decoration: none; font-weight: 600; font-size: 14px; }
  .mtx-side a:hover { background: #f6f8fc; }
  .mtx-side a.on { background: #0b1e3f; color: #fff !important; }
  .mtx-side a i { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 13px; letter-spacing: -.3px; background: #f0f3fa; color: #0b1e3f; flex: none; white-space: nowrap; } /* flex ไม่ใช่ grid: ไม่งั้น <small>/<sub> ในตัวอักษรหมวดแตกเป็นหลายแถว */
  .mtx-side a i :is(small, sub, span) { font-size: inherit; vertical-align: baseline; font-weight: inherit; }
  .mtx-side .mtx-c-th i { color: #7b5cd6; } .mtx-side .mtx-c-en i { color: #2f5fe0; } .mtx-side .mtx-c-math i { color: #f08a24; }
  .mtx-side .mtx-c-science i { color: #18a058; } .mtx-side .mtx-c-social i { color: #e0455a; }
  .mtx-side a.on i { background: rgba(255, 255, 255, .15); color: #ffd76a; }
  .mtx-side a em { margin-left: auto; font-style: normal; font-size: 12px; opacity: .7; }
  .mtx-page .mtx-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
  .mtx-h h3 { margin: 0; font-size: 18px; } .mtx-h small { color: #7a849c; font-size: 12.5px; }
  .mtx-page .mtx-none:not([hidden]) { display: block; color: #7a849c; font-size: 13px; text-align: center; padding: 30px 0; margin: 0; }
  .mtx-page .mt-empty { margin: 30px 0; }
  .mtx-page .mt-grid.mt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; margin: 0; padding: 0; }
  .mtx-page .mt-item { min-width: 0; display: flex; flex-direction: column; gap: 4px; color: #0b1e3f; text-decoration: none; }
  .mtx-page .mt-item[hidden] { display: none !important; }
  .mtx-page .mt-grid .mt-cover { border-radius: 14px; aspect-ratio: 1 / 1; height: auto; width: 100%; transition: transform .15s, box-shadow .15s; }
  .mtx-page .mt-item:hover .mt-cover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11, 30, 63, .14); }
  .mtx-page .mt-grid .mt-t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .mtx-page .mt-grid .mt-sub { font-size: 12px; color: #7a849c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtx-page .mt-vbadge { display: none; } /* ใช้ป้าย .mtx-tag ใต้การ์ดแทน */
  .mtx-page .mtx-tag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 9px; }
  .mtx-tag svg { width: 12px; height: 12px; }
  .mtx-tag.gift { background: #fff6dc; color: #b07a00; } .mtx-tag.vid { background: #e8eeff; color: #2f5fe0; } .mtx-tag.doc { background: #eef0f4; color: #55607a; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .mtx-page .mtx-wrap { grid-template-columns: 190px minmax(0, 1fr); }
  .mtx-page .mt-grid.mt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---------- goals.php เป้าหมาย (แบบ A · mockup_goals.html): ฟอร์มซ้าย 400 sticky | การ์ดปก + วงแหวน % ----------
   จอคอมใช้ .gol · มือถือใช้ .gol-old (โครงเดิม) — สลับกันที่ 1024px · prefix gol- (gm- ชนกับ modal ของขวัญใน stylepak.css) */
.gol { display: none; }
.gol-tb svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 5px; color: #e0455a; }
@media (min-width: 1024px) {
  .gol-old { display: none; }
  .gol { display: block; color: #0b1e3f; }
  .gol svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .gol-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 18px; align-items: start; }
  .gol-card { background: #fff; border-radius: 18px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); padding: 18px 20px; }
  .gol-form { position: sticky; top: 88px; margin: 0; }
  .gol-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .gol-h b { display: block; font-size: 16px; } .gol-h small { display: block; color: #7a849c; font-size: 12px; }
  .gol-hic { width: 30px; height: 30px; border-radius: 10px; background: #0b1e3f; color: #ffd76a; display: grid; place-items: center; flex: none; }
  .gol-hic svg { width: 16px; height: 16px; }
  .gol-up { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; border: 1.5px dashed #c9d2ea; border-radius: 14px; padding: 22px 14px; background: #f8f9fd; text-align: center; cursor: pointer; }
  .gol-up:hover { border-color: #2f5fe0; }
  .gol-upi { width: 46px; height: 46px; border-radius: 14px; background: #e9eefc; color: #2f5fe0; display: grid; place-items: center; margin-bottom: 4px; }
  .gol-upi svg { width: 22px; height: 22px; }
  .gol-up b { font-size: 14px; word-break: break-all; } .gol-up small { font-size: 11.5px; color: #7a849c; }
  .gol-f { margin-top: 12px; }
  .gol-f label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .gol-f label i { color: #e0455a; font-style: normal; }
  .gol-f input, .gol-f textarea { width: 100%; box-sizing: border-box; border: 1px solid #e3e7f0; border-radius: 12px; padding: 10px 14px; font: 14px 'Noto Sans Thai', sans-serif; color: #0b1e3f; background: #fff; outline: 0; text-align: left; }
  .gol-f textarea { min-height: 96px; resize: vertical; }
  .gol-f input:focus, .gol-f textarea:focus { border-color: #2f5fe0; box-shadow: 0 0 0 3px rgba(47, 95, 224, .12); }
  .gol-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .gol-save { width: 100%; height: 44px; margin-top: 16px; border: 0; border-radius: 12px; background: #0b1e3f; color: #fff; font: 700 14px 'Noto Sans Thai', sans-serif; cursor: pointer; }
  .gol-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .gol-lh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gol-lh b { font-size: 16px; margin-right: auto; }
  .gol-empty { background: #fff; border-radius: 18px; padding: 30px 20px; text-align: center; color: #7a849c; font-size: 13.5px; margin: 0; }
  .gol-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; padding: 3px 10px; color: #fff; font-weight: 800; font-size: 12px; white-space: nowrap; }
  .gol-chip svg { width: 12px; height: 12px; stroke-width: 3; }
  .gol-chip.c-ok { background: #18a058; } .gol-chip.c-go { background: #2f5fe0; } .gol-chip.c-warn { background: #f08a24; } .gol-chip.c-late { background: #e0455a; } .gol-chip.c-nv { background: #0b1e3f; }
  .gol-it { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px; }
  .gol-cov { height: 112px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; color: rgba(255, 255, 255, .92); background: #eef0f5; }
  .gol-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gol-cov svg { width: 40px; height: 40px; stroke-width: 1.6; }
  .gol-cov.g1 { background: linear-gradient(135deg, #2f5fe0, #7b5cd6); } .gol-cov.g2 { background: linear-gradient(135deg, #18a058, #4cc38a); }
  .gol-cov.g3 { background: linear-gradient(135deg, #0b1e3f, #1d3a8a); } .gol-cov.g4 { background: linear-gradient(135deg, #e6b422, #f6c85a); }
  .gol-bd { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .gol-tt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gol-tt b { font-size: 15.5px; min-width: 0; overflow-wrap: anywhere; }
  .gol-meta { display: flex; align-items: center; gap: 6px; color: #7a849c; font-size: 12px; } .gol-meta svg { width: 13px; height: 13px; flex: none; }
  .gol-desc { color: #55607a; font-size: 13px; margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
  .gol-upd { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; }
  .gol-upd input[type=range] { flex: 1; min-width: 0; accent-color: #0b1e3f; margin: 0; }
  .gol-upd output { min-width: 42px; text-align: center; font-weight: 800; font-size: 13px; }
  .gol-upd button, .gol-del { border: 0; border-radius: 10px; padding: 7px 14px; font: 700 12.5px 'Noto Sans Thai', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
  .gol-upd button { background: #0b1e3f; color: #fff; }
  .gol-del { background: #fff0f2; color: #e0455a; } .gol-del svg { width: 14px; height: 14px; }
  .gol-rt { display: flex; flex-direction: column; align-items: center; gap: 10px; } .gol-rt form { margin: 0; }
  .gol-ring { position: relative; width: 74px; height: 74px; } .gol-ring svg { width: 74px; height: 74px; transform: rotate(-90deg); }
  .gol-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 800; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .gol-grid { grid-template-columns: minmax(0, 1fr); } /* จอแคบ: ฟอร์มบน รายการล่าง */
  .gol-form { position: static; }
  .gol-it { grid-template-columns: 130px minmax(0, 1fr) auto; }
  .gol-cov { height: 96px; }
}

/* ---------- my_portfolio.php (แบบ B · mockup_my_portfolio.html): ชิปตัวเลข + แท็บ + ตาราง · มือถือใช้รายการเดิม (ไอคอนเส้นแทน emoji) ---------- */
.pfx2 { display: none; }
.pf2-ph svg, .pf2-ph-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf2-ph-ic { color: #9aa3b8; } .pf2-ph-ic svg { width: 38px; height: 38px; }
.pfx-t-award { --bg: linear-gradient(135deg, #fff6dc, #ffe9a8); --fg: #c98a00; } .pfx-t-activity { --bg: linear-gradient(135deg, #e9eefc, #cfdafc); --fg: #2f5fe0; }
.pfx-t-training { --bg: linear-gradient(135deg, #efe9fc, #ddd0fa); --fg: #7b5cd6; } .pfx-t-work { --bg: linear-gradient(135deg, #e4f6ee, #c6ecd8); --fg: #18a058; }
.pf2-ph[class*="pfx-t-"] { background: var(--bg); color: var(--fg); }
@media (min-width: 1024px) {
  .pf2:has(.pfx2) { max-width: none; padding: 0; }
  .pf2 > .pf2-sum, .pf2 > .pf2-tabs, .pf2 > .pf2-card { display: none; }
  .pfx2 { display: block; color: #0b1e3f; }
  .pfx2 svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .pfx2-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .pfx2-kpi > div { border-radius: 14px; padding: 12px 16px; color: #fff; display: flex; align-items: center; gap: 12px; }
  .pfx2-kpi i { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; flex: none; } .pfx2-kpi i svg { width: 20px; height: 20px; }
  .pfx2-kpi small { display: block; font-size: 12px; opacity: .9; } .pfx2-kpi b { font-size: 24px; font-weight: 800; line-height: 1.1; }
  .pfx2-kpi .k1 { background: linear-gradient(135deg, #2f5fe0, #5b7cfa); } .pfx2-kpi .k2 { background: linear-gradient(135deg, #18a058, #3cc47c); }
  .pfx2-kpi .k3 { background: linear-gradient(135deg, #f2a516, #f7c64a); } .pfx2-kpi .k4 { background: linear-gradient(135deg, #7b5cd6, #a28af0); }
  .pfx2-card { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .pfx2-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
  .pfx2-tabs { display: inline-flex; background: #eef1f8; border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; }
  .pfx2-tabs a { padding: 8px 14px; border-radius: 9px; font-weight: 700; font-size: 13px; color: #55607a !important; display: inline-flex; gap: 6px; align-items: center; }
  .pfx2-tabs a b { font-size: 11px; background: rgba(11, 30, 63, .08); border-radius: 99px; padding: 0 7px; }
  .pfx2-tabs a.on { background: #0b1e3f; color: #fff !important; } .pfx2-tabs a.on b { background: #ffd76a; color: #0b1e3f; }
  .pfx2-add { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: #0b1e3f; color: #fff !important; border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 13.5px; } .pfx2-add svg { width: 16px; height: 16px; }
  .pfx2-empty { text-align: center; color: #7a849c; padding: 40px 0; margin: 0; }
  .pfx2-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .pfx2-tbl th { text-align: left; font-size: 12px; color: #7a849c; font-weight: 600; padding: 8px 12px; border-bottom: 1px solid #e6e9f2; }
  .pfx2-tbl td { padding: 12px; border-bottom: 1px solid #f2f4f9; vertical-align: top; }
  .pfx2-tbl tr { cursor: pointer; } .pfx2-tbl tbody tr:hover td { background: #fafbff; }
  .pfx2-tbl td.t { display: flex; gap: 12px; align-items: flex-start; }
  .pfx2-tbl td.t a { display: block; font-weight: 700; font-size: 14px; color: #0b1e3f !important; } .pfx2-tbl small { display: block; color: #7a849c; font-size: 12px; margin-top: 2px; }
  .pfx-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; overflow: hidden; background: var(--bg); color: var(--fg); }
  .pfx-ic img { width: 100%; height: 100%; object-fit: cover; } .pfx-ic svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .pfx2-typ { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg); } .pfx2-typ i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); }
  .pfx2-st { display: inline-flex; border-radius: 99px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #eef0f4; color: #55607a; }
  .pfx2-st.verified { background: #e4f6ee; color: #18a058; } .pfx2-st.pending { background: #fff1e3; color: #e07a10; } .pfx2-st.rejected { background: #ffe8ee; color: #e0455a; }
}
/* ---------- notifications.php (แบบ A · mockup_notifications.html): กล่องรายการ | แถบขวา ตัวเลข + กรองประเภท · ไอคอนเส้นสีตามประเภท (ทุกจอ) ---------- */
.nt-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt-ic[class*="nt-c-"] { color: #fff; border-radius: 12px; }
.nt-c-gift { background: #e6b422; } .nt-c-verify { background: #18a058; } .nt-c-schol { background: #7b5cd6; } .nt-c-skill { background: #2f5fe0; }
.nt-c-report { background: #0b1e3f; } .nt-c-family { background: #f08a24; } .nt-c-system { background: #55607a; }
.nt-empty-ic.nt-c-system { width: 72px; height: 72px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; color: #fff; } .nt-empty-ic svg { width: 34px; height: 34px; }
.nt-page .nt-item[hidden], .nt-page .nt-list[hidden], .nt-page .nt-group[hidden] { display: none; }
.ntx-grid, .ntx-main { display: contents; }
.ntx-head, .ntx-rail { display: none; }
@media (min-width: 1024px) {
  .nt-page:has(.ntx-rail) { max-width: none; padding: 0; }
  .nt-page .ntx-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; } /* แถบตัวเลข+ประเภทอยู่ซ้าย (ผู้ใช้ขอ) */
  .nt-page .ntx-grid > .ntx-rail { order: -1; }
  .nt-page .ntx-main { display: block; background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .ntx-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .ntx-head h2 { margin: 0; font-size: 18px; color: #0b1e3f; } .ntx-head small { margin-left: auto; color: #7a849c; font-size: 12px; }
  .ntx-new { background: #2f5fe0; color: #fff; border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
  .nt-page .nt-group { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-size: 13px; color: #7a849c; }
  .nt-page .nt-group::after { content: ""; flex: 1; height: 1px; background: #edf0f5; }
  .nt-page .nt-list { border: 0; box-shadow: none; border-radius: 0; display: flex; flex-direction: column; gap: 6px; overflow: visible; }
  .nt-page .nt-item { border: 0; border-radius: 14px; padding: 14px 16px; align-items: center; transition: background .12s; }
  .nt-page .nt-item + .nt-item { border-top: 0; }
  .nt-page .nt-item.unread { background: #f3f6ff; box-shadow: inset 3px 0 0 #2f5fe0; }
  .nt-page a.nt-item:hover { background: #f6f8fc; }
  .nt-page a.nt-item::after { content: ""; width: 8px; height: 8px; border-right: 2px solid #b0b8cc; border-top: 2px solid #b0b8cc; transform: rotate(45deg); margin-left: 6px; flex: none; }
  .nt-page .nt-item .nt-ic { flex-basis: 44px; height: 44px; }
  .nt-page .nt-dot { margin-top: 0; background: #2f5fe0; }
  .nt-page .nt-more { display: block; margin-top: 14px; }
  .nt-page .ntx-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; }
  .ntx-card { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); color: #0b1e3f; }
  .ntx-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ntx-kpi div { border-radius: 14px; padding: 14px; text-align: center; color: #fff; background: linear-gradient(135deg, #0b1e3f, #1d3a8a); }
  .ntx-kpi div.u { background: linear-gradient(135deg, #2f5fe0, #5b7cfa); }
  .ntx-kpi small { display: block; font-size: 12px; opacity: .85; } .ntx-kpi b { font-size: 28px; font-weight: 800; }
  .ntx-card h4 { margin: 0 0 12px; font-size: 16px; } .ntx-card h4 small { font-size: 12px; color: #7a849c; font-weight: 500; margin-left: 6px; }
  .ntx-flt { display: flex; flex-direction: column; gap: 6px; }
  .ntx-flt button { display: flex; align-items: center; gap: 10px; border: 0; background: #f6f8fc; border-radius: 12px; padding: 8px 10px; font: 600 13.5px 'Noto Sans Thai', sans-serif; color: #33415e; cursor: pointer; text-align: left; }
  .ntx-flt button:hover { background: #eef2ff; } .ntx-flt button.on { background: #0b1e3f; color: #fff; }
  .ntx-flt .nt-ic { flex: 0 0 26px; height: 26px; border-radius: 50%; } .ntx-flt .nt-ic:not([class*="nt-c-"]) { background: #eef1f8; color: #0b1e3f; } .ntx-flt .nt-ic[class*="nt-c-"] { border-radius: 50%; color: #fff; }
  .ntx-flt .nt-ic svg { width: 14px; height: 14px; } .ntx-flt button.on .nt-ic:not([class*="nt-c-"]) { background: rgba(255, 255, 255, .15); color: #fff; }
  .ntx-flt b { margin-left: auto; font-size: 11.5px; background: #fff; color: #0b1e3f; border-radius: 99px; padding: 0 8px; min-width: 22px; text-align: center; }
  .ntx-note { margin: 0; color: #7a849c; font-size: 12px; padding: 0 6px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nt-page .ntx-grid { grid-template-columns: 250px minmax(0, 1fr); }
}
/* ---------- wallet.php กระเป๋าเงิน (แบบ B · mockup_wallet.html): แผงซ้าย โปรไฟล์+ยอด+เมนูแท็บ | ฟอร์ม/รายการกลาง | สรุป + ประวัติขวา ----------
   มือถือหน้าตาเดิม: .wlx-grid/.wlx-main/.wlx-right/.wlx-hist/.wlx-hsum = display:contents (ลำดับ DOM เดิม) · .wlx-dsk (ของใหม่) ซ่อน
   ไอคอน .wlx-i แทน emoji/ตัวอักษร ใช้ทุกจอ */
.wlx-grid, .wlx-main, .wlx-right, .wlx-hist, .wlx-hsum { display: contents; }
.wlx-dsk { display: none; }
.wlx-i { width: 1em; height: 1em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.topup-tx-ic .wlx-i { width: 24px; height: 24px; stroke-width: 2.4; }
.wh-ic .wlx-i { width: 17px; height: 17px; stroke-width: 2.6; }
.topup-offer-check .wlx-i { stroke-width: 3; }
.wh-empty .wlx-i { stroke-width: 1.6; }
@media (min-width: 1024px) {
  .pf-page.wlx-page { max-width: none; padding: 0; }
  .wlx-page .wlx-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; grid-template-areas: "left main right"; gap: 16px; align-items: start; }
  .wlx-page .wlx-left { grid-area: left; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; }
  .wlx-page .wlx-main { grid-area: main; display: block; min-width: 0; }
  .wlx-page .wlx-right { grid-area: right; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; min-width: 0; }
  .wlx-page .wlx-dsk { display: block; }
  .wlx-card, .wlx-page .wlx-hist, .wlx-page .wlx-hsum, .wlx-page .wd-form, .wlx-page .topup-card, .wlx-t-history .wlx-main { background: #fff; border: 0; border-radius: 18px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); padding: 18px 20px; color: #0b1e3f; }
  .wlx-page .wlx-hist, .wlx-page .wlx-hsum { display: block; }
  /* ของเดิมที่ย้ายไปแผงซ้าย/การ์ดสรุปแล้ว */
  .wlx-page .desk-nav, .wlx-page .topup-profile, .wlx-page .wd-profile, .wlx-page .wd-bal, .wlx-page .topup-total, .wlx-page .topup-submit { display: none !important; }
  .wlx-page .wd-form { margin: 0; }
  .wlx-page .topup-h { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #0b1e3f; }
  .wlx-page .topup-more { margin-top: 8px; }
  .wlx-page .topup-tx-ic { width: 42px; height: 42px; } .wlx-page .topup-tx-ic .wlx-i { width: 18px; height: 18px; }
  .wlx-t-history .wlx-main .wh-filter, .wlx-t-history .wlx-main .wh-list { box-shadow: none; padding-left: 0; padding-right: 0; border-radius: 0; }
  .wlx-page .wlx-hsum .wh-sum { grid-template-columns: 1fr; margin: 0; }
  /* แผงซ้าย */
  .wlx-me { display: flex; align-items: flex-start; gap: 12px; }
  .wlx-me img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #ffd76a; flex: none; }
  .wlx-me > div { min-width: 0; } .wlx-me b { display: block; font-size: 15px; }
  .wlx-me small { display: flex; align-items: center; gap: 5px; color: #7a849c; font-size: 12px; margin-top: 2px; }
  .wlx-vf { display: inline-flex; align-items: center; gap: 4px; background: #e4f6ee; color: #18a058; border-radius: 99px; padding: 1px 8px; font-size: 11px; font-weight: 800; margin-top: 3px; }
  .wlx-bal { border-radius: 16px; padding: 16px; color: #fff; background: linear-gradient(135deg, #0b1e3f, #1d3a8a); margin-top: 14px; }
  .wlx-bal small { display: block; opacity: .8; font-size: 12px; } .wlx-bal b { font-size: 32px; font-weight: 800; } .wlx-bal em { font-style: normal; color: #ffd76a; font-size: 13px; margin-left: 4px; }
  .wlx-pend { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; border-radius: 99px; padding: 3px 10px; background: #f08a24; color: #fff; font-weight: 800; font-size: 12px; }
  .wlx-menu { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
  .wlx-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 14px; color: #33415e !important; text-decoration: none; }
  .wlx-menu a:hover { background: #f6f8fc; }
  .wlx-menu a i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f0f3fa; color: #2f5fe0; flex: none; font-size: 17px; }
  .wlx-menu a small { display: block; font-weight: 500; font-size: 11.5px; color: #7a849c; }
  .wlx-menu a.on { background: #0b1e3f; color: #fff !important; } .wlx-menu a.on i { background: rgba(255, 255, 255, .15); color: #ffd76a; } .wlx-menu a.on small { color: rgba(255, 255, 255, .7); }
  /* การ์ดสรุป */
  .wlx-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .wlx-h b { font-size: 16px; } .wlx-h small { color: #7a849c; font-size: 12px; }
  .wlx-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #55607a; padding: 7px 0; } .wlx-row b { color: #0b1e3f; text-align: right; }
  .wlx-row b.ok { color: #18a058; } .wlx-row b.warn { color: #e07a10; }
  .wlx-tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px dashed #e3e7f0; font-size: 13px; color: #55607a; } .wlx-tot b { font-size: 22px; color: #0b1e3f; }
  .wlx-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 12px; background: #0b1e3f; color: #fff; font: 700 15px 'Noto Sans Thai', sans-serif; cursor: pointer; }
  .wlx-btn:hover { background: #1d3a8a; }
  .wlx-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #55607a; background: #f6f8fc; border-radius: 12px; padding: 10px 12px; margin: 10px 0 0; } .wlx-note .wlx-i { margin-top: 2px; color: #2f5fe0; } .wlx-note a { color: #2f5fe0; font-weight: 700; }
}
/* จอคอมแคบ: 1200–1399 แผงซ้าย | กลาง (ขวาลงใต้กลาง) · 1024–1199 เรียงบน-ล่าง แผงซ้ายเป็นแถว */
@media (min-width: 1024px) and (max-width: 1399px) {
  .wlx-page .wlx-grid { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "left main" "left right"; }
  .wlx-page .wlx-right { position: static; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .wlx-page .wlx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "left" "main" "right"; }
  .wlx-page .wlx-left { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}@media (min-width: 1024px) {
  .wlx-right .topup-more { display: block; width: auto; height: 40px; line-height: 40px; margin: 12px 0 0; padding: 0; border-radius: 12px; font-size: 13.5px; text-align: center; } /* ปุ่มดูเพิ่มเติมในคอลัมน์ขวาไม่ให้เป็นวงรีใหญ่ */
}
@media (min-width: 1024px) {
  /* ประวัติเติม/ถอนในคอลัมน์ขวา: แถวกะทัดรัด ไอคอน | ชื่อ+สถานะ+วันที่บรรทัดเดียว | ยอด */
  .wlx-right .topup-tx { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 8px; border-radius: 14px; min-height: 0; }
  .wlx-right .topup-tx-ic { width: 38px; height: 38px; min-width: 0; margin: 0; }
  .wlx-right .topup-tx-ic svg { width: 18px; height: 18px; }
  .wlx-right .topup-tx-info { min-width: 0; }
  .wlx-right .topup-tx-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 700; line-height: 1.3; margin: 0; }
  .wlx-right .topup-tx-t .wd-st { font-size: 10.5px; padding: 1px 8px; margin: 0; }
  .wlx-right .topup-tx-d { font-size: 11.5px; color: #7a849c; line-height: 1.4; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wlx-right .topup-tx-d br { display: none; }
  .wlx-right .topup-tx-amt { font-size: 16px; font-weight: 800; text-align: right; line-height: 1.2; white-space: nowrap; }
  .wlx-right .topup-tx-amt small { display: block; font-size: 11px; font-weight: 500; color: #7a849c; margin-top: 2px; }
}
@media (min-width: 1024px) { .wlx-right .wlx-dl { display: none; } .wlx-right .topup-tx-d { overflow: visible; text-overflow: clip; } } /* จอคอม: ตัดคำ "ช่วงเวลา" ให้วันที่อยู่บรรทัดเดียว */
/* menu.php: มือถือใช้เมนูแบบเดิม (.mn-mobile) · จอคอมใช้ .mnx (แบบ B) — ผู้ใช้ขอ 2026-10-23 */
@media (max-width: 1023px) { .mnx { display: none; } }
@media (min-width: 1024px) { .mn-mobile { display: none; } }
/* menu.php จอคอม: การ์ด QR เพิ่มเพื่อน ใต้กระเป๋า */
.mnx-qr { display: none; }
@media (min-width: 1024px) {
  .mnx-qr { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); color: #0b1e3f !important; transition: box-shadow .15s; }
  .mnx-qr:hover { box-shadow: 0 8px 22px rgba(11, 30, 63, .12); }
  .mnx-qr img { width: 96px; height: 96px; border-radius: 12px; border: 1px solid #edf0f5; padding: 6px; background: #fff; flex: none; }
  .mnx-qr span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mnx-qr b { font-size: 15px; } .mnx-qr small { font-size: 12px; color: #7a849c; line-height: 1.45; }
  .mnx-qr em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #2f5fe0; margin-top: 2px; }
}
@media (min-width: 1024px) { .mnx-side .mnx-qr { order: 3; } } /* ใต้การ์ดกระเป๋า (.mnx-wal order:2) */
/* ---------- home.php การ์ดผลงาน (แบบ B · mockup_home_portfolio.html): การ์ด 4 ช่อง ปกใหญ่ · มือถือรายการเดิม (ไอคอนเส้นแทน emoji) ---------- */
.hpx { display: none; }
@media (min-width: 1024px) {
  .achievement-card:has(.hpx) > :not(.hpx) { display: none; }
  .hpx { display: block; color: #0b1e3f; }
  .hpx svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .hpx-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .hpx-h h2 { margin: 0; font-size: 18px; } .hpx-h small { color: #7a849c; font-size: 12.5px; }
  .hpx-r { margin-left: auto; display: flex; gap: 8px; }
  .hpx-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 11px; padding: 8px 14px; font-weight: 700; font-size: 13px; }
  .hpx-btn.d { background: #0b1e3f; color: #fff !important; } .hpx-btn.l { background: #eef2ff; color: #2f5fe0 !important; } .hpx-btn svg { width: 15px; height: 15px; }
  .hpx-empty { text-align: center; color: #7a849c; padding: 24px 0; margin: 0; } .hpx-empty a { color: #2f5fe0; font-weight: 700; }
  .hpx-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .hpx-c { border: 1px solid #edf0f5; border-radius: 16px; overflow: hidden; color: #0b1e3f !important; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
  .hpx-c:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11, 30, 63, .1); }
  .hpx-cv { height: 120px; position: relative; display: grid; place-items: center; background: var(--bg); color: var(--fg); overflow: hidden; }
  .hpx-cv img { width: 100%; height: 100%; object-fit: cover; } .hpx-cv > svg { width: 40px; height: 40px; stroke-width: 1.6; }
  .hpx-cv .pfx2-st { position: absolute; top: 8px; left: 8px; }
  .hpx-bd { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .hpx-bd b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hpx-bd .pfx2-typ { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hpx-bd small { color: #7a849c; font-size: 12px; }
  .hpx .pfx2-st { display: inline-flex; border-radius: 99px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #eef0f4; color: #55607a; }
  .hpx .pfx2-st.verified { background: #e4f6ee; color: #18a058; } .hpx .pfx2-st.pending { background: #fff1e3; color: #e07a10; } .hpx .pfx2-st.rejected { background: #ffe8ee; color: #e0455a; }
  .hpx .pfx2-typ { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg); } .hpx .pfx2-typ i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); flex: none; }
}
.achievement-img.pf2-ph { display: grid; place-items: center; } /* home.php มือถือ: ไอคอนเส้นกลางกล่อง (portfolio.css ไม่ได้โหลดในหน้านี้) */
/* ---------- home.php กิจกรรมโรงเรียน + แหล่งทุน (แบบ B · mockup_home_events.html) · มือถือ .hes-old เดิม (ไอคอนเส้นแทน emoji) ---------- */
.hes { display: none; }
.hes-ph { display: grid; place-items: center; } .hes-ph svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hes-ph.ev { background: #fff1e3; color: #f08a24; } .hes-ph.sc { background: #efe9fc; color: #7b5cd6; }
@media (min-width: 1024px) {
  .hes-old { display: none !important; }
  .hes { display: flex; flex-direction: column; gap: 16px; color: #0b1e3f; margin-bottom: 16px; }
  .hes svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .hes-card { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .hes-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .hes-h h2 { margin: 0; font-size: 18px; } .hes-h small { color: #7a849c; font-size: 12.5px; }
  .hes-h a { margin-left: auto; background: #eef2ff; color: #2f5fe0 !important; border-radius: 11px; padding: 8px 14px; font-weight: 700; font-size: 13px; }
  .hes-i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; } .hes-i svg { width: 16px; height: 16px; }
  .hes-h.ev .hes-i { background: #f08a24; } .hes-h.sc .hes-i { background: #7b5cd6; }
  .hes-empty { text-align: center; color: #7a849c; padding: 20px 0; margin: 0; }
  .hes-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hes-ec, .hes-sc { border: 1px solid #edf0f5; border-radius: 16px; color: #0b1e3f !important; transition: transform .15s, box-shadow .15s; min-width: 0; }
  .hes-ec:hover, .hes-sc:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11, 30, 63, .1); }
  .hes-ec { overflow: hidden; display: flex; flex-direction: column; }
  .hes-cv { height: 130px; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, #fff1e3, #ffd9b0); color: #f08a24; overflow: hidden; }
  .hes-cv img { width: 100%; height: 100%; object-fit: cover; } .hes-cv > svg { width: 40px; height: 40px; }
  .hes-dt { position: absolute; top: 10px; left: 10px; width: 50px; border-radius: 12px; overflow: hidden; text-align: center; background: #fff; box-shadow: 0 4px 12px rgba(11, 30, 63, .15); color: #0b1e3f; }
  .hes-dt i { display: block; font-style: normal; background: #e0455a; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 0; } .hes-dt b { display: block; font-size: 19px; line-height: 1.4; }
  .hes-bd { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .hes-bd b { font-size: 14.5px; line-height: 1.4; } .hes-bd small, .hes-sc small { color: #7a849c; font-size: 12px; }
  .hes-ft { margin-top: auto; padding-top: 8px; display: flex; justify-content: flex-end; }
  .hes-btn { border: 1.5px solid #d9dde5; border-radius: 11px; padding: 6px 14px; font-weight: 700; font-size: 12.5px; background: #fff; white-space: nowrap; }
  .hes-btn.ok { border-color: #c6ecd8; background: #e4f6ee; color: #18a058; } .hes-btn.wait { border-color: #ffe0bf; background: #fff1e3; color: #e07a10; }
  .hes-sc { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .hes-top { display: flex; gap: 10px; align-items: center; min-width: 0; } .hes-top > span:last-child { min-width: 0; } .hes-top b { display: block; font-size: 14.5px; }
  .hes-lg { width: 52px; height: 52px; border-radius: 14px; border: 1px solid #edf0f5; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; color: #7b5cd6; }
  .hes-lg img { width: 86%; height: 86%; object-fit: contain; } .hes-lg svg { width: 24px; height: 24px; }
  .hes-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .hes-val { display: inline-flex; align-items: baseline; gap: 3px; background: #0b1e3f; color: #ffd76a; border-radius: 10px; padding: 3px 10px; font-weight: 800; font-size: 13px; white-space: nowrap; } .hes-val em { font-style: normal; font-size: 10px; color: #fff; opacity: .8; }
  .hes-bar { height: 6px; border-radius: 6px; background: #eef1f8; overflow: hidden; } .hes-bar i { display: block; height: 100%; background: #7b5cd6; border-radius: 6px; }
}
/* ---------- home.php โปรไฟล์ของคุณ + วิดีโอ (แบบ A · mockup_home_video.html) · มือถือเดิม ---------- */
.hvx { display: none; }
@media (min-width: 1024px) {
  .flex5558s:has(+ .hvx), .hvx + .video-section { display: none !important; }
  .hvx { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); color: #0b1e3f; margin-bottom: 16px; }
  .hvx svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .hvx video { width: 100%; display: block; border-radius: 16px; background: #000; aspect-ratio: 16 / 9; object-fit: cover; }
  .hvx-side { display: flex; flex-direction: column; gap: 10px; }
  .hvx-h { margin-bottom: 4px; } .hvx-h h2 { margin: 0; font-size: 18px; } .hvx-h small { color: #7a849c; font-size: 12.5px; }
  .hvx-lk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f6f8fc; color: #0b1e3f !important; transition: background .12s; }
  .hvx-lk:hover { background: #eef2ff; } .hvx-lk i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; }
  .hvx-lk b { display: block; font-size: 14.5px; } .hvx-lk small { color: #7a849c; font-size: 12px; } .hvx-ch { margin-left: auto; color: #b0b8cc; display: flex; }
  .hvx .i1 { background: linear-gradient(135deg, #7b5cd6, #5b7cfa); } .hvx .i2 { background: #f08a24; } .hvx .i3 { background: #18a058; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .hvx { grid-template-columns: 1fr; } }
/* ---------- scholarships.php?id= รายละเอียดทุน (แบบ A · mockup_scholarship_detail.html): hero + ซ้าย การ์ดรายละเอียด/เงื่อนไข/คุณสมบัติ | ขวา 340 sticky ----------
   มือถือหน้าตาเดิม: .sdx-left/.sdx-right = display:contents · .sdx-dsk (hero, ตัวเลข, หัวการ์ด) ซ่อน · ไอคอนหัว .sc-kv ซ่อน */
.sdx-left, .sdx-right { display: contents; }
.sdx-dsk { display: none; }
.sdx-page .sc-kv h4 svg { display: none; }
@media (min-width: 1024px) {
  .pf-page.sdx-page { max-width: none; padding: 0; }
  .sdx-page .sc-item.sc-full { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "hero hero" "left right"; gap: 16px; align-items: start; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; color: #0b1e3f; }
  .sdx-page .sdx-dsk { display: block; } .sdx-page .sdx-h.sdx-dsk { display: flex; }
  .sdx-page .sdx-left { grid-area: left; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .sdx-page .sdx-right { grid-area: right; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; min-width: 0; }
  /* hero */
  .sdx-page .sdx-hero { grid-area: hero; display: flex; gap: 20px; align-items: center; border-radius: 20px; padding: 26px 28px; color: #fff; background: linear-gradient(120deg, #0b1e3f 0%, #1d3a8a 55%, #6d4fd8 100%); }
  .sdx-lg { width: 64px; height: 64px; border-radius: 16px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
  .sdx-lg img { width: 86%; height: 86%; object-fit: contain; } .sdx-lg b { font-size: 26px; color: #0b1e3f; }
  .sdx-hm { min-width: 0; } .sdx-hm h2 { margin: 6px 0 4px; font-size: 26px; color: #fff; overflow-wrap: anywhere; } .sdx-sp { opacity: .85; font-size: 13.5px; }
  .sdx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .sdx-chip { display: inline-flex; border-radius: 99px; padding: 3px 11px; font-size: 12px; font-weight: 700; }
  .sdx-chip.t { background: #efe9fc; color: #7b5cd6; } .sdx-chip.s { background: #e8eeff; color: #2f5fe0; } .sdx-chip.full { background: #eef0f4; color: #7a849c; }
  .sdx-chip.wait { background: #fff1e3; color: #e07a10; } .sdx-chip.ok { background: #e4f6ee; color: #18a058; } .sdx-chip.no { background: #ffe8ee; color: #e0455a; }
  .sdx-big { margin-left: auto; text-align: right; flex: none; } .sdx-big small { display: block; opacity: .8; font-size: 12px; } .sdx-big b { font-size: 34px; color: #ffd76a; font-weight: 800; } .sdx-big em { font-style: normal; font-size: 13px; opacity: .85; }
  /* การ์ด */
  .sdx-page .sdx-left > .sc-box, .sdx-page .sdx-right > .sc-box, .sdx-page .sdx-kpi { margin: 0; background: #fff; border: 0; border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); color: #0b1e3f; }
  .sdx-page .sc-cover { margin: 0; max-height: 260px; border-radius: 18px; }
  .sdx-page .sc-bar, .sdx-page .sc-spo, .sdx-page .sc-stats, .sdx-page .sc-name, .sdx-page .sc-row, .sdx-page .sdx-nodesc, .sdx-page .sc-cond > b { display: none; }
  .sdx-h, .sdx-page .sc-kv h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: #0b1e3f; }
  .sdx-h svg, .sdx-page .sc-kv h4 svg { display: block; width: 18px; height: 18px; color: #2f5fe0; flex: none; }
  .sdx-page .sc-desc { margin: 0; font-size: 14px; line-height: 1.7; color: #33415e; }
  .sdx-page .sc-cond { display: block; }
  .sdx-page .sc-cond ol { counter-reset: sdx; display: grid; gap: 10px; font-size: 14px; color: #0b1e3f; }
  .sdx-page .sc-cond li { counter-increment: sdx; display: flex; gap: 12px; align-items: flex-start; padding: 0; margin: 0; line-height: 1.6; }
  .sdx-page .sc-cond li::before { content: counter(sdx); position: static; width: 26px; height: 26px; border-radius: 50%; background: #0b1e3f; color: #ffd76a; font-weight: 800; font-size: 12.5px; display: grid; place-items: center; flex: none; }
  .sdx-page .sdx-qual div { padding: 10px 0; border-top: 0; border-bottom: 1px dashed #e6e9f2; font-size: 14px; } .sdx-page .sdx-qual div:last-child { border-bottom: 0; }
  .sdx-page .sc-kv span { color: #7a849c; } .sdx-page .sc-kv b { font-weight: 700; color: #0b1e3f; }
  /* ขวา: ตัวเลข + แถบคงเหลือ · ปุ่มเดิมต่อท้ายการ์ดตัวเลข (order) */
  .sdx-page .sdx-kpi { order: 0; } .sdx-page .sc-detail-act { order: 1; } .sdx-page .sc-doc { order: 2; } .sdx-page .sdx-right > .sc-reason { order: 3; } .sdx-page .sdx-dates { order: 4; }
  .sdx-k3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sdx-k3 div { border-radius: 14px; padding: 10px; color: #fff; min-width: 0; } .sdx-k3 small { display: block; font-size: 11.5px; opacity: .9; } .sdx-k3 b { font-size: 18px; font-weight: 800; } .sdx-k3 em { font-style: normal; font-size: 11px; opacity: .85; margin-left: 3px; }
  .sdx-k3 .k1 { background: linear-gradient(135deg, #0b1e3f, #1d3a8a); } .sdx-k3 .k1 b { color: #ffd76a; } .sdx-k3 .k2 { background: linear-gradient(135deg, #2f5fe0, #5b7cfa); }
  .sdx-k3 .k3 { background: linear-gradient(135deg, #18a058, #3cc47c); } .sdx-k3 .k3.zero { background: linear-gradient(135deg, #e0455a, #f07a8a); }
  .sdx-rem { display: flex; justify-content: space-between; margin: 14px 0 6px; font-size: 13px; color: #55607a; } .sdx-rem b { color: #0b1e3f; }
  .sdx-bar { height: 8px; border-radius: 8px; background: #eef1f8; overflow: hidden; } .sdx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7b5cd6, #2f5fe0); border-radius: 8px; }
  .sdx-page .sc-detail-act { margin: -6px 0 0; }
  .sdx-page .sc-detail-act .sc-act { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; } .sdx-page .sc-detail-act .sc-act form { margin: 0; }
  .sdx-page .sc-detail-act .sc-send, .sdx-page .sc-detail-act .sc-cancel, .sdx-page .sc-detail-act .sc-status { box-sizing: border-box; width: 100%; min-width: 0; height: 46px; border-radius: 13px; font-size: 15px; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .sdx-page .sc-doc { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-weight: 700; font-size: 14px; color: #2f5fe0; text-decoration: none; }
  .sdx-page .sc-doc:hover { background: #f6f8ff; } .sdx-page .sc-doc small { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
  .sdx-page .sdx-right > .sc-reason { margin: 0; background: #fff0f2; border: 1px solid #ffd0d8; border-radius: 14px; padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: #e0455a; }
  /* กำหนดการ: timeline จุดวงกลม */
  .sdx-page .sdx-dates div { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border: 0; font-size: 14px; position: relative; }
  .sdx-page .sdx-dates div::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 3px solid #2f5fe0; background: #fff; z-index: 1; box-sizing: content-box; }
  .sdx-page .sdx-dates div::after { content: ""; position: absolute; left: 8px; top: 50%; bottom: -50%; width: 2px; background: #e6e9f2; }
  .sdx-page .sdx-dates div:last-child::after { display: none; }
  .sdx-page .sdx-dates span { color: #55607a; }
}
/* จอคอมแคบ: เรียงบน-ล่าง (hero → ขวา → ซ้าย ไม่ sticky) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sdx-page .sc-item.sc-full { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "right" "left"; }
  .sdx-page .sdx-right { position: static; }
  .sdx-page .sdx-hero h2 { font-size: 22px; } .sdx-big b { font-size: 28px; }
}
/* ---------- scholarships.php รายการ: องค์กรซ้าย + ทุนแนะนำบนตาราง (แบบ A · mockup_scholarships_org.html) · มือถือเดิม ---------- */
.sox, .sox-main { display: contents; }
.sox-rail, .sox-recw, .sox-flt { display: none; }
.sc-wrap .sc-item[hidden] { display: none !important; }
@media (min-width: 1024px) {
  .sc-page .sox { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; color: #0b1e3f; }
  .sc-page .sox-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .sc-page .sox-rail { display: block; position: sticky; top: 88px; }
  .sc-page .sox-recw { display: block; }
  .sox svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sox-card { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .sox-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .sox-h h3 { margin: 0; font-size: 16px; } .sox-h small { color: #7a849c; font-size: 12px; }
  .sox-i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; } .i-org { background: #2f5fe0; } .i-rec { background: #e6b422; }
  .sox-orgs { display: flex; flex-direction: column; gap: 6px; }
  .sox-org { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; border: 2px solid transparent; background: #f8f9fd; text-align: left; font-family: inherit; color: #0b1e3f; width: 100%; }
  .sox-org:hover { background: #eef2ff; } .sox-org.on { background: #fff; border-color: #2f5fe0; box-shadow: 0 6px 16px rgba(47, 95, 224, .12); }
  .sox-org > span:nth-child(2) { min-width: 0; } .sox-org b { display: block; font-size: 13.5px; } .sox-org small { color: #7a849c; font-size: 11.5px; }
  .sox-org em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; background: #0b1e3f; color: #ffd76a; border-radius: 99px; padding: 1px 8px; flex: none; }
  .sox-lg { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #edf0f5; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; color: #2f5fe0; }
  .sox-lg img { width: 86%; height: 86%; object-fit: contain; } .sox-lg i { font-style: normal; font-weight: 800; font-size: 18px; color: #0b1e3f; } .sox-all svg { width: 20px; height: 20px; }
  .sox-recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sox-rec { border-radius: 16px; padding: 14px; color: #fff !important; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(135deg, #0b1e3f, #1d3a8a 60%, #6d4fd8); position: relative; overflow: hidden; min-width: 0; transition: transform .15s; }
  .sox-rec:hover { transform: translateY(-2px); }
  .sox-t { display: flex; gap: 10px; align-items: center; min-width: 0; padding-right: 44px; } .sox-t > span:last-child { min-width: 0; } .sox-rec .sox-lg { width: 40px; height: 40px; }
  .sox-rec b { font-size: 14.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sox-rec small { opacity: .8; font-size: 12px; }
  .sox-v { font-size: 22px; font-weight: 800; color: #ffd76a; } .sox-v em { font-style: normal; font-size: 11px; color: #fff; opacity: .8; margin-left: 4px; }
  .sox-f { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .sox-f > span:first-child { opacity: .9; }
  .sox-go { background: #ffd76a; color: #0b1e3f; border-radius: 10px; padding: 5px 12px; font-weight: 800; font-size: 12px; }
  .sox-tag { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .18); border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
  .sox-flt { display: inline-flex; align-items: center; gap: 8px; background: #eef2ff; color: #2f5fe0; border-radius: 99px; padding: 4px 6px 4px 12px; font-size: 12.5px; font-weight: 700; margin-left: 8px; vertical-align: middle; }
  .sox-flt button { border: 0; background: #2f5fe0; color: #fff; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font: 700 12px sans-serif; line-height: 1; }

  .sox .sc-wrap .sc-spo-v { display: none; } .sox .sc-wrap .sc-logo { flex-basis: 40px; width: 40px; height: 40px; } .sox .sc-dk-val { font-size: 14px; padding: 5px 9px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .sc-page .sox { grid-template-columns: 1fr; } .sc-page .sox-rail { position: static; } .sox-orgs { flex-direction: row; flex-wrap: wrap; } .sox-org { width: auto; flex: 1 1 200px; }
}
@media (min-width: 1600px) { .sox .sc-wrap .sc-thead, .sox .sc-wrap .sc-item { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) 118px 196px 118px; column-gap: 12px; } }
/* 1024–1599 ในหน้าที่มีแถบองค์กร: ตาราง 3 คอลัมน์ (มูลค่าใต้ชื่อทุน · ปุ่มใต้สถานะ) */
@media (min-width: 1024px) and (max-width: 1599px) {
  .sox .sc-wrap .sc-thead { display: none; }
  .sox .sc-wrap .sc-item { grid-template-columns: minmax(150px, 1fr) minmax(0, 1.5fr) 196px; row-gap: 8px; }
  .sox .sc-wrap .sc-spo { grid-row: 1 / span 3; } .sox .sc-wrap .sc-value { grid-column: 2; grid-row: 2; } .sox .sc-wrap .sc-reason { grid-row: 3; margin: 0; }
  .sox .sc-wrap .sc-bar { grid-column: 3; grid-row: 1; } .sox .sc-wrap .sc-act { grid-column: 3; grid-row: 2 / span 2; }
}
/* สถานะบรรทัดเดียวเสมอ (ผู้ใช้ขอ) */
@media (min-width: 1024px) { .sc-wrap .sc-bar span:first-child { white-space: nowrap; font-size: 11.5px; } }
/* ---------- scholarships.php?f=pending คำขอทุนของฉัน (แบบ A · mockup_scholarship_apps.html, ไม่มีแถบสีซ้าย) · มือถือรายการเดิม ---------- */
.apx { display: none; }
@media (min-width: 1024px) {
  .sox-main:has(.apx) > .sc-wrap { display: none; }
  .sc-page .apx { display: block; }
  .apx-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .apx-h h3 { margin: 0; font-size: 18px; } .apx-h small { color: #7a849c; font-size: 12.5px; }
  .apx-empty { text-align: center; color: #7a849c; padding: 24px 0; margin: 0; }
  .apx-c { border: 1px solid #edf0f5; border-radius: 18px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) 180px; gap: 24px; align-items: center; margin-bottom: 12px; animation: none; }
  .apx-c[hidden] { display: none !important; }
  .apx-l { min-width: 0; } .apx-t { display: flex; gap: 12px; align-items: center; min-width: 0; } .apx-t > span:last-child { min-width: 0; } .apx-t b { display: block; font-size: 15px; }
  .apx-m { color: #7a849c; font-size: 12.5px; display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; } .apx-m2 { margin-top: 12px; gap: 12px; }
  .apx .apx-val { display: inline-flex; font-size: 13px; padding: 3px 9px; }
  .apx-st { border-radius: 99px; padding: 3px 11px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #fff1e3; color: #e07a10; } .apx-st.q { background: #e8eeff; color: #2f5fe0; }
  .apx-cd { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #55607a; } .apx-cd b { color: #0b1e3f; } .apx-cd svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .apx-stp { display: grid; grid-template-columns: repeat(4, 1fr); }
  .apx-stp div { text-align: center; position: relative; padding-top: 30px; font-size: 12px; color: #9aa3b8; }
  .apx-stp div::before { content: ""; position: absolute; top: 4px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; border: 2px solid #d9dde5; z-index: 1; box-sizing: border-box; }
  .apx-stp div::after { content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 3px; background: #e6e9f2; } .apx-stp div:last-child::after { display: none; }
  .apx-stp div.done { color: #0b1e3f; } .apx-stp div.done::before { background: #18a058; border-color: #18a058; } .apx-stp div.done::after { background: #18a058; }
  .apx-stp div.now { color: #e07a10; font-weight: 700; } .apx-stp div.now::before { border-color: #f08a24; border-width: 5px; box-shadow: 0 0 0 4px #fff1e3; }
  .apx-stp b { display: block; font-size: 12.5px; line-height: 1.35; } .apx-stp small { display: block; font-size: 11px; color: #7a849c; font-weight: 400; }
  .apx-r { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .apx-r .apx-cd { justify-content: center; } .apx-r form { margin: 0; }
  .apx-btn, .apx .apx-cancel { box-sizing: border-box; width: 100%; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; font-family: inherit; }
  .apx-btn { border: 1.5px solid #d9dde5; color: #0b1e3f !important; background: #fff; } .apx .apx-cancel { border: 1.5px solid #f6c9cf; background: #fff; color: #e0455a; cursor: pointer; margin: 0; min-width: 0; }
}
@media (min-width: 1024px) and (max-width: 1439px) { .apx-c { grid-template-columns: minmax(0, 1fr) 170px; } .apx-stp { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- scholarships.php มือถือ (แบบ C · mockup_scholarships_mobile.html?v=C): สีและองค์ประกอบเดียวกับจอคอม — ผู้ใช้ขอ 2026-10-23 ---------- */
@media (max-width: 1023px) {
  /* ---------- ส่วนร่วมทุกแบบ ---------- */
  .sc-page .sc-intro, .sc-page .sc-menu-t { display: none; }
  .sc-page .sox { display: flex; flex-direction: column; gap: 14px; }
  .sc-page .sox-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .sc-page .sox-rail, .sc-page .sox-recw { display: block; }
  .sox svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sox-card { background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 2px 14px rgba(11,30,63,.06); }
  .sox-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sox-h h3 { margin: 0; font-size: 15px; } .sox-h small { color: #7a849c; font-size: 11.5px; display: block; }
  .sox-i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; } .i-org { background: #2f5fe0; } .i-rec { background: #e6b422; }
  .sox-orgs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 4px; } .sox-orgs::-webkit-scrollbar { display: none; }
  .sox-org { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; border: 2px solid transparent; background: #f6f8fc; font-family: inherit; color: #0b1e3f; text-align: left; }
  .sox-org.on { background: #fff; border-color: #2f5fe0; } .sox-org b { display: block; font-size: 12.5px; white-space: nowrap; } .sox-org small { color: #7a849c; font-size: 11px; } .sox-org em { display: none; }
  .sox-lg { width: 34px; height: 34px; border-radius: 10px; border: 1px solid #edf0f5; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; color: #2f5fe0; }
  .sox-lg img { width: 86%; height: 86%; object-fit: contain; } .sox-lg i { font-style: normal; font-weight: 800; font-size: 15px; color: #0b1e3f; } .sox-all svg { width: 18px; height: 18px; }
  .sox-recs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 4px; } .sox-recs::-webkit-scrollbar { display: none; }
  .sox-rec { flex: 0 0 78%; scroll-snap-align: start; border-radius: 16px; padding: 12px; color: #fff !important; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(135deg, #0b1e3f, #1d3a8a 60%, #6d4fd8); position: relative; text-decoration: none; }
  .sox-t { display: flex; gap: 8px; align-items: center; min-width: 0; } .sox-t > span:last-child { min-width: 0; } .sox-rec b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sox-rec small { opacity: .8; font-size: 11px; }
  .sox-v { font-size: 19px; font-weight: 800; color: #ffd76a; } .sox-v em { font-style: normal; font-size: 10px; color: #fff; opacity: .8; margin-left: 3px; }
  .sox-f { display: flex; justify-content: space-between; align-items: center; font-size: 11px; } .sox-go { background: #ffd76a; color: #0b1e3f; border-radius: 9px; padding: 4px 10px; font-weight: 800; }
  .sox-tag { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.18); border-radius: 99px; padding: 1px 8px; font-size: 10px; font-weight: 700; }
  .sc-wrap .sc-dk-val { display: inline-flex; align-items: baseline; gap: 3px; background: #0b1e3f; color: #ffd76a; border-radius: 10px; padding: 3px 9px; font-style: normal; font-weight: 800; font-size: 13px; white-space: nowrap; } .sc-wrap .sc-dk-val em { font-style: normal; font-size: 10px; color: #fff; opacity: .8; }
  .sc-wrap .sc-dk-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: #7a849c; line-height: 1.55; }
  .sc-wrap .sc-cond > b, .sc-wrap .sc-cond ol, .sc-wrap .sc-name > b, .sc-wrap .sc-value > b, .sc-wrap .sc-value > span, .sc-wrap .sc-spo-v { display: none; }
  .sc-wrap .sc-item .sc-box { margin: 0; padding: 0; border: 0; background: none; }
  .sc-wrap .sc-name { margin: 0; font-size: 14.5px; font-weight: 700; color: #0b1e3f; }
  .sc-wrap .sc-bar { padding: 0; background: none; color: #7a849c; font-size: 11.5px; align-items: center; gap: 6px; }
  .sc-wrap .sc-bar span:first-child { border-radius: 99px; padding: 3px 10px; font-weight: 700; background: #e8eeff; color: #2f5fe0; white-space: nowrap; }
  .sc-wrap .sc-bar.sc-bar-wait span:first-child { background: #fff1e3; color: #e07a10; } .sc-wrap .sc-bar.sc-bar-ok span:first-child { background: #e4f6ee; color: #18a058; } .sc-wrap .sc-bar.sc-bar-no span:first-child { background: #ffe8ee; color: #e0455a; }
  .sc-wrap .sc-reason { margin: 0; background: #fff0f2; border-radius: 10px; padding: 7px 10px; font-size: 12px; }
  .sc-wrap .sc-act { margin: 0; gap: 8px; display: flex; } .sc-wrap .sc-act:empty { display: none; } .sc-wrap .sc-act > *, .sc-wrap .sc-act form { flex: 1; margin: 0; } .sc-wrap .sc-act form button { width: 100%; }
  .sc-wrap .sc-act .sc-more, .sc-wrap .sc-act .sc-send, .sc-wrap .sc-act .sc-cancel, .sc-wrap .sc-act .sc-status { box-sizing: border-box; width: 100%; min-width: 0; height: 38px; border-radius: 11px; font-size: 13px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
  .sc-wrap .sc-act .sc-more { border: 1.5px solid #d9dde5; color: #0b1e3f; background: #fff; }
  .sc-wrap .sc-logo { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; border-color: #edf0f5; }
  .sc-wrap .sc-spo { display: flex; align-items: center; gap: 10px; } .sc-wrap .sc-spo b { font-size: 13px; font-weight: 600; color: #55607a; }
  .sc-page .sc-wrap { border-radius: 18px; padding: 14px; }
  .sc-page .sc-list-t { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: #0b1e3f; }
  .sc-page .sc-dk-sub { display: block; margin: 0 0 12px; color: #7a849c; font-size: 12px; }
  /* คำขอทุน (pending): ใช้การ์ดติดตามสถานะ */
  .sox-main:has(.apx) > .sc-wrap { display: none; }
  .sc-page .apx { display: block; }
  .apx-h { margin-bottom: 10px; } .apx-h h3 { margin: 0; font-size: 16px; } .apx-h small { color: #7a849c; font-size: 12px; }
  .apx-c { border: 1px solid #edf0f5; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; animation: none; }
  .apx-t { display: flex; gap: 10px; align-items: center; } .apx-t > span:last-child { min-width: 0; } .apx-t b { display: block; font-size: 14.5px; } .apx-t .sox-lg { width: 44px; height: 44px; }
  .apx-m { color: #7a849c; font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; } .apx-m2 { margin-top: 10px; gap: 8px; }
  .apx .apx-val { display: inline-flex; font-size: 12px; padding: 2px 8px; }
  .apx-st { border-radius: 99px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; background: #fff1e3; color: #e07a10; } .apx-st.q { background: #e8eeff; color: #2f5fe0; }
  .apx-cd { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #55607a; } .apx-cd b { color: #0b1e3f; } .apx-cd svg { fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
  .apx-stp { display: grid; grid-template-columns: repeat(4, 1fr); }
  .apx-stp div { text-align: center; position: relative; padding-top: 26px; font-size: 11px; color: #9aa3b8; }
  .apx-stp div::before { content: ""; position: absolute; top: 3px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 2px solid #d9dde5; z-index: 1; box-sizing: border-box; }
  .apx-stp div::after { content: ""; position: absolute; top: 11px; left: 50%; width: 100%; height: 3px; background: #e6e9f2; } .apx-stp div:last-child::after { display: none; }
  .apx-stp div.done { color: #0b1e3f; } .apx-stp div.done::before { background: #18a058; border-color: #18a058; } .apx-stp div.done::after { background: #18a058; }
  .apx-stp div.now { color: #e07a10; font-weight: 700; } .apx-stp div.now::before { border-color: #f08a24; border-width: 5px; }
  .apx-stp b { display: block; font-size: 11px; line-height: 1.3; } .apx-stp small { display: block; font-size: 10px; color: #7a849c; font-weight: 400; }
  .apx-r { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .apx-r .apx-cd { grid-column: 1 / -1; justify-content: center; } .apx-r form { margin: 0; }
  .apx-btn, .apx .apx-cancel { box-sizing: border-box; width: 100%; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; font-family: inherit; text-decoration: none; }
  .apx-btn { border: 1.5px solid #d9dde5; color: #0b1e3f !important; background: #fff; } .apx .apx-cancel { border: 1.5px solid #f6c9cf; background: #fff; color: #e0455a; margin: 0; min-width: 0; }



  /* แบบ C: ตัวเลขแถวเดียว · องค์กรเป็นโลโก้วงกลม · การ์ดใหญ่สถานะบนสุด */
  .sc-page .sc-menu { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sc-page .sc-tile { padding: 10px 2px 8px; border-radius: 14px; background: linear-gradient(150deg, var(--c), var(--c2)); color: #fff; opacity: .55; transform: none; border: 0; box-shadow: none; }
  .sc-page .sc-tile.on { opacity: 1; } .sc-tile::after { display: none; } .sc-tile-ic { width: 30px; height: 30px; margin-bottom: 2px; background: rgba(255,255,255,.22); color: #fff; } .sc-tile .sc-tile-ic svg { width: 16px; height: 16px; }
  .sc-page .sc-tile-n { color: #fff; font-size: 18px; } .sc-tile-l { color: #fff; font-size: 10.5px; }
  .sox-rail .sox-h { display: none; } .sox-rail .sox-card { padding: 10px 14px; } .sox-org { flex-direction: column; gap: 4px; padding: 8px; min-width: 76px; } .sox-org small { display: none; } .sox-org b { font-size: 11px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; text-align: center; } .sox-org .sox-lg { width: 42px; height: 42px; border-radius: 50%; }
  .sc-wrap .sc-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar bar" "spo val" "name name" "reason reason" "act act"; gap: 10px; padding: 14px; border: 1px solid #edf0f5; border-radius: 18px; margin: 0 0 12px; box-shadow: 0 4px 14px rgba(11,30,63,.05); }
  .sc-bar { grid-area: bar; justify-content: space-between; border-bottom: 1px dashed #e6e9f2; padding-bottom: 10px; } .sc-spo { grid-area: spo; } .sc-value { grid-area: val; align-self: center; }
  .sc-wrap .sc-dk-val { font-size: 15px; padding: 5px 11px; } .sc-detail { grid-area: name; } .sc-wrap .sc-name { font-size: 16px; } .sc-reason { grid-area: reason; } .sc-act { grid-area: act; }


}

/* scholarships.php มือถือ: ทุนแนะนำ/ทุนล่าสุด เป็นรายการแถว (แบบ A · mockup_scholarship_rec_mobile.html) — ผู้ใช้ขอ 2026-10-23 */
@media (max-width: 1023px) {
  .sc-page .sox-recs { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; }
  .sc-page .sox-rec { flex: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 16px; grid-template-areas: "lg t v ch" "lg f v ch"; align-items: center; gap: 2px 10px; background: none; color: #0b1e3f !important; border-radius: 0; padding: 10px 0; border-bottom: 1px solid #f0f2f7; }
  .sc-page .sox-rec:last-child { border-bottom: 0; }
  .sc-page .sox-t { display: contents; } .sc-page .sox-t .sox-lg { grid-area: lg; width: 40px; height: 40px; } .sc-page .sox-t > span:last-child { grid-area: t; min-width: 0; }
  .sc-page .sox-rec b { font-size: 14px; } .sc-page .sox-rec small { color: #7a849c; opacity: 1; }
  .sc-page .sox-v { grid-area: v; font-size: 13px; background: #0b1e3f; border-radius: 10px; padding: 4px 9px; } .sc-page .sox-v em { display: none; }
  .sc-page .sox-f { grid-area: f; font-size: 11px; color: #7a849c; } .sc-page .sox-go, .sc-page .sox-tag { display: none; }
  .sc-page .sox-rec::after { content: ""; grid-area: ch; width: 8px; height: 8px; border-right: 2px solid #b0b8cc; border-top: 2px solid #b0b8cc; transform: rotate(45deg); }
}
/* scholarships.php มือถือ: ทุนล่าสุด/ทุนแนะนำ อยู่ต่อจากตัวเลข 4 ช่อง (ผู้ใช้ขอ 2026-10-23) */
@media (max-width: 1023px) {
  .sc-page:has(.sox) { display: flex; flex-direction: column; gap: 14px; }
  .sc-page:has(.sox) > .sc-menu { margin-bottom: 0; }
  .sc-page .sox, .sc-page .sox-main { display: contents; }
  .sc-page .sox-recw { order: 1; } .sc-page .sox-rail { order: 2; } .sc-page .sox-main > .sc-wrap, .sc-page .sox-main > .apx { order: 3; } /* ตัวเลข 4 ช่อง → ทุนล่าสุด → องค์กร → รายการ */
}
/* home.php เมนูทำรายการ: ไอคอนเส้นในกล่องสีตามหน้า (แทน emoji) ทุกจอ — ผู้ใช้ขอ 2026-10-23 */
.hmx-menu .hmx-mi { border: 0; border-radius: 16px; background: #f8f9fd; padding: 14px 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #0b1e3f !important; text-decoration: none; box-shadow: none; transition: transform .15s, background .15s, box-shadow .15s; }
.hmx-menu .hmx-mi:hover { background: #fff; box-shadow: 0 8px 20px rgba(11, 30, 63, .1); transform: translateY(-2px); }
.hmx-menu .hmx-mi:active { transform: scale(.96); }
.hmx-menu .hmx-mi .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--bg); color: var(--fg); font-size: 0; margin: 0; }
.hmx-menu .hmx-mi .t { font-size: 12.5px; font-weight: 700; color: #0b1e3f; text-align: center; line-height: 1.35; }
.ads-slider.ads-mid { margin: 0 0 14px; } /* home.php มือถือ: แบนเนอร์ที่ย้ายมาไว้ก่อนการ์ด LSP */
/* wallet.php ถอนเงิน: ราคาบาทใต้ปุ่มจำนวน + กล่อง ถอน X LSP → ได้รับ ฿Y (ทุกจอ) — ผู้ใช้ขอ 2026-10-23 */
.wd-pack .wd-thb { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: #18a058; margin-top: 2px; }
.wd-pack input:checked + span .wd-thb { color: #ffd76a; }
.wd-conv { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 14px 0 16px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #e6e9f2; box-shadow: 0 2px 10px rgba(11, 30, 63, .05); }
.wd-conv-c { text-align: center; border-radius: 12px; padding: 10px 6px; background: #f3f5fb; }
.wd-conv-c small { display: block; font-size: 11.5px; color: #7a849c; } .wd-conv-c b { display: block; font-size: 22px; font-weight: 800; color: #0b1e3f; line-height: 1.25; } .wd-conv-c span { font-size: 11px; color: #7a849c; }
.wd-conv-c.get { background: #e4f6ee; } .wd-conv-c.get b { color: #18a058; }
.wd-conv-ar { color: #b0b8cc; display: flex; }
.wd-conv-r { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: 11.5px; color: #7a849c; } .wd-conv-r .bad { color: #e0455a; font-weight: 700; }
/* grades.php เอกสารผลการเรียน + verify (ครู/โรงเรียน) ลิงก์เอกสาร — 2026-10-23 */
.gr-att .in-upload { margin-top: 6px; } .gr-att { margin-top: 16px; }
.gr-att-cur { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #f3f6ff; border-radius: 12px; padding: 10px 12px; }
.gr-att-cur a { display: inline-flex; align-items: center; gap: 6px; color: #2f5fe0; font-weight: 700; font-size: 13px; }
.gr-att-rm { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #e0455a; }
.gr-att-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 700; color: #2f5fe0; background: #eef2ff; border-radius: 99px; padding: 2px 9px; }
.vf-att { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #f3f6ff; border: 1px solid #dfe6fb; color: #2f5fe0 !important; text-decoration: none; }
.vf-att span b { display: block; font-size: 13.5px; color: #0b1e3f; } .vf-att span small { font-size: 11.5px; color: #7a849c; }
@media (min-width: 1024px) { .gr-att .gfx-only-m { display: none; } }
/* ---------- my_grades.php (แบบ C · mockup_my_grades.html + กราฟแบบหน้า home) · มือถือของเดิม ---------- */
.mgx { display: none; }
@media (min-width: 1024px) {
  .mg-wrap:has(.mgx) { max-width: none; padding: 0; }
  .mg-wrap > :not(.mgx):not(script) { display: none !important; }
  .mgx { display: block; color: #0b1e3f; }
  .mgx-card { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); }
  .mgx-top { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; margin-bottom: 16px; }
  .mgx-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .mgx-h b { font-size: 16px; } .mgx-h small { color: #7a849c; font-size: 12px; }
  .mgx-svg { width: 100%; height: auto; display: block; }
  .mgx-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mgx-kpi div { border-radius: 16px; padding: 14px 16px; color: #fff; display: flex; flex-direction: column; justify-content: center; } .mgx-kpi small { font-size: 12px; opacity: .9; } .mgx-kpi b { font-size: 30px; font-weight: 800; }
  .mgx-kpi .k1 { background: linear-gradient(135deg, #2f5fe0, #5b7cfa); } .mgx-kpi .k2 { background: linear-gradient(135deg, #18a058, #3cc47c); } .mgx-kpi .k3 { background: linear-gradient(135deg, #f2a516, #f7c64a); } .mgx-kpi .k4 { background: linear-gradient(135deg, #7b5cd6, #a28af0); }
  .mgx-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; } .mgx-t { font-size: 18px; }
  .mgx-tabs { display: inline-flex; background: #eef1f8; border-radius: 12px; padding: 4px; gap: 2px; } .mgx-tabs a { padding: 8px 16px; border-radius: 9px; font-weight: 700; font-size: 13px; color: #55607a !important; } .mgx-tabs a.on { background: #0b1e3f; color: #fff !important; }
  .mgx-add { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: #0b1e3f; color: #fff !important; border-radius: 12px; padding: 9px 14px; font-weight: 700; font-size: 13px; }
  .mgx-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .mgx-tbl > thead th { text-align: left; font-size: 12px; color: #7a849c; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid #e6e9f2; }
  .mgx-tbl > tbody > tr > td { padding: 12px 10px; border-bottom: 1px solid #f2f4f9; vertical-align: top; }
  .mgx-tbl td b { display: block; } .mgx-tbl td small { color: #7a849c; font-size: 12px; display: block; } .mgx-tbl td small.bad { color: #e0455a; }
  .mgx-chip { display: inline-block; min-width: 58px; text-align: center; border-radius: 99px; padding: 4px 12px; color: #fff; font-weight: 800; font-size: 15px; }
  .mgx-st { display: inline-flex; border-radius: 99px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
  .mgx-st.ok { background: #e4f6ee; color: #18a058; } .mgx-st.wait { background: #fff1e3; color: #e07a10; } .mgx-st.no { background: #ffe8ee; color: #e0455a; } .mgx-st.muted { background: #eef0f4; color: #55607a; }
  .mgx-ac > * { margin: 0 6px 4px 0 !important; vertical-align: middle; } .mgx-ac small { display: inline !important; }
  .mgx-more { border: 0; background: #eef2ff; color: #2f5fe0; border-radius: 99px; padding: 3px 10px; font: 700 12px 'Noto Sans Thai', sans-serif; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .mgx-more.on svg { transform: rotate(180deg); }
  .mgx-sj > td { padding: 0 10px 12px !important; border-bottom: 1px solid #f2f4f9; }
  .mgx-sub { width: 100%; border-collapse: collapse; font-size: 13px; background: #fafbfe; border-radius: 12px; overflow: hidden; } .mgx-sub th { text-align: left; font-size: 11.5px; color: #7a849c; font-weight: 600; padding: 7px 10px; } .mgx-sub td { padding: 7px 10px; border-top: 1px solid #eef0f5; } .mgx-sub td b { color: #2f5fe0; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .mgx-top { grid-template-columns: 1fr; } .mgx-kpi { grid-template-columns: repeat(4, 1fr); } }
.gr-att-link.none { background: #fff6dc; color: #b07a00; } /* grades.php: ยังไม่แนบเอกสารผลการเรียน */
/* modal ดูตัวอย่างเอกสาร (assets/js/doc-preview.js) — ทุกจอ */
.dpv { position: fixed; inset: 0; z-index: 10050; background: rgba(11, 30, 63, .55); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); }
.dpv[hidden] { display: none; }
html.dpv-lock { overflow: hidden; }
.dpv-card { background: #fff; border-radius: 18px; width: min(900px, 100%); height: min(88vh, 1000px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(11, 30, 63, .35); }
.dpv-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #eef0f5; }
.dpv-t { flex: 1; min-width: 0; font-size: 15px; color: #0b1e3f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpv-btn { display: inline-flex; align-items: center; gap: 5px; border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 700; background: #eef2ff; color: #2f5fe0 !important; white-space: nowrap; }
.dpv-x { border: 0; background: #f3f5fb; color: #55607a; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; flex: none; }
.dpv-b { flex: 1; min-height: 0; background: #f3f5fb; display: flex; align-items: center; justify-content: center; }
.dpv-b iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.dpv-b img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dpv-none { text-align: center; color: #7a849c; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; } .dpv-none b { color: #0b1e3f; }
@media (max-width: 600px) { .dpv { padding: 0; } .dpv-card { border-radius: 0; height: 100%; } .dpv-btn span, .dpv-open { display: none; } }
.nt-c-lock { background: #f08a24; } .nt-c-wallet { background: #2f5fe0; } .nt-c-event { background: #e0455a; } .nt-c-goal { background: #18a058; } /* หมวดเพิ่มสำหรับ dropdown กระดิ่ง */
/* ---------- grades.php?tab=exam ผลสอบระดับชาติ (แบบ A · mockup_exam_scores.html) — ทุกจอ ---------- */
.exm-seg { display: flex; background: #eef1f8; border-radius: 12px; padding: 4px; gap: 2px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.exm-seg a { flex: 1; text-align: center; padding: 9px 12px; border-radius: 9px; font-weight: 700; font-size: 13px; color: #55607a !important; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.exm-seg a b { font-size: 11px; background: rgba(11, 30, 63, .08); border-radius: 99px; padding: 0 7px; } .exm-seg a.on { background: #0b1e3f; color: #fff !important; } .exm-seg a.on b { background: #ffd76a; color: #0b1e3f; }
.grx-add.exm-open { border: 0; cursor: pointer; font-family: inherit; }
.exm-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.exm-c { border: 1px solid #edf0f5; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #fff; color: #0b1e3f; text-align: left; }
.exm-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .exm-top h4 { margin: 6px 0 0; font-size: 15.5px; } .exm-top small { color: #7a849c; font-size: 12px; }
.exm-tg { display: inline-flex; border-radius: 99px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; color: #fff; background: #55607a; }
.exm-tg.t-onet { background: #2f5fe0; } .exm-tg.t-nt { background: #18a058; } .exm-tg.t-rt { background: #0f9d8a; } .exm-tg.t-tgat { background: #7b5cd6; } .exm-tg.t-alv { background: #e0455a; } .exm-tg.t-eng { background: #f08a24; } .exm-tg.t-comp { background: #e6b422; }
.exm-tot { display: flex; align-items: baseline; gap: 6px; } .exm-tot b { font-size: 26px; font-weight: 800; color: #2f5fe0; } .exm-tot span { color: #7a849c; font-size: 12px; }
.exm-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(0, 1fr) 56px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.exm-row b { text-align: right; font-size: 14px; } .exm-row b small { color: #7a849c; font-weight: 500; font-size: 11px; }
.exm-bar { height: 8px; border-radius: 8px; background: #eef1f8; overflow: hidden; } .exm-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #2f5fe0, #5b7cfa); }
.exm-note { margin: 0; background: #fff0f2; color: #e0455a; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.exm-ft { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid #f0f2f7; }
.exm-ft .gr-att-link { margin: 0; } .exm-noatt { color: #b07a00; font-size: 12px; } .exm-who { color: #7a849c; font-size: 12px; }
.exm-acts { margin-left: auto; display: flex; gap: 6px; } .exm-acts form { margin: 0; }
.exm-acts button { border: 0; border-radius: 10px; padding: 7px 12px; font: 600 12.5px 'Noto Sans Thai', sans-serif; cursor: pointer; } .exm-acts .ed { background: #eef2ff; color: #2f5fe0; } .exm-acts .dl { background: #fff0f2; color: #e0455a; }
.exm-addc { border: 2px dashed #d9dde5; align-items: center; justify-content: center; color: #55607a; font: 700 14px 'Noto Sans Thai', sans-serif; min-height: 160px; cursor: pointer; text-align: center; }
.exm-addc small { color: #9aa3b8; font-weight: 500; font-size: 12px; } .exm-addc:hover { border-color: #2f5fe0; color: #2f5fe0; }
.exm-modal { position: fixed; inset: 0; z-index: 10040; background: rgba(11, 30, 63, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.exm-modal[hidden] { display: none; }
.exm-card { background: #fff; border-radius: 18px; width: min(680px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(11, 30, 63, .35); color: #0b1e3f; }
.exm-mh { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid #eef0f5; } .exm-mh b { flex: 1; font-size: 16px; }
.exm-mh .exm-x { border: 0; background: #f3f5fb; color: #55607a; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.exm-mb { padding: 16px 18px; overflow-y: auto; }
.exm-mb h5 { margin: 14px 0 10px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; } .exm-mb h5:first-child { margin-top: 0; } .exm-mb h5 small { color: #7a849c; font-weight: 500; font-size: 12px; }
.exm-mb h5 i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: #0b1e3f; color: #ffd76a; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.exm-chips { display: flex; gap: 6px; flex-wrap: wrap; } .exm-chips input { display: none; }
.exm-chips span { display: inline-block; border-radius: 99px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; background: #fff; border: 1.5px solid #e1e6f2; color: #33415e; cursor: pointer; }
.exm-chips input:checked + span { background: #0b1e3f; border-color: #0b1e3f; color: #fff; }
.exm-r3 { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
.exm-f { display: block; } .exm-f > span { display: block; font-size: 12px; color: #55607a; font-weight: 600; margin-bottom: 4px; } .exm-f em { color: #e0455a; font-style: normal; }
.exm-f .pf-input { text-align: left; text-align-last: left; padding: 0 12px; }
.exm-sg { display: grid; grid-template-columns: minmax(0, 1.6fr) 80px 70px 36px; gap: 6px; align-items: center; font-size: 11.5px; color: #7a849c; font-weight: 600; margin-bottom: 6px; }
.exm-sg.exm-in .pf-input { height: 38px; text-align: left; text-align-last: left; padding: 0 10px; font-size: 13.5px; }
.exm-del { border: 0; background: #fff0f2; color: #e0455a; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; }
.exm-addrow { border: 0; background: #eef2ff; color: #2f5fe0; border-radius: 10px; padding: 8px 12px; font: 700 12.5px 'Noto Sans Thai', sans-serif; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; margin-top: 4px; }
.exm-attcur { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f3f6ff; border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font-size: 12.5px; color: #e0455a; }
.exm-attcur[hidden] { display: none; }
.exm-up { padding: 14px !important; }
.exm-mf { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid #eef0f5; }
.exm-cancel { border: 0; background: #f3f5fb; color: #55607a; border-radius: 12px; padding: 10px 16px; font: 700 13.5px 'Noto Sans Thai', sans-serif; cursor: pointer; }
.exm-submit { border: 0; background: #0b1e3f; color: #fff; border-radius: 12px; padding: 10px 18px; font: 700 13.5px 'Noto Sans Thai', sans-serif; cursor: pointer; }
@media (min-width: 640px) { .exm-r3 { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1024px) { .exm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .exm-seg { display: inline-flex; } .exm-seg a { flex: none; } }
@media (min-width: 1280px) { .exm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .exm-modal { padding: 0; align-items: flex-end; } .exm-card { border-radius: 18px 18px 0 0; max-height: 94vh; } }

/* ---------- public_profile.php ข้อมูลครบ (แบบ C · mockup_public_profile.html): เรซูเม่ซ้าย | เนื้อหาขวา · มือถือเรียงต่อกัน ---------- */
.ppx-c3 { font-family: 'Noto Sans Thai', sans-serif; color: #241c4f; }
.ppx-c3 svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ppx-card { background: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: 0 6px 24px rgba(109,79,216,.08); border: 1px solid #efeafd; }
.ppx-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } .ppx-h b { font-size: 16px; } .ppx-h small { color: #8a83a8; font-size: 12px; } .ppx-h a { margin-left: auto; color: #6d4fd8; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.ppx-i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #f1ecff; color: #6d4fd8; flex: none; } .ppx-i svg { width: 16px; height: 16px; }
.ppx-q { display: grid; gap: 10px; } .ppx-q div { background: #faf8ff; border-radius: 14px; padding: 12px 14px; } .ppx-q small { display: block; color: #8a83a8; font-size: 11.5px; font-weight: 700; margin-bottom: 2px; } .ppx-q p { margin: 0; font-size: 14px; line-height: 1.6; } .ppx-q .none { color: #b5afcc; font-style: italic; }
.ppx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .ppx-facts div { border: 1px solid #efeafd; border-radius: 12px; padding: 8px 12px; } .ppx-facts small { display: block; color: #8a83a8; font-size: 11px; } .ppx-facts b { font-size: 13.5px; }
.ppx-st { display: inline-flex; border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; } .ppx-st.ok { background: #e4f6ee; color: #18a058; } .ppx-st.wait { background: #fff1e3; color: #e07a10; } .ppx-st.no { background: #ffe8ee; color: #e0455a; }
.ppx-doc { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #6d4fd8; background: #f1ecff; border-radius: 99px; padding: 2px 9px; } .ppx-doc svg { width: 12px; height: 12px; }
.ppx-ex { display: grid; gap: 10px; } .ppx-exc { border: 1px solid #efeafd; border-radius: 16px; padding: 12px 14px; }
.ppx-exc .t { display: flex; align-items: center; gap: 8px; } .ppx-exc .t b { font-size: 14.5px; } .ppx-exc .t .tot { margin-left: auto; font-size: 20px; font-weight: 800; color: #6d4fd8; } .ppx-exc .t .tot small { font-size: 11px; color: #8a83a8; font-weight: 500; }
.ppx-tg { display: inline-flex; border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 700; color: #fff; } .tg-onet { background: #2f5fe0; } .tg-eng { background: #f08a24; } .tg-nt { background: #18a058; } .tg-tgat { background: #7b5cd6; } .tg-alv { background: #e0455a; }
.ppx-sb { display: grid; grid-template-columns: 96px minmax(0, 1fr) 46px; gap: 8px; align-items: center; font-size: 12.5px; margin-top: 6px; } .ppx-sb i { height: 7px; border-radius: 7px; background: #f1ecff; overflow: hidden; display: block; } .ppx-sb i em { display: block; height: 100%; background: linear-gradient(90deg, #6d4fd8, #9d7bff); border-radius: 7px; } .ppx-sb b { text-align: right; }
.ppx-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .ppx-tbl th { text-align: left; font-size: 11.5px; color: #8a83a8; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #efeafd; } .ppx-tbl td { padding: 9px 8px; border-bottom: 1px solid #f6f3ff; } .ppx-tbl td small { color: #8a83a8; font-size: 11.5px; display: block; }
.ppx-gchip { display: inline-block; border-radius: 99px; padding: 2px 10px; color: #fff; font-weight: 800; font-size: 13px; }
.ppx-list { display: grid; gap: 8px; } .ppx-li { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: #faf8ff; } .ppx-li .im { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; background: #f1ecff; color: #6d4fd8; } .ppx-li .im img { width: 100%; height: 100%; object-fit: cover; } .ppx-li .im svg { width: 20px; height: 20px; }
.ppx-li b { display: block; font-size: 13.5px; } .ppx-li small { color: #8a83a8; font-size: 12px; } .ppx-li .ppx-st { margin-left: auto; }
.ppx-empty { text-align: center; color: #b5afcc; font-size: 13px; padding: 14px 0; border: 1.5px dashed #e6e0fb; border-radius: 14px; }
.ppx-goal { display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px; gap: 10px; align-items: center; font-size: 13px; padding: 6px 0; } .ppx-goal i { height: 7px; border-radius: 7px; background: #f1ecff; display: block; overflow: hidden; } .ppx-goal i em { display: block; height: 100%; background: #18a058; } .ppx-goal b { text-align: right; }
.ppx-c3 { display: flex; flex-direction: column; gap: 14px; }
.ppx-side, .ppx-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ppx-h small { display: block; } .ppx-li .tx { min-width: 0; flex: 1; } .ppx-li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ppx-li { color: inherit; text-decoration: none; } a.ppx-li:hover { background: #f1ecff; }
.ppx-doc b { font-size: 11.5px; display: inline; }
.ppx-exc .t { flex-wrap: wrap; }
@media (min-width: 1024px) {
  .ppx-c3 { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
  .ppx-side { position: sticky; top: 76px; }
  .ppx-main .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .ppx-c3 { grid-template-columns: 280px minmax(0, 1fr); } }

/* ===== เมนูซ้ายแบบ C (mockup_side_nav.html?v=C) 2026-10-23: เมนูหลักไอคอนสีตัวหนา + แถบทอง · ทางลัดตัวเล็กใต้เส้นคั่น ===== */
@media (min-width: 1024px) {
  .ds-nav { padding: 10px 8px; }
  .ds-nav a.ds-m { position: relative; gap: 12px; padding: 7px 10px; border-radius: 14px; color: #0b1e3f; font-weight: 800; font-size: 15px; }
  .ds-nav a.ds-m .ds-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
  .ds-nav a.ds-m:hover { background: #f4f6fc; color: #0b1e3f; }
  .ds-nav a.ds-m.on { background: #eef1fb; color: #0b1e3f; }
  .ds-nav a.ds-m.on::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: #e6a817; }
  .ds-nav .ds-sep { height: 1px; background: #e8ecf4; margin: 10px 12px 2px; }
  .ds-nav .ds-hd { color: #8a93a8; padding: 8px 14px 4px; }
  .ds-nav a.ds-s { gap: 11px; padding: 6px 14px; border-radius: 10px; color: #6b7590; font-weight: 600; font-size: 13px; }
  .ds-nav a.ds-s svg { width: 17px; height: 17px; }
  .ds-nav a.ds-s:hover, .ds-nav a.ds-s.on { background: #f4f6fc; color: #0b1e3f; }
}

/* ===== start.php จอคอม แบบ C (mockup_start_desk.html?v=C) 2026-10-24: ซ้ายหัวข้อ+แบนเนอร์+สิทธิประโยชน์ ขวาการ์ดกรมท่าเลือกบทบาท · ไม่มีหุ่นยนต์ · มือถือใช้ชุดเดิม (.stc มี hidden) ===== */
.stc svg { flex: none; }
@media (min-width: 1024px) {
  .app.no-chrome:has(.stc) { max-width: none; background: linear-gradient(135deg, #f7f4ea 0%, #eef2fb 45%, #e6ecfa 100%); min-height: 100vh; }
  .app:has(.stc) .lg-top { padding: 10px 32px; }
  .app:has(.stc) .st-page, .app:has(.stc) .st-band, .app:has(.stc) .st-band + .container { display: none; }
  .stc { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; align-items: center; max-width: 1320px; margin: 0 auto; padding: 28px 40px 36px; min-height: calc(100vh - 71px); font-family: 'Noto Sans Thai', sans-serif; color: #0b1e3f; }
  .stc-l { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .stc-eb { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; font-weight: 700; color: #a8761a; background: #fff3d4; padding: 5px 12px; border-radius: 999px; }
  .stc-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
  .stc-hd h1 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.25; }
  .stc-hd h1 em { font-style: normal; color: #d29a1e; }
  .stc-hd p { margin: 6px 0 0; color: #5d6782; font-size: 15px; }
  .stc-stats { flex: none; text-align: center; }
  .stc-stats small, .stc-lbl { display: block; font-size: 13px; font-weight: 700; color: #7a849c; margin: 0 0 8px; }
  .stc-stats > div { display: flex; gap: 6px; }
  .stc-stats span { background: #fff; border-radius: 14px; padding: 10px 16px; box-shadow: 0 4px 12px rgba(11,30,63,.06); font-size: 12px; color: #7a849c; }
  .stc-stats b { display: block; font-size: 20px; font-weight: 800; color: #e8a923; line-height: 1.2; }
  .stc-bn { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 18px 40px rgba(11,30,63,.12); }
  .stc-ben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
  .stc-ben li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; }
  .stc-card { background: radial-gradient(130% 80% at 100% 0%, #24418a 0%, #0b1e3f 58%); color: #fff; border-radius: 28px; padding: 30px 28px 24px; box-shadow: 0 30px 60px rgba(11,30,63,.28); margin: 0; }
  .stc-card h2 { margin: 0; font-size: 20px; font-weight: 800; color: #fff; }
  .stc-card > p { margin: 4px 0 18px; font-size: 13px; color: #b7c3de; }
  .stc-roles { display: grid; gap: 10px; margin-bottom: 20px; }
  .stc-role { position: relative; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 46px 12px 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14); transition: .15s; }
  .stc-role input { position: absolute; opacity: 0; pointer-events: none; }
  .stc-role:hover { border-color: rgba(255,255,255,.35); }
  .stc-role:has(input:checked) { background: rgba(245,197,66,.12); border-color: #f5c542; }
  .stc-role:has(input:focus-visible) { outline: 2px solid #f5c542; outline-offset: 2px; }
  .stc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
  .stc-tx b { display: block; font-size: 15px; line-height: 1.3; }
  .stc-tx small { display: block; font-size: 12px; color: #b7c3de; margin-top: 2px; }
  .stc-ck { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); display: grid; place-items: center; color: transparent; }
  .stc-role:has(input:checked) .stc-ck { background: #f5c542; border-color: #f5c542; color: #0b1e3f; }
  .stc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .stc-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 14px; font-weight: 700; font-size: 16px; text-decoration: none; }
  .stc-btn-g { background: linear-gradient(180deg, #f8d56b, #e8b53a); color: #0b1e3f; box-shadow: 0 8px 18px rgba(232,181,58,.35); }
  .stc-btn-g:hover { filter: brightness(1.04); }
  .stc-btn-l { border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
  .stc-btn-l:hover { background: rgba(255,255,255,.08); }
  .stc-priv { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
  .stc-priv > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(245,166,35,.15); flex: none; }
  .stc-priv b { display: block; font-size: 14px; }
  .stc-priv small { display: block; font-size: 12px; color: #b7c3de; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .stc { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; padding: 20px 28px 28px; }
  .stc-hd { flex-direction: column; align-items: flex-start; gap: 12px; }
  .stc-hd h1 { font-size: 28px; }
  .stc-card { padding: 24px 22px 20px; }
  .stc-ben { grid-template-columns: 1fr; gap: 6px; }
}
@media (min-width: 1280px) and (max-width: 1439px) { .stc-hd h1 { font-size: 30px; white-space: nowrap; } }

/* ===== register.php จอคอม แบบ A (mockup_register_desk.html?v=A) 2026-10-24: ซ้ายหัวข้อ+แบนเนอร์+3 ขั้น ขวาการ์ดกรมท่า ฟอร์ม 2 คอลัมน์
   ใช้ element/ชื่อฟิลด์เดิมทั้งหมด · ของใหม่ (.rgx-*) มี hidden = มือถือไม่เห็น ===== */
.rgx-top svg, .rgx-l svg, .rgx-roles svg, .rgx-drop svg { flex: none; }
.rgx-drop[hidden] { display: none; }   /* .field label {display:block} ชนะ hidden → มือถือต้องซ่อนเอง */
@media (min-width: 1024px) {
  .app:has(.rgx-top) { max-width: none; padding-bottom: 0; background: linear-gradient(135deg, #f7f4ea 0%, #eef2fb 45%, #e6ecfa 100%); }
  .app:has(.rgx-top) > .topbar, .app:has(.rgx-top) .bottom-nav, .rgx > .hero, .rgx #typeSel, .rgx [data-panel="2"] .divider { display: none; }
  .rgx-top { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 32px; background: #fff; border-bottom: 1px solid #e6eaf3; font-family: 'Noto Sans Thai', sans-serif; }
  .rgx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .rgx-brand span { font-weight: 800; font-size: 18px; letter-spacing: .5px; line-height: 1.15; color: #3a3a3a; }
  .rgx-brand small { display: block; font-size: 12px; font-weight: 500; color: #4a4a4a; letter-spacing: 0; }
  .rgx-tr { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #5d6782; }
  .rgx-tr a.rgx-login { color: #0b1e3f; font-weight: 700; }
  .rgx-back { width: 44px; height: 38px; border: 1px solid #e1e6f0; border-radius: 8px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.08); background: #fff; color: #111; }
  .container.rgx { display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 36px; align-items: center; max-width: 1360px; margin: 0 auto; padding: 22px 36px 28px; min-height: calc(100vh - 68px); font-family: 'Noto Sans Thai', sans-serif; color: #0b1e3f; }
  /* ซ้าย */
  .rgx-l { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .rgx-eb { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; font-weight: 700; color: #a8761a; background: #fff3d4; padding: 5px 12px; border-radius: 999px; }
  .rgx-eb b { font-weight: 700; }
  .rgx-l h1 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.25; } .rgx-l h1 em { font-style: normal; color: #d29a1e; }
  .rgx-l > p { margin: -8px 0 0; color: #5d6782; font-size: 15px; }
  .rgx-bn { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 18px 40px rgba(11,30,63,.12); }
  .rgx-vst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .rgx-vst > div { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 12px rgba(11,30,63,.06); display: flex; gap: 10px; align-items: center; }
  .rgx-vst i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #eef1fb; color: #0b1e3f; flex: none; font-size: 13px; }
  .rgx-vst i svg { display: none; } .rgx-vst .ok i svg { display: block; } .rgx-vst .ok i b { display: none; }
  .rgx-vst .on i { background: #f5c542; } .rgx-vst .ok i { background: #2fa860; color: #fff; }
  .rgx-vst span b { display: block; font-size: 13px; } .rgx-vst small { display: block; font-size: 11.5px; color: #7a849c; }
  /* การ์ดกรมท่า */
  .rgx .card { margin: 0; background: radial-gradient(130% 70% at 100% 0%, #24418a 0%, #0b1e3f 58%); color: #fff; border-radius: 28px; padding: 26px 28px 24px; box-shadow: 0 30px 60px rgba(11,30,63,.28); }
  .rgx .card-t { font-size: 21px; color: #fff; margin: 0; }
  .rgx-cs { display: block; margin: 2px 0 14px; font-size: 13px; color: #b7c3de; }
  .rgx .steps { flex-wrap: nowrap; gap: 10px; margin: 0 0 16px; }
  .rgx .step { color: #8fa0c4; font-size: 13px; white-space: nowrap; }
  .rgx .step + .step { flex: 1; } .rgx .step + .step::before { content: ""; flex: 1; height: 2px; background: rgba(255,255,255,.18); min-width: 16px; margin-right: 2px; }
  .rgx .step .n { border-color: rgba(255,255,255,.3); color: #b7c3de; font-weight: 800; }
  .rgx .step.active { color: #fff; } .rgx .step.active .n { background: #f5c542; border-color: #f5c542; color: #0b1e3f; }
  .rgx .step.ok { color: #7fdca6; } .rgx .step.ok .n { background: #2fa860; border-color: #2fa860; color: #fff; } .rgx .step.active + .step.active::before { background: #2fa860; }
  .rgx .flash.error { background: rgba(224,69,90,.15); border: 1px solid rgba(255,154,168,.45); color: #ffc2ca; border-radius: 12px; margin: 0 0 14px; }
  .rgx .field { margin: 0; min-width: 0; }
  .rgx .field label { color: #c9d3ea; font-size: 13px; font-weight: 600; margin-bottom: 5px; } .rgx .field label .req { color: #ff9aa8; }
  .rgx .card .input, .rgx .card select { height: 42px; padding: 0 14px; font-size: 14px; border-radius: 12px; background-color: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16); color: #fff; }
  .rgx .card .input::placeholder { color: #8fa0c4; }
  .rgx .card .input:focus, .rgx .card select:focus { border-color: #f5c542; }
  .rgx .card select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b7c3de' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
  .rgx .card select option { color: #0b1e3f; background: #fff; }
  .rgx .help { color: #8fa0c4; }
  /* ขั้น 1: ตาราง 2 คอลัมน์ (กล่องเดิมแตกเป็นช่องด้วย display: contents แล้วเรียงใหม่ด้วย order) */
  .rgx [data-panel="1"]:not(.hidden) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .rgx [data-panel="1"] > .grid2, .rgx #orgField[style*="block"] { display: contents !important; }
  .rgx [data-panel="1"] > .field:first-child { grid-column: 1 / -1; order: 1; }
  .rgx #orgField > .field:first-child { grid-column: 1 / -1; order: 2; } .rgx #orgField > .field + .field { order: 3; }
  .rgx #schoolField { order: 3; } .rgx .rgx-nick { order: 4; }
  .rgx #orgField[style*="none"] ~ #schoolField[style*="none"] + .rgx-nick { grid-column: 1 / -1; }
  .rgx .field:has(> input[name="first_name"]) { order: 5; } .rgx .field:has(> input[name="last_name"]) { order: 6; }
  .rgx .rgx-email { order: 7; } .rgx .rgx-phone { order: 8; } .rgx .rgx-birth { order: 9; } .rgx .field:has(> #reg_prov) { order: 10; }
  .rgx .field:has(> #reg_amp) { order: 11; } .rgx .field:has(> #reg_dist) { order: 12; }
  .rgx .rgx-next { order: 14; grid-column: 2; margin-top: 6px; }
  .rgx-has { order: 13; grid-column: 1; display: block; align-self: center; font-size: 13px; color: #b7c3de; margin-top: 6px; } .rgx-has a { color: #f5c542; font-weight: 700; }
  .rgx-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .rgx-rl { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 52px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16); color: #fff; font: 700 13px/1.25 'Noto Sans Thai', sans-serif; text-align: left; cursor: pointer; }
  .rgx-rl:hover { border-color: rgba(255,255,255,.35); } .rgx-rl.on { background: rgba(245,197,66,.12); border-color: #f5c542; }
  .rgx-rl:focus-visible { outline: 2px solid #f5c542; outline-offset: 2px; }
  .rgx-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
  .rgx-birth > input[type="date"] { display: none; }
  .rgx-dob { display: grid; grid-template-columns: minmax(62px, .8fr) minmax(0, 1.4fr) minmax(84px, 1fr); gap: 6px; }
  .rgx .card .rgx-dob select { padding: 0 24px 0 10px; background-position: right 8px center; }
  .rgx .btn { height: 50px; padding: 0 22px; border-radius: 14px; font-size: 15.5px; }
  .rgx .btn-navy { background: linear-gradient(180deg, #f8d56b, #e8b53a); color: #0b1e3f; box-shadow: 0 8px 18px rgba(232,181,58,.35); }
  .rgx .btn-outline { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
  /* ขั้น 2 */
  .rgx [data-panel="2"]:not(.hidden) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .rgx [data-panel="2"] > * { grid-column: 1 / -1; margin: 0; }
  .rgx [data-panel="2"] > .rgx-user, .rgx [data-panel="2"] > .rgx-pass { grid-column: auto; }
  .rgx-sec, .rgx .rgx-pwh { display: block; font-size: 13px !important; font-weight: 800; color: #fff !important; }
  .rgx .rgx-pwh { margin-top: 6px; }
  .rgx-kyc > label:first-child { display: none; }
  .rgx-kyc > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .rgx .rgx-drop { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0; border: 2px dashed rgba(255,255,255,.22); border-radius: 16px; background: rgba(255,255,255,.05); cursor: pointer; color: #fff; }
  .rgx-kyc:focus-within .rgx-drop { border-color: #f5c542; }
  .rgx-di { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(245,197,66,.15); color: #f5c542; flex: none; }
  .rgx-dt { min-width: 0; } .rgx-dt b { display: block; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rgx-dt small { display: block; font-size: 12px; color: #8fa0c4; font-weight: 500; }
  .rgx-pick { margin-left: auto; height: 38px; padding: 0 14px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.5); font-size: 13px; font-weight: 700; display: flex; align-items: center; color: #fff; }
  .rgx .rgx-agree { display: flex; align-items: center; gap: 4px; color: #c9d3ea; background: transparent; border: 0; padding: 0; font-size: 13px; }
  .rgx .rgx-agree input { accent-color: #f5c542; width: 18px !important; height: 18px; }
  .rgx .rgx-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
}
/* จอคอมเล็ก/เตี้ย: ย่อช่องให้ขั้น 1 + ปุ่มดำเนินการต่อ อยู่ในจอแรก */
@media (min-width: 1024px) and (max-width: 1279px), (min-width: 1024px) and (max-height: 860px) {
  .rgx-top { height: 60px; } .container.rgx { min-height: calc(100vh - 60px); padding-top: 14px; padding-bottom: 16px; }
  .rgx .card { padding: 20px 22px 18px; } .rgx-cs { margin-bottom: 10px; } .rgx .steps { margin-bottom: 12px; }
  .rgx [data-panel="1"]:not(.hidden), .rgx [data-panel="2"]:not(.hidden) { gap: 9px 12px; }
  .rgx .card .input, .rgx .card select { height: 38px; } .rgx-rl { min-height: 46px; padding: 6px 8px; } .rgx-ic { width: 30px; height: 30px; }
  .rgx .btn { height: 46px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .container.rgx { grid-template-columns: minmax(0, 1fr) 560px; gap: 24px; padding-left: 24px; padding-right: 24px; }
  .rgx-l h1 { font-size: 28px; } .rgx-vst { grid-template-columns: 1fr; gap: 6px; } .rgx-vst > div { padding: 8px 12px; }
  .rgx-ic { display: none; } .rgx-rl { justify-content: center; text-align: center; padding: 6px; font-size: 12.5px; }
  .rgx-dob { grid-template-columns: 54px minmax(0, 1fr) 72px; gap: 5px; } .rgx .card .rgx-dob select { padding: 0 18px 0 8px; background-position: right 5px center; font-size: 13px; }
}
/* ===== login.php จอคอม แบบ A (mockup_login_desk.html?v=A) 2026-10-24: ซ้ายหัวข้อ+แบนเนอร์+คำแนะนำ ขวาการ์ดกรมท่า
   ใช้ element/ชื่อฟิลด์เดิมทั้งหมด (username/password/next/flash error) · ของใหม่ (.lgx-*) มี hidden = มือถือไม่เห็น ===== */
.lgx-top svg, .lgx-hd svg, .lgx-tips svg, .lgx-chip svg, .lgx-eye svg, .lg-submit svg { flex: none; }
.lg-submit .lgx-ic[hidden], .lgx-eye[hidden] { display: none; }   /* กฎ svg/button ทั่วไปชนะ hidden → มือถือต้องซ่อนเอง */
@media (min-width: 1024px) {
  .app:has(.lgx-top) { max-width: none; padding-bottom: 0; background: linear-gradient(135deg, #f7f4ea 0%, #eef2fb 45%, #e6ecfa 100%); }
  .app:has(.lgx-top) > .lg-top { display: none; }
  .lgx-top { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 32px; background: #fff; border-bottom: 1px solid #e6eaf3; font-family: 'Noto Sans Thai', sans-serif; }
  .lgx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .lgx-brand span { font-weight: 800; font-size: 18px; letter-spacing: .5px; line-height: 1.15; color: #3a3a3a; }
  .lgx-brand small { display: block; font-size: 12px; font-weight: 500; color: #4a4a4a; letter-spacing: 0; }
  .lgx-tr { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #5d6782; }
  .lgx-tr a.lgx-reglnk { color: #0b1e3f; font-weight: 700; }
  .lgx-back { width: 44px; height: 38px; border: 1px solid #e1e6f0; border-radius: 8px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.08); background: #fff; color: #111; }
  /* โครง: ซ้าย (หัวข้อ/แบนเนอร์/คำแนะนำ) · ขวา การ์ด */
  .container.lgx { display: grid; grid-template-columns: minmax(0, 1fr) 480px; grid-template-areas: "hd card" "bn card" "tips card"; align-content: center; gap: 18px 44px; max-width: 1320px; margin: 0 auto; padding: 24px 40px 28px; min-height: calc(100vh - 68px); font-family: 'Noto Sans Thai', sans-serif; color: #0b1e3f; }
  .lgx-hd { grid-area: hd; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .lgx-eb { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; font-weight: 700; color: #a8761a; background: #fff3d4; padding: 5px 12px; border-radius: 999px; }
  .lgx-hd h1 { margin: 6px 0 0; font-size: 34px; font-weight: 800; line-height: 1.25; } .lgx-hd h1 em { font-style: normal; color: #d29a1e; }
  .lgx-hd p { margin: 0; color: #5d6782; font-size: 15px; }
  .lgx .lg-banner { grid-area: bn; margin: 0; border-radius: 22px; box-shadow: 0 18px 40px rgba(11,30,63,.12); }
  .lgx-tips { grid-area: tips; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .lgx-tips > div { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 12px rgba(11,30,63,.06); display: flex; gap: 10px; align-items: center; }
  .lgx-tips i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #fff3d4; color: #b07c12; flex: none; }
  .lgx-tips b { display: block; font-size: 13px; } .lgx-tips small { display: block; font-size: 11.5px; color: #7a849c; }
  /* การ์ดกรมท่า */
  .lgx .lg-card { grid-area: card; align-self: center; margin: 0; max-width: none; background: radial-gradient(130% 70% at 100% 0%, #24418a 0%, #0b1e3f 58%); color: #fff; border-radius: 28px; padding: 28px 30px 26px; box-shadow: 0 30px 60px rgba(11,30,63,.28); }
  .lgx-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
  .lgx-rc { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.1); }
  .lgx-rc i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f5c542; color: #0b1e3f; }
  .lgx-sw { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #f5c542; }
  .lgx .lg-t { font-size: 22px; font-weight: 800; line-height: 1.35; color: #fff; } .lgx .lg-t span { color: #f5c542; }
  .lgx .lg-sub { margin: 2px 0 16px; font-size: 13.5px; color: #b7c3de; }
  .lgx .flash.error { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: rgba(224,69,90,.16); border: 1px solid rgba(255,130,148,.45); color: #ffb3bd; font-size: 13.5px; font-weight: 600; }
  .lgx .flash.error::before { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb3bd' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='7.5' x2='12' y2='13'/%3E%3Cline x1='12' y1='16.3' x2='12' y2='16.4'/%3E%3C/svg%3E") center / contain no-repeat; }
  .lgx .lg-field { position: relative; margin-bottom: 14px; }
  .lgx .lg-field label { font-size: 13.5px; font-weight: 700; color: #c9d3ea; margin-bottom: 6px; } .lgx .lg-field label .req { color: #ff9aa8; }
  .lgx .lgx-m { display: none; } .lgx .lgx-d { display: inline; }
  .lgx .lg-field .pf-input { height: 48px; padding: 0 14px 0 44px; font-size: 15px; text-align: left; text-align-last: left; border-radius: 12px; color: #fff; background: rgba(255,255,255,.07) no-repeat 14px center / 19px; border: 1.5px solid rgba(255,255,255,.18); }
  .lgx .lg-field .pf-input::placeholder { color: #8fa0c4; text-align: left; }
  .lgx .lg-field .pf-input:focus { border-color: #f5c542; box-shadow: 0 0 0 3px rgba(245,197,66,.18); }
  .lgx .lg-field .pf-input.lgx-bad { border-color: rgba(255,130,148,.7); }
  .lgx .lg-field .pf-input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #1a2f60 inset; caret-color: #fff; }
  .lgx #lgUser { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa0c4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.7-4 3.8-6 8-6s7.3 2 8 6'/%3E%3C/svg%3E"); }
  .lgx #lgPass { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa0c4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E"); padding-right: 48px; }
  .lgx .lgx-eye { display: grid; place-items: center; position: absolute; right: 8px; bottom: 6px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8fa0c4; cursor: pointer; padding: 0; }
  .lgx .lgx-eye:hover { color: #fff; } .lgx .lgx-eye:focus-visible { outline: 2px solid #f5c542; }
  .lgx .lgx-eye .lgx-off, .lgx .lgx-eye.is-on .lgx-on { display: none; } .lgx .lgx-eye.is-on .lgx-off { display: block; }
  .lgx form { display: flex; flex-direction: column; }
  .lgx .lg-forgot { align-self: flex-end; margin: -2px 0 0; font-size: 13.5px; font-weight: 700; color: #f5c542; }
  .lgx .pf-save.lg-submit { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; margin-top: 16px; border-radius: 14px; font-size: 16px; font-weight: 700; background: linear-gradient(180deg, #f8d56b, #e8b53a); color: #0b1e3f; box-shadow: 0 8px 18px rgba(232,181,58,.35); }
  .lgx .pf-save.lg-submit:hover { filter: brightness(1.04); }
  .lgx .lg-submit .lgx-ic { display: block; }
  .lgx-or { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 12px; color: #8fa0c4; }
  .lgx-or::before, .lgx-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.14); }
  .lgx .lg-reg { margin-top: 12px; font-size: 14px; color: #b7c3de; } .lgx .lg-reg a { color: #f5c542; }
}
/* จอคอมเล็ก/เตี้ย: ฟอร์ม+ปุ่มเข้าสู่ระบบอยู่ในจอแรก */
@media (min-width: 1024px) and (max-width: 1279px), (min-width: 1024px) and (max-height: 860px) {
  .lgx-top { height: 60px; } .lgx-brand img { width: 36px; height: 41px; }
  .container.lgx { min-height: calc(100vh - 60px); padding-top: 14px; padding-bottom: 16px; row-gap: 14px; }
  .lgx .lg-card { padding: 22px 24px 20px; } .lgx-chip { margin-bottom: 12px; } .lgx .lg-sub { margin-bottom: 12px; }
  .lgx .lg-field { margin-bottom: 11px; } .lgx .lg-field .pf-input { height: 44px; } .lgx .lgx-eye { bottom: 4px; }
  .lgx .pf-save.lg-submit { height: 48px; margin-top: 12px; } .lgx-or { margin-top: 14px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .container.lgx { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 26px; padding-left: 24px; padding-right: 24px; }
  .lgx-hd h1 { font-size: 27px; } .lgx-tips { grid-template-columns: 1fr; gap: 6px; } .lgx-tips > div { padding: 7px 12px; }
}
@media (min-width: 1024px) and (max-height: 800px) { .lgx-tips { display: none; } }

/* ===== หน้านักเรียนชุด 1 จอคอม (งาน 23 · 2026-10-24): show_profile / post / portfolio_item / event_item / rankings / user
   ใช้ class เดิมทั้งหมด ไม่แก้ PHP · มือถือไม่เปลี่ยน ===== */
@media (min-width: 1024px) {
  /* หัวหน้า (pf-top2 / sp-top) เป็นการ์ดมนในคอลัมน์เนื้อหา เหมือน pf-head */
  .app.has-dsk .pf-top2, .app.has-dsk .sp-top { position: static; border: 0; border-radius: 18px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); padding: 12px 16px; margin-bottom: 4px; }

  /* show_profile: พรีวิว A4 ซ้าย | ตั้งค่าการแสดง ขวา (ค้างตอนเลื่อน) */
  .dsk-main .container:has(> #spForm) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
  .dsk-main #spForm { grid-column: 2; grid-row: 1; position: sticky; top: 88px; margin: 0; border-radius: 18px; padding: 18px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; }
  .dsk-main .container:has(> #spForm) > .sp-preview { grid-column: 1; grid-row: 1; margin: 0; border-radius: 18px; }
  .dsk-main #spForm .sp-grid { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .dsk-main #spForm .sp-grid:has(.sp-pick) { grid-template-columns: 1fr; }
  .dsk-main #spForm .sp-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
  .dsk-main #spForm .sp-pick small { grid-column: 1 / -1; }
  .dsk-main #spForm .sp-pick button { padding: 8px 14px; width: auto; }
  .dsk-main #spForm .spst { gap: 8px; }
  .dsk-main #spForm .sp-actions { grid-template-columns: 1fr 1fr; }
  .dsk-main #spForm .sp-actions .sp-print { grid-column: 1 / -1; }

  /* post: สื่อซ้าย | ผู้โพสต์ ข้อความ ถูกใจ ปุ่ม ขวา (โพสต์ที่ไม่มีรูป/วิดีโอ = คอลัมน์เดียวกว้าง 760) */
  .dsk-main .ps-page { max-width: none; padding-bottom: 0; }
  .dsk-main .ps-post { margin: 0 auto; max-width: 760px; border-radius: 18px; }
  .dsk-main .ps-post:has(> .ps-gallery, > .ps-video) { max-width: none; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 22px; align-items: start; padding: 18px; }
  .dsk-main .ps-post:has(> .ps-gallery, > .ps-video) > * { grid-column: 2; margin-left: 0; margin-right: 0; min-width: 0; }
  .dsk-main .ps-post:has(> .ps-gallery, > .ps-video) > :is(.ps-gallery, .ps-video, .mt-c-open) { grid-column: 1; grid-row: 1 / span 30; border-radius: 14px; overflow: hidden; }
  .dsk-main .ps-post:has(> .ps-gallery, > .ps-video) > .ps-head { padding-top: 0; }
  .dsk-main .ps-author { display: block; max-width: none; margin: 14px 0 0; text-align: right; }

  /* portfolio_item / event_item: ปกซ้าย (เต็มความสูง) | รายละเอียดขวา */
  .dsk-main .pf2:has(> .pf2-detail) { max-width: none; padding-bottom: 0; }
  .dsk-main .pf2-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: 18px; align-items: stretch; }
  .dsk-main .pf2-detail > .pf2-cover { max-height: none; height: 100%; min-height: 420px; }
  .dsk-main .pf2-detail > .pf2-cover img { max-height: 640px; height: 100%; }
  .dsk-main .pf2-detail > .pf2-cover-ph { font-size: 96px; }
  .dsk-main .pf2-detail > .pf2-body { padding: 24px 26px; }
  .dsk-main .pf2-detail .pf2-body h2 { font-size: 24px; }
  .dsk-main .pf2-detail .pf2-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dsk-main .pf2-detail .pf2-actions > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .dsk-main .pf2-detail .pf2-actions form, .dsk-main .pf2-detail .pf2-actions form .btn { width: 100%; }

  /* rankings: อันดับ 1–3 เป็นการ์ดแท่นรางวัลแถวเดียว · ที่เหลือ 2 คอลัมน์ */
  .dsk-main .pf2.rk.rk { max-width: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 12px; align-content: start; }
  .dsk-main .pf2.rk.rk > * { grid-column: 1 / -1; }
  .dsk-main .pf2.rk.rk > .rk-row { grid-column: span 3; margin-bottom: 12px; }
  .dsk-main .pf2.rk.rk > .rk-row.top { grid-column: span 2; flex-direction: column; text-align: center; gap: 8px; padding: 18px 14px 16px; position: relative; }
  .dsk-main .pf2.rk.rk > .rk-row.top .rk-no { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; font-size: 15px; }
  .dsk-main .pf2.rk.rk > .rk-row.top img, .dsk-main .pf2.rk.rk > .rk-row.top .rk-ph { width: 76px; height: 76px; font-size: 32px; }
  .dsk-main .pf2.rk.rk > .rk-row.top .rk-info { align-items: center; width: 100%; }
  .dsk-main .pf2.rk.rk > .rk-row.top .rk-info b { font-size: 16px; max-width: 100%; }
  .dsk-main .pf2.rk.rk > .rk-row.top .rk-val { text-align: center; }
  .dsk-main .pf2.rk.rk > .rk-row.top .rk-val b { font-size: 22px; }
  .dsk-main .pf2.rk.rk .rk-tabs { margin-bottom: 12px; }
  .dsk-main .pf2.rk.rk > .mg-tabs { max-width: none; } .dsk-main .pf2.rk.rk > .rk-sub { margin-top: 10px; }   /* ชนะกฎหน้า articles (.pf2:has(> .mg-tabs)) ที่จับ rankings ด้วย */

  /* user (ฟีดของฉัน/ฟีดเพื่อน): การ์ดโปรไฟล์ซ้าย (ค้าง) | กล่องโพสต์ + ฟีด ขวา */
  .dsk-main .uf-page { max-width: none; display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .dsk-main .uf-page > * { grid-column: 2; min-width: 0; margin-left: 0; margin-right: 0; max-width: none; }
  .dsk-main .uf-page > .uf-card { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 88px; border-radius: 18px; }
  .dsk-main .uf-page > .uf-card .uf-btns { flex-direction: column; }
  .dsk-main .uf-page > :not(.uf-card):first-of-type { margin-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .dsk-main .container:has(> #spForm) { grid-template-columns: minmax(0, 1fr) 330px; }
  .dsk-main .uf-page { grid-template-columns: 290px minmax(0, 1fr); }
  .dsk-main .pf2-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dsk-main .pf2.rk.rk > .rk-row { grid-column: 1 / -1; }
}

/* ชุด 2 นักเรียน (B) */
/* ===== หน้านักเรียนชุด 2 จอคอม (งาน 24 · 2026-10-24): trainings / material_item / shop / tag_parent / events / announcements / articles / article_item / packages / bank / help / qr / soon
   CSS อย่างเดียว ใช้ class เดิม (เพิ่ม class .anx ใน announcements.php, .hlx ใน help.php) · มือถือไม่เปลี่ยน ===== */
@media (min-width: 1024px) {
  /* trainings: การ์ดเต็มความกว้าง หัวซ้าย + ปุ่มเพิ่มขวา (แบบ awards/activities) · รายการ 2 คอลัมน์ */
  .dsk-main .pf-page:has(> .aw-wrap:not(.grx)) { max-width: none; padding: 0; }
  .dsk-main .aw-wrap:not(.grx) { max-width: none; border-radius: 18px; padding: 20px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .dsk-main .aw-wrap:not(.grx) > * { grid-column: 1 / -1; min-width: 0; }
  .dsk-main .aw-wrap:not(.grx) > .pf-card-t { grid-column: 1; grid-row: 1; font-size: 18px; margin: 0; }
  .dsk-main .aw-wrap:not(.grx) > .pf-card-sub { grid-column: 1; grid-row: 2; margin: 2px 0 0; }
  .dsk-main .aw-wrap:not(.grx) > .aw-add { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; width: auto; padding: 0 24px; margin: 0; }
  .dsk-main .aw-wrap:not(.grx) > .aw-sec { margin-top: 18px; }
  .dsk-main .aw-wrap:not(.grx) > .aw-item { grid-column: auto; margin: 0 0 14px; }
  .dsk-main .aw-wrap:not(.grx) > .gr-empty { padding: 40px 0 28px; }

  /* material_item: การ์ดขาว ปกซ้าย | รายละเอียด+ปุ่มสั่งซื้อขวา · สื่อที่แนะนำเต็มแถว 4 คอลัมน์ (เหมือน materials) */
  .dsk-main .mt-detail.mi { max-width: none; margin: 0; padding: 22px 24px; background: #fff; border-radius: 18px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: repeat(8, auto) 1fr; column-gap: 28px; align-items: start; }
  .dsk-main .mt-detail.mi > * { grid-column: 2; min-width: 0; }
  .dsk-main .mt-detail.mi > .mt-hero { grid-column: 1; grid-row: 1 / 10; margin: 0; }
  .dsk-main .mt-detail.mi > .mt-hero .mt-cover { aspect-ratio: 1 / 1; height: auto; width: 100%; border-radius: 16px; }
  .dsk-main .mt-detail.mi > .mt-d-t { margin-top: 4px; font-size: 24px; }
  .dsk-main .mt-detail.mi > .mt-rec-t { grid-column: 1 / -1; grid-row: 10; margin-top: 26px; }
  .dsk-main .mt-detail.mi > .mi-rec { grid-column: 1 / -1; grid-row: 11; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; margin: 0; padding: 0; }
  .dsk-main .mi-rec .mt-cover { border-radius: 14px; aspect-ratio: 1 / 1; height: auto; width: 100%; }
  .dsk-main .mi-rec .mt-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

  /* tag_parent: เต็มความกว้าง · กล่องหัวข้อซ้าย + ปุ่มส่งคำขอขวา */
  .dsk-main .container.tp { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: stretch; }
  .dsk-main .container.tp > * { grid-column: 1 / -1; min-width: 0; }
  .dsk-main .container.tp > .tp-tabs { margin-bottom: 14px; }
  .dsk-main .container.tp > .tp-tabs + .tp-card:not(.tp-blank) { grid-column: 1; grid-row: 3; margin: 0 0 14px; }
  .dsk-main .container.tp > .tp-tabs + .tp-card + .tp-new { grid-column: 2; grid-row: 3; }
  .dsk-main .container.tp > .tp-new { margin: 0 0 14px; width: auto; padding: 0 28px; display: flex; align-items: center; justify-content: center; border-radius: 18px; }
  .dsk-main .container.tp > .tp-blank { padding: 48px 20px; }

  /* events: การ์ดกิจกรรมกริด 3 คอลัมน์ รูปบน */
  .dsk-main .pjx:has(> .pjx-box .evx-list) { max-width: none; margin: 0; }
  .dsk-main .evx-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .dsk-main .evx { display: flex; flex-direction: column; margin: 0; padding: 12px; }
  .dsk-main .evx > .main { flex-direction: column; align-items: stretch; gap: 10px; flex: 1; }
  .dsk-main .evx > .main .ph { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
  .dsk-main .evx > .main .ph img { width: 100%; height: 100%; object-fit: cover; }
  .dsk-main .evx > .main .ph svg { width: 40px; height: 40px; }
  .dsk-main .evx > .acts { margin-top: 10px; }

  /* announcements: เต็มความกว้าง · ข่าวกริด 3 คอลัมน์ */
  .dsk-main .pjx.anx { max-width: none; margin: 0; }
  .dsk-main .anx .pjx-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .dsk-main .anx .pjx-empty { padding: 36px 0; }

  /* articles: แท็บ + การ์ดบทความกริด 3 คอลัมน์ (บทความแรกที่มีปก กว้าง 2 ช่อง) */
  .dsk-main .pf2.arx { max-width: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .dsk-main .pf2.arx > :is(.mg-tabs, .pf2-empty) { grid-column: 1 / -1; margin: 0 !important; }
  .dsk-main .pf2.arx > .mg-tabs { max-width: 560px; }
  .dsk-main .pf2.arx > .ar-card { margin: 0; height: 100%; }
  .dsk-main .pf2.arx > .ar-card.ar-first { grid-column: span 2; }
  .dsk-main .pf2.arx > .pf2-empty { padding: 48px 20px; }

  /* article_item: เนื้อหาซ้าย (ปกบน) | ข่าวอื่น ๆ ขวา (ค้างตอนเลื่อน) — แทนที่ปกซ้าย/ข้อความขวาของ .pf2-detail */
  .dsk-main .pf2:has(> .ar-more-h) { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto repeat(12, auto) 1fr; column-gap: 20px; align-items: start; }
  .dsk-main .pf2:has(> .ar-more-h) > * { grid-column: 2; margin: 0 0 12px; min-width: 0; }
  .dsk-main .pf2:has(> .ar-more-h) > .pf2-detail { grid-column: 1; grid-row: 1 / -1; display: block; margin: 0; }
  .dsk-main .pf2:has(> .ar-more-h) > .pf2-detail > .pf2-cover { height: auto; min-height: 0; max-height: 380px; }
  .dsk-main .pf2:has(> .ar-more-h) > .pf2-detail > .pf2-cover img { height: auto; max-height: 380px; }
  .dsk-main .pf2:has(> .ar-more-h) > .pf2-detail > .pf2-body { padding: 22px 28px 26px; }
  .dsk-main .pf2:has(> .ar-more-h) > .ar-more-h { margin-top: 0; }
  .dsk-main .pf2:has(> .ar-more-h) > .ar-mini { border-radius: 16px; }

  /* packages: หัวเต็มแถว · แพ็กเกจเรียงข้างกัน 3 คอลัมน์ */
  .dsk-main .pk { max-width: none; padding: 0 0 20px; }
  .dsk-main .pk-hero { border-radius: 20px; }
  .dsk-main .pk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .dsk-main .pk-list > .pk-card { margin: 0; }
  .dsk-main .pk-note { text-align: center; }

  /* bank: บัตรธนาคาร + ข้อแนะนำซ้าย (ค้าง) | ฟอร์มขวาในการ์ดขาว */
  .dsk-main .bk { max-width: none; padding: 0 0 20px; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 22px; align-items: start; }
  .dsk-main .bk > .bk-card { position: sticky; top: 88px; margin: 0; }
  .dsk-main .bk > .bk-form { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-content: start; margin: 0; }
  .dsk-main .bk-form > * { grid-column: 1 / -1; min-width: 0; }
  .dsk-main .bk-form > .bk-banks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dsk-main .bk-form > .lbl:nth-of-type(2) { grid-column: 1; grid-row: 3; } .dsk-main .bk-form > label.in:nth-of-type(1) { grid-column: 1; grid-row: 4; }
  .dsk-main .bk-form > .lbl:nth-of-type(3) { grid-column: 2; grid-row: 3; } .dsk-main .bk-form > label.in:nth-of-type(2) { grid-column: 2; grid-row: 4; }

  /* help: คำถามเป็นการ์ด 2 คอลัมน์ */
  .dsk-main .container.hlx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .dsk-main .container.hlx > .card { margin: 0; border-radius: 18px; padding: 20px 22px; }

  /* qr: การ์ดแนวนอน — QR ซ้าย | โปรไฟล์ + ลิงก์ขวา */
  .dsk-main .pf-page:has(#mylink) { max-width: none; padding: 0; }
  .dsk-main .card.text-c:has(#mylink) { max-width: 860px; margin: 0 auto; border-radius: 20px; padding: 28px 32px; display: grid; grid-template-columns: 300px minmax(0, 1fr); align-content: center; align-items: start; column-gap: 36px; text-align: left; }
  .dsk-main .card.text-c:has(#mylink) > * { grid-column: 2; }
  .dsk-main .card.text-c:has(#mylink) > img[alt="QR"] { grid-column: 1; grid-row: 1 / span 5; margin: 0 !important; width: 100%; height: auto; align-self: center; }
  .dsk-main .card.text-c:has(#mylink) > .avatar { margin: 0; }
  .dsk-main .card.text-c:has(#mylink) > div:nth-of-type(1) { font-size: 20px; }
  .dsk-main .card.text-c:has(#mylink) > .small:nth-of-type(3) { margin-top: 14px; }

  /* soon: ปุ่มกลับหน้าหลักกว้างพอดีข้อความ */
  .dsk-main .container > .card.text-c > a.btn.mt16 { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 48px; padding: 0 40px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .dsk-main .mt-detail.mi { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  .dsk-main .mt-detail.mi > .mi-rec, .dsk-main .evx-list, .dsk-main .anx .pjx-list, .dsk-main .pf2.arx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsk-main .pf2.arx > .ar-card.ar-first { grid-column: 1 / -1; }
  .dsk-main .pf2:has(> .ar-more-h) { grid-template-columns: minmax(0, 1fr) 280px; }
  .dsk-main .bk { grid-template-columns: 300px minmax(0, 1fr); } .dsk-main .bk-form > .bk-banks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dsk-main .bk > .bk-form { grid-template-columns: minmax(0, 1fr); }
  .dsk-main .bk-form > :is(.lbl, label.in):is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3)) { grid-column: 1; grid-row: auto; }
  .dsk-main .card.text-c:has(#mylink) { grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; }
}
/* 2026-10-31 index แผงนักเรียน: 3 กล่อง (เมนูซ้าย | เนื้อหา | แถบขวา) แบบ C (ค้นหา · หมวดหมู่ · ทางลัด) — แถบขวาแสดง ≥1280px เท่านั้น */
.ixs-rail { display: none }
@media (min-width: 1280px) {
  .ixs3:has(> .ix-side) { grid-template-columns: minmax(0, 1fr) 280px 22px minmax(0, 852px) 22px 360px minmax(0, 1fr) }
  .ixs3:has(> .ix-side) > :is(.ixh, .ixs-bnr, .ix-tabs) { grid-column: 1 / -1 }
  .ixs3 > .ixs-rail { display: flex; flex-direction: column; gap: 14px; grid-column: 6; grid-row: 3 / span 60; position: sticky; top: 16px; margin-top: 22px; align-self: start }
  .ixs-rail .twc { margin: 0 }
  .ixr-card { display: block; background: #fff; border-radius: 22px; padding: 16px 18px; box-shadow: 0 2px 14px rgba(11, 30, 63, .06); color: #0b1e3f !important; text-decoration: none }
  .ixr-card .h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; margin-bottom: 10px }
  .ixr-card .h a { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #5b6bd6 }
  .ixr-search label { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 14px; background: #f8f9fd; border: 1.5px solid #eceff6; color: #8a93a8 }
  .ixr-search label svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2 }
  .ixr-search input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 14px }
  .ixr-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
  .ixr-cats a { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: #f8f9fd; text-decoration: none; color: #0b1e3f !important; min-width: 0 }
  .ixr-cats .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none }
  .ixr-cats .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9 }
  .ixr-cats b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .ixr-cats small { font-size: 11px; color: #7a849c }
  .ixr-links a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-top: 8px; border-radius: 14px; background: #f8f9fd; font-weight: 700; font-size: 14px; color: #0b1e3f !important; text-decoration: none }
  .ixr-links a svg { width: 18px; height: 18px; fill: none; stroke: #7b5cd6; stroke-width: 1.9 }
  /* ซ่อนส่วนที่ย้ายไปแถบขวาแล้วในคอลัมน์กลาง */
  .ixs-rv-C > .ixs-cat, .ixs-rv-C > .ix-sec:has(+ .ixs-cat) { display: none }
}

/* index แท็บคุณครู: แถบขวา แบบ B (ครูรายได้สื่อ + Gold/Platinum) (ใช้โครง .ixs3 / .ixr-* เดียวกับแท็บนักเรียน) */
@media (min-width: 1280px) {
  .ixr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0f2f7; color: #0b1e3f !important; text-decoration: none }
  .ixr-card .h + .ixr-row { border-top: 0 }
  .ixr-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none }
  .ixr-row > span:not(.tg) { flex: 1; min-width: 0 }
  .ixr-row b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .ixr-row small { font-size: 11.5px; color: #7a849c }
  .ixr-row em { font-style: normal; font-weight: 800; font-size: 14px; color: #18a058; white-space: nowrap }
  .ixr-card .rk { flex: none; width: 22px; height: 22px; border-radius: 8px; color: #fff; font-style: normal; font-size: 12px; font-weight: 800; display: grid; place-items: center }
  .ixr-row .tg { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: #fff6dc; color: #b07d00 }
  .ixr-row .tg.platinum { background: #eef1f8; color: #4b5470 }
  .ixr-empty { margin: 0; padding: 12px; border-radius: 14px; background: #f8f9fd; color: #8a93a8; font-size: 13px; text-align: center }
  .ixt-tr-B > .ixt-earn, .ixt-tr-B > .ix-sec:has(+ .ixt-earn) { display: none }
}

/* index แท็บโรงเรียน: แถบขวา แบบ B (สปอนเซอร์บริจาคสูงสุด + กำลังระดมทุน) */
@media (min-width: 1280px) {
  .ixo .ixr-row img { object-fit: contain; background: #fff; border: 1px solid #eef0f6 }
  .ixr-proj { display: block; padding: 10px 0; border-top: 1px solid #f0f2f7; color: #0b1e3f !important; text-decoration: none }
  .ixr-card .h + .ixr-proj { border-top: 0 }
  .ixr-proj > b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .ixr-proj > small { display: block; font-size: 11.5px; color: #7a849c }
  .ixr-proj .bar { display: block; height: 7px; border-radius: 99px; background: #eef0f6; margin: 7px 0 5px; overflow: hidden }
  .ixr-proj .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7b5cd6, #5b7cfa) }
  .ixr-proj .ft { display: flex; justify-content: space-between; font-size: 11.5px; color: #7a849c }
  .ixr-proj .ft b { color: #5b6bd6 }
  .ixo-or-B > .ixo-spn, .ixo-or-B > .ix-sec:has(+ .ixo-spn) { display: none }
}

/* index แท็บองค์กร: แถบขวา = ภาพรวมทุน + สนับสนุนล่าสุด LIVE (ซ่อนตัวเลข 4 ช่อง + ลิสต์ LIVE ตรงกลาง) */
@media (min-width: 1280px) {
  .ixr-card .h .ixs-live { margin-left: 2px }
  .ixp .ixr-row img { object-fit: contain; background: #fff; border: 1px solid #eef0f6 }
  .ixp .ixr-row small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .ixr-sum { background: linear-gradient(140deg, #0b1e3f, #3b2f7a 60%, #7b5cd6); color: #fff !important }
  .ixr-sum .big small { display: block; font-size: 12px; opacity: .75 }
  .ixr-sum .big b { display: flex; align-items: center; gap: 6px; font-size: 28px; font-weight: 800; color: #ffd66b }
  .ixr-sum .tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 }
  .ixr-sum .tl span { padding: 9px 4px; border-radius: 14px; background: rgba(255, 255, 255, .1); text-align: center; font-size: 11px; opacity: .92 }
  .ixr-sum .tl b { display: block; font-size: 16px }
  .ixr-sum .go { display: block; padding: 11px; border-radius: 14px; background: #fff; color: #3b2f7a !important; font-weight: 800; text-align: center; text-decoration: none }
  .ixp-rl > .ixp-st4, .ixp-rl > .ixp-feed, .ixp-rl > .ix-sec:has(+ .ixp-feed) { display: none }
}
/* 2026-10-31 ผู้ปกครอง: 3 คอลัมน์ทุกหน้า (เมนูซ้าย | เนื้อหา | แถบขวา includes/parent_rail.php) */
@media (max-width: 1023px) { aside.dsk-rail { display: none !important; } } /* มือถือ: ไม่แสดงแถบขวา (.ph ใน parent_home.css ตั้ง display:flex ทับ) */
@media (min-width: 1024px) {
  .dsk-wrap.has-rail { grid-template-columns: 280px minmax(0, 1fr) 340px; }
  .dsk-wrap.has-rail > .dsk-rail { display: flex; flex-direction: column; gap: 14px; padding: 0 0 24px; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: none; }
  .dsk-wrap.has-rail > .dsk-rail::-webkit-scrollbar { display: none; }
  .dsk-wrap.has-rail > .dsk-rail > * { flex: none; }
  .dsk-wrap.has-rail > .dsk-rail .twc { margin: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .dsk-wrap.has-rail { grid-template-columns: 240px minmax(0, 1fr) 300px; } }
@media (min-width: 1024px) { .dsk-wrap.has-rail .dsk-main .pjx, .dsk-wrap.has-rail .dsk-main .container { max-width: none; margin-left: 0; margin-right: 0; } } /* มีแถบขวาแล้ว เนื้อหากว้างเต็มคอลัมน์กลาง */
@media (min-width: 1024px) { .dsk-wrap.has-rail .sx2 .sx2-ban { display: none; } .dsk-wrap.has-rail .dsk-main .sx2 { max-width: none; margin: 0; } } /* โรงเรียน: แบนเนอร์รอ Verify ย้ายไปแถบขวาแล้ว */
@media (min-width: 1024px) { .dsk-wrap.has-rail .sx2-hero .bd { grid-template-columns: auto 1fr auto; } .dsk-wrap.has-rail .sx2-hero .st { grid-column: 3; } .dsk-wrap.has-rail .sx2-hero .bt { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 14px; } } /* โรงเรียนมีแถบขวา: ปุ่มลงแถวล่าง ชื่อไม่ถูกบีบ */

/* 2026-10-31 เมนูซ้ายแบบ C — สไตล์เดียวกับเมนูล่างมือถือ (ไอคอนเส้น me1–me4 · โลโก้ทอง · น้ำเงิน #1c4fd6) */
.ds-nav a.ds-feed { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; margin-bottom: 6px; border-bottom: 1px solid #eef0f6; border-radius: 0; color: #0b1e3f; text-decoration: none; }
.ds-nav a.ds-feed:hover { background: none; } .ds-nav a.ds-feed b { display: block; font-size: 14.5px; font-weight: 800; } .ds-nav a.ds-feed small { display: block; font-size: 11.5px; color: #8a93a8; font-weight: 500; } .ds-nav a.ds-feed.on b { color: #1c4fd6; }
.ds-logo { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: radial-gradient(120% 90% at 50% 0%, #fff, rgba(255,255,255,.7) 70%); box-shadow: inset 0 1px 1px #fff, inset 0 -3px 6px rgba(185,142,12,.15), 0 4px 12px rgba(11,30,63,.15); outline: 3px solid rgba(240,230,255,.7); transition: outline-color .2s; }
.ds-logo img { width: 31px; height: auto; } .ds-nav a.ds-feed.on .ds-logo { outline-color: #b9d3ff; }
.ds-nav a.ds-m { gap: 12px; padding: 7px 8px; border-radius: 14px; color: #55607a; font-weight: 600; font-size: 14.5px; }
.ds-nav a.ds-m::before { display: none !important; } .ds-nav a.ds-m:hover { background: #f6f8fd; color: #0b1e3f; } .ds-nav a.ds-m.on { background: none; color: #1c4fd6; }
.ds-bx { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; background: #f5f7fc; border: 1px solid #e8ecf4; transition: .15s; }
.ds-me1 { display: block; width: 22px; height: 22px; background-color: #6b7590; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background-color .15s; }
.ds-nav a.ds-m.on .ds-bx { background: #fff; border-color: #c9d8ff; box-shadow: 0 4px 12px rgba(28,79,214,.15); } .ds-nav a.ds-m.on .ds-me1 { background-color: #1c4fd6; }
.ds-nav a.ds-m.on::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #1c4fd6; }

/* 2026-10-31 หัวเมนู "ฟีดของฉัน" ตอนอยู่หน้าฟีด = การ์ดไล่สีม่วง→น้ำเงิน แบบปุ่มหลักของเว็บ (ภาพอ้างอิงจากผู้ใช้) · แทนพื้นกรมท่าเดิม */
.ds-nav a.ds-feed.on { background: #0b1e3f; color: #fff; border-radius: 18px; border-bottom-color: transparent; padding: 10px; margin-bottom: 10px; box-shadow: 0 10px 22px rgba(11, 30, 63,.32); }
.ds-nav a.ds-feed.on:hover { background: #0b1e3f; }
.ds-nav a.ds-feed.on b { color: #fff; } .ds-nav a.ds-feed.on small { color: rgba(255,255,255,.82); }
.ds-nav a.ds-feed.on .ds-logo { outline-color: rgba(255,255,255,.55); box-shadow: inset 0 1px 1px #fff, 0 4px 12px rgba(20,21,60,.25); }

/* 2026-10-31 เมนูทำรายการ: ไอคอน 3 มิติบนแท่นกลมนูน (แบบ C) · การ์ดขาวขอบอ่อน */
.hmx-menu .hmx-mi { background: #fff; border: 1px solid #edf0f6; box-shadow: 0 6px 16px rgba(11,30,63,.06); }
.hmx-menu .hmx-mi .ic.i3 { width: 66px; height: 66px; border-radius: 20px; background: radial-gradient(circle at 30% 25%, #fff, var(--bg) 70%); box-shadow: inset 0 -4px 8px rgba(11,30,63,.06), 0 8px 16px color-mix(in srgb, var(--fg) 22%, transparent); }
.hmx-menu .hmx-mi .ic.i3 .i3s { width: 48px; height: 48px; filter: drop-shadow(0 6px 8px rgba(11,30,63,.18)); }
.hmx-menu .hmx-mi .ic.i3 > svg:not(.i3s) { filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--fg) 30%, transparent)); }

/* 2026-10-31 ไอคอนแจ้งเตือน 3 มิติ แบบ B (แท่นกลมนูน · includes/noti_icons3d.php) — ทั้งกล่องกระดิ่งและหน้าแจ้งเตือน */
.nt-ic:has(> svg.n3d) { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 15px; display: grid; place-items: center; color: inherit; background: radial-gradient(circle at 30% 25%, #fff, var(--n3bg, #eef1f8) 72%) !important; box-shadow: inset 0 -3px 6px rgba(11,30,63,.06), 0 5px 12px rgba(11,30,63,.08); }
.nt-ic svg.n3d { width: 34px !important; height: 34px !important; fill: none; stroke: none; filter: drop-shadow(0 4px 5px rgba(11,30,63,.16)); }
.nt-c-report { --n3bg: #e3edff; } .nt-c-gift { --n3bg: #ffe4ea; } .nt-c-lock { --n3bg: #fff0dd; } .nt-c-verify { --n3bg: #dff6ea; } .nt-c-schol { --n3bg: #e3edff; } .nt-c-skill { --n3bg: #fff5d6; }
.nt-c-family { --n3bg: #efe9ff; } .nt-c-wallet { --n3bg: #e3edff; } .nt-c-event { --n3bg: #ffe4ea; } .nt-c-goal { --n3bg: #ffe4ea; } .nt-c-system { --n3bg: #fff5d6; }

/* 2026-11-06 โปรไฟล์ (public_profile.php) ตามที่ลูกค้าแจ้ง: มือถือ ผู้รับรอง/ทุน/เอกสาร ลงไปล่างสุด · กราฟ GPA อยู่ในการ์ดผลการเรียน · เป้าหมายแบบหน้าจัดการระบบ กดไปแก้ไข */
@media (max-width: 1023px) { .ppx-side { order: 2; } .ppx-main { order: 1; } }
.pp-gpa-in { margin: 4px 0 12px; padding: 12px; border-radius: 14px; background: #f7f6fe; }
.pp-gpa-in .pp-gpa-now { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.pp-gpa-in .pp-gpa-now b { font-size: 24px; font-weight: 800; color: #4b3fb5; }
.pp-gpa-in .pp-gpa-now small { font-size: 12px; color: #7a849c; }
.pp-gpa-in svg { width: 100%; height: auto; display: block; }
.pp-goal-lnk { cursor: pointer; margin: 0 0 14px; }
.pp-short-row:has(> a:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pp-short-row:has(> a:nth-child(5)) span { font-size: 22px; }

/* 2026-11-06 ลายเซ็นผู้รับรอง (public_profile) */
.ppx-sig { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.ppx-sig span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; background: #fff; }   /* 2026-11-06 ลูกค้า: ลายเซ็นเอาขอบออก */
.ppx-sig img { height: 46px; max-width: 100%; object-fit: contain; }
.ppx-sig small { font-size: 11px; color: #7a849c; }