@font-face{font-family:HubThai;src:url('../assets/global/fonts/noto-sans-thai.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{--primary:#591eff;--secondary:#1738ff;--accent:#a335ff;--background:#fff;--surface:#f6f7ff;--text:#11104e;--muted:#616992;--border:#e0e5ff;--radius:12px;--shadow:0 5px 18px #4325d00d;--container:1200px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;font-family:HubThai,Tahoma,sans-serif;color:var(--text);background:linear-gradient(110deg,#fafcff,#fff 32%,#fff 80%,#fbfaff);font-size:15px;line-height:1.55}button,input,select{font:inherit}button,a,input{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.22}h2{font-size:27px;font-weight:800;letter-spacing:-.7px;color:var(--secondary)}h3{font-size:17px;font-weight:750}p{margin-bottom:12px}a:hover{color:var(--primary)}:focus-visible{outline:3px solid #b126ff;outline-offset:4px}.wrap{width:min(var(--container),calc(100% - 64px));margin-inline:auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid #9465ff;background:#fff;color:var(--primary);border-radius:30px;padding:10px 25px;font-weight:600;min-height:42px}.btn:hover{background:#f1ebff}.btn.primary{border:0;color:#fff;background:linear-gradient(110deg,#a834ff,#6925ff 45%,#1438ff);box-shadow:0 4px 12px #6b28ff28}.btn.small{font-size:13px;min-height:30px;padding:4px 16px}.eyebrow{display:inline-block;color:#5231ea;background:#eae5ff;border-radius:30px;padding:4px 14px;font-size:14px;font-weight:600}.muted{color:var(--muted)}.section{margin:25px 0}.section-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.section-head .copy{flex:1;min-width:0}.section-head p{font-size:14px;color:var(--muted);margin:3px 0 0}.section-head>a{font-size:14px;white-space:nowrap;color:var(--secondary)}.icon{width:34px;height:34px;fill:currentColor;color:var(--primary);flex:none}.section-head .icon{width:39px;height:39px}.gradient-text{background:linear-gradient(90deg,#103aff,#9726ff);background-clip:text;-webkit-background-clip:text;color:transparent}.panel{border:1px solid var(--border);border-radius:var(--radius);background:white;box-shadow:var(--shadow)}.card{border:1px solid var(--border);border-radius:7px;overflow:hidden;background:#fff;min-width:0;display:flex;flex-direction:column}.card>a:first-child{display:block;overflow:hidden}.card img{width:100%;aspect-ratio:1.75;object-fit:cover;transition:transform .2s}.card a:hover img{transform:scale(1.025)}.card .body{padding:12px 13px;flex:1;display:flex;flex-direction:column;gap:7px}.card p{color:var(--muted);font-size:13px;margin:0}.card .btn{margin-top:auto}.card .meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:8px}.grid{display:grid;gap:13px}.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.category-card{text-align:center}.category-card .body{padding:12px 10px}.category-card h3{font-size:17px}.brand-label{font:italic 800 25px Arial,sans-serif;color:#242084;min-height:36px;display:flex;align-items:center;justify-content:center}.brand-label.gold{color:#d69319}.quick-grid{display:grid;grid-template-columns:repeat(var(--quick-count,6),minmax(0,1fr));padding:10px;gap:10px;background:#ffffffed;border:1px solid var(--border);border-radius:16px;box-shadow:0 4px 18px #5142d60b;position:relative;margin-top:-21px;z-index:2}.quick-item{text-align:center;background:linear-gradient(135deg,#f3f6ff,#f9f7ff);border-radius:8px;padding:17px 9px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px}.quick-item .icon{width:42px;height:42px;margin-bottom:4px}.quick-item strong{font-size:16px;line-height:1.25}.quick-item span{font-size:12px;color:var(--muted);line-height:1.4}.hero{position:relative;background:#efecff;overflow:hidden}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 43%}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fdfcfffa 0%,#f7f3ffec 22%,#f2eaff71 42%,transparent 61%);pointer-events:none}.hero-inner{position:relative;z-index:1;min-height:370px;padding:18px 0 42px;display:flex;align-items:center}.hero-copy{max-width:510px;width:46%}.breadcrumb{font-size:13px;margin-bottom:14px;font-weight:600}.breadcrumb a{color:var(--secondary)}.hero h1{font-size:72px;letter-spacing:-2px;font-weight:900;margin:12px 0 4px;color:#18096a}.hero h1 .gradient-text{display:block}.hero h2{font-size:26px;letter-spacing:-.5px;color:#181052;margin-bottom:10px}.hero .description{max-width:440px;font-size:17px;line-height:1.5;margin-bottom:17px}.hero .actions{display:flex;gap:12px;flex-wrap:wrap}.hero-features{position:absolute;right:0;top:30px;display:grid;gap:10px;width:204px}.hero-feature{padding:11px 13px;background:#ffffffed;border:1px solid #e5d9ff;border-radius:10px;display:flex;gap:11px;align-items:center;box-shadow:0 3px 13px #503ad018}.hero-feature .icon{width:28px;height:28px}.hero-feature strong{font-size:14px;display:block}.hero-feature span{font-size:11px;color:var(--muted)}.home-hero .hero-inner{min-height:390px}.home-hero h1{font-size:52px;line-height:1.12;margin:18px 0 12px}.home-hero .hero-copy{width:47%;max-width:560px}.home-hero .description{font-size:21px}.search-form{display:flex;align-items:center;border:1px solid #cfd3ff;border-radius:40px;background:#fff;padding:4px;box-shadow:0 4px 12px #713cff14;width:100%;max-width:525px}.search-form input{border:0;outline:none;background:none;flex:1;width:0;padding:10px 18px;min-width:0;color:var(--text)}.search-form button{border:0;border-radius:50%;background:linear-gradient(120deg,#982aff,#133cff);width:45px;height:45px;display:grid;place-items:center;color:white}.search-form button .icon{width:23px;height:23px;color:white}.popular-search{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;margin-top:12px}.popular-search a{background:#e8e8ff;color:#3d39c4;border-radius:20px;padding:5px 10px}.carousel-shell{position:relative}.carousel-controls{display:flex;gap:9px;margin-left:4px}.carousel-controls button{width:35px;height:35px;background:#f7f8ff;border:1px solid var(--border);border-radius:12px;font-size:25px;color:var(--primary);line-height:1}.banner-pair{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin:18px 0 25px}.art-banner{position:relative;overflow:hidden;min-height:230px;border-radius:8px;background:#251056;color:white}.art-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.art-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#160434ef,#2007587f 50%,transparent)}.art-banner .banner-copy{position:relative;z-index:1;padding:25px;max-width:65%}.art-banner h2{color:#fff;font-size:32px;margin-bottom:12px}.art-banner p{font-size:14px}.check-list{list-style:none;padding:0;margin:10px 0 15px;display:grid;gap:6px;font-size:14px}.check-list li:before{content:'✓';display:inline-grid;place-items:center;margin-right:8px;background:#fff;color:#6230ed;border-radius:50%;width:16px;height:16px;font-size:11px;font-weight:800}.video-panel .banner-copy{max-width:100%}.play-button{position:absolute;z-index:2;left:50%;top:55%;transform:translate(-50%,-50%);height:65px;width:65px;border-radius:50%;border:3px solid #a7b0ff;background:linear-gradient(120deg,#9454ff,#0c3bff);color:white;font-size:25px;box-shadow:0 0 22px #9166ffb0}.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#f5f7ff;border-radius:8px;padding:18px 20px;gap:20px}.step{display:flex;align-items:center;gap:12px;position:relative}.step:not(:last-child):after{content:'›';position:absolute;right:-10px;color:#9094d7;font-size:30px}.step b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(120deg,#0359ff,#8818ff);color:white;font-size:26px;flex:none;box-shadow:0 0 0 5px #e9e8ff}.step strong{display:block;font-size:15px}.step span{display:block;font-size:12px;color:var(--muted);margin-top:3px}.info-pair{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin:18px 0}.info-box{position:relative;overflow:hidden;padding:19px 23px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(110deg,#fff,#f8f6ff);min-height:160px}.info-box h2{font-size:23px;display:flex;align-items:center;gap:12px}.info-box .check-list{position:relative;z-index:1;max-width:78%;grid-template-columns:1fr 1fr;font-size:13px;color:#404a86}.info-box .check-list li:before{background:#8030ff;color:white}.info-box>img{position:absolute;right:-9px;bottom:0;width:155px;height:150px;object-fit:cover;mix-blend-mode:multiply}.responsible .check-list{grid-template-columns:1fr;max-width:72%}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}.faq-grid details{border:1px solid var(--border);border-radius:6px;background:#f8faff;overflow:hidden;align-self:start}.faq-grid summary{list-style:none;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;line-height:1.5}.faq-grid summary:before{content:'⊙';font-size:13px;color:#666ed1}.faq-grid summary:after{content:'+';margin-left:auto;font-size:23px;color:var(--primary);line-height:1}.faq-grid details[open] summary:after{content:'−'}.faq-grid details p{padding:0 17px 15px 36px;font-size:14px;color:var(--muted);margin:0}.roadmap-layout{display:grid;grid-template-columns:1.65fr .9fr;gap:20px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.tabs button{border:1px solid var(--border);background:#f7f8ff;border-radius:30px;color:#5a6098;padding:7px 18px;font-size:13px}.tabs button[aria-selected=true]{background:linear-gradient(110deg,#aa2cff,#183cff);color:white;border-color:transparent}.roadmap{display:grid;grid-template-columns:repeat(22,1fr);grid-template-rows:repeat(6,20px);background:repeating-linear-gradient(0deg,transparent,transparent 19px,#dce7ff 19px,#dce7ff 20px),repeating-linear-gradient(90deg,transparent,transparent calc(100% / 22 - 1px),#dce7ff calc(100% / 22 - 1px),#dce7ff calc(100% / 22));border:1px solid var(--border);border-radius:8px;padding:8px;gap:0;min-height:138px}.roadmap i{display:block;border:2px solid #1c4eff;border-radius:50%;width:16px;height:16px;justify-self:center;align-self:center}.roadmap i.red{border-color:#ff3255}.roadmap i.green{border-color:#11b77f}.sample-note{font-size:12px;color:#6a6485;margin:7px 0 12px;padding:7px 12px;background:#f5f3ff;border-radius:7px}.match-card{border:1px solid var(--border);padding:12px 10px;border-radius:8px;background:#fff;min-width:0}.match-card .league{font-size:12px;text-align:center;color:var(--muted);margin-bottom:12px}.teams{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:12px;text-align:center}.teams span{flex:1;min-width:0}.teams b{font-size:22px;color:var(--secondary);white-space:nowrap}.teams .icon{width:31px;height:31px;margin:0 auto 5px}.match-card .btn{width:100%;margin-top:13px;font-size:12px;padding:4px 8px}.match-card>img{width:100%;aspect-ratio:2.5;object-fit:cover;margin-bottom:8px;border-radius:5px}.home-columns{display:grid;grid-template-columns:2fr 1fr;gap:24px}.featured-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}.featured-grid .card:first-child{grid-row:span 2}.featured-grid .card:first-child img{aspect-ratio:1.4}.featured-grid .card:first-child h3{font-size:23px}.featured-grid .card img{aspect-ratio:2.1}.featured-grid .card h3{font-size:15px}.featured-grid .card .body{padding:10px}.schedule{padding:17px;min-width:0}.schedule .section-head{gap:6px}.schedule h2{font-size:23px}.schedule .tabs{gap:3px}.schedule .tabs button{flex:1;padding:6px 8px;border-radius:7px}.schedule-date{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#f8faff;border-radius:7px;font-size:13px}.schedule-date button{background:none;border:0;color:var(--primary);font-size:24px}.schedule-row{display:flex;align-items:center;gap:14px;border-bottom:1px solid #edf0ff;padding:17px 0;font-size:13px}.schedule-row time{color:#bd3053;font-weight:700}.schedule-row .icon{width:32px;height:32px}.schedule-row .copy{flex:1}.schedule-row small{display:block;color:var(--muted)}.home-banner{min-height:160px}.home-banner .banner-copy{padding:22px;max-width:76%}.home-banner h2{font-size:32px}.gift-banner{min-height:160px;border:1px solid var(--border);position:relative;border-radius:12px;overflow:hidden;background:#f8efff;padding:23px}.gift-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.gift-banner .copy{position:relative;max-width:61%}.gift-banner h2{color:#8216eb}.why-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:30px}.why-item{text-align:center;background:#f8f9ff;border-radius:12px;padding:0 15px 15px}.why-item>.icon{margin:-17px auto 7px;width:35px;height:35px}.why-item h3{font-size:17px;margin-bottom:6px}.why-item p{font-size:13px;color:var(--muted);margin:0}.membership-layout{display:grid;grid-template-columns:3fr 1.15fr;gap:22px}.membership-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tier{border:1px solid var(--border);border-radius:12px;overflow:hidden}.tier h3{padding:13px;background:linear-gradient(110deg,#fff0e6,#ebccb3);color:#ae4918;display:flex;align-items:center;gap:9px}.tier:nth-child(2) h3{background:linear-gradient(110deg,#eef1f8,#c4c9d6);color:#232c59}.tier:nth-child(3) h3{background:linear-gradient(110deg,#ffe8a8,#f8bc62);color:#ab5203}.tier:nth-child(4) h3{background:linear-gradient(110deg,#f6e9ff,#be98ff);color:#7015ee}.tier .check-list{padding:10px;font-size:12px;gap:9px}.tier .btn{display:flex;margin:12px;border-radius:12px;font-size:12px;padding:6px}.membership-layout .responsible{padding:20px;display:flex;flex-direction:column}.membership-layout .responsible h2{font-size:24px;color:#18135e}.membership-layout .responsible img{width:140px;align-self:center;position:static;height:120px}.membership-layout .responsible .check-list{max-width:100%}.content-hero{padding:35px 0;background:linear-gradient(120deg,#f4f1ff,#eef5ff)}.content-hero h1{font-size:42px;margin:13px 0}.content-hero p{max-width:750px;color:var(--muted);font-size:17px}.content-layout{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(240px,1fr);gap:35px;padding:32px 0 45px}.prose{min-width:0;font-size:16px;line-height:1.9}.prose h2{font-size:26px;margin:30px 0 12px}.prose h3{font-size:20px;margin:20px 0 10px}.prose p{margin:0 0 16px}.prose ul,.prose ol{padding-left:25px;margin:12px 0 22px}.prose li{margin-bottom:8px}.prose .article-cover{width:100%;aspect-ratio:2;object-fit:cover;border-radius:12px;margin-bottom:24px}.prose .notice{padding:20px;border:1px solid #dcd5ff;border-radius:12px;background:#f7f4ff;margin:22px 0}.toc{padding:23px;align-self:start;position:sticky;top:90px}.toc h2{font-size:20px;margin-bottom:15px}.toc a{display:block;border-bottom:1px solid var(--border);padding:10px 0;font-size:14px}.toc .btn{margin-top:20px}.filters{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.filters input{min-width:0;flex:1;border:1px solid var(--border);border-radius:25px;padding:10px 20px}.filters select{border:1px solid var(--border);border-radius:25px;padding:10px 20px;background:#fff;color:var(--text)}.empty-result{display:none;padding:30px;text-align:center;color:var(--muted)}.member-panel{display:grid;grid-template-columns:1fr 1fr;max-width:900px;margin:40px auto;overflow:hidden}.member-panel>img{width:100%;height:100%;object-fit:cover;min-height:360px}.member-panel .copy{padding:40px}.member-panel h2{margin-bottom:18px}.member-panel .btn{display:flex;margin-top:20px}.simple-grid{padding:30px 0 50px}.simple-grid .panel{padding:26px}.simple-grid h2{margin-bottom:13px;font-size:24px}.simple-grid p{color:var(--muted)}.skip-link{position:absolute;top:-80px;left:12px;z-index:100;background:white;padding:12px;border:2px solid var(--primary);border-radius:8px}.skip-link:focus{top:10px}dialog{border:1px solid var(--border);border-radius:18px;padding:30px;color:var(--text);max-width:min(600px,calc(100% - 32px));width:100%}dialog::backdrop{background:#15104d80;backdrop-filter:blur(5px)}dialog h2{margin-bottom:17px}.dialog-close{float:right;border:0;background:#f0edff;border-radius:50%;width:32px;height:32px;font-size:22px;color:var(--primary)}#search-results{max-height:55vh;overflow:auto;margin-top:20px}#search-results a{display:block;padding:12px;border-bottom:1px solid var(--border);color:var(--secondary)}#video-content{line-height:1.8}.scroll-row{overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x mandatory;padding-bottom:3px}.scroll-row>.card{scroll-snap-align:start}.chip{border:1px solid #e0dbff;border-radius:20px;padding:5px 12px;font-size:12px;background:#faf8ff;color:#514590}.article-card[hidden]{display:none}
