/* Company theme: EasyPay green + navy. White copy only. Fonts unchanged. */
:root{
  --ink:#ffffff;
  --ink-2:#ffffff;
  --muted:#f3f7fb;
  --line:rgba(255,255,255,.2);
  --line-strong:rgba(255,255,255,.32);
  --paper:#0d3558;
  --canvas:#071b2e;
  --soft:#0a2f4a;
  --navy:#0b2748;
  --navy-2:#123a63;
  --brand:#008849;
  --brand-2:#00a65a;
  --brand-dark:#006336;
  --brand-pale:#0a4a38;
  --brand-deep:#ffffff;
  --gold:#c99741;
  --success:#7dffb0;
  --danger:#ffd0d0;
  --ok:#7dffb0;
  --accent:#1a5fb4;
  --accent-2:#0b2748;
  --green:#008849;
  --green-dark:#006336;
  --green-soft:#0a4a38;
  --ink-soft:#f3f7fb;
  --line-soft:rgba(255,255,255,.2);
  --hero-grad:linear-gradient(120deg,#0b2748,#1a5fb4);
  --hero-copy-bg:linear-gradient(120deg,#0b2748,#1a5fb4);
  --card:#0d3558;
  --shadow:0 18px 54px rgba(0,0,0,.28);
  --shadow-soft:0 8px 28px rgba(0,0,0,.18);
  --shadow-lg:0 22px 40px -12px rgba(0,0,0,.35);
}

html,body{
  background:#071b2e;
  color:#ffffff;
}
body{
  background:
    radial-gradient(920px 460px at 6% -12%,rgba(0,136,73,.22),transparent 58%),
    radial-gradient(720px 420px at 100% 0,rgba(26,95,180,.28),transparent 52%),
    #071b2e;
  color:#ffffff;
  font-family:Anuphan,"Noto Sans Thai",Tahoma,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.72;
  letter-spacing:.01em;
}
.eyebrow{
  font-weight:600 !important;
  font-size:13px !important;
  line-height:1.35 !important;
  letter-spacing:.04em !important;
}
h1,.hero-copy h1{
  font-weight:700 !important;
  line-height:1.28 !important;
  letter-spacing:.005em !important;
}
h2,.section h2{
  font-weight:650 !important;
  line-height:1.32 !important;
  letter-spacing:.008em !important;
}
h3,.service-grid h3,.product-card h3,.contact-grid h3{
  font-weight:600 !important;
  line-height:1.4 !important;
  letter-spacing:.01em !important;
}
p,li,.service-grid p,.hero-copy p,.contact-grid p,.faq-list p{
  font-weight:400 !important;
  line-height:1.72 !important;
  letter-spacing:.012em !important;
}
.nav-wrap nav a,.header-account a,.button{
  font-weight:600 !important;
  letter-spacing:.02em !important;
}
a{color:#ffffff}

h1,h2,h3,h4,h5,h6,p,li,dt,dd,th,td,small,strong,em,label,summary,figcaption,blockquote,
.eyebrow,.muted,.price,.sku,.chip,.tag,.result-count,.notice,
.section h2,.split-heading h2,.product-info h3,.product-card h3,.product-card p,
.service-grid p,.service-grid h3,.article-grid p,.article-grid h3,
.faq-list,.faq-list p,.lead-form label,.contact p,.contact-grid p,.contact-grid h3,
.steps li,.trust-list li,.mini-product p,.mini-product h2,.hero-copy,.hero-copy p,
.nav-wrap nav a,.header-account,.header-account a,.brand,.brand small,.brand::after,
#services,#services h2,#services h3,#services .eyebrow,#services .service-grid a,#services .service-grid p,
.category-tabs button,.catalog-toolbar,.sku-chip,.product-card .price{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff;
}

.hero-copy h1,.hero-copy h1 span,.hero-copy .eyebrow{
  color:#ffffff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:#ffffff !important;
}

.site-header{
  background:#0b2748 !important;
  border-bottom:3px solid #008849 !important;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.55) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.nav-wrap nav a{color:#ffffff !important}
.nav-wrap nav a:hover{background:rgba(0,136,73,.28) !important;color:#ffffff !important}
.header-account,.header-account a{color:#ffffff !important}
.header-account a:hover{color:#ffffff !important;background:none !important}
.account-divider{background:rgba(255,255,255,.35) !important}
.menu-toggle span{background:#ffffff !important}
.mobile-menu{
  background:#0b2748 !important;
  border-bottom:1px solid rgba(255,255,255,.16) !important;
}
.mobile-menu a{
  background:#008849 !important;
  color:#ffffff !important;
}
.mobile-menu a[aria-current="page"],.mobile-menu a:hover{
  background:#1a5fb4 !important;
  color:#ffffff !important;
}

.trust-bar{background:#0b1d34 !important;color:#ffffff !important}

.hero-copy{
  background:linear-gradient(120deg,#0b2748,#1a5fb4) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}
.hero-product,.mini-product,.bento,
.lead-form,.qr-card,.service-grid article,.faq-list details,
.article-grid article,.product-card,.contact-grid article,
.search-box,.category-tabs,.panel,.card,.form-box,.steps li,
.catalog-toolbar,.result-count,.sku-chip,.apply-grid>div,
.cart-item,.order-box,.pay-note{
  background:#0d3558 !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#ffffff !important;
  box-shadow:var(--shadow) !important;
}
.mini-product.accent{
  background:linear-gradient(115deg,#0b2748,#0a4a38) !important;
  color:#ffffff !important;
}
.mini-product h2,.mini-product.accent h2,.mini-product p,.mini-product.accent p{
  color:#ffffff !important;
}
.hero-image-shell{
  background:linear-gradient(180deg,#0b2748,#123a63) !important;
}
.tag,.eyebrow{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#ffffff !important;
}
.trust-list li{
  background:rgba(11,39,72,.55) !important;
  border-color:rgba(255,255,255,.18) !important;
  color:#ffffff !important;
}

.button.primary,.button.line,.nav-login{
  background:#008849 !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 8px 18px rgba(0,136,73,.32) !important;
}
.button.primary:hover,.button.line:hover,.nav-login:hover{
  background:#006336 !important;
  color:#ffffff !important;
}
.button.ghost{
  background:transparent !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.45) !important;
}
.button.ghost:hover{
  background:rgba(0,136,73,.22) !important;
  color:#ffffff !important;
  border-color:#00a65a !important;
}

.category-tabs button{color:#ffffff !important;background:transparent !important}
.category-tabs button.active,.category-tabs button[aria-selected="true"]{
  background:#008849 !important;
  color:#ffffff !important;
}
.category-tabs button:nth-child(2):not(.active),
.category-tabs button:nth-child(3):not(.active){
  background:rgba(26,95,180,.35) !important;
  color:#ffffff !important;
}

.apply-section{
  background:linear-gradient(145deg,#0b2748,#0a4a38) !important;
}
.section.soft-bg{background:transparent !important}
.notice{
  background:rgba(201,151,65,.16) !important;
  color:#ffffff !important;
  border-left-color:#c99741 !important;
}

footer,.site-footer{
  background:#071526 !important;
  color:#ffffff !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
}
footer a,.site-footer a{color:#ffffff !important}

/* Keep typed text readable in fields; labels stay white */
input,textarea,select,
.lead-form input,.lead-form select,.lead-form textarea,
.checkout-form input,.checkout-form textarea,.checkout-form select,
.filter-search,.filter-select,.qty-box input,.search-box input{
  background:#ffffff !important;
  color:#102033 !important;
  -webkit-text-fill-color:#102033 !important;
  border-color:#c9d6de !important;
}
input::placeholder,textarea::placeholder{color:#5b6b7a !important;-webkit-text-fill-color:#5b6b7a !important}

.product-photo-viewer{background:#0b2748 !important;color:#ffffff !important}
.product-photo-close{background:#008849 !important;color:#ffffff !important}
.product-gallery-message{background:rgba(11,39,72,.88) !important;color:#ffffff !important}
.preview-ribbon{background:#006336 !important;color:#ffffff !important}

.tag-cash,.tag-loan{background:rgba(255,255,255,.14) !important;color:#ffffff !important}
.float-call{background:radial-gradient(circle at 72% 78%,#5aa8ff 0%,#1a5fb4 52%,#0b2748 100%) !important}
.account-cart #cartCount{background:#008849 !important;color:#ffffff !important}

.service-grid .icon{
  display:grid !important;
  place-items:center !important;
  width:56px !important;
  height:56px !important;
  margin:0 0 16px !important;
  border-radius:16px !important;
  background:#008849 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-size:0 !important;
  line-height:0 !important;
  box-shadow:none !important;
}
.service-grid .icon svg{width:30px;height:30px;display:block;overflow:visible}
.service-grid .icon .stroke{fill:none;stroke:#ffffff;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.service-grid .icon .accent{fill:#ffffff;stroke:none}
.service-grid article{
  position:relative;
  cursor:pointer;
}
.service-grid article > a::after{
  content:"";
  position:absolute;
  inset:0;
}
.service-grid article:hover{
  border-color:#00a65a !important;
}

.contact-section{
  background:linear-gradient(145deg,#0b2748 0%,#0a4a38 58%,#071b2e 100%) !important;
}
.contact-grid{
  display:grid !important;
  grid-template-columns:1.08fr .92fr !important;
  gap:28px !important;
  align-items:center !important;
}
.store-map{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:18px;
  overflow:hidden;
  background:#0b2748;
  border:1px solid rgba(0,136,73,.45);
}
.store-map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  filter:grayscale(.12) invert(.9) hue-rotate(180deg) saturate(.55) brightness(.88);
}
.contact-grid .qr-card{
  margin-top:18px;
  background:#0b2748 !important;
  border:1px solid rgba(0,136,73,.45) !important;
}
footer,.site-footer{
  background:#0b2748 !important;
  border-top:3px solid #008849 !important;
}
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr !important}
  .store-map{aspect-ratio:16 / 9}
}

.trust-bar{display:none !important}
.nowrap{white-space:nowrap}
.hero.first-stage{
  display:grid !important;
  grid-template-columns:minmax(300px,.88fr) minmax(320px,1.12fr) !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:"copy image" "side side" !important;
  gap:16px !important;
  align-items:stretch !important;
  min-height:0 !important;
  padding:12px 0 0 !important;
  flex-direction:unset !important;
}
.hero.first-stage .hero-copy{
  grid-area:copy;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:22px 26px !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,#0b2748,#0a4a38) !important;
}
.hero.first-stage h1{
  font-size:clamp(26px,2.8vw,38px) !important;
  line-height:1.28 !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
.hero.first-stage .hero-copy::after{display:none !important}
.hero.first-stage .hero-lead,
.hero.first-stage .trust-list{display:none !important}
.hero.first-stage .hero-actions{margin-top:16px !important;flex-direction:row !important;flex-wrap:wrap;gap:10px}
.hero.first-stage .hero-actions .button{width:auto !important}
.hero.first-stage .hero-product{
  grid-area:image;
  position:relative;
  aspect-ratio:16 / 9;
  min-height:0 !important;
  height:auto !important;
  max-height:420px;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  border-radius:18px !important;
  background:#0b2748 !important;
}
.hero.first-stage .hero-image-shell{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
}
.hero.first-stage .hero-image-shell img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:58% 42% !important;
  filter:none !important;
}
.hero.first-stage .hero-product > div:last-child{display:none !important}
.hero.first-stage .hero-side{
  grid-area:side;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-rows:none !important;
  gap:16px !important;
  margin:0 0 8px !important;
}
@media (max-width:760px){
  .hero.first-stage{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto auto auto !important;
    grid-template-areas:"kicker" "title" "image" "actions" "side" !important;
    min-height:0 !important;
    gap:10px !important;
    padding:8px 0 0 !important;
  }
  .hero.first-stage .hero-copy{
    display:contents !important;
    padding:0 !important;
    background:none !important;
    min-height:0 !important;
    height:auto !important;
  }
  .hero.first-stage .eyebrow{grid-area:kicker;margin:0 !important}
  .hero.first-stage h1{grid-area:title;margin:0 !important;font-size:clamp(28px,8vw,36px) !important}
  .hero.first-stage .hero-actions{
    grid-area:actions;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .hero.first-stage .hero-actions .button{width:100% !important;min-height:48px}
  .hero.first-stage .hero-product{grid-area:image;border-radius:16px !important;aspect-ratio:4 / 5;max-height:38vh}
  .hero.first-stage .hero-image-shell img{object-position:50% 28% !important}
  .hero.first-stage .hero-side{
    grid-area:side;
    grid-template-columns:1fr !important;
  }
}