/* ============================================================
   ACMS — ธีมโทนชมพู-ม่วง (pink / purple / blue) บนพื้นเทาอมม่วงอ่อน
   Display/Body: Noto Sans Thai Looped (ตัวอักษรไทยแบบมีหัว) via Google Fonts
   ============================================================ */
:root{
  /* ----- สีหลักของแบรนด์ (ชมพู) ----- */
  --brand:#e5397f;       /* ชมพูหลัก */
  --brand-600:#c9246b;   /* ชมพูเข้ม (hover/active) */
  --brand-100:#fcdcea;   /* ชมพูอ่อนพื้นหลัง */
  --brand-50:#fdf2f7;    /* ชมพูจางมาก */

  /* ----- สีเสริมสำหรับการ์ด/กราฟ ----- */
  --purple:#6d5bf5;   --purple-600:#5b46d9;  --purple-50:#f1eeff;
  --blue:#2f80ed;     --blue-400:#4dc3f7;    --blue-50:#eaf4fe;
  --teal:#14b8a6;     --green:#22c55e;
  --amber:#f59e0b;    --amber-400:#fbbf24;
  --red:#ef4444;

  /* ----- ไล่เฉดสำหรับการ์ดสถิติ ----- */
  --grad-pink:linear-gradient(135deg,#f2568f 0%,#e02f76 100%);
  --grad-purple:linear-gradient(135deg,#9b8bf8 0%,#6d5bf5 100%);
  --grad-blue:linear-gradient(135deg,#57c7f8 0%,#2f80ed 100%);
  --grad-amber:linear-gradient(135deg,#fbbf24 0%,#f97316 100%);
  --grad-green:linear-gradient(135deg,#4ade80 0%,#16a34a 100%);
  --grad-brand:linear-gradient(135deg,#f2568f 0%,#c9246b 100%);

  /* ----- กลาง ----- */
  --ink:#2b2540;         /* ตัวอักษรหลัก (ม่วงเข้มอมเทา) */
  --muted:#8b87a3;       /* ข้อความรอง */
  --line:#ecebf4;        /* เส้นคั่นบางๆ อมม่วง */
  --surface:#ffffff;     /* การ์ด */
  --bg:#f7f6fb;          /* พื้นหลังหน้า เทาอมม่วงอ่อน */
  --dark:#2f2a52;        /* หัวตาราง/พื้นเข้ม */
  --gold:#f0b429; --silver:#9ca3af; --bronze:#c2833f;
  --shadow:0 1px 2px rgba(43,37,64,.04), 0 10px 30px rgba(109,91,245,.07);
  --shadow-lg:0 18px 40px rgba(43,37,64,.12);
  --radius:18px;

  /* ----- ชื่อเดิม (ยังใช้ในโค้ดเก่า) — ชี้มาที่สีแบรนด์ใหม่ ----- */
  --orange:var(--brand);
  --orange-600:var(--brand-600);
  --orange-100:var(--brand-100);
  --orange-50:var(--brand-50);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans Thai Looped","Sarabun","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink);
  margin:0; line-height:1.6; font-size:15px; letter-spacing:.1px;
}
a{color:var(--orange-600); text-decoration:none}
a:hover{color:var(--orange)}
h1,h2,h3,h4,h5{font-weight:600; letter-spacing:-.2px; color:var(--ink)}

/* ---------- Navbar ---------- */
.app-navbar{
  background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(39,34,30,.02);
}
.app-navbar .navbar-brand{
  display:flex; align-items:center; gap:.55rem;
  font-weight:600; color:var(--ink); letter-spacing:-.3px;
}
.app-navbar .brand-mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg,var(--orange),var(--orange-600));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem;
  box-shadow:0 4px 12px rgba(229,57,127,.35); overflow:hidden;
}
.app-navbar .brand-mark img{width:100%;height:100%;object-fit:cover}
.app-navbar .nav-link{color:var(--ink); font-weight:500; border-radius:10px; padding:.4rem .8rem !important}
.app-navbar .nav-link:hover{background:var(--orange-50); color:var(--orange-600)}
.app-navbar .navbar-toggler{border:none; padding:.25rem .5rem}
.app-navbar .navbar-toggler:focus{box-shadow:none}
.app-navbar .dropdown-menu{border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}
.badge-role{background:var(--orange-100); color:var(--orange-600); font-weight:500; border-radius:20px; padding:.25em .7em}

/* ---------- ปุ่ม ---------- */
.btn{border-radius:11px; font-weight:500; padding:.5rem 1.05rem; transition:.15s}
.btn-brand{background:var(--grad-brand); border:none; color:#fff; box-shadow:0 6px 16px rgba(229,57,127,.32)}
.btn-brand:hover{background:var(--orange-600); border-color:var(--orange-600); color:#fff; transform:translateY(-1px)}
.btn-outline-brand{color:var(--orange-600); border-color:#f6c99f}
.btn-outline-brand:hover{background:var(--orange); border-color:var(--orange); color:#fff}
.btn-lg{padding:.7rem 1.4rem; border-radius:13px}

/* ---------- การ์ด ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.card-header{
  background:#fff; border-bottom:1px solid var(--line);
  font-weight:600; color:var(--ink); padding:.9rem 1.15rem;
}
.card-body{padding:1.15rem}
.card-footer{background:#fff; border-top:1px solid var(--line)}

/* ---------- การ์ดสถิติ ---------- */
.stat-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.15rem 1.25rem; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:1rem; height:100%;
}
.stat-card .ic{
  flex:0 0 auto; width:52px; height:52px; border-radius:14px;
  background:var(--orange-50); color:var(--orange-600);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.stat-card .num{font-size:1.7rem; font-weight:700; line-height:1.1; color:var(--ink)}
.stat-card .lbl{color:var(--muted); font-size:.85rem}

/* ---------- หัวข้อหน้า ---------- */
.page-title{
  font-size:1.5rem; font-weight:600; margin:0 0 1.25rem;
  display:flex; align-items:center; gap:.6rem;
}
.page-title::before{
  content:""; width:5px; height:1.4rem; border-radius:3px;
  background:linear-gradient(var(--orange),var(--orange-600));
}

/* ---------- ตาราง ---------- */
.table{--bs-table-bg:transparent; margin:0}
.table thead th{
  background:var(--dark); color:#fff; font-weight:600;
  border-bottom:none; white-space:nowrap; font-size:.82rem; letter-spacing:.03em;
  text-transform:uppercase; padding:.85rem .9rem;
}
.table thead th:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px}
.table thead th:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px}
.table tbody td{border-color:var(--line); padding:.7rem .9rem; vertical-align:middle}
.table-hover tbody tr:hover{background:var(--orange-50)}

/* ---------- เหรียญ ---------- */
.badge-gold,.badge-silver,.badge-bronze{color:#fff; border-radius:20px; padding:.3em .8em; font-weight:500}
.badge-gold{background:var(--gold)} .badge-silver{background:var(--silver)} .badge-bronze{background:var(--bronze)}

/* ---------- Sidebar (แผงเมนูซ้าย) ---------- */
.app-shell{display:flex; gap:1.5rem; align-items:flex-start}
.app-sidebar{
  flex:0 0 250px; width:250px; align-self:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.6rem; box-shadow:var(--shadow); position:sticky; top:5.2rem;
  /* เมนูยาว: เลื่อนภายในแถบเอง ไม่ต้องเลื่อนทั้งหน้า และตามหน้าจอลงมาเสมอ */
  max-height:calc(100vh - 6.4rem); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#d9d4ee transparent;
}
.app-sidebar .side-link{
  display:flex; align-items:center; gap:.7rem; padding:.62rem .8rem; border-radius:11px;
  color:var(--ink); font-weight:500; margin-bottom:2px; transition:.14s;
}
.app-sidebar .side-link i{font-size:1.1rem; color:var(--muted); width:1.3rem; text-align:center}
.app-sidebar .side-link:hover{background:var(--orange-50); color:var(--orange-600)}
.app-sidebar .side-link:hover i{color:var(--orange-600)}
.app-sidebar .side-link.active{background:linear-gradient(135deg,var(--orange),var(--orange-600)); color:#fff; box-shadow:0 4px 12px rgba(229,57,127,.3)}
.app-sidebar .side-link.active i{color:#fff}
.app-content{flex:1 1 auto; min-width:0}

/* ปุ่มเปิดเมนูบนมือถือ */
.side-toggle{display:none}

/* ---------- Hero (หน้าแรก) ---------- */
.hero{
  position:relative; background:
    radial-gradient(1200px 400px at 80% -20%, var(--orange-100), transparent 60%),
    linear-gradient(180deg,var(--orange-50),transparent);
  border:1px solid var(--line); border-radius:24px; padding:3rem 2rem; overflow:hidden;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:500;
  color:var(--orange-600); background:#fff; border:1px solid var(--orange-100);
  padding:.35rem .85rem; border-radius:30px; margin-bottom:1rem;
}
.hero h1{font-size:2.4rem; font-weight:700; line-height:1.2; margin-bottom:.9rem}
.hero p.lead{color:var(--muted); font-size:1.05rem; max-width:620px}
.hero .hero-art{
  position:absolute; right:-30px; bottom:-30px; font-size:14rem; color:var(--orange);
  opacity:.08; transform:rotate(-8deg); pointer-events:none;
}

/* ---------- feature icon grid ---------- */
.feature{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; height:100%; box-shadow:var(--shadow); transition:.16s;
}
.feature:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(229,57,127,.12)}
.feature .fic{
  width:48px; height:48px; border-radius:13px; background:var(--orange-50); color:var(--orange-600);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:.9rem;
}
.feature h5{margin-bottom:.35rem} .feature p{color:var(--muted); font-size:.9rem; margin:0}

/* ---------- login ---------- */
.login-wrap{min-height:calc(100vh - 140px); display:flex; align-items:center; justify-content:center; padding:1.5rem}
.login-card{width:100%; max-width:410px}
.login-card .brand-mark{
  width:56px; height:56px; border-radius:16px; margin:0 auto .8rem;
  background:linear-gradient(135deg,var(--orange),var(--orange-600));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.7rem;
  box-shadow:0 8px 20px rgba(229,57,127,.35); overflow:hidden;
}
.login-card .brand-mark img{width:100%;height:100%;object-fit:cover}

/* ---------- form ---------- */
.form-control,.form-select{border:1px solid var(--line); border-radius:11px; padding:.55rem .8rem; background:#fff}
.form-control:focus,.form-select:focus{border-color:var(--orange); box-shadow:0 0 0 3px rgba(229,57,127,.12)}
.form-label{font-weight:500; font-size:.9rem; margin-bottom:.3rem}

/* ---------- footer ---------- */
.app-footer{
  color:var(--muted); border-top:1px solid var(--line); background:var(--surface);
  margin-top:3rem !important;
}
.app-footer a{color:var(--muted)} .app-footer a:hover{color:var(--orange-600)}

/* ---------- alert ---------- */
.alert{border:none; border-radius:12px; font-size:.92rem}
.alert-success{background:#ecfdf5; color:#065f46}
.alert-danger{background:#fef2f2; color:#991b1b}
.alert-warning{background:var(--orange-50); color:var(--orange-600)}
.alert-info{background:#eff6ff; color:#1e40af}

.text-brand{color:var(--orange-600) !important}
.text-muted{color:var(--muted) !important}
.bg-brand-soft{background:var(--orange-50)}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .hero{padding:2rem 1.3rem} .hero h1{font-size:1.9rem}
  /* บนมือถือเรียงบนลงล่าง และต้อง stretch ไม่งั้นเนื้อหาจะกว้างเท่า max-content (หน้าบวม/เลื่อนซ้ายขวาได้) */
  .app-shell{flex-direction:column; align-items:stretch}
  .app-content{width:100%; max-width:100%}
  .side-toggle{
    display:flex; align-items:center; gap:.5rem; width:100%; justify-content:center;
    margin-bottom:.8rem; background:var(--surface); border:1px solid var(--line);
    border-radius:12px; padding:.6rem; font-weight:500; color:var(--ink);
  }
  .app-sidebar{
    flex:none; width:100%; position:static; display:none; max-height:none; overflow:visible;
  }
  .app-sidebar.open{display:block}
}
@media (max-width:575.98px){
  body{font-size:14.5px}
  .hero h1{font-size:1.65rem} .hero{border-radius:18px}
  .stat-card{padding:.9rem} .stat-card .ic{width:44px;height:44px;font-size:1.25rem}
  .stat-card .num{font-size:1.4rem}
  .page-title{font-size:1.3rem}
  .card-body{padding:1rem}
}

/* ---------- กันเนื้อหาล้นออกนอกจอ (โดยเฉพาะมือถือ) ---------- */
/* หมายเหตุ: ห้ามตั้ง overflow-x:hidden ที่ body — จะทำให้ body เป็นกล่องเลื่อนและเมนูซ้าย (sticky) ไม่ตามหน้าลงมา
   ให้ html เป็นตัวตัดส่วนล้นแทน และ body ใช้ clip (ตัดส่วนล้นโดยไม่สร้างกล่องเลื่อน) */
html{max-width:100%; overflow-x:hidden}
body{max-width:100%; overflow-x:clip}
.app-content,.container,.container-fluid{max-width:100%; min-width:0}
/* ตารางกว้าง ๆ ให้เลื่อนในกล่องของตัวเอง ไม่ดันทั้งหน้า */
.table-responsive{max-width:100%}
.card,.card-body,.help-box,.page-head{min-width:0}
/* ข้อความยาวไม่มีเว้นวรรค เช่น URL/พาธไฟล์ ให้ตัดบรรทัดได้ */
.help-box,.page-desc,.page-title,.card-title{overflow-wrap:anywhere}
img,svg,canvas,video{max-width:100%}
/* บนจอเล็ก ให้ตารางกว้างพอที่จะอ่านได้แล้วเลื่อนในกล่อง แทนที่จะบีบจนคอลัมน์ละ 1 ตัวอักษร */
@media (max-width:767.98px){
  .table-responsive{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .table-responsive > .table{min-width:560px}
  .table-responsive > .table td,.table-responsive > .table th{white-space:normal; overflow-wrap:break-word}
}

/* focus visibility (การเข้าถึง) */
:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ---------- แบนเนอร์ (carousel) ---------- */
.banner-carousel{border-radius:20px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
.banner-carousel .carousel-item img{width:100%; height:auto; aspect-ratio:1200/360; object-fit:cover; display:block}
.banner-carousel .carousel-indicators [data-bs-target]{width:10px; height:10px; border-radius:50%; border:none}
.banner-carousel .carousel-control-prev,.banner-carousel .carousel-control-next{width:8%}
@media (max-width:575.98px){ .banner-carousel .carousel-item img{aspect-ratio:16/9} }

/* ---------- ไทม์ไลน์ปฏิทินกำหนดการ ---------- */
.timeline{position:relative; padding-left:8px}
.timeline::before{content:""; position:absolute; left:29px; top:8px; bottom:8px; width:2px; background:var(--line)}
.tl-item{position:relative; display:flex; gap:1rem; padding:0 0 1.25rem 0}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:relative; z-index:1; flex:0 0 auto; width:44px; height:44px; border-radius:13px;
  background:#fff; border:2px solid var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.tl-current .tl-dot{background:linear-gradient(135deg,var(--orange),var(--orange-600)); border-color:transparent; color:#fff; box-shadow:0 6px 16px rgba(229,57,127,.35)}
.tl-past .tl-dot{background:var(--orange-50); border-color:var(--orange-100); color:var(--orange)}
.tl-body{padding-top:2px; min-width:0}
.tl-date{font-size:.82rem; color:var(--orange-600); font-weight:500}
.tl-title{font-weight:600; color:var(--ink)}
.tl-detail{font-size:.88rem; color:var(--muted)}
.tl-past .tl-title{color:var(--muted)}

/* ---------- Popup ประกาศ ---------- */
.popup-content{border:none; border-radius:20px; overflow:hidden; position:relative}
.popup-img{width:100%; height:auto; max-height:320px; object-fit:cover; display:block}
.popup-close{position:absolute; top:12px; right:12px; z-index:5; background:#fff; border-radius:50%; padding:.55rem; opacity:1; box-shadow:0 2px 8px rgba(0,0,0,.15)}
.fw-500{font-weight:500}
.min-w-0{min-width:0}

/* ---------- บล็อกหน้าแรกกำหนดเอง ---------- */
.home-block{scroll-margin-top:80px}
.home-html{color:var(--ink); line-height:1.7}
.home-html img{max-width:100%; height:auto; border-radius:12px}
.home-html a{color:var(--orange-600)}
.home-html ul,.home-html ol{padding-left:1.25rem}

/* กล่องลิงก์/ดาวน์โหลด */
.link-card{
  display:flex; align-items:center; gap:.9rem; padding:1rem 1.15rem; height:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); color:var(--ink); transition:.16s;
}
.link-card:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(229,57,127,.14); color:var(--ink); border-color:var(--orange-100)}
.link-card .lc-ic{flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:var(--orange-50); color:var(--orange-600); display:flex; align-items:center; justify-content:center; font-size:1.35rem}
.link-card .lc-body{flex:1 1 auto; min-width:0}
.link-card .lc-title{display:block; font-weight:600}
.link-card .lc-desc{display:block; font-size:.85rem; color:var(--muted)}
.link-card .lc-arrow{color:var(--muted); flex:0 0 auto}
.link-card:hover .lc-arrow{color:var(--orange-600)}

/* หน้าจัดการหน้าแรก */
.section-row .form-check-input{cursor:pointer}

/* ---------- Badge แจ้งเตือนบนเมนู sidebar ---------- */
.side-link{position:relative}
.side-link .side-badge{
  margin-left:auto; flex:0 0 auto;
  min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#ef4444; color:#fff; font-size:.72rem; font-weight:600;
  border-radius:10px; line-height:1;
}
.side-link.active .side-badge{background:#fff; color:var(--orange-600)}

/* ---------- Leaderboard / Podium (หน้าอันดับสวยงาม) ---------- */
.podium{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:24px 0 36px;flex-wrap:wrap}
.podium .col{display:flex;flex-direction:column;align-items:center;width:180px;max-width:32%}
.podium .medal-ring{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;margin-bottom:-24px;z-index:2;box-shadow:0 6px 16px rgba(0,0,0,.18);border:4px solid #fff}
.podium .p1 .medal-ring{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.podium .p2 .medal-ring{background:linear-gradient(135deg,#cbd5e1,#94a3b8)}
.podium .p3 .medal-ring{background:linear-gradient(135deg,#d8a05a,#b45309)}
.podium .stand{width:100%;border-radius:14px 14px 0 0;padding:34px 12px 16px;text-align:center;color:#fff;position:relative}
.podium .p1 .stand{background:linear-gradient(135deg,#fbbf24,#d97706);min-height:150px}
.podium .p2 .stand{background:linear-gradient(135deg,#94a3b8,#64748b);min-height:120px}
.podium .p3 .stand{background:linear-gradient(135deg,#b45309,#92400e);min-height:100px}
.podium .rank-num{font-size:2rem;font-weight:800;opacity:.85;line-height:1}
.podium .sch-name{font-weight:600;font-size:.95rem;margin:8px 0 4px;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.podium .medals-line{font-size:.85rem;opacity:.95}
.lb-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);margin-bottom:10px;transition:.15s}
.lb-row:hover{box-shadow:0 4px 14px rgba(0,0,0,.07);transform:translateY(-1px)}
.lb-rank{width:42px;height:42px;border-radius:12px;background:var(--orange-50);color:var(--orange-600);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:0 0 auto}
.lb-row.top1 .lb-rank{background:#fef3c7;color:#b45309}
.lb-row.top2 .lb-rank{background:#f1f5f9;color:#475569}
.lb-row.top3 .lb-rank{background:#fdf0e2;color:#b45309}
.lb-name{flex:1;font-weight:600;min-width:0}
.lb-medals{display:flex;gap:10px;font-size:.9rem;flex-wrap:wrap}
.lb-medals .m{display:inline-flex;align-items:center;gap:4px}
.lb-dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.lb-dot.g{background:#f59e0b}.lb-dot.s{background:#94a3b8}.lb-dot.b{background:#b45309}
.lb-total{font-weight:800;color:var(--orange-600);font-size:1.2rem;min-width:38px;text-align:center}

/* =======================================================================
   ปรับปรุงการใช้งาน (UX) — เมนูแบบกลุ่ม, ค้นหาเมนู, กล่องงานค้าง,
   แถบขั้นตอน, หัวข้อหน้าพร้อมคำอธิบาย, กล่องคำแนะนำ, แผนผังการทำงาน
   ======================================================================= */

/* ---------- แถบค้นหาเมนู ---------- */
.side-search{position:relative; margin:.15rem .15rem .6rem}
.side-search i{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.9rem}
.side-search input{
  width:100%; border:1px solid var(--line); background:#fff; border-radius:10px;
  padding:.45rem .6rem .45rem 2rem; font-size:.88rem; font-family:inherit;
}
.side-search input:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-50)}

/* ---------- เมนูแบบกลุ่ม ---------- */
.side-group{margin-bottom:.55rem}
.side-group + .side-group{border-top:1px dashed var(--line); padding-top:.55rem}
.side-group-title{
  display:flex; align-items:center; gap:.45rem;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--muted); padding:.15rem .8rem .35rem;
}
.side-group-title i{font-size:.85rem}
.side-group.has-active .side-group-title{color:var(--orange-600)}
.side-link small{display:block; font-size:.72rem; color:var(--muted); font-weight:400}
.side-help{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  margin-top:.5rem; padding:.55rem; border-radius:11px; font-size:.85rem;
  background:var(--orange-50); color:var(--orange-600); font-weight:500;
}
.side-help:hover{background:var(--orange-100); color:var(--orange-600)}

/* ---------- หัวข้อหน้า + คำอธิบาย ---------- */
.page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem;
}
.page-head .page-title{margin-bottom:0}
.page-desc{color:var(--muted); font-size:.9rem; margin:.35rem 0 0 calc(5px + .6rem)}
.page-head-actions{display:flex; gap:.5rem; flex-wrap:wrap}

/* ---------- กล่องคำแนะนำ ---------- */
.help-box{
  display:flex; align-items:flex-start; gap:.7rem; position:relative;
  background:var(--orange-50); border:1px solid var(--orange-100);
  border-radius:14px; padding:.85rem 2.2rem .85rem 1rem; margin-bottom:1.25rem;
  font-size:.9rem; color:#7c3a09;
}
.help-box > i{color:var(--orange-600); font-size:1.1rem; flex:0 0 auto; margin-top:.1rem}
.help-box ol,.help-box ul{margin:.4rem 0 0; padding-left:1.1rem}
.help-box .help-close{
  position:absolute; top:.35rem; right:.6rem; border:none; background:none;
  font-size:1.3rem; line-height:1; color:var(--muted); cursor:pointer;
}

/* ---------- กล่อง "สิ่งที่ต้องทำตอนนี้" ---------- */
.todo-list{display:flex; flex-direction:column}
.todo-item{
  display:flex; align-items:center; gap:.8rem; padding:.8rem 1.1rem;
  border-bottom:1px solid var(--line); color:var(--ink); transition:.14s;
}
.todo-item:last-child{border-bottom:none}
.todo-item:hover{background:var(--orange-50); color:var(--ink)}
.todo-ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.todo-item.tone-danger  .todo-ic{background:#fee2e2; color:#dc2626}
.todo-item.tone-warning .todo-ic{background:#fef3c7; color:#d97706}
.todo-item.tone-info    .todo-ic{background:#dbeafe; color:#2563eb}
.todo-label{flex:1 1 auto; font-weight:500; font-size:.93rem}
.todo-count{
  flex:0 0 auto; min-width:26px; padding:.1rem .55rem; border-radius:20px;
  background:#ef4444; color:#fff; font-size:.78rem; font-weight:600; text-align:center;
}
.todo-item.tone-info .todo-count{background:#64748b}
.todo-item.tone-warning .todo-count{background:#f59e0b}
.todo-go{color:var(--muted); font-size:.85rem}

/* ---------- แถบขั้นตอน (stepper) ---------- */
.steps{display:flex; gap:.7rem; overflow-x:auto; padding:.15rem .15rem .45rem}
.step{
  flex:1 1 0; min-width:158px; display:flex; flex-direction:column; gap:.5rem;
  padding:.9rem 1rem; border-radius:14px; border:1px solid var(--line);
  background:#fff; color:var(--ink); position:relative; transition:.14s;
}
.step:hover{border-color:var(--orange); color:var(--ink)}
.step-dot{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:.82rem; font-weight:700;
  background:#e5e7eb; color:#6b7280; flex:0 0 auto;
}
.step-title{display:block; font-weight:600; font-size:.88rem; line-height:1.25}
.step-hint{display:block; font-size:.76rem; color:var(--muted); margin-top:.15rem}
.step.done .step-dot{background:#22c55e; color:#fff}
.step.done{border-color:#bbf7d0; background:#f0fdf4}
.step.current{border-color:var(--orange); background:var(--orange-50); box-shadow:0 4px 14px rgba(229,57,127,.15)}
.step.current .step-dot{background:linear-gradient(135deg,var(--orange),var(--orange-600)); color:#fff}
.step.current .step-title{color:var(--orange-600)}
.step.current .step-hint::after{
  content:"ทำขั้นนี้ต่อ"; display:inline-block; margin-left:.4rem; vertical-align:1px;
  background:var(--grad-brand); color:#fff; font-size:.66rem; font-weight:600;
  padding:.08rem .5rem; border-radius:20px; white-space:nowrap;
}

/* ---------- แผนผังการทำงาน (หน้าคู่มือ) ---------- */
.flow-map{display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem}
.flow-node{
  flex:1 1 0; min-width:132px; text-align:center; padding:.9rem .6rem;
  border:1px solid var(--line); border-radius:14px; background:#fff; position:relative;
}
.flow-node + .flow-node::before{
  content:"\F285"; font-family:"bootstrap-icons"; position:absolute; left:-.55rem; top:50%;
  transform:translateY(-50%); color:var(--orange); font-size:.8rem;
}
.flow-ic{
  width:40px; height:40px; margin:0 auto .5rem; border-radius:12px;
  background:var(--orange-50); color:var(--orange-600);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.flow-role{font-size:.72rem; color:var(--orange-600); font-weight:600}
.flow-txt{font-size:.82rem; line-height:1.3; margin-top:.15rem}

/* ---------- คู่มือแบบขั้นตอน ---------- */
.guide-list{margin:0; padding-left:1.2rem}
.guide-list li{margin-bottom:.9rem}
.guide-title{font-weight:600; display:flex; align-items:center; flex-wrap:wrap; gap:.3rem}
.guide-desc{color:var(--muted); font-size:.88rem; margin-top:.15rem}
.btn-outline-brand{border:1px solid var(--orange); color:var(--orange-600); border-radius:9px}
.btn-outline-brand:hover{background:var(--orange); color:#fff}
.bg-brand{background:var(--orange-600) !important; color:#fff}
.border-brand{border-color:var(--orange) !important}

@media (max-width:767.98px){
  .steps{flex-direction:column}
  .step{min-width:0}
  .step.current::after{top:.45rem; right:.5rem}
  .page-head{flex-direction:column; gap:.6rem}
}

/* =======================================================================
   ชุดคอมโพเนนต์ตามดีไซน์อ้างอิง — การ์ดไล่เฉด, การ์ดกราฟ, ไอคอนชิป,
   ป้ายสถานะทรงแคปซูล, แท็บ, โมดัล
   ======================================================================= */

/* ---------- การ์ดไล่เฉด (KPI) ---------- */
.grad-card{
  position:relative; overflow:hidden; border:none; border-radius:var(--radius);
  color:#fff; padding:1.25rem 1.35rem; min-height:150px; height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 12px 28px rgba(43,37,64,.14);
}
.grad-card.pink{background:var(--grad-pink)}
.grad-card.purple{background:var(--grad-purple)}
.grad-card.blue{background:var(--grad-blue)}
.grad-card.amber{background:var(--grad-amber)}
.grad-card.green{background:var(--grad-green)}
.grad-card .gc-label{font-size:.85rem; font-weight:500; opacity:.92}
.grad-card .gc-value{font-size:1.85rem; font-weight:700; line-height:1.15; margin-top:.1rem}
.grad-card .gc-sub{font-size:.76rem; opacity:.85}
.grad-card .gc-row{display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem}
.grad-card .gc-spark{flex:0 0 auto; opacity:.85}
.grad-card .gc-spark svg{display:block; overflow:visible}
/* คลื่นตกแต่งมุมล่าง */
.grad-card .gc-wave{
  position:absolute; left:0; right:0; bottom:0; height:58%;
  background:rgba(255,255,255,.13);
  -webkit-mask:radial-gradient(120% 100% at 50% 100%, #000 60%, transparent 61%);
          mask:radial-gradient(120% 100% at 50% 100%, #000 60%, transparent 61%);
  pointer-events:none;
}
.grad-card .gc-glow{
  position:absolute; width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.14); right:-60px; top:-70px; pointer-events:none;
}
.grad-card a, .grad-card .btn-ghost{color:#fff}
/* การ์ดที่เป็นลิงก์ (<a class="grad-card">) ต้องคงตัวอักษรสีขาวตอนเมาส์ชี้ — กฎ a:hover สีส้มทำให้ตัวหนังสือกลืนกับพื้น */
a.grad-card, a.grad-card:hover, a.grad-card:focus{color:#fff; text-decoration:none}
a.grad-card{transition:transform .15s, box-shadow .15s}
a.grad-card:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(43,37,64,.2)}
.btn-ghost{
  background:rgba(255,255,255,.22); border:none; color:#fff; border-radius:9px;
  padding:.25rem .7rem; font-size:.8rem; font-weight:500;
}
.btn-ghost:hover{background:rgba(255,255,255,.34); color:#fff}

/* ---------- ไอคอนชิป (วงกลมสีอ่อน) ---------- */
.icon-chip{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:#fff;
}
.icon-chip.pink{background:var(--grad-pink)}
.icon-chip.purple{background:var(--grad-purple)}
.icon-chip.blue{background:var(--grad-blue)}
.icon-chip.amber{background:var(--grad-amber)}
.icon-chip.green{background:var(--grad-green)}
.icon-chip.soft-pink{background:var(--brand-50); color:var(--brand)}
.icon-chip.soft-purple{background:var(--purple-50); color:var(--purple)}
.icon-chip.soft-blue{background:var(--blue-50); color:var(--blue)}

/* แถบสถิติย่อยใต้กราฟ (ไอคอน + ตัวเลข) */
.mini-stats{display:flex; flex-wrap:wrap; gap:1rem; border-top:1px solid var(--line); padding-top:1rem; margin-top:1rem}
.mini-stat{display:flex; align-items:center; gap:.65rem; flex:1 1 150px; min-width:0}
.mini-stat .ms-lbl{font-size:.76rem; color:var(--muted); line-height:1.2}
.mini-stat .ms-val{font-weight:700; font-size:1rem; line-height:1.2}

/* ---------- การ์ดกราฟ ---------- */
.chart-card .card-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; border-bottom:none; padding-bottom:.2rem;
}
.chart-card .ch-title{font-size:1.02rem; font-weight:600; line-height:1.2}
.chart-card .ch-sub{font-size:.78rem; color:var(--muted); font-weight:400}
.chart-legend{display:flex; gap:.9rem; align-items:center; font-size:.78rem; color:var(--muted)}
.chart-legend span{display:inline-flex; align-items:center; gap:.35rem}
.chart-legend i{width:9px; height:9px; border-radius:50%; display:inline-block}
.chart-box{position:relative}

/* แท็บช่วงเวลาบนหัวกราฟ (DAILY / WEEKLY / MONTHLY) */
.range-tabs{display:flex; gap:.2rem; flex-wrap:wrap}
.range-tabs a{
  font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); padding:.3rem .6rem; border-bottom:2px solid transparent;
}
.range-tabs a:hover{color:var(--ink)}
.range-tabs a.active{color:var(--brand); border-bottom-color:var(--brand)}

/* ตัวเลขใหญ่ข้างกราฟ */
.big-figure .bf-value{font-size:2rem; font-weight:700; line-height:1.1}
.big-figure .bf-label{font-size:.78rem; color:var(--muted)}

/* วงแหวนโดนัท — ตัวเลขกลางวง */
.donut-wrap{position:relative; margin:0 auto; max-width:250px}
.donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none; text-align:center;
}
.donut-center .dc-value{font-size:1.6rem; font-weight:700; line-height:1}
.donut-center .dc-label{font-size:.74rem; color:var(--muted)}
.donut-legend{display:flex; justify-content:center; gap:1.6rem; flex-wrap:wrap; margin-top:1.1rem}
.donut-legend .dl-val{font-size:1.35rem; font-weight:700; line-height:1}
.donut-legend .dl-val sup{font-size:.7rem; font-weight:600; margin-left:1px}
.donut-legend .dl-key{display:flex; align-items:center; gap:.35rem; font-size:.76rem; color:var(--muted); margin-top:.2rem}
.donut-legend .dl-key i{width:8px; height:8px; border-radius:50%; display:inline-block}

/* ---------- ป้ายสถานะทรงแคปซูล ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.3rem;
  border-radius:20px; padding:.28em .85em; font-size:.78rem; font-weight:600;
  color:#fff; line-height:1.4; white-space:nowrap;
}
.pill-pink{background:var(--brand)} .pill-purple{background:var(--purple)}
.pill-blue{background:var(--blue)}  .pill-green{background:var(--green)}
.pill-amber{background:var(--amber)} .pill-red{background:var(--red)}
.pill-grey{background:#9ca3af}
.pill-soft-pink{background:var(--brand-50); color:var(--brand-600)}
.pill-soft-purple{background:var(--purple-50); color:var(--purple-600)}
.pill-soft-blue{background:var(--blue-50); color:var(--blue)}
.pill-soft-green{background:#e8faf0; color:#15803d}
.pill-soft-amber{background:#fef5e2; color:#b45309}
.pill-soft-red{background:#fdecec; color:#b91c1c}
.pill-soft-grey{background:#f1f1f6; color:#6b7280}

/* ---------- แท็บในหน้า (สำหรับหน้าที่ยุบรวมกัน) ---------- */
.page-tabs{
  display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:1.25rem;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:.35rem; box-shadow:var(--shadow);
}
.page-tabs a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1rem; border-radius:11px; font-weight:500; font-size:.92rem;
  color:var(--muted); transition:.14s; white-space:nowrap;
}
.page-tabs a:hover{background:var(--brand-50); color:var(--brand-600)}
.page-tabs a.active{background:var(--grad-brand); color:#fff; box-shadow:0 5px 14px rgba(229,57,127,.3)}
.page-tabs a.active .pt-count{background:rgba(255,255,255,.28); color:#fff}
.page-tabs .pt-count{
  background:var(--brand-50); color:var(--brand-600); border-radius:20px;
  padding:0 .45em; font-size:.75rem; font-weight:700; min-width:1.5em; text-align:center;
}

/* ---------- โมดัล ---------- */
.modal-content{border:none; border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden}
.modal-header{
  background:var(--grad-brand); color:#fff; border-bottom:none; padding:1rem 1.35rem;
}
.modal-header .modal-title{font-size:1.02rem; font-weight:600}
.modal-header .btn-close{filter:invert(1) grayscale(1) brightness(2); opacity:.85}
.modal-body{padding:1.35rem}
.modal-footer{border-top:1px solid var(--line); padding:.85rem 1.35rem}
.modal-header.plain{background:#fff; color:var(--ink); border-bottom:1px solid var(--line)}
.modal-header.plain .btn-close{filter:none}

/* ---------- ตารางในการ์ด ---------- */
.card > .table-responsive > .table{border-collapse:separate; border-spacing:0 0}
.table tbody tr{border-bottom:1px solid var(--line)}
.table tbody tr:last-child{border-bottom:none}

/* ---------- ปุ่มไอคอนกลม (แถบเครื่องมือเหนือตาราง) ---------- */
.icon-btn{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--muted); display:inline-flex;
  align-items:center; justify-content:center; transition:.14s;
}
.icon-btn:hover{background:var(--brand-50); color:var(--brand); border-color:var(--brand-100)}

/* ---------- แถบค้นหาโค้งมน ---------- */
.search-round{
  border-radius:20px !important; background:#f7f6fb; border-color:transparent !important;
  padding-left:1rem !important;
}

/* ---------- รูปโปรไฟล์/รูปติดบัตรในตาราง ---------- */
.avatar{
  width:40px; height:40px; border-radius:12px; object-fit:cover;
  border:1px solid var(--line); background:#f7f6fb;
}
.avatar-empty{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:1.1rem;
}

@media (max-width:575.98px){
  .grad-card{min-height:128px; padding:1rem}
  .grad-card .gc-value{font-size:1.5rem}
  .page-tabs{overflow-x:auto; flex-wrap:nowrap}
}

/* =======================================================================
   ระยะห่าง/จังหวะการอ่าน (แก้ปัญหากรอบชิดกันเกินไป)
   ======================================================================= */
.app-content > .row + .row,
.app-content > .card + .card,
.app-content > .row + .card,
.app-content > .card + .row{margin-top:1.5rem}
.card-body{padding:1.35rem}
.card-header{padding:1rem 1.35rem}
.table tbody td{padding:.85rem 1rem}
.table thead th{padding:.9rem 1rem}
.page-head{margin-bottom:1.5rem}
.help-box{margin-bottom:1.5rem}
.page-tabs{margin-bottom:1.5rem; padding:.4rem; gap:.35rem}
.grad-card{padding:1.4rem 1.5rem}
.todo-item{padding:.9rem 1.25rem}
.mini-stats{gap:1.25rem; padding-top:1.25rem; margin-top:1.25rem}

/* แถบเนื้อหาไม่ชิดขอบจอบนจอกว้าง */
@media (min-width:992px){
  .container-fluid.py-4{padding-top:1.75rem !important; padding-bottom:1.75rem !important}
}
@media (max-width:991.98px){
  .app-shell{gap:0}
  .card-body{padding:1.1rem}
}

/* =======================================================================
   Toast แจ้งผลการบันทึก (ใช้กับการบันทึกแบบไม่รีเฟรชทั้งหน้า)
   ======================================================================= */
#acmsToasts{
  position:fixed; right:1rem; bottom:1rem; z-index:1090;
  display:flex; flex-direction:column; gap:.5rem; max-width:min(380px,calc(100vw - 2rem));
}
.acms-toast{
  display:flex; align-items:flex-start; gap:.6rem;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:13px; box-shadow:var(--shadow-lg); padding:.8rem 1rem;
  font-size:.9rem; animation:toastIn .22s ease-out;
}
.acms-toast.ok{border-left-color:var(--green)}
.acms-toast.err{border-left-color:var(--red)}
.acms-toast.warn{border-left-color:var(--amber)}
.acms-toast i{font-size:1.05rem; line-height:1.4}
.acms-toast.ok i{color:var(--green)}
.acms-toast.err i{color:var(--red)}
.acms-toast.warn i{color:var(--amber)}
.acms-toast.info i{color:var(--blue)}
.acms-toast .tx{flex:1 1 auto; min-width:0}
@keyframes toastIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.acms-toast{animation:none}}

/* แถบสถานะ "กำลังบันทึก" */
.save-state{font-size:.8rem; color:var(--muted); display:inline-flex; align-items:center; gap:.35rem}
.save-state.saving{color:var(--brand)}
.save-state.saved{color:var(--green)}

/* ขณะกำลังโหลดเนื้อหาใหม่แบบ ajax */
.app-content.is-loading{opacity:.55; transition:opacity .12s; pointer-events:none}
.btn.is-busy{position:relative; color:transparent !important}
.btn.is-busy::after{
  content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%;
  animation:btnSpin .6s linear infinite;
}
.btn-outline-secondary.is-busy::after,.btn-outline-brand.is-busy::after{border-color:rgba(0,0,0,.2); border-top-color:var(--brand)}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ปุ่มที่ถูกล็อกด้วยช่วงเวลา */
.fn-locked{opacity:.55; border-style:dashed !important}
.fn-locked:hover{opacity:.8}

/* =======================================================================
   สีสันเพิ่มเติม — ยังอยู่ในตระกูลชมพู-ม่วง-น้ำเงิน แต่ไม่จืดชืด
   ======================================================================= */

/* ---------- หัวข้อส่วน (มีไอคอนสี) ---------- */
.sec-head{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap}
.sec-ic{
  width:44px; height:44px; border-radius:14px; flex:0 0 auto; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.sec-ic.pink{background:var(--grad-pink); box-shadow:0 6px 16px rgba(229,57,127,.3)}
.sec-ic.purple{background:var(--grad-purple); box-shadow:0 6px 16px rgba(109,91,245,.3)}
.sec-ic.blue{background:var(--grad-blue); box-shadow:0 6px 16px rgba(47,128,237,.3)}
.sec-ic.amber{background:var(--grad-amber); box-shadow:0 6px 16px rgba(245,158,11,.3)}

/* ---------- Hero มีสีสัน ---------- */
.hero-rich{
  background:
    radial-gradient(760px 380px at 88% -10%, rgba(157,139,248,.30), transparent 62%),
    radial-gradient(620px 340px at 6% 108%, rgba(87,199,248,.26), transparent 60%),
    radial-gradient(520px 320px at 45% 120%, rgba(242,86,143,.20), transparent 62%),
    linear-gradient(140deg,#fff6fb 0%, #f6f2ff 55%, #f0f8ff 100%);
  border-color:#f0e7fb; overflow:hidden;
}
.hero-blob{position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; pointer-events:none}
.hero-blob.b1{width:120px;height:120px;right:12%;top:14%;background:radial-gradient(circle at 30% 30%,#ffd0e4,#f2568f)}
.hero-blob.b2{width:70px;height:70px;right:32%;bottom:16%;background:radial-gradient(circle at 30% 30%,#ded6ff,#8b7cf6)}
.hero-blob.b3{width:44px;height:44px;right:6%;bottom:26%;background:radial-gradient(circle at 30% 30%,#cdeeff,#4dc3f7)}
.hero-rich h1{
  background:linear-gradient(100deg,#c9246b 0%, #6d5bf5 55%, #2f80ed 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn-glass{
  background:rgba(255,255,255,.75); border:1px solid #efe4f7; color:var(--ink);
  backdrop-filter:blur(6px); border-radius:13px;
}
.btn-glass:hover{background:#fff; color:var(--brand-600); border-color:var(--brand-100)}

/* ทางลัดใต้ hero */
.hero-quick{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; position:relative; z-index:1}
.hero-quick .hq{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem;
  border-radius:30px; font-size:.88rem; font-weight:500; background:#fff;
  border:1px solid var(--line); color:var(--ink); transition:.15s;
}
.hero-quick .hq i{font-size:1rem}
.hero-quick .hq:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(43,37,64,.10)}
.hero-quick .hq.pink   i{color:var(--brand)}
.hero-quick .hq.purple i{color:var(--purple)}
.hero-quick .hq.blue   i{color:var(--blue)}
.hero-quick .hq.amber  i{color:var(--amber)}
.hero-quick .hq.pink:hover{border-color:var(--brand-100); background:var(--brand-50)}
.hero-quick .hq.purple:hover{border-color:#ded6ff; background:var(--purple-50)}
.hero-quick .hq.blue:hover{border-color:#cde6ff; background:var(--blue-50)}
.hero-quick .hq.amber:hover{border-color:#ffe4b5; background:#fff7e8}

/* ---------- การ์ดประกาศ ---------- */
.ann-card{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); transition:.16s;
}
.ann-card:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(43,37,64,.13)}
.ann-cover{height:150px; overflow:hidden; background:#f3f1fa; position:relative}
.ann-cover img{width:100%; height:100%; object-fit:cover; display:block}
.ann-cover-blank{display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:#fff}
.ann-card.pink   .ann-cover-blank{background:var(--grad-pink)}
.ann-card.purple .ann-cover-blank{background:var(--grad-purple)}
.ann-card.blue   .ann-cover-blank{background:var(--grad-blue)}
.ann-card.amber  .ann-cover-blank{background:var(--grad-amber)}
.ann-card.green  .ann-cover-blank{background:var(--grad-green)}
.ann-card::before{content:""; display:block; height:4px}
.ann-card.pink::before  {background:var(--grad-pink)}
.ann-card.purple::before{background:var(--grad-purple)}
.ann-card.blue::before  {background:var(--grad-blue)}
.ann-card.amber::before {background:var(--grad-amber)}
.ann-card.green::before {background:var(--grad-green)}
.ann-body{padding:1.1rem 1.25rem 1.25rem; display:flex; flex-direction:column; flex:1}
.ann-meta{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem}
.ann-date{font-size:.76rem; color:var(--muted)}
.ann-title{font-size:1.02rem; font-weight:600; line-height:1.35; margin:0 0 .45rem}
.ann-text{font-size:.88rem; color:var(--muted); margin:0 0 .8rem; flex:1}
.ann-links{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem}
.ann-btn{
  display:inline-flex; align-items:center; gap:.35rem; max-width:100%;
  padding:.35rem .8rem; border-radius:20px; font-size:.8rem; font-weight:500;
  background:var(--brand-50); color:var(--brand-600); border:1px solid var(--brand-100);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ann-btn:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.ann-btn.alt{background:var(--purple-50); color:var(--purple-600); border-color:#ded6ff}
.ann-btn.alt:hover{background:var(--purple); color:#fff; border-color:var(--purple)}
.ann-by{font-size:.75rem; color:var(--muted); border-top:1px solid var(--line); padding-top:.55rem}

/* ---------- เมนูข้าง: ไล่สีตามกลุ่ม ---------- */
.side-group:nth-of-type(1) .side-group-title i{color:var(--brand)}
.side-group:nth-of-type(2) .side-group-title i{color:var(--purple)}
.side-group:nth-of-type(3) .side-group-title i{color:var(--blue)}
.side-group:nth-of-type(4) .side-group-title i{color:var(--amber)}
.side-group:nth-of-type(5) .side-group-title i{color:var(--teal)}
.side-group:nth-of-type(6) .side-group-title i{color:var(--green)}

/* ---------- การ์ดทั่วไป: แถบสีบางๆ ด้านบนเมื่อเป็นการ์ดกราฟ ---------- */
.chart-card{position:relative}
.chart-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--purple),var(--blue));
  opacity:.75; border-radius:var(--radius) var(--radius) 0 0;
}

/* ---------- ตารางหัวสีไล่เฉด ---------- */
.table thead th{background:linear-gradient(100deg,#3a2f63 0%, #2f2a52 60%, #37305e 100%)}

/* ---------- แถบ hero ของหน้าหลังบ้าน (page-head) ---------- */
.page-title::before{background:linear-gradient(180deg,var(--brand),var(--purple))}

/* ---------- badge บทบาทบน navbar มีสี ---------- */
.badge-role{background:var(--grad-brand); color:#fff}

/* ---------- ปุ่มไอคอนวงกลม: hover ไล่สี ---------- */
.icon-btn:hover{background:var(--brand-50); color:var(--brand-600); border-color:var(--brand-100)}
.icon-btn.text-danger:hover{background:#fdecec; color:#b91c1c; border-color:#f8d4d4}

@media (max-width:575.98px){
  .ann-cover{height:130px}
  .hero-quick .hq{font-size:.82rem; padding:.45rem .8rem}
}

/* ---------- แถบสวมบทบาท (view as) ---------- */
.impersonate-bar{
  background:linear-gradient(100deg,#2f2a52 0%,#3d2f6d 55%,#4a2a63 100%);
  color:#fff; padding:.55rem 1rem; font-size:.9rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  box-shadow:inset 0 -2px 0 rgba(229,57,127,.55);
}
.impersonate-bar .btn-light{border-radius:9px; font-weight:500}

/* แถวผู้แข่งขันที่กรอกชื่อแล้ว — เน้นให้เห็นว่าต้องกรอกให้ครบ */
.stu-row.row-active .form-control:placeholder-shown,
.stu-row.row-active .form-select:invalid{border-color:#f6c6d5; background:#fffafc}


/* =====================================================================
   หน้าแรกรุ่นใหม่ (compact · ใช้พื้นที่คุ้ม · รองรับทุกขนาดจอ)
   ===================================================================== */

/* ---- แบนเนอร์: แสดงภาพเต็ม ไม่ตัดขอบ ไม่บิดสัดส่วน ---- */
.banner-carousel{border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); background:#f4f1fb}
.banner-carousel .carousel-item img{width:100%; height:auto; aspect-ratio:auto; max-height:min(72vh,620px); object-fit:contain; display:block; margin:0 auto}
.banner-carousel .carousel-item a{display:block}
.banner-carousel .carousel-indicators{margin-bottom:.6rem}
.banner-carousel .carousel-indicators [data-bs-target]{width:9px; height:9px; border-radius:50%; border:0; background:#fff; opacity:.6; box-shadow:0 1px 4px rgba(0,0,0,.35)}
.banner-carousel .carousel-indicators .active{opacity:1; width:22px; border-radius:6px}
.banner-carousel .carousel-control-prev,.banner-carousel .carousel-control-next{width:7%; min-width:44px}
.banner-carousel .carousel-control-prev-icon,.banner-carousel .carousel-control-next-icon{background-color:rgba(43,37,64,.45); border-radius:50%; background-size:55%; width:2.4rem; height:2.4rem}
@media (max-width:575.98px){
  .banner-carousel{border-radius:12px; margin-left:-4px; margin-right:-4px}
  .banner-carousel .carousel-item img{max-height:none}
  .banner-carousel .carousel-control-prev-icon,.banner-carousel .carousel-control-next-icon{width:2rem; height:2rem}
}

/* ---- ส่วนหัว (hero) แบบกะทัดรัด ---- */
.home-hero{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:1.25rem 2rem; align-items:center;
  padding:1.6rem 1.8rem; border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(135deg,#fff 0%,#fbf7ff 55%,#f3f0ff 100%); box-shadow:var(--shadow);
}
.hh-eyebrow{display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:500; color:var(--brand); background:var(--brand-50); border:1px solid var(--brand-100); padding:.18rem .65rem; border-radius:999px}
.home-hero h1{font-size:clamp(1.35rem,2.6vw,2rem); font-weight:700; line-height:1.3; margin:.55rem 0 .35rem}
.hh-lead{color:var(--muted); margin:0 0 1rem; font-size:.98rem; max-width:560px}
.hh-cta{display:flex; flex-wrap:wrap; gap:.6rem}
.hh-tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem}
.hh-tile{display:flex; align-items:center; gap:.7rem; padding:.7rem .85rem; border-radius:14px; background:#fff; border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:transform .15s, box-shadow .15s, border-color .15s; min-width:0}
.hh-tile:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(43,37,64,.10); color:var(--ink)}
.hh-ic{flex:0 0 auto; width:2.6rem; height:2.6rem; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:1.15rem}
.hh-tile.pink .hh-ic{background:var(--grad-pink)} .hh-tile.purple .hh-ic{background:var(--grad-purple)}
.hh-tile.blue .hh-ic{background:var(--grad-blue)} .hh-tile.amber .hh-ic{background:var(--grad-amber)}
.hh-tx{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.hh-tx b{font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hh-tx small{color:var(--muted); font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:991.98px){ .home-hero{grid-template-columns:1fr; padding:1.25rem} }
@media (max-width:575.98px){
  .hh-tiles{gap:.55rem}
  .hh-tile{flex-direction:column; text-align:center; gap:.35rem; padding:.7rem .4rem}
  .hh-tx b,.hh-tx small{white-space:normal; overflow:visible; text-overflow:clip}
  .hh-ic{width:2.4rem; height:2.4rem; font-size:1.05rem}
  .hh-cta .btn{flex:1 1 100%}
}

/* ---- แถบสถิติ ---- */
.stat-strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.ss-cell{display:flex; align-items:center; gap:.8rem; padding:.9rem 1.2rem; min-width:0}
.ss-cell + .ss-cell{border-left:1px solid var(--line)}
.ss-cell > i{flex:0 0 auto; width:2.7rem; height:2.7rem; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:1.2rem}
.ss-cell.pink > i{background:var(--grad-pink)} .ss-cell.purple > i{background:var(--grad-purple)} .ss-cell.blue > i{background:var(--grad-blue)}
.ss-cell b{display:block; font-size:1.5rem; line-height:1.1; font-weight:700}
.ss-cell span{display:block; font-size:.8rem; color:var(--muted)}
@media (max-width:575.98px){
  .ss-cell{flex-direction:column; text-align:center; gap:.3rem; padding:.7rem .3rem}
  .ss-cell > i{width:2.2rem; height:2.2rem; font-size:1rem}
  .ss-cell b{font-size:1.2rem} .ss-cell span{font-size:.7rem}
}

/* ---- กำหนดการ: การ์ดเรียงแนวนอนเต็มพื้นที่ (มือถือเลื่อนซ้าย-ขวา) ---- */
.sched-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.9rem}
.sg-card{display:flex; gap:.85rem; padding:.95rem 1rem; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); min-width:0; position:relative}
.sg-card.is-current{border-color:var(--brand); box-shadow:0 10px 26px rgba(229,57,127,.18)}
.sg-card.is-current::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:16px 0 0 16px; background:var(--grad-pink)}
.sg-card.is-past{opacity:.7}
.sg-date{flex:0 0 auto; width:3.3rem; height:3.6rem; border-radius:12px; background:var(--purple-50,#f1eeff); color:var(--purple); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05}
.sg-date b{font-size:1.4rem; font-weight:700} .sg-date span{font-size:.72rem; font-weight:500}
.sg-card.is-current .sg-date{background:var(--grad-pink); color:#fff}
.sg-body{min-width:0}
.sg-when{font-size:.75rem; color:var(--brand); font-weight:500}
.sg-title{margin:.15rem 0 .2rem; font-weight:600; font-size:.98rem; line-height:1.35}
.sg-title i{color:var(--purple); margin-right:.2rem}
.sg-detail{margin:0 0 .3rem; font-size:.84rem; color:var(--muted); line-height:1.45}
.sg-done{font-size:.76rem; color:#16a34a}
@media (max-width:767.98px){
  .sched-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:.75rem; padding:.2rem .1rem .8rem; margin:0 -.25rem; -webkit-overflow-scrolling:touch}
  .sg-card{flex:0 0 82%; scroll-snap-align:start}
}

/* ---- แถบเชิญชวนท้ายหน้า ---- */
.home-cta{display:flex; align-items:center; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; padding:1.4rem 1.7rem; border-radius:20px; color:#fff; background:linear-gradient(120deg,#e5397f 0%,#8b5cf6 60%,#3b82f6 100%); box-shadow:0 14px 34px rgba(109,91,245,.25)}
.home-cta h4{font-weight:700} .home-cta p{opacity:.9}
@media (max-width:575.98px){ .home-cta{padding:1.15rem} .home-cta .btn{flex:1 1 100%} }


/* =====================================================================
   หน้าสาธารณะ: ตารางแข่งขัน / รายการแข่งขัน (ค้นหา + การ์ด รองรับมือถือ)
   ===================================================================== */
.pub-filter{display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem; padding:.8rem; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow)}
.pf-search{position:relative; flex:1 1 240px; min-width:0}
.pf-search i{position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--muted)}
.pf-search .form-control{padding-left:2.4rem; border-radius:999px}
.pub-filter .form-select{flex:0 1 260px; border-radius:999px}
@media (max-width:575.98px){ .pub-filter .form-select{flex:1 1 100%} }

.day-jump{display:flex; gap:.5rem; overflow-x:auto; padding:.1rem .1rem .6rem; margin-bottom:.4rem; scrollbar-width:thin}
.day-jump a{flex:0 0 auto; padding:.3rem .85rem; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:.9rem; white-space:nowrap}
.day-jump a:hover{border-color:var(--brand); color:var(--brand)}
.day-jump a b{color:var(--brand)}

.day-block{margin-bottom:1.6rem; scroll-margin-top:80px}
.day-head{display:flex; align-items:center; gap:.85rem; margin-bottom:.7rem}
.dh-date{flex:0 0 auto; width:3.3rem; height:3.5rem; border-radius:14px; background:var(--grad-pink); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; box-shadow:0 6px 16px rgba(229,57,127,.25)}
.dh-date b{font-size:1.4rem; font-weight:700} .dh-date span{font-size:.72rem}
.dh-date.alt{background:var(--grad-purple); font-size:1.4rem; box-shadow:0 6px 16px rgba(109,91,245,.25)}

.pub-rows{display:flex; flex-direction:column; gap:.6rem}
.pub-row{display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,.8fr); gap:.4rem 1rem; align-items:center; padding:.8rem 1rem; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
.pub-row:hover{border-color:var(--brand-100)}
.pr-time{font-weight:600; color:var(--purple); white-space:nowrap}
.pr-main h6{margin:0 0 .15rem; font-weight:600; font-size:1rem; line-height:1.4}
.pr-level{display:inline-block; font-size:.72rem; font-weight:500; padding:.1rem .5rem; border-radius:999px; background:var(--purple-50); color:var(--purple); vertical-align:middle}
.pr-meta{font-size:.82rem; color:var(--muted)}
.pr-where{display:flex; gap:.45rem; align-items:flex-start; font-size:.88rem; color:var(--ink); min-width:0}
.pr-where i{color:var(--brand); margin-top:.15rem}
.pr-where small{display:block; color:var(--muted)}
@media (max-width:767.98px){
  .pub-row{grid-template-columns:1fr; gap:.3rem; padding:.8rem .9rem}
  .pr-time{font-size:.85rem}
}

.comp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.8rem}
.comp-card{display:flex !important; flex-direction:column; gap:.55rem; align-items:stretch; grid-template-columns:none; padding:.95rem 1rem}
.comp-card h6{margin:0; font-weight:600; font-size:1rem; line-height:1.4}
.cc-tags{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.cc-pill{font-size:.76rem; padding:.1rem .55rem; border-radius:999px; background:var(--brand-50); color:var(--brand)}
.cc-foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:.5rem; border-top:1px dashed var(--line); font-size:.82rem; color:var(--muted)}
.cc-foot b{color:var(--ink); font-size:.95rem}


/* =====================================================================
   แถบเมนูบน: เมนูที่เปิดอยู่เป็นแคปซูลสีเข้ม ชัดเจน (active)
   ===================================================================== */
.app-navbar .navbar-nav .nav-link{display:flex; align-items:center; gap:.4rem; transition:background .15s,color .15s,box-shadow .15s}
.app-navbar .navbar-nav .nav-link.active,
.app-navbar .navbar-nav .nav-link.show{
  background:linear-gradient(135deg,var(--brand),#c9246b); color:#fff !important; font-weight:600;
  box-shadow:0 6px 16px rgba(229,57,127,.28);
}
.app-navbar .navbar-nav .nav-link.active:hover{color:#fff; background:linear-gradient(135deg,#ee4a8e,#b81f61)}
.app-navbar .navbar-nav .nav-link.active .bi{color:#fff}
.app-navbar .dropdown-item.active,.app-navbar .dropdown-item:active{background:var(--brand-50); color:var(--brand); font-weight:600}
.app-navbar .dropdown-item.active .bi{color:var(--brand) !important}
.side-link.active{font-weight:600}
@media (max-width:991.98px){ .app-navbar .navbar-nav .nav-link{padding:.6rem .9rem !important} }

/* ---- แถบตัวกรองตาราง (ใช้ร่วมทุกหน้า) ---- */
.tf-bar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding:.7rem .9rem; border-bottom:1px solid var(--line); background:#faf9fe}
.tf-search{position:relative; flex:1 1 220px; min-width:0}
.tf-search i{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.85rem}
.tf-search .form-control{padding-left:2.2rem; border-radius:999px; font-size:.9rem}
.tf-bar .form-select{flex:0 1 210px; border-radius:999px; font-size:.88rem}
.tf-count{margin-left:auto; font-size:.8rem; color:var(--muted); white-space:nowrap}
@media (max-width:575.98px){ .tf-bar .form-select{flex:1 1 100%} .tf-count{margin-left:0; flex:1 1 100%} }


/* =====================================================================
   ประกาศ: การ์ดกดอ่านต่อ + popup แสดงรายละเอียด/ไฟล์แนบ
   ===================================================================== */
.ann-card[data-ann]{cursor:pointer; display:flex; flex-direction:column; height:100%}
.ann-card[data-ann]:focus-visible{outline:3px solid var(--brand-100); outline-offset:2px}
.ann-card .ann-text{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word}
.ann-card .ann-title{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ann-more{background:var(--brand); color:#fff; border-color:var(--brand)}
.ann-card:hover .ann-more{background:#c9246b}
.ann-btn.att{cursor:inherit}
.ann-modal .modal-title{font-weight:700; line-height:1.4; color:#fff}
.ann-modal .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.annm-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:.8rem}
.annm-cover{width:100%; max-height:380px; object-fit:contain; background:#f4f1fb; border-radius:12px; margin-bottom:1rem}
.annm-text{font-size:1rem; line-height:1.85; word-break:break-word}
.annm-text a{word-break:break-all}
.annm-att{margin-top:1.2rem; border:1px solid var(--line); border-radius:14px; padding:.8rem; background:#faf9fe}
.annm-att-head{display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:center; justify-content:space-between; margin-bottom:.7rem; font-weight:500}
.annm-att-head > span:first-child{min-width:0; overflow-wrap:anywhere}
.annm-att-actions{display:flex; flex-wrap:wrap; gap:.4rem}
.annm-frame{width:100%; height:68vh; min-height:360px; border:1px solid var(--line); border-radius:10px; background:#fff}
.annm-img{max-width:100%; height:auto; display:block; margin:0 auto; border-radius:10px}
@media (max-width:575.98px){
  .ann-modal .modal-body{padding:.9rem}
  .annm-frame{height:60vh}
  .annm-att-actions .btn{flex:1 1 auto}
}


/* =====================================================================
   ฟอร์มเพิ่มกรรมการ (กว้าง ใช้พื้นที่คุ้ม ช่องกรอกขนาดพอดี)
   ===================================================================== */
.jd-step{border:1px solid var(--line); border-radius:16px; padding:1rem 1.1rem; margin-bottom:1rem; background:#fff}
.jd-step-head{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .7rem; margin-bottom:.8rem}
.jd-num{flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--grad-pink); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem}

.jd-items{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.5rem; max-height:230px; overflow:auto; padding:.15rem}
.jd-item{display:flex; align-items:flex-start; gap:.55rem; padding:.55rem .7rem; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:#faf9fe; margin:0; transition:border-color .12s, background .12s}
.jd-item:hover{border-color:var(--brand-100); background:#fff}
.jd-item input{margin-top:.25rem; flex:0 0 auto; width:1.05rem; height:1.05rem; accent-color:var(--brand)}
.jd-item span{min-width:0; line-height:1.35}
.jd-item b{display:block; font-weight:600; font-size:.9rem}
.jd-item small{color:var(--muted); font-size:.76rem}
.jd-item:has(input:checked){border-color:var(--brand); background:var(--brand-50)}

.jd-grid{display:grid; gap:.6rem .75rem; grid-template-columns:minmax(170px,2fr) minmax(150px,1.3fr) minmax(170px,1.6fr) minmax(115px,.9fr) minmax(170px,1.5fr) minmax(140px,1.1fr) 38px; align-items:center}
.jd-head{padding:.55rem .8rem; background:#2f2a52; color:#fff; border-radius:12px; font-weight:600; font-size:.85rem}
.jd-row{padding:.6rem .1rem; border-bottom:1px solid var(--line)}
.jd-f label{display:none; font-size:.78rem; color:var(--muted); margin-bottom:.15rem}
.jd-f .form-control{min-height:42px; font-size:.95rem; border-radius:12px; width:100%}
.jd-f-del{text-align:center}
@media (max-width:991.98px){
  .jd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jd-row{position:relative; padding:.9rem .8rem .5rem; margin-bottom:.7rem; border:1px solid var(--line); border-radius:14px; background:#faf9fe}
  .jd-f label{display:block}
  .jd-f-name{grid-column:1 / -1}
  .jd-f-del{position:absolute; top:.4rem; right:.5rem}
}
@media (max-width:575.98px){ .jd-grid{grid-template-columns:1fr} .jd-items{grid-template-columns:1fr} }


/* =====================================================================
   เกณฑ์คะแนน: ผลรวมสด + แก้ไขในแถว
   ===================================================================== */
.crit-summary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin-bottom:.7rem}
.cs-box{background:#faf9fe; border:1px solid var(--line); border-radius:14px; padding:.55rem .85rem}
.cs-box span{display:block; font-size:.76rem; color:var(--muted)}
.cs-box b{font-size:1.5rem; line-height:1.2; font-weight:700}
.cs-main{background:#effaf3; border-color:#bfe8cd}
.cs-main b{color:#15803d}
.cs-main.warn{background:#fff7e8; border-color:#ffe0a8}
.cs-main.warn b{color:#b45309}
.cs-note{grid-column:1 / -1; font-size:.84rem; color:var(--muted)}
.cs-note.ok{color:#15803d} .cs-note.warn{color:#b45309}
.crit-table .form-control{border-radius:10px; min-height:40px}
.crit-table .form-control:focus{border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(229,57,127,.12)}
.crit-state{display:inline-block; width:1.4rem; text-align:center; margin-right:.2rem; vertical-align:middle}
.crit-state.ok{color:#16a34a} .crit-state.err{color:#dc2626} .crit-state.saving{color:var(--muted)}
.crit-after{padding:.45rem .7rem; border-radius:10px; background:var(--purple-50); color:var(--purple-600,#5b46d9)}
@media (max-width:575.98px){ .crit-summary{grid-template-columns:1fr 1fr} .cs-main{grid-column:1 / -1} }


/* ---- ชิปรายการที่กรรมการตัดสิน ---- */
.jd-chips{display:flex; flex-wrap:wrap; gap:.35rem}
.jd-chip{display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .35rem .2rem .7rem; border-radius:999px; background:var(--purple-50); color:var(--purple-600,#5b46d9); border:1px solid #ded6ff; font-size:.84rem; line-height:1.3}
.jd-chip small{opacity:.75}
.jd-chip.warn{background:#fff7e8; border-color:#ffd58a; color:#b45309}
.jd-chip-x{border:0; background:transparent; color:inherit; width:1.4rem; height:1.4rem; border-radius:50%; display:grid; place-items:center; padding:0; line-height:1}
.jd-chip-x:hover{background:rgba(0,0,0,.08)}


/* ---- แถบเมนูซ้าย: เลื่อนในตัวเอง + ช่องค้นหาเมนูติดอยู่ด้านบน ---- */
.app-sidebar::-webkit-scrollbar{width:6px}
.app-sidebar::-webkit-scrollbar-thumb{background:#d9d4ee; border-radius:6px}
.app-sidebar .side-search{position:sticky; top:-.6rem; z-index:3; background:var(--surface); margin:-.6rem -.6rem .4rem; padding:.6rem .6rem .4rem; border-radius:var(--radius) var(--radius) 0 0}
@media (max-width:991.98px){ .app-sidebar .side-search{position:static; margin:0 0 .4rem; padding:0} }


/* =====================================================================
   ปฏิทิน/เวลา (flatpickr) — โทนเดียวกับระบบ
   ===================================================================== */
.flatpickr-calendar{font-family:inherit; border-radius:16px; box-shadow:0 18px 44px rgba(43,37,64,.18); border:1px solid var(--line)}
.flatpickr-calendar{z-index:2000}
.flatpickr-calendar.arrowTop::before,.flatpickr-calendar.arrowTop::after,.flatpickr-calendar.arrowBottom::before,.flatpickr-calendar.arrowBottom::after{display:none}
.flatpickr-months .flatpickr-month,.flatpickr-current-month{color:var(--ink)}
.flatpickr-current-month{display:flex; align-items:center; justify-content:center; gap:.4rem; padding-top:6px; font-size:100%}
.flatpickr-current-month .flatpickr-monthDropdown-months{font-weight:600; font-family:inherit; border-radius:8px; padding:.15rem .4rem}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--brand); border-color:var(--brand); color:#fff}
.flatpickr-day.today{border-color:var(--purple)}
.flatpickr-day.today:hover{background:var(--purple); border-color:var(--purple); color:#fff}
.flatpickr-day:hover{background:var(--brand-50); border-color:var(--brand-100)}
span.flatpickr-weekday{color:var(--muted); font-weight:600}
.flatpickr-time input{font-family:inherit; font-weight:600}
.flatpickr-time .flatpickr-time-separator{font-weight:700}
.fp-year-box{display:inline-flex; align-items:center; gap:.15rem; font-weight:600}
.fp-year-box .fp-yr{border:0; background:transparent; width:1.6rem; height:1.6rem; border-radius:50%; font-size:1.1rem; line-height:1; color:var(--ink); cursor:pointer}
.fp-year-box .fp-yr:hover{background:var(--brand-50); color:var(--brand)}
.fp-be-year{min-width:3.2rem; text-align:center}
.fp-foot{display:flex; gap:.4rem; justify-content:flex-end; padding:.45rem .6rem .6rem; border-top:1px solid var(--line)}
.fp-foot button{border:1px solid var(--line); background:#fff; border-radius:999px; padding:.2rem .8rem; font-size:.82rem; cursor:pointer; color:var(--ink)}
.fp-foot button:hover{border-color:var(--brand); color:var(--brand)}
.fp-foot .fp-ok{background:var(--brand); border-color:var(--brand); color:#fff}
.fp-foot .fp-ok:hover{color:#fff; filter:brightness(1.08)}
input.fp-alt{cursor:pointer; background-image:none}
input.fp-alt[readonly]{background-color:#fff}


/* =====================================================================
   หน้าแรก — สไตล์สนุก ตัวหนา มุมโค้งใหญ่ ไล่สีส้ม → ชมพู (body.is-home)
   ===================================================================== */
body.is-home{
  --hm-orange:#f97316; --hm-coral:#f43f5e; --hm-pink:#db2777; --hm-dark:#4a1233; --hm-cream:#fff4ec;
  --hm-grad:linear-gradient(120deg,#f97316 0%,#f43f5e 52%,#db2777 100%);
  background:var(--hm-cream);
}
.hm-display,.hm-mega{font-family:"Mitr","Noto Sans Thai Looped",sans-serif; font-weight:600; letter-spacing:-.01em; line-height:1.18}
/* แถบเมนูบนหน้าแรก: โทนครีม + ชิปไล่สีส้ม-ชมพู ให้เข้ากับดีไซน์ */
.is-home .app-navbar{background:rgba(255,244,236,.92); backdrop-filter:blur(8px); border-bottom:1px solid rgba(249,115,22,.15); box-shadow:none}
.is-home .app-navbar .navbar-brand{font-family:"Mitr","Noto Sans Thai Looped",sans-serif; color:var(--hm-dark)}
.is-home .app-navbar .nav-link{border-radius:999px; color:var(--hm-dark); font-weight:500}
.is-home .app-navbar .nav-link:hover{background:rgba(249,115,22,.12); color:var(--hm-pink)}
.is-home .app-navbar .navbar-nav .nav-link.active,.is-home .app-navbar .navbar-nav .nav-link.active:hover{background:var(--hm-grad); color:#fff; box-shadow:0 6px 16px rgba(244,63,94,.28)}

/* ---- แถบข่าววิ่ง ---- */
.hm-ticker{overflow:hidden; background:var(--hm-dark); color:#fff; border-radius:999px; margin:0 0 1rem; padding:.55rem 0; font-size:.92rem; font-weight:500}
.hm-ticker-track{display:inline-flex; white-space:nowrap; gap:1.4rem; padding-left:1.4rem; animation:hm-marq 55s linear infinite; will-change:transform}
.hm-ticker:hover .hm-ticker-track{animation-play-state:paused}
.hm-ticker span i{color:#ffb38a; margin-right:.35rem}
.hm-ticker em{opacity:.5; font-style:normal}
@keyframes hm-marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .hm-ticker{overflow-x:auto} .hm-ticker-track{animation:none} }

/* ---- แบนเนอร์ ---- */
.hm-banner{border-radius:32px !important; border:0 !important; box-shadow:0 20px 50px rgba(244,63,94,.18) !important; margin-bottom:1.2rem !important}
@media (max-width:575.98px){ .hm-banner{border-radius:20px !important} }

/* ---- Hero ---- */
.hm-hero{
  position:relative; overflow:hidden; border-radius:32px; padding:2.6rem 2.6rem; margin-bottom:1.4rem;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:2rem 2.4rem; align-items:center;
  background:var(--hm-grad); color:#fff; box-shadow:0 24px 60px rgba(244,63,94,.28);
}
.hm-blob{position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.14)}
.hm-blob.b1{width:320px;height:320px;right:-90px;top:-110px}
.hm-blob.b2{width:180px;height:180px;left:38%;bottom:-90px;background:rgba(74,18,51,.12)}
.hm-blob.b3{width:90px;height:90px;left:-30px;top:30%;background:rgba(255,255,255,.1)}
.hm-hero-main{position:relative; z-index:1}
.hm-pill{display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); padding:.28rem .9rem; border-radius:999px; font-size:.85rem; font-weight:500}
.hm-hero .hm-display{font-size:clamp(1.8rem,4.2vw,3.2rem); margin:.9rem 0 .7rem; color:#fff; text-shadow:0 2px 0 rgba(74,18,51,.18)}
.hm-lead{font-size:1.05rem; max-width:34rem; margin:0 0 1.4rem; opacity:.96}
.hm-cta{display:flex; flex-wrap:wrap; gap:.7rem}
.hm-btn-dark,.hm-btn-light{display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.6rem; border-radius:999px; font-weight:600; text-decoration:none; transition:transform .15s, box-shadow .15s; border:2px solid transparent}
.hm-btn-dark{background:var(--hm-dark,#4a1233); color:#fff}
.hm-btn-dark:hover{color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(74,18,51,.35)}
.hm-btn-light{background:#fff; color:#4a1233}
.hm-btn-light:hover{color:#db2777; transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.15)}
.hm-hero-art{position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:.9rem; align-items:stretch}
.hm-tile{display:flex; flex-direction:column; gap:.15rem; padding:1.05rem 1.1rem; border-radius:24px; background:#fff; color:#4a1233; text-decoration:none; box-shadow:0 12px 28px rgba(74,18,51,.18); transition:transform .18s}
.hm-tile:hover{transform:translateY(-3px); color:#4a1233}
/* การ์ดทางลัด 4 ใบ จัดเป็นตาราง 2×2 ขนาดเท่ากันทุกใบ ไม่เหลื่อมกัน */
.hm-tile-ic{width:2.8rem;height:2.8rem;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:1.3rem;margin-bottom:.45rem;background:var(--hm-grad)}
.hm-tile.t2 .hm-tile-ic{background:linear-gradient(135deg,#fb923c,#f97316)} .hm-tile.t3 .hm-tile-ic{background:linear-gradient(135deg,#f43f5e,#e11d48)} .hm-tile.t4 .hm-tile-ic{background:linear-gradient(135deg,#ec4899,#be185d)}
.hm-tile b{font-family:"Mitr","Noto Sans Thai Looped",sans-serif; font-weight:500; font-size:1.02rem}
.hm-tile small{color:#8a5a6e}
@media (max-width:991.98px){ .hm-hero{grid-template-columns:1fr; padding:1.7rem 1.4rem} }
@media (max-width:575.98px){ .hm-hero{border-radius:24px} .hm-cta .hm-btn-dark,.hm-cta .hm-btn-light{flex:1 1 100%; justify-content:center} .hm-hero-art{gap:.6rem} .hm-tile{padding:.8rem} }

/* ---- แถบตัวเลขสถิติ (วงกลม) ---- */
.hm-badges{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding:1.6rem .5rem 1.8rem; margin-bottom:1rem}
.hm-badge{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.25rem; color:var(--hm-dark)}
.hm-badge-ic{width:4.6rem;height:4.6rem;border-radius:50%;display:grid;place-items:center;font-size:1.9rem;color:#fff;background:var(--hm-grad);box-shadow:0 12px 26px rgba(244,63,94,.3)}
.hm-badge b{font-family:"Mitr","Noto Sans Thai Looped",sans-serif; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1}
.hm-badge span:last-child{font-size:.92rem; color:#8a5a6e; font-weight:500}
@media (max-width:575.98px){ .hm-badge-ic{width:3.4rem;height:3.4rem;font-size:1.4rem} .hm-badge span:last-child{font-size:.78rem} }

/* ---- แผงกำหนดการ (การ์ดเลื่อนแนวนอน) ---- */
.hm-panel{background:var(--hm-grad); border-radius:32px; padding:1.6rem 1.6rem 1.8rem; margin-bottom:2rem; color:#fff; box-shadow:0 24px 60px rgba(244,63,94,.24)}
.hm-panel-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem}
.hm-panel-head .hm-display{font-size:clamp(1.5rem,3vw,2.2rem); margin:0; color:#fff}
.hm-arrows{display:flex; align-items:center; gap:.5rem}
.hm-all{color:#fff; text-decoration:none; font-weight:600; margin-right:.6rem; font-size:.95rem}
.hm-all:hover{color:#fff; text-decoration:underline}
.hm-arrow{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:transparent;color:#fff;display:grid;place-items:center;transition:background .15s,color .15s}
.hm-arrow:hover{background:#fff; color:#db2777}
.hm-rail{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.3rem .2rem .9rem; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.6) transparent}
.hm-rail::-webkit-scrollbar{height:6px} .hm-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.55); border-radius:6px}
.hm-card{position:relative; flex:0 0 min(300px,78%); scroll-snap-align:start; background:#fff; color:#4a1233; border-radius:24px; padding:1.1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.7rem; box-shadow:0 12px 28px rgba(74,18,51,.2)}
.hm-card.is-past{opacity:.78}
.hm-card.is-now{outline:4px solid #ffd7a8}
.hm-card-tag{align-self:flex-start; font-size:.72rem; font-weight:600; padding:.15rem .7rem; border-radius:999px; background:#ffe9d6; color:#c2410c}
.hm-card.is-now .hm-card-tag{background:var(--hm-grad); color:#fff}
.hm-card.is-past .hm-card-tag{background:#eceff3; color:#64748b}
.hm-card-date{display:flex; align-items:baseline; gap:.5rem}
.hm-card-date b{font-family:"Mitr","Noto Sans Thai Looped",sans-serif; font-size:2.6rem; line-height:1; color:#db2777}
.hm-card-date span{font-weight:600; color:#8a5a6e}
.hm-card-body i{font-size:1.3rem; color:#f97316}
.hm-card-body h3{font-family:"Mitr","Noto Sans Thai Looped",sans-serif; font-weight:500; font-size:1.05rem; margin:.25rem 0 .3rem}
.hm-card-body p{font-size:.88rem; color:#6b4a5a; margin:0 0 .4rem}
.hm-card-body small{color:#9a7686}

/* ---- ส่วนประกาศ ---- */
.hm-section{margin-bottom:2.4rem}
.hm-section-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.hm-section-head .hm-display{font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0; color:var(--hm-dark)}
.hm-empty{background:#fff; border-radius:24px; text-align:center; padding:2rem; color:#8a5a6e}
.is-home .ann-card{border-radius:24px; border:0; box-shadow:0 14px 34px rgba(74,18,51,.1)}

/* ---- ส่วนจุดเด่น 3 ข้อ ---- */
.hm-why{padding:1rem 0 2.2rem}
.hm-mega{font-size:clamp(2rem,6vw,4.2rem); text-align:center; margin:0 0 1.6rem; background:var(--hm-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hm-why-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; margin-bottom:1.8rem}
.hm-why-item{text-align:center; padding:0 .6rem; color:var(--hm-dark)}
.hm-why-ic{width:4.4rem;height:4.4rem;border-radius:26px;display:grid;place-items:center;margin:0 auto .8rem;font-size:1.9rem;color:#fff;background:var(--hm-grad);transform:rotate(-5deg);box-shadow:0 12px 26px rgba(244,63,94,.28)}
.hm-why-item:nth-child(2) .hm-why-ic{transform:rotate(4deg)}
.hm-why-item h3{font-family:"Mitr","Noto Sans Thai Looped",sans-serif; font-weight:500; font-size:1.15rem; margin-bottom:.4rem}
.hm-why-item p{font-size:.92rem; color:#6b4a5a; margin:0}
@media (max-width:767.98px){ .hm-why-grid{grid-template-columns:1fr; gap:1.6rem} }

/* ---- แถบเชิญชวนท้ายหน้า ---- */
.hm-band{display:flex; align-items:center; justify-content:space-between; gap:1.2rem 2rem; flex-wrap:wrap; background:var(--hm-dark); color:#fff; border-radius:32px; padding:1.8rem 2rem; margin-bottom:2rem}
.hm-band .hm-display{font-size:clamp(1.3rem,2.6vw,1.9rem); color:#fff}
.hm-band p{opacity:.85}
.hm-band .hm-btn-dark{background:var(--hm-grad); border:0}
@media (max-width:575.98px){ .hm-band{padding:1.3rem; border-radius:24px} .hm-band .hm-cta{width:100%} .hm-band .hm-btn-dark,.hm-band .hm-btn-light{flex:1 1 100%; justify-content:center} }

/* รายการแข่งขันสาธารณะ: การ์ดที่มีเกณฑ์/คู่มือ กดเปิด popup ได้ */
.comp-card.has-more{cursor:pointer; transition:transform .15s, box-shadow .15s}
.comp-card.has-more:hover,.comp-card.has-more:focus-visible{transform:translateY(-2px); box-shadow:0 10px 24px rgba(244,63,94,.16); outline:none}
.cc-docs{display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0 .2rem}
.cc-doc{display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:600; padding:.15rem .6rem; border-radius:999px; background:var(--brand-50); color:var(--brand)}

/* รายการแข่งขันสาธารณะแบบตาราง */
.comp-table-wrap{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.comp-table thead th{background:var(--brand-50); color:var(--ink); font-size:.82rem; font-weight:700; white-space:nowrap; border-bottom:1px solid var(--line)}
.comp-table td{padding:.7rem .75rem}
.comp-table tr.has-more{cursor:pointer}
.comp-table tr.has-more:hover td,.comp-table tr.has-more:focus-visible td{background:var(--brand-50)}
.comp-table tr.has-more:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.comp-table .pr-level{display:inline-block; padding:.1rem .55rem; border-radius:999px; background:#f3f1fa; font-size:.8rem; font-weight:600; white-space:nowrap}

/* ปฏิทินรายเดือนหน้าแรก */
.hm-cal-nav{display:flex; align-items:center; gap:.5rem}
.hm-cal-title{font-family:"Mitr","Noto Sans Thai Looped",sans-serif; min-width:9.5rem; text-align:center; color:var(--hm-dark)}
.hm-cal-today{padding:.35rem 1rem !important; font-size:.85rem}
.hm-cal-body{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:1.2rem; align-items:start}
.hm-cal-grid-wrap{background:#fff; border-radius:24px; padding:1rem; box-shadow:0 8px 28px rgba(244,63,94,.08)}
.hm-cal-week,.hm-cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.3rem}
.hm-cal-week span{text-align:center; font-weight:700; font-size:.8rem; color:var(--hm-pink); padding:.2rem 0}
.hm-cal-cell{border:0; background:transparent; border-radius:14px; aspect-ratio:1/.82; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; color:var(--hm-dark); font:inherit; cursor:pointer; position:relative}
.hm-cal-cell.blank{cursor:default}
.hm-cal-cell b{font-weight:600}
.hm-cal-cell:not(.blank):hover{background:rgba(249,115,22,.12)}
.hm-cal-cell.has{background:#fff4ec}
.hm-cal-cell.today b{background:var(--hm-grad); color:#fff; border-radius:999px; min-width:1.7rem; height:1.7rem; display:inline-flex; align-items:center; justify-content:center}
.hm-cal-cell.sel{outline:2px solid var(--hm-coral); outline-offset:-2px}
.hm-cal-cell .dots{display:flex; align-items:center; gap:.2rem}
.hm-cal-cell .dots em{font-style:normal; font-size:.68rem; color:var(--hm-pink); font-weight:700}
.dot{display:inline-block; width:.5rem; height:.5rem; border-radius:50%}
.dot.s{background:#f97316}.dot.c{background:#db2777}
.hm-cal-legend{display:flex; gap:1rem; justify-content:flex-end; font-size:.78rem; color:var(--muted); padding:.5rem .3rem 0}
.hm-cal-legend span{display:inline-flex; align-items:center; gap:.3rem}
.hm-cal-side{background:#fff; border-radius:24px; padding:1.1rem 1.2rem; box-shadow:0 8px 28px rgba(244,63,94,.08); max-height:28rem; overflow-y:auto}
.hm-cal-side h3{font-family:"Mitr","Noto Sans Thai Looped",sans-serif; font-size:1.05rem; color:var(--hm-dark); margin:0 0 .7rem}
.hm-cal-item{display:flex; gap:.6rem; padding:.55rem 0; border-top:1px dashed #f3d9cf}
.hm-cal-item:first-child{border-top:0}
.hm-cal-item .dot{margin-top:.45rem; flex:none}
.hm-cal-item b{display:block; font-weight:600; font-size:.92rem}
.hm-cal-item small{display:block; color:var(--muted)}
@media (max-width:767.98px){
  .hm-cal-body{grid-template-columns:1fr}
  .hm-cal-nav{width:100%; justify-content:space-between}
  .hm-cal-title{min-width:0}
}
/* แถวในตารางรายการแข่งขัน: ยกเลิกสไตล์การ์ดของ .pub-row */
.comp-table tr.pub-row{display:table-row; background:transparent; border:0; border-radius:0; box-shadow:none; padding:0}
.comp-table tbody tr.pub-row td{border-bottom:1px solid var(--line)}
.comp-table tbody tr.pub-row:last-child td{border-bottom:0}
.comp-table tbody tr.pub-row:hover{border-color:transparent}
@media (max-width:767.98px){ .comp-table tr.pub-row{display:table-row; padding:0} }
.dot.f{background:#16a34a}

/* ปฏิทินหน้าแรก: แสดงข้อความในช่องวัน */
.hm-cal-cell{aspect-ratio:auto; min-height:6.2rem; align-items:stretch; justify-content:flex-start; padding:.35rem .25rem .3rem; gap:.25rem; text-align:left; overflow:hidden}
.hm-cal-cell.blank{min-height:0; height:0; padding:0}
.hm-cal-cell > b{align-self:flex-start; padding-left:.25rem}
.hm-cal-cell.today > b{align-self:flex-start}
.hm-cal-cell .chips{display:flex; flex-direction:column; gap:2px; min-width:0}
.chip{display:block; font-size:.7rem; line-height:1.25; padding:.08rem .35rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:0; min-height:1.1em}
.chip.st{border-radius:6px 0 0 6px; margin-left:0}.chip.en{border-radius:0 6px 6px 0}.chip.st.en{border-radius:6px}
.chip:not(.st){margin-left:-.25rem; padding-left:.6rem}.chip:not(.en){margin-right:-.25rem}
.chip.s{background:#f97316}.chip.c{background:#db2777}.chip.f{background:#16a34a}
.hm-cal-grid{gap:.3rem .15rem}
@media (max-width:767.98px){
  .hm-cal-cell{min-height:3.6rem}
  .chip{font-size:0; min-height:.45rem; padding:0 !important}
}

/* ตารางรายการแข่งขัน: เลื่อนแนวนอนได้เมื่อแคบ (ไม่ให้ถูกตัดขอบ) และเป็นการ์ดซ้อนบนมือถือ */
.comp-table-wrap{overflow-x:auto; max-width:100%}
.comp-table{min-width:640px}
@media (max-width:767.98px){
  .comp-table-wrap{overflow:visible; background:transparent; border:0; border-radius:0}
  .comp-table{min-width:0}
  .comp-table thead{display:none}
  .comp-table,.comp-table tbody{display:block; width:100%}
  .comp-table tbody tr.pub-row{display:block; background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:.7rem; padding:.3rem .9rem; box-shadow:var(--shadow)}
  .comp-table tbody tr.pub-row td{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; text-align:right !important; padding:.5rem 0; border-bottom:1px dashed var(--line)}
  .comp-table tbody tr.pub-row td:last-child{border-bottom:0}
  .comp-table tbody tr.pub-row td::before{content:attr(data-label); flex:none; color:var(--muted); font-size:.8rem; font-weight:600; text-align:left}
  .comp-table tbody tr.pub-row td.ci-name{display:block; text-align:left !important; font-size:1.02rem; padding-top:.65rem}
  .comp-table tbody tr.pub-row td.ci-name::before{display:none}
}
/* ตารางสาธารณะอื่นๆ ไม่ให้ล้นจอ */
.table-responsive{max-width:100%; -webkit-overflow-scrolling:touch}

/* หน้าสมัครแข่งขัน (ตาราง + popup) */
.rg-filter .form-select{flex:0 1 200px; border-radius:999px}
@media (max-width:575.98px){ .rg-filter .form-select{flex:1 1 100%} }
.comp-table .ci-name small{display:block}
@media (max-width:767.98px){
  .rg-table tbody tr.rg-row{display:block; background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:.7rem; padding:.3rem .9rem; box-shadow:var(--shadow)}
  .rg-table tbody tr.rg-row td{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; text-align:right !important; padding:.5rem 0; border-bottom:1px dashed var(--line)}
  .rg-table tbody tr.rg-row td:last-child{border-bottom:0}
  .rg-table tbody tr.rg-row td::before{content:attr(data-label); flex:none; color:var(--muted); font-size:.8rem; font-weight:600; text-align:left}
  .rg-table tbody tr.rg-row td.ci-name{display:block; text-align:left !important; padding-top:.65rem}
  .rg-table tbody tr.rg-row td.ci-name::before{display:none}
}
.rg-table tbody tr.rg-row td{border-bottom:1px solid var(--line)}
@media (min-width:768px){ .rg-table tbody tr.rg-row{display:table-row} }

/* แถบอนุมัติหลายรายการ */
.bulk-bar{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.6rem .8rem; background:var(--brand-50); border:1px solid var(--brand-100); border-radius:14px}

/* รายการที่เพิ่ม/คัดเลือกกรรมการแล้ว = สีเขียว */
.jd-item.has-judges{background:#ecfdf3 !important; border-color:#86efac !important}
.jd-item.has-judges b{color:#166534}
.jd-item .jd-done{display:block; font-style:normal; font-size:.74rem; font-weight:600; color:#15803d; margin-top:.15rem}

/* ตัวแบ่งหน้าของตาราง */
.tf-pager{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding:.7rem 1rem}
.tf-pg{display:flex; align-items:center; gap:.25rem}
.tf-pg button{min-width:2rem; height:2rem; border:1px solid var(--line); background:#fff; border-radius:8px; font-size:.85rem; color:var(--ink); cursor:pointer}
.tf-pg button:hover:not(:disabled){border-color:var(--brand); color:var(--brand)}
.tf-pg button.on{background:var(--brand); border-color:var(--brand); color:#fff}
.tf-pg button:disabled{opacity:.4; cursor:default}

/* ปุ่มเพิ่มรูปบัตรในป๊อปอัปแก้ไขใบสมัคร */
.ph-row{display:flex; align-items:center; gap:.6rem; margin:-.2rem 0 .3rem}
.ph-thumb{width:36px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--line); background:#f6f4fb}
.ph-empty{display:inline-flex; align-items:center; justify-content:center; color:var(--muted)}

/* ตัวเลือกรายการในหน้าบันทึกคะแนน/ประมวลผล */
option.opt-sub{color:#15803d; font-weight:600}
option.opt-proc{background:#fef3c7; color:#854d0e}
option.opt-ann{background:#dcfce7; color:#166534}
option.opt-wait{background:#dbeafe; color:#1e40af}

/* ===== มือถือ: หน้างานของกรรมการ + หน้ากรอกคะแนน เป็นการ์ดต่อรายการ/ทีม ===== */
@media (max-width:767.98px){
  .jd-assign{border:0}
  .jd-assign thead{display:none}
  .jd-assign,.jd-assign tbody{display:block; width:100%}
  .jd-assign tbody tr{display:block; margin:.7rem; padding:.2rem .9rem; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow)}
  .jd-assign tbody td{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:.5rem 0; border:0; border-bottom:1px dashed var(--line); text-align:right}
  .jd-assign tbody td:last-child{border-bottom:0; padding-bottom:.7rem}
  .jd-assign tbody td::before{content:attr(data-label); flex:none; color:var(--muted); font-size:.8rem; font-weight:600; text-align:left}
  .jd-assign tbody td.ja-name{display:block; text-align:left; padding-top:.7rem}
  .jd-assign tbody td.ja-name::before{display:none}
  .jd-assign tbody td.ja-prog{flex-direction:column; align-items:stretch; text-align:left}
  .jd-assign tbody td.ja-prog::before{margin-bottom:.2rem}
  .jd-assign tbody td.ja-act .btn{width:100%}
  .jd-assign tbody td.ja-act{display:block}
  .jd-assign tbody td.ja-act::before{display:none}

  .sc-table{border:0}
  .sc-table thead{display:none}
  .sc-table,.sc-table tbody{display:block; width:100%}
  .sc-table tbody tr.sc-row{display:block; margin:.7rem; padding:.3rem .9rem .5rem; border:1px solid var(--line); border-radius:14px; background:#fff}
  .sc-table tbody td{display:block; border:0; padding:.25rem 0}
  .sc-table tbody td:first-child{padding:.5rem 0 .6rem; border-bottom:1px dashed var(--line); margin-bottom:.3rem}
  .sc-table tbody td.sc-cell{display:flex; align-items:center; justify-content:space-between; gap:.8rem}
  .sc-table tbody td.sc-cell::before{content:attr(data-label); font-size:.85rem; font-weight:600; color:var(--ink); flex:1}
  .sc-table tbody td.sc-cell .sc-in{width:7.5rem; flex:none; font-size:1.05rem}
  .sc-table tbody td.sc-total{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); margin-top:.3rem; padding-top:.5rem; text-align:right}
  .sc-table tbody td.sc-total::before{content:attr(data-label); font-size:.85rem; font-weight:600}
}

/* ===== ตัวแบ่งหน้า + เลือกจำนวนแถวต่อหน้า (ทุกตาราง) ===== */
.tf-pager{gap:.6rem 1rem}
.tf-size{display:inline-flex; align-items:center; gap:.4rem; margin:0}
.tf-size .tf-ps{width:auto; min-width:4.6rem; border-radius:999px; padding-right:1.8rem}
@media (max-width:575.98px){ .tf-pager{justify-content:center} .tf-pager > span{width:100%; text-align:center} }

/* ===== ตารางทั่วไปบนมือถือ → การ์ดอัตโนมัติ (ติดป้ายโดย ACMS.initResponsiveTables) ===== */
@media (max-width:767.98px){
  .table-responsive > .table.rt-cards{min-width:0 !important; border:0}
  .rt-cards thead{display:none}
  .rt-cards, .rt-cards tbody{display:block; width:100%}
  .rt-cards tbody tr{display:block; margin:.7rem; padding:.2rem .9rem; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow)}
  .rt-cards tbody tr.rt-single{padding:.8rem .9rem}
  .rt-cards tbody td{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:.5rem 0 !important; border:0 !important; border-bottom:1px dashed var(--line) !important; text-align:right !important; white-space:normal !important; overflow-wrap:anywhere}
  .rt-cards tbody td:last-child{border-bottom:0 !important}
  .rt-cards tbody td[data-label]::before{content:attr(data-label); flex:none; max-width:42%; color:var(--muted); font-size:.8rem; font-weight:600; text-align:left}
  .rt-cards tbody td:first-child{display:block; text-align:left !important; font-weight:600; padding-top:.7rem !important}
  .rt-cards tbody td:first-child::before{display:none}
  .rt-cards tbody td.rt-nolabel{justify-content:flex-end}
  .rt-cards tbody tr.rt-single td{display:block; text-align:center !important; border:0 !important}
  /* ตารางที่ทำการ์ดเองอยู่แล้ว ไม่ต้องบังคับความกว้างขั้นต่ำ */
  .table-responsive > .table.sc-table, .table-responsive > .table.jd-assign, .table-responsive > .table.rg-table, .table-responsive > .table.comp-table{min-width:0}
}
/* แท็บเล็ต: ตารางเลื่อนแนวนอนได้ ไม่ล้นหน้า */
@media (min-width:768px) and (max-width:991.98px){
  .table-responsive{overflow-x:auto}
}

/* ===== ท้ายหน้า (footer) แบบยืดหยุ่นตามขนาดจอ ===== */
.app-footer{padding:1.4rem 0 1.6rem}
.ft-wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.9rem 2rem; align-items:center}
.ft-name{font-weight:600; color:var(--ink); font-size:.92rem; line-height:1.5}
.ft-sub{color:var(--muted); font-size:.82rem; line-height:1.6; margin-top:.15rem; max-width:62ch; text-wrap:pretty}
.ft-links{display:flex; flex-wrap:wrap; gap:.45rem; justify-content:flex-end}
.ft-links a{display:inline-flex; align-items:center; gap:.4rem; padding:.38rem .85rem; border:1px solid var(--line); border-radius:999px; background:#fff;
            font-size:.82rem; color:var(--ink); white-space:nowrap; transition:border-color .15s,color .15s,background .15s}
.ft-links a:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-50)}
.ft-links a i{color:var(--brand)}
@media (max-width:991.98px){
  .ft-wrap{grid-template-columns:1fr; text-align:center; gap:.9rem}
  .ft-sub{margin-left:auto; margin-right:auto}
  .ft-links{justify-content:center}
}
@media (max-width:575.98px){
  .app-footer{padding:1.2rem 0 1.4rem}
  .ft-links{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
  .ft-links a{justify-content:center; white-space:normal; text-align:center; padding:.5rem .6rem; overflow-wrap:anywhere}
  .ft-links a:nth-child(odd):last-child{grid-column:1 / -1}
}
.ft-credit{margin-top:.35rem; font-size:.78rem; color:var(--brand-600,#c9246b); font-weight:500; line-height:1.5}
.ft-credit i{margin-right:.25rem}

/* ตัวเลขแจ้งบนเมนู/การ์ดสาธารณะ */
.nav-count{display:inline-block;min-width:1.35rem;padding:0 .4rem;margin-left:.35rem;border-radius:99px;background:linear-gradient(135deg,#ef4444,#be123c);color:#fff;font-size:.68rem;font-weight:700;line-height:1.35rem;text-align:center;vertical-align:middle;box-shadow:0 2px 6px rgba(190,18,60,.35);animation:navcnt 2.4s ease-in-out infinite}
.nav-link.active .nav-count{background:#fff;color:#be123c}
@keyframes navcnt{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.hm-tile{position:relative}
.hm-tile-count{position:absolute;top:.8rem;right:.8rem;min-width:1.7rem;padding:0 .5rem;border-radius:99px;background:linear-gradient(135deg,#ef4444,#be123c);color:#fff;font-size:.8rem;font-weight:700;line-height:1.7rem;text-align:center;box-shadow:0 3px 8px rgba(190,18,60,.4);animation:navcnt 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.nav-count,.hm-tile-count{animation:none}}

/* ===== แชทบอท ===== */
.cb-widget{position:fixed;right:18px;bottom:18px;z-index:1080;font-family:inherit}
.cb-fab{position:relative;width:58px;height:58px;border:0;border-radius:50%;color:#fff;font-size:1.6rem;display:grid;place-items:center;cursor:pointer;background:linear-gradient(135deg,#f2568f,#c9246b 60%,#7c3aed);box-shadow:0 10px 24px rgba(201,36,107,.45);transition:transform .2s;animation:cbpulse 3s ease-in-out infinite}
.cb-fab:hover{transform:scale(1.08)}.cb-fab.on{animation:none}
.cb-fab-dot{position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid #fff}
@keyframes cbpulse{0%,100%{box-shadow:0 10px 24px rgba(201,36,107,.45)}50%{box-shadow:0 10px 24px rgba(201,36,107,.45),0 0 0 10px rgba(242,86,143,.18)}}
.cb-panel{position:absolute;right:0;bottom:70px;width:370px;max-width:calc(100vw - 28px);height:520px;max-height:calc(100vh - 110px);display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(40,20,70,.3);border:1px solid #eee;animation:cbin .25s ease}
.cb-panel[hidden]{display:none}
@keyframes cbin{from{opacity:0;transform:translateY(14px) scale(.97)}}
.cb-head{display:flex;align-items:center;gap:10px;padding:12px 14px;color:#fff;background:linear-gradient(135deg,#f2568f,#c9246b)}
.cb-head b{display:block;font-size:.95rem}.cb-head small{opacity:.85;font-size:.72rem}
.cb-av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:1.2rem}
.cb-x{margin-left:auto;border:0;background:rgba(255,255,255,.2);color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer}
.cb-body{flex:1;overflow-y:auto;padding:12px;background:#faf8ff}
.cb-msg{max-width:92%;margin-bottom:10px;padding:9px 12px;border-radius:14px;font-size:.88rem;line-height:1.5;word-break:break-word}
.cb-msg.bot{background:#fff;border:1px solid #ece8f5;border-top-left-radius:4px;box-shadow:0 2px 6px rgba(60,40,100,.05)}
.cb-msg.me{margin-left:auto;color:#fff;background:linear-gradient(135deg,#f2568f,#c9246b);border-top-right-radius:4px}
.cb-card{margin:7px 0 0;padding:8px 10px;border-radius:10px;background:#faf8ff;border:1px solid #ece8f5;font-size:.84rem}
.cb-card i{color:#c9246b;margin-right:3px}.cb-sub{font-size:.76rem;color:#8a80a8}
.cb-tag{display:inline-block;padding:0 7px;border-radius:99px;background:#eef2ff;color:#4338ca;font-size:.7rem;font-weight:600}.cb-tag.cb-off{background:#fee2e2;color:#b91c1c}
.cb-ok{color:#15803d;font-weight:600;font-size:.8rem}.cb-ok i{color:#15803d}
.cb-row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed #e5e0f2;font-size:.84rem}
.cb-link{display:inline-block;margin-top:8px;font-weight:600;font-size:.82rem;color:#c9246b;text-decoration:none}
.cb-chips{display:flex;gap:6px;flex-wrap:wrap;padding:6px 10px 2px;background:#faf8ff}
.cb-chips button{border:1px solid #f3c4d8;background:#fff;color:#be185d;border-radius:99px;padding:3px 11px;font-size:.78rem;cursor:pointer;transition:all .15s}
.cb-chips button:hover{background:#c9246b;color:#fff;border-color:#c9246b}
.cb-form{display:flex;gap:8px;padding:10px;border-top:1px solid #eee;background:#fff}
.cb-form input{flex:1;border:1.5px solid #e6e0f3;border-radius:99px;padding:8px 14px;font-size:.88rem;outline:0}
.cb-form input:focus{border-color:#c9246b}
.cb-send{width:40px;height:40px;border:0;border-radius:50%;color:#fff;cursor:pointer;background:linear-gradient(135deg,#f2568f,#c9246b)}
.cb-typing i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:#c9246b;animation:cbdot 1s infinite}
.cb-typing i:nth-child(2){animation-delay:.15s}.cb-typing i:nth-child(3){animation-delay:.3s}
@keyframes cbdot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}
@media(max-width:480px){.cb-widget{right:12px;bottom:12px}.cb-panel{position:fixed;right:8px;left:8px;bottom:78px;width:auto;max-width:none}}
@media print{.cb-widget{display:none!important}}
@media (prefers-reduced-motion:reduce){.cb-fab,.cb-panel,.cb-typing i{animation:none}}

/* น้องชาลวันจอมแก่น */
.cb-fab{background:#fff!important;border:3px solid #7ad84a!important;box-shadow:0 10px 24px rgba(63,154,34,.4)!important;animation:cbwiggle 4s ease-in-out infinite!important}
.cb-fab .cb-croc{width:42px;height:42px}
.cb-fab-dot{background:#f2568f!important}
@keyframes cbwiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-10deg) scale(1.06)}94%{transform:rotate(9deg) scale(1.06)}}
.cb-head{background:linear-gradient(135deg,#46b52c,#2f8f3a)!important}
.cb-av{width:42px;height:42px;background:#fff!important;padding:3px;overflow:hidden}
.cb-av svg{width:100%;height:100%}
.cb-msg.me,.cb-send{background:linear-gradient(135deg,#46b52c,#2f8f3a)!important}
.cb-chips button{border-color:#bfe8a8!important;color:#2f7a22!important}
.cb-chips button:hover{background:#3aa526!important;color:#fff!important;border-color:#3aa526!important}
.cb-link,.cb-card i{color:#2f8f3a!important}
.cb-form input:focus{border-color:#46b52c!important}
.cb-typing i{background:#46b52c!important}
.cb-body{background:#f6fbf2!important}
@media (prefers-reduced-motion:reduce){.cb-fab{animation:none!important}}

/* น้องชาลวัน: ใช้รูปจริง โทนส้ม */
.cb-fab{width:64px!important;height:64px!important;background:#fff!important;border:3px solid #fb923c!important;box-shadow:0 10px 24px rgba(234,88,12,.4)!important}
.cb-fab .cb-croc{width:54px!important;height:54px!important;object-fit:contain;display:block;margin-top:2px}
.cb-fab-dot{background:#22c55e!important}
.cb-head{background:linear-gradient(135deg,#fb923c,#ea580c)!important}
.cb-av{width:48px!important;height:48px!important;padding:2px!important}
.cb-av img{width:100%;height:100%;object-fit:contain;display:block}
.cb-msg.me,.cb-send{background:linear-gradient(135deg,#fb923c,#ea580c)!important}
.cb-chips button{border-color:#fed7aa!important;color:#c2410c!important}
.cb-chips button:hover{background:#ea580c!important;color:#fff!important;border-color:#ea580c!important}
.cb-link,.cb-card i{color:#ea580c!important}
.cb-form input:focus{border-color:#fb923c!important}
.cb-typing i{background:#fb923c!important}
.cb-body{background:#fffaf5!important}
.cb-card{background:#fffaf5!important;border-color:#fde6d0!important}
@keyframes cbpulse{0%,100%{box-shadow:0 10px 24px rgba(234,88,12,.4)}50%{box-shadow:0 10px 24px rgba(234,88,12,.4),0 0 0 10px rgba(251,146,60,.2)}}

/* น้องชาลวัน: พื้นปุ่มไล่สีส้มอมชมพู */
.cb-fab{background:radial-gradient(circle at 35% 28%,#ffd0a6 0%,#ff9a62 38%,#f2568f 100%)!important;border:3px solid #fff!important;box-shadow:0 10px 24px rgba(242,86,143,.5),inset 0 -4px 8px rgba(190,24,93,.25),inset 0 3px 6px rgba(255,255,255,.45)!important}
.cb-fab .cb-croc{filter:drop-shadow(0 2px 3px rgba(120,30,40,.35))}
.cb-fab-dot{border-color:#fff!important}
.cb-av{background:linear-gradient(135deg,#ffd0a6,#ff8a5c 55%,#f2568f)!important;border:2px solid rgba(255,255,255,.9)}
.cb-head{background:linear-gradient(135deg,#fb923c,#f2568f)!important}
.cb-msg.me,.cb-send{background:linear-gradient(135deg,#fb923c,#f2568f)!important}
.cb-chips button:hover{background:#f2568f!important;border-color:#f2568f!important}
@keyframes cbpulse{0%,100%{box-shadow:0 10px 24px rgba(242,86,143,.5)}50%{box-shadow:0 10px 24px rgba(242,86,143,.5),0 0 0 10px rgba(251,146,60,.22)}}

/* ===== หน้าจอรอโหลด (น้องชาลวัน) ===== */
.ld-overlay{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(255,240,230,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .2s}
.ld-overlay[hidden]{display:none}
.ld-overlay.show{opacity:1}
.ld-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 38px 22px;border-radius:26px;background:rgba(255,255,255,.92);box-shadow:0 20px 50px rgba(190,60,80,.28);border:1px solid #ffe1d0;max-width:86vw;text-align:center}
.ld-ring{position:relative;width:132px;height:132px;display:grid;place-items:center}
.ld-ring:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#fb923c,#f2568f,#a855f7,rgba(255,255,255,0) 72%,#fb923c);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));animation:ldspin 1s linear infinite}
.ld-ring:after{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffe6d2,#ffc29c 60%,#ffa9b9);box-shadow:inset 0 -4px 8px rgba(190,24,93,.18)}
.ld-ring img{position:relative;z-index:1;width:84px;height:84px;object-fit:contain;animation:ldbounce .9s ease-in-out infinite;filter:drop-shadow(0 3px 3px rgba(120,30,40,.3))}
@keyframes ldspin{to{transform:rotate(360deg)}}
@keyframes ldbounce{0%,100%{transform:translateY(2px) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
.ld-text{font-weight:700;font-size:1.05rem;color:#c2410c;margin-top:6px}
.ld-text:after{content:"...";display:inline-block;width:1.2em;text-align:left;animation:lddots 1.2s steps(4,end) infinite;overflow:hidden;vertical-align:bottom}
@keyframes lddots{0%{width:0}100%{width:1.2em}}
.ld-sub{font-size:.8rem;color:#9a7b8a}
@media print{.ld-overlay{display:none!important}}
@media (prefers-reduced-motion:reduce){.ld-ring:before,.ld-ring img,.ld-text:after{animation-duration:3s}}

/* ป็อปอัปประกาศหน้าแรก: ขนาดใหญ่ขึ้น (เดิม 500px) */
.popup-dialog{max-width:min(920px,94vw)}
.popup-dialog .popup-img{max-height:72vh;object-fit:contain;background:#fff7fb}
.popup-dialog .modal-body{padding:1.6rem 2rem!important}
.popup-dialog .modal-body h4{font-size:1.6rem}
.popup-dialog .modal-body p{font-size:1.05rem}
@media(max-width:576px){.popup-dialog{max-width:96vw;margin:.5rem auto}.popup-dialog .modal-body h4{font-size:1.25rem}}

/* ปุ่มปิดป๊อปอัป: เดิม background:#fff ทับไอคอนกากบาทจนไม่เห็น */
.popup-close{background-color:#fff!important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c9246b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:.9em!important;width:2.4rem;height:2.4rem;border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.28)!important;opacity:1!important}
.popup-close:hover{transform:scale(1.1);transition:transform .15s}

.coin.p:before{background:radial-gradient(circle at 35% 30%,#99f6e4,#0d9488)}

/* ===== แท่นรับรางวัล 3D / รายการอันดับ (ใช้ร่วมหน้าสรุปเหรียญและผลรายการ) ===== */
      .md3-stage{position:relative;margin:10px 0 26px;padding:34px 10px 0;border-radius:24px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#fff7e0 0%,#fdeef6 45%,#eaf1ff 100%);border:1px solid #f4dcc0;box-shadow:0 10px 30px rgba(180,120,20,.12)}
      .md3-stage:before{content:"";position:absolute;left:50%;top:-60px;width:520px;height:520px;margin-left:-260px;background:conic-gradient(from 0deg,rgba(251,191,36,0),rgba(251,191,36,.22),rgba(251,191,36,0) 25%,rgba(244,114,182,.16) 50%,rgba(251,191,36,0) 75%,rgba(251,191,36,.22),rgba(251,191,36,0));border-radius:50%;animation:md3spin 22s linear infinite;pointer-events:none}
      @keyframes md3spin{to{transform:rotate(360deg)}}
      .md3-spark{position:absolute;top:-12px;border-radius:2px;opacity:.9;animation:md3fall linear infinite;pointer-events:none}
      @keyframes md3fall{0%{transform:translateY(-10px) rotate(0)}100%{transform:translateY(420px) rotate(540deg);opacity:.15}}
      .md3-podium{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:16px;perspective:900px;min-height:300px}
      .md3-col{width:200px;max-width:31%;display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d}
      .md3-ring{position:relative;width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.1rem;color:#fff;border:4px solid #fff;margin-bottom:-26px;z-index:3;box-shadow:0 12px 22px rgba(0,0,0,.25),inset 0 -6px 10px rgba(0,0,0,.18),inset 0 6px 10px rgba(255,255,255,.45);opacity:0;animation:md3pop .6s forwards,md3bob 3.2s ease-in-out infinite;animation-iteration-count:1,infinite}
      .md3-ring:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;animation:md3shine 3.4s ease-in-out infinite}
      @keyframes md3shine{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
      @keyframes md3bob{0%,100%{margin-top:0}50%{margin-top:-9px}}
      @keyframes md3pop{0%{opacity:0;transform:translateY(-60px) scale(.3)}70%{opacity:1;transform:translateY(6px) scale(1.1)}100%{opacity:1;transform:none}}
      .md3-p1 .md3-ring{background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 70%);width:96px;height:96px;font-size:2.5rem;animation-delay:1.1s,1.7s}
      .md3-p2 .md3-ring{background:radial-gradient(circle at 35% 30%,#f1f5f9,#94a3b8 72%);animation-delay:.8s,1.4s}
      .md3-p3 .md3-ring{background:radial-gradient(circle at 35% 30%,#fcd9a8,#b45309 72%);animation-delay:.55s,1.15s}
      .md3-stand{position:relative;width:100%;border-radius:12px 12px 0 0;padding:38px 10px 14px;text-align:center;color:#fff;transform-origin:bottom center;transform:rotateX(-6deg) scaleY(0);animation:md3rise .9s cubic-bezier(.2,.9,.3,1.15) forwards;box-shadow:0 18px 30px rgba(0,0,0,.22)}
      .md3-stand:before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0))}
      .md3-stand:after{content:"";position:absolute;right:-10px;top:8px;bottom:0;width:10px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.05));transform:skewY(-38deg);transform-origin:left top;border-radius:0 6px 0 0}
      @keyframes md3rise{0%{transform:rotateX(-6deg) scaleY(0)}100%{transform:rotateX(-6deg) scaleY(1)}}
      .md3-p1 .md3-stand{background:linear-gradient(160deg,#fcd34d,#f59e0b 55%,#b45309);min-height:200px;animation-delay:.5s}
      .md3-p2 .md3-stand{background:linear-gradient(160deg,#cbd5e1,#94a3b8 55%,#475569);min-height:160px;animation-delay:.25s}
      .md3-p3 .md3-stand{background:linear-gradient(160deg,#e0a96d,#b45309 55%,#78350f);min-height:130px;animation-delay:0s}
      .md3-rank{font-size:2.6rem;font-weight:800;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.2)}
      .md3-sch{font-weight:700;font-size:.98rem;margin:6px 0 8px;min-height:2.5em;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 2px rgba(0,0,0,.3)}
      .md3-mini{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
      .coin{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 3px;border-radius:99px;font-weight:700;font-size:.82rem;background:rgba(255,255,255,.92);color:#333;box-shadow:0 2px 5px rgba(0,0,0,.15)}
      .coin:before{content:"";width:16px;height:16px;border-radius:50%;box-shadow:inset 0 -2px 3px rgba(0,0,0,.25),inset 0 2px 3px rgba(255,255,255,.7)}
      .coin.g:before{background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b)}
      .coin.s:before{background:radial-gradient(circle at 35% 30%,#f1f5f9,#94a3b8)}
      .coin.b:before{background:radial-gradient(circle at 35% 30%,#fcd9a8,#b45309)}
      .md3-base{height:14px;margin:0 -10px;background:linear-gradient(180deg,#e9dcc6,#cdb995);box-shadow:0 8px 14px rgba(0,0,0,.15)}
      .md3-list{margin-top:6px}
      .md3-row{--c:#e9e5f3;position:relative;display:flex;align-items:center;gap:14px;padding:12px 16px;margin-bottom:10px;border-radius:16px;background:#fff;border:1px solid #ece8f5;border-left:6px solid var(--c);box-shadow:0 3px 10px rgba(60,40,100,.06);opacity:0;transform:translateX(-30px);animation:md3in .5s ease forwards;transition:box-shadow .2s}
      .md3-row:hover{box-shadow:0 12px 24px rgba(60,40,100,.14)}
      @keyframes md3in{to{opacity:1;transform:none}}
      .md3-row.t1{--c:#f59e0b;background:linear-gradient(90deg,#fffbeb,#fff)}.md3-row.t2{--c:#94a3b8;background:linear-gradient(90deg,#f8fafc,#fff)}.md3-row.t3{--c:#b45309;background:linear-gradient(90deg,#fff7ed,#fff)}
      .md3-no{flex:0 0 42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#6b5a99;background:#f3f0fb;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
      .t1 .md3-no{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#fff}.t2 .md3-no{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#fff}.t3 .md3-no{background:linear-gradient(135deg,#f0c08a,#b45309);color:#fff}
      .md3-mid{flex:1;min-width:0}.md3-nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .md3-bar{height:6px;border-radius:9px;background:#f0edf8;margin-top:6px;overflow:hidden}
      .md3-bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#f59e0b,#ec4899,#8b5cf6);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
      .md3-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
      .md3-chips .coin{background:#faf8ff;border:1px solid #ece8f5}
      .md3-tot{flex:0 0 52px;text-align:center;font-size:1.5rem;font-weight:800;color:#c9246b;line-height:1}.md3-tot small{display:block;font-size:.62rem;font-weight:600;color:#9a90b5}
      @media(max-width:600px){.md3-col{width:31%}.md3-ring{width:62px;height:62px;font-size:1.5rem}.md3-p1 .md3-ring{width:70px;height:70px}.md3-sch{font-size:.75rem}.md3-rank{font-size:1.8rem}.md3-row{flex-wrap:wrap}.md3-chips{justify-content:flex-start}}
      @media(prefers-reduced-motion:reduce){.md3-stage:before,.md3-spark,.md3-ring{animation:none!important}.md3-ring{opacity:1!important}.md3-ring:after{animation:none}.md3-stand{animation:none!important;transform:none!important}.md3-row{animation:none!important;opacity:1;transform:none}.md3-bar i{transition:none}}
      
/* ===== หน้าผลรายการ (รายละเอียด) ===== */
.md3-score{font-size:1.25rem;font-weight:800;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.18)}.md3-score small{font-size:.7rem;font-weight:600;opacity:.9}
.md3-stand .md3-mini{margin-top:6px}.md3-stand .coin{font-size:.75rem}
.rd-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding:18px 22px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#f97316,#f2568f 55%,#8b5cf6);box-shadow:0 14px 34px rgba(242,86,143,.3);position:relative;overflow:hidden}
.rd-hero:after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.rd-hero-ic{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:2rem;box-shadow:inset 0 -4px 8px rgba(0,0,0,.15),inset 0 4px 8px rgba(255,255,255,.35);animation:md3bob 3s ease-in-out infinite}
.rd-hero-tx{flex:1;min-width:220px;position:relative;z-index:1}
.rd-sub{font-size:.8rem;opacity:.9}.rd-hero h3{margin:2px 0 6px;font-weight:800;font-size:1.5rem}
.rd-lv{display:inline-block;padding:1px 12px;border-radius:99px;background:rgba(255,255,255,.25);font-size:.8rem;font-weight:700;vertical-align:middle}
.rd-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;opacity:.95}
.rd-stats{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:relative;z-index:1}
.rd-stats>div{text-align:center}.rd-stats b{display:block;font-size:1.9rem;line-height:1}.rd-stats small{font-size:.7rem;opacity:.9}
.rd-stage{margin-top:4px}
.md3-row.rd-hit{outline:3px solid #fde047;background:linear-gradient(90deg,#fefce8,#fff)}
.md3-chips .coin.p{background:#f0fdfa;color:#0f766e}
@media(max-width:600px){.rd-hero h3{font-size:1.2rem}.rd-stats b{font-size:1.5rem}}

/* ===== popup รายละเอียดรายการแข่งขัน (หน้ารายการแข่งขันสาธารณะ) ===== */
#compModal .modal-content{border-radius:22px;overflow:hidden;border:0}
#compModal .modal-header{background:linear-gradient(135deg,#f97316,#f2568f 60%,#8b5cf6);color:#fff;border:0;padding:16px 20px}
#compModal .modal-title{font-weight:800}
#compModal .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.95}
#compModal .modal-body{background:#fbf9ff;padding:18px 20px}
.cf-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:6px}
.cf-tile{position:relative;padding:10px 12px 10px 46px;border-radius:14px;background:#fff;border:1px solid #eee7f7;box-shadow:0 3px 10px rgba(80,40,120,.06)}
.cf-tile>i{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#fb923c,#f2568f);font-size:.95rem}
.cf-tile small{display:block;font-size:.7rem;color:#8a80a8}.cf-tile b{display:block;font-size:.88rem;line-height:1.3;word-break:break-word}
.cf-tile.cf-wide{grid-column:1/-1}
.cf-sec{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-weight:800;color:#3b1b52}
.cf-sec>i{color:#f2568f}.cf-count{margin-left:auto;padding:1px 12px;border-radius:99px;background:#fff0f6;color:#c9246b;font-size:.78rem;font-weight:700}
.cf-schools{display:flex;flex-direction:column;gap:8px}
.cf-school{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:#fff;border:1px solid #eee7f7;transition:transform .15s,box-shadow .15s}
.cf-school:hover{transform:translateX(3px);box-shadow:0 6px 14px rgba(80,40,120,.1)}
.cf-no{flex:0 0 30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#6b5a99;background:#f3f0fb}
.cf-nm{flex:1;min-width:0;font-weight:600}
.cf-st{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.cf-st.ok{background:#dcfce7;color:#15803d}.cf-st.wait{background:#fef3c7;color:#b45309}
.cf-empty{padding:18px;text-align:center;border-radius:14px;background:#fff;border:1px dashed #e0d6f0;color:#8a80a8}
.cf-crit{display:flex;flex-direction:column;gap:8px}
.cf-cr{padding:9px 12px;border-radius:14px;background:#fff;border:1px solid #eee7f7}
.cf-cr-top{display:flex;justify-content:space-between;gap:8px;font-size:.9rem}.cf-cr-top b{color:#c9246b}
.cf-bar{height:6px;border-radius:9px;background:#f0edf8;margin-top:6px;overflow:hidden}.cf-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#fb923c,#f2568f,#8b5cf6)}
.pub-row.has-more{transition:background .15s}.pub-row.has-more:hover{background:#fff7fb}
.pub-row .cc-doc{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:2px 10px;border-radius:99px;background:#fff0f6;color:#c9246b;font-size:.76rem;font-weight:600}

/* ===== ผลรายโรงเรียน ===== */
.sr-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding:20px 24px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#f97316,#f2568f 55%,#8b5cf6);box-shadow:0 14px 34px rgba(242,86,143,.3);position:relative;overflow:hidden}
.sr-hero:after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.12)}
.sr-hero-tx{flex:1;min-width:220px;position:relative;z-index:1}.sr-hero-t{font-weight:800;font-size:1.25rem}
.sr-hero-a{display:inline-block;margin-top:6px;color:#fff;font-weight:600;text-decoration:none;padding:3px 14px;border-radius:99px;background:rgba(255,255,255,.22)}.sr-hero-a:hover{background:rgba(255,255,255,.34);color:#fff}
.sr-hero-coins{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1}.sr-hero-coins>div{text-align:center}.sr-hero-coins small{display:block;font-size:.7rem;margin-top:3px;opacity:.95}
.sr-hero-coins .coin{font-size:1.15rem;padding:4px 14px 4px 5px}.sr-hero-coins .coin:before{width:24px;height:24px}
.sr-list{display:flex;flex-direction:column;gap:10px}
.sr-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;background:#fff;border:1px solid #ece8f5;box-shadow:0 3px 10px rgba(60,40,100,.06);cursor:pointer;opacity:0;transform:translateX(-24px);animation:md3in .5s ease forwards;transition:box-shadow .2s,border-color .2s,transform .2s}
.sr-row:hover{box-shadow:0 14px 28px rgba(242,86,143,.18);border-color:#f9a8c9;transform:translateY(-2px)}
.sr-no{flex:0 0 44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:800;color:#6b5a99;background:#f3f0fb;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.sr-no.t1{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#fff}.sr-no.t2{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#fff}.sr-no.t3{background:linear-gradient(135deg,#f0c08a,#b45309);color:#fff}
.sr-mid{flex:1;min-width:0}.sr-nm{font-weight:700;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-sub{font-size:.78rem;color:#8a80a8}.sr-sub i{color:#f2568f}
.sr-coins{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.sr-coins .coin{background:#faf8ff;border:1px solid #ece8f5}
.sr-btn{border-radius:99px;white-space:nowrap}
@media(max-width:640px){.sr-row{flex-wrap:wrap}.sr-coins{order:5;width:100%;justify-content:flex-start}.sr-btn{margin-left:auto}}
.sr-modal{border-radius:22px;overflow:hidden;border:0}
.sr-mh{display:flex;align-items:center;gap:14px;padding:18px 22px;color:#fff;background:linear-gradient(135deg,#f97316,#f2568f 60%,#8b5cf6)}
.sr-mh-ic{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:1.6rem;box-shadow:inset 0 -3px 6px rgba(0,0,0,.15),inset 0 3px 6px rgba(255,255,255,.35)}
.sr-mh-tx{flex:1;min-width:0}.sr-mh-tx small{opacity:.9}.sr-mh-tx h4{margin:0;font-weight:800}
.sr-mh .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.95}
.sr-modal .modal-body{background:#fbf9ff;padding:18px 22px}
.sr-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:14px}
.sr-sum-i{text-align:center;padding:12px 8px;border-radius:16px;background:#fff;border:1px solid #eee7f7;box-shadow:0 3px 10px rgba(80,40,120,.06)}
.sr-sum-i small{display:block;font-size:.72rem;color:#8a80a8;margin-top:5px}
.sr-sum-i .coin{font-size:1.25rem;padding:4px 16px 4px 5px}.sr-sum-i .coin:before{width:26px;height:26px}
.sr-big{font-size:1.5rem;font-weight:800;color:#6366f1;line-height:1.5}
.sr-sub-card{margin-bottom:14px;border-radius:18px;background:#fff;border:1px solid #eee7f7;overflow:hidden;box-shadow:0 3px 10px rgba(80,40,120,.05)}
.sr-sub-h{padding:10px 16px;font-weight:800;color:#3b1b52;background:linear-gradient(90deg,#fff0f6,#f5f0ff)}.sr-sub-h i{color:#f2568f}
.sr-items{display:flex;flex-direction:column}
.sr-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid #f3effa;border-left:5px solid #e7e2f2}
.sr-item.g{border-left-color:#f59e0b;background:linear-gradient(90deg,#fffbeb,#fff 40%)}.sr-item.s{border-left-color:#94a3b8;background:linear-gradient(90deg,#f8fafc,#fff 40%)}.sr-item.b{border-left-color:#b45309;background:linear-gradient(90deg,#fff7ed,#fff 40%)}.sr-item.p{border-left-color:#14b8a6;background:linear-gradient(90deg,#f0fdfa,#fff 40%)}
.sr-item-rk{flex:0 0 34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#6b5a99;background:#f3f0fb}
.sr-item.g .sr-item-rk{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#fff}.sr-item.s .sr-item-rk{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#fff}.sr-item.b .sr-item-rk{background:linear-gradient(135deg,#f0c08a,#b45309);color:#fff}.sr-item.p .sr-item-rk{background:linear-gradient(135deg,#99f6e4,#0d9488);color:#fff}
.sr-item-mid{flex:1;min-width:0}.sr-item-nm{font-weight:600}
.sr-item-sc{text-align:center;min-width:56px;line-height:1.1}.sr-item-sc b{display:block;font-size:1.1rem;color:#c9246b}.sr-item-sc small{font-size:.65rem;color:#8a80a8}
@media(max-width:560px){.sr-item{flex-wrap:wrap}.sr-item .coin{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.sr-row{animation:none;opacity:1;transform:none}}

/* ===== เหรียญ 3 มิติ ===== */
.mdl{--s:76px;--c1:#fff3b0;--c2:#f5b50a;--c3:#b9770e;--c4:#7a4a08;--rb1:#ef4444;--rb2:#b91c1c;--ink:#7a4a08;position:relative;display:inline-block;width:var(--s);height:calc(var(--s)*1.32);vertical-align:top;transform-origin:50% 0;animation:mdlswing 4s ease-in-out infinite}
.mdl.s{--c1:#ffffff;--c2:#cbd5e1;--c3:#8795a8;--c4:#4b5a6e;--rb1:#3b82f6;--rb2:#1d4ed8;--ink:#475569}
.mdl.b{--c1:#ffd9b0;--c2:#d98a45;--c3:#9a5320;--c4:#5e300d;--rb1:#22c55e;--rb2:#15803d;--ink:#6b3a12}
.mdl.p{--c1:#d1fff6;--c2:#2dd4bf;--c3:#0d9488;--c4:#0b5f58;--rb1:#ec4899;--rb2:#be185d;--ink:#0b5f58}
.mdl-rb{position:absolute;left:50%;top:0;width:calc(var(--s)*.52);height:calc(var(--s)*.62);transform:translateX(-50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.mdl-rb:before,.mdl-rb:after{content:"";position:absolute;top:0;width:46%;height:100%;background:linear-gradient(180deg,var(--rb1),var(--rb2));clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.mdl-rb:before{left:0;transform:skewX(8deg)}.mdl-rb:after{right:0;transform:skewX(-8deg);filter:brightness(.85)}
.mdl-disc{position:absolute;left:0;bottom:0;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(from 215deg,var(--c1),var(--c2) 18%,var(--c3) 38%,var(--c2) 55%,var(--c1) 70%,var(--c3) 88%,var(--c1));
  box-shadow:0 calc(var(--s)*.12) calc(var(--s)*.2) rgba(0,0,0,.32),inset 0 calc(var(--s)*-.07) calc(var(--s)*.1) rgba(0,0,0,.28),inset 0 calc(var(--s)*.06) calc(var(--s)*.09) rgba(255,255,255,.75)}
.mdl-disc:before{content:"";position:absolute;inset:11%;border-radius:50%;background:radial-gradient(circle at 32% 26%,var(--c1),var(--c2) 45%,var(--c3));box-shadow:inset 0 calc(var(--s)*.05) calc(var(--s)*.07) rgba(0,0,0,.3),0 1px 1px rgba(255,255,255,.7)}
.mdl-disc:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.8) 50%,transparent 66%);background-size:260% 100%;animation:mdlshine 3.6s ease-in-out infinite;pointer-events:none}
.mdl-disc b{position:relative;z-index:1;font-size:calc(var(--s)*.42);font-weight:800;line-height:1;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.65),0 -1px 0 rgba(0,0,0,.2)}
@keyframes mdlswing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes mdlshine{0%{background-position:160% 0}55%,100%{background-position:-70% 0}}
.sr-sum-i .mdl,.sr-hero-coins .mdl,.rd-stats .mdl{display:block;margin:0 auto}
.sr-sum-i{padding-top:14px}
.rd-stats>div:has(.mdl),.sr-hero-coins>div{text-align:center}
.rd-stats{gap:12px}
/* เหรียญเล็กในรายการ: โลหะนูนขึ้น */
.coin:before{background:conic-gradient(from 210deg,#fff3b0,#f5b50a 25%,#b9770e 50%,#f5b50a 75%,#fff3b0)}
.coin.g:before{background:conic-gradient(from 210deg,#fff3b0,#f5b50a 25%,#b9770e 50%,#f5b50a 75%,#fff3b0)}
.coin.s:before{background:conic-gradient(from 210deg,#fff,#cbd5e1 25%,#8795a8 50%,#cbd5e1 75%,#fff)}
.coin.b:before{background:conic-gradient(from 210deg,#ffd9b0,#d98a45 25%,#9a5320 50%,#d98a45 75%,#ffd9b0)}
.coin.p:before{background:conic-gradient(from 210deg,#d1fff6,#2dd4bf 25%,#0d9488 50%,#2dd4bf 75%,#d1fff6)}
@media(prefers-reduced-motion:reduce){.mdl,.mdl-disc:after{animation:none}}

/* คอลัมน์เหรียญในรายการผลการแข่งขัน */
.rl-coins{white-space:nowrap}.rl-coins .coin{margin:0 3px;background:#faf8ff;border:1px solid #ece8f5;font-size:.85rem;padding:2px 11px 2px 3px}
.rl-coins .coin:before{width:20px;height:20px}
.rl-legend{display:block;font-size:.62rem;font-weight:500;opacity:.8}

/* ===== การ์ดกลุ่มสาระ (หน้ารายการแข่งขัน) ===== */
.sgc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:6px 0 22px}
.sgc{--g1:#f97316;--g2:#f2568f;position:relative;overflow:hidden;text-align:left;border:0;cursor:pointer;color:#fff;padding:22px 20px 18px;border-radius:24px;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 14px 30px rgba(60,20,80,.22);display:flex;flex-direction:column;gap:6px;min-height:190px;opacity:0;transform:translateY(18px);animation:sgcin .55s ease forwards;transition:transform .22s,box-shadow .22s}
.sgc:before{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.14)}
.sgc:after{content:"";position:absolute;right:30px;bottom:-60px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.1)}
.sgc:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 22px 40px rgba(60,20,80,.32)}
@keyframes sgcin{to{opacity:1;transform:none}}
.sgc-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:1.7rem;background:rgba(255,255,255,.24);box-shadow:inset 0 -4px 8px rgba(0,0,0,.14),inset 0 4px 8px rgba(255,255,255,.35);position:relative;z-index:1}
.sgc:hover .sgc-ic{animation:md3bob .8s ease-in-out infinite}
.sgc-nm{font-weight:800;font-size:1.2rem;line-height:1.25;margin-top:6px;position:relative;z-index:1}
.sgc-st{font-size:.85rem;opacity:.95;position:relative;z-index:1}.sgc-st b{font-size:1.05rem}
.sgc-go{margin-top:auto;padding-top:8px;font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:6px;position:relative;z-index:1}
.sgc-go i{transition:transform .2s}.sgc:hover .sgc-go i{transform:translateX(5px)}
.sgc-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 14px}
.sgc-bar-t{font-weight:800;font-size:1.15rem;color:#3b1b52}
@media(prefers-reduced-motion:reduce){.sgc{animation:none;opacity:1;transform:none}}

/* ===== ธีมสนุกไล่สีส้ม → ชมพู ใช้ทุกหน้าสาธารณะ (body.is-home) ===== */
body.is-home .page-title::before{background:linear-gradient(180deg,#f97316,#f43f5e 55%,#db2777)}
body.is-home .page-title{font-family:"Mitr","Noto Sans Thai Looped",sans-serif;font-weight:600;color:var(--hm-dark)}
body.is-home .table thead th{background:var(--hm-grad);color:#fff;border:0}
body.is-home .table-hover>tbody>tr:hover>*{background:#fff4ec}
body.is-home .pub-filter{background:rgba(255,255,255,.9);border-color:rgba(249,115,22,.22);box-shadow:0 8px 22px rgba(249,115,22,.1)}
body.is-home .pub-filter .form-control:focus,body.is-home .pub-filter .form-select:focus{border-color:#f97316;box-shadow:0 0 0 .2rem rgba(249,115,22,.18)}
body.is-home .btn-brand{background:var(--hm-grad);border:0;box-shadow:0 8px 18px rgba(244,63,94,.28)}
body.is-home .btn-brand:hover{filter:brightness(1.05)}
body.is-home .btn-outline-brand{border-color:#f43f5e;color:#db2777}
body.is-home .btn-outline-brand:hover{background:var(--hm-grad);border-color:transparent;color:#fff}
body.is-home .card{border-radius:20px}
body.is-home .day-head .dh-date.alt{background:var(--hm-grad)}
/* ให้ไล่สีหัวตารางต่อเนื่องทั้งแถว (ไม่ขาดเป็นช่วงตามคอลัมน์) */
body.is-home .table thead tr{background:var(--hm-grad)}
body.is-home .table thead th{background:transparent!important}

/* มุมการ์ด: ตัวเลขแจ้งเตือน + เหรียญสรุป */
a.sgc{text-decoration:none}a.sgc:hover{color:#fff}
.sgc-badge{position:absolute;top:14px;right:14px;z-index:2;min-width:34px;height:34px;padding:0 10px;border-radius:99px;display:grid;place-items:center;background:linear-gradient(135deg,#ef4444,#be123c);color:#fff;font-weight:800;font-size:1rem;border:3px solid #fff;box-shadow:0 6px 14px rgba(190,18,60,.45);animation:navcnt 2.4s ease-in-out infinite}
.sgc-medals{display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:1}
.sgc-medals .coin{font-size:.8rem;padding:2px 10px 2px 3px}

/* ===== โลโก้โรงเรียน ===== */
.sl-logo{--s:40px;--g1:#f97316;--g2:#f2568f;flex:0 0 var(--s);width:var(--s);height:var(--s);border-radius:50%;object-fit:contain;background:#fff;border:2px solid #fff;box-shadow:0 3px 10px rgba(80,40,100,.22);display:inline-grid;place-items:center;vertical-align:middle;overflow:hidden}
.sl-logo.sl-ph{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;font-weight:800;font-size:calc(var(--s)*.46);line-height:1}
.md3-sch{gap:8px}.md3-sch .sl-logo{flex:0 0 auto}
.md3-row .sl-logo,.sr-row .sl-logo{margin-left:-4px}
.cf-school .sl-logo{flex:0 0 30px}

/* ===== เอกสารดาวน์โหลด ===== */
.dl-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.dl-chips button{border:1.5px solid #fed7aa;background:#fff;color:#c2410c;border-radius:99px;padding:5px 14px;font-weight:600;font-size:.88rem;cursor:pointer;transition:all .15s}
.dl-chips button span{display:inline-block;min-width:1.4rem;margin-left:4px;padding:0 6px;border-radius:99px;background:#fff1e6;font-size:.75rem}
.dl-chips button:hover{background:#fff7ed}.dl-chips button.on{background:linear-gradient(120deg,#f97316,#f43f5e 55%,#db2777);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(244,63,94,.3)}
.dl-chips button.on span{background:rgba(255,255,255,.28);color:#fff}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.dl-card{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;padding:16px;border-radius:20px;background:#fff;border:1px solid #f3e4d8;box-shadow:0 6px 18px rgba(120,60,20,.08);opacity:0;transform:translateY(14px);animation:sgcin .5s ease forwards;transition:transform .2s,box-shadow .2s}
.dl-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(244,63,94,.16)}
.dl-card-ic{flex:0 0 64px;height:72px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;background:linear-gradient(135deg,#f97316,#f43f5e 60%,#db2777);box-shadow:inset 0 -4px 8px rgba(0,0,0,.14),inset 0 4px 8px rgba(255,255,255,.3)}
.dl-card-ic i{font-size:1.9rem;line-height:1}.dl-card-ic span{font-size:.65rem;font-weight:800;letter-spacing:.04em}
.dl-card-b{flex:1;min-width:160px}
.dl-cat{display:inline-block;padding:1px 10px;border-radius:99px;background:#fff0f6;color:#c9246b;font-size:.7rem;font-weight:700}
.dl-card h5{margin:6px 0 4px;font-weight:700;font-size:1.02rem;line-height:1.35}
.dl-card p{margin:0 0 6px;font-size:.85rem;color:#7a6a8a}
.dl-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.75rem;color:#8a80a8}.dl-meta i{color:#f97316}
.dl-btn{width:100%;border-radius:99px}
@media(prefers-reduced-motion:reduce){.dl-card{animation:none;opacity:1;transform:none}}

/* ===== คณะกรรมการจัดการแข่งขัน ===== */
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.cm-item{border-radius:20px;background:#fff;border:1px solid #f3e4d8;box-shadow:0 6px 18px rgba(120,60,20,.08);overflow:hidden;opacity:0;transform:translateY(14px);animation:sgcin .5s ease forwards;transition:transform .2s,box-shadow .2s}
.cm-item:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(244,63,94,.15)}
.cm-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px;color:#fff;background:linear-gradient(120deg,#f97316,#f43f5e 55%,#db2777)}
.cm-h-t{flex:1;min-width:0;line-height:1.35}.cm-h-t small{display:block;opacity:.9;font-size:.72rem}.cm-h-t b{font-size:1rem}
.cm-h .pr-level{background:rgba(255,255,255,.25);color:#fff}
.cm-n{white-space:nowrap;padding:3px 11px;border-radius:99px;background:rgba(255,255,255,.25);font-size:.78rem;font-weight:700}
.cm-meta{display:flex;gap:12px;flex-wrap:wrap;padding:8px 16px 0;font-size:.76rem;color:#8a80a8}.cm-meta i{color:#f97316}
.cm-list{list-style:none;margin:0;padding:10px 12px 14px;display:flex;flex-direction:column;gap:8px;counter-reset:cm}
.cm-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:#fffaf5;border:1px solid #fbe6d6;counter-increment:cm}
.cm-list li:before{content:counter(cm);flex:0 0 24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:.75rem;font-weight:800;color:#c2410c;background:#ffedd5}
.cm-list li b{display:block;font-size:.92rem;line-height:1.3}.cm-list li small{display:block;color:#8a80a8;font-size:.74rem}
.cm-list li small i{color:#f97316}
.cm-item .cf-empty{margin:12px;font-size:.85rem}
@media(prefers-reduced-motion:reduce){.cm-item{animation:none;opacity:1;transform:none}}

/* เมนูสาธารณะแบบจัดกลุ่ม (dropdown) */
.pub-dd{border:0;border-radius:18px;padding:8px;min-width:230px;box-shadow:0 18px 40px rgba(120,40,20,.22);background:#fff;margin-top:8px!important}
.pub-dd .dropdown-item{display:flex;align-items:center;gap:10px;border-radius:12px;padding:9px 12px;font-weight:600;color:#4a1233}
.pub-dd .dropdown-item i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:.9rem;background:linear-gradient(135deg,#f97316,#f43f5e)}
.pub-dd .dropdown-item:hover{background:#fff4ec;color:#db2777}
.pub-dd .dropdown-item.active,.pub-dd .dropdown-item:active{background:linear-gradient(120deg,#f97316,#f43f5e 55%,#db2777);color:#fff}
.pub-dd .dropdown-item.active i{background:rgba(255,255,255,.25)}
.pub-dd .nav-count{margin-left:auto}
.app-navbar .navbar-nav .dropdown-toggle::after{margin-left:.4em;vertical-align:.15em}
@media(max-width:991px){.pub-dd{box-shadow:none;background:rgba(255,255,255,.7);margin:4px 0 8px!important}}

/* ===== ปุ่มเข้าสู่ระบบเด่น + เมนูชิดขวา ===== */
body.is-home .app-navbar .nav-link.nav-login{background:linear-gradient(135deg,#4a1233,#9d174d)!important;color:#fff!important;font-weight:700;padding:.5rem 1.3rem!important;border:2px solid rgba(255,255,255,.85);box-shadow:0 8px 20px rgba(74,18,51,.38);animation:loginGlow 2.8s ease-in-out infinite}
body.is-home .app-navbar .nav-link.nav-login i{margin-right:.2rem}
body.is-home .app-navbar .nav-link.nav-login:hover{filter:brightness(1.18);transform:translateY(-1px)}
@keyframes loginGlow{0%,100%{box-shadow:0 8px 20px rgba(74,18,51,.38)}50%{box-shadow:0 8px 20px rgba(74,18,51,.38),0 0 0 6px rgba(244,63,94,.22)}}
@media(max-width:991px){.nav-login-li{margin-top:.4rem}body.is-home .app-navbar .nav-link.nav-login{text-align:center;justify-content:center;display:flex;gap:.3rem}}
@media(prefers-reduced-motion:reduce){body.is-home .app-navbar .nav-link.nav-login{animation:none}}

/* ===== ปรับการแสดงผลบนมือถือ (หน้าสาธารณะ) ===== */
.ft-links a{min-width:0}
@media(max-width:700px){
  body.is-home{overflow-x:hidden}
  /* ผลการแข่งขัน: ตารางรายการ → การ์ด */
  .rl-table{border:0}
  .rl-table thead{display:none}
  .rl-table,.rl-table tbody,.rl-table tr,.rl-table td{display:block;width:100%}
  .rl-table tr{margin-bottom:12px;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid #f3e4d8;box-shadow:0 6px 16px rgba(120,60,20,.08)}
  .rl-table td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0!important;border:0!important;background:transparent!important;text-align:right!important}
  .rl-table td:before{content:attr(data-label);flex:0 0 36%;font-size:.78rem;font-weight:600;color:#8a80a8;text-align:left}
  .rl-table td.rl-name{display:block;text-align:left!important;font-size:1.05rem;padding-bottom:6px!important}
  .rl-table td.rl-name:before{display:block;margin-bottom:2px}
  .rl-table td.rl-act{display:block}.rl-table td.rl-act:before{display:none}.rl-table td.rl-act .btn{width:100%}
  .rl-coins{flex-wrap:wrap;justify-content:flex-end!important}
  /* รายการอันดับ (สรุปเหรียญ / ผลรายการ): ชื่อเต็ม ไม่ถูกตัด */
  .md3-row{flex-wrap:wrap;gap:10px;padding:12px}
  .md3-nm{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
  .md3-mid{flex:1 1 140px}
  .md3-chips{order:5;width:100%;justify-content:flex-start;padding-left:2px}
  .md3-tot{margin-left:auto}
  .md3-stage{padding-top:22px}
  .sr-nm,.sr-sub{white-space:normal}
  .rd-hero{padding:14px}.rd-stats{width:100%;justify-content:space-between}
  .pub-filter{flex-direction:column;align-items:stretch}.pub-filter>*{width:100%}
  .pub-filter .btn{width:100%}
  .sgc{min-height:150px}
  .cm-grid,.dl-grid{grid-template-columns:1fr}
  .cm-h{flex-wrap:wrap}
  .cf-tiles{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){.rl-table{min-width:0!important}.rl-table td{min-width:0}.table-responsive:has(.rl-table){overflow:visible}}
@media(max-width:700px){.rl-coins{gap:2px}.rl-coins .coin{margin:2px 1px;font-size:.78rem;padding:2px 8px 2px 3px}.rl-coins .coin:before{width:17px;height:17px}.rl-table td[data-label="เหรียญ / เข้าร่วม"]:before{flex:0 0 100%;margin-bottom:2px}.rl-table td[data-label="เหรียญ / เข้าร่วม"]{flex-wrap:wrap;justify-content:flex-start!important}}
@media(max-width:700px){.pub-filter>.pf-search{flex:0 0 auto!important;width:100%;height:auto}.pub-filter>.form-select{flex:0 0 auto}}

/* ===== ป๊อปอัปเข้าสู่ระบบ ===== */
.login-pop{border:0;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(74,18,51,.4)}
.login-pop-x{position:absolute;top:14px;right:14px;z-index:5;width:2rem;height:2rem;border-radius:50%;background-color:rgba(255,255,255,.9)!important;opacity:1;padding:0}
.login-pop-top{text-align:center;color:#fff;padding:28px 24px 22px;background:linear-gradient(135deg,#f97316,#f43f5e 55%,#db2777);position:relative;overflow:hidden}
.login-pop-top:after{content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.14)}
.login-pop-top .brand-mark{position:relative;z-index:1;margin:0 auto 10px;background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.2)}
.login-pop-top .brand-mark img{width:100%;height:100%;object-fit:contain}
.login-pop-top .brand-mark i{color:#db2777}
.login-pop-top h5{position:relative;z-index:1;font-weight:800;margin:0 0 2px;line-height:1.35}
.login-pop-top p{position:relative;z-index:1;margin:0;font-size:.85rem;opacity:.95}
.login-pop-body{padding:22px 26px 24px;background:#fffaf6}
.login-pop-body .form-control{border-radius:14px}
.login-pop-body .input-group .form-control{border-radius:14px 0 0 14px}.login-pop-body .input-group .btn{border-radius:0 14px 14px 0}
.login-pop-top .brand-mark{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;overflow:hidden;font-size:2rem;padding:6px}

/* ===== ป๊อปอัปเข้าสู่ระบบ (ดีไซน์ใหม่) ===== */
#loginModal .modal-backdrop,.modal-backdrop.show{--bs-backdrop-opacity:.55}
.login-pop{border:0;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 34px 80px rgba(90,15,60,.5);font-family:"Noto Sans Thai Looped","Sarabun",sans-serif}
.login-pop-x{position:absolute;top:14px;right:14px;z-index:6;width:2.1rem;height:2.1rem;border-radius:50%;background-color:rgba(255,255,255,.92)!important;opacity:1;padding:0;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.login-pop-top{position:relative;overflow:hidden;text-align:center;color:#fff;padding:34px 24px 54px;background:linear-gradient(135deg,#ff8a1f 0%,#f43f5e 50%,#c026d3 100%)}
.login-pop-top:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-1px;height:34px;background:#fffaf6;border-radius:50% 50% 0 0/100% 100% 0 0}
.lp-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.16);animation:lpfloat 7s ease-in-out infinite}
.lp-orb.o1{width:170px;height:170px;right:-50px;top:-60px}.lp-orb.o2{width:90px;height:90px;left:-24px;top:40px;animation-delay:-2s}.lp-orb.o3{width:46px;height:46px;left:34%;bottom:26px;animation-delay:-4s;background:rgba(255,255,255,.2)}
@keyframes lpfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.lp-logo{position:relative;z-index:2;width:78px;height:78px;margin:0 auto 12px;border-radius:50%;background:#fff;display:grid;place-items:center;padding:7px;box-shadow:0 0 0 6px rgba(255,255,255,.28),0 14px 28px rgba(0,0,0,.25);animation:lpbob 4s ease-in-out infinite}
.lp-logo img{width:100%;height:100%;object-fit:contain;border-radius:50%}.lp-logo i{font-size:2.2rem;color:#db2777}
@keyframes lpbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.login-pop-top h5{position:relative;z-index:2;margin:0 0 6px;font-family:"Mitr","Noto Sans Thai Looped",sans-serif;font-weight:600;font-size:1.22rem;line-height:1.35;text-shadow:0 2px 8px rgba(120,20,60,.35)}
.login-pop-top p{position:relative;z-index:2;margin:0;display:inline-block;padding:3px 14px;border-radius:99px;background:rgba(255,255,255,.2);font-size:.82rem;font-weight:500}
.login-pop-body{position:relative;z-index:3;padding:6px 28px 26px;background:#fffaf6}
.lp-lbl{display:block;margin:12px 0 6px;font-family:"Mitr","Noto Sans Thai Looped",sans-serif;font-weight:500;font-size:.9rem;color:#6b1d44}
.lp-field{position:relative;display:flex;align-items:center;border-radius:16px;background:#fff;border:2px solid #fde1cf;box-shadow:0 3px 10px rgba(244,63,94,.07);transition:border-color .15s,box-shadow .15s}
.lp-field:focus-within{border-color:#f43f5e;box-shadow:0 0 0 4px rgba(244,63,94,.15)}
.lp-field>i{flex:0 0 46px;text-align:center;font-size:1.1rem;color:#f97316}
.lp-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:.8rem .8rem .8rem 0;font-size:1.02rem;font-family:inherit;color:#3b1230}
.lp-field input::placeholder{color:#b9a3b0}
.lp-eye{border:0;background:transparent;width:46px;align-self:stretch;color:#9a7b8a;border-radius:0 14px 14px 0}.lp-eye:hover{color:#db2777}
.lp-err{margin-top:8px;padding:9px 12px;border-radius:14px;background:#fff1f2;border:1px solid #fecdd3;color:#be123c;font-size:.86rem;font-weight:500}
.lp-btn{width:100%;margin-top:20px;border:0;border-radius:16px;padding:.85rem;font-family:"Mitr","Noto Sans Thai Looped",sans-serif;font-weight:500;font-size:1.12rem;color:#fff;cursor:pointer;position:relative;overflow:hidden;background:linear-gradient(120deg,#f97316 0%,#f43f5e 55%,#c026d3 100%);box-shadow:0 12px 24px rgba(244,63,94,.4),inset 0 -3px 0 rgba(0,0,0,.12);transition:transform .15s,filter .15s}
.lp-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}.lp-btn:active{transform:translateY(0)}
.lp-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);background-size:250% 100%;animation:mdlshine 3.4s ease-in-out infinite}
.lp-links{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;font-size:.86rem}
.lp-links a{color:#8a6b7c;text-decoration:none;font-weight:500}.lp-links a:hover{color:#db2777}
.lp-links .lp-reg{padding:4px 13px;border-radius:99px;background:#fff0f6;color:#c9246b;font-weight:700}.lp-links .lp-reg:hover{background:#fde1ee}
@media(prefers-reduced-motion:reduce){.lp-orb,.lp-logo,.lp-btn:after{animation:none}}

/* ฟุตเตอร์ชิดขอบล่างเสมอ แม้เนื้อหาหน้าสั้น */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>.container-fluid.py-4{flex:1 0 auto;width:100%}
body>.app-footer{margin-top:auto;flex-shrink:0}