:root{--blue:#139ee8;--blue-dark:#075d9b;--blue-soft:#eaf8ff;--pink:#ff4fa3;--pink-soft:#fff0f8;--yellow:#ffd85a;--ink:#12334a;--muted:#647887;--surface:#fff;--line:#d8edf8;--shadow:0 18px 50px rgba(12,100,156,.12);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:'Noto Sans Thai',sans-serif;color:var(--ink);background:linear-gradient(180deg,#f5fcff 0,#fff7fb 48%,#f7fcff 100%);min-height:100vh}a{text-decoration:none}.skip-link{position:fixed;top:-60px;left:1rem;background:#fff;padding:.75rem 1rem;z-index:9999;border-radius:10px}.skip-link:focus{top:1rem}.site-header{background:radial-gradient(circle at 15% 20%,rgba(255,79,163,.17),transparent 25%),radial-gradient(circle at 86% 8%,rgba(255,216,90,.22),transparent 22%),linear-gradient(135deg,#ebfaff,#fff6fb)}.brand-banner{display:flex;justify-content:center;align-items:center;gap:1.4rem;padding:1rem 0}.college-logo{object-fit:contain;filter:drop-shadow(0 10px 16px rgba(8,83,135,.12))}.brand-banner h1{font-size:clamp(1.35rem,3vw,2.25rem);font-weight:800;margin:.15rem 0;color:var(--blue-dark)}.brand-banner p{font-weight:700;color:var(--pink);margin:0}.brand-kicker{font-size:.72rem;letter-spacing:.12em;color:#4c86a9;font-weight:700}.live-clock{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;padding:.35rem .8rem;border:1px solid #cfeafb;border-radius:999px;background:rgba(255,255,255,.8);font-size:.83rem}.clock-divider{width:1px;height:16px;background:#c1dfef;margin:0 .25rem}.pvts-nav{background:linear-gradient(100deg,#087cc8,#14acec 58%,#268fe0);box-shadow:0 10px 30px rgba(6,89,145,.22);padding:.55rem 0}.navbar-brand{display:flex;align-items:center;gap:.5rem;color:#fff!important;font-weight:800}.navbar-brand img{border-radius:12px}.navbar-toggler{border:0;color:#fff;font-size:1.6rem}.nav-link{color:rgba(255,255,255,.9)!important;border-radius:12px;padding:.55rem .75rem!important;font-weight:600;font-size:.92rem}.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.18);color:#fff!important}.nav-actions{display:flex;align-items:center;gap:.6rem}.user-chip{display:flex;align-items:center;gap:.45rem;color:#fff;font-size:.85rem}.user-chip i{font-size:1.5rem}.user-chip span{display:flex;flex-direction:column;line-height:1.15}.user-chip small{opacity:.8;font-size:.68rem}.btn{border-radius:14px;font-weight:700;padding:.58rem 1rem;box-shadow:none!important}.btn-primary{background:linear-gradient(135deg,#078bd8,#16b4ee);border:0}.btn-pink{background:linear-gradient(135deg,#ff3e94,#ff72bd);border:0;color:#fff}.btn-pink:hover{color:#fff;filter:brightness(.96)}.btn-outline-primary{border-color:var(--blue);color:var(--blue)}.site-footer{margin-top:5rem;padding:2.5rem 0 1.5rem;background:linear-gradient(145deg,#e8f8ff,#fff0f8);border-top:1px solid #d9eef9}.footer-logo{object-fit:contain;max-width:100%;height:auto}.site-footer h2{font-weight:800;font-size:1.25rem;color:var(--blue-dark)}.site-footer p{color:var(--muted);font-size:.9rem}.footer-meta{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;color:#7190a3;font-size:.78rem}.install-pwa{position:fixed;right:1rem;bottom:1rem;border:0;border-radius:999px;background:var(--pink);color:#fff;font-weight:700;padding:.7rem 1rem;box-shadow:var(--shadow);z-index:1000}.hero{padding:3.5rem 0 2rem}.hero-copy{display:flex;flex-direction:column;justify-content:center}.eyebrow{display:inline-flex;align-items:center;align-self:flex-start;background:var(--pink-soft);color:#db287d;border-radius:999px;padding:.42rem .75rem;font-weight:800;font-size:.78rem;letter-spacing:.04em}.hero h2{font-size:clamp(2.1rem,5vw,4.6rem);font-weight:800;line-height:1.08;margin:1rem 0}.gradient-text{background:linear-gradient(100deg,var(--blue-dark),var(--blue),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-lead{font-size:1.05rem;color:var(--muted);line-height:1.85}.hero-image-wrap{position:relative}.hero-image{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:32px;box-shadow:0 24px 70px rgba(9,107,169,.25);border:7px solid rgba(255,255,255,.9)}.sticker{position:absolute;background:#fff;border-radius:18px;padding:.65rem .9rem;font-weight:800;box-shadow:0 10px 30px rgba(11,94,147,.18)}.sticker-one{left:-1rem;bottom:1.5rem;color:var(--pink);transform:rotate(-3deg)}.sticker-two{right:-.5rem;top:1.5rem;color:var(--blue);transform:rotate(3deg)}.metric-row{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.2rem 0}.metric-pill{background:#fff;border:1px solid var(--line);padding:.7rem 1rem;border-radius:16px;box-shadow:0 8px 24px rgba(8,107,169,.08)}.metric-pill strong{display:block;color:var(--blue-dark);font-size:1.2rem}.section-pad{padding:4rem 0}.section-heading{text-align:center;max-width:760px;margin:0 auto 2.2rem}.section-heading h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800}.section-heading p{color:var(--muted);line-height:1.8}.feature-card,.case-card,.panel,.auth-card,.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.feature-card{padding:1.35rem;height:100%;transition:.2s}.feature-card:hover,.case-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(11,108,167,.17)}.feature-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.35rem;background:var(--blue-soft);color:var(--blue);margin-bottom:1rem}.feature-card:nth-child(even) .feature-icon{background:var(--pink-soft);color:var(--pink)}.feature-card h3{font-size:1rem;font-weight:800}.feature-card p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.7}.image-section{border-radius:32px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}.image-section img{width:100%;height:100%;min-height:300px;object-fit:cover}.image-section-copy{padding:clamp(1.5rem,4vw,3.5rem)}.image-section-copy h2{font-weight:800}.auth-card{max-width:580px;padding:clamp(1.5rem,4vw,2.5rem);margin-top:3rem}.auth-icon{width:90px;height:90px;border-radius:22px;object-fit:cover;margin-bottom:1rem}.form-label{font-weight:700}.form-control,.form-select{border:1px solid #cde6f3;border-radius:14px;padding:.72rem .9rem}.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 .25rem rgba(19,158,232,.12)}.case-card{overflow:hidden;height:100%;transition:.2s}.case-card img{width:100%;height:190px;object-fit:cover}.case-card-body{padding:1.25rem}.case-age{display:inline-block;background:var(--pink-soft);color:#d72c7b;border-radius:999px;padding:.35rem .7rem;font-weight:800;font-size:.8rem}.case-card h3{font-weight:800;margin:.7rem 0 .35rem}.case-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;font-size:.8rem;color:var(--muted);margin:1rem 0}.page-hero{padding:2.7rem 0 1.5rem}.page-hero h2{font-weight:800;font-size:clamp(1.8rem,4vw,3rem)}.panel{padding:1.4rem}.stat-card{padding:1.25rem;height:100%;position:relative;overflow:hidden}.stat-card i{font-size:2rem;color:var(--blue)}.stat-card strong{font-size:1.8rem;display:block}.stat-card span{color:var(--muted);font-size:.85rem}.table{--bs-table-bg:transparent}.table thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:#54758a;border-bottom-width:1px}.badge{border-radius:999px;padding:.45rem .65rem}.simulation-shell{display:grid;grid-template-columns:280px 1fr;gap:1.25rem}.sim-sidebar{position:sticky;top:1rem;align-self:start}.step-nav{list-style:none;margin:0;padding:0}.step-nav li{display:flex;gap:.7rem;align-items:flex-start;padding:.68rem;border-radius:14px;color:var(--muted);font-size:.82rem}.step-nav .step-number{flex:0 0 29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#eaf5fa;color:#5b8197;font-weight:800}.step-nav li.active{background:var(--blue-soft);color:var(--blue-dark);font-weight:700}.step-nav li.done .step-number{background:#32c58a;color:#fff}.sim-content{min-width:0}.sim-step{display:none}.sim-step.active{display:block}.sim-image{width:100%;max-height:330px;object-fit:cover;border-radius:20px;margin-bottom:1.25rem}.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.option-card{display:block;border:2px solid #dceef7;border-radius:16px;padding:1rem;cursor:pointer;transition:.18s;background:#fff}.option-card:hover{border-color:#7bcdf5}.option-card:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}.option-card input{margin-right:.45rem}.progress{height:10px;border-radius:20px;background:#e1eff6}.progress-bar{background:linear-gradient(90deg,var(--blue),var(--pink))}.result-score{width:160px;height:160px;border-radius:50%;display:grid;place-items:center;margin:1rem auto;background:conic-gradient(var(--blue) var(--score),#e8f3f8 0);position:relative}.result-score:after{content:'';position:absolute;inset:14px;background:#fff;border-radius:50%}.result-score strong{z-index:1;font-size:2.2rem}.manual-content h2{font-weight:800;color:var(--blue-dark);margin-top:2rem}.manual-content h3{font-weight:800;font-size:1.12rem;margin-top:1.4rem}.manual-content p,.manual-content li{line-height:1.85;color:#435f71}.manual-content img{width:100%;border-radius:22px;margin:1rem 0;box-shadow:var(--shadow)}.print-only{display:none}
@media(max-width:991px){.brand-banner{align-items:center}.college-logo{width:100px;height:100px}.nav-actions{padding:.7rem 0}.simulation-shell{grid-template-columns:1fr}.sim-sidebar{position:static}.step-nav{display:grid;grid-template-columns:repeat(4,1fr)}.step-nav li{padding:.45rem;display:block;text-align:center}.step-nav li span:last-child{display:none}.step-nav .step-number{margin:auto}.navbar-collapse{padding-top:.8rem}}
@media(max-width:767px){.brand-banner{flex-direction:column;gap:.25rem}.brand-kicker{display:none}.hero{padding-top:2rem}.hero-copy{margin-bottom:1.5rem}.sticker{font-size:.75rem}.option-grid{grid-template-columns:1fr}.case-meta{grid-template-columns:1fr}.section-pad{padding:2.8rem 0}.page-hero{padding-top:2rem}}
@media print{.site-header,.site-footer,.no-print,.install-pwa{display:none!important}body{background:#fff;color:#000}.panel,.manual-content{box-shadow:none;border:0;padding:0}.print-only{display:block}.container{max-width:100%!important}.manual-content h2{break-after:avoid}.manual-content img{max-height:420px;object-fit:contain;box-shadow:none}.table{font-size:10pt}}