html{scroll-behavior:smooth}body{margin:0;padding:0;font-family:var(--font-inter),system-ui,sans-serif;line-height:1.6;color:#334155;background-color:#fff}.container-wide{max-width:1400px;margin:0 auto;padding:0 1rem}.container-narrow{max-width:1200px;margin:0 auto;padding:0 1rem}header{position:sticky;top:0;z-index:50;background-color:hsla(0,0%,100%,.95);backdrop-filter:blur(8px);border-bottom:1px solid #e2e8f0}.hero-section{background:linear-gradient(135deg,#000,#1e3a8a 50%,#3b82f6);color:#fff;overflow:hidden}.btn-primary{background:linear-gradient(135deg,#0ea5e9,#3b82f6);color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s ease}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(14,165,233,.3)}h1,h2,h3,h4,h5,h6{font-family:var(--font-mitr),sans-serif;font-weight:600;line-height:1.2;margin:0 0 1rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}p{font-family:var(--font-noto-serif-thai),serif;line-height:1.7;margin-bottom:1rem}@media (max-width:768px){.container-narrow,.container-wide{padding:0 .75rem}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.25rem}}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}