:root{--ink:#111b32;--ink-soft:#536178;--navy:#102f63;--blue:#175cd3;--bright:#33a6ec;--mist:#f4f7fc;--line:#e2e9f4;--r:22px;--shadow:0 18px 55px rgba(15,36,68,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:"IBM Plex Sans Thai",Tahoma,Arial,sans-serif;color:var(--ink);background:#fff;font-size:15px;line-height:1.7}a{color:var(--blue)}a:hover{color:#174bb8}h1,h2,h3,h4,h5{font-weight:700;line-height:1.35;letter-spacing:-.02em}p{line-height:1.85}.text-secondary{color:var(--ink-soft)!important}
.btn{font-weight:600;transition:all .2s}.btn-primary{background:var(--blue);border-color:var(--blue);box-shadow:0 6px 14px rgba(36,99,236,.13)}.btn-primary:hover{background:#174fce;border-color:#174fce;transform:translateY(-1px)}.btn-outline-primary{color:var(--blue);border-color:#bad0ff}.btn-outline-primary:hover{background:var(--blue);border-color:var(--blue)}.form-control,.form-select{padding:.78rem 1rem;border-radius:12px;border-color:#dbe4f0;background-color:#fefefe}.form-control:focus,.form-select:focus{border-color:#7aa5fc;box-shadow:0 0 0 .22rem rgba(36,99,236,.11)}.form-label{font-weight:600;font-size:.91rem}.btn-lg{padding-top:.8rem;padding-bottom:.8rem}.badge{font-weight:600;padding:.5em .75em}
.navbar-glass{min-height:78px;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(218,227,242,.8);z-index:1050}.nav-wrap{max-width:1380px;padding:0 36px}.navbar-brand{font-size:1.12rem;font-weight:800;color:var(--ink)}.brand-mark{display:grid;place-items:center;width:40px;height:40px;background:linear-gradient(145deg,#2370fb,#143382);border-radius:13px;color:#fff;font-size:1.4rem}.brand-logo{height:42px;max-width:180px;object-fit:contain}.navbar .nav-link{color:#455269;font-weight:600;font-size:.92rem;padding:8px 12px!important}.navbar .nav-link:hover{color:var(--blue)}.dropdown-menu{border:1px solid var(--line);border-radius:15px;padding:10px;box-shadow:var(--shadow)}.dropdown-item{border-radius:9px;padding:9px 15px}.dropdown-item:hover{background:var(--mist);color:var(--blue)}
.home-hero{background:radial-gradient(ellipse at 78% 23%,#dbe9ff 0%,transparent 48%),linear-gradient(135deg,#fff 20%,#f3f7ff 95%);padding:110px 0 100px;overflow:hidden}.eyebrow{text-transform:uppercase;font-size:.78rem;letter-spacing:.16em;font-weight:800;color:var(--blue)}.home-hero .eyebrow{display:flex;align-items:center;gap:10px}.pulse{width:9px;height:9px;background:#2cbbad;border-radius:50%;box-shadow:0 0 0 5px #2cbbad1d}.display-heading{font-size:clamp(2.6rem,4.2vw,4.65rem);font-weight:800;letter-spacing:-.052em;line-height:1.17}.gradient-text{display:inline-block;background:linear-gradient(100deg,#1c68ec,#23b8d8);color:transparent;background-clip:text}.hero-desc{max-width:630px;font-size:1.1rem;color:#596983;line-height:1.9}.hero-points{display:flex;gap:20px;flex-wrap:wrap;margin-top:43px;color:#596983;font-size:.84rem}.hero-points i{color:#18b7a4;margin-right:5px}.hero-visual{height:410px;max-width:490px;margin:auto;position:relative;border-radius:40px;background:radial-gradient(circle at 50% 50%,#c6ddff 0,#dceafd 32%,#eef5ff 70%);isolation:isolate;overflow:hidden;box-shadow:0 34px 80px #1d61b51b}.hero-visual:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#5487ca43 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(120deg,#000,transparent 80%);z-index:-1}.hero-photo{width:100%;height:100%;object-fit:cover}.visual-orbit{position:absolute;inset:42px;border:1px dashed #7ca8ec;border-radius:50%;transform:rotate(-20deg)}.orbit-two{inset:95px;border:1px solid #b4cfff}.hero-center-icon{display:grid;place-items:center;position:absolute;left:50%;top:50%;width:170px;height:170px;transform:translate(-50%,-50%);border-radius:44px;background:linear-gradient(140deg,#2d7cf9,#142f76);color:white;font-size:6rem;box-shadow:0 26px 56px rgba(32,93,193,.25)}.floating-panel{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;padding:14px 18px;border:1px solid #e0eafe;box-shadow:var(--shadow);border-radius:18px;font-weight:800;font-size:.8rem}.floating-panel i{font-size:1.55rem;color:#277bec}.floating-panel small{font-size:.59rem;color:#8d9bb5;letter-spacing:.12em;display:block}.panel-top{top:60px;right:20px;transform:rotate(5deg)}.panel-bottom{bottom:57px;left:10px;transform:rotate(-5deg)}
.strip-metrics{padding:30px 0;background:#111f3e;color:white}.strip-metrics .col-4{display:flex;align-items:center;justify-content:center;gap:14px}.strip-metrics i{font-size:1.7rem;color:#58c7ec}.strip-metrics b{font-size:.83rem;letter-spacing:.1em}.strip-metrics span{font-size:.76rem;color:#9babc8}.section{padding:95px 0}.section-tint{background:var(--mist)}.section-heading{font-size:clamp(1.65rem,2.6vw,2.4rem);max-width:750px}.text-link{font-weight:700;text-decoration:none;white-space:nowrap}.text-link i{margin-left:8px}.project-card{overflow:hidden;border:1px solid #e5eaf3;border-radius:var(--r);box-shadow:0 3px 12px #1d31521a;transition:transform .25s,box-shadow .25s;background:white}.project-card:hover{transform:translateY(-6px);box-shadow:0 21px 48px #1e355123}.project-card .card-image{height:225px;background:#e7f0fe;overflow:hidden}.project-card .card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.project-card:hover img{transform:scale(1.045)}.placeholder-art{height:100%;display:grid;place-items:center;background:radial-gradient(circle at 30% 24%,#bfdbff,transparent 45%),linear-gradient(145deg,#e5efff,#d7e7fc);color:#6096e0;font-size:5.5rem}.card-desc{font-size:.88rem;min-height:54px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-more{display:inline-block;margin-top:20px;font-size:.82rem;color:var(--blue);font-weight:700}.card-more i{margin-left:5px}.empty-state{padding:70px 20px;text-align:center;background:#fff;border:1px dashed #cbd9ef;border-radius:20px;color:#7c89a0}.empty-state>i{font-size:2.4rem;display:block;color:#8eaddb;margin-bottom:12px}.small-empty{padding:42px 20px}.small-empty>i{font-size:1.7rem}.cta-band{padding:85px 0;background:linear-gradient(110deg,#102752,#1f59b8);color:#fff;position:relative;overflow:hidden}.cta-band:after{content:"";width:360px;height:360px;border:1px solid #ffffff24;border-radius:50%;position:absolute;right:-100px;bottom:-220px}.cta-band h2{font-size:clamp(1.6rem,3vw,2.7rem)}
.inner-hero{padding:85px 0;background:radial-gradient(ellipse at 80% 0%,#dce9ff 0%,transparent 45%),#f4f8ff;border-bottom:1px solid #e8eef7}.inner-hero h1{font-size:clamp(2.2rem,4.4vw,3.8rem);margin-bottom:0}.detail-image{width:100%;max-height:560px;object-fit:cover;border-radius:23px}.detail-body{font-size:1.07rem;line-height:2.05;overflow-wrap:anywhere}.info-panel,.form-panel,.data-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}.info-panel{padding:30px}.form-panel{padding:40px}.contact-sidebar{padding:16px 0}.contact-option{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:18px 4px;text-decoration:none;color:var(--ink)}.contact-option>i:first-child{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:#eaf1ff;color:var(--blue);font-size:1.25rem;flex-shrink:0}.contact-option span{flex:1}.contact-option b{display:block;font-size:.94rem}.contact-option small{display:block;color:var(--ink-soft);word-break:break-all}.contact-option>i:last-child{color:var(--blue)}.contact-option:hover{color:var(--blue)}.auth-panel{max-width:520px}.otp-input{letter-spacing:1rem;font-size:1.65rem;font-weight:700}.message{padding:19px 22px;background:#f3f6fc;border-radius:16px;margin-bottom:16px;border-left:3px solid #c3d5f0;white-space:normal;overflow-wrap:anywhere}.message-staff{background:#edf5ff;border-left-color:#2e74ed}.message-meta{color:#69809f;font-size:.75rem;font-weight:700;margin-bottom:8px}.notification-row{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding:16px 0}.notification-row:last-child{border-bottom:0}
.footer{background:#101d38;color:white}.footer a{display:block;text-decoration:none;color:#bac6da;font-size:.9rem;margin:7px 0}.footer a:hover{color:white}.footer-title{color:#fff;font-size:.91rem;font-weight:800;margin-bottom:15px}
.admin-body{background:#f5f7fb}.admin-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 78px)}.admin-side{background:#142343;color:#aabbd3;padding:32px 16px}.side-heading{font-size:.69rem;letter-spacing:.16em;font-weight:700;color:#8398b9;padding:0 18px 18px}.side-link{display:flex;gap:13px;align-items:center;padding:12px 17px;border-radius:13px;color:#c1cee3;font-size:.87rem;font-weight:600;text-decoration:none}.side-link i{font-size:1.1rem}.side-link:hover,.side-link.selected{background:#284372;color:#fff}.admin-main{max-width:1700px;padding-left:36px!important;padding-right:36px!important;min-width:0}.admin-title{font-size:2rem;letter-spacing:-.04em}.metric-card{display:block;position:relative;background:white;border-radius:19px;border:1px solid var(--line);padding:27px;text-decoration:none;color:var(--ink);box-shadow:0 6px 22px #14284c0a;transition:transform .2s}.metric-card:hover{transform:translateY(-3px)}.metric-icon{display:grid;place-items:center;width:43px;height:43px;background:#edf3ff;color:var(--blue);border-radius:12px;font-size:1.3rem}.metric-number{font-size:2.3rem;line-height:1.5;font-weight:800;margin-top:12px}.data-panel{overflow:hidden}.data-panel.p-4{overflow:visible}.data-panel .table{font-size:.88rem}.data-panel .table>thead{background:#f4f7fc}.data-panel .table>thead th{padding:16px 20px;font-size:.77rem;text-transform:uppercase;letter-spacing:.03em;color:#7b89a0;font-weight:700;white-space:nowrap;border-bottom:1px solid var(--line)}.data-panel .table tbody td{padding:17px 20px;border-color:#edf0f5}.data-panel .table a{text-decoration:none;font-weight:600}.list-mini{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.85rem;text-decoration:none;color:var(--ink)}.list-mini:hover{color:var(--blue)}.admin-preview{max-width:100%;max-height:210px;object-fit:contain;border-radius:14px;border:1px solid var(--line);padding:5px;background:#f7f9fd}
@media(max-width:1199px){.strip-metrics span{display:none}.nav-wrap{padding:0 22px}.home-hero{padding:75px 0}.hero-visual{height:370px}.section{padding:70px 0}.admin-shell{grid-template-columns:210px minmax(0,1fr)}.admin-main{padding-left:20px!important;padding-right:20px!important}}
@media(max-width:991px){.navbar-collapse{padding:15px 0}.navbar .nav-link{padding:12px 8px!important}.home-hero{padding:75px 0 70px}.hero-visual{height:340px;max-width:470px}.section{padding:65px 0}.admin-shell{display:block}.admin-side{display:flex;align-items:center;overflow-x:auto;gap:5px;padding:12px 15px}.side-heading{display:none}.side-link{flex-shrink:0;padding:10px 12px;white-space:nowrap}.admin-main{padding:30px 18px!important}}
@media(max-width:575px){.nav-wrap{padding:0 16px}.navbar-brand{font-size:1rem}.brand-mark{width:34px;height:34px}.home-hero{padding:54px 0}.display-heading{font-size:2.6rem}.hero-desc{font-size:1rem}.hero-points{gap:12px;margin-top:30px}.hero-visual{height:280px;border-radius:25px}.visual-orbit{inset:25px}.orbit-two{inset:65px}.hero-center-icon{width:115px;height:115px;border-radius:32px;font-size:4rem}.floating-panel{padding:9px 11px;font-size:.62rem}.panel-top{top:30px;right:7px}.panel-bottom{bottom:30px;left:7px}.strip-metrics{padding:19px 0}.strip-metrics .col-4{gap:6px;flex-direction:column}.strip-metrics i{font-size:1.35rem}.strip-metrics b{font-size:.55rem}.section{padding:50px 0}.inner-hero{padding:55px 0}.form-panel{padding:24px}.info-panel{padding:24px}.section-heading{font-size:1.7rem}.cta-band{padding:60px 0}.notification-row{display:block}.notification-row .d-flex{margin-top:12px}.admin-title{font-size:1.7rem}.metric-card{padding:19px}.metric-number{font-size:1.9rem}.data-panel .table>thead th,.data-panel .table tbody td{padding:12px 14px}}