@font-face{font-family:'Kanit';src:url('fonts/kanit-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Kanit';src:url('fonts/kanit-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Kanit';src:url('fonts/kanit-extrabold.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:'Kanit';src:url('fonts/kanit-black.ttf') format('truetype');font-style:normal;font-weight:900;font-display:swap}
@media screen {
  :root{--v6-display-font:'Kanit','Leelawadee UI',Tahoma,sans-serif}
  body,button,input,select,textarea{font-family:var(--v6-display-font)}
  .brand-header-v6 {
    aspect-ratio: 30/6;
    min-height: 260px;
    max-height: 420px;
    background-image:
      radial-gradient(ellipse at 24% 48%,rgba(255,255,255,.98) 0%,rgba(255,240,247,.96) 25%,rgba(255,190,216,.74) 43%,rgba(210,23,76,.18) 61%,rgba(124,0,29,0) 74%),
      url('images/generated/header-motion-30x6-v6.webp');
    background-size: 100% 100%,cover;
    background-position: center,center;
    border-bottom: 4px solid #8a1538;
  }
  .brand-header-v6 .brand-content {
    width: min(56%,760px);
    align-items: center;
    text-align: center;
  }
  .brand-header-v6 .brand-content img {
    width: clamp(72px,7vw,116px);
    height: clamp(72px,7vw,116px);
    margin-bottom: 3px;
  }
  .brand-header-v6 .brand-title{display:flex;flex-direction:column;align-items:center;margin-top:1px;font-size:clamp(34px,3.4vw,54px);font-weight:900;line-height:1.02;letter-spacing:-.035em;text-align:center;text-shadow:none}
  .brand-header-v6 .brand-title-top{display:block;color:#341b42;text-shadow:0 4px 12px rgba(52,27,66,.18)}
  .brand-header-v6 .brand-title-top i{display:inline-block;margin-left:.08em;color:#e92c8c;font-size:.88em;font-family:Arial,sans-serif;font-style:normal;font-weight:400;transform:rotate(-8deg)}
  .brand-header-v6 .brand-title-bottom{display:block;color:#ff2e9a;background:linear-gradient(90deg,#ff2e9a 8%,#d832c8 56%,#a94dff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 12px rgba(193,77,255,.11)}
  .brand-header-v6 .brand-sub {font-size:clamp(16px,1.4vw,21px)}
  .brand-header-v6 .clock{display:block;margin-top:20px;transform:none;font-size:clamp(15px,1.25vw,19px);color:#fff;border:2px solid rgba(255,255,255,.86);background:linear-gradient(90deg,#e9288d,#c238ce);box-shadow:0 5px 14px rgba(161,25,111,.25);text-shadow:0 1px 2px rgba(81,15,75,.4)}
  .motion-bubble {
    position:absolute;
    display:block;
    border:2px solid rgba(255,255,255,.68);
    border-radius:50%;
    background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.72),rgba(255,190,218,.18) 35%,rgba(255,255,255,.03) 68%);
    box-shadow:inset 0 0 16px rgba(255,255,255,.45),0 0 18px rgba(255,210,228,.3);
    opacity:0;
    animation:bubbleRise 8s ease-in infinite;
  }
  .bubble-one{left:39%;bottom:-50px;width:42px;height:42px}
  .bubble-two{left:47%;bottom:-36px;width:27px;height:27px;animation-delay:2.6s}
  .bubble-three{right:7%;bottom:-62px;width:58px;height:58px;animation-delay:4.8s}
  .brand-header-v6 .motion-pulse{left:3%;top:57%;width:33%;opacity:.42}.brand-header-v6 .motion-pulse path{stroke:#df398d}
  .brand-header-v6 .motion-footstep{z-index:2;filter:grayscale(1) brightness(5) drop-shadow(0 0 6px #7a001f)}
  .brand-header-v6 .motion-footstep-one{right:25%;bottom:14%}
  .brand-header-v6 .motion-footstep-two{right:17%;bottom:7%}
  .brand-header-v6 .motion-footstep-three{right:7%;bottom:0;font-size:42px}
  @keyframes bubbleRise {
    0%{transform:translateY(0) scale(.72);opacity:0}
    18%{opacity:.58}
    72%{opacity:.36}
    100%{transform:translateY(-250px) translateX(24px) scale(1.12);opacity:0}
  }
  .welcome-v6{padding-top:clamp(24px,4vw,52px)}
  .brand-header-v6 .brand-title,.brand-header-v6 .brand-sub,.brand-header-v6 .clock,
  .site-header-v5 .site-identity,.site-header-v5 .nav-links,.site-header-v5 .menu-toggle,
  .site-header-v5 .nav-account,.welcome-v6 .welcome-brand h1,.welcome-card-v6,
  .footer-v5{font-family:var(--v6-display-font)}
  .welcome-v6 .welcome-brand h1{font-weight:900;letter-spacing:0}
  .welcome-v6 .project-kicker,.welcome-card-v6 h2,.welcome-card-v6 .welcome-summary,
  .welcome-card-v6 .welcome-choice,.welcome-card-v6 .btn{font-family:var(--v6-display-font)}
  .welcome-card-v6{width:min(100%,420px)}
  .welcome-card-v6 .welcome-illustration{aspect-ratio:4/3;object-position:center 42%}
  .welcome-card-v6 .btn{min-height:58px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:900}
  .mobile-header-login{display:none}
  .site-header-v5 .nav-inner-v5{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:min(1480px,100%);padding:8px clamp(16px,3vw,42px)}
  .site-header-v5 .nav-site-identity{justify-self:start}
  .site-header-v5 .nav-site-identity img{width:64px;height:64px}
  .site-header-v5 .nav-site-identity strong{font-size:clamp(22px,1.8vw,29px)}
  .site-header-v5 .nav-site-identity small{font-size:12px}
  .site-header-v5 .nav-inner-v5 .nav-links{min-width:0;justify-content:center}
  .site-header-v5 .nav-inner-v5 .nav-account{justify-self:end;margin:0;width:auto}
  .footer-v5 .footer-innovation{flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:0 auto 18px;text-align:center}
  .footer-v5 .footer-innovation img{display:block;width:180px;height:180px;margin:0 auto;object-fit:contain}
  .footer-v5 .footer-innovation div{align-items:center;text-align:center}
  .footer-v5 .footer-innovation strong,.footer-v5 .footer-innovation span,.footer-v5 .footer-innovation small{display:block;text-align:center}
  .footer-v5 .footer-copyright{display:block;text-align:center}
}
@media screen and (max-width:900px){
  .brand-header-v6{min-height:360px;max-height:none;background-size:100% 100%,auto 86%;background-position:center,right bottom}
  .brand-header-v6 .brand-content{width:56%;align-items:flex-start;text-align:left}
  .brand-header-v6 .motion-pulse{width:43%}
  .site-header-v5 .nav-inner-v5{grid-template-columns:minmax(0,1fr) auto auto}
  .site-header-v5 .nav-inner-v5 .menu-toggle{display:block;margin:0}
  .site-header-v5 .nav-inner-v5 .nav-links{grid-column:1/-1;grid-row:2;width:100%}
}
@media screen and (max-width:600px){
  .site-header-v5 .site-header-top{position:relative;width:100%;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;padding:8px 132px 8px 10px;gap:6px;overflow:hidden}
  .site-header-v5 .site-identity{flex:1 1 auto;min-width:0}
  .site-header-v5 .site-identity strong{font-size:19px}
  .site-header-v5 .nav-account{position:static;transform:none;width:auto;max-width:154px;display:flex;justify-self:end;flex:0 0 auto;margin:0;gap:4px}
  .site-header-v5 .guest-account{display:none}
  .site-header-v5 .header-login{min-width:0;max-width:116px;padding:8px 9px;font-size:16px;white-space:nowrap}
  .site-header-v5 .mobile-header-login{position:absolute;z-index:8;right:8px;top:50%;transform:translateY(-50%);width:116px;min-height:52px;display:flex;align-items:center;justify-content:center;padding:8px 7px;font-size:16px;white-space:nowrap}
  .site-header-v5 .nav-inner-v5{width:100%;max-width:100%;padding:9px 10px}
  .site-header-v5 .nav-inner-v5{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .site-header-v5 .nav-site-identity img{width:48px;height:48px}
  .site-header-v5 .nav-site-identity strong{font-size:19px}
  .site-header-v5 .nav-site-identity small{display:none}
  .site-header-v5 .nav-inner-v5 .nav-account{grid-column:2;grid-row:1;display:flex;position:static;transform:none;max-width:none}
  .site-header-v5 .nav-inner-v5 .menu-toggle{grid-column:1/-1;grid-row:2;display:block!important;margin:0 auto!important;min-width:126px}
  .site-header-v5 .nav-inner-v5 .nav-links{grid-column:1/-1;grid-row:3}
  .brand-header-v6{min-height:450px;padding:16px 14px 202px;background-image:linear-gradient(180deg,#fff5fa 0%,rgba(255,232,243,.98) 42%,rgba(239,55,103,.36) 61%,rgba(131,0,32,.04) 76%),url('images/generated/header-motion-30x6-v6.webp');background-size:100% 100%,auto 58%;background-position:center,right bottom}
  .brand-header-v6 .brand-content{width:100%;align-items:center;text-align:center}
  .brand-header-v6 .brand-title{font-size:clamp(34px,9.3vw,44px);line-height:1.02}
  .brand-header-v6 .clock{margin-top:34px;transform:none}
  .brand-header-v6 .brand-content img{width:86px;height:86px}
  .brand-header-v6 .motion-footstep-one{right:38%;bottom:13%}
  .brand-header-v6 .motion-footstep-two{right:24%;bottom:7%}
  .brand-header-v6 .motion-footstep-three{right:7%;bottom:0}
  .welcome-card-v6 .welcome-illustration{aspect-ratio:1/1;object-position:center}
}
@media (prefers-reduced-motion:reduce){
  .brand-header-v6,.brand-header-v6::after,.brand-header-v6 .motion-glow,.brand-header-v6 .motion-heart,.brand-header-v6 .motion-pulse path,.brand-header-v6 .motion-footstep,.brand-header-v6 .motion-bubble{animation:none!important}
  .brand-header-v6 .motion-bubble,.brand-header-v6 .motion-heart,.brand-header-v6 .motion-footstep{display:none}
}
@media print{.brand-header-v6{display:none!important}}