
:root{
  --hf: 'General Sans', 'Noto Sans Thai', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bf: var(--hf);
  --stone: #F5F6F8; --stone-2: #ECEEF1; --paper:#FFFFFF;
  --glass: rgba(255,255,255,.58); --glass-line: rgba(17,17,19,.09); --glass-hi: rgba(255,255,255,.9);
  --text-light: #4E4E56; --grey: #5E5E66;
  --ease: cubic-bezier(.2,.7,.1,1);
  --rad: 10px;
}
html[lang="th"]{ --hf:'General Sans','Noto Sans Thai',system-ui,sans-serif; --bf:var(--hf); }
html[lang="zh-Hans"]{ --hf:'General Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif; --bf:var(--hf); }
html{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body{ font-family: var(--bf) !important; font-size: 16px; line-height: 1.6; letter-spacing: -.003em; background: var(--paper); font-feature-settings: "kern","liga","ss01"; }
body *{ font-family: inherit; }
h1,h2,h3,h4,h5,.section-title,.card h3,.hero-sm h1,.stat-number,.logo-text,.logo-text span{ font-family: var(--hf) !important; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] .section-title{ font-weight: 500; letter-spacing: -.035em; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2{ letter-spacing: 0; font-weight: 500; }
p, li{ text-wrap: pretty; }
em, i, .gold{ font-style: normal !important; }


.site-header{ background: rgba(251,250,248,.72) !important; backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease; }
.site-header.d-scrolled{ border-bottom-color: var(--glass-line); background: rgba(251,250,248,.86) !important; }
.logo-text{ font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.logo-text span{ font-weight: 500; font-size: 10px; letter-spacing: .26em; }
.nav-link{ text-transform: none !important; letter-spacing: -.005em !important; font-size: 14px !important; font-weight: 450 !important; color: rgba(var(--ink-rgb), .72) !important; }
.nav-link:hover, .nav-link.active{ color: var(--ink) !important; background: transparent !important; }
.nav-link.active{ border-bottom-color: var(--red); }
.nav-dropdown{ border-radius: 12px; border: 1px solid var(--glass-line); border-top: 1px solid var(--glass-line) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(255,255,255,.9) !important; padding: 6px; }
.nav-dropdown a{ border-radius: 7px; border-bottom: 0 !important; font-size: 14px; text-transform: none; letter-spacing: 0; }
.header-right .btn-nom{ border-radius: 8px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; }
html .header-right .lang-btn{ border-radius: 7px; }


.btn-p, .btn-o, .btn-s, .btn-dark, .access-btn{ border-radius: 9px !important; text-transform: none !important; letter-spacing: -.005em !important; font-weight: 500 !important; font-size: 15px !important; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease) !important; }
.btn-o{ color: var(--ink) !important; border: 1px solid rgba(var(--ink-rgb), .18) !important; background: rgba(255,255,255,.5) !important; }
.btn-o:hover{ border-color: rgba(var(--ink-rgb),.64) !important; background: #fff !important; box-shadow: none !important; }
.btn-p:hover, .btn-o:hover{ transform: translateY(-1px); }


.section-sub{ font-weight: 500; letter-spacing: .18em; font-size: 11.5px; color: var(--red); }
.section-title{ font-size: clamp(30px, 4vw, 48px); line-height: 1.08; }
.gold-line{ height: 1px; background: var(--glass-line); margin: 26px 0 40px; }
.gold-line::before{ top: 0; width: 28px; height: 1px; background: var(--red); }
.gold-line::after{ display: none; }
.section-light{ background: var(--stone); }
.section-intro{ color: var(--text-light); font-size: 17.5px; max-width: 760px; }


.card, .accred-card, .svc-card, .sec-card, .how-step{ border-radius: 14px !important; border: 1px solid var(--glass-line) !important; background: rgba(255,255,255,.75) !important; overflow: hidden; }
.card{ background: radial-gradient(420px circle at var(--cx,50%) var(--cy,-40%), rgba(255,255,255,1), rgba(255,255,255,.7) 60%) !important; transition: border-color .25s ease, transform .3s var(--ease) !important; }
.card:hover{ border-color: rgba(var(--ink-rgb), .22) !important; transform: translateY(-2px) !important; }
.card::before{ display: none !important; }
.card h3{ font-weight: 550; font-size: 20px; letter-spacing: -.02em; }
.card-icon{ border-radius: 10px !important; color: var(--red) !important; background: var(--stone) !important; border: 0 !important; }
.card-link{ text-transform: none !important; letter-spacing: 0 !important; font-size: 14.5px !important; font-weight: 500 !important; color: var(--ink) !important; }
.card-link::after{ content: ' →'; display: inline-block; transition: transform .25s var(--ease); }
.card:hover .card-link::after, .card-link:hover::after{ transform: translateX(4px); color: var(--red); }
.accred-card{ border-top: 1px solid var(--glass-line) !important; }
.how-step{ border-top: 1px solid var(--glass-line) !important; }


.stats-banner{ background: var(--paper) !important; padding: 0 var(--sp-3); border-top: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line); }
.stats-banner::before{ display: none; }
.stat-item{ border-left: 1px solid var(--glass-line) !important; padding: 34px 26px 30px !important; }
.stat-item:first-child{ border-left: 0 !important; }
.stat-number{ color: var(--ink) !important; font-weight: 400 !important; font-size: clamp(34px, 3.6vw, 48px) !important; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat-label{ color: var(--text-light) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 450 !important; }
@media (max-width:1024px){ .stat-item{ border-top: 1px solid var(--glass-line) !important; } }


.hero-sm, .hero-sm[class*="hero-"]{ background: linear-gradient(180deg, var(--paper), var(--stone)) !important; border-bottom: 1px solid var(--glass-line) !important; padding: 96px var(--sp-3) 72px !important; overflow: hidden; }
.hero-sm::before{ display: none !important; }
.hero-sm .hero-content{ border-left: 0 !important; padding-left: 0 !important; position: relative; z-index: 2; }
.hero-sm .hero-content::before{ content:''; display:block; width: 28px; height: 2px; background: var(--red); margin-bottom: 26px; }
.hero-sm h1{ font-weight: 500 !important; letter-spacing: -.045em !important; font-size: clamp(36px, 5vw, 64px) !important; line-height: 1.02 !important; }
.hero-sm h1 .gold{ color: rgba(var(--ink-rgb),.64) !important; }
html[lang="th"] .hero-sm h1, html[lang="zh-Hans"] .hero-sm h1{ letter-spacing: 0 !important; line-height: 1.28 !important; }
.hero-sm p{ font-size: 18px; color: var(--text-light); }
@media (max-width:768px){ .hero-sm, .hero-sm[class*="hero-"]{ padding: 60px var(--sp-3) 46px !important; } }


.hero-light{ position:absolute; inset:0; pointer-events:none; z-index:1; background: radial-gradient(520px circle at var(--mx,70%) var(--my,30%), rgba(255,255,255,.95), rgba(255,255,255,0) 60%); mix-blend-mode: soft-light; opacity:.9; }
.hero-sm .hero-light{ background: radial-gradient(600px circle at var(--mx,80%) var(--my,20%), rgba(var(--acc-rgb),.06), rgba(var(--acc-rgb),0) 60%); mix-blend-mode: normal; }


.form-group input, .form-group select, .form-group textarea, .access-form input{ border-radius: 9px !important; }
.access-section{ background: linear-gradient(180deg, #17171A, #111113) !important; border-top: 0 !important; }
.access-section h2{ font-weight: 500 !important; letter-spacing: -.03em; }


.site-footer{ border-top: 0 !important; background: #121214 !important; }
.footer-col h4{ text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,.95) !important; }


main p a, .section p a, .faq-answer a{ text-decoration: none; background: linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition: background-size .3s var(--ease); }
main p a:hover, .section p a:hover{ background-size: 100% 1px; }


.dhero{ position: relative; overflow: hidden; background: var(--paper); padding: 0 var(--sp-3); isolation: isolate; }
.dhero .d-inner{ max-width: var(--mw, 1240px); margin: 0 auto; position: relative; z-index: 2; }
.dhero h1{ font-weight: 500; color: var(--ink); margin: 0; text-wrap: balance; }
.dhero h1 .gold{ color: rgba(var(--ink-rgb),.64); }
.dhero .d-lede{ color: var(--text-light); font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.55; max-width: 560px; margin: 0; }
.d-eyebrow{ display:flex; align-items:center; gap:10px; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb),.64); }
.d-eyebrow::before{ content:''; width: 22px; height: 1px; background: var(--red); }
.dhero .d-light{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(640px circle at var(--mx,72%) var(--my,30%), rgba(var(--acc-rgb),.07), rgba(var(--acc-rgb),0) 62%); transition: opacity .6s ease; }
.dhero .d-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(to right, rgba(var(--ink-rgb),.045) 1px, transparent 1px); background-size: calc(100% / 12) 100%; mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent); }
@media (prefers-reduced-motion: reduce){ *{ transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media (max-width: 480px){
  .logo-text{ font-size: 12.5px; line-height: 1.22; }
  html[lang="th"] .logo-text{ font-size: 11.5px; line-height: 1.3; }
  .logo-text span{ font-size: 8.5px; }
  .dhero .d-eyebrow{ display:none; }
}
.svc-grid .card{ border-top: 1px solid var(--glass-line) !important; }
.svc-grid .card h3{ border-bottom: 1px solid var(--glass-line) !important; padding-bottom: 12px; }


:root{ --ink:#0B0E14; --ink-rgb: 11,14,20; --text:#0B0E14; --text-light:#4A505C; --grey:#59606C; --border:#E3E6EB; --hair: rgba(11,14,20,.10);
  --glass-line: rgba(11,14,20,.10); --cool:#F5F6F8; --navy:#0B0E14; }
body{ letter-spacing: 0; font-feature-settings: "kern","liga"; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] .section-title{ font-weight: 500; letter-spacing: -.025em; }
.site-header{ background: #fff !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--glass-line) !important; }
.site-header.d-scrolled{ background:#fff !important; box-shadow: 0 1px 0 rgba(11,14,20,.04), 0 8px 24px -18px rgba(11,14,20,.25); }
.nav-dropdown{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff !important; box-shadow: 0 18px 40px -20px rgba(11,14,20,.25); }
.hero-light{ display:none !important; }
.card{ background:#fff !important; }
.card, .accred-card, .svc-card, .sec-card, .how-step{ border-radius: 12px !important; background:#fff !important; }
.card:hover{ border-color: rgba(var(--ink-rgb),.35) !important; transform: none !important; }
.card-icon{ background: var(--cool) !important; }
.hero-sm, .hero-sm[class*="hero-"]{ background: #fff !important; border-bottom: 1px solid var(--glass-line) !important; }
.hero-sm h1 .gold, .dhero h1 .gold{ color: #6B7280 !important; }
.section-light{ background: var(--cool) !important; }
.stats-banner{ background:#fff !important; }
.btn-o{ background:#fff !important; }
.site-footer{ background: #0B0E14 !important; }
.access-section{ background: #0B0E14 !important; }
