/* ============================================================
   ACMS — ธีมโทนชมพู-ม่วง (pink / purple / blue) บนพื้นเทาอมม่วงอ่อน
   Display/Body: Prompt (Thai + Latin) 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:"Prompt","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:stretch;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.6rem; box-shadow:var(--shadow); position:sticky; top:1rem;
}
.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;
  }
  .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}
}

/* ---------- กันเนื้อหาล้นออกนอกจอ (โดยเฉพาะมือถือ) ---------- */
html,body{max-width:100%; overflow-x:hidden}
.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}
.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}