@font-face{font-display:swap;font-family:Sarabun;font-style:normal;font-weight:400;src:url(/build/assets/sarabun-v16-thai-regular-DiS08Evt.woff2) format("woff2")}@font-face{font-display:swap;font-family:Sarabun;font-style:normal;font-weight:500;src:url(/build/assets/sarabun-v16-thai-500-y4ANXKbw.woff2) format("woff2")}@font-face{font-display:swap;font-family:Sarabun;font-style:normal;font-weight:700;src:url(/build/assets/sarabun-v16-thai-700-CSvx7yR3.woff2) format("woff2")}@font-face{font-display:swap;font-family:Sarabun;font-style:normal;font-weight:800;src:url(/build/assets/sarabun-v16-thai-800-BZ3R0kmF.woff2) format("woff2")}:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-secondary: #64748b;--color-text: #334155;--color-heading: #0f172a;--color-background: #f8fafc;--color-white: #ffffff;--color-border: #e2e8f0;--color-star-default: #cbd5e1;--color-star-filled: #f59e0b}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Sarabun,sans-serif;background-color:var(--color-background);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem}.main-content{padding-top:4rem;padding-bottom:4rem}.navbar{background-color:var(--color-white);padding:1rem 0;border-bottom:1px solid var(--color-border);box-shadow:0 2px 4px #0000000d;position:sticky;top:0;z-index:1000}.navbar .container{display:flex;justify-content:space-between;align-items:center}.navbar__brand{font-weight:800;font-size:1.5rem;color:var(--color-heading);text-decoration:none}.navbar__links{list-style:none;display:flex;gap:2rem}.navbar__link a{text-decoration:none;color:var(--color-text);font-weight:600;font-size:1rem;transition:color .2s ease}.navbar__link a:hover{color:var(--color-primary)}.navbar__hamburger{display:none;flex-direction:column;justify-content:space-around;width:2rem;height:2rem;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001}.navbar__hamburger span{width:2rem;height:.25rem;background:var(--color-heading);border-radius:10px;transition:all .3s linear;position:relative;transform-origin:1px}.navbar__hamburger.is-active span:nth-child(1){transform:rotate(45deg)}.navbar__hamburger.is-active span:nth-child(2){opacity:0;transform:translate(20px)}.navbar__hamburger.is-active span:nth-child(3){transform:rotate(-45deg)}.mobile-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fffffffa;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:fixed;top:0;left:0;width:100%;height:100vh;text-align:center;opacity:0;transform:translateY(-100%);visibility:hidden;transition:opacity .3s ease-in-out,transform .3s ease-in-out,visibility .3s;z-index:999}.mobile-menu.is-active{opacity:1;transform:translateY(0);visibility:visible}.mobile-menu__links{list-style:none}.mobile-menu__link{margin-bottom:2rem}.mobile-menu__link a{font-size:2rem;font-weight:700;color:var(--color-heading);text-decoration:none}@media (max-width: 767px){.navbar__links{display:none}.navbar__hamburger{display:flex}}.hero{background:linear-gradient(170deg,#f0f9ff,#fff);padding-top:4rem;padding-bottom:4rem;text-align:center}.hero__title{font-size:2.75rem;font-weight:800;color:var(--color-heading);line-height:1.2}.hero__school-name{margin-top:.75rem;font-size:1.5rem;font-weight:600;color:var(--color-primary)}.hero__subtitle{margin-top:1rem;font-size:1.25rem;max-width:48rem;margin-left:auto;margin-right:auto;color:var(--color-secondary)}.hero__cta-wrapper{margin-top:2rem}.btn{display:inline-block;background-color:var(--color-primary);color:var(--color-white);font-weight:700;font-size:1.125rem;padding:.75rem 1.5rem;border-radius:9999px;text-decoration:none;box-shadow:0 4px 6px -1px #0000001a;transition:all .3s ease;text-align:center;border:2px solid transparent}.btn:hover{background-color:var(--color-primary-dark);transform:scale(1.05)}.features{max-width:64rem;margin:0 auto 3rem;display:grid;gap:1.5rem;grid-template-columns:1fr}@media (min-width: 1024px){.features{grid-template-columns:repeat(3,1fr)}}.feature-card{background-color:var(--color-white);border:1px solid var(--color-border);padding:1.5rem;border-radius:1rem;text-align:center}.feature-card__number{font-size:2.5rem;font-weight:800;color:var(--color-primary);display:flex;align-items:center;justify-content:center;height:48px}.feature-card__title{margin-top:.5rem;font-weight:700;font-size:1.125rem;color:var(--color-heading)}.feature-card__text{font-size:1rem;color:var(--color-secondary)}.content-section__title{font-size:2.5rem;font-weight:700;text-align:center;color:var(--color-heading);margin-bottom:2rem}.book-preview-section{margin-bottom:3rem;text-align:center}.book-preview-wrapper{position:relative;display:inline-block;max-width:380px}.book-preview-image{max-width:100%;border-radius:1rem;box-shadow:0 25px 50px -12px #00000040}.countdown-banner{position:absolute;bottom:0;left:0;width:100%;background-color:#ef4444e6;color:var(--color-white);padding:.75rem;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.countdown-banner-upcoming{background-color:#f97316e6}.countdown-title{font-size:1rem;font-weight:700;margin-bottom:.25rem}.countdown-timer{display:flex;justify-content:center;gap:.75rem;font-weight:800}.countdown-item,.countdown-number{font-size:1.5rem}.countdown-label{font-size:.65rem;text-transform:uppercase}.content-blocks-wrapper{max-width:64rem;margin:3rem auto 0}.content-block{background-color:var(--color-white);border:1px solid var(--color-border);border-radius:1rem;padding:1.5rem;margin-bottom:1.5rem}.content-block__header{display:flex;align-items:center;margin-bottom:1rem}.content-block__icon{font-size:2.5rem;margin-right:1rem}.content-block__title{font-size:1.5rem;font-weight:700}.content-block__subtitle{font-size:1rem;color:var(--color-secondary)}.content-block__body{border-top:1px solid var(--color-border);padding-top:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr}@media (min-width: 768px){.content-block__body{grid-template-columns:1fr 1fr}}.content-block__topic-title{font-size:1.125rem;font-weight:700;margin-bottom:.5rem}.content-block__topic-list{list-style-position:inside}.content-block__topic-list li{margin-bottom:.25rem}.author-section{padding:3rem 0}.author-card{max-width:64rem;margin:0 auto;display:flex;gap:2rem;background-color:var(--color-white);padding:2rem;border-radius:1rem;box-shadow:0 20px 25px -5px #0000001a;flex-direction:column;align-items:center;text-align:center}@media (min-width: 1024px){.author-card{flex-direction:row;align-items:center;text-align:left;padding:3rem;gap:3rem}}.author-image{width:12rem;height:12rem;border-radius:9999px;object-fit:cover}.author-name{font-size:1.75rem;font-weight:700;margin-bottom:.5rem}.author-title{font-size:1.125rem;color:var(--color-primary);margin-bottom:1rem}.achievements-list{list-style:none;padding:0;text-align:left}.achievement-item{display:flex;align-items:flex-start;margin-bottom:.75rem}.achievement-icon{color:var(--color-star-filled);margin-right:.5rem;flex-shrink:0;margin-top:2px}.pricing-section{margin-top:3rem;text-align:center}.pricing-card{max-width:42rem;margin:0 auto 2rem;background-color:var(--color-white);padding:2rem;border-radius:1rem;box-shadow:0 20px 25px -5px #0000001a}.pricing-card__title{font-size:1.5rem;font-weight:700}.pricing-card__subtitle{margin-top:.5rem;color:var(--color-secondary)}.pricing-card__price-wrapper{margin:1rem 0}.price-display{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25rem}.original-price{font-size:2rem;text-decoration:line-through;color:#ef4444}.sale-price{font-size:4rem;font-weight:800;color:#028644}.pricing-card__price{font-size:4rem;font-weight:800}.pricing-card__price span{color:#4f46e5}@media (min-width: 768px){.sale-price:before{content:"ราคา ";font-size:4rem;font-weight:800;color:var(--color-text);vertical-align:baseline;margin-right:.5rem}}@media (max-width: 767px){.original-price{font-size:1.75rem}.sale-price{font-size:3.5rem}.pricing-card__price{font-size:0}.pricing-card__price span{font-size:3.5rem}.pricing-card__price:after{content:" บาท";font-size:3.5rem;font-weight:800;color:var(--color-text)}.author-section .container{padding-left:0;padding-right:0}.author-name__prefix,.author-name__main{display:block}.author-name{font-size:1.5rem}.author-title,.achievement-item{font-size:1.1rem}}.qr-code-wrapper{margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.qr-code-image{width:180px;height:180px;border-radius:1rem}.qr-code-text{font-weight:600}.rating-wrapper{margin:1.2rem 0 1.5rem}.rating-stars{display:flex;justify-content:center;gap:.5rem;margin-bottom:.75rem}.rating-star{width:2.5rem;height:2.5rem;cursor:pointer;color:var(--color-star-default);transition:all .2s ease}.rating-star:hover{transform:scale(1.1)}.rating-star.filled{color:var(--color-star-filled)}.rating-score{font-size:1rem;color:var(--color-secondary)}.sale-countdown-wrapper{background-color:#ef4444;color:var(--color-white);padding:.75rem;border-radius:.75rem;margin:1.5rem 0}.pricing-card__footer-text{margin-top:1.5rem;color:var(--color-secondary)}.footer{text-align:center;padding:2rem 1rem;margin-top:2rem;border-top:1px solid var(--color-border);color:var(--color-secondary);font-size:1rem}.footer p{margin:0}.footer a{color:var(--color-text);text-decoration:none;font-weight:600;margin-left:.5rem}.footer a:hover{color:var(--color-primary)}@media (max-width: 767px){.footer__rights{display:none}}.article-list{display:grid;grid-template-columns:1fr;gap:2rem;max-width:56rem;margin-left:auto;margin-right:auto}.article-card{background-color:var(--color-white);border:1px solid var(--color-border);border-radius:1rem;padding:2rem;box-shadow:0 4px 6px -1px #0000000d;transition:transform .3s ease,box-shadow .3s ease}.article-card:hover{transform:translateY(-5px);box-shadow:0 10px 15px -3px #0000001a}.article-card__title{font-size:1.75rem;font-weight:700;color:var(--color-heading);margin-bottom:.75rem}.article-card__title a{text-decoration:none;color:inherit}.article-card__title a:hover{color:var(--color-primary)}.article-card__meta{font-size:.9rem;color:var(--color-secondary);margin-bottom:1rem}.article-card__description{font-size:1.1rem;color:var(--color-text);margin-bottom:1.5rem;line-height:1.7}.article-card__readmore{text-align:right}.article-card__tags{margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.5rem}.article-card__tag{background-color:#eef2ff;color:#4338ca;padding:.25rem .75rem;border-radius:9999px;font-size:.8rem;font-weight:600;text-decoration:none}.article-container{max-width:48rem;margin:0 auto;background-color:var(--color-white);padding:2rem;border-radius:1rem;border:1px solid var(--color-border)}.article-header__title{font-size:3rem;font-weight:800;line-height:1.3;margin-bottom:1rem}.article-header__meta{font-size:1rem;color:var(--color-secondary);margin-bottom:1.5rem}.article-image{width:100%;height:auto;border-radius:.75rem;margin-bottom:2rem}.article-content{font-size:1.125rem;line-height:1.8}.article-content h2{font-size:1.75rem;font-weight:700;margin-top:2.5rem;margin-bottom:1rem;border-bottom:2px solid var(--color-primary);padding-bottom:.5rem}.article-content p{margin-bottom:1.5rem}.article-content ul{padding-left:1.5rem;margin-bottom:1.5rem}.article-content li{margin-bottom:.75rem}.article-content a{color:var(--color-primary);font-weight:600;text-decoration:none}.article-content a:hover{text-decoration:underline}.article-content ol{list-style-position:outside;padding-left:1.5rem;margin-bottom:1.5rem}.solution-box{background-color:#f0fdf4;border-left:4px solid #22c55e;padding:1rem;margin-top:1.5rem;margin-bottom:1.5rem;border-radius:.5rem}.solution-box h3{margin-top:0}.back-link-wrapper{margin-top:3rem;text-align:center}.back-link{font-weight:600;font-size:1.1rem}.back-link:hover{text-decoration:underline}.article-header__tags{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid var(--color-border)}.article-header__tag{background-color:#eef2ff;color:#4338ca;padding:.25rem .75rem;border-radius:9999px;font-size:.8rem;font-weight:600;text-decoration:none}.article-page-header{font-size:2.75rem}.hero__subtitle{font-size:1.25rem}@media (max-width: 767px){.article-card{padding:1.5rem}.article-card__title{font-size:1.8rem}.article-container{padding:1.5rem}.article-header__title,.article-page-header{font-size:2rem}.hero__subtitle{font-size:1rem}}.fab-container{position:fixed;bottom:2rem;right:1.5rem;display:flex;flex-direction:column-reverse;align-items:center;gap:1rem;z-index:1000}.fab{background:transparent;border:none;padding:0;cursor:pointer;width:60px;height:60px;box-shadow:0 4px 8px #00000026;border-radius:50%;transition:transform .2s ease}.fab:hover{transform:scale(1.1)}.fab svg{display:block;width:100%;height:100%}@media (min-width: 768px){.fab-container{display:none}}.pagination-wrapper{margin-top:2.5rem;display:flex;justify-content:center}ul.pagination{display:flex;list-style-type:none;padding:0;margin:0;border-radius:.5rem;overflow:hidden;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.pagination li a,.pagination li span{display:inline-block;padding:.75rem 1rem;border:1px solid #e5e7eb;margin-left:-1px;color:#374151;text-decoration:none;transition:background-color .2s;background-color:#fff;font-size:.875rem}.pagination li:first-child a,.pagination li:first-child span{margin-left:0}.pagination li a:hover{background-color:#f3f4f6}.pagination li.active span{background-color:#2563eb;color:#fff;border-color:#2563eb;cursor:default}.pagination li.disabled span{color:#9ca3af;background-color:#f9fafb;cursor:not-allowed}.article-card{position:relative;overflow:hidden;background-color:#fff;border-radius:.75rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;padding:1.5rem;margin-bottom:1.5rem;transition:transform .2s ease-in-out}.article-card:hover{transform:translateY(-5px)}.article-card__ribbon{position:absolute;top:-10px;right:-10px;width:150px;height:150px;display:flex;justify-content:center;align-items:center;overflow:hidden}.article-card__ribbon span{position:absolute;display:block;width:225px;padding:10px 0;background:linear-gradient(45deg,#b68900,#f0c14b,#e4a21a);color:#111;font-size:.875rem;font-weight:600;text-align:center;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 5px 10px #0003;transform:rotate(45deg) translateY(-20px)}
