:root{
  --blue:#174ea6;
  --blue2:#246bfe;
  --red:#d91f2f;
  --gold:#c7972f;
  --dark:#0d1b3d;
  --muted:#667085;
  --soft:#f5f8ff;
  --white:#fff;
  --shadow:0 24px 70px rgba(13,27,61,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Sarabun',sans-serif;color:var(--dark);background:#fff;line-height:1.65}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:0 auto}
.top-strip{background:linear-gradient(90deg,var(--blue),var(--red));color:#fff;font-size:14px}
.strip-inner{height:38px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);z-index:20;border-bottom:1px solid rgba(23,78,166,.08)}
.nav-wrap{height:84px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:14px;min-width:280px}
.brand img{width:56px;height:56px;object-fit:contain;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.brand strong{display:block;font-size:20px;font-weight:800;color:var(--blue)}
.brand small{display:block;font-size:12px;color:var(--muted);margin-top:-4px}
.main-nav{display:flex;align-items:center;gap:26px;font-weight:600;color:#344054}
.main-nav a{position:relative;padding:8px 0}
.main-nav a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--blue2),var(--red));transition:.25s}
.main-nav a:hover:after{width:100%}
.nav-login{padding:11px 20px;border-radius:999px;background:var(--dark);color:#fff;font-weight:700;box-shadow:0 12px 30px rgba(13,27,61,.2)}
.hero-section{position:relative;overflow:hidden;padding:86px 0 76px;background:linear-gradient(135deg,#f8fbff 0%,#eef4ff 45%,#fff 100%)}
.hero-bg:before,.hero-bg:after{content:"";position:absolute;border-radius:50%;filter:blur(12px);opacity:.22}
.hero-bg:before{width:420px;height:420px;background:var(--blue2);right:-120px;top:-90px}
.hero-bg:after{width:320px;height:320px;background:var(--red);left:-120px;bottom:40px}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.pill{display:inline-flex;padding:8px 16px;border-radius:999px;background:#fff;color:var(--blue);font-weight:800;box-shadow:0 8px 24px rgba(23,78,166,.1);margin-bottom:18px}
.hero-content h1{font-size:clamp(38px,5vw,68px);line-height:1.08;margin:0 0 20px;font-weight:800;letter-spacing:-1.4px;color:#10265d}
.hero-content p{font-size:18px;color:#475467;max-width:700px;margin:0 0 28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:14px;font-weight:800;transition:.25s}
.btn-primary{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 16px 34px rgba(36,107,254,.26)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-outline{border:1px solid rgba(23,78,166,.22);background:#fff;color:var(--blue)}
.btn-light{background:#fff;color:var(--blue);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.hero-stats{display:flex;gap:16px;flex-wrap:wrap}
.hero-stats div{background:#fff;border:1px solid rgba(23,78,166,.08);border-radius:18px;padding:14px 20px;min-width:120px;box-shadow:0 12px 34px rgba(13,27,61,.06)}
.hero-stats b{display:block;font-size:24px;color:var(--red);line-height:1}
.hero-stats span{font-size:14px;color:var(--muted)}
.hero-card{background:rgba(255,255,255,.9);border:1px solid rgba(23,78,166,.1);border-radius:34px;padding:34px;box-shadow:var(--shadow);text-align:center;position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(90deg,var(--blue2),var(--red),var(--gold))}
.card-logo{width:110px;height:110px;margin:4px auto 16px;border-radius:28px;background:#fff;display:grid;place-items:center;box-shadow:0 16px 40px rgba(13,27,61,.12)}
.card-logo img{width:88px;height:88px;object-fit:contain}
.hero-card h2{font-size:30px;margin:0;color:var(--blue);font-weight:800}
.hero-card p{margin:4px 0 22px;color:var(--muted)}
.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.login-grid a{padding:18px 12px;border-radius:18px;background:var(--soft);font-weight:800;color:#153a83;border:1px solid rgba(23,78,166,.08);transition:.25s}
.login-grid a:hover{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;transform:translateY(-3px)}
.section{padding:84px 0}
.section-title{text-align:center;margin-bottom:34px}
.section-title span,.steps-text span{color:var(--red);font-weight:800}
.section-title h2,.steps-text h2{font-size:38px;line-height:1.2;margin:6px 0 0;font-weight:800;color:#10265d}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-card{background:#fff;border:1px solid #e8eefb;border-radius:26px;padding:28px;box-shadow:0 16px 46px rgba(13,27,61,.07);transition:.25s}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue2),var(--red));color:#fff;font-weight:900;margin-bottom:18px}
.service-card h3{margin:0 0 8px;font-size:21px;color:#10265d}
.service-card p{margin:0;color:var(--muted)}
.steps-section{background:var(--soft)}
.steps-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.steps-text p{color:var(--muted);font-size:17px}
.timeline{display:grid;gap:14px}
.timeline div{display:flex;align-items:center;gap:16px;padding:18px 22px;background:#fff;border-radius:22px;box-shadow:0 12px 30px rgba(13,27,61,.06)}
.timeline b{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--blue);color:#fff}
.timeline span{font-weight:800;color:#10265d}
.cta-section{padding:74px 0;background:#fff}
.cta-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:42px;border-radius:34px;background:linear-gradient(135deg,var(--blue),#10265d 55%,var(--red));color:#fff;box-shadow:var(--shadow)}
.cta-card h2{margin:0 0 6px;font-size:32px;line-height:1.25}
.cta-card p{margin:0;opacity:.9}
.footer{background:#081736;color:#d9e2ff;padding:24px 0}
.footer-inner{display:flex;justify-content:space-between;gap:16px;font-size:14px}
@media(max-width:980px){.main-nav{display:none}.hero-grid,.steps-wrap{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr 1fr}.hero-section{padding-top:54px}.hero-card{max-width:560px;margin:auto}}
@media(max-width:640px){.strip-inner,.footer-inner,.cta-card{flex-direction:column;text-align:center}.nav-wrap{height:auto;padding:14px 0}.brand{min-width:0}.brand strong{font-size:16px}.nav-login{display:none}.service-grid,.login-grid{grid-template-columns:1fr}.hero-content h1{font-size:36px}.section-title h2,.steps-text h2{font-size:30px}.cta-card{padding:28px}.hero-card{padding:24px}}


/* ===== Core System Pages ===== */

*{box-sizing:border-box}body{margin:0;font-family:'Noto Sans Thai',sans-serif;background:#f5f8ff;color:#172033}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 6vw;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid #e5ecf8}.brand{display:flex;align-items:center;gap:12px;color:#0d3b83;text-decoration:none;font-weight:800}.brand img{width:54px;height:54px;object-fit:contain}nav{display:flex;gap:10px;flex-wrap:wrap}nav a{padding:10px 14px;border-radius:999px;text-decoration:none;color:#1d3158;font-weight:700}nav a:hover,.btn{background:linear-gradient(135deg,#0b4fb3,#dd1f34);color:white!important}.hero{min-height:72vh;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:70px 7vw;background:radial-gradient(circle at 20% 10%,#dbeaff 0,transparent 30%),linear-gradient(135deg,#f7fbff,#fff)}.badge{display:inline-flex;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #e2eaf8;color:#0b4fb3;font-weight:800;box-shadow:0 12px 35px #0b4fb31a}h1{font-size:clamp(34px,5vw,64px);line-height:1.05;margin:18px 0;color:#101d35}p.lead{font-size:20px;color:#51617d;max-width:660px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}.btn{display:inline-block;padding:14px 22px;border-radius:16px;text-decoration:none;font-weight:800;border:0;cursor:pointer;box-shadow:0 18px 35px #0b4fb32b}.btn.secondary{background:white!important;color:#0b4fb3!important;border:1px solid #dce6f8}.hero-card,.card,.panel{background:rgba(255,255,255,.9);border:1px solid #e4ebf8;border-radius:28px;padding:28px;box-shadow:0 24px 80px #0b2d6b16}.hero-logo{width:160px;display:block;margin:0 auto 18px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:40px 7vw}.card h3{margin:0 0 8px;color:#0b4fb3}.container{max-width:1180px;margin:auto;padding:34px 18px}.form{display:grid;gap:14px}.form input,.form select,.form textarea{width:100%;padding:13px 14px;border-radius:14px;border:1px solid #d9e3f4;font:inherit}.table{width:100%;border-collapse:collapse;background:white;border-radius:18px;overflow:hidden}.table th,.table td{padding:12px;border-bottom:1px solid #edf1f8;text-align:left}.status{padding:5px 10px;border-radius:999px;background:#eef4ff;color:#0b4fb3;font-weight:800}.alert{padding:12px 14px;border-radius:14px;background:#fff3f3;color:#b00020;margin-bottom:14px}.ok{background:#f0fff6;color:#087a37}.footer{text-align:center;padding:30px;color:#66758f}@media(max-width:900px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.grid{grid-template-columns:1fr}.actions{flex-direction:column}.btn{text-align:center}}


.app-shell{padding:34px 0}.topbar .brand span{font-weight:800}.quick-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.quick-menu a{display:block;padding:18px;border-radius:18px;background:#fff;border:1px solid #e8eefb;font-weight:800;color:#174ea6;box-shadow:0 12px 30px rgba(13,27,61,.06)}.quick-menu a:hover{transform:translateY(-3px);background:linear-gradient(135deg,#246bfe,#174ea6);color:#fff}.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mini-stat{background:#fff;border:1px solid #e8eefb;border-radius:22px;padding:22px;box-shadow:0 16px 46px rgba(13,27,61,.07)}.mini-stat b{font-size:30px;color:#d91f2f}.mini-stat span{display:block;color:#667085}@media(max-width:900px){.quick-menu,.dashboard-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.quick-menu,.dashboard-grid{grid-template-columns:1fr}}
.alert{max-width:1180px;margin:18px auto;padding:14px 18px;border-radius:16px;background:#e8fff1;border:1px solid #b9f1cb;color:#0b6b34}.alert.error{background:#fff1f1;border-color:#ffcaca;color:#9b1111}.page{max-width:1180px;margin:30px auto;padding:0 18px}.panel{background:#fff;border:1px solid rgba(25,55,110,.12);box-shadow:0 20px 55px rgba(20,45,95,.08);border-radius:24px;padding:24px;margin-bottom:22px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.stat{background:linear-gradient(135deg,#fff,#f3f7ff);border:1px solid #dde8ff;border-radius:22px;padding:20px}.stat b{font-size:32px;color:#123c75;display:block}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}label{font-weight:700;color:#19345d}input,select,textarea{width:100%;border:1px solid #d8e2f1;border-radius:14px;padding:12px 14px;font-family:Sarabun,sans-serif;background:#fff}textarea{min-height:96px}.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:14px;padding:12px 18px;background:#123c75;color:white;text-decoration:none;font-weight:800;cursor:pointer}.btn.alt{background:#f1b434;color:#10223d}.btn.light{background:#eef4ff;color:#123c75}.btn.danger{background:#c62828}.table-wrap{overflow:auto}.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{text-align:left;color:#50627e;font-size:14px}.table td{background:#fff;padding:14px;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7}.table td:first-child{border-left:1px solid #edf1f7;border-radius:14px 0 0 14px}.table td:last-child{border-right:1px solid #edf1f7;border-radius:0 14px 14px 0}.badge{display:inline-block;padding:5px 10px;border-radius:99px;background:#eef4ff;color:#123c75;font-weight:800}.badge.red{background:#ffe8e8;color:#a60000}.badge.green{background:#e8fff1;color:#0b6b34}.badge.gold{background:#fff4d7;color:#8a5a00}.admin-menu{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.doc-a4{width:210mm;min-height:297mm;margin:20px auto;background:#fff;padding:18mm 15mm;box-shadow:0 20px 60px rgba(0,0,0,.14);font-family:'TH Sarabun New','Sarabun',sans-serif;font-size:9pt;color:#111}.doc-a4 h1,.doc-a4 h2{font-size:16pt;text-align:center;margin:0 0 10px}.doc-a4 table{width:100%;border-collapse:collapse}.doc-a4 th,.doc-a4 td{border:1px solid #333;padding:4px 6px}.doc-actions{max-width:210mm;margin:20px auto}.score-input{font-size:28px;font-weight:800;text-align:center}.warning-box{background:#ffebee;color:#b71c1c;border:1px solid #ffcdd2;border-radius:16px;padding:14px;font-weight:800;margin:10px 0}@media print{.top-strip,.site-header,.site-footer,.doc-actions,.no-print{display:none!important}body{background:#fff}.doc-a4{box-shadow:none;margin:0;width:auto;min-height:auto;padding:0;font-size:9pt}.page{margin:0;padding:0}.panel{box-shadow:none;border:none}}
/* V3 production extensions */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}.btn.small{padding:8px 12px;font-size:13px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}.badge.green{background:#dcfce7;color:#166534}.badge.red{background:#fee2e2;color:#991b1b}.badge.yellow{background:#fef3c7;color:#92400e}.badge.blue{background:#dbeafe;color:#1e40af}.print-sheet{background:#fff;color:#111;max-width:794px;min-height:1123px;margin:20px auto;padding:38px 42px;font-family:'TH Sarabun New','Sarabun',serif;font-size:9pt;line-height:1.25;border:1px solid #e5e7eb}.print-sheet h1,.print-sheet h2,.print-sheet h3{font-family:'TH Sarabun New','Sarabun',serif;color:#111;margin:0 0 8px}.print-sheet h1{font-size:16pt;text-align:center}.print-sheet h2{font-size:13pt;text-align:center}.print-sheet table{width:100%;border-collapse:collapse;margin:8px 0}.print-sheet th,.print-sheet td{border:1px solid #111;padding:3px 5px;vertical-align:top}.print-sheet .no-border td,.print-sheet .no-border th{border:0}.print-actions{max-width:794px;margin:10px auto;display:flex;gap:8px;justify-content:flex-end}.signature-zone{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;text-align:center}.filter-panel{background:rgba(255,255,255,.86);border:1px solid rgba(15,23,42,.08);border-radius:18px;padding:16px;margin:14px 0;box-shadow:0 10px 30px rgba(15,23,42,.06)}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.timeline{display:grid;gap:10px}.timeline .step{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px}.step .num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#1e3a8a;color:#fff;font-weight:800}.locked{opacity:.72;pointer-events:none}@media print{body{background:#fff}.site-header,.site-footer,.print-actions,.sidebar,.nav,.btn,.toolbar{display:none!important}.print-sheet{border:0;margin:0;max-width:none;min-height:auto;padding:0;font-size:9pt;box-shadow:none}.page-break{page-break-after:always}}@media(max-width:800px){.grid-2,.grid-3{grid-template-columns:1fr}.print-sheet{padding:24px 18px}}


/* =========================================================
   V4 PREMIUM ADMIN UI PATCH - Butter Studio / Standard Exam
   ========================================================= */
:root{--v4-navy:#07162f;--v4-navy2:#0b2552;--v4-blue:#2563eb;--v4-sky:#38bdf8;--v4-gold:#f5b942;--v4-red:#e11d48;--v4-card:rgba(255,255,255,.82);--v4-text:#0f172a;--v4-shadow:0 24px 80px rgba(7,22,47,.16)}
body{background:radial-gradient(circle at 8% -10%,rgba(37,99,235,.22),transparent 32%),radial-gradient(circle at 92% 8%,rgba(245,185,66,.18),transparent 30%),linear-gradient(180deg,#f8fbff 0%,#eef4ff 48%,#f8fbff 100%)!important;color:var(--v4-text)}
.site-header,.topbar{background:rgba(255,255,255,.78)!important;border-bottom:1px solid rgba(37,99,235,.13)!important;box-shadow:0 18px 50px rgba(15,23,42,.06);backdrop-filter:blur(22px) saturate(160%)}
.site-header .brand img,.topbar .brand img{width:58px;height:58px;border-radius:18px;background:white;box-shadow:0 14px 34px rgba(37,99,235,.16)}
.site-header .brand strong,.topbar .brand span,.brand strong{color:var(--v4-navy2)!important;letter-spacing:-.2px}.main-nav a,nav a{color:#22395f!important;border:1px solid transparent;transition:.22s ease}.main-nav a:hover,nav a:hover{background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(56,189,248,.12))!important;border-color:rgba(37,99,235,.18);color:var(--v4-blue)!important;transform:translateY(-1px)}.nav-login{background:linear-gradient(135deg,var(--v4-navy2),var(--v4-blue))!important;box-shadow:0 16px 40px rgba(37,99,235,.24)!important}.page,.container{position:relative}
.admin-menu{position:relative;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:12px!important;padding:16px!important;margin:0 0 26px!important;border-radius:28px;background:linear-gradient(135deg,rgba(7,22,47,.96),rgba(11,37,82,.92) 55%,rgba(37,99,235,.76)),radial-gradient(circle at 20% 0%,rgba(56,189,248,.28),transparent 34%);border:1px solid rgba(255,255,255,.16);box-shadow:var(--v4-shadow),inset 0 1px 0 rgba(255,255,255,.16);overflow:hidden}.admin-menu:before{content:"";position:absolute;inset:-60px auto auto -80px;width:240px;height:240px;border-radius:50%;background:rgba(56,189,248,.22);filter:blur(28px);pointer-events:none}.admin-menu:after{content:"";position:absolute;right:-50px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:rgba(245,185,66,.20);filter:blur(26px);pointer-events:none}.admin-menu .btn.light{position:relative;z-index:1;min-height:64px!important;padding:12px 14px!important;justify-content:flex-start!important;gap:10px;border-radius:18px!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.08)!important;color:#f8fbff!important;box-shadow:none!important;backdrop-filter:blur(12px);font-size:15px;letter-spacing:.1px;transition:.22s ease}.admin-menu .btn.light:before{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);font-size:18px}.admin-menu .btn.light:nth-child(1):before{content:"📊"}.admin-menu .btn.light:nth-child(2):before{content:"👤"}.admin-menu .btn.light:nth-child(3):before{content:"💳"}.admin-menu .btn.light:nth-child(4):before{content:"🗓️"}.admin-menu .btn.light:nth-child(5):before{content:"🏅"}.admin-menu .btn.light:nth-child(6):before{content:"🧑‍🏫"}.admin-menu .btn.light:nth-child(7):before{content:"📝"}.admin-menu .btn.light:nth-child(8):before{content:"📄"}.admin-menu .btn.light:nth-child(9):before{content:"🎨"}.admin-menu .btn.light:nth-child(10):before{content:"📦"}.admin-menu .btn.light:nth-child(11):before{content:"🛡️"}.admin-menu .btn.light:nth-child(12):before{content:"🔁"}.admin-menu .btn.light:nth-child(13):before{content:"🔎"}.admin-menu .btn.light:nth-child(14):before{content:"⚙️"}.admin-menu .btn.light:hover{transform:translateY(-4px);background:linear-gradient(135deg,rgba(37,99,235,.95),rgba(56,189,248,.70))!important;border-color:rgba(255,255,255,.35)!important;box-shadow:0 18px 38px rgba(0,0,0,.22)!important}
.panel,.card,.mini-stat,.stat,.filter-panel,.hero-card{background:var(--v4-card)!important;border:1px solid rgba(255,255,255,.68)!important;border-top-color:rgba(255,255,255,.92)!important;box-shadow:0 24px 70px rgba(15,23,42,.10)!important;backdrop-filter:blur(18px) saturate(140%)}.panel h1,.panel h2,.panel h3,.page h1,.page h2,.card h3{color:var(--v4-navy2)!important;letter-spacing:-.4px}.stat,.mini-stat{position:relative;overflow:hidden}.stat:before,.mini-stat:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--v4-blue),var(--v4-sky),var(--v4-gold))}.stat b,.mini-stat b{color:var(--v4-blue)!important;font-size:34px!important}
.btn{border-radius:14px!important;border:0!important;background:linear-gradient(135deg,var(--v4-blue),var(--v4-navy2))!important;color:white!important;box-shadow:0 14px 34px rgba(37,99,235,.20)!important;transition:.22s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(37,99,235,.28)!important}.btn.alt{background:linear-gradient(135deg,var(--v4-gold),#f59e0b)!important;color:#111827!important}.btn.danger{background:linear-gradient(135deg,var(--v4-red),#991b1b)!important;color:white!important}.btn.light:not(.admin-menu .btn.light){background:#eef5ff!important;color:var(--v4-navy2)!important;border:1px solid rgba(37,99,235,.14)!important;box-shadow:none!important}
input,select,textarea,.form input,.form select,.form textarea{border:1px solid rgba(148,163,184,.32)!important;background:rgba(255,255,255,.86)!important;border-radius:16px!important;transition:.18s ease}input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(37,99,235,.66)!important;box-shadow:0 0 0 4px rgba(37,99,235,.10)!important}label{color:#263f66!important;font-weight:800!important}
.table-wrap{border-radius:24px;overflow:auto;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6)}.table{border-collapse:separate!important;border-spacing:0 10px!important;background:transparent!important}.table th{padding:12px 16px!important;color:#52657f!important;font-weight:800!important;font-size:13px!important}.table td{padding:16px!important;background:rgba(255,255,255,.92)!important;border-top:1px solid rgba(226,232,240,.9)!important;border-bottom:1px solid rgba(226,232,240,.9)!important}.table tbody tr{transition:.18s ease}.table tbody tr:hover td{background:#f8fbff!important;transform:translateY(-1px)}.badge,.status{border-radius:999px!important;font-weight:900!important;padding:6px 12px!important}.alert{border-radius:18px!important;box-shadow:0 16px 45px rgba(15,23,42,.08)}.doc-a4,.print-sheet{background:white!important;backdrop-filter:none!important}@media(max-width:900px){.admin-menu{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:22px;padding:12px!important}.admin-menu .btn.light{min-height:58px!important;font-size:14px}}@media(max-width:560px){.admin-menu{grid-template-columns:1fr}}

/* =========================================================
   V5 OFFICIAL GOVERNMENT PREMIUM UI - clean, formal, coherent
   ========================================================= */
:root{
  --gov-ink:#102033;
  --gov-navy:#102a56;
  --gov-blue:#1f5fbf;
  --gov-blue-2:#2d73d9;
  --gov-gold:#b8892f;
  --gov-red:#c92835;
  --gov-line:#d7e1ef;
  --gov-bg:#f3f6fb;
  --gov-card:#ffffff;
  --gov-muted:#6b7a90;
  --gov-shadow:0 18px 48px rgba(16,42,86,.10);
}
body{
  background:
    linear-gradient(180deg,#f7faff 0%,#eef3fa 100%)!important;
  color:var(--gov-ink)!important;
}
.top-strip{
  background:linear-gradient(90deg,var(--gov-navy),#153d78 58%,var(--gov-red))!important;
  border-bottom:3px solid var(--gov-gold);
}
.site-header,.topbar{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--gov-line)!important;
  box-shadow:0 10px 26px rgba(16,42,86,.08)!important;
  backdrop-filter:blur(14px) saturate(135%)!important;
}
.site-header .brand img,.topbar .brand img,.brand img{
  border-radius:50%!important;
  padding:4px!important;
  border:1px solid #e3eaf5!important;
  box-shadow:0 10px 24px rgba(16,42,86,.12)!important;
}
.site-header .brand strong,.brand strong{
  color:var(--gov-navy)!important;
  font-weight:900!important;
}
.brand small{color:#52627a!important;font-weight:700!important}
.main-nav a,nav a{
  color:#344861!important;
  font-weight:800!important;
  border-radius:10px!important;
}
.main-nav a:hover,nav a:hover{
  background:#f0f5fc!important;
  color:var(--gov-blue)!important;
  border-color:#d9e6f7!important;
  transform:none!important;
}
.nav-login{
  background:linear-gradient(135deg,var(--gov-navy),var(--gov-blue))!important;
  border-radius:12px!important;
  box-shadow:0 12px 24px rgba(31,95,191,.20)!important;
}
.page{
  width:min(1240px,94%)!important;
  margin:26px auto 60px!important;
}
.page > h1,.panel h1{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px!important;
  color:var(--gov-navy)!important;
  font-size:clamp(26px,3vw,38px)!important;
  font-weight:900!important;
  letter-spacing:-.5px!important;
}
.page > h1:before,.panel h1:before{
  content:"";
  width:8px;
  height:34px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--gov-blue),var(--gov-gold));
  display:inline-block;
}
.admin-menu{
  width:min(1240px,94%)!important;
  margin:24px auto 8px!important;
  padding:10px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  align-items:center!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border:1px solid #d9e3f2!important;
  box-shadow:0 16px 36px rgba(16,42,86,.10)!important;
  overflow:visible!important;
}
.admin-menu:before,.admin-menu:after{display:none!important}
.admin-nav-item,
.admin-menu .btn.light{
  position:relative!important;
  z-index:1!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:48px!important;
  padding:9px 13px!important;
  border-radius:13px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#28405e!important;
  box-shadow:none!important;
  font-size:14.5px!important;
  font-weight:900!important;
  letter-spacing:0!important;
  transition:.18s ease!important;
  white-space:nowrap!important;
}
.admin-menu .btn.light:before{display:none!important}
.admin-nav-item:hover,
.admin-menu .btn.light:hover{
  background:#eff6ff!important;
  color:var(--gov-blue)!important;
  border-color:#cfe1f8!important;
  transform:translateY(-1px)!important;
  box-shadow:0 10px 22px rgba(31,95,191,.10)!important;
}
.admin-nav-item.active{
  background:linear-gradient(135deg,var(--gov-navy),var(--gov-blue))!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.25)!important;
  box-shadow:0 14px 28px rgba(31,95,191,.22)!important;
}
.nav-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#eef4fb;
  border:1px solid #d9e5f2;
  color:var(--gov-blue);
  flex:0 0 32px;
}
.nav-icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.admin-nav-item.active .nav-icon{
  color:var(--gov-navy);
  background:#fff;
  border-color:rgba(255,255,255,.65);
}
.nav-text{line-height:1.1}
.panel,.card,.stat,.mini-stat,.filter-panel{
  background:var(--gov-card)!important;
  border:1px solid #dde6f2!important;
  border-radius:18px!important;
  box-shadow:var(--gov-shadow)!important;
  backdrop-filter:none!important;
}
.panel{padding:24px!important}
.grid{gap:16px!important}
.stat,.mini-stat{
  padding:20px!important;
  overflow:hidden!important;
}
.stat:before,.mini-stat:before{
  height:4px!important;
  background:linear-gradient(90deg,var(--gov-blue),var(--gov-gold))!important;
}
.stat span,.mini-stat span{color:var(--gov-muted)!important;font-weight:800!important}
.stat b,.mini-stat b{
  color:var(--gov-navy)!important;
  font-size:32px!important;
  line-height:1!important;
}
.btn{
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,var(--gov-navy),var(--gov-blue))!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(31,95,191,.18)!important;
  font-weight:900!important;
}
.btn:hover{transform:translateY(-1px)!important;box-shadow:0 14px 28px rgba(31,95,191,.22)!important}
.btn.light:not(.admin-menu .btn.light){
  background:#f4f7fb!important;
  color:var(--gov-navy)!important;
  border:1px solid #d9e3f0!important;
  box-shadow:none!important;
}
.btn.danger{background:linear-gradient(135deg,#ad1f2b,var(--gov-red))!important}
.btn.alt{background:linear-gradient(135deg,#9a6b20,var(--gov-gold))!important;color:#fff!important}
.table-wrap{
  border-radius:16px!important;
  border:1px solid #dce5f1!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(16,42,86,.06)!important;
}
.table{border-collapse:collapse!important;border-spacing:0!important;width:100%!important}
.table th{
  background:#f1f5fb!important;
  color:#39516e!important;
  font-size:13px!important;
  padding:13px 14px!important;
  border-bottom:1px solid #dce5f1!important;
}
.table td{
  background:#fff!important;
  padding:14px!important;
  border-top:0!important;
  border-bottom:1px solid #edf2f8!important;
}
.table tbody tr:hover td{background:#f9fbff!important;transform:none!important}
input,select,textarea,.form input,.form select,.form textarea{
  border-radius:10px!important;
  border:1px solid #ccd8e7!important;
  background:#fff!important;
  min-height:44px!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--gov-blue)!important;
  box-shadow:0 0 0 4px rgba(31,95,191,.10)!important;
}
.badge,.status{
  border-radius:999px!important;
  padding:5px 11px!important;
  font-size:12px!important;
  font-weight:900!important;
  border:1px solid rgba(0,0,0,.06)!important;
}
.badge.gold{background:#fff7df!important;color:#7a5114!important;border-color:#f1d48b!important}
.alert{border-radius:14px!important;border:1px solid #dbe6f5!important;background:#fff!important}
/* keep official documents plain and printable */
.doc-a4,.print-sheet{
  background:white!important;
  border-radius:0!important;
  box-shadow:0 10px 40px rgba(0,0,0,.08)!important;
  backdrop-filter:none!important;
}
@media(max-width:900px){
  .admin-menu{width:94%!important;padding:8px!important;gap:7px!important;border-radius:16px!important}
  .admin-nav-item{flex:1 1 calc(50% - 8px)!important;justify-content:flex-start!important}
  .page{margin-top:18px!important}
}
@media(max-width:560px){
  .admin-nav-item{flex-basis:100%!important}
  .nav-icon{width:30px;height:30px;flex-basis:30px}
  .panel{padding:18px!important}
}
@media print{
  .admin-menu{display:none!important}
  .page{width:auto!important;margin:0!important}
}
/* V6 production workflow extensions */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:18px 0}.doc-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;background:linear-gradient(145deg,#fff,#f4f7fb);border:1px solid rgba(15,43,88,.10);box-shadow:0 12px 28px rgba(15,43,88,.08);text-decoration:none;color:#13294b}.doc-card strong{font-size:18px}.doc-card span{color:#65758b}.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-weight:700;font-size:12px}.badge.ok{background:#e9f8ef;color:#106b37}.badge.danger{background:#ffecec;color:#9d1c1c}.btn.ghost{background:#fff;color:#193b70;border:1px solid rgba(25,59,112,.18)}
@media print{.no-print,.site-header,.top-strip,.admin-menu,.page-head .btn{display:none!important}.container{max-width:none!important}.card{box-shadow:none!important;border:0!important}.admin-page{padding:0!important}}
.workflow-line{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:18px 0}.workflow-step{background:#fff;border:1px solid rgba(15,45,90,.12);border-radius:18px;padding:18px;box-shadow:0 12px 28px rgba(15,45,90,.08)}.workflow-step b{display:block;color:#12315f}.workflow-step span{font-size:24px;font-weight:800;color:#0b5bd3}.badge{display:inline-flex;padding:6px 12px;border-radius:999px;font-weight:700}.badge.ok{background:#e8fff1;color:#087c3b}.badge.danger{background:#fff0f0;color:#b42318}.payment-box{text-align:center;background:linear-gradient(180deg,#fff,#f5f8ff)}
@media print{.print-area,.a4-doc{font-family:'TH Sarabun New','Sarabun',serif!important;font-size:9pt!important;line-height:1.25;color:#000}.no-print,.admin-shell,.admin-nav{display:none!important}}