@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');
  :root{
    --primary:#6b21a8;
    --primary-dark:#4c1d95;
    --primary-light:#a855f7;
    --glow:#c026d3;
    --bg:#faf5ff;
    --white:#ffffff;
    --gold:#d4af37;
    --silver:#a8a8a8;
    --bronze:#b08d57;
    --text:#2d1b40;
    --border:#e9d5ff;
    --radius:14px;
    --shadow:0 4px 20px rgba(107,33,168,0.12);
    --shadow-hover:0 14px 32px rgba(107,33,168,0.18);
  }
  *{box-sizing:border-box;}
  html,body,#app,button,input,select,textarea,table{font-family:'Prompt','Segoe UI','Sarabun',sans-serif;}
  body{
    margin:0; font-family:'Prompt','Segoe UI','Sarabun',sans-serif;
    background:linear-gradient(180deg,var(--bg) 0%, #ffffff 100%);
    color:var(--text);
  }
  #app{min-height:100vh; display:flex; flex-direction:column;}

  /* Top bar: Sticky Glassmorphism */
  .topbar{
    background:linear-gradient(90deg, rgba(76,29,149,.85), rgba(107,33,168,.85));
    backdrop-filter:blur(14px) saturate(170%);
    -webkit-backdrop-filter:blur(14px) saturate(170%);
    border-bottom:1px solid rgba(255,255,255,.14);
    color:var(--white); padding:8px 16px;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow:var(--shadow); position:sticky; top:0; z-index:50;
  }
  .topbar h1{font-size:1.15rem; margin:0; font-weight:600; letter-spacing:.2px;}
  .topbar h1 #sysNameLabel{display:flex;flex-direction:column;line-height:1.12;}
  .sys-title-main{font-size:1.08rem;font-weight:600;}
  .sys-title-sub{font-size:.72rem;font-weight:400;margin-top:4px;opacity:.9;}
  .topbar .sys-icon{margin-right:8px;}
  .login-menu{display:flex; align-items:center; gap:10px;}

  /* Buttons: Primary = gradient + smooth glow / Secondary(.ghost) = glass / .icon = circular */
  .btn{
    border:none; border-radius:10px; padding:9px 18px; font-size:.92rem;
    cursor:pointer; font-weight:600; color:#fff;
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 55%,var(--glow) 100%);
    box-shadow:0 3px 12px rgba(107,33,148,.28);
    transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, filter .2s ease, background .25s ease, border-color .25s ease;
  }
  .btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(192,38,212,.35); filter:brightness(1.03);}
  .btn:active{transform:translateY(0) scale(.97); box-shadow:0 3px 10px rgba(107,33,148,.28); transition-duration:.1s;}
  .btn:focus-visible{outline:2px solid var(--primary-light); outline-offset:2px;}
  .btn.outline{
    background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.55); color:#fff;
    backdrop-filter:blur(6px); box-shadow:none;
  }
  .btn.outline:hover{background:rgba(255,255,255,.22); border-color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.15); transform:translateY(-2px);}
  .btn.small{padding:6px 12px; font-size:.82rem;}
  .btn.danger{background:linear-gradient(135deg,#dc2626,#f43f5e); box-shadow:0 3px 12px rgba(220,38,38,.28);}
  .btn.danger:hover{box-shadow:0 10px 22px rgba(244,63,94,.35);}
  .btn.ghost{
    background:rgba(255,255,255,.55); color:var(--primary-dark);
    border:1.5px solid rgba(168,85,247,.4);
    backdrop-filter:blur(8px) saturate(160%); -webkit-backdrop-filter:blur(8px) saturate(160%);
    box-shadow:none;
  }
  .btn.ghost:hover{background:rgba(168,85,247,.14); border-color:var(--primary-light); box-shadow:0 6px 16px rgba(107,33,168,.12);}
  .btn.icon{
    width:38px; height:38px; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
  }
  .btn.icon.small{width:32px; height:32px; font-size:.85rem;}
  .btn:disabled{opacity:.6; cursor:not-allowed; transform:none!important; box-shadow:none!important; filter:none!important;}
  .team-color-text{font-weight:700;}
  .login-status{min-height:20px;margin-top:9px;text-align:center;color:#806b8d;font-size:.84rem;}
  .status-banner{padding:12px 16px;border-radius:10px;font-weight:600;margin-bottom:16px;font-size:.92rem;}
  .status-banner-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
  .status-banner-warning{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}

  main{flex:1; padding:24px; max-width:1200px; margin:0 auto; width:100%;}

  /* Cards: soft shadow + gentle lift on hover */
  .card{
    background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:20px 22px; margin-bottom:20px; border:1px solid var(--border);
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
  }
  .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(168,85,247,.35);}
  .card h2{margin-top:0; color:var(--primary-dark); font-size:1.2rem; display:flex; align-items:center; gap:8px;}
  @media(prefers-reduced-motion:reduce){
    .btn,.card{transition:none!important;}
  }

  /* Medal table */
  .medal-table{width:100%; border-collapse:collapse;}
  .medal-table th, .medal-table td{padding:10px 12px; text-align:center; border-bottom:1px solid var(--border);}
  .medal-table th{background:var(--bg); color:var(--primary-dark); font-size:.85rem;}
  .medal-table td.rank{font-weight:800; font-size:1.05rem;}
  .color-chip{display:inline-flex; align-items:center; gap:8px; font-weight:700;}
  .dot{width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.1);}
  .medal-count{font-weight:700;}
  .medal-count.gold{color:var(--gold);}
  .medal-count.silver{color:#6b6b6b;}
  .medal-count.bronze{color:var(--bronze);}

  /* Responsive Table: ตารางสรุปเหรียญรางวัล ปรับเป็นรูปแบบการ์ดบนจอมือถือแทนการบีบตาราง */
  .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .medal-table td[colspan]{text-align:center;}
  @media(max-width:600px){
    .medal-table{border:0; width:100%;}
    .medal-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;}
    .medal-table tbody tr{display:block; margin-bottom:10px; border:1px solid var(--border); border-radius:12px; padding:2px 12px; background:transparent;}
    .medal-table tbody tr td{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 2px; border-bottom:1px solid var(--border); text-align:right;}
    .medal-table tbody tr td:last-child{border-bottom:0;}
    .medal-table tbody tr td::before{content:attr(data-label); font-weight:700; font-size:.78rem; color:var(--primary-dark); text-align:left;}
    .medal-table tbody tr td[colspan]{display:block; text-align:center; padding:14px 2px;}
    .medal-table tbody tr td[colspan]::before{content:none;}
  }

  /* Tabs / nav */
  .tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px;}
  .tab-btn{
    padding:9px 16px; border-radius:10px 10px 0 0; border:1px solid var(--border);
    background:var(--white); cursor:pointer; font-weight:600; color:var(--primary-dark);
  }
  .tab-btn.active{background:var(--primary); color:#fff; border-color:var(--primary);}

  /* Forms */
  input, select, textarea{
    width:100%; padding:9px 11px; border:1.5px solid var(--border); border-radius:9px;
    font-size:.92rem; font-family:inherit; margin-bottom:10px; background:#fff;
  }
  input:focus, select:focus, textarea:focus{outline:none; border-color:var(--primary-light);}
  label{font-size:.82rem; color:var(--primary-dark); font-weight:600; margin-bottom:3px; display:block;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .pw-wrap{position:relative;}
  .pw-wrap .toggle-pw{position:absolute; right:10px; top:9px; cursor:pointer; font-size:.8rem; color:var(--primary);}

  table.data{width:100%; border-collapse:collapse; font-size:.88rem;}
  table.data th, table.data td{padding:8px 10px; border-bottom:1px solid var(--border); text-align:left;}
  table.data th{background:var(--bg); color:var(--primary-dark);}
  table.data tr:hover{background:#fbf5ff;}
  .badge{padding:2px 9px; border-radius:20px; font-size:.72rem; font-weight:700;}
  .badge.open{background:#dcfce7; color:#15803d;}
  .badge.closed{background:#fee2e2; color:#b91c1c;}
  .badge.checked{background:#dcfce7; color:#15803d;}
  .badge.unchecked{background:#f1f5f9; color:#64748b;}

  .login-box{max-width:380px; margin:60px auto; text-align:center;}
  .login-box .card{padding:32px;}
  .toast{
    position:fixed; bottom:20px; right:20px; background:var(--primary-dark); color:#fff;
    padding:12px 20px; border-radius:10px; box-shadow:var(--shadow); z-index:200; font-size:.9rem;
  }
  .news-item{border-bottom:1px solid var(--border); padding:12px 0;}
  .news-item img{max-width:100%; border-radius:10px; margin-top:8px;}
  .muted{color:#8b7398; font-size:.85rem;}
  .grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}

  .cert-preview{
    position:relative; width:100%; max-width:800px; aspect-ratio:1.414/1; margin:0 auto;
    background-size:cover; background-position:center; border:1px solid var(--border); border-radius:10px; overflow:hidden;
  }
  .cert-preview .cert-name{position:absolute; top:48%; left:0; right:0; text-align:center; font-size:2rem; font-weight:800; color:#3a0764;}
  .cert-preview .cert-event{position:absolute; top:62%; left:0; right:0; text-align:center; font-size:1.1rem; color:#4b0082;}

  .cert-url-row{display:flex; gap:8px; align-items:flex-start;}
  .cert-url-row input{flex:1;}
  .cert-url-row .btn{flex-shrink:0; white-space:nowrap;}
  #ctUrlTestResult{margin:8px 0;}
  .cert-test-ok{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .cert-test-ok img{height:60px; border-radius:6px; border:1px solid var(--border);}
  .cert-test-ok p{color:#1a7a3a; font-weight:600; margin:0;}
  .cert-test-fail{color:#c0392b; font-weight:600; margin:0;}

  @media(max-width:720px){
    .form-row{grid-template-columns:1fr;}
    main{padding:14px;}
  }
  .switch-row{display:flex;align-items:center;gap:8px;margin:10px 0;font-weight:500;color:var(--primary-dark);}
  .switch-row input[type="checkbox"]{width:16px;height:16px;}
</style>

<style>
/* ===== V47: หน้าจอโหลด (Boot Loader) + Skeleton Screen (รองรับ Light/Dark) ===== */
:root{
  --sk-base:#ece3fb; --sk-shine:rgba(255,255,255,.85);
  --boot-bg-1:#faf5ff; --boot-bg-2:#f1e4ff;
  --boot-text:#6b21a8;
}
@media(prefers-color-scheme:dark){
  :root{
    --sk-base:#332a4c; --sk-shine:rgba(255,255,255,.08);
    --boot-bg-1:#160f27; --boot-bg-2:#1f1638;
    --boot-text:#e2c9ff;
  }
  body{background:linear-gradient(180deg,#160f27 0%, #1b1330 100%); color:#ece3fb;}
  .card{background:#20182f; border-color:#3a2e57; color:#ece3fb;}
  .card:hover{box-shadow:0 14px 32px rgba(0,0,0,.4); border-color:rgba(192,132,252,.4);}
  .card h2{color:#e2c9ff;}
  .muted{color:#a892b8;}
  table.data th, .medal-table th{background:#251d3a;}
  input, select, textarea{background:#20182f; color:#ece3fb; border-color:#3a2e57;}
  .topbar{background:linear-gradient(90deg, rgba(46,16,101,.85), rgba(76,29,149,.85)); border-bottom-color:rgba(192,132,252,.18);}
  .btn.ghost{background:rgba(46,16,101,.4); color:#e9d5ff; border-color:rgba(192,132,252,.35);}
  .btn.ghost:hover{background:rgba(168,85,247,.22);}
}
@media(prefers-reduced-motion:reduce){
  .skeleton::after, .boot-logo, .boot-logo-ring, .boot-dot{animation:none!important;}
}

/* ---- หน้าจอโหลดหลักตอนเปิดระบบ (Boot Loader) ---- */
.boot-loader{
  position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--boot-bg-1) 0%, var(--boot-bg-2) 100%);
  transition:opacity .5s ease, visibility .5s ease; opacity:1; visibility:visible;
}
.boot-loader.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.boot-logo-wrap{position:relative; width:112px; height:112px; display:flex; align-items:center; justify-content:center;}
.boot-logo-ring{position:absolute; inset:0; border-radius:50%; border:2px solid var(--primary-light); opacity:0; animation:bootRing 2.3s ease-out infinite;}
.boot-logo-ring.d2{animation-delay:.75s;}
.boot-logo-ring.d3{animation-delay:1.5s;}
@keyframes bootRing{0%{transform:scale(.66);opacity:.5;}100%{transform:scale(1.6);opacity:0;}}
.boot-logo{width:64px; height:64px; border-radius:16px; object-fit:cover; position:relative; z-index:2; background:#fff;
  box-shadow:0 8px 26px rgba(107,33,168,.3); animation:bootPulse 2.4s ease-in-out infinite;}
@keyframes bootPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.boot-text{margin-top:22px; font-weight:600; color:var(--boot-text); font-size:1rem; display:flex; align-items:center; gap:4px;}
.boot-dot{width:5px; height:5px; border-radius:50%; background:var(--boot-text); display:inline-block; animation:bootDot 1.4s ease-in-out infinite;}
.boot-dot:nth-child(2){animation-delay:.18s;}
.boot-dot:nth-child(3){animation-delay:.36s;}
@keyframes bootDot{0%,80%,100%{opacity:.25; transform:translateY(0);}40%{opacity:1; transform:translateY(-3px);}}
.boot-skeleton{margin-top:36px; width:min(640px,86vw); display:flex; flex-direction:column; gap:10px;}
.boot-skeleton .sk-row{display:flex; gap:10px;}
.boot-skeleton .sk-row .skeleton{flex:1; height:60px;}

/* ---- ระบบ Skeleton Screen ที่ใช้ซ้ำได้ทั่วทั้งระบบ ---- */
.skeleton{position:relative; overflow:hidden; background:var(--sk-base); border-radius:10px;}
.skeleton::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--sk-shine), transparent);
  animation:skShine 1.6s ease-in-out infinite;
}
@keyframes skShine{100%{transform:translateX(100%);}}
.sk-line{height:12px; border-radius:6px; margin-bottom:8px;}
.sk-line.w-30{width:30%;} .sk-line.w-40{width:40%;} .sk-line.w-45{width:45%;}
.sk-line.w-60{width:60%;} .sk-line.w-80{width:80%;} .sk-line.w-100{width:100%;}
.sk-title{height:18px; width:38%; border-radius:6px; margin-bottom:14px;}
.sk-avatar{width:40px; height:40px; border-radius:50%; flex:0 0 auto;}
.sk-banner{width:100%; height:200px; margin-bottom:6px;}
.sk-card-list{display:flex; flex-direction:column; gap:14px;}
.sk-item-row{display:flex; align-items:center; gap:12px;}
.sk-item-row .sk-item-body{flex:1;}
.sk-table{width:100%; border-collapse:separate; border-spacing:0 8px;}
.sk-table td{padding:0 6px;}
.sk-table .skeleton{height:16px;}
.sk-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.sk-grid .skeleton{height:86px;}
</style>

<style>
/* Modern icon treatment */
.ui-icon{display:inline-block;vertical-align:middle;flex:0 0 auto;}
h2 .ui-icon{color:var(--primary-light);}
.btn,.tab-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.btn .ui-icon,.tab-btn .ui-icon{width:17px;height:17px;}
.top-user{display:inline-flex;align-items:center;gap:7px;margin-right:4px;font-size:.9rem;}
.top-role{color:#e9d5ff;}
.loading-card p{display:flex;align-items:center;gap:10px;}
.loading-dot{width:10px;height:10px;border-radius:50%;background:var(--primary-light);box-shadow:0 0 0 5px rgba(168,85,247,.12);animation:pulseDot 1.2s infinite;}
@keyframes pulseDot{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.15);opacity:1}}
.tabs{align-items:stretch;}
.tab-btn{gap:7px;}
.news-item b{font-size:1rem;}
@media(max-width:720px){
  .top-user{display:none;}
  .topbar{padding:10px 14px;}
  .topbar h1{font-size:1rem;}
  .login-menu{gap:6px;}
  .login-menu .btn{padding:6px 9px;}
}
</style>

<style>
.system-logo{width:26px;height:26px;object-fit:contain;border-radius:8px;background:#fff;padding:2px;margin-right:9px;vertical-align:middle;}
.topbar h1{display:flex;align-items:center;}
.site-footer{padding:18px 24px;text-align:center;color:#fff;font-size:.86rem;border-top:1px solid #6d28d9;background:linear-gradient(135deg,#5b21b6,#7c3aed);}
.rich-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px;border:1px solid var(--border);border-bottom:none;border-radius:9px 9px 0 0;background:#faf5ff;}
.tool-btn{min-width:36px;height:34px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--primary-dark);cursor:pointer;font-size:1rem;}
.tool-btn:hover{background:#f3e8ff;}
.tool-btn.italic{font-style:italic;}
.tool-btn.underline{text-decoration:underline;}
.color-tool{display:flex;align-items:center;gap:5px;margin:0 3px;font-size:.82rem;color:var(--primary-dark);font-weight:600;}
.color-tool input{width:36px;height:32px;padding:2px;margin:0;border:1px solid var(--border);cursor:pointer;}
.font-size-tool{width:auto;min-width:92px;margin:0;height:34px;padding:4px 8px;}
.rich-editor{min-height:150px;padding:12px;border:1.5px solid var(--border);border-radius:0 0 9px 9px;background:#fff;line-height:1.7;outline:none;white-space:normal;}
.rich-editor:focus{border-color:var(--primary-light);box-shadow:0 0 0 2px rgba(168,85,247,.08);}
.rich-editor:empty:before{content:attr(data-placeholder);color:#a18cab;pointer-events:none;}
.rich-news-content{margin-top:6px;line-height:1.75;}
.rich-news-content p,.rich-news-content div{margin:.25em 0;}
@media(max-width:720px){.topbar{padding:10px 12px}.topbar h1{font-size:.95rem}.system-logo{width:30px;height:30px}.login-menu{gap:5px}.login-menu .btn{padding:5px 8px;font-size:.76rem}.site-footer{font-size:.78rem;padding:14px 12px;}}
</style>

<style>
.news-published{margin-top:2px;font-size:.82rem;color:#8b7398;}
.news-order-buttons{display:flex;gap:5px;flex-wrap:wrap;}
.news-order-buttons .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none;}
</style>

<style>

/* ===== เมนูด่วนหน้าแรก ===== */
.home-quick-menu{margin-top:18px;}
.home-quick-grid{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:14px;align-items:stretch;}
.home-quick-card{min-height:118px;border:1.5px solid var(--primary);border-radius:22px;background:#fff;color:var(--primary-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 8px;cursor:pointer;transition:background .18s ease,transform .18s ease,box-shadow .18s ease,color .18s ease;}
.home-quick-card:hover,.home-quick-card:focus-visible{background:#f3e8ff;transform:translateY(-3px);box-shadow:0 8px 22px rgba(107,33,168,.16);outline:none;}
.home-quick-card .quick-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;margin-bottom:5px;color:var(--primary-dark);}
.home-quick-card .quick-icon .ui-icon{width:34px;height:34px;stroke-width:1.7;}
.home-quick-card strong{font-size:.96rem;font-weight:600;line-height:1.25;}
.home-quick-card span{font-size:.78rem;line-height:1.25;margin-top:4px;color:#5f4770;}
.home-detail-back{margin-bottom:14px;}
.home-detail-heading{margin-bottom:12px;}
.home-detail-heading h2{margin-bottom:2px;}
.home-detail-table{margin-bottom:18px;}
.home-detail-table .medal-total{font-weight:700;color:var(--primary-dark);}
@media(max-width:900px){.home-quick-grid{grid-template-columns:repeat(3,minmax(120px,1fr));}}
@media(max-width:560px){.home-quick-grid{grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px}.home-quick-card{min-height:110px}.sys-title-main{font-size:.95rem}.sys-title-sub{font-size:.64rem;}}

/* ===== แบนเนอร์หน้าแรกแบบสไลด์ ===== */
.home-banner{padding:10px;overflow:hidden;}
.banner-slider{position:relative;width:1024px;height:400px;max-width:100%;aspect-ratio:auto;overflow:hidden;border-radius:12px;background:#f3e8ff;margin:0 auto;}
.banner-slide,.banner-slide-link{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;visibility:hidden;transition:opacity .45s ease;}
.banner-slide{object-fit:cover;}
.banner-slide.active,.banner-slide-link.active{opacity:1;visibility:visible;z-index:2;}
.banner-slide-link img{width:100%;height:100%;object-fit:cover;display:block;}
.banner-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.86);color:var(--primary-dark);font-size:30px;line-height:1;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.15);}
.banner-nav.prev{left:14px}.banner-nav.next{right:14px}.banner-nav:hover{background:#fff;}
.banner-dots{position:absolute;bottom:12px;left:0;right:0;z-index:6;display:flex;justify-content:center;gap:7px;}
.banner-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.65);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25);}
.banner-dots button.active{background:#fff;transform:scale(1.25);}
.banner-caption{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:30px 16px 28px;color:#fff;font-weight:700;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none;}
.admin-banner-thumb{width:180px;height:70px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:#f3e8ff;}
@media(max-width:720px){.banner-slider{width:100%;height:auto;aspect-ratio:16/8;min-height:140px}.banner-nav{width:34px;height:34px;font-size:25px}.admin-banner-thumb{width:120px;height:55px}.banner-caption{font-size:.8rem;padding:24px 10px 22px;}}
</style>

<style>
.color-select-row{display:flex;align-items:center;gap:8px;}
.color-select-row select{flex:1;margin-bottom:10px;}
.color-swatch{width:34px;height:34px;min-width:34px;border-radius:9px;border:1px solid #d8c2e8;display:inline-block;background:#e5e7eb;box-shadow:inset 0 0 0 2px #fff;}
.custom-color-wrap{padding:10px 12px;margin:2px 0 10px;border:1px dashed var(--border);border-radius:10px;background:#fcf8ff;}
.custom-color-wrap input[type=color]{height:38px;padding:3px;cursor:pointer;}
</style>
<style>
.event-form-card .req{color:#dc2626}
.event-form-card{margin-bottom:18px}
.event-form-card select,.event-form-card input{min-height:40px}
</style>
<style>
/* ===== สถานะกำลังบันทึกข้อมูล ===== */
#savingOverlay{position:fixed;inset:0;z-index:99999;background:rgba(255,255,255,.62);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease;}
#savingOverlay.show{opacity:1;visibility:visible;pointer-events:auto;}
.saving-box{min-width:300px;max-width:calc(100vw - 40px);display:flex;align-items:center;gap:14px;padding:18px 22px;border:1px solid #e9d5ff;border-radius:16px;background:#fff;box-shadow:0 10px 35px rgba(76,29,149,.18);color:var(--primary-dark);}
.saving-box strong{display:block;font-size:1rem;margin-bottom:4px;}
.saving-box small{display:block;color:#806b8d;line-height:1.45;}
.saving-spinner{width:30px;height:30px;border-radius:50%;border:3px solid #eadcff;border-top-color:var(--primary-light);animation:savingSpin .75s linear infinite;flex:0 0 auto;}
@keyframes savingSpin{to{transform:rotate(360deg)}}
.color-help{margin:-4px 0 10px;font-size:.8rem;}
</style>
<style>
/* ===== ฟอร์มนักกรีฑาแบบใช้งานง่าย V15 ===== */
.athlete-form-card{padding:24px 28px;}
.athlete-basic-grid{display:grid;grid-template-columns:180px 1fr 1fr;gap:14px;align-items:end;}
.athlete-basic-grid label,.event-select-grid label{display:block;margin-bottom:7px;font-weight:600;color:var(--primary-dark);}
.athlete-basic-grid input,.athlete-basic-grid select,.event-select-grid select{width:100%;box-sizing:border-box;min-height:44px;}
.athlete-add-row{display:flex;align-items:center;gap:10px;margin:14px 0 18px;flex-wrap:wrap;}
.athlete-add-row .btn{margin:0;}
.pending-athlete-list{margin:0 0 18px;}
.pending-title{font-weight:700;color:var(--primary-dark);margin-bottom:7px;}
.pending-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;margin:5px 0;border:1px solid var(--border);border-radius:9px;background:#fcf8ff;}
.event-section-title{display:flex;align-items:baseline;gap:10px;margin:4px 0 10px;color:var(--primary-dark);}
.event-section-title b{font-size:1.05rem;}
.event-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.selected-event-list{display:flex;flex-wrap:wrap;gap:8px;min-height:42px;padding:9px 0 4px;}
.selected-event-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;background:#f1e3ff;color:var(--primary-dark);font-size:.9rem;line-height:1.35;}
.selected-event-chip button{border:0;background:transparent;color:var(--primary-dark);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;}
.form-actions{display:flex;gap:8px;align-items:center;margin-top:12px;}
.table-scroll{overflow-x:auto;}
@media(max-width:820px){.athlete-basic-grid{grid-template-columns:1fr 1fr;}.athlete-basic-grid>div:first-child{grid-column:1 / -1;}.event-select-grid{grid-template-columns:1fr;}}
@media(max-width:560px){.athlete-form-card{padding:18px;}.athlete-basic-grid{grid-template-columns:1fr;}.athlete-basic-grid>div:first-child{grid-column:auto;}.form-actions{flex-wrap:wrap;}}
</style>

<style>
/* ===== Modern topbar / mobile navigation ===== */
.desktop-nav-actions{display:flex;align-items:center;gap:10px;}
.mobile-menu-toggle{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.7);border-radius:12px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.12);}
.mobile-menu-toggle:hover{background:rgba(255,255,255,.2);}
.mobile-nav-panel{display:none;}
.btn .ui-icon,.tab-btn .ui-icon{stroke-width:2.15;}
.tab-btn{box-shadow:0 2px 8px rgba(76,29,149,.08);transition:.18s ease;}
.tab-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(76,29,149,.12);}
.status-switch-wrap{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.switch{position:relative;display:inline-block;width:44px;height:24px;margin:0;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s;box-shadow:inset 0 1px 3px rgba(0,0,0,.15);}
.slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.22);}
.switch input:checked + .slider{background:#22c55e;}
.switch input:checked + .slider:before{transform:translateX(20px);}
.status-text{font-size:.78rem;font-weight:700;}
.status-text.on{color:#15803d}.status-text.off{color:#b91c1c;}
@media(max-width:720px){
  .topbar{position:sticky;position:-webkit-sticky;top:0;z-index:1000;padding:10px 12px;overflow:visible;}
  .desktop-nav-actions{display:none!important;}
  .login-menu{display:flex!important;position:static;align-items:center;gap:0;}
  .mobile-menu-toggle{display:inline-flex!important;position:relative;z-index:1002;flex:0 0 42px;}
  .mobile-nav-panel{position:absolute;right:12px;top:calc(100% + 8px);z-index:1001;width:min(290px,calc(100vw - 24px));min-width:220px;max-height:calc(100vh - 80px);overflow:auto;padding:10px;display:flex!important;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--border);border-radius:15px;box-shadow:0 14px 35px rgba(76,29,149,.22);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;pointer-events:none;}
  .mobile-nav-panel.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
  .mobile-nav-panel .btn{width:100%;justify-content:flex-start;padding:11px 12px;background:var(--white);color:var(--primary-dark);border:1px solid var(--border);font-size:.88rem;}
  .mobile-nav-panel .btn.outline{border:1px solid var(--border);color:var(--primary-dark);background:var(--white);}
  .mobile-nav-panel .top-user{display:flex;padding:7px 8px 9px;margin:0;color:var(--primary-dark);border-bottom:1px solid var(--border);}
  .mobile-nav-panel .top-role{color:#806b8d;}
  .topbar h1{max-width:calc(100% - 55px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  table.data{min-width:760px;}
  .card{padding:17px;}
  main{padding:12px;}
}

/* ===== สถานะเฉพาะปุ่มบันทึก ===== */
.btn.is-saving{opacity:.85!important;cursor:wait!important;transform:none!important;filter:none!important;}
.btn-saving-spinner{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:btnSavingSpin .7s linear infinite;flex:0 0 auto;}
@keyframes btnSavingSpin{to{transform:rotate(360deg)}}
</style>
<style>
/* ===== ปุ่มแสดงสถานะระหว่างประมวลผล ===== */
.btn:disabled{opacity:.62;cursor:not-allowed;transform:none!important;}
</style>

<style>
/* V18: แสดงนักกีฬาหลายคนภายใต้รายการแข่งขันเดียว */
.athlete-events-top-card { margin-bottom: 14px; }
.athlete-names-cell { min-width: 330px; vertical-align: top; }
.athlete-name-line { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(124,58,237,.10); }
.athlete-name-line:last-child { border-bottom:0; }
.athlete-name-text { font-weight:600; }
.athlete-inline-actions { white-space:nowrap; }
.athlete-inline-actions .btn.small { padding:5px 8px; }
@media (max-width:720px) {
  .athlete-name-line { align-items:flex-start; flex-direction:column; gap:6px; }
  .athlete-names-cell { min-width:260px; }
}
</style>

<style>
.registered-display-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}.registered-type-btn{border:1px solid rgba(124,58,237,.25);background:#fff;color:#4c1d95;border-radius:10px;padding:12px 14px;font:inherit;font-weight:700;cursor:pointer;transition:.15s}.registered-type-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(76,29,149,.10)}.registered-type-btn.active{background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff;border-color:#7c3aed;box-shadow:0 5px 16px rgba(124,58,237,.22)}
.registered-overview-top{margin-bottom:18px}.registered-overview-top h2{margin-bottom:18px}.registered-filters{display:flex;flex-direction:column;gap:16px;max-width:780px}.registered-filter-item label{display:block;margin-bottom:7px;font-weight:700}.registered-filter-item select{width:100%;min-height:52px;font-size:1.05rem}.registered-overview-help{margin:22px 0 8px;font-size:1.05rem}.registered-overview-list{display:flex;flex-direction:column;gap:22px}.registered-event-block{background:#fff;border:1px solid rgba(124,58,237,.22);border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(76,29,149,.06)}.registered-event-title{font-size:1.15rem;margin-bottom:10px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}.registered-event-title span{font-size:1rem;color:var(--muted,#6b5b73)}.registered-athletes-table{width:100%;border-collapse:collapse}.registered-athletes-table th,.registered-athletes-table td{text-align:center;vertical-align:middle}.registered-athletes-table th:nth-child(1),.registered-athletes-table td:nth-child(1){width:10%}.registered-athletes-table th:nth-child(2),.registered-athletes-table td:nth-child(2){width:40%;text-align:left}.registered-athletes-table th:nth-child(3),.registered-athletes-table td:nth-child(3){width:15%}.registered-athletes-table th:nth-child(4),.registered-athletes-table td:nth-child(4){width:18%}.registered-athletes-table th:nth-child(5),.registered-athletes-table td:nth-child(5){width:17%}.registered-color-badge{display:inline-block;font-weight:700;padding:3px 10px;border-radius:999px;background:#f3e8ff}.registered-athlete-name{font-weight:600}.registered-empty{text-align:center!important;padding:16px!important}.registered-actions{justify-content:center}.registered-print-options{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border:1px solid rgba(124,58,237,.18);border-radius:10px;background:#fcf8ff}.registered-print-options label{font-weight:700;color:var(--primary-dark)}.registered-print-options select{min-height:42px;min-width:300px;padding:7px 12px}.registered-print-hint{font-size:.85rem;color:#806b8d}
@media(max-width:720px){.registered-display-switch{grid-template-columns:1fr}.registered-event-block{padding:10px}.registered-athletes-table{font-size:.9rem}.registered-event-title{font-size:1rem}.registered-overview-help{font-size:.95rem}}
@media print {
  @page{size:A4 portrait;margin:10mm 10mm 10mm 25.4mm}
  html,body{background:#fff!important;margin:0!important;padding:0!important}
  body{font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;color:#000!important;font-size:15pt!important;line-height:1!important}
  .topbar,.tabs,.login-menu,footer,.registered-overview-top,#toastArea{display:none!important}
  #app,main,#mainArea,.card{box-shadow:none!important;border:0!important;background:#fff!important;margin:0!important;padding:0!important;max-width:none!important;width:100%!important}
  .registered-overview-list{display:block!important}
  .registered-event-block{border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0 0 4mm 0!important;break-inside:auto!important;page-break-inside:auto!important}
  .registered-event-title{font-size:15pt!important;line-height:1!important;margin:0 0 1.5mm 0!important;display:block!important}
  .registered-event-title strong{display:block!important;font-weight:700!important}
  .registered-event-title span{font-size:15pt!important;color:#000!important}
  #arContent,#arContent *{font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;font-size:15pt!important;line-height:1!important}
  .registered-event-title,.registered-event-title *{font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;font-size:15pt!important;line-height:1!important}
  .registered-athletes-table{width:100%!important;max-width:100%!important;table-layout:fixed!important;box-sizing:border-box!important;border-collapse:collapse!important;border-spacing:0!important;font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;font-size:15pt!important;line-height:1!important;margin:0 0 3.5mm 0!important}
  .registered-athletes-table th,.registered-athletes-table td{border:1px solid #000!important;padding:1.2mm 1.5mm!important;color:#000!important;background:#fff!important;line-height:1!important;overflow-wrap:anywhere!important;word-break:normal!important;box-sizing:border-box!important}
  .registered-athletes-table thead{display:table-header-group!important}
  .registered-athletes-table th{text-align:center!important;font-weight:700!important;white-space:normal!important}
  .registered-athletes-table td:nth-child(1),.registered-athletes-table th:nth-child(1){width:10%!important;text-align:center!important}
  .registered-athletes-table td:nth-child(2),.registered-athletes-table th:nth-child(2){width:38%!important;text-align:left!important}
  .registered-athletes-table td:nth-child(3),.registered-athletes-table th:nth-child(3){width:15%!important;text-align:center!important}
  .registered-athletes-table td:nth-child(4),.registered-athletes-table th:nth-child(4){width:19%!important;text-align:center!important}
  .registered-athletes-table td:nth-child(5),.registered-athletes-table th:nth-child(5){width:18%!important;text-align:center!important}
  /* ประเภทลานไม่มีช่องวิ่ง: ใช้ 4 คอลัมน์และขยายความกว้างให้เต็มหน้ากระดาษ */
  .registered-field-table td:nth-child(1),.registered-field-table th:nth-child(1){width:45%!important;text-align:left!important}
  .registered-field-table td:nth-child(2),.registered-field-table th:nth-child(2){width:17%!important;text-align:center!important}
  .registered-field-table td:nth-child(3),.registered-field-table th:nth-child(3){width:19%!important;text-align:center!important}
  .registered-field-table td:nth-child(4),.registered-field-table th:nth-child(4){width:19%!important;text-align:center!important}
  .registered-color-badge{padding:0!important;border:0!important;background:transparent!important;font-weight:700!important}
  .registered-athletes-table tr{break-inside:avoid!important;page-break-inside:avoid!important}
  .registered-print-options,.registered-actions{display:none!important}
  body.print-layout-1 .registered-event-block:not(:first-child){break-before:page!important;page-break-before:always!important}
  body.print-layout-4 .registered-event-block:nth-child(4n+1):not(:first-child){break-before:page!important;page-break-before:always!important}
}

</style>
<style>
/* ===== V28: จัดการช่องวิ่งนักกรีฑาประเภทลู่ ===== */
.track-lane-top-card{margin-bottom:16px}
.track-lane-event-picker{max-width:820px;margin-top:14px}
.track-lane-event-picker label{display:block;font-weight:700;color:var(--primary-dark);margin-bottom:7px}
.track-lane-event-picker select{width:100%;min-height:46px}
.track-lane-card{margin-bottom:18px}
.track-lane-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.track-lane-heading h2{margin-bottom:5px}
.track-lane-legend{font-size:.88rem;color:#806b8d;background:#fcf8ff;border:1px solid rgba(124,58,237,.16);border-radius:10px;padding:9px 12px;white-space:nowrap}
.track-lane-table{width:100%}
.track-lane-table th,.track-lane-table td{vertical-align:middle}
.track-lane-table td:first-child,.track-lane-table th:first-child{text-align:center}
.track-lane-athlete-name{font-size:1.02rem}
.track-lane-select{width:100%;min-height:42px;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--primary-dark);font:inherit;font-weight:600}
.track-lane-select:focus{outline:none;border-color:#9333ea;box-shadow:0 0 0 3px rgba(147,51,234,.10)}
@media(max-width:720px){
  .track-lane-heading{flex-direction:column}
  .track-lane-legend{white-space:normal}
  .track-lane-table{min-width:650px}
}
</style>
<style>
/* ===== V32: เจ้าหน้าที่ลงทะเบียน - คัดกรองประเภท/รุ่นอายุ + พิมพ์ A4 ===== */
.registrar-overview-top{margin-bottom:18px}
.registrar-overview-top h2{margin-bottom:18px}
.registrar-filters{max-width:780px}
.registrar-overview-list{display:flex;flex-direction:column;gap:22px}
.registrar-event-block{margin-bottom:0}
.registrar-athletes-table th,.registrar-athletes-table td{vertical-align:middle}
.registrar-age-cell,.registrar-checkin-cell,.registrar-action-cell{text-align:center!important}
.registrar-action-cell{white-space:nowrap}
@media(max-width:720px){
  .registrar-action-cell{white-space:normal}
  .registrar-athletes-table{min-width:760px}
  .registrar-overview-list{overflow-x:auto}
}
@media print{
  @page{size:A4 portrait;margin:10mm 10mm 10mm 25.4mm}
  .print-registrar .registrar-overview-top{display:none!important}
  .print-registrar #registrarOverviewContent{display:block!important}
  .print-registrar .registrar-event-block{margin-bottom:4mm!important}
  .print-registrar .registered-event-title{font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;font-size:15pt!important;line-height:1!important;margin-bottom:1.5mm!important}
  .print-registrar .registered-event-title span{font-size:15pt!important}
  .print-registrar .registered-color-badge{background:transparent!important;border:0!important;padding:0!important}
  body.print-layout-2 .registrar-event-block:nth-child(2n+1):not(:first-child){break-before:page!important;page-break-before:always!important}
  body.print-layout-3 .registrar-event-block:nth-child(3n+1):not(:first-child){break-before:page!important;page-break-before:always!important}
  body.print-layout-4 .registrar-event-block:nth-child(4n+1):not(:first-child){break-before:page!important;page-break-before:always!important}
  body.print-layout-1 .registrar-event-block:not(:first-child){break-before:page!important;page-break-before:always!important}
}
</style>
<style>
@media print{
  /* รองรับการเลือก 2 หรือ 3 รายการแข่งขันต่อหน้าในหน้าผู้ดูแลด้วย */
  body.print-layout-2 .registered-event-block:nth-child(2n+1):not(:first-child){break-before:page!important;page-break-before:always!important}
  body.print-layout-3 .registered-event-block:nth-child(3n+1):not(:first-child){break-before:page!important;page-break-before:always!important}
}
</style>
<style>
/* ===== V33: เช็คชื่อแบบ Batch + PDF ประเภทลู่มีช่องวิ่ง ===== */
.print-only-lane{display:none!important}
.registrar-attendance-edit-cell{width:90px;text-align:center!important}
.registrar-attendance-check{width:22px!important;height:22px!important;accent-color:#7c3aed;cursor:pointer;vertical-align:middle}
.registrar-attendance-head{width:90px}
.registrar-event-savebar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border:1px solid rgba(124,58,237,.16);border-radius:10px;background:#fcf8ff}
.registrar-save-status{margin-right:auto;color:#6b5b73;font-size:.92rem}
.registrar-save-attendance-btn:disabled{opacity:.7;cursor:wait;transform:none!important}
.registrar-event-block.is-saving{opacity:.88}
.registrar-event-block.is-saving .registrar-attendance-check{cursor:wait}
@media(max-width:720px){
  .registrar-event-savebar{justify-content:flex-start}
  .registrar-save-status{width:100%;margin-right:0}
}
@media print{
  .print-registrar .print-only-lane{display:table-cell!important}
  .print-registrar .registrar-attendance-head,.print-registrar .registrar-attendance-edit-cell{display:none!important}
  .print-registrar .registrar-action-head,.print-registrar .registrar-action-cell{display:none!important}
  .print-registrar .registrar-event-savebar{display:none!important}
  .print-registrar .registrar-athletes-table{table-layout:fixed!important;width:100%!important;max-width:100%!important}
  .print-registrar .registrar-field-table .print-only-lane{display:none!important}
}
</style>

<style>
/* ===== V34: เจ้าหน้าที่ลงทะเบียน - แก้ไขชื่อแบบ Modal ป้องกัน null element ===== */
.registrar-edit-modal{position:fixed;inset:0;z-index:100000;background:rgba(39,16,56,.38);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
.registrar-edit-dialog{width:min(720px,100%);background:#fff;border:1px solid rgba(124,58,237,.22);border-radius:16px;box-shadow:0 20px 60px rgba(55,25,75,.25);overflow:hidden}
.registrar-edit-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#faf5ff;border-bottom:1px solid rgba(124,58,237,.16)}
.registrar-edit-head h3{margin:0;color:#4c1d95;font-size:1.15rem}.registrar-edit-close{border:0;background:transparent;color:#6b21a8;font-size:28px;line-height:1;cursor:pointer;padding:2px 8px}
.registrar-edit-body{padding:20px}.registrar-edit-grid{display:grid;grid-template-columns:170px 1fr 1fr;gap:14px}.registrar-edit-grid label{display:block;font-weight:700;color:#4c1d95;margin-bottom:6px}.registrar-edit-grid input,.registrar-edit-grid select{width:100%;box-sizing:border-box;min-height:44px;border:1px solid #dfc8ff;border-radius:9px;padding:8px 11px;font:inherit;color:#2f1645;background:#fff}.registrar-edit-grid input:focus,.registrar-edit-grid select:focus{outline:none;border-color:#9333ea;box-shadow:0 0 0 3px rgba(147,51,234,.10)}
.registrar-edit-meta{margin-top:14px;padding:10px 12px;border-radius:9px;background:#faf5ff;color:#6b5b73;font-size:.95rem}.registrar-edit-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid rgba(124,58,237,.14);background:#fff}
@media(max-width:720px){.registrar-edit-grid{grid-template-columns:1fr}.registrar-edit-dialog{max-height:92vh;overflow:auto}}
</style>

<style>
/* ===== V35: แสดงช่องวิ่งในตารางรายการแข่งขัน + ปรับสัดส่วน PDF ===== */
/* หน้าจอ: ช่องวิ่งแสดงเฉพาะประเภทลู่ และจัดให้เป็นคอลัมน์แรก */
.registrar-lane-screen{display:table-cell!important;text-align:center!important;vertical-align:middle!important}
.registrar-track-table .registrar-lane-screen{width:9%!important;white-space:nowrap}
.registrar-track-table .registered-athlete-name{width:31%!important}
.registrar-field-table .registrar-lane-screen{display:none!important}
</style>

<style>
/* V37: เจ้าหน้าที่บันทึกผล */
.recorder-top-card,.recorder-card{margin-bottom:18px}
.recorder-event-picker{max-width:760px;display:flex;flex-direction:column;gap:7px}
.recorder-event-picker select{min-height:42px}
.recorder-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px}
.recorder-table input{width:100%;box-sizing:border-box;min-height:34px}
.recorder-table th,.recorder-table td{vertical-align:middle}
.recorder-athlete-name{min-width:190px}
.recorder-savebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding:12px;border:1px solid var(--border,#e9d5ff);border-radius:10px;background:#fbf7ff}
.recorder-save-status{flex:1;min-width:260px;color:#6b4b78}

/* V41: เจ้าหน้าที่บันทึกผล - แยกลู่/ลาน + สถานะผลครบ + PDF สรุปเหรียญ 9 ตาราง */
.recorder-page-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.recorder-page-tab{border:1px solid var(--border);background:#fff;color:var(--primary-dark);padding:10px 16px;border-radius:10px;font-family:inherit;font-weight:600;cursor:pointer}
.recorder-page-tab:hover{background:#f3e8ff}
.recorder-page-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.recorder-event-pickers{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:100%;}
.recorder-event-group{padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.recorder-event-group.track-group{border-left:4px solid #16a34a}
.recorder-event-group.field-group{border-left:4px solid #f59e0b}
.recorder-event-status{margin-top:4px}
.recorder-complete-card{background:#f0fdf4!important;border-color:#bbf7d0!important}
.recorder-summary-control{margin-bottom:18px}
.recorder-medal-print-area{background:#fff}
.recorder-medal-sheet{border:1px solid #e5d7f3;border-radius:12px;padding:14px;margin-bottom:14px;background:#fff}
.recorder-medal-sheet h2{font-size:1rem;margin:0 0 8px;color:#4c1d95}
.recorder-medal-table{width:100%;border-collapse:collapse;table-layout:fixed}
.recorder-medal-table th,.recorder-medal-table td{border:1px solid #222;padding:6px 7px;text-align:center;line-height:1.05}
.recorder-medal-table th:nth-child(1){width:10%}.recorder-medal-table th:nth-child(2){width:34%}.recorder-medal-table th:nth-child(3),.recorder-medal-table th:nth-child(4),.recorder-medal-table th:nth-child(5),.recorder-medal-table th:nth-child(6){width:14%}
.recorder-medal-table th{background:#f5effa}
.summary-color-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;border:1px solid #bbb}
.recorder-signature-block{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:28px;padding-top:12px;text-align:center;break-inside:avoid;page-break-inside:avoid}
.recorder-signature{font-size:15pt;line-height:1.2;color:#000}
.signature-line{margin-bottom:6px;white-space:nowrap}
@media(max-width:720px){.recorder-signature-block{grid-template-columns:1fr;gap:24px}}
@media(max-width:720px){.recorder-event-pickers{grid-template-columns:1fr}}
@media print{
  @page{size:A4 portrait;margin:10mm 10mm 10mm 25.4mm}
  body.print-recorder-medal-summary{background:#fff!important;color:#000!important;font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;font-size:15pt!important;line-height:1!important}
  body.print-recorder-medal-summary > *:not(#app){display:none!important}
  body.print-recorder-medal-summary .topbar,body.print-recorder-medal-summary main > *:not(#recorderPageContent),body.print-recorder-medal-summary .recorder-page-tabs,body.print-recorder-medal-summary .recorder-summary-control{display:none!important}
  body.print-recorder-medal-summary #recorderPageContent{display:block!important;padding:0!important;margin:0!important}
  body.print-recorder-medal-summary #recorderSummaryPreview{display:block!important}
  body.print-recorder-medal-summary .recorder-medal-print-area{display:block!important;width:100%!important}
  body.print-recorder-medal-summary .recorder-medal-sheet{border:0!important;border-radius:0!important;padding:0!important;margin:0 0 7mm 0!important;break-inside:avoid;page-break-inside:avoid}
  body.print-recorder-medal-summary .recorder-medal-sheet h2{font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;font-size:17pt!important;font-weight:700!important;margin:0 0 2mm!important;line-height:1!important;color:#000!important}
  body.print-recorder-medal-summary .recorder-medal-table{font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;font-size:15pt!important;line-height:1!important}
  body.print-recorder-medal-summary .recorder-medal-table th,body.print-recorder-medal-summary .recorder-medal-table td{padding:1.2mm 1.5mm!important;border:1px solid #000!important;line-height:1!important}
  body.print-recorder-medal-summary .recorder-signature-block{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18mm!important;margin-top:8mm!important;padding-top:4mm!important;break-inside:avoid!important;page-break-inside:avoid!important}
  body.print-recorder-medal-summary .recorder-signature{font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;font-size:15pt!important;line-height:1!important;color:#000!important}
  body.print-recorder-medal-summary .signature-line{margin-bottom:2mm!important;white-space:nowrap!important}
}
</style>

<style>
/* ===== พิมพ์เกียรติบัตรรายบุคคล (ดาวน์โหลดจากหน้า "พิมพ์เกียรติบัตร") ===== */
#certPrintArea{display:none;}
.cert-print-page{
  position:relative; width:100%; height:100%; overflow:hidden; background:#fff;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact;
}
/* ใช้ <img> จริงแทน CSS background-image เพราะเบราว์เซอร์ส่วนใหญ่ปิดการพิมพ์ "พื้นหลัง" โดยค่าเริ่มต้น
   ซึ่งเป็นสาเหตุหลักที่ทำให้แม่แบบเกียรติบัตรไม่แสดงผลเมื่อพิมพ์ / บันทึกเป็น PDF */
.cert-print-bg{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block;}
.cert-print-no{position:absolute; top:8%; right:6%; font-size:14pt; color:#000; font-family:'TH Sarabun New','TH Sarabun','Sarabun',sans-serif;}
.cert-print-textblock{position:absolute; top:38%; left:6%; right:6%; text-align:center;}
.cert-print-name{
  font-size:32pt; font-weight:700; line-height:1; margin:0; color:#000;
  font-family:'TH Sarabun New','TH Sarabun','Sarabun',sans-serif;
}
.cert-print-award{
  font-size:28pt; font-weight:700; line-height:1.05; margin:3mm 0 0; color:#000;
  font-family:'TH Sarabun New','TH Sarabun','Sarabun',sans-serif;
}

/* Responsive Table: ตารางรายชื่อผู้ชนะ/ดาวน์โหลดเกียรติบัตร ปรับเป็นรูปแบบการ์ดบนจอมือถือ */
.cert-winner-table td[colspan]{text-align:center;}
@media(max-width:600px){
  .cert-winner-table{border:0; width:100%;}
  .cert-winner-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;}
  .cert-winner-table tbody tr{display:block; margin-bottom:10px; border:1px solid var(--border); border-radius:12px; padding:2px 12px; background:transparent;}
  .cert-winner-table tbody tr td{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 2px; border-bottom:1px solid var(--border); text-align:right;}
  .cert-winner-table tbody tr td:last-child{border-bottom:0;}
  .cert-winner-table tbody tr td::before{content:attr(data-label); font-weight:700; font-size:.78rem; color:var(--primary-dark); text-align:left; flex-shrink:0;}
  .cert-winner-table tbody tr td[data-label="ดาวน์โหลด"]{justify-content:flex-end;}
  .cert-winner-table tbody tr td[data-label="ดาวน์โหลด"] .btn{width:auto;}
}

@media print{
  /* หน้ากระดาษเฉพาะสำหรับใบเกียรติบัตร: A4 แนวนอน ระยะขอบแคบเท่ากันทุกด้าน
     ขนาดกระดาษจริงถูกกำหนดแบบไดนามิกด้วย JS (แทรก <style> ชั่วคราวก่อนสั่งพิมพ์ แล้วลบออกหลังพิมพ์เสร็จ)
     เพื่อไม่ให้กระทบขนาดกระดาษของการพิมพ์ส่วนอื่นในระบบ (ดูฟังก์ชัน triggerCertPrint_ ใน JS.html) */
  body.print-certificate{background:#fff!important;}
  body.print-certificate > *:not(#certPrintArea){display:none!important}
  body.print-certificate #certPrintArea{display:block!important; width:100%; height:100vh;}
  body.print-certificate .cert-print-page{width:100%!important; height:100vh!important;}
}
</style>

<style>
/* ===== V43/V48: เจ้าหน้าที่ลงทะเบียน - พิมพ์ PDF รายการแข่งขันรายรายการ ===== */
.registrar-rank-print-head,
.registrar-rank-print-cell,
.registrar-stat-print-head,
.registrar-stat-print-cell{display:none!important}

@media print{
  /* ใช้พื้นที่พิมพ์ A4 แนวตั้ง ขอบซ้าย 2.54 ซม. ขอบอื่นเท่าเดิม */
  @page{size:A4 portrait;margin:10mm 10mm 10mm 25.4mm}

  body.print-registrar{
    background:#fff!important;
    color:#000!important;
    font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;
    font-size:15pt!important;
    line-height:1!important;
    margin:0!important;
    padding:0!important;
  }

  body.print-registrar #registrarOverviewContent{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  body.print-registrar .registrar-overview-list{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  body.print-registrar .registrar-event-block{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:0 0 4mm 0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    break-inside:auto!important;
    page-break-inside:auto!important;
  }

  /* พิมพ์เฉพาะรายการที่กดปุ่ม พิมพ์ PDF */
  body.print-single-registrar .registrar-event-block{display:none!important}
  body.print-single-registrar .registrar-event-block.print-target-registrar-event{display:block!important}

  body.print-registrar .registered-event-title{
    display:block!important;
    width:100%!important;
    box-sizing:border-box!important;
    margin:0 0 1.5mm 0!important;
    padding:0!important;
    font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;
    font-size:15pt!important;
    line-height:1!important;
    color:#000!important;
  }
  body.print-registrar .registered-event-title strong{
    display:inline!important;
    font-size:16pt!important;
    font-weight:700!important;
  }
  body.print-registrar .registered-event-title span{
    font-size:15pt!important;
    color:#000!important;
  }

  /* ตารางต้องอยู่ภายในพื้นที่พิมพ์ 100% และเส้นตารางต้องไม่หลุดขอบ */
  body.print-registrar .registrar-athletes-table{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    border-spacing:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;
    font-size:15pt!important;
    line-height:1!important;
  }

  body.print-registrar .registrar-athletes-table th,
  body.print-registrar .registrar-athletes-table td{
    box-sizing:border-box!important;
    border:1px solid #000!important;
    padding:1.15mm 1.4mm!important;
    margin:0!important;
    color:#000!important;
    background:#fff!important;
    font-family:'TH Sarabun New','TH Sarabun',sans-serif!important;
    font-size:15pt!important;
    line-height:1!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }
  body.print-registrar .registrar-athletes-table thead{display:table-header-group!important}
  body.print-registrar .registrar-athletes-table tr{break-inside:avoid!important;page-break-inside:avoid!important}

  /* ประเภทลู่: 7 คอลัมน์ (ช่องวิ่ง/ชื่อ/สี/รุ่นอายุ/สถานะ/เข้าเส้นชัยที่/สถิติ) รวม = 100% */
  body.print-registrar .registrar-track-table .print-col-lane{width:6%!important}
  body.print-registrar .registrar-track-table .print-col-name{width:32%!important}
  body.print-registrar .registrar-track-table .print-col-color{width:10%!important}
  body.print-registrar .registrar-track-table .print-col-age{width:14%!important}
  body.print-registrar .registrar-track-table .print-col-checkin{width:16%!important}
  body.print-registrar .registrar-track-table .print-col-rank{width:10%!important}
  body.print-registrar .registrar-track-table .print-col-stat{width:12%!important}

  body.print-registrar .registrar-track-table .registrar-lane-screen,
  body.print-registrar .registrar-track-table .registered-athlete-name,
  body.print-registrar .registrar-track-table .registered-color-cell,
  body.print-registrar .registrar-track-table .registrar-age-cell,
  body.print-registrar .registrar-track-table .registrar-checkin-cell,
  body.print-registrar .registrar-track-table .registrar-rank-print-head,
  body.print-registrar .registrar-track-table .registrar-rank-print-cell,
  body.print-registrar .registrar-track-table .registrar-stat-print-head,
  body.print-registrar .registrar-track-table .registrar-stat-print-cell{
    box-sizing:border-box!important;
  }
  body.print-registrar .registrar-track-table .registrar-lane-screen{width:6%!important;text-align:center!important;white-space:nowrap!important}
  body.print-registrar .registrar-track-table .registered-athlete-name{width:32%!important;text-align:left!important}
  body.print-registrar .registrar-track-table .registered-color-cell{width:10%!important;text-align:center!important}
  body.print-registrar .registrar-track-table .registrar-age-cell{width:14%!important;text-align:center!important}
  body.print-registrar .registrar-track-table .registrar-checkin-cell{width:16%!important;text-align:center!important}
  body.print-registrar .registrar-track-table .registrar-rank-print-head,
  body.print-registrar .registrar-track-table .registrar-rank-print-cell{display:table-cell!important;width:10%!important;text-align:center!important}
  body.print-registrar .registrar-track-table .registrar-stat-print-head,
  body.print-registrar .registrar-track-table .registrar-stat-print-cell{display:table-cell!important;width:12%!important;text-align:center!important}

  /* ประเภทลาน: ไม่มีช่องวิ่ง และไม่มีคอลัมน์จัดการ/เช็คบันทึก — 6 คอลัมน์ รวม = 100% */
  body.print-registrar .registrar-field-table .print-col-name{width:36%!important}
  body.print-registrar .registrar-field-table .print-col-color{width:12%!important}
  body.print-registrar .registrar-field-table .print-col-age{width:16%!important}
  body.print-registrar .registrar-field-table .print-col-checkin{width:14%!important}
  body.print-registrar .registrar-field-table .print-col-rank{width:10%!important}
  body.print-registrar .registrar-field-table .print-col-stat{width:12%!important}
  body.print-registrar .registrar-field-table .registered-athlete-name{width:36%!important;text-align:left!important}
  body.print-registrar .registrar-field-table .registered-color-cell{width:12%!important;text-align:center!important}
  body.print-registrar .registrar-field-table .registrar-age-cell{width:16%!important;text-align:center!important}
  body.print-registrar .registrar-field-table .registrar-checkin-cell{width:14%!important;text-align:center!important}
  body.print-registrar .registrar-field-table .registrar-rank-print-head,
  body.print-registrar .registrar-field-table .registrar-rank-print-cell{display:table-cell!important;width:10%!important;text-align:center!important}
  body.print-registrar .registrar-field-table .registrar-stat-print-head,
  body.print-registrar .registrar-field-table .registrar-stat-print-cell{display:table-cell!important;width:12%!important;text-align:center!important}

  body.print-registrar .registrar-action-head,
  body.print-registrar .registrar-action-cell,
  body.print-registrar .registrar-attendance-head,
  body.print-registrar .registrar-attendance-edit-cell,
  body.print-registrar .registrar-event-savebar{display:none!important}

  /* ป้องกันข้อความ/องค์ประกอบภายในทำให้ตารางดันเกินขอบ */
  body.print-registrar .registrar-athletes-table th,
  body.print-registrar .registrar-athletes-table td{max-width:100%!important}
  body.print-registrar .registered-color-badge{padding:0!important;border:0!important;background:transparent!important}

  /* การพิมพ์แบบรายรายการไม่ต้องแบ่งหน้าตาม 1/2/3/4 รายการ */
  body.print-single-registrar .registrar-event-block.print-target-registrar-event{
    break-before:auto!important;
    page-break-before:auto!important;
    break-after:auto!important;
    page-break-after:auto!important;
  }
}
</style>
<style>
/* ===== หน้ากำหนดการแข่งขัน ===== */
.schedule-head{margin-bottom:14px}.schedule-head h2{margin-bottom:4px}.schedule-section{margin-bottom:18px}.schedule-section h2{font-size:1.05rem;margin-bottom:12px}.schedule-table{width:100%;table-layout:fixed}.schedule-table th,.schedule-table td{border:1px solid var(--border);padding:8px 9px;vertical-align:middle}.schedule-table th{text-align:center;background:#ede9fe}.schedule-table th:nth-child(1){width:10%}.schedule-table th:nth-child(2){width:14%}.schedule-table th:nth-child(3){width:46%}.schedule-table th:nth-child(4){width:14%}.schedule-table th:nth-child(5){width:16%}.schedule-table td:nth-child(1),.schedule-table td:nth-child(2),.schedule-table td:nth-child(4),.schedule-table td:nth-child(5){text-align:center}.schedule-table tbody tr:hover{background:#faf5ff}.schedule-table td{font-size:.88rem}.schedule-table-wrap{overflow-x:auto}
@media(max-width:720px){.schedule-table{min-width:680px}.schedule-section{padding:14px}.schedule-section h2{font-size:.98rem}}